var nodeHoverAdornment = new go.Adornment('Spot', {
//background:'lightgray',
mouseLeave: (e, obj:any) => {
var ad = obj.part;
ad.adornedPart.removeAdornment('mouseHover');
},
mouseEnter:(e, obj) =>{
console.log(e, obj)
},
})
.add(
new go.Placeholder({
isActionable: true, // Needed because this is in a temporary Layer
click: (e, obj:any) => {
console.log('Click btn');
var node = obj.part.adornedPart;
node.diagram.select(node);
}
}),
//Create the "Button" with styling and a label
go.GraphObject.make(go.Panel, 'Auto', {
alignment: go.Spot.Left,
alignmentFocus: go.Spot.Right,
cursor: 'pointer', // Change the cursor to indicate it's clickable
},
new go.Shape('RoundedRectangle', {
fill: '#d3d9e5', // Set the button's background color
stroke: '#d3d9e5', // Border color
width: 140, // Button width
height: 50, // Button height
cursor: 'pointer',
//corner: 5, // Rounded corners
click: (e, obj) => { // Button click event
alert('Hi! Button clicked.');
}
}),
new go.TextBlock({
text: (this.isActiveTab == 'executions' && this.isWorkflowRunning) ? 'View Live Logs':'View Result',
font: 'bold 14px sans-serif', // Button text styling
stroke: '#000000', // Text color
alignment: go.Spot.Center, // Center the label inside the button
})
)
);
Why is the click event handler declared on the Placeholder when it has no background and thus does not render anything – resulting in not being able to handle any InputEvents?
Put it on the button panel, or maybe on the whole Adornment.
go.GraphObject.build(
'Button',
{
alignment: go.Spot.Left,
alignmentFocus: go.Spot.Right,
click: (e, obj) => alert('Hi!'),
// Apply button style (background, border, etc.)
background: '#d3d9e5', // Green background color
width:140,
height:40,
//border: '2px solid #ffffff', // White border color
cursor: 'pointer', // Change cursor to pointer when hovered
//corner: 5, // Rounded corners
},
// TextBlock for the button's label
new go.TextBlock({
text: (this.isActiveTab == 'executions' && this.isWorkflowRunning) ? 'View Live Logs':'View Result',
font: 'bold 14px sans-serif', // Button text styling
stroke: '#000000', // Text color
alignment: go.Spot.Center, // Center the label inside the button
margin: 10, // Add some padding around the text
}
)
)
add this code click working but button design and label not work
And how are the design and label not working for you?
@walter yes border, corner and label not working
Please explain. I do not understand what you want and how it is different from what you have. It might help if you annotate a small screenshot.
Besides how it handles click events, which you say is better now, has anything else changed from the code you shared above?