javascript - 如何在Jointjs中禁用UML状态图中的链接删除？

Question

我有使用jointjs绘制的UML状态图，并且各种状态通过链接连接。将鼠标悬停在链接上时，单击后会出现一个十字符号，链接将被删除。我想禁用链接上的十字符号。

Answer 1

您将需要创建一个从 joint.dia.link 扩展的自定义链接，并将该链接用于您的图表。查看joint.core.js 了解更多详细信息，查看joint.shapes.uml.js

步骤1。通过直接从 joint.dia.link 扩展或从下面扩展来创建自定义 uml 链接

• joint.shapes.uml.Generalization
• joint.shapes.uml.Implementation
• joint.shapes.uml.Aggregation
• joint.shapes.uml.Composition

• joint.shapes.uml.Association

  joint.shapes.yourLink = joint.dia.Link.extend({

//删除删除链接的十字，修改toolMarkUp以不显示任何内容，如下所示并使用您的新链接

toolMarkup: [
].join(''),

添加当前链接的剩余属性，例如源、目标等

})

我的项目中的示例代码

  joint.shapes.deviceLink = joint.dia.Link.extend({

 // i modified the vertexMarkup to not create vertexes.
    vertexMarkup: [
        '<g class="marker-vertex-group" transform="translate(<%= x %>, <%= y %>)">',
        '<circle class="marker-vertex" idx="<%= idx %>" r="1" />',
        '</g>'
    ].join(''),


    defaults: joint.util.deepSupplement({
      type: 'deviceLink',
        connection: { name: 'orthogonal' },
        attrs: {
           '.connection': { stroke: '#fe854f', 'stroke-width': 3 },
            sourcePort:{text:''},
            targetPort:{text:''},
            '.link-tools .tool-remove circle': { r: 8, fill:'#fff',position: 0.5 },
        },
        labels: [ { position: 0.5, attrs: { text: { text: '' } } }  ]

    }, joint.dia.Link.prototype.defaults),
  });

  joint.shapes.deviceLinkView = joint.dia.LinkView.extend({
    mouseover: function (evt, x, y) {
   //my custom mouseover function
    },
    mouseout: function (evt, x, y) {
  // my custom mouseout function
  });