From 48cdffdc9479f142b92ec33ca6ae1816e081d360 Mon Sep 17 00:00:00 2001
From: Grant <grant@sc07.com>
Date: Mon, 6 Jul 2026 01:03:37 -0600
Subject: [PATCH 1/2] [lib] fix zooming resulting in wrong coords

it was due to wrong order of operations

fixes #191
---
 packages/lib/src/renderer/PanZoom.ts | 44 ++++++++++++++--------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/lib/src/renderer/PanZoom.ts b/packages/lib/src/renderer/PanZoom.ts
index 9458300..6f9ea61 100644
--- a/packages/lib/src/renderer/PanZoom.ts
+++ b/packages/lib/src/renderer/PanZoom.ts
@@ -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],
     );
   }
 }
-- 
GitLab


From 28c5be020566c566979565c257c8c62295c50889 Mon Sep 17 00:00:00 2001
From: Grant <grant@sc07.com>
Date: Mon, 6 Jul 2026 01:17:32 -0600
Subject: [PATCH 2/2] show coords on initial load

---
 packages/client/src/components/CanvasWrapper.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/client/src/components/CanvasWrapper.tsx b/packages/client/src/components/CanvasWrapper.tsx
index ce96d48..8e50307 100644
--- a/packages/client/src/components/CanvasWrapper.tsx
+++ b/packages/client/src/components/CanvasWrapper.tsx
@@ -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");
-- 
GitLab