Jittery canvas when zooming out on touchscreen with constrainDuringPan

[samuset]

I have these options that successfully constrain the canvas:

visibilityRatio: 1,
minZoomLevel: 1,
constrainDuringPan: true

This successfully locks the canvas within view when panning. However, when pinching and zooming so, it constrains panning in a jittery way, causing it to slightly go over the boundaries. This also happened when zooming in at the maximum level, but I managed to fix that with the following:

newViewer.addHandler('zoom', (event) => {
	constrainViewer(event.zoom, event.eventSource);
	console.log('zooming');
});
newViewer.addHandler('canvas-pinch', (event) => {
	const zoom: number = event.eventSource.viewport.getZoom(true);
	constrainViewer(zoom, event.eventSource);
	console.log('pinching');
});

const constrainViewer = (zoom: number, currentViewer: OpenSeaDragon.Viewer) => {
	if (zoom < 1) {
		currentViewer.viewport.zoomTo(1, undefined, true).applyConstraints();
		console.log('zoom reset to min', zoom, 1);
	}
	if (zoom > 14) {
		currentViewer.viewport.zoomTo(14, undefined, true).applyConstraints();
		console.log('zoom reset to max', zoom, 14);
	}
};

But this only slightly improves the glitch when zooming out. There is still a slight jitter. Any ideas how to fix this? Perhaps there is a need for constrainDuringPinch or ...Zoom?

[iangilman]

It's the panning part of the pinch that's jittering, right? I'd say that should be covered by constrainDuringPan, so we don't need a new flag for it. Sounds like it needs fixing though. Let me know if you'd like to pursue fixing it and I can help point you in the right direction.

[samuset]

Yes, panning is constrained when only panning, but when pinching (zooming) AND panning, it pans in a jittery way. I'd be up for fixing it if you can help me. Thanks!

[iangilman]

@samuset Wonderful! You'll need to get set up so you can build the code. Info on that is in https://github.com/openseadragon/openseadragon/blob/master/CONTRIBUTING.md. The I think you'll want to look at onCanvasPinch (and possibly onCanvasScroll) in viewer.js. They appear to already be calling applyConstraints, so I'm not sure what the issue is. At any rate, I think that's the place to start investigating.