单击它时如何在 JointJS 中更新 link 的标签？

Question

几天来我一直在努力解决这个问题。情况如下：

我希望当我单击图表的 link 时，我可以修改 link 具有的标签。到目前为止，我能做的是我有一个文本输入，我可以在其中写入我想要的文本，然后当我连接两个元素时，我创建的 link 将有这个标签，但有点错误（主要是，我必须再次连接和断开一个元素才能在 link).

中具有我需要的标签

我想如果您知道哪种方法是合适的，这可以很容易地完成，但我不知道（即使我一直在看文档）。

这是我的js代码：

graph.on('change:source change:target', function(link) {
    if (link.get('source').id && link.get('target').id) {
        // both ends of the link are connected.
        $('#link-input').css('display', 'block');
        link.attr('text/text', $('#link').val());
    }
});

甚至我认为这无关紧要，HTML 是这个：

<div id="link-input" class="form-group">
    <label for="description">Link Condition</label>
    <textarea class="form-control" rows="5" id="link"></textarea>
</div>

因此，当我写入该文本输入时，它会特别刷新 link 的方法（但不知何故我知道我应该维护我正在修改的对象）。如果有人知道另一种方法请说，我这样做是因为我不知道如何用另一种方式做。

谢谢关注，希望能说清楚

Answer 1

您需要能够捕获 link 视图上的指针单击事件

然后在 pointerclick 事件上打开一个文本框进行输入并将其保存到 link 属性。

我为我的项目做了类似的事情

通过扩展正常的 link 创建新的 link 并扩展 link 视图并覆盖 pointerclick 事件。

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

    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': 6 },
            sourcePort:{text:''},
            targetPort:{text:''},
            '.link-tools .tool-remove circle': { r: 8, fill:'#fff',position: 0.5 },
            customLabel:{text:''},
        },
        labels: [ { position: 0.5, attrs: { text: { text: '' } } }  ]
    }, joint.dia.Link.prototype.defaults),
  });    

 joint.shapes.deviceLinkView = joint.dia.LinkView.extend({
   pointerclick: function (linkview, evt, x, y){
     prompt for new label and change your label 
this.model.label(0, { attrs: { text: { text: 'new label' } } });
  },
 });

单击它时如何在 JointJS 中更新 link 的标签？

How to update label of a link in JointJS when i click it?

javascript

jquery

web

jointjs