How to enlarge node and link click area?

GoJS
1

I use stateChart example template and i am puzzled how to make node click area (the inner one to move node) bigger? The linking area is like much bigger and sometimes when i want to move the node i link it by mistake. Same about link click area. I handled double click event on link but its narrow so sometimes i miss it.
I use desired size node property if it matters.

2

OK, there are two separate questions here. First, about nodes and where the user can start drawing new links. Second, about picking/clicking links.

The LinkingTool only allows the user to start drawing a new link from a port (declared with non-null GraphObject.portId) that has GraphObject.fromLinkable or .toLinkable set to true. In your case that’s the main Shape that surrounds the TextBlock. Since the TextBlock doesn’t have fromLinkable set to true, nor does it “inherit” true from a containing Panel, the user can click or drag from the text without starting the LinkingTool.

So you just need to increase the area of the non-fromLinkable objects. One way to do that is to increase its size by wrapping it with an “Auto” Panel.

        $(go.Panel, "Auto",
          $(go.Shape, { fill: "transparent", strokeWidth: 0 }),
          $(go.TextBlock,
            { margin: 10,  . . .  }, . . .)
        )

If you want to experiment to understand it better, change the new Shape.fill to “cyan”, just so you can see what area the panel covers. You can play with the margin on the TextBlock to control how much extra area is available for the user to click not on a port.

If you want to decrease the exposed area of the main “RoundedRectangle” Shape, you can set its Shape.spot1 and .spot2 properties:

        $(go.Shape, "RoundedRectangle",
          {
            parameter1: 20,  // the corner has a large radius
            spot1: new go.Spot(0, 0, 5, 5),
            spot2: new go.Spot(1, 1, -5, -5),
          . . .

You can play with the Spot offset values to adjust to the sizes that you like.

To make it easier to click on Links, it is commonplace to use a transparent thick Shape.

      $(go.Link,  // the whole link panel
        . . .
        $(go.Shape,  // the link shape
          { isPanelMain: true, strokeWidth: 1.5 }),
        $(go.Shape,  // a thick transparent link shape
          { isPanelMain: true, strokeWidth: 5, stroke: "transparent" }),
        $(go.Shape,  // the arrowhead
          . . .

Note that if you are going to have more than one Shape in the Link automatically get the Link.geometry, you need to set GraphObject.isPanelMain to true on each one.

Note also that even without a thick transparent link shape, users can click on the text labels to select a link.