Gojs link jumps when gojs node image object exists

gojs link jumps when gojs node image object exists… how do i fix this problem?

ezgif.com-gif-maker

What happens in those modal dialogs?
What are the differences between those two situations?

This happens when I add picture object to node object

goMake(go.Node, "Spot",
            this.getNodeDefaultOptions(),
            {
                locationSpot: go.Spot.TopLeft,
                locationObjectName: "MAINPANEL",
                resizeObjectName: "MAINPANEL",
                rotateObjectName: "MAINPANEL",
                toolTip: goMake("ToolTip",
                    goMake(go.TextBlock, { margin: 3, editable: true, maxSize: new go.Size(250, NaN) },
                        new go.Binding("text", "processSteps", (val: INodeStep) => {
                            return val?.name ? MLHelper.getMLText(val.name) : "";
                        })
                    ),
                    new go.Binding("visible", "processSteps", (val: INodeStep) => {
                        return val?.name ? true : false;
                    })
                )
            },
            new go.Binding("resizable", "nodeConfig", (val: INodeConfig) => {
                return val.resizable ? false : !val.isLock;
            }),
            goMake(go.Panel, "Spot",
                this.getMainShapeOptions(),
                {
                    name: "MAINPANEL",
                    desiredSize: new go.Size(100, 100)
                },
                {
                    doubleClick: (e: go.InputEvent, obj: go.GraphObject) => {
                        e.event.stopPropagation();
                        this.openStepModel(obj, 0);
                    }
                },
                goMake(go.Shape,
                    this.getShapeFontOptions(),
                    {
                        cursor: "pointer",
                        toLinkable: true,
                        fromLinkable: true,
                        portId: ""
                    },
                    new go.Binding("figure", "shapeType", (figureType: any, node: go.Node) => {
                        if (figureType)
                            return this.getShapeTypeByIndex(figureType)?.shapeType;
                        else if (node.part.data?.processSteps?.processStepTypeId)
                            return this.getFromToolBoxItems(node.part.data?.processSteps?.processStepTypeId)?.shapeType;
                        else
                            return "None"
                    })
                ),
                goMake(go.TextBlock,
                    this.getTextBlockFontOptions(),
                    {
                        name: "TOOLBOX_TEXTBLOCK",
                        textAlign: "center",
                        verticalAlignment: go.Spot.Center,
                        editable: false,
                        margin: 10,
                        stretch: go.GraphObject.Fill,
                        minSize: new go.Size(0, 0),
                        overflow: go.TextBlock.OverflowEllipsis
                    },
                    new go.Binding("text", "processSteps", (val: INodeStep) => {
                        let name = "";
                        let orderNo = "";
                        if (!isNullOrUndefined(val.name))
                            name = MLHelper.getMLText(val.name);
                        if (!isNullOrUndefined(val.orderNo))
                            orderNo = val.orderNo.toString() + " - ";
                        return orderNo + name;
                    })
                ),
                this.getPortShapes(shapeType),
                { contextMenu: this.getContextMenu() }
            ),
            goMake(go.Picture,
            {
                name: name,
                source: imageSource,
                desiredSize: new go.Size(16, 16),
                alignment: spot,
                visible: false,
                alignmentFocus: alignmentFocus,
                mouseOver: this.infoBoxHolder,
                mouseLeave: this.removeBoxHolder
            },
            new go.Binding("visible", "processSteps", function (val: INodeStep) {
                return visible ? visible(val) : false;
            }),
            {
                toolTip: goMake(go.Adornment, "Auto", { visible: false }),
                doubleClick: function (e: go.InputEvent, obj: go.GraphObject) {
                    if (args.doubleClick) args.doubleClick(e, obj);
                },
                click: (e: go.InputEvent, node: go.GraphObject) => {
                    if (click) click(node.part);
                }
            }
        )
)

image

I don’t understand – you are talking about the routing behavior of a link during a dragging operation. What does that have to do with whether or not there’s a Picture in the Node?

If you check the gif, the link calculation goes wrong when there is an image object
ezgif.com-gif-maker

You could try setting DraggingTool | GoJS API to false.

When I set isComplexRoutingRealtime to false and move the object there is no problem, but when I drop the object the link calculates it wrong again

ezgif.com-gif-maker (1)

Could you please temporarily set the Node’s background to “lime” so that we can see how large the Node actually is when the Picture is visible?

Which version of GoJS are you using?

We’ll try to reproduce the issue.

v2.2.14.

Thank you very much for your support

Try adapting the Node.avoidableMargin to account for the empty space that links have to go through to get to the port. For example:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv");

myDiagram.nodeTemplate =
  $(go.Node, "Spot",
    {
      // set this so that an AvoidsNodes link doesn't have to cross over a piece of the node
      // when the appendage within the node is visible
      avoidableMargin: new go.Margin(2, 2, 2, 2-10),  // assumes the appendage has an actualBounds.width of 10
      // dynamically toggle the appendage's visibility
      doubleClick: (e, node) => {
        e.diagram.commit(diag => {
          node.elt(1).visible = !node.elt(1).visible;
          node.avoidableMargin = node.elt(1).visible ? new go.Margin(2, 2, 2, 2-10) : new go.Margin(2);
        });
      }
    },
    $(go.Panel, "Auto",
      { width: 100, height: 100 },
      $(go.Shape,
        { fill: "white", portId: "" },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        new go.Binding("text"))
    ),
    $(go.Shape, { alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.TopRight,
                  width: 10, height: 10, strokeWidth: 0 })
  );

myDiagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.AvoidsNodes },
    $(go.Shape),
    $(go.Shape, { toArrow: "OpenTriangle" })
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
],
[
  { from: 1, to: 2 },
]);
  </script>
</body>
</html>

Thank you very much it worked