How to increase clickable area of a shape?

GoJS
1

For a node template, I am using a go.Shape inside of a go.Node. I would like users to be able to click on this shape.

The visual area of the shape is quite thin and small, and I would like users to be able to click on the margin area around the shape to make it easier for them.

To better understand, please look at the image below:

Right now, the users have to click on the three vertical dots and have to precisely place their cursor within that shape to do so. I’d like to increase the clickable area of this shape to extend to the top right half of the node in general.

2

How are you defining your Shape? Here’s one way to do it:

        $(go.Shape,
          {
            alignment: go.Spot.TopRight,
            background: "transparent",
            geometry: go.Geometry.parse("F1 M10 2 v2 m0 2 v2 m0 2 v2 m4 3"),
            stroke: "gray", strokeWidth: 2,
            click: function (e, obj) { alert(obj.toString()); }
          })

The point is that this Geometry is defined to have undrawn points that are to the left and to the right of the column of dots.

Note that I did not set Shape.geometryString, because that not only parses the string as a Geometry, but also normalizes the geometry by shifting everything so that there’s no empty space at the top or at the left sides.

You can change the background to be “lime” or some other garish color just so that you can see the area occupied by the Shape.

3

I hadn’t considered doing it within the shape’s geometry.

That makes sense. I was able to get the area I needed based on your approach.

Thanks for your help!