Dynamically changing selectionObjectName to different part of the Same node not working properly

GoJS
1

I have node template as shown below and a click event handler for each of the individual parts in the Node Template. When clicked I am changing the selectionObjectName dynamically to highlight the specific part that was clicked. But the selection (blue highlight) in not setting consistently when I click between the different parts with in the node template. Please let me know if my approach is not correct or if I am missing something. Thanks.

$(go.Node, "Spot",
            $(
                go.Shape,
                {
                    name: "Part0",
                    fill: "#FCDBD6",
                    strokeWidth: 1,
                    stroke: "#D8BB71",
                    desiredSize: new go.Size(120, 100),
                    click: function (e: go.InputEvent, obj: go.GraphObject) {
                        if (obj && obj.part && obj.part.diagram) {
                            obj.part.selectionObjectName = "Part0";
                        }
                    }
                }
            ),
            $(
                go.Panel,
                "Horizontal",
                {
                    background: 'rgba(255,0,0,0.1)',
                    alignment: go.Spot.TopRight,
                    alignmentFocus: go.Spot.BottomLeft,
                    margin: new go.Margin(0, 0, 10, 0),
                    visible: true
                },
                $(
                    go.Shape,
                    "RoundedRectangle",
                    {
                        width: 20,
                        height: 20,
                        name: 'Part1',
                        strokeWidth: 0,
                        fill: 'red',
                        click: function (e: go.InputEvent, obj: go.GraphObject) {
                            if (obj && obj.part && obj.part.diagram) {
                                obj.part.selectionObjectName = "Part1";
                            }
                        }
                    },
                    new go.Binding("visible", "part1Visible")
                ),
                $(
                    go.Shape,
                    "RoundedRectangle",
                    {
                        width: 20,
                        height: 20,
                        name: 'Part2',
                        strokeWidth: 0,
                        fill: 'green',
                        margin: new go.Margin(0, 0, 0, 10),
                        click: function (e: go.InputEvent, obj: go.GraphObject) {
                            if (obj && obj.part && obj.part.diagram) {
                                obj.part.selectionObjectName = "Part2";
                            }
                        }
                    },
                    new go.Binding("visible", "part2Visible")
                )
            ),
            $(
                go.Panel,
                "Horizontal",
                {
                    background: 'rgba(255,0,0,0.1)',
                    alignment: go.Spot.BottomRight,
                    alignmentFocus: go.Spot.TopLeft,
                    margin: new go.Margin(10, 0, 0, 0),
                    visible: true
                },
                $(
                    go.Shape,
                    "RoundedRectangle",
                    {
                        width: 20,
                        height: 20,
                        name: 'Part3',
                        fill: 'blue',
                        click: function (e: go.InputEvent, obj: go.GraphObject) {
                            if (obj && obj.part && obj.part.diagram) {
                                obj.part.diagram.clearSelection();
                                obj.part.selectionObjectName = "Part3";
                            }
                        }
                    },
                    new go.Binding("visible", "part3Visible")
                )
            ),
            $(
                go.TextBlock,
                this.textStyle(),
                {
                    margin: 8,
                    maxSize: new go.Size(160, NaN),
                    wrap: go.TextBlock.WrapFit,
                    editable: true,
                    stroke: "#454545"
                },
                new go.Binding("text").makeTwoWay()
            ),
            //Ports definition here.....
        );
2

It probably depends on the order in which events happen and in which event handlers are called. The order in which event handlers is called is unspecified – they can happen in any order.

In general it’s not a good idea to change Part.selectionObjectName dynamically during the selection process. I recommend instead not setting that property, but instead not use a selection Adornment by setting Part.selectionAdorned to false and by having the GraphObject.click event handler instead change the appearance of some objects. GoJS Selection -- Northwoods Software For example: Mapping Selectable Fields of Records

3

Thanks Walter. That helped.