Disable zoom through trackpad pinch

[farhanaaz1112]

Hi,

I have been trying to disable zoom altogether, but the following code for creating engine doesn't work for trackpad pinch. I want to disable that too . Please help
engine = createEngine({ registerDefaultZoomCanvasAction: false, });

[ghost]

I don't know if it helps but for me I was trying to disable the browser zooming when pinched, but still keep the zooming in the canvas as the browser was zooming in while the canvas was zooming out and gave very strange effects.

In Chrome the React onWheel event listener (which pinch zoom uses) is registered on the document which is now passive by default so you cant use event.preventDefault in onWheel, it has to be in a registerEventListener, so I wrapped my Canvas element in a div with a ref and added an event listener on it to prevent wheel scrolls within the div from reaching the browser.

Adapted from here: facebook/react#6436 (comment)

const scrollRef = useRef<HTMLDivElement>(null)
useEffect(() => {
    const scrollEl = scrollRef.current
    scrollEl?.addEventListener('wheel', stopScroll)
    return () => scrollEl?.removeEventListener('wheel', stopScroll)
}, [])
const stopScroll = (e: WheelEvent) => e.preventDefault()

<div ref={scrollRef}>
    <CanvasWidget engine={engine} />
</div>

This uses react hooks, you could use facebook/react#6436 (comment) if you are using old style components