Best approach for selection adorment

Im evaluating the last version of gojs to see if fits out diagram design before buying the library. I need to create the following type of nodes:

1- Default node:

2- Selected node

The goal is when the mouse enter the default node is going to show only the name of the node at the bottom, and when it gets clicked/selected is going to show the 2 options images inside the rectangle, and when someone clicks this images is going to show some other icons surrounding the node.

The default node and mouse enter/leave event i got it done without any problem, the selected node step im using selectionAdornmentTemplate creating the same default node with the text on top(mouse enter/leave event don’t get in the way)

Angular code:
selectionAdornmentTemplate: $(go.Adornment, "Spot", $(go.Panel, "Vertical", { background: "#F6F5F3", width: 120, height: 100 }, $(go.Picture, // Pictures should normally have an explicit width and height. // This picture has a red background, only visible when there is no source set // or when the image is partially transparent. { margin: 4, width: 60, height: 60, background: "transparent" }, // Picture.source is data bound to the "source" attribute of the model data new go.Binding("source")), $(go.TextBlock, "Default Text", // the initial value for TextBlock.text, // some room around the text, a larger font, and a white stroke: { name: "nodeName", margin: 6, stroke: "black", font: "bold 12px sans-serif", "editable": true }, // TextBlock.text is data bound to the "name" attribute of the model data new go.Binding("text", "name")) ), $(go.Picture, // Pictures should normally have an explicit width and height. // This picture has a red background, only visible when there is no source set // or when the image is partially transparent. { margin: 10, width: 20, height: 20, alignment: go.Spot.Left }, // Picture.source is data bound to the "source" attribute of the model data new go.Binding("source", "optionIcon")), $(go.Picture, // Pictures should normally have an explicit width and height. // This picture has a red background, only visible when there is no source set // or when the image is partially transparent. { margin: 10, width: 20, height: 20, alignment: go.Spot.Right }, // Picture.source is data bound to the "source" attribute of the model data new go.Binding("source", "linkIcon")) )

Its getting close:

The deal is that the icons Pictures don’t trigger the click event, only when i use the button (http://gojs.net/latest/intro/selection.html) it triggers the event

Now that i include the important information my questions are:
1- Is this the best approach to accomplish this task? Theres a better one more efficient?, maybe groups?
2- What im doing wrong on the click event not get triggered?
3- How to include the extra icons surrounding the main node on options icon click?

Hope anyone on the gojs team can point me in the right direction, event better the efficient direction.
Thanks

It would be more efficient to simplify the Adornment template so that it is as simple as possible. It’s very unusual to use the same template as the Node itself. Have the Adornment be a “Spot” Panel that holds a Placeholder, which will have the same size as the adorned object (which might be the whole node, I can’t tell) and add only those objects that would not be visible when not selected. That means only the blue rectangle and those two buttons, if I understand you correctly.

Buttons have GraphObject.isActionable set to true, so that they can act as buttons anywhere, without interfering with any tools, including the ClickSelectingTool. You can see its definition in extensions/Buttons.js.

In your click action(s), you can make those other three buttons visible.

Have you seen the Selection Adornment Buttons sample? http://gojs.net/latest/samples/adornmentButtons.html

Im really close with the final result, the only thing that i couldn’t achieve is the shadow for a shape.

This is the actual design for a node:

How i can add shadow to a shape or a panel?

Set Part.isShadowed to true. There are other shadow-related properties that you might care about.

My node background is this one:

$(go.Shape, 'RoundedRectangle', { desiredSize: new go.Size(120, 94), fill: '#FFFDFE', name: "nodeBackground", stroke: "#D4D2D2", strokeWidth: 1 } )

when i add { isShadowed: true, shadowOffset: new go.Point(10, 10) } i got an error, also if i put that inside a part like this:

$(go.Part, { isShadowed: true, shadowOffset: new go.Point(10, 10) }, $(go.Shape, 'RoundedRectangle', { desiredSize: new go.Size(120, 94), fill: 'transparent', name: "nodeBackground", stroke: "transparent", strokeWidth: 1 } ) ),

i got the following error: Cannot add a Part to a Panel, the only panel on top of that shape is:

nodeTemplate: $(go.Node, “Position” …

I don’t know what else to do

You need to set isShadowed: true on the Part, which in your case appears to be a Node.