Link label box not visible on linking between two nodes

GoJS
1

Here, i had used textBlock for assigning the label between two nodes and it is working fine in version v2.1.22 but now i have upgrade my version to 2.3.11 can you please suggest me changes.

                $(go.TextBlock, "Label", {
                            width: 60,
                            height: 16,
                            name: "linkLabel",
                            margin: go.Margin.parse("4 15 0 9"), editable: true,
                            maxLines: 1,
                            textAlign: "center",
                            isMultiline: true,  // don't allow embedded newlines
                            //textValidation: validateText,
                            textEdited: function (textBlock, previousText, currentText) {
                                var condition = true;
                                $rootScope.EdgepreviousText = previousText;
                                getAllConnectedLinksOfSelectedNode = myDiagram.findNodeForKey(myDiagram.selection.first().data.from).findLinksConnected();
                                var count = validateLinkName(getAllConnectedLinksOfSelectedNode, currentText);
                                if (count > 1) {
                                    MbtDiagramInstance.setSelectedNodeProperty('text', previousText);
                                    ServiceFactory.notifier($scope, 'Multiple edges with same name cannot start from same vertex', 'Error');
                                    return false;
                                }
                                if (previousText == currentText) {
                                    condition = false;
                                }
                                if (condition) {
                                    var selectedData = myDiagram.selection.first().data;
                                    if (selectedData.hasOwnProperty('EdgeID')) {
                                        var edgeName = currentText.split('\u00AD');
                                        if (edgeName.length > 1) {
                                            edgeName = currentText.split('\u00AD')[1].trim();
                                        } else {
                                            edgeName = currentText;
                                            //edgeName = currentText.trim();
                                        }
                                        if (currentText.trim() == "") {
                                            saveButtonEnable = false;
                                            ServiceFactory.notifier($scope, 'vertex/edges name can not be blank', 'Error');
                                            MbtDiagramInstance.setSelectedNodeProperty('text', previousText);
                                        } else {
                                            $scope.MBTOperationScope.renameEdge(edgeName);
                                        }

                                    }
                                } else {
                                    saveButtonEnable = false;
                                }
                            }
                        },
                            new go.Binding('visible', 'text', function (t) {
                                return t.trim() !== ''
                            }),
                            new go.Binding("text", "text", function (e) {
                                if (e != "") {
                                    return e;
                                }
                            }).makeTwoWay(),
                            {
                                toolTip:
                                    $("ToolTip",
                                        new go.Binding("visible", "text", function (t) {
                                            if (t.trim('') == "Associated FL Name :") {
                                                t = '';
                                            }
                                            return !!t;
                                        }).ofObject("TB"),
                                        $(go.TextBlock,
                                            { name: "TB", margin: 4, font: "bold 12px Verdana,serif", stroke: "black" },
                                            new go.Binding("text", "", diagramNodeInfo))
                                    )
                            }
                        ),

this is my expected output

image
image411×610 9.58 KB

and this is what i get
image
image456×670 10.4 KB

2

If you are upgrading, you might as well go to the latest version, 2.3.13.
I don’t encounter any problems when using 2.3.13. My code is shown below.

I do notice that your conversion function for the TextBlock.text Binding is wrong when the data value is an empty string. It returns undefined instead of a string value such as “”.

function (e) {
        if (e != "") {
          return e;
        }
      }

This function really doesn’t do anything – I wouldn’t bother with specifying a conversion function at all.

You could try using go-debug.js to see if there are any warnings or errors in the console window.

So, how can I reproduce the problem?

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>

  <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      layout: $(go.TreeLayout, { angle: 90 }),
      "undoManager.isEnabled": true
    });

myDiagram.linkTemplate =
  $(go.Link,
    $(go.Shape, { stroke: "gray", strokeWidth: 2 }),
    $(go.Shape, { fromArrow: "Circle", fill: "gray", strokeWidth: 0 }),
    $(go.Shape, { toArrow: "Standard", fill: "gray", strokeWidth: 0 }),
    $(go.TextBlock, "Label", {
      width: 60,
      height: 16,
      name: "linkLabel",
      margin: go.Margin.parse("4 15 0 9"), editable: true,
      maxLines: 1,
      textAlign: "center",
      isMultiline: true,  // don't allow embedded newlines
    },
      new go.Binding('visible', 'text', function (t) {
        return t.trim() !== ''
      }),
      new go.Binding("text", "text", function (e) {
        if (e != "") {
          return e;
        }
      }).makeTwoWay(),
    )
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[
  { from: 1, to: 2, text: "1 to 2" },
  { from: 2, to: 3, text: "" },
  { from: 3, to: 4, text: "3 to 4" },
]);
  </script>
</body>
</html>