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.