Open HTML context menu on long press of rotate Handle

GoJS
1

I Intend to have a HTML context menu open on long press of rotate handle to give me fields such as rotate 45 degree, 90 degree, Flip, Mirror.

2

This might be tricky – it depends on your requirements. A simple case would be:

      myDiagram.toolManager.rotatingTool.handleArchetype =
        $(go.Shape, "Circle",
          {
            width: 8, height: 8, fill: "lime", stroke: "green", cursor: "pointer",
            isActionable: true,
            actionDown: (e, shp) => {
              setTimeout(() => e.diagram.commandHandler.showContextMenu(), 500);
            }
          });

      myDiagram.nodeTemplate =
        $(go.Node, "Vertical",
          {
            contextMenu:
              $("ContextMenu",
                $("ContextMenuButton",
                  $(go.TextBlock, "rotate +45"),
                  {
                    click: (e, button) => {
                      e.diagram.commit(diag => {
                        const node = button.part.adornedObject.part;
                        node.angle += 45;
                      });
                    }
                  }
                )
              ),
              . . .

For more complicated interactions, you might need to customize the RotatingTool’s handling of mouse events.

3

I am able to launch context menu in web browser but on long press on touch device the menu does not appear, also the button appears doesn’t rotate the block, i had to define the context menu in diagram init

myDiagram = $(go.Diagram, “myDiagramDiv”, {contextMenu: $(
“ContextMenu”,
$(“ContextMenuButton”, $(go.TextBlock, “rotate +45”), {
click: (e, button) => {
e.diagram.commit((diag) => {
const node = button.part.adornedObject.part;
node.angle += 45;
});
},
})
),
})

4

Is the Node not selected when the actionDown event occurs?

The context menu should be on the Node, not the Diagram. Otherwise there won’t be an Adornment.adornedObject from which to get the Node.