invert the gestures on touch devices [Autodesk forge viewer]

Question

I am using forge autodesk v7 in my web application. I want the iPhone experience to be more intuitive, so that I can navigate the Viewer at its best. For this, I would like to invert the gestures on touch devices:

Drag 1 finger = pan

2 finger drag = rotate

I was trying to write my own methods that respond to touchstart and touchmove, modifying setView(position, target) unsuccessfully

document.addEventListener('touchmove', this.touchEvent);


touchEvent(ev): void {
if (ev.touches.length === 1) {
  const target = this.viewer.navigation.getTarget();
  const position = this.viewer.navigation.getPosition();
  position.x += ev.changedTouches[0].clientX;
  position.y += ev.changedTouches[0].clientY;
  target.x += (ev.changedTouches[0].clientX;
  target.y += ev.changedTouches[0].clientY;
  this.viewer.navigation.setView(position, target);
} else {
  console.log('Two finger');
}

}

user_1759915 · Answer

I'm afraid there's no configuration (yet) that would allow you to simply change the interpretation of touch gestures. I believe it could be done, but it would take more effort. Read on if you're interested:

The viewer uses a concept of a tool stack (for more info, please refer to https://forge.autodesk.com/blog/custom-tools-forge-viewer), and one of the official tools used by the viewer is the GestureHandler available in the tool stack under the name "gestures". This tool generates events that can then be consumed by other tools in the stack. The event you're interested in is called handleGesture, and the default camera tool - OrbitDollyPanTool - handles the event with the following code:

this.handleGesture = function (event) {
    switch (event.type) {
        case "dragstart":
            _touchType = "drag";
            // Single touch, fake the mouse for now...
            return this.handleButtonDown(event, 0);

        case "dragmove":
            if (_touchType !== "drag") {
                this.handleButtonDown(event, 0);
                _touchType = "drag";
            }
            return this.handleMouseMove(event);

        case "dragend":
            // We seem to often get a lone dragend after a multi-touch.
            if (_touchType === "drag") {
                this.handleButtonUp(event, 0);
                _touchType = null;
                return true;
            }
            return false;


        case "panstart":
            _touchType = "pan";
            this.handlePanStart(event);
            this.handleDollyPan(event);
            return true;

        case "panmove":
            if (_touchType !== "pan") {
                _touchType = "pan";
                this.handlePanStart(event);
            }
            return this.handleDollyPan(event);

        case "panend":
            if (_touchType === "pan") {
                this.isDragging = false;
                this.handleDollyPan(event);
                this.interactionEnd(kTouch);
                return true;
            }
            return false;


        case "pinchstart":
            this.isDragging = true;
            _touchType = "pinch";

            _startXYZ.x = (event.normalizedX + 1.0) * 0.5;
            _startXYZ.y = 1.0 - (event.normalizedY + 1.0) * 0.5;

            _touchStartXY.set(event.canvasX, event.canvasY);
            _startXY.set(event.canvasX, event.canvasY);

            _activeModeLocked = false;
            this.interactionStart(kTouch);
            this.handleDollyPan(event);
            return true;

        case "pinchmove":
            return (_touchType === "pinch") ? this.handleDollyPan(event) : false;

        case "pinchend":
            if (_touchType === "pinch") {
                this.isDragging = false;
                this.handleDollyPan(event);
                this.interactionEnd(kTouch);
                return true;
            }
            return false;
    }
    return false
};

So, what you could do is override the OrbitDollyPanTool's handleGesture method to trigger different mouse events.

user_7337994 · Answer

Can't comment on @Petr Broz answer but it worked! We where able to lock all the navigation actions with this implementation.

As suggested we implemented our own Pan, Zoom and Orbit using the touch events to track the user fingers on the screen

invert the gestures on touch devices [Autodesk forge viewer]

2 Answers