Hi, I have a question about hit area on context menu button.
Looks like button click event doesn’t fire when click has happened around edge of button.
Is there any way to fire click event anywhere on button?
(I attach screenshot and short example code)
[App.tsx]
import * as go from "gojs";
import { ReactDiagram } from "gojs-react";
import './App.css';
const App = (): any => {
const initDiagram = () => {
// if ((window as any).goSamples) (window as any).goSamples(); // init for these samples -- you don't need to call this
const $ = go.GraphObject.make; // for conciseness in defining templates
const myDiagram = $(go.Diagram, /*'myDiagramDiv',*/ // create a Diagram for the DIV HTML element
{
'undoManager.isEnabled': true, // enable undo & redo
model: $(go.GraphLinksModel, {
linkKeyProperty: "key", // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
})
});
// define a simple Node template
myDiagram.nodeTemplate =
$(go.Node, 'Auto', // the Shape will go around the TextBlock
new go.Binding("location", "loc"),
$(go.Shape, 'RoundedRectangle', {
strokeWidth: 0,
},
// Shape.fill is bound to Node.data.color
new go.Binding('fill', 'color')
),
$(go.TextBlock,
{ margin: 8 }, // some room around the text
// TextBlock.text is bound to Node.data.text
new go.Binding('text').makeTwoWay()
)
)
// 右クリックメニュー(ダイアグラム全体)
myDiagram.contextMenu = $(
"ContextMenu",
$(
"ContextMenuButton",
{
"ButtonBorder.fill": "white",
_buttonFillOver: "skyblue",
},
$(go.TextBlock, "Click Test", {
alignment: go.Spot.Left,
margin: 10,
click: (e: any, obj: any) => {
alert("ok");
},
}),
),
)
return myDiagram;
}
const nodeDataArray = [
{ key: 0, text: 'Alpha', color: 'lightblue', loc: '0 0' },
{ key: 1, text: 'Beta', color: 'orange', loc: '150 0' },
{ key: 2, text: 'Gamma', color: 'lightgreen', loc: '0 150' },
{ key: 3, text: 'Delta', color: 'pink', loc: '150 150' }
];
const linkDataArray = [
{ key: -1, from: 0, to: 1 },
{ key: -2, from: 0, to: 2 },
{ key: -3, from: 1, to: 1 },
{ key: -4, from: 2, to: 3 },
{ key: -5, from: 3, to: 0 }
];
return (
<ReactDiagram
divClassName="diagram-component"
initDiagram={initDiagram}
nodeDataArray={nodeDataArray}
linkDataArray={linkDataArray}
/>
);
}
export default App;