@bwp-web/canvas 0.6.0 → 0.6.2

package/dist/index.js

@@ -102,6 +102,10 @@ var DEFAULT_VIEWPORT_PADDING = 0.05;
 var BASE_CANVAS_SIZE = 1e3;
 var DEFAULT_SNAP_MARGIN = 6;
 var DEFAULT_ANGLE_SNAP_INTERVAL = 15;
+function computeSnapMargin(canvasWidth, canvasHeight, zoom, baseMargin = DEFAULT_SNAP_MARGIN, scaleWithCanvasSize = true) {
+  const sizeScale = scaleWithCanvasSize ? Math.max(canvasWidth || 800, canvasHeight || 600) / BASE_CANVAS_SIZE : 1;
+  return baseMargin * sizeScale / zoom;
+}
 var MIN_DRAG_SIZE = 3;
 var POLYGON_CLOSE_THRESHOLD = 10;
 var DEFAULT_IMAGE_MAX_SIZE = 4096;
@@ -309,23 +313,23 @@ function enablePanAndZoom(canvas, options) {
       const targetX = canvasCenterX - objectCenter.x * zoom;
       const targetY = canvasCenterY - objectCenter.y * zoom;
       if (!panOpts?.animate) {
-        const vt2 = canvas.viewportTransform;
-        if (!vt2) return;
+        const viewportTransform2 = canvas.viewportTransform;
+        if (!viewportTransform2) return;
         canvas.setViewportTransform([
-          vt2[0],
-          vt2[1],
-          vt2[2],
-          vt2[3],
+          viewportTransform2[0],
+          viewportTransform2[1],
+          viewportTransform2[2],
+          viewportTransform2[3],
           targetX,
           targetY
         ]);
         return;
       }
       const duration = panOpts.duration ?? 300;
-      const vt = canvas.viewportTransform;
-      if (!vt) return;
-      const startX = vt[4];
-      const startY = vt[5];
+      const viewportTransform = canvas.viewportTransform;
+      if (!viewportTransform) return;
+      const startX = viewportTransform[4];
+      const startY = viewportTransform[5];
       const startTime = performance.now();
       function step(now) {
         const elapsed = now - startTime;
@@ -333,13 +337,13 @@ function enablePanAndZoom(canvas, options) {
         const eased = 1 - Math.pow(1 - t, 3);
         const currentX = startX + (targetX - startX) * eased;
         const currentY = startY + (targetY - startY) * eased;
-        const currentVt = canvas.viewportTransform;
-        if (!currentVt) return;
+        const currentTransform = canvas.viewportTransform;
+        if (!currentTransform) return;
         canvas.setViewportTransform([
-          currentVt[0],
-          currentVt[1],
-          currentVt[2],
-          currentVt[3],
+          currentTransform[0],
+          currentTransform[1],
+          currentTransform[2],
+          currentTransform[3],
           currentX,
           currentY
         ]);
@@ -526,6 +530,7 @@ async function setBackgroundImage(canvas, url, options) {
     imageUrl = result.url;
   }
   const img = await FabricImage.fromURL(imageUrl, { crossOrigin: "anonymous" });
+  img.set({ left: img.width / 2, top: img.height / 2 });
   canvas.backgroundImage = img;
   if (prevContrast !== void 0 && prevContrast !== 1) {
     setBackgroundContrast(canvas, prevContrast);
@@ -723,63 +728,6 @@ registerSnapPointExtractor(
 // src/alignment/objectAlignment.ts
 import { util as util2 } from "fabric";
 
-// src/alignment/objectAlignmentRendering.ts
-function drawAlignmentLine(config, origin, target) {
-  const ctx = config.canvas.getTopContext();
-  const vt = config.canvas.viewportTransform;
-  const zoom = config.canvas.getZoom();
-  ctx.save();
-  ctx.transform(...vt);
-  ctx.lineWidth = config.width / zoom;
-  if (config.lineDash) ctx.setLineDash(config.lineDash);
-  ctx.strokeStyle = config.color;
-  ctx.beginPath();
-  ctx.moveTo(origin.x, origin.y);
-  ctx.lineTo(target.x, target.y);
-  ctx.stroke();
-  if (config.lineDash) ctx.setLineDash([]);
-  drawXMarker(ctx, origin, config.xSize / zoom);
-  drawXMarker(ctx, target, config.xSize / zoom);
-  ctx.restore();
-}
-function drawXMarker(ctx, point, size) {
-  ctx.save();
-  ctx.translate(point.x, point.y);
-  ctx.beginPath();
-  ctx.moveTo(-size, -size);
-  ctx.lineTo(size, size);
-  ctx.moveTo(size, -size);
-  ctx.lineTo(-size, size);
-  ctx.stroke();
-  ctx.restore();
-}
-function drawMarkerList(config, lines) {
-  const ctx = config.canvas.getTopContext();
-  const vt = config.canvas.viewportTransform;
-  const zoom = config.canvas.getZoom();
-  const markerSize = config.xSize / zoom;
-  ctx.save();
-  ctx.transform(...vt);
-  ctx.lineWidth = config.width / zoom;
-  ctx.strokeStyle = config.color;
-  for (const item of lines) drawXMarker(ctx, item.target, markerSize);
-  ctx.restore();
-}
-function drawVerticalAlignmentLines(config, lines) {
-  for (const v of lines) {
-    const { origin, target } = JSON.parse(v);
-    const from = { x: target.x, y: origin.y };
-    drawAlignmentLine(config, from, target);
-  }
-}
-function drawHorizontalAlignmentLines(config, lines) {
-  for (const h of lines) {
-    const { origin, target } = JSON.parse(h);
-    const from = { x: origin.x, y: target.y };
-    drawAlignmentLine(config, from, target);
-  }
-}
-
 // src/alignment/objectAlignmentMath.ts
 var OPPOSITE_ORIGIN_MAP = {
   tl: ["right", "bottom"],
@@ -903,6 +851,61 @@ function collectHorizontalSnapOffset(props) {
 }
 
 // src/alignment/objectAlignment.ts
+function drawXMarker(ctx, point, size) {
+  ctx.save();
+  ctx.translate(point.x, point.y);
+  ctx.beginPath();
+  ctx.moveTo(-size, -size);
+  ctx.lineTo(size, size);
+  ctx.moveTo(size, -size);
+  ctx.lineTo(-size, size);
+  ctx.stroke();
+  ctx.restore();
+}
+function drawAlignmentLine(config, origin, target) {
+  const ctx = config.canvas.getTopContext();
+  const vt = config.canvas.viewportTransform;
+  const zoom = config.canvas.getZoom();
+  ctx.save();
+  ctx.transform(...vt);
+  ctx.lineWidth = config.width / zoom;
+  if (config.lineDash) ctx.setLineDash(config.lineDash);
+  ctx.strokeStyle = config.color;
+  ctx.beginPath();
+  ctx.moveTo(origin.x, origin.y);
+  ctx.lineTo(target.x, target.y);
+  ctx.stroke();
+  if (config.lineDash) ctx.setLineDash([]);
+  drawXMarker(ctx, origin, config.xSize / zoom);
+  drawXMarker(ctx, target, config.xSize / zoom);
+  ctx.restore();
+}
+function drawMarkerList(config, lines) {
+  const ctx = config.canvas.getTopContext();
+  const vt = config.canvas.viewportTransform;
+  const zoom = config.canvas.getZoom();
+  const markerSize = config.xSize / zoom;
+  ctx.save();
+  ctx.transform(...vt);
+  ctx.lineWidth = config.width / zoom;
+  ctx.strokeStyle = config.color;
+  for (const item of lines) drawXMarker(ctx, item.target, markerSize);
+  ctx.restore();
+}
+function drawVerticalAlignmentLines(config, lines) {
+  for (const v of lines) {
+    const { origin, target } = JSON.parse(v);
+    const from = { x: target.x, y: origin.y };
+    drawAlignmentLine(config, from, target);
+  }
+}
+function drawHorizontalAlignmentLines(config, lines) {
+  for (const h of lines) {
+    const { origin, target } = JSON.parse(h);
+    const from = { x: origin.x, y: target.y };
+    drawAlignmentLine(config, from, target);
+  }
+}
 function adjustCornerForFlip(corner, target) {
   let adjusted = corner;
   if (target.flipX) {
@@ -957,9 +960,13 @@ var ObjectAlignmentGuides = class {
   }
   // --- Margin calculation ---
   computeMargin() {
-    const zoom = this.canvas.getZoom();
-    const sizeScale = this.scaleWithCanvasSize ? Math.max(this.canvas.width ?? 800, this.canvas.height ?? 600) / BASE_CANVAS_SIZE : 1;
-    return this.margin * sizeScale / zoom;
+    return computeSnapMargin(
+      this.canvas.width ?? 800,
+      this.canvas.height ?? 600,
+      this.canvas.getZoom(),
+      this.margin,
+      this.scaleWithCanvasSize
+    );
   }
   // --- Snap point caching ---
   getCachedSnapPoints(object) {
@@ -1095,10 +1102,13 @@ function enableRotationSnap(canvas, options) {
 // src/alignment/cursorSnapping.ts
 import { Point as Point5 } from "fabric";
 function snapCursorPoint(canvas, rawPoint, options) {
-  const zoom = canvas.getZoom();
-  const scaleWithSize = options?.scaleWithCanvasSize !== false;
-  const sizeScale = scaleWithSize ? Math.max(canvas.width ?? 800, canvas.height ?? 600) / BASE_CANVAS_SIZE : 1;
-  const margin = (options?.margin ?? DEFAULT_SNAP_MARGIN) * sizeScale / zoom;
+  const margin = computeSnapMargin(
+    canvas.width ?? 800,
+    canvas.height ?? 600,
+    canvas.getZoom(),
+    options?.margin ?? DEFAULT_SNAP_MARGIN,
+    options?.scaleWithCanvasSize !== false
+  );
   const exclude = options?.exclude ?? /* @__PURE__ */ new Set();
   let targetPoints;
   if (options?.targetPoints) {
@@ -2161,20 +2171,7 @@ function enableScaledBorderRadius(canvas, options) {
 function getBaseStrokeWidth(obj) {
   return strokeBaseMap.get(obj) ?? obj.strokeWidth ?? 0;
 }
-function serializeCanvas(canvas, options) {
-  const properties = [
-    "data",
-    "shapeType",
-    // Control styling — absent from Fabric's default toObject output
-    "borderColor",
-    "cornerColor",
-    "cornerStrokeColor",
-    "transparentCorners",
-    // Interaction locks — absent from Fabric's default toObject output
-    "lockRotation",
-    "lockUniScaling",
-    ...options?.properties ?? []
-  ];
+function prepareStrokeWidths(canvas) {
   const scaledWidths = /* @__PURE__ */ new Map();
   canvas.forEachObject((obj) => {
     const base = strokeBaseMap.get(obj);
@@ -2183,6 +2180,11 @@ function serializeCanvas(canvas, options) {
       obj.strokeWidth = base;
     }
   });
+  return () => scaledWidths.forEach((scaled, obj) => {
+    obj.strokeWidth = scaled;
+  });
+}
+function prepareBorderRadii(canvas) {
   const appliedRadii = /* @__PURE__ */ new Map();
   canvas.forEachObject((obj) => {
     if (!(obj instanceof Rect5)) return;
@@ -2192,20 +2194,109 @@ function serializeCanvas(canvas, options) {
       obj.set({ rx: base.rx, ry: base.ry });
     }
   });
-  const json = canvas.toObject(properties);
-  delete json.backgroundColor;
-  scaledWidths.forEach((scaled, obj) => {
-    obj.strokeWidth = scaled;
+  return () => appliedRadii.forEach((radii, obj) => {
+    obj.set(radii);
   });
-  appliedRadii.forEach((radii, obj) => {
-    obj.set({ rx: radii.rx, ry: radii.ry });
+}
+function prepareObjectOrigins(canvas) {
+  const savedOrigins = /* @__PURE__ */ new Map();
+  canvas.forEachObject((obj) => {
+    if (obj.originX === "left" && obj.originY === "top") return;
+    savedOrigins.set(obj, {
+      originX: obj.originX,
+      originY: obj.originY,
+      left: obj.left ?? 0,
+      top: obj.top ?? 0
+    });
+    const leftTop = obj.getPositionByOrigin("left", "top");
+    obj.set({
+      originX: "left",
+      originY: "top",
+      left: leftTop.x,
+      top: leftTop.y
+    });
+  });
+  return () => savedOrigins.forEach((saved, obj) => {
+    obj.set(saved);
   });
+}
+function prepareBackgroundOrigin(canvas) {
+  const bg = canvas.backgroundImage;
+  if (!(bg instanceof FabricImage2) || bg.originX === "left" && bg.originY === "top") {
+    return () => {
+    };
+  }
+  const saved = {
+    originX: bg.originX,
+    originY: bg.originY,
+    left: bg.left ?? 0,
+    top: bg.top ?? 0
+  };
+  const leftTop = bg.getPositionByOrigin("left", "top");
+  bg.set({ originX: "left", originY: "top", left: leftTop.x, top: leftTop.y });
+  return () => {
+    bg.set(saved);
+  };
+}
+function prepareStrokeWidthBaseData(canvas) {
+  const savedData = /* @__PURE__ */ new Map();
+  canvas.forEachObject((obj) => {
+    const base = strokeBaseMap.get(obj) ?? obj.strokeWidth;
+    if (base !== void 0 && base !== 0 && obj.data) {
+      savedData.set(obj, obj.data);
+      obj.data = {
+        ...obj.data,
+        strokeWidthBase: base
+      };
+    }
+  });
+  return () => savedData.forEach((originalData, obj) => {
+    obj.data = originalData;
+  });
+}
+function serializeCanvas(canvas, options) {
+  const properties = [
+    "data",
+    "shapeType",
+    // Control styling — absent from Fabric's default toObject output
+    "borderColor",
+    "cornerColor",
+    "cornerStrokeColor",
+    "transparentCorners",
+    // Interaction locks — absent from Fabric's default toObject output
+    "lockRotation",
+    "lockUniScaling",
+    ...options?.properties ?? []
+  ];
+  const restoreStrokeWidths = prepareStrokeWidths(canvas);
+  const restoreBorderRadii = prepareBorderRadii(canvas);
+  const restoreOrigins = prepareObjectOrigins(canvas);
+  const restoreBgOrigin = prepareBackgroundOrigin(canvas);
+  const restoreData = prepareStrokeWidthBaseData(canvas);
+  const json = canvas.toObject(properties);
+  delete json.backgroundColor;
+  json.backgroundFilters = {
+    opacity: getBackgroundContrast(canvas),
+    inverted: getBackgroundInverted(canvas)
+  };
+  if (canvas.lockLightMode !== void 0) {
+    json.lockLightMode = canvas.lockLightMode;
+  }
+  restoreStrokeWidths();
+  restoreBorderRadii();
+  restoreOrigins();
+  restoreBgOrigin();
+  restoreData();
   return json;
 }
 async function loadCanvas(canvas, json, options) {
   await canvas.loadFromJSON(json);
   canvas.backgroundColor = "";
   delete canvas.backgroundFilters;
+  const rawCanvas = canvas;
+  if (rawCanvas.lockLightMode !== void 0) {
+    canvas.lockLightMode = rawCanvas.lockLightMode;
+  }
   const bg = canvas.backgroundImage;
   if (bg instanceof FabricImage2) {
     if (bg.originX !== "center" || bg.originY !== "center") {
@@ -2398,105 +2489,104 @@ function useEditCanvas(options) {
     (canvas) => {
       canvasRef.current = canvas;
       const opts = optionsRef.current;
-      if (opts?.scaledStrokes !== false) {
-        enableScaledStrokes(canvas);
-      }
-      if (opts?.borderRadius !== false) {
-        const borderRadiusOpts = typeof opts?.borderRadius === "number" ? { radius: opts.borderRadius } : void 0;
-        enableScaledBorderRadius(canvas, borderRadiusOpts);
-      }
-      if (opts?.keyboardShortcuts !== false) {
-        keyboardCleanupRef.current = enableKeyboardShortcuts(canvas);
-      }
-      setCanvasAlignmentEnabled(canvas, opts?.enableAlignment);
-      if (opts?.panAndZoom !== false) {
-        viewportRef.current = enablePanAndZoom(
-          canvas,
-          typeof opts?.panAndZoom === "object" ? opts.panAndZoom : void 0
-        );
-      }
-      const alignmentEnabled = resolveAlignmentEnabled(
-        opts?.enableAlignment,
-        opts?.alignment
-      );
-      if (alignmentEnabled) {
-        alignmentCleanupRef.current = enableObjectAlignment(
-          canvas,
-          typeof opts?.alignment === "object" ? opts.alignment : void 0
-        );
-      }
-      if (opts?.rotationSnap !== false) {
-        rotationSnapCleanupRef.current = enableRotationSnap(
-          canvas,
-          typeof opts?.rotationSnap === "object" ? opts.rotationSnap : void 0
+      setupFeatures();
+      setupEventListeners();
+      invokeOnReady();
+      function setupFeatures() {
+        if (opts?.scaledStrokes !== false) {
+          enableScaledStrokes(canvas);
+        }
+        if (opts?.borderRadius !== false) {
+          const borderRadiusOpts = typeof opts?.borderRadius === "number" ? { radius: opts.borderRadius } : void 0;
+          enableScaledBorderRadius(canvas, borderRadiusOpts);
+        }
+        if (opts?.keyboardShortcuts !== false) {
+          keyboardCleanupRef.current = enableKeyboardShortcuts(canvas);
+        }
+        setCanvasAlignmentEnabled(canvas, opts?.enableAlignment);
+        if (opts?.panAndZoom !== false) {
+          viewportRef.current = enablePanAndZoom(
+            canvas,
+            typeof opts?.panAndZoom === "object" ? opts.panAndZoom : void 0
+          );
+        }
+        const alignmentEnabled = resolveAlignmentEnabled(
+          opts?.enableAlignment,
+          opts?.alignment
         );
+        if (alignmentEnabled) {
+          alignmentCleanupRef.current = enableObjectAlignment(
+            canvas,
+            typeof opts?.alignment === "object" ? opts.alignment : void 0
+          );
+        }
+        if (opts?.rotationSnap !== false) {
+          rotationSnapCleanupRef.current = enableRotationSnap(
+            canvas,
+            typeof opts?.rotationSnap === "object" ? opts.rotationSnap : void 0
+          );
+        }
+        if (opts?.history) {
+          const historyOpts = typeof opts.history === "object" ? opts.history : void 0;
+          historyRef.current = createHistoryTracker(canvas, historyOpts);
+        }
       }
-      canvas.on("mouse:wheel", () => {
-        setZoom(canvas.getZoom());
-      });
-      canvas.on("selection:created", (e) => {
-        setSelected(e.selected ?? []);
-      });
-      canvas.on("selection:updated", (e) => {
-        setSelected(e.selected ?? []);
-      });
-      canvas.on("selection:cleared", () => {
-        setSelected([]);
-      });
-      if (opts?.trackChanges) {
-        canvas.on("object:added", () => setIsDirty(true));
-        canvas.on("object:removed", () => setIsDirty(true));
-        canvas.on("object:modified", () => setIsDirty(true));
-      }
-      if (opts?.history) {
-        const syncHistoryState = () => {
-          const h = historyRef.current;
-          if (!h) return;
-          setTimeout(() => {
-            setCanUndo(h.canUndo());
-            setCanRedo(h.canRedo());
-          }, 350);
-        };
-        canvas.on("object:added", syncHistoryState);
-        canvas.on("object:removed", syncHistoryState);
-        canvas.on("object:modified", syncHistoryState);
-      }
-      if (opts?.vertexEdit !== false) {
-        const vertexOpts = typeof opts?.vertexEdit === "object" ? opts.vertexEdit : void 0;
-        canvas.on("mouse:dblclick", (e) => {
-          if (e.target && e.target instanceof Polygon4) {
-            vertexEditCleanupRef.current?.();
-            vertexEditCleanupRef.current = enableVertexEdit(canvas, e.target, {
-              ...vertexOpts,
-              onExit: () => {
-                vertexEditCleanupRef.current = null;
-                setIsEditingVertices(false);
-              }
-            });
-            setIsEditingVertices(true);
-          }
-        });
-      }
-      if (opts?.history) {
-        const historyOpts = typeof opts.history === "object" ? opts.history : void 0;
-        historyRef.current = createHistoryTracker(canvas, historyOpts);
+      function setupEventListeners() {
+        canvas.on("mouse:wheel", () => setZoom(canvas.getZoom()));
+        canvas.on("selection:created", (e) => setSelected(e.selected ?? []));
+        canvas.on("selection:updated", (e) => setSelected(e.selected ?? []));
+        canvas.on("selection:cleared", () => setSelected([]));
+        if (opts?.trackChanges) {
+          canvas.on("object:added", () => setIsDirty(true));
+          canvas.on("object:removed", () => setIsDirty(true));
+          canvas.on("object:modified", () => setIsDirty(true));
+        }
+        if (opts?.history) {
+          const syncHistoryState = () => {
+            const h = historyRef.current;
+            if (!h) return;
+            setTimeout(() => {
+              setCanUndo(h.canUndo());
+              setCanRedo(h.canRedo());
+            }, 350);
+          };
+          canvas.on("object:added", syncHistoryState);
+          canvas.on("object:removed", syncHistoryState);
+          canvas.on("object:modified", syncHistoryState);
+        }
+        if (opts?.vertexEdit !== false) {
+          const vertexOpts = typeof opts?.vertexEdit === "object" ? opts.vertexEdit : void 0;
+          canvas.on("mouse:dblclick", (e) => {
+            if (e.target && e.target instanceof Polygon4) {
+              vertexEditCleanupRef.current?.();
+              vertexEditCleanupRef.current = enableVertexEdit(
+                canvas,
+                e.target,
+                {
+                  ...vertexOpts,
+                  onExit: () => {
+                    vertexEditCleanupRef.current = null;
+                    setIsEditingVertices(false);
+                  }
+                }
+              );
+              setIsEditingVertices(true);
+            }
+          });
+        }
       }
-      const onReadyResult = opts?.onReady?.(canvas);
-      if (opts?.autoFitToBackground !== false) {
+      function invokeOnReady() {
+        const onReadyResult = opts?.onReady?.(canvas);
         Promise.resolve(onReadyResult).then(() => {
-          if (canvas.backgroundImage) {
+          if (opts?.autoFitToBackground !== false && canvas.backgroundImage) {
             fitViewportToBackground(canvas);
             syncZoom(canvasRef, setZoom);
           }
           historyRef.current?.pushSnapshot();
         });
-      } else {
-        Promise.resolve(onReadyResult).then(() => {
-          historyRef.current?.pushSnapshot();
-        });
       }
     },
-    // onReady and panAndZoom are intentionally excluded — we only initialize once
+    // Dependency array intentionally empty — we only initialize once on mount
     []
   );
   useEffect2(() => {