diff --git a/src/mol-plugin/skin/base/components/viewport.scss b/src/mol-plugin/skin/base/components/viewport.scss index f87599bbb3ef8ff14bb0fd5251a30b010616d356..768d8a12fc78587921e142ac9f6c710e54cf10fa 100644 --- a/src/mol-plugin/skin/base/components/viewport.scss +++ b/src/mol-plugin/skin/base/components/viewport.scss @@ -26,6 +26,7 @@ -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; + touch-action: manipulation; } .msp-viewport-controls { diff --git a/src/mol-util/input/input-observer.ts b/src/mol-util/input/input-observer.ts index 8f359499e70e4d53231087b84eb56dfdd192806d..8b08cb2fbbea2085a75b45c590c2ba38744e3658 100644 --- a/src/mol-util/input/input-observer.ts +++ b/src/mol-util/input/input-observer.ts @@ -39,7 +39,8 @@ function getButtons(event: MouseEvent | Touch) { export const DefaultInputObserverProps = { noScroll: true, - noContextMenu: true + noContextMenu: true, + noPinchZoom: true } export type InputObserverProps = Partial<typeof DefaultInputObserverProps> @@ -160,7 +161,7 @@ interface InputObserver { namespace InputObserver { export function create (element: Element, props: InputObserverProps = {}): InputObserver { - let { noScroll, noContextMenu } = { ...DefaultInputObserverProps, ...props } + let { noScroll, noContextMenu, noPinchZoom } = { ...DefaultInputObserverProps, ...props } let lastTouchDistance = 0 const pointerDown = Vec2.zero() @@ -336,6 +337,15 @@ namespace InputObserver { } function onTouchMove (ev: TouchEvent) { + if (noPinchZoom) { + ev.preventDefault(); + ev.stopPropagation(); + if ((ev as any).originalEvent) { + (ev as any).originalEvent.preventDefault(); + (ev as any).originalEvent.stopPropagation(); + } + } + if (ev.touches.length === 1) { buttons = ButtonsType.Flag.Primary onPointerMove(ev.touches[0])