Increasing drag connection hitbox without impacting the template visually

GoJS
1

I have nodes like these:

I can drag connections from and to these nodes. At the moment the hitbox for dragging out a connection is set to the box surrounding the picture. But the selection hitbox is a bit small (matches the width of the box stroke itself). I’d like to increase the size of the hitbox (preferably on the outside so I don’t make it harder to move the node), without visually changing it (for example I don’t want to increase the actual width of the stroke), or how the connections attach to it at all. Is there a simple way to do this? This is how my template currently looks:

myDiagram.nodeTemplateMap.add(EquipmentNodeType.CAMERA,
    $(go.Node, "Vertical",
        {
            contextMenu: nodeMenu,
            locationSpot: go.Spot.Center
        },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Panel, "Auto",
            $(go.Shape, "RoundedRectangle",
                { fill: "transparent", stroke: "DarkGreen",
                    portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer", toEndSegmentLength: 50, fromEndSegmentLength: 40}),
            $(go.Picture, {desiredSize: new go.Size(30, 30), source: "resources/primefaces-svv/images/kamera.png"})
        ),
        $(go.TextBlock, EquipmentNodeType.CAMERA, textStyle(),
            new go.Binding("text", "text"))
    ));
2

One way to achieve that is to add a margin to the “Auto” Panel and enclose it in another Panel that has a “transparent” background. For explanation purposes I will use “lime” instead of “transparent”:

    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        { locationSpot: go.Spot.Center },
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        $(go.Panel,
          { background: "lime", cursor: "pointer" },
          $(go.Panel, "Auto", { margin: new go.Margin(0, 8) },
            $(go.Shape, "RoundedRectangle",
              {
                fill: "transparent", stroke: "DarkGreen",
                portId: "", fromLinkable: true, toLinkable: true, toEndSegmentLength: 50, fromEndSegmentLength: 40
              }),
            $(go.Picture, "../samples/images/iptv broadcast server.jpg",
              { desiredSize: new go.Size(30, 30), cursor: "default" })
          )
        ),
        $(go.TextBlock,
          new go.Binding("text", "text", function(t) { return t + " " + t; }))
      );

So when the mouse is in that green area, the cursor will be “pointer”. But a mouse-down and mouse-move in that green area but outside of the actual port object will not cause the LinkingTool to start. That behavior can be changed by overriding LinkingTool.findLinkablePort:

      $(go.Diagram, "myDiagramDiv",
          {
            . . .,
            "linkingTool.findLinkablePort": function() {
              var port = go.LinkingTool.prototype.findLinkablePort.call(this);
              if (port !== null) return port;
              var obj = this.diagram.findObjectAt(this.diagram.firstInput.documentPoint, null, null);
              if (obj !== null && obj.cursor === "pointer") return obj.part.port;  // assume default port
              return null;
            },
            . . .
          });

In this override I’m assuming that if the mouse is over an object whose GraphObject.cursor === “pointer” we want to start the LinkingTool on the node’s default port, Node.port.

Note also that I set the Picture’s cursor to “default”, so that users are not misled in thinking that they could start drawing a new link from the picture.

3

Thank you, this did exactly what I was looking for :)

4

Except for the lime green color, I hope. :)

5

Well, yeah :) Set it to transparent.