Node selection when clicking anywhere in this object


#1

My nodeTemplate:

$(
    go.Node,
    $(
        go.Shape,
        { fill: 'white', strokeWidth: 1, figure: 'LineH' },
        new go.Binding('strokeDashArray', 'strokeDashArray'),
    ),
);

I can select a node only if I explicitly clicked on it. If I click on the figure itself without a line, then I cannot select it.

Please tell me if there is a solution.


#2

I am unclear what it is that you want users to be able to do.

Since you have not specified a size for the Shape, it defaults to 100x100.

Because the geometry specified by the “LineH” figure is just a straight line, there is no area within the geometry to be filled, so the Shape.fill setting to “white” has no effect. (Try setting it to a different color, and you will see that it has no effect.)

Because the Shape effectively has a desired height of 100, there is a lot of area to the shape that is empty. If you want to fill that area, set Shape.background to a color.

If you set the background to “white”, the whole square area of the Shape will be white, except where the Shape’s geometry is drawn in black. (It’s black because that’s the default value for Shape.stroke.) The user’s clicking in that area will pick that Shape, thereby allowing the user to select the Node.

If you set the background to “transparent”, the Shape looks the same on a white background, but will not obscure any other Parts that happen to be behind the area of the Shape.


#3

Big thanks.

Solution:

$(
    go.Node,
    $(
        go.Shape,
        { background: 'transparent', strokeWidth: 1, figure: 'LineH' },
        new go.Binding('strokeDashArray', 'strokeDashArray'),
    ),
);

Now I can choose a shape when I click anywhere inside it.