Ports and scrollbar

haspal · June 23, 2022, 3:22pm

Hi , I have an issue in implementing scrollbar and ports together.
eg - There are A,B and C node and they contain scrollbar and ports. The arrowheads on links display properly when there is no scrollbar in the node. if the node has scrollbar, the arrowhead goes behind the node. Is there any way to bring the arrow head to the front of the node.

I have tried using layer and when i give layer foreground to links , the lines come in front of the node , but when the node is moved, links of other nodes comes in front of the node.

walter · June 23, 2022, 3:46pm

Each Part, whether a Node or a Link, is drawn completely before the next Part is drawn. So there is no way to draw part of a Link, draw a bunch of Nodes, and then finish drawing the Link.

Normally I would have thought that users would want to see the whole path of a Link, and not let it be partly hidden by Nodes.

Perhaps you could arrange the scrollbar to overlap the stuff on the left side of the panel? You would need to make sure that there was enough of a margin on the right side of the stuff so that nothing interesting would be covered-up by the scrollbar.

haspal · June 23, 2022, 4:07pm

So do i have to add margin to the scrollbar to show the ports at that given position?

walter · June 23, 2022, 4:50pm

When I created a simple node template with scrollable items, I didn’t have a problem with the scrollbar:

<!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 src="https://unpkg.com/gojs/extensions/ScrollingTable.js"></script>
  <script id="code">
const $ = go.GraphObject.make;

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

myDiagram.nodeTemplate =
  $(go.Node, "Vertical",
    {
      selectionObjectName: "SCROLLER",
      resizable: true, resizeObjectName: "SCROLLER",
    },
    $(go.TextBlock,
      { font: "bold 14px sans-serif" },
      new go.Binding("text")),
    $(go.Panel, "Auto",
      $(go.Shape, { fill: "white" }),
      $("ScrollingTable",
        {
          name: "SCROLLER",
          width: 100, height: 120,      // initial size
          stretch: go.GraphObject.Fill  // but stretches vertically
        },
        new go.Binding("TABLE.itemArray", "items"),
        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
        {
          "TABLE.itemTemplate":
            $(go.Panel, "TableRow",
              { defaultStretch: go.GraphObject.Horizontal },
              $(go.Panel, "Table",
                { margin: 1, fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides },
                new go.Binding("portId", "id"),
                $(go.RowColumnDefinition, { row: 0, background: "lightgray" }),
                $(go.TextBlock,
                  new go.Binding("text", "name"))
              )
            )
        }
      )
    )
  );

myDiagram.linkTemplate =
  $(go.Link,
    { fromShortLength: 2 },
    $(go.Shape),
    $(go.Shape, { fromArrow: "Standard" }),
    $(go.Shape, { toArrow: "Standard" }),
  )

const nodes = [
  { key: 1, text: "Header 1", items: [] },
  { key: 2, text: "Header 2", items: [] }
];
let items = nodes[0].items;
for (let i = 0; i < 15; i++) {
  items.push({ id: i, name: "item " + i.toString() });
}
items = nodes[1].items;
for (let i = 0; i < 6; i++) {
  items.push({ id: i, name: "item " + i.toString() });
}
const links = [
  { from: 1, fpid: 2, to: 2, tpid: 3 },
  { from: 1, fpid: 5, to: 2, tpid: 4 }
];
myDiagram.model = new go.GraphLinksModel(nodes, links,
  {
    linkFromPortIdProperty: "fpid",
    linkToPortIdProperty: "tpid"
  });
  </script>
</body>
</html>

haspal · November 11, 2022, 9:50am

hi, is there a way to bring the port arrowheads of links to the right of the scrollbar as in the below diagram ?

haspal · November 14, 2022, 10:38am

hi @walter , could you please check on the above possibility…

walter · November 14, 2022, 2:13pm

Maybe something like this?

      $("ScrollingTable",
        {
          name: "SCROLLER",
          width: 100, height: 120,      // initial size
          stretch: go.GraphObject.Fill,  // but stretches vertically
          "TABLE.defaultRowSeparatorStroke": "white"
        },
        new go.Binding("TABLE.itemArray", "items"),
        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
        {
          "TABLE.itemTemplate":
            $(go.Panel, "TableRow",
              { defaultStretch: go.GraphObject.Horizontal, background: "lightgray" },
              { fromSpot: new go.Spot(1, 0.5, 14, 0), toSpot: new go.Spot(0, 0.5, -1, 0) },
              new go.Binding("portId", "id"),
              $(go.TextBlock, //{ textAlign: "center" },
                new go.Binding("text", "name"))
            )
        }
      )

haspal · November 15, 2022, 10:47am

Thanks the ports are moving a little away from the scrollbar, but we wanted the ports to show up in the leftRightside and take the shortest route when we move the nodes. (should move the port links to left /right side appropriately). As we are giving same spot points, the ports are at a single spot and it looks like below…

eg- if there are links

from port -item2 to port item 4,
from port item2 to port item 3,

we can see that the arrowhead( port) is at the same point, we want it to be at different points and if there are scrollbar it shud be after scrollbar and if the nodes are moved the ports also should be moved to right/left of node accordingly.

the expected diagram would be similar to below one:

walter · November 15, 2022, 3:01pm

Try having the scrollbar (named “SCROLLBAR”) of the “ScrollingTable” be in the same Table column as the contents that are being scrolled. So the scrollbar is overlaying the contents.

myDiagram.nodeTemplate =
  $(go.Node, "Vertical",
    {
      selectionObjectName: "SCROLLER",
      resizable: true, resizeObjectName: "SCROLLER",
    },
    $(go.TextBlock,
      { font: "bold 14px sans-serif" },
      new go.Binding("text")),
    $(go.Panel, "Auto",
      $(go.Shape, { fill: "white" }),
      $("ScrollingTable",
        {
          name: "SCROLLER",
          "SCROLLBAR.column": 0,
          "SCROLLBAR.alignment": go.Spot.Right,
          width: 100, height: 120,      // initial size
          stretch: go.GraphObject.Fill,  // but stretches vertically
          "TABLE.defaultRowSeparatorStroke": "white"
        },
        new go.Binding("TABLE.itemArray", "items"),
        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
        {
          "TABLE.itemTemplate":
            $(go.Panel, "TableRow",
              { defaultStretch: go.GraphObject.Horizontal, background: "lightgray" },
              { fromSpot: go.Spot.RightSide, toSpot: go.Spot.LeftSide },
              new go.Binding("portId", "id"),
              $(go.TextBlock, //{ textAlign: "center" },
                new go.Binding("text", "name"))
            )
        }
      )
    )
  );