Close button under selection in gojs selected node

GoJS
1

I have a gojs diagram with node selection enabled. The area is specified as

$(go.Node, ‘Spot’, new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify), new go.Binding(“key”, “_id”),{
deletable: false,
selectionObjectName: “mainPanel”
}
I also enabled the close button with

$diagram = graph.createDiagram(‘diagram’, {
…
enableCloseBtn: true
});
The problem is that selection is upon close button which is very irritating. Besides the link also does not look completed.

Anyone able to help resolve this visual issues?

2

First the simple answer regarding link connection points: declare your “mainPanel” to be the default port for your node, by setting its GraphObject.portId to the empty string. If you have any other port-related properties on your Node, move them down to that mainPanel object. See also this discussion: GoJS Ports in Nodes-- Northwoods Software.

Second is what I assume is the main question of this forum topic – that the blue selection handle is in front of the red-circle-X button.

That happens because the selection Adornment is a separate Part that is intentionally in front of all Nodes and Links so that it is not obscured by anything inside those nodes or links or by any other nodes or links.

The easy solution is to remove the setting of Part.selectionObjectName in your template. That way the selection handle will surround the whole node, including the red-circle-X button.

But if that is not satisfactory to you, the problem is that the selection Adornment is a separate Part from the selected Node, so it must be drawn entirely after (or before) the whole Node. It cannot be drawn after some objects in the node and before some other objects in the node.

One solution is not to use selection adornments at all. Set Part.selectionAdorned to false and use a Binding whose source is the Part.isSelected property to control the appearance of some object in your node template. Read about this in GoJS Selection -- Northwoods Software, especially the section about “Selection Appearance Changes”.

3

This seems to help. The only problem that I have now is that I can’t figure how to chain the adornments. My code looks like below and the purpose of the first binding is to stroke the rectangle with the appropriate colour matching its type and the second one is to stroke the selection.

$(go.Shape, ‘Rectangle’, {
fill: ‘#fff’,
stroke: color,
strokeWidth: 1
}, new go.Binding(“stroke”, “color”, (col) => col || color)),
new go.Binding(“stroke”, “isSelected”, function(sel) {
console.log(‘selection’, sel);
if (sel) return “cyan”; else return “lightgray”;
}).ofObject(""))

4

I do not know what you mean by “chaining”.

Assuming that there is a data.color property:

new go.Binding("stroke", "", function(node) {
  return node.isSelected ? "cyan" : node.data.color;
}).ofObject()