Feat/testing ref

.gitignore

@@ -13,6 +13,9 @@ dist-ssr
 *.local
 *.local.*
 
+# Test output
+tests/fixtures/__diffs__/
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

package.json

@@ -27,10 +27,13 @@
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@eslint/js": "^9.39.4",
+    "@napi-rs/canvas": "^0.1.99",
     "@rolldown/plugin-babel": "^0.2.2",
     "@tailwindcss/vite": "^4.2.2",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^24.12.2",
+    "@types/pixelmatch": "^5.2.6",
+    "@types/pngjs": "^6.0.5",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
@@ -39,6 +42,8 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.4.0",
+    "pixelmatch": "^7.1.0",
+    "pngjs": "^7.0.0",
     "tailwindcss": "^4.2.2",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.58.0",

src/components/Canvas/BarcodeObject.tsx

@@ -37,7 +37,7 @@ export function BarcodeObject({
 }: Props) {
   // bwip-js is synchronous — compute canvas directly in render (no async flash on resize)
   const { barcodeCanvas, errorMsg } = useMemo(() => {
-    const opts = buildBwipOptions(obj);
+    const opts = buildBwipOptions(obj, scale, dpmm);
     if (!opts) return { barcodeCanvas: null, errorMsg: null };
     const canvas = document.createElement("canvas");
     try {
@@ -52,7 +52,7 @@ export function BarcodeObject({
         errorMsg: e instanceof Error ? e.message : String(e),
       };
     }
-  }, [obj]);
+  }, [obj, scale, dpmm]);
 
   let displayW = 0;
   let displayH = 0;

src/components/Canvas/KonvaObject.tsx

@@ -399,27 +399,6 @@ function KonvaObjectInner({
       } else if (p.rotation === "B") {
         displayX -= renderedH;
       }
-    } else if (
-      obj.type === "code128" ||
-      obj.type === "code39" ||
-      obj.type === "ean13" ||
-      obj.type === "upca" ||
-      obj.type === "ean8" ||
-      obj.type === "upce" ||
-      obj.type === "interleaved2of5" ||
-      obj.type === "code93"
-    ) {
-      const p = obj.props as { height: number };
-      displayY -= p.height;
-    } else if (obj.type === "pdf417") {
-      const p = obj.props as { rowHeight: number };
-      displayY -= p.rowHeight * 10;
-    } else if (obj.type === "qrcode") {
-      const p = obj.props as { magnification: number };
-      displayY -= p.magnification * 25;
-    } else if (obj.type === "datamatrix") {
-      const p = obj.props as { dimension: number };
-      displayY -= p.dimension * 20;
     }
   }
 
@@ -470,6 +449,25 @@ function KonvaObjectInner({
       }
     }
 
+    // Inverse of the ^FT display offset applied in the render phase above.
+    // Without this, dragging an ^FT object saves its top-left Konva position
+    // instead of the ZPL baseline coordinate, causing a vertical jump on re-render.
+    if (obj.positionType === "FT") {
+      if (obj.type === "text" || obj.type === "serial") {
+        const p = obj.props as { fontHeight: number; rotation: string };
+        const renderedH = p.fontHeight / 1.3;
+        if (p.rotation === "N") {
+          finalY += p.fontHeight;
+        } else if (p.rotation === "R") {
+          finalX -= renderedH;
+        } else if (p.rotation === "I") {
+          finalY -= renderedH;
+        } else if (p.rotation === "B") {
+          finalX += renderedH;
+        }
+      }
+    }
+
     onChange({
       x: finalX,
       y: finalY,

src/components/Canvas/LabelCanvas.tsx

@@ -77,7 +77,7 @@ export function LabelCanvas({ unit, showGrid, onGridToggle, snapEnabled, onSnapT
 
   const colors = useColorScheme();
 
-  const { label, objects, selectedIds, addObject, updateObject, selectObject, toggleSelectObject, selectObjects } =
+  const { label, objects, selectedIds, addObject, updateObject, updateObjects, selectObject, toggleSelectObject, selectObjects } =
     useLabelStore();
 
   useEffect(() => {
@@ -168,14 +168,16 @@ export function LabelCanvas({ unit, showGrid, onGridToggle, snapEnabled, onSnapT
       const dy =
         e.code === "ArrowDown" ? step : e.code === "ArrowUp" ? -step : 0;
 
-      ids.forEach((sid) => {
-        const obj = objs.find((o) => o.id === sid);
-        if (obj) updateObject(sid, { x: obj.x + dx, y: obj.y + dy });
-      });
+      updateObjects(
+        ids.flatMap((sid) => {
+          const obj = objs.find((o) => o.id === sid);
+          return obj ? [{ id: sid, changes: { x: obj.x + dx, y: obj.y + dy } }] : [];
+        })
+      );
     };
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, [snapEnabled, snapSizeMm, label.dpmm, updateObject]);
+  }, [snapEnabled, snapSizeMm, label.dpmm, updateObjects]);
 
   // Object-snap: applied after grid-snap on every dragmove, single-object only.
   // Fires on the Stage so it sees the already-grid-snapped node position.
@@ -342,11 +344,16 @@ export function LabelCanvas({ unit, showGrid, onGridToggle, snapEnabled, onSnapT
       if (srcObj) {
         const ddx = finalChanges.x !== undefined ? finalChanges.x - srcObj.x : 0;
         const ddy = finalChanges.y !== undefined ? finalChanges.y - srcObj.y : 0;
-        selIds.forEach((sid) => {
-          if (sid === id) return;
-          const other = currentObjs.find((o) => o.id === sid);
-          if (other) updateObject(sid, { x: other.x + ddx, y: other.y + ddy });
-        });
+        updateObjects([
+          { id, changes: finalChanges },
+          ...selIds
+            .filter((sid) => sid !== id)
+            .flatMap((sid) => {
+              const other = currentObjs.find((o) => o.id === sid);
+              return other ? [{ id: sid, changes: { x: other.x + ddx, y: other.y + ddy } }] : [];
+            }),
+        ]);
+        return;
       }
     }
     updateObject(id, finalChanges);