Swiping on canvas triggers browser's back navigation instead of panning to the left

Is there any way to to prevent the browser’s back navigation from being triggered when swiping with 2 fingers to pan in the GoJs canvas on a Macbook touchpad? Or is this a bug?
it works fine like 30% of the time, strangely. Sometimes swiping will immediately trigger a back, while other times it only triggers when the left-side end of the canvas has been reached.

Replicating this bug can be done by just panning right, and then try to pan back to the left in this example: Org Chart Static

Obviously, this bug only occurs when your browser actually has other pages in its history to go back to

Thank you, we’ll investigate a durable fix for this.

The problem is that this is not a specific gesture for iOS, but a feature of the wheel event on any page: If you can scroll left or right on a webpage the trackpad will scroll your document left or right. But if you cannot scroll any more (and on most typical webpages you cannot scroll left or right at all), then browsers will trigger a page back or forward.

In GoJS, we use and disallow bubbling of all wheel events needed for scrolling the Diagram, both in X and Y directions. But beyond that we allow them to bubble. The effect of this is that a user scrolling down on a Diagram will scroll the Diagram until it can be scrolled no more, then it will scroll the page.

But the same is true for scrolling leftwards: It will pan the diagram left, until it can be panned no more, than it will allow the wheel events to bubble. The browser window receives those wheel events, and assumes that you want the browser page to go back.

So a very simple fix would be to stop any wheel event from bubbling. You could write this:

myDiagram.toolManager.standardMouseWheel = function () {
  myDiagram.lastInput.bubbles = false;
  go.ToolManager.prototype.standardMouseWheel.call(this);
}

But that also prevents scrolling (normally, up or down). To be a bit more careful, you could instead do this:

myDiagram.toolManager.standardMouseWheel = function () {
  const oldpos = myDiagram.position.copy();
  // Call default functionality
  go.ToolManager.prototype.standardMouseWheel.call(this);
  // If the diagram did not move, check direction of wheel scroll
  if (myDiagram.position.equals(oldpos)) {
    const e = myDiagram.lastInput.event;
    if (e.deltaX !==  0) { // attempted left or right scroll
      // disallow bubble, so that browser cannot commit `back` and `forward` page actions
      myDiagram.lastInput.bubbles = false;
    }
  }
}

Like I said, we’ll investigate what to do for a library fix, but we have to carefully consider what all customers might want to do. This code will prevent page scrolling left and right as well. With that said, it may be a very acceptable workaround for you to implement.

Hi Simon,

Thanks for you reply.
I assumed it had something to do with that, just wasn’t sure how to disable the bubbling on the canvas.
Your solution works fine for my case, as the canvas in embedded in a page-filling editor where scrolling isn’t allowed anyway.

I made a video earlier that I forgot to add: In this example, it is bubbling the event to the browser even when there is still scrollable canvas on the sides (you can see the back / forward arrows appear of the browser).

As I mentioned before, it only occurs on occasion, sometimes it works fine, sometimes it doesn’t and i cant scroll left or right at all. Due the randomness of this bug, i assume it’s some async piece of code or race condition? Anyway, good luck debugging!

trim (1)

That’s even weirder. I’m not sure why that might be happening in your case.

Could you try:
https://gojs.net/2.2.22/samples/orgChartStatic.html
https://gojs.net/2.2.22/release/go.js

This should fix the issue but it would be good to have extra confirmation. Note we are not yet releasing 2.2.22, this is only a preview release.

Replicating the weird behaviour is more difficult indeed. I fail to replicate that even on the older version today.

The 2.2.22 release does fix the ‘reached end of canvas, event bubbles now to browser’ issue, though. Thanks!

We’ve just released GoJS 2.2.22, which has this fix (and one other).

1 Like

Sorry to re-open this old issue, but i noticed this still happens when the canvas is in panning mode.

I use this snippet to enable panning while space is held down, while it is held down, the browser will go to the previous page when moving too far.

   /* Pan mode on space down */
            "commandHandler.doKeyDown": function () {
                // override normal behavior on Space key
                if (diagram.lastInput.key === ' ') {  // Space
                    diagram.firstInput.documentPoint = diagram.lastInput.documentPoint;
                    diagram.firstInput.viewPoint = diagram.lastInput.viewPoint;
                    diagram.currentTool = diagram.toolManager.panningTool;
                    diagram.currentTool.doActivate();
                    diagram.currentCursor = "grab";
                    return;
                }
                go.CommandHandler.prototype.doKeyDown.call(this);
            },

Is this a bug, or a side effect of the panning that i can somehow disable?

I’m really not sure yet. We’ll have to do some testing.

Only with a Macbook touchpad, right?

i don’t own another machine nor do i own a mouse so i can’t tell you. but i assume yes.

Ok, try adding this:

  myDiagram.doMouseWheel = function () {
    const currentTool = myDiagram.currentTool;
    if (currentTool instanceof go.PanningTool) {
      myDiagram.lastInput.bubbles = false;
    }
    currentTool.doMouseWheel();
  }

Does that fix it?