Link labels longer than links

GoJS
1

Hi,

I have a link labels on some of the links.
Some of these labels are longer than the links and it overlap the shapes.
How can I force the links width to be longer than the labels?

Thanks,
Eyal

2

The length of a link depends on the position of the connected nodes. So perhaps you could modify the layout?

Alternatively, why don’t you set the label’s TextBlock.maxSize to new go.Size(100, NaN) or some appropriate maximum width, to force the text to wrap?

3

I tried to change the TextBlock.maxSize to new go.Size(100, NaN) but it doesn’t help because the words are too long.
What do you mean by modify the layout?

4

Setting a maximum width guarantees that the object (it’s a TextBlock in your case, isn’t it?) won’t be wider than that. How have you declared your label?

5

Here is the code for the link

routeDiagram.linkTemplate =
  $(go.Link,
     { routing: go.Link.Orthogonal, curve: go.Link.JumpOver },
    $(go.Shape, { strokeWidth: 2.5 }, new go.Binding("stroke", "output", getArrowColor)),
    $(go.Shape, { toArrow: "kite", stroke: null, scale: 1.5 }, new go.Binding("fill", "output", getArrowColor)),
    $(go.TextBlock, "left", { textAlign: "center", maxSize: new go.Size(250, NaN), minSize: new go.Size(150, 17), stroke: "#0000cc", segmentOffset: new go.Point(0, -10) }, new go.Binding("text", "text"))
  );
6

So the label is indeed a TextBlock and you are forcing its width to be at least 150 and at most 250. That’s certainly a lot wider than the 100 that you said that you had tried. So, either way, can you show what the problem is?

7

You can see the problem in the following image

image
image.png757×493 35.2 KB

8

What I would do is increase the space between the nodes. What is your Diagram.layout?

9 
routeDiagram =
  $(go.Diagram, "routeContainer",
    {
        // have mouse wheel events zoom in and out instead of scroll up and down
        "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
        initialAutoScale: go.Diagram.Uniform,
        "linkingTool.direction": go.LinkingTool.ForwardsOnly,
        layout: $(go.LayeredDigraphLayout, { isInitial: false, isOngoing: false, layerSpacing: 50 }),
        "undoManager.isEnabled": true
    });
10

You have effectively disabled automatic layouts by setting both Layout.isInitial and Layout.isOngoing to false. When do you call Diagram.layoutDiagram? Or how are you determining the node locations?

You might want to increase the LayeredDigraphLayout.layerSpacing property, if the layout is ever performed.

11

I changed the layerSpacing from 50 to 100 and it’s looks much better.
The only question I have is if there is a way to make this spacing value to be dynamic for each link.
I mean that if the link label is wide, so the link width will be long, otherwise it will be short

12 
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
  function findMaxLabelWidth(edges, angle) {
    var w = 0;
    var r = new go.Rect();
    edges.each(function(e) {
      var link = e.link;
      if (!link) return;
      var lab = link.findMidLabel();
      if (lab) {
        lab.getDocumentBounds(r);
        if (angle === 90 || angle === 270) {
          w = Math.max(w, r.height);
        } else {
          w = Math.max(w, r.width);
        }
      }
    });
    return w;
  }

  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            "undoManager.isEnabled": true,
            layout:
              $(go.LayeredDigraphLayout,
                {
                  nodeMinLayerSpace: function(v, topleft) {
                    if (v.node === null) return 0;
                    if (this.direction === 90 || this.direction === 270) {
                      if (topleft) {
                        return v.focus.y + 10;
                      } else {
                        return v.bounds.height - v.focus.y + 10 + findMaxLabelWidth(v.destinationEdges, this.direction);
                      }
                    } else {
                      if (topleft) {
                        return v.focus.x + 10;
                      } else {
                        return v.bounds.width - v.focus.x + 10 + findMaxLabelWidth(v.destinationEdges, this.direction);
                      }
                    }
                  }
                })
          });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape,
          { fill: "white", portId: "" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text"))
      );

    myDiagram.linkTemplate =
      $(go.Link,
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle" }),
        $(go.TextBlock, new go.Binding("text"))
      );

    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" },
      { key: 5, text: "Epsilon", color: "yellow" }
    ],
    [
      { from: 1, to: 2, text: "short" },
      { from: 1, to: 3, text: "a very long long label" },
      { from: 2, to: 5, text: "X" },
      { from: 3, to: 4, text: "Y" }
    ]);
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>