Thank you so much @walter , I was able to achieve it, Just for community, i handled it like this.
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2024 by Northwoods Software Corporation. -->
</head>
<body>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
<script src="https://cdn.jsdelivr.net/npm/gojs/release/go.js"></script>
<script id="code">
const myDiagram =
new go.Diagram("myDiagramDiv", {
"undoManager.isEnabled": true,
"ModelChanged": e => { // just for demonstration purposes,
if (e.isTransactionFinished) { // show the model data in the page's TextArea
document.getElementById("mySavedModel").textContent = e.model.toJson();
}
}
});
const $ = go.GraphObject.make;
const nodeHoverAdornment =
$(go.Adornment, 'Spot',
$(go.Placeholder),
$(go.Panel, "Vertical",
{
alignment: go.Spot.TopRight,
alignmentFocus: new go.Spot(0, 0, -30, -20),
alignmentFocusName: 'DELETE_SHAPE',
background: "lightgreen",
mouseLeave: (e, panel, next) => {
if (!(next && next.part instanceof go.Adornment)) {
panel.part.adornedPart.removeAdornment('mouseHover');
}
},
},
$('Button', {
"ButtonBorder.figure": "Circle",
"ButtonBorder.fill": "cyan",
// "ButtonBorder.stroke": "darkcyan",
"ButtonBorder.strokeWidth": 12,
height:30,
width:30,
// set properties on the "Button" itself used by its event handlers
// "_buttonFillOver": "white",
// "_buttonStrokeOver": "cyan",
// "_buttonFillPressed": "lightgray",
alignment: go.Spot.Center,
mouseEnter: (e, button) => {
button.part.findObject("view-panel").visible = true;
},
mouseLeave: (e, button, nextPanel) => {
if ((nextPanel && nextPanel.name !== 'view-panel')) {
button.part.adornedPart.removeAdornment('mouseHover');
}
},
click: (e, button) => button.part.removeAdornment("mouseHover")
},
$(go.Shape, 'Circle', {
fill: '#ff6600', width: 20, height: 20, stroke: null, strokeWidth: 0, name: 'DELETE_SHAPE'
}),
new go.TextBlock('->', {
stroke: '#E0E0E0', height: 14
}),
),
$(go.Panel, 'Vertical', {
background: '#ffffff',
stretch: go.GraphObject.Fill
},
{ name: 'view-panel', visible: false, background: 'white' },
//view option
$(go.Panel, 'Horizontal', {
width: 60,
stretch: go.GraphObject.Fill,
alignment: go.Spot.Left,
cursor: 'pointer',
isActionable: true,
margin: 4,
},
$(go.TextBlock, {
text: 'View',
stroke: '#0a599c',
font: '8pt verdana',
margin: new go.Margin(2, 5, 2, 4)
}),
),
//delete option
$(go.Panel, 'Horizontal', {
width: 60,
stretch: go.GraphObject.Fill,
alignment: go.Spot.Left,
cursor: 'pointer',
isActionable: true,
margin: 4,
}, $(go.TextBlock, {
text: 'Delete',
stroke: '#f44f50',
font: '8pt verdana',
margin: new go.Margin(2, 5, 2, 4)
}),
),
//clear option
$(go.Panel, 'Horizontal', {
width: 60,
stretch: go.GraphObject.Fill,
alignment: go.Spot.Left,
cursor: 'pointer',
isActionable: true,
margin: 4,
},
$(go.TextBlock, {
text: 'Clear',
stroke: '#f44f50',
font: '8pt verdana',
margin: new go.Margin(2, 5, 2, 4)
}),
)
)
)
);
const nodeHoverAdornmentList =
$(go.Adornment, 'Spot',
$(go.Placeholder),
$(go.Panel, "Horizontal",
{
alignment: go.Spot.RightCenter,
alignmentFocus: new go.Spot(0, 0, -30, -20),
alignmentFocusName: 'DELETE_SHAPE',
background: "lightgreen",
mouseEnter: (e, panel) => {
console.log("Entering green panel");
},
mouseLeave: (e, panel, next) => {
if (!(next && next.part instanceof go.Adornment)) {
panel.part.adornedPart.removeAdornment('mouseHover');
}
},
},
$('Button', {
'ButtonBorder.figure': 'Circle',
'ButtonBorder.stroke': 'transparent',
mouseEnter: (e, button) => {
console.log("Entering buton");
button.part.findObject("view-panel").visible = true;
},
click: (e, button) => button.part.removeAdornment("mouseHover")
},
$(go.Shape, 'Circle', {
fill: '#ff6600', width: 20, height: 20, stroke: null, strokeWidth: 0, name: 'DELETE_SHAPE'
},
),
new go.TextBlock('->', {
stroke: '#E0E0E0', height: 14, mouseEnter: (e, button) => {
const anim = new go.Animation({ duration: 100 });
anim.add(button, "angle", button.angle, button.angle + 45);
anim.start();
},
}),
),
$(go.Panel, 'Vertical', {
background: '#ffffff',
stretch: go.GraphObject.Fill,
mouseEnter: (e, panel) => {
console.log("Entering menu...");
}
},
{ name: 'view-panel', visible: false, background: 'white' },
//view option
$(go.Panel, 'Horizontal', {
width: 60,
stretch: go.GraphObject.Fill,
alignment: go.Spot.Left,
cursor: 'pointer',
isActionable: true,
margin: 4,
},
$(go.TextBlock, {
text: 'View',
stroke: '#0a599c',
font: '8pt verdana',
margin: new go.Margin(2, 5, 2, 4)
}),
),
//delete option
$(go.Panel, 'Horizontal', {
width: 60,
stretch: go.GraphObject.Fill,
alignment: go.Spot.Left,
cursor: 'pointer',
isActionable: true,
margin: 4,
}, $(go.TextBlock, {
text: 'Delete',
stroke: '#f44f50',
font: '8pt verdana',
margin: new go.Margin(2, 5, 2, 4)
}),
),
//clear option
$(go.Panel, 'Horizontal', {
width: 60,
stretch: go.GraphObject.Fill,
alignment: go.Spot.Left,
cursor: 'pointer',
isActionable: true,
margin: 4,
},
$(go.TextBlock, {
text: 'Clear',
stroke: '#f44f50',
font: '8pt verdana',
margin: new go.Margin(2, 5, 2, 4)
}),
)
)
)
);
myDiagram.nodeTemplate =
new go.Node("Auto", {
mouseEnter: (e, node) => {
if (node.data.key === 1) {
if (node.data && node.data.disable) return;
nodeHoverAdornment.adornedObject = node;
nodeHoverAdornment.findObject("view-panel").visible = false;
node.addAdornment('mouseHover', nodeHoverAdornment);
}
else {
if (node.data && node.data.disable) return;
nodeHoverAdornmentList.adornedObject = node;
nodeHoverAdornmentList.findObject("view-panel").visible = false;
node.addAdornment('mouseHover', nodeHoverAdornmentList);
}
},
mouseLeave: (e, node, next) => {
if (!(next && next.part instanceof go.Adornment)) {
node.removeAdornment('mouseHover');
}
}
}).bind("width", '', data => data.key == 1 ? 100 : 200)
.bind("height", '', data => data.key == 1 ? 100 : 30)
.add(
new go.Shape({ fill: "white" })
.bind("fill", "color"),
new go.TextBlock({ margin: 8 })
.bind("text")
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "lightpink" },
],
[
]);
</script>
</body>
</html>