Getting Shape in MouseOver


I’m trying to highlight nodes on mouse over. Here is my node template:

// define the step Node template
    Make(go.Node, go.Panel.Auto,
            locationSpot: go.Spot.Top,
            selectable: false,
            mouseEnter: (e: any, obj: any) => {
                this.onDecisionHoverStart(e, obj);
            mouseLeave: (e: any, obj: any) => {
                this.onDecisionHoverEnd(e, obj);

        Make(go.Shape, "Hexagon",
                fill: "#E0E0E0",
                stroke: "gray",
                strokeWidth: 2,
                stretch: go.GraphObject.Horizontal,
                portId: "",  // so that links connect to the Shape, not to the whole Node
                fromSpot: go.Spot.RightSide,
                toSpot: go.Spot.LeftSide,
                alignment: go.Spot.Center,
                angle: 90,
                font: "bold 16px sans-serif",
                alignment: go.Spot.Center,
                wrap: go.TextBlock.WrapFit,
                margin: 10,
                cursor: 'pointer'
            new go.Binding("text", "label").makeTwoWay())

Here are my event handlers:

  onDecisionHoverStart(e:any, obj:any): void {
        console.log('node hover start');
        var shape = obj.findObject("SHAPE");
        if (shape) shape.fill = "#1958b5";


    onDecisionHoverEnd(e: any, obj: any): void {
        console.log('node hover end');
        var shape = obj.findObject("SHAPE");
        if (shape) shape.fill = "#E0E0E0";

But the problem is that ob.findObject(“SHAPE”); always returns null.

What am i doing wrong here?

obj isn’t null but I can’t make sense of it’s attributes.

In your template I don’t see any set to “SHAPE”, much less a Shape named “SHAPE”.


I didn’t know the lookup was looking for a name attribute.