Link toSpot and fromSpot curve

Hi,

I am trying to set the link toSpot and fromSpot look nicer when it links to node like this:

image

But right now, I am getting something like this:

image
And this:

image

Here is my current setup:

myDiagram.nodeTemplateMap.add("Joint",
    $(go.Node, "Vertical",
      {
        locationSpot: new go.Spot(0.5, 0.5), locationObjectName: "SHAPE",
        resizable: false, resizeObjectName: "Picture",
        // fromSpot: go.Spot.LeftSide,
        // toSpot: go.Spot.RightSide,
        fromSpot: new go.Spot(0.35, 0.65), toSpot: new go.Spot(0.65, 0.65),
        fromEndSegmentLength: 0, toEndSegmentLength: 0
      },
      new go.Binding("angle").makeTwoWay(),
      new go.Binding("location", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
      $(go.TextBlock,
        {alignment: go.Spot.Center, textAlign: "center", margin: 5, editable: true},
        new go.Binding("text").makeTwoWay(),
        // keep the text upright, even when the whole node has been rotated upside down
        new go.Binding("angle", "angle", function (a) {
          return a === 180 ? 180 : 0;
        }).ofObject(),
        new go.Binding("opacity", "opacityNumber", x => x)),
      $(go.Picture,
        {
          name: "Picture",
          margin: new go.Margin(0, 8, 6, 10),
        },
        new go.Binding("source", "category", findImage),
        new go.Binding("desiredSize", "category", findImageSize),
        new go.Binding("opacity", "opacityNumber", x => x))
    ));

myDiagram.linkTemplate =
    $(go.Link,
      {routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, corner: 20},
      // $(go.Shape, {isPanelMain: true, stroke: "grey", strokeWidth: 5}),
      new go.Binding("points").makeTwoWay(),
      new go.Binding("opacity", "opacityNumber", x => x),
      $(go.Shape, {isPanelMain: true, strokeWidth: 8},
        new go.Binding("stroke", "isHeating", function (b) {
          if (b) {
            return "red";
          } else {
            return "#324F64";
          }
        }))
    );

So my question is:

  1. Because of my textblock is bigger than the picture, so I have to set fromSpot and toSpot into a specific position, is there any way to make a node only consider in the picture?
  2. If I set fromSpot: LeftSide, toSpot: RightSide, there might be some case that link will go under the node (last screenshot). Is there anyway to avoid this?

Thank you in advance,
Tri

I suggest that you declare that Picture as your node’s only port – set portId: "". Read more at: GoJS Ports in Nodes-- Northwoods Software.

On that port/Picture, set fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides. On the whole Node, set portSpreading: go.Node.SpreadingNone.

Delete the other port properties from the Node, or move them to the Picture.

Thank you a lot :) It works perfect !

I am curious about if we are able to config a node if it already had the link From on the Left, so the To should be on the Right, just to avoid this case:

image

It comes in and out at the same side if we use this:

fromSpot: go.Spot.LeftRightSides, 
toSpot: go.Spot.LeftRightSides

Again, thank you a lot :)

Yes, those “…Sides” Spots are supposed to route to the nearest side.

I suppose you could say fromSpot: go.Spot.Right, toSpot: go.Spot.Left.