Hidden spot inside RoundedRectangle shape

GoJS
1

Hi, I have faced with an issue with RoundedRectangle shape that is using inside group template. In the next screenshot, you can see that link from Gamma node is pointing to the center of the Epsilon group.

rounded-rectangle
rounded-rectangle581×767 9.48 KB

However, if I change shape from RoundedRectangle to Rectangle, this hidden spot disappears from the group center.

rectangle
rectangle509×720 8.64 KB

What am I doing wrong? My goal is to force a link that connected from the node inside group to the group itself follow by group perimeter without jumping to the group center while connected node moving.
Code:

function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            initialContentAlignment: go.Spot.Center,
            "undoManager.isEnabled": true
          });

    myDiagram.nodeTemplate =
        $(go.Node, "Auto",
          { locationSpot: go.Spot.Center },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape, "Rectangle",
            {
              fill: "white",
              portId: "", cursor: "pointer", 
              fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
              toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
            },
            new go.Binding("fill", "color")),
          $(go.TextBlock,
            {
              font: "bold 14px sans-serif",
              stroke: '#333',
              margin: 6,  
              isMultiline: false,  
              editable: true 
            },
            new go.Binding("text", "text").makeTwoWay()), 
        );

    myDiagram.groupTemplate =
        $(go.Group, "Vertical",
          {
            selectionObjectName: "PANEL", 
            ungroupable: true  
          },
          $(go.TextBlock,
            {
              font: "bold 19px sans-serif",
              isMultiline: false, 
              editable: true 
            },
            new go.Binding("text", "text").makeTwoWay(),
            new go.Binding("stroke", "color")),
          $(go.Panel, "Auto",
            { name: "PANEL" },
            $(go.Shape, "Rectangle",  // <---- Here is the problem spot RoundedRectangle
              {
                fill: "rgba(128,128,128,0.2)", stroke: "gray", strokeWidth: 3,
                portId: "", cursor: "pointer", 
                fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
                toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
              }),
            $(go.Placeholder, { margin: 10, background: "transparent" })  
          )
        );

    myDiagram.linkTemplate =
      $(go.Link,
        new go.Binding("fromSpot"),
        new go.Binding("toSpot"),
        $(go.Shape),
        $(go.Shape, { toArrow: "Standard"})
      )

    var nodeDataArray = [
        { key: 3, text: "Gamma", color: "lightgreen", group: 5, loc: "300 100" },
        { key: 4, text: "Delta", color: "pink", group: 5, loc: "500 300" },
        { key: 5, text: "Epsilon", color: "green", isGroup: true },
        { key: 6, text: "Test", color: "blue", group: 5, loc: "100 -300" }
      ];
      var linkDataArray = [
        { from: 3, to: 5, color: "purple" }
      ];
      myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  }
2

We’ll investigate. Thanks for pointing out what seems to be a bug.

3

Try v2.1.36: GoJS version 2.1.36
It’s still not perfect, but it should be much better.

4

Hi, Walter,
Yes, I think that the issue was partially fixed.
In case when template has parameter1 set to value greater than 11, it still jumps to the center.
Here is what I changed in the group template:

myDiagram.groupTemplate =
        $(go.Group, "Vertical",
          {
            selectionObjectName: "PANEL", 
            ungroupable: true  
          },
          $(go.TextBlock,
            {
              font: "bold 19px sans-serif",
              isMultiline: false, 
              editable: true 
            },
            new go.Binding("text", "text").makeTwoWay(),
            new go.Binding("stroke", "color")),
          $(go.Panel, "Auto",
            { name: "PANEL" },
            $(go.Shape, "RoundedRectangle",  // <---- Here is the problem spot RoundedRectangle
              {
                fill: "rgba(128,128,128,0.2)", stroke: "gray", strokeWidth: 3,
                portId: "", cursor: "pointer", 
                fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
                toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
                parameter1: 12 // <----- This value breaks link
              }),
            $(go.Placeholder, { margin: 10, background: "transparent" })  
          )
        );

3
3570×731 11.5 KB

The issue is reproducible only for RoundedRectangle with parameter1 > 11.
To quickly reproduce it using my example, set loc of Gamma node to “317 -21”, link should immediately point to the group center.
NOTE: Gamma node has link to epsilon group, like in my previous message.

5

The remaining problem, as I remember it, was when one port’s connection point was inside the other port AND the other port’s connection point was inside that port. In your case, that is when the node covers the center of the group. For now, that is the current behavior.

6

But if I set parameter1 between 1 and 11, everything works fine.

7

I guess you are lucky!