Link toSpot and fromSpot curve

@tri wrote:

Hi,

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

But right now, I am getting something like this:

And this:

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

Posts: 3

Participants: 2

Read full topic