Scrolling page from GoJS frame on touch devices

GoJS
#1

Hi,

Scrolling a GoJS page on touch devices usually only works when touching outside the GoJS frame itself. Touching and dragging within the GoJS frame seems to have no effect except to scroll within the frame itself (however scrolling with a mouse scroll wheel when the pointer is within the frame is correctly able to scroll the entire page like it should). This problem appears on Chrome (Android) and Safari (iOS). It seems to work like it should on Firefox (Android).

We have built an application with a static GoJS frame that often covers most of the screen on mobile browsers. When it does, it’s almost impossible to scroll the page away from the GoJS frame. That makes a fix for this necessary for our application to be usable on mobile devices. Cry

Our diagram is made static in the following way:
fixedBounds: new go.Rect(0, 0, 700, 1000),

allowZoom: false

However, the same problem/behavior can be seen for example in the latest incrementalTree sample, so it is probably not specific to our implementation.

#2

One possibility for now is to always leave a small margin outside of the diagram/div where the user can always do the page-scrolling. We’ll see if there are other possibilities.

#3

Another possibility is to tap-hold to bring up the default context menu, and then pan or zoom the page over it to return to page navigation instead of diagram navigation.

But in general we need to explore other means of scrolling the page vs. the diagram.

#4

Thank you for your suggestions. We do have a standard margin on the side that does work for scrolling. However, sometimes one might zoom the entire page to get a better view of the diagram, in which case you might get stuck. We also have to assume the user knows to scroll using the specific part of the page that allows for scrolling.

The context menu trick does seem to work quite well, so at least there’s a workaround when you get stuck. It’s not a very user friendly solution though, so I hope you will be able to find a more intuitive way of scrolling.

Most of the time (when just viewing and not editing diagrams) we actually don’t need to be able to drag select anything, so if we could somehow decide whether dragging would scroll or select, that would definitely help. In fact, if I had to choose, I would prefer be able to scroll on mobile devices over being able to drag select, as I expect most (of our) mobile users would be viewing diagrams, not editing them.

#5

We are exploring alternatives for permanent, intuitive control of both the diagram and the page.

You can turn off drag-selecting entirely if you please:

myDiagram =
  $(go.Diagram, "myDiagram",
    {

“dragSelectingTool.isEnabled”: false
});

or make a checkbox to control it, or make it true or false based on a predicate:

// True if there’s no touch support, false if there is touch support
“dragSelectingTool.isEnabled”: !(‘ontouchstart’ in window)

The problem there being touch-enabled laptops will disable the selecting tool even if a mouse is being used, so the better thing to do would be to override PanningTool.prototype.canStart, and see if the last event was a mouse event or a touch event, and return false if it was a touch event. If you want help doing that let me know and I’ll give you an example.

In our initial testing we’re considering one or two options for panning. If you’d like to give us input on what you’d find most intuitive, please email us at gojs at our domain nwoods.com.

#6

We have released a new beta version of GoJS: http://gojs.net/beta

This version includes the ability to scroll the entire page by doing a two-finger pan. As of right now this is only available for iOS devices, though.