Question

我正在尝试使用该“新” stopDelegation功能。我想提供纸张的“只读”视图，并且几乎完成了-最后缺少的是纸张的可移动性（拖动）。好吧，它是可移动的，但在抓取元素/形状/链接时不会移动。该选项应如何使用？我实际上正在使用v2.4.0试用版（角度6）。

根据文档，我的猜测是“ stopDelegation”是CellView.InteractivityOptions（或ElementView.InteractivityOptions）的属性。但这似乎不起作用。

    const self = this;
    const paper = (this.paper = new joint.dia.Paper({
      width: 1000,
      height: 1000,
      gridSize: 10,
      drawGrid: true,
      model: graph,
      cellViewNamespace: appShapes,
      defaultLink: <joint.dia.Link>new appShapes.app.Link(),
      interactive: function(cellView, event) {
        return {
          linkMove: self.isEditable,
          labelMove: self.isEditable,
          arrowheadMove: self.isEditable,
          vertexMove: self.isEditable,
          vertexAdd: self.isEditable,
          vertexRemove: self.isEditable,
          useLinkTools: self.isEditable,
          elementMove: self.isEditable,
          addLinkFromMagnet: self.isEditable,
          stopDelegation: self.isEditable
        } as joint.dia.CellView.InteractivityOptions;
      }
    }));

在self.isEditable == false上，纸张在抓住元素时应该是可移动的，但不是（仅在指向纸张上的空白处时才可移动）。

（我还必须稍微调整rappis.d.ts，以使交互成为返回CellView.InteractivityOptions对象的函数...）。

我做错了什么，还是一个错误？还是不是打算/设计使用这种方式（只允许移动纸张而不是父“元素”）？

Answer 1

stopDelegation属性仅与嵌入式元素有关。由于纸张不是任何元素的“父”，因此交互性永远不能委托给纸张。锁定纸张移动是Rappid PaperScroller功能。

Rappid PaperScroller

    var paperScroller = new joint.ui.PaperScroller({
        paper: paper,
        cursor: 'grab'
    });

    paperScroller.lock();

如何通过jointjs纸张选项使用/设置stopDelegation（基于Angular 6 Kitchensink示例）

1 个答案: