Overlapping Dimensioning Links

GoJS
1

Hello,
I have a problem with links from one port to another. Unfortunately, they overlap and are not automatically displayed on top of each other.

It should look like this:
Overlapping1

But that’s the way it looks at the moment:
Overlapping2

As you can see, I use dimensioning links with the following template.

 $(DimensioningLink, {
         relinkableFrom: true,
         relinkableTo: true,
         reshapable: true,
         resegmentable: true,
         layerName: "Foreground"
         },
         new go.Binding("fromSpot", "fromSpot", go.Spot.parse),
         new go.Binding("toSpot", "toSpot", go.Spot.parse),
         $(go.Shape, { stroke: "black" },
             new go.Binding("stroke", "color")),
         $(go.Shape, { fromArrow: "BackwardOpenTriangle", segmentIndex: 2, stroke: "black" },
             new go.Binding("stroke", "color")),
         $(go.Shape, { toArrow: "OpenTriangle", segmentIndex: -3, stroke: "black" },
             new go.Binding("stroke", "color")),
         $(go.TextBlock,
             {
                 segmentIndex: 2,
                 segmentFraction: 0.5,
                 segmentOrientation: go.Link.OrientUpright,
                alignmentFocus: go.Spot.Bottom,
                 stroke: "black",
                 font: "8pt sans-serif"
             },
             new go.Binding("stroke", "color"),
             new go.Binding("text", "desc"))
     );

Also, here is the template of the group in which the links are placed.

 $(go.Group, "Vertical", {
             layout: $(go.LayeredDigraphLayout, { direction: 90, columnSpacing: 3}),
             selectable: false
         },
         $(go.TextBlock,         // group title
             { alignment: go.Spot.TopCenter,
                 font: "Bold 12pt Sans-Serif"
             },
             new go.Binding("text", "key")),
         $(go.Panel, "Auto",
             $(go.Shape, "RoundedRectangle",  // surrounds the Placeholder
                 { name: "BorderRectangle",
                     fill: "transparent" }),
             new go.Binding("minSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
             $(go.Placeholder,    // represents the area of all member parts,
                 { padding: new go.Margin(30, 5, 5, 3)})  // with some extra padding around them
         )
 );
2

I think you want to use different values for the DimensioningLink.extension.

3

Is there a way to set this parameter automatically?
I could write a function that loops through all of the links to get a correct extension value. But how do I call a function when creating a new link?

4

If you cannot assign the extension values in the link data, you could use a conversion function in the Binding to compute the value when the DimensioningLink is initialized.

5

Thanks, I thought there might be an easier way.

6

Another little problem:
I’ve bound DimensioningLink.extension to a variable, but if I change it, the link is not redrawn with the new extension value. The link will not be redrawn until I create a new transaction for something.

new go.Binding("extension", "ext", function(ext) {
            return parseInt(ext);
  }
7

What do you mean by bound to a variable? Do you mean to model data?

Maybe the changing data values section of the binding intro would be useful.

8

I only meant that “extension” is bound to “ext” (as you can see in the code above). I also have a text box built in to give “ext” a value. If you do that, “ext” is also updated in the linkDataArray, but the link is not redrawn directly. Only when I start another transaction (for example, create a new node) the link will be drawn with the updated “ext” value.

9

Are you calling setDataProperty within a transaction to update the data in the linkDataArray? That’s what the link provided above shows.

10

No, the problem is that the DimensioningLink.extension property setter does not call invalidateRoute.

11

Many thanks! With calling InvalidateRoute it works.