Right Click Node + Mouse Zoom

GoJS
1

I’ve been looking through the docs and forums for a solution to an issue we are facing with no luck so far. I noticed that if you select a node on the diagram with left click and mouse wheel zoom, the diagram zooms in and out. However, if you right click on a node and zoom with the mouse wheel, then the browser zoom takes effect and the html elements on the page resize as such. Is there a way to move the left mouse selection zoom functionality to the right mouse selection?

2

Is your right-click bringing up a context menu, and is the mouse “in” that context menu while turning the mouse wheel? Is that context menu implemented as a GoJS Adornment or as HTML DOM?

If it’s implemented as a GoJS Adornment (such as a “ContextMenu”), then one can override ContextMenuTool.doMouseWheel:

class ZoomingContextMenuTool extends go.ContextMenuTool {
  doMouseWheel() {
    this.standardMouseWheel();
  }
}

Install the custom tool by replacing the standard one:

new go.Diagram(. . ., {
  contextMenuTool: new ZoomingContextMenuTool(),
  . . .
})

I suppose we should modify the built-in ContextMenuTool to do this in v3.1.

3

While I thought I had all the code disabled for debugging, I missed a line hence the continued zooming effect…
So as long as the context menu is open, the mouse can be positioned anywhere on the browser window and wheeling will increment/decrement the browser zoom.

This is how the context menu is currently implemented:

const htmlContextMenu = new go.HTMLInfo();
We have a reference to the html context element which is displayed when right clicking a node.

htmlContextMenu.show will make the menu visible via style.display = ‘flex’

htmlContextMenu.hide will hide the menu by setting style.display to ‘none’

this functionality is handled in contextMenu()

image
image649×137 7.15 KB

Can I apply your suggestion above to our current implementation?

4

That works like a charm, thanks!