Pinch-zoom on trackpads in modern browsers causes entire window to zoom

[Martin-Pitt]

Hi,

There is an issue with the pinch-zoom at:

pentool/src/app.vue

Lines 176 to 187 in d00d1cd

	this.canvas.addEventListener("mousewheel", e => {
	const view = paper.project.view;
	if (e.altKey || e.ctrlKey) {
	const zoomDelta = 1 + -e.deltaY / 100;
	const pivot = new paper.Point(e.x, e.y); //view.projectToView(new paper.Point(e.x, e.y))
	view.scale(zoomDelta, pivot);
	view.emit("zoom", view.scaling.x);
	} else {
	view.translate(-e.deltaX, -e.deltaY);
	}
	});

Namely that without a e.preventDefault(); the entire page is zooming instead of only the artboard view.

To fix this, we need to add e.preventDefault();, but also addEventListener accepts a third argument for options, one of those event listener options is passive; This is enabled by default in modern browsers for performance reasons, so:

.addEventListener(e => …, { passive: false });

You can see an example of mousewheel listener here: https://codepen.io/nexii/pen/mzyLYJ