Easy way to choose a port when when port shape is too small

GoJS
1

We have a node like this image:
table
But we face an issue, the port size is small, so it’s hard to choose the port. Sometimes users choose the image instead of choosing the port. But our designer doesn’t wanna increase port size.
So how to create a bigger port with a smaller icon?
Thanks,

2

There are several ways to do this.

One is to increase the size of the port, but only have the main piece of it be seen – i.e. have a transparent area outside of the visible small black circle.

    myDiagram.nodeTemplate =
      $(go.Node, "Horizontal",
        $(go.Panel,  // the port on the left, an input
          {
            width: 12, height: 12, background: "transparent",
            portId: "I", toLinkable: true, cursor: "pointer"
          },
          $(go.Shape, "Circle",
            { position: new go.Point(3, 3), width: 6, height: 6, strokeWidth: 0 })
        ),
        $(go.TextBlock,  // the main body of the node; the details don't matter...
          { margin: 8, editable: true },
          new go.Binding("text").makeTwoWay()),
        $(go.Panel,  // the port on the right, an output
          {
            width: 12, height: 12, background: "transparent",
            portId: "O", fromLinkable: true, cursor: "pointer"
          },
          $(go.Shape, "Circle",
            { position: new go.Point(3, 3), width: 6, height: 6, strokeWidth: 0 })
        )
      );

    myDiagram.linkTemplate =
      $(go.Link,
        {
          fromPortId: "O", fromSpot: go.Spot.Right, fromShortLength: -3,
          toPortId: "I", toSpot: go.Spot.Left, toShortLength: -3
        },
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle", segmentOffset: new go.Point(3, 0) })
      );

In order to compensate for the larger port, links need to appear to connect with the little circle. That is achieved by setting Link.fromShortLength and Link.toShortLength, and shifting the arrowhead by setting GraphObject.segmentOffset.

I suppose you might want to make similar changes in the LinkingTool.temporaryLink, but I don’t show that above and I haven’t tried it.

EDIT: Hmmm, my link template might be a bit misleading, since unlike these nodes, your nodes will have many input ports and many output ports or many input-or-output ports. But you have already set up your GraphLinksModel appropriately to handle that.

3

Your solution is work fine.
Thanks for your help.