How to delete a node from context menu button

GoJS
1

I have a “…” button with a context menu attached to it. I want the delete menu button to actually delete this node. This is a code that I have and it actually works:

nodeTemplate = new go.Node(go.Panel.Auto, {
  width: 100,
  height: 40,
})
  .add(
    new go.Shape("RoundedRectangle", {
      fill: "whitesmoke",
      strokeWidth: 1,
      isPanelMain: true,
    })
  )
  .add(
    go.GraphObject.make("Button", {
      alignment: go.Spot.RightCenter,

      contextMenu: go.GraphObject.make("ContextMenu").add(
        go.GraphObject.make("ContextMenuButton", {
          click: (e: go.InputEvent, obj: go.GraphObject) => {
            const node = e.diagram.findNodeForKey(obj?.part?.data?.key);
            if (node) e.diagram.select(node);
            e.diagram.commandHandler.deleteSelection();
          },
        }).add(new go.TextBlock("Delete"))
      ),

      click: (e: go.InputEvent) => {
        if (e.targetObject) {
          e.diagram.commandHandler.showContextMenu(e.targetObject);
        }
      },
    }).add(new go.TextBlock("..."))
  );

But I have two questions:

  1. I feel like there must be an easier way to get the Node inside the click handler without resorting to e.diagram.findNodeForKey(). Perhaps from obj or the event. But I couldn’t find anything.
  2. Is there any API that commandHanlder can accept a node to delete/copy/paste/cut that is not the current selection?

Screenshot 2024-01-08 at 3.56.28 PM

2
  1. The second argument, obj, will be the object on which the event handler is defined. In this case it will be the button, a Panel.

obj.part will be the “ContextMenu”, an Adornment.

obj.part.adornedPart will be the Node.

  1. You could perform the deletion by node.diagram.commit(d => d.remove(node)).
    Although that won’t raise the appropriate DiagramEvents, if you depend on them.
1 Like