fix: zooming producing wrong coords & not initially showing coords on page load (7bcc7ce0) · Commits · sc07 / Canvas · GitLab

packages/client/src/components/CanvasWrapper.tsx

+10 −0

Original line number	Diff line number	Diff line
		@@ -391,6 +391,16 @@ const CanvasInner = () => {
		$skeleton.parentElement?.insertBefore($canvas, $skeleton);
		CanvasCore.get().setCanvas($canvas);

		if (canvas.current) {
		const { canvasX: x, canvasY: y } =
		canvas.current.panZoomTransformToCanvas();
		setCanvasPosition({
		x,
		y,
		zoom: PanZoom.transform.scale >> 0,
		});
		}

		// blank canvas
		const $blank = document.createElement("canvas");
		$blank.setAttribute("id", "blank-overlay");

packages/lib/src/renderer/PanZoom.ts

+22 −22

Original line number	Diff line number	Diff line
		@@ -172,7 +172,7 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
		initialize(
		$wrapper: HTMLDivElement,
		$zoom: HTMLDivElement,
		$move: HTMLDivElement
		$move: HTMLDivElement,
		) {
		this.$wrapper = $wrapper;
		this.$zoom = $zoom;
		@@ -256,7 +256,7 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
		*/
		setPosition(
		{ x, y, zoom }: { x: number; y: number; zoom: number },
		{ suppressEmit } = { suppressEmit: false }
		{ suppressEmit } = { suppressEmit: false },
		) {
		if (!this.initialized) {
		// elements are not yet available, store them to be used upon initialization
		@@ -293,12 +293,12 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
		(
		"" +
		(/CPU.OS ([0-9_]{1,5})\|(CPU like).AppleWebKit.*Mobile/i.exec(
		navigator.userAgent
		navigator.userAgent,
		) \|\| [0, ""])[1]
		)
		.replace("undefined", "3_2")
		.replace("_", ".")
		.replace("_", "")
		.replace("_", ""),
		) \|\| false;
		haveImageRendering = false;
		if (iOS && iOS >= 11) {
		@@ -323,12 +323,12 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
		this._touch_touchstart.bind(this),
		{
		passive: false,
		}
		},
		);

		this.$wrapper.addEventListener(
		"touchmove",
		this._touch_touchmove.bind(this)
		this._touch_touchmove.bind(this),
		);

		this.$wrapper.addEventListener("touchend", this._touch_touchend.bind(this));
		@@ -339,15 +339,15 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {

		this.$wrapper.removeEventListener(
		"touchstart",
		this._touch_touchstart.bind(this)
		this._touch_touchstart.bind(this),
		);
		this.$wrapper.removeEventListener(
		"touchmove",
		this._touch_touchmove.bind(this)
		this._touch_touchmove.bind(this),
		);
		this.$wrapper.removeEventListener(
		"touchend",
		this._touch_touchend.bind(this)
		this._touch_touchend.bind(this),
		);
		}

		@@ -556,7 +556,7 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {

		unregisterMouseEvents() {
		console.debug(
		"[PanZoom] Unregistering mouse events to $wrapper & document"
		"[PanZoom] Unregistering mouse events to $wrapper & document",
		);

		this.$wrapper.removeEventListener("wheel", this._mouse_wheel);
		@@ -703,29 +703,29 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
		suppressEmit: boolean;
		} = {
		suppressEmit: false,
		}
		},
		) {
		if (!suppressEmit) {
		this.emit("viewportMove", {
		scale: this.transform.scale,
		x: this.transform.x,
		y: this.transform.y,
		});
		}

		if (this.flags.useZoom) {
		this.$zoom.style.setProperty("zoom", this.transform.scale * 100 + "%");
		} else {
		this.$zoom.style.setProperty(
		"transform",
		`scale(${this.transform.scale})`
		`scale(${this.transform.scale})`,
		);
		}

		this.$move.style.setProperty(
		"transform",
		`translate(${this.transform.x}px, ${this.transform.y}px)`
		`translate(${this.transform.x}px, ${this.transform.y}px)`,
		);

		if (!suppressEmit) {
		this.emit("viewportMove", {
		scale: this.transform.scale,
		x: this.transform.x,
		y: this.transform.y,
		});
		}
		}

		cleanup() {
		@@ -741,7 +741,7 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
		this.transform.scale = checkZoomBounds(
		this.transform.scale * 1.5 ** adj,
		this.setup.scale[0],
		this.setup.scale[1]
		this.setup.scale[1],
		);
		}
		}