For links connected to node bend should happen only after the whole Node not just some px aside the port

GoJS
1

I am facing an issue in GOJS version 2.2. I have a node with multiple ports, each assigned properties like AV-100. When I connect a link from one port to another, the link starts to bend a few pixels from the port. However, I want the link to remain straight until it has passed the entire node, and only then should it start bending.

image
image428Ă—431 12.1 KB

In this image, the green link starts to bend immediately after the port, rather than after the entire node ends. I want the link to behave like the red one shown in the image, where the bending starts only after the whole node.

2

What are the properties of the Link? And of the ports?
Is the “AV-100” TextBlock in the port or is it a label on the link? And what are its properties?

3

1) Link template

linkTemplate: this.$(
        go.Link,
        {
          toPortChanged: functionBlockCreation.updateLinkColor,
          locationSpot: go.Spot.Center,
          routing: go.Link.AvoidsNodes,
          curve: go.Link.JumpOver,
          corner: 3,
          selectionAdorned: false, // Links are not adorned when selected so that their color remains visible.
          shadowOffset: new go.Point(0, 0),
          shadowBlur: 5,
          shadowColor: "blue",
          reshapable: true,
          resegmentable: false,
          relinkableFrom: true,
          relinkableTo: true,
          isLayoutPositioned: false,
          zOrder: 10,
          segmentFraction: 0.5,
          layerName: "Background"
        },
        new go.Binding("isShadowed", "isSelected").ofObject(),
        this.$(
          go.Shape,
          { name: "SHAPE", strokeWidth: 1.5, stroke: Colors.connectionPurple },
          new go.Binding(
            "stroke",
            "isHighlighted",
            functionBlockCreation.strokeColorLink
          ).ofObject(),
          new go.Binding("strokeWidth", "isHighlighted", function (h) {
            if(h){
              return px13;
            }else{
            return px15;
            }
          }).ofObject()
        ),
        new go.Binding("points").makeTwoWay(),
         {contextMenu:new ContextMenuList().linkDataDeleteMenu()}
      ),

this is the link template we are using
2) port properties

this.$(
      go.Shape,
      {
        figure: shape,
        name: dataType,
        width: width,
        height: height,
        strokeWidth: 1,
        fill: fillColor,
        stroke: color,
        alignment: go.Spot.Center,
        alignmentFocus: go.Spot.Center,
        toLinkable: true,
        fromLinkable: true,
        fromSpot: go.Spot.Left || go.Spot.right, // this will change based on the port location either it is on right or left 
        toSpot: go.Spot.Left || go.Spot.right,, // this will change based on the port location either it is on right or left 
        angle: rotation,
        portId: portId,
        cursor: "pointer",
       },
      new go.Binding("figure", "figureType").makeTwoWay(),
      new go.Binding("fill", fillColor),
      new go.Binding("stroke", "Portcolor").makeTwoWay()
    );

3) AV-100 is the textBlock and it is part of node itself not port
and its a normal go.TextBlock with these Properties

 this.$(
      go.TextBlock,
      "Label", {
      visible: false,
      font: font,
      width: width,
      alignmentFocus: alignmentFocus, //go.Spot.Right,
      stroke: stroke,
      text: parameterValue,
      editable: editable,
      background: "#252525",
      position: new go.Point(top, bottom),
      textAlign: "end",
      alignment: alignment
    },
4

Is the “AV-100” TextBlock associated with a port even though it is not a piece of the port (because the port is a Shape instead of a Panel)? How are you positioning it with a port?

BTW, Spots are all capitalized: it needs to be go.Spot.Right. I assume you choose one or the other value correctly, since actually using || with Spots will always evaluate to the first one.

Also, setting segmentFraction on the Link has no effect. (And some of the property settings are just setting to default values, but that’s OK if you are doing so for clarity.)

I’m wondering if you need to use a custom Link class that overrides Link.computeEndSegmentLength in order to make sure the end segment is long enough to extend beyond the length of the node’s corresponding TextBlock.

5

How i can use this Link.computeEndSegmentLength is there any example available

6

I couldn’t find an appropriate example, since this requirement is somewhat unusual. (Normally that sort of text is associated with the link, not the node; and when it’s associated with the node it’s usually a piece of the port, not unrelated.)

But I can create a sample for you. I’d prefer to use version 3.0, though. Is there a reason you’re doing development but you’re still using a version from several years ago?

7

Thanks @walter please provide me some examples so i can use that to extend the end segment and related to updating the version we have some other tight dependency’s that’s why till date we are working on same but vary soon will update to V3 but till that movement your help will reduce some efforts for me.

8

Try using this class in your Link template(s), instead of just go.Link.

Of course your code will need to be smart about finding the correct TextBlock whose width you want to extend beyond.

class CustomLink extends go.Link {
  constructor(init) {
    super();
    if (init) Object.assign(this, init);
  }

  computeEndSegmentLength(node, port, spot, from) {
    let esl = super.computeEndSegmentLength(node, port, spot, from);
    if (spot.equals(go.Spot.Left) || spot.equals(go.Spot.Right)) {
      const label = node.findObject("TB");  // THIS NEEDS TO BE SMARTER
      if (label !== null) {
        esl = Math.max(esl, label.actualBounds.width);
      }
    }
    return esl;
  }
}
1 Like
9

Thanks @walter it’s working.