仅在联合js中使链接具有交互性

Question

我得到了这个带有一些矩形和 links 的联合 js 代码:

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
    el: $('#div1'),
    interactive: false,
    width: 1200,
    height: 1200,
    model: graph,
    gridSize: 1
});
    var rect1 = new joint.shapes.basic.Rect({
        position: { x: 80, y: y_value },
        size: { width: 30, height: 55 },
        attrs: { 
            rect: { fill: bgcolor1,'stroke-width': 0 },
            text: {
                text: 'Rect1',
                fill: 'white'
            } 
        }
    });

    var rect2 = new joint.shapes.basic.Rect({
        position: { x: 80, y: y_value + 80 },
        size: { width: 30, height: 55 },
        attrs: { 
            rect: { fill: bgcolor1,'stroke-width': 0 },
            text: {
                text: 'Rect1',
                fill: 'white'
            } 
        }
    });

    var link{{ pre }} = new joint.dia.Link({
        source: { id: rect1.id },
        target: { id: rect2.id },
        vertices: [{ x: initialx, y: syposition.y + 23 }, { x: initialx, y: typosition.y + 23 }],
    });

如你所见，我在 'false' 中有论文属性交互，因此用户不能拖放任何元素或删除 links，buttt 实际上想要他可以随意拖动 link 顶点，我该怎么做？属性在 joint.min.css 中？或者从这段代码中有什么办法??

提前致谢！

Answer 1

首先，您可以将 interactive 定义为一个函数，returns true 用于链接，false 用于元素。这使得链接具有交互性，而元素则没有。

var paper = new joint.dia.Paper({
  interactive: function(cellView) {
    return cellView.model.isLink();
  }
});

根据文档

interactive - if set to false, interaction with elements and links is disabled. If it is a function, it will be called with the cell view in action and the name of the method it is evaluated in ('pointerdown', 'pointermove', ...). If the returned value of such a function is false interaction will be disabled for the action. For links, there are special properties of the interaction object that are useful to disable the default behaviour. These properties are: vertexAdd, vertexMove, vertexRemove and arrowheadMove. By setting any of these properties to false, you can disable the related default action on links.

通过执行以下操作，您可以仅启用顶点移动。

interactive: function(cellView) {
  if (cellView.model.isLink()) {
    return {
      vertexAdd: false,
      vertexRemove: false,
      arrowheadMove: false,
      // vertexMove: true
    }
  }
  return false;
}

http://jsfiddle.net/kumilingus/03omcuLm/

仅在联合js中使链接具有交互性

Make only links interactive in joint js

css

jointjs