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

Question

我得到了这个带有一些矩形和链接的联合 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 }],
    });     

如您所见，我将 paper 属性设置为“false”，因此用户不能拖放任何元素或删除链接，但实际上他希望他可以随意拖动链接顶点，我该怎么做它？， joint.min.css 中的属性？或者从这段代码那里有办法吗？？

提前致谢!

Answer 1

首先，您可以将 interactive 定义为一个函数，它为链接返回 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/