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

Question

I've been struggling with this a bit from some days. The situation is the following:

I want that when I click on a link of my graph, I can modify the label that the link has. So far what I've been able to do is that I have a textinput where I write the text I want and then when I connect two elements, the link I create will have this label but is a bit buggy (Mainly, I have to connect and disconnect again an element to have the label I need in the link).

I guess that this can be done easily if you know which is the appropriate way but I have no idea (Even I've been looking at the doc).

This is the js code I have:

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());
    }
});

And even I think that is not relevant, the HTML is this one:

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

So what I would be fine with an approach that when I write to that textinput, it refreshes on that link in particular (but somehow I know I should mantain the object I am modifying). If someone know another approach please say, I do in this way because I have no idea how to do in another way.

Thanks for your attention, I hope to be explicit enough

Answer 1

You will need to be able to capture the pointerclick event on the link view

Then on the pointerclick event open up a text box to take an input and save it to the link attributes.

I did something similar for my project

1. Crete new link by extending the normal link and extend the link view also and override the pointerclick event.

     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' } } });
     },
    });