Can't make link label editable

Hello,

I have a simple link label that I want to make editable, but when I set editable to true it doesn’t do anything. Is there anything extra that is required? Can’t find any documentation on this.

Sorry, having trouble formatting this code in the post:

return GoJs(go.Link, { reshapable: false, resegmentable: false, relinkableFrom: false, relinkableTo: false, isShadowed: false, selectionAdornmentTemplate: GoJs(go.Adornment, 'Auto', { isShadowed: true, shadowBlur: 8, shadowColor: 'grey', shadowOffset: new go.Point(0, 2) }, GoJs(go.TextBlock, { shadowVisible: false }, { textAlign: 'center', editable: true, font: '14px Roboto', stroke: 'white', margin: 4 }, new go.Binding('text', 'label').makeTwoWay()) ) }, GoJs(go.Shape, { shadowVisible: false }, { stroke: 'black', strokeWidth: 2, fill: 'black' } ), GoJs(go.TextBlock, { editable: true, textAlign: 'center', font: '14px Roboto', stroke: 'black', margin: 4 }, new go.Binding('text', 'label').makeTwoWay()), GoJs(go.Shape, { toArrow: 'Triangle', scale: 2, stroke: 'black', fill: 'black' }) );

The problem is that you have TWO TextBlocks: one in the Link, and one in the selection Adornment.

The one in the Adornment cannot be edited. Try this instead:

    myDiagram.linkTemplate =
      $(go.Link,
        { selectionAdorned: false },
        $(go.Shape, { strokeWidth: 2 },
          new go.Binding("stroke", "isSelected", function(s) { return s ? "dodgerblue" : "black"; }).ofObject()),
        $(go.TextBlock,
          { editable: true, textAlign: 'center', font: '14px Roboto' },
          new go.Binding("stroke", "isSelected", function(s) { return s ? "white" : "black"; }).ofObject(),
          new go.Binding("background", "isSelected", function(s) { return s ? "dodgerblue" : null; }).ofObject(),
          new go.Binding('text', 'label').makeTwoWay()),
        $(go.Shape, { toArrow: 'Triangle', scale: 2, strokeWidth: 0 },
          new go.Binding("fill", "isSelected", function(s) { return s ? "dodgerblue" : "black"; }).ofObject()),
      );

Even simpler:

    function BindSelection(name, yes, no) {
      return new go.Binding(name, "isSelected", function(s) { return s ? yes : no; }).ofObject();
    }

    myDiagram.linkTemplate =
      $(go.Link,
        { selectionAdorned: false },
        $(go.Shape, { strokeWidth: 2 },
          BindSelection("stroke", "dodgerblue", "black")),
        $(go.TextBlock,
          { editable: true, textAlign: 'center', font: '14px Roboto' },
          new go.Binding('text', 'label').makeTwoWay(),
          BindSelection("stroke", "white", "black"),
          BindSelection("background", "dodgerblue", null)),
        $(go.Shape, { toArrow: 'Triangle', scale: 2, strokeWidth: 0 },
          BindSelection("fill", "dodgerblue", "black"))
      );

Thanks for the improvements, that’s helpful in making it more readable. The reason for the selection adornment is because the label changes significantly when it’s selected. I guess I might have to try to change the way it looks without the selection template.