Click not working around edge of context menu

GoJS
1

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)
scr

[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;
2

Because the click event is on the TextBlock instead of on the “ContextMenuButton”, only clicks on the TextBlock cause the click event handler to be called.

3

I changed my code to following then everything works fine.
Thank you so much! :-)

      $(
        "ContextMenuButton",
        {
          "ButtonBorder.fill": "white",
          _buttonFillOver: "skyblue",
          click: (e: any, obj: any) => {
            alert("ok");
          },
        },
        $(go.TextBlock, "Click Test", {
          alignment: go.Spot.Left,
          margin: 10,
        }),
      ),