javascript - 单击它时如何更新 JointJS 中链接的标签？

Question

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

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

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

这是我的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>

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

感谢您的关注，我希望足够明确

Answer 1

您需要能够捕获链接 View 上的指针单击事件

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

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

1. 通过扩展普通链接创建新链接并扩展链接 View 并覆盖 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' } } });
     },
    });