@bwp-web/canvas 0.5.1 → 0.6.0

package/dist/index.cjs

@@ -35,6 +35,7 @@ __export(index_exports, {
   Rect: () => import_fabric19.Rect,
   createCircle: () => createCircle,
   createCircleAtPoint: () => createCircleAtPoint,
+  createHistoryTracker: () => createHistoryTracker,
   createPolygon: () => createPolygon,
   createPolygonAtPoint: () => createPolygonAtPoint,
   createPolygonFromDrag: () => createPolygonFromDrag,
@@ -115,7 +116,9 @@ function Canvas({
   height,
   className,
   style,
-  onReady
+  onReady,
+  keyboardShortcuts,
+  fabricOptions
 }) {
   const canvasRef = (0, import_react.useRef)(null);
   const wrapperRef = (0, import_react.useRef)(null);
@@ -127,11 +130,12 @@ function Canvas({
     const initialWidth = isFixedSize ? width : wrapper.clientWidth || 800;
     const initialHeight = isFixedSize ? height : wrapper.clientHeight || 600;
     const fabricCanvas = new import_fabric2.Canvas(el, {
+      ...fabricOptions,
       width: initialWidth,
       height: initialHeight
     });
     onReady?.(fabricCanvas);
-    const cleanupShortcuts = enableKeyboardShortcuts(fabricCanvas);
+    const cleanupShortcuts = keyboardShortcuts ? enableKeyboardShortcuts(fabricCanvas) : void 0;
     let observer;
     let rafId = 0;
     if (!isFixedSize) {
@@ -155,7 +159,7 @@ function Canvas({
     return () => {
       cancelAnimationFrame(rafId);
       observer?.disconnect();
-      cleanupShortcuts();
+      cleanupShortcuts?.();
       fabricCanvas.dispose();
     };
   }, []);
@@ -164,7 +168,7 @@ function Canvas({
 }
 
 // src/hooks/useEditCanvas.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_fabric17 = require("fabric");
 
 // src/viewport.ts
@@ -173,7 +177,7 @@ var import_fabric3 = require("fabric");
 // src/constants.ts
 var DEFAULT_MIN_ZOOM = 0.2;
 var DEFAULT_MAX_ZOOM = 10;
-var DEFAULT_ZOOM_FACTOR = 1.03;
+var DEFAULT_ZOOM_FACTOR = 0.999;
 var DEFAULT_ZOOM_STEP = 1.2;
 var DEFAULT_VIEWPORT_PADDING = 0.05;
 var BASE_CANVAS_SIZE = 1e3;
@@ -216,7 +220,7 @@ function setupWheelZoom(canvas, bounds, zoomFactor, isEnabled) {
     e.stopPropagation();
     const delta = e.deltaY;
     let zoom = canvas.getZoom();
-    zoom = delta < 0 ? zoom * zoomFactor : zoom / zoomFactor;
+    zoom *= zoomFactor ** delta;
     zoom = Math.min(Math.max(zoom, bounds.minZoom), bounds.maxZoom);
     canvas.zoomToPoint(new import_fabric3.Point(e.offsetX, e.offsetY), zoom);
   };
@@ -324,8 +328,15 @@ function enablePanAndZoom(canvas, options) {
   const zoomFactor = options?.zoomFactor ?? DEFAULT_ZOOM_FACTOR;
   let mode = options?.initialMode ?? "select";
   let enabled = true;
+  let currentAnimRafId = null;
   const isEnabled = () => enabled;
   const getMode = () => mode;
+  function cancelAnimation() {
+    if (currentAnimRafId !== null) {
+      cancelAnimationFrame(currentAnimRafId);
+      currentAnimRafId = null;
+    }
+  }
   const handleWheel = setupWheelZoom(canvas, bounds, zoomFactor, isEnabled);
   const panHandlers = setupMousePan(canvas, getMode, isEnabled);
   const cleanupPinch = setupPinchZoom(canvas, bounds, isEnabled);
@@ -371,6 +382,7 @@ function enablePanAndZoom(canvas, options) {
       );
     },
     panToObject(object, panOpts) {
+      cancelAnimation();
       const zoom = canvas.getZoom();
       const objectCenter = object.getCenterPoint();
       const canvasCenterX = canvas.getWidth() / 2;
@@ -413,12 +425,37 @@ function enablePanAndZoom(canvas, options) {
           currentY
         ]);
         if (t < 1) {
-          requestAnimationFrame(step);
+          currentAnimRafId = requestAnimationFrame(step);
+        } else {
+          currentAnimRafId = null;
         }
       }
-      requestAnimationFrame(step);
+      currentAnimRafId = requestAnimationFrame(step);
+    },
+    zoomToFit(object, fitOpts) {
+      cancelAnimation();
+      const padding = fitOpts?.padding ?? 0.1;
+      const objWidth = (object.width ?? 0) * (object.scaleX ?? 1);
+      const objHeight = (object.height ?? 0) * (object.scaleY ?? 1);
+      if (!objWidth || !objHeight) return;
+      const canvasWidth = canvas.getWidth();
+      const canvasHeight = canvas.getHeight();
+      const availableWidth = canvasWidth * (1 - padding * 2);
+      const availableHeight = canvasHeight * (1 - padding * 2);
+      const zoom = Math.min(
+        Math.max(
+          Math.min(availableWidth / objWidth, availableHeight / objHeight),
+          bounds.minZoom
+        ),
+        bounds.maxZoom
+      );
+      const objectCenter = object.getCenterPoint();
+      const offsetX = canvasWidth / 2 - objectCenter.x * zoom;
+      const offsetY = canvasHeight / 2 - objectCenter.y * zoom;
+      canvas.setViewportTransform([zoom, 0, 0, zoom, offsetX, offsetY]);
     },
     cleanup() {
+      cancelAnimation();
       canvas.off("mouse:wheel", handleWheel);
       canvas.off("mouse:down", panHandlers.handleMouseDown);
       canvas.off("mouse:move", panHandlers.handleMouseMove);
@@ -431,6 +468,9 @@ function resetViewport(canvas) {
   canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
 }
 
+// src/hooks/shared.ts
+var import_react2 = require("react");
+
 // src/background.ts
 var import_fabric4 = require("fabric");
 function getBackgroundImage(canvas) {
@@ -561,7 +601,8 @@ function resizeImageUrl(url, options) {
 async function setBackgroundImage(canvas, url, options) {
   const prevContrast = options?.preserveContrast ? getBackgroundContrast(canvas) : void 0;
   let imageUrl = url;
-  if (options !== void 0) {
+  const hasResizeOptions = options?.maxSize !== void 0 || options?.minSize !== void 0;
+  if (hasResizeOptions) {
     const result = await resizeImageUrl(url, options);
     imageUrl = result.url;
   }
@@ -579,29 +620,35 @@ function syncZoom(canvasRef, setZoom) {
   const canvas = canvasRef.current;
   if (canvas) setZoom(canvas.getZoom());
 }
-function createViewportActions(canvasRef, viewportRef, setZoom) {
-  const resetViewport2 = () => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    if (canvas.backgroundImage) {
-      fitViewportToBackground(canvas);
-    } else {
-      resetViewport(canvas);
-    }
-    setZoom(canvas.getZoom());
-  };
-  const zoomIn = (step) => {
-    viewportRef.current?.zoomIn(step);
-    syncZoom(canvasRef, setZoom);
-  };
-  const zoomOut = (step) => {
-    viewportRef.current?.zoomOut(step);
-    syncZoom(canvasRef, setZoom);
-  };
-  const panToObject = (object, panOpts) => {
-    viewportRef.current?.panToObject(object, panOpts);
-  };
-  return { resetViewport: resetViewport2, zoomIn, zoomOut, panToObject };
+function useViewportActions(canvasRef, viewportRef, setZoom) {
+  return (0, import_react2.useMemo)(() => {
+    const resetViewport2 = () => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      if (canvas.backgroundImage) {
+        fitViewportToBackground(canvas);
+      } else {
+        resetViewport(canvas);
+      }
+      setZoom(canvas.getZoom());
+    };
+    const zoomIn = (step) => {
+      viewportRef.current?.zoomIn(step);
+      syncZoom(canvasRef, setZoom);
+    };
+    const zoomOut = (step) => {
+      viewportRef.current?.zoomOut(step);
+      syncZoom(canvasRef, setZoom);
+    };
+    const panToObject = (object, panOpts) => {
+      viewportRef.current?.panToObject(object, panOpts);
+    };
+    const zoomToFit = (object, fitOpts) => {
+      viewportRef.current?.zoomToFit(object, fitOpts);
+      syncZoom(canvasRef, setZoom);
+    };
+    return { resetViewport: resetViewport2, zoomIn, zoomOut, panToObject, zoomToFit };
+  }, []);
 }
 function resolveAlignmentEnabled(enableAlignment, alignmentProp) {
   if (enableAlignment !== void 0) return enableAlignment;
@@ -1660,7 +1707,7 @@ function createPolygonAtPoint(canvas, point, options) {
   canvas.requestRenderAll();
   return polygon;
 }
-function createPolygonFromDrag(canvas, start, end, style) {
+function createPolygonFromDrag(canvas, start, end, options) {
   const width = Math.abs(end.x - start.x);
   const height = Math.abs(end.y - start.y);
   const left = Math.min(start.x, end.x) + width / 2;
@@ -1672,16 +1719,16 @@ function createPolygonFromDrag(canvas, start, end, style) {
       { x: width, y: height },
       { x: 0, y: height }
     ],
-    { ...DEFAULT_SHAPE_STYLE, left, top, ...style }
+    { ...DEFAULT_SHAPE_STYLE, left, top, ...options }
   );
   canvas.add(polygon);
   canvas.requestRenderAll();
   return polygon;
 }
-function createPolygonFromVertices(canvas, points, style) {
+function createPolygonFromVertices(canvas, points, options) {
   const polygon = new import_fabric13.Polygon(
     points.map((p) => ({ x: p.x, y: p.y })),
-    { ...DEFAULT_SHAPE_STYLE, ...style }
+    { ...DEFAULT_SHAPE_STYLE, ...options }
   );
   canvas.add(polygon);
   canvas.requestRenderAll();
@@ -1805,14 +1852,14 @@ function enableDrawToCreate(canvas, options) {
   const finalize = () => {
     removePreviewElements();
     snapping.clearSnapResult();
-    const polygon = createPolygonFromVertices(canvas, points, options?.style);
+    const obj = options?.factory ? options.factory(canvas, [...points]) : createPolygonFromVertices(canvas, points, options?.style);
     if (options?.data) {
-      polygon.data = options.data;
+      obj.data = options.data;
     }
     canvas.selection = previousSelection;
     canvas.requestRenderAll();
     restoreViewport(options?.viewport);
-    options?.onCreated?.(polygon);
+    options?.onCreated?.(obj);
     points.length = 0;
   };
   const handleMouseDown = (event) => {
@@ -2121,7 +2168,7 @@ function enableVertexEdit(canvas, polygon, options, onExit) {
     });
     canvas.discardActiveObject();
     canvas.requestRenderAll();
-    onExit?.();
+    (options?.onExit ?? onExit)?.();
   }
   return cleanup;
 }
@@ -2130,7 +2177,7 @@ function enableVertexEdit(canvas, polygon, options, onExit) {
 var import_fabric16 = require("fabric");
 var strokeBaseMap = /* @__PURE__ */ new WeakMap();
 var borderRadiusBaseMap = /* @__PURE__ */ new WeakMap();
-var VIEW_BORDER_RADIUS = 4;
+var DEFAULT_VIEW_BORDER_RADIUS = 4;
 function enableScaledStrokes(canvas) {
   function applyScaledStrokes() {
     const zoom = canvas.getZoom();
@@ -2155,13 +2202,14 @@ function enableScaledStrokes(canvas) {
     });
   };
 }
-function enableScaledBorderRadius(canvas) {
+function enableScaledBorderRadius(canvas, options) {
+  const radius = options?.radius ?? DEFAULT_VIEW_BORDER_RADIUS;
   function applyScaledBorderRadius() {
     canvas.forEachObject((obj) => {
       if (!(obj instanceof import_fabric16.Rect)) return;
       if (!borderRadiusBaseMap.has(obj)) return;
-      const rx = VIEW_BORDER_RADIUS / (obj.scaleX ?? 1);
-      const ry = VIEW_BORDER_RADIUS / (obj.scaleY ?? 1);
+      const rx = radius / (obj.scaleX ?? 1);
+      const ry = radius / (obj.scaleY ?? 1);
       obj.set({ rx, ry });
     });
   }
@@ -2224,6 +2272,20 @@ function serializeCanvas(canvas, options) {
 async function loadCanvas(canvas, json, options) {
   await canvas.loadFromJSON(json);
   canvas.backgroundColor = "";
+  delete canvas.backgroundFilters;
+  const bg = canvas.backgroundImage;
+  if (bg instanceof import_fabric16.FabricImage) {
+    if (bg.originX !== "center" || bg.originY !== "center") {
+      const center = bg.getCenterPoint();
+      bg.set({
+        originX: "center",
+        originY: "center",
+        left: center.x,
+        top: center.y
+      });
+      bg.setCoords();
+    }
+  }
   if (options?.filter) {
     const toRemove = [];
     canvas.forEachObject((obj) => {
@@ -2243,14 +2305,19 @@ async function loadCanvas(canvas, json, options) {
     obj.setCoords();
   });
   canvas.forEachObject((obj) => {
+    const data = obj.data;
+    if (data?.strokeWidthBase !== void 0) {
+      delete data.strokeWidthBase;
+    }
     obj.set(DEFAULT_CONTROL_STYLE);
     if (obj.shapeType === "circle" && obj instanceof import_fabric16.Rect) {
       restoreCircleConstraints(obj);
     }
-    if (obj instanceof import_fabric16.Rect && obj.shapeType !== "circle" && obj.data?.type !== "DEVICE") {
+    const borderRadius = options?.borderRadius ?? DEFAULT_VIEW_BORDER_RADIUS;
+    if (borderRadius !== false && obj instanceof import_fabric16.Rect && obj.shapeType !== "circle" && obj.data?.type !== "DEVICE") {
       borderRadiusBaseMap.set(obj, { rx: obj.rx ?? 0, ry: obj.ry ?? 0 });
-      const rx = VIEW_BORDER_RADIUS / (obj.scaleX ?? 1);
-      const ry = VIEW_BORDER_RADIUS / (obj.scaleY ?? 1);
+      const rx = borderRadius / (obj.scaleX ?? 1);
+      const ry = borderRadius / (obj.scaleY ?? 1);
       obj.set({ rx, ry });
     }
   });
@@ -2258,21 +2325,110 @@ async function loadCanvas(canvas, json, options) {
   return canvas.getObjects();
 }
 
+// src/history.ts
+function createHistoryTracker(canvas, options) {
+  const maxSize = options?.maxSize ?? 50;
+  const debounceMs = options?.debounce ?? 300;
+  const snapshots = [];
+  let currentIndex = -1;
+  let isUndoRedo = false;
+  let debounceTimer = null;
+  function captureSnapshot() {
+    if (isUndoRedo) return;
+    const snapshot = serializeCanvas(canvas);
+    if (currentIndex < snapshots.length - 1) {
+      snapshots.length = currentIndex + 1;
+    }
+    snapshots.push(snapshot);
+    if (snapshots.length > maxSize) {
+      snapshots.shift();
+    }
+    currentIndex = snapshots.length - 1;
+  }
+  function debouncedCapture() {
+    if (debounceTimer !== null) {
+      clearTimeout(debounceTimer);
+    }
+    debounceTimer = setTimeout(() => {
+      debounceTimer = null;
+      captureSnapshot();
+    }, debounceMs);
+  }
+  const onChange = () => {
+    if (!isUndoRedo) debouncedCapture();
+  };
+  canvas.on("object:added", onChange);
+  canvas.on("object:modified", onChange);
+  canvas.on("object:removed", onChange);
+  async function loadSnapshot(index) {
+    if (index < 0 || index >= snapshots.length) return;
+    isUndoRedo = true;
+    currentIndex = index;
+    try {
+      await loadCanvas(canvas, snapshots[index]);
+    } finally {
+      isUndoRedo = false;
+    }
+  }
+  return {
+    async undo() {
+      if (currentIndex <= 0) return;
+      await loadSnapshot(currentIndex - 1);
+    },
+    async redo() {
+      if (currentIndex >= snapshots.length - 1) return;
+      await loadSnapshot(currentIndex + 1);
+    },
+    canUndo() {
+      return currentIndex > 0;
+    },
+    canRedo() {
+      return currentIndex < snapshots.length - 1;
+    },
+    pushSnapshot() {
+      if (debounceTimer !== null) {
+        clearTimeout(debounceTimer);
+        debounceTimer = null;
+      }
+      captureSnapshot();
+    },
+    cleanup() {
+      if (debounceTimer !== null) {
+        clearTimeout(debounceTimer);
+        debounceTimer = null;
+      }
+      canvas.off("object:added", onChange);
+      canvas.off("object:modified", onChange);
+      canvas.off("object:removed", onChange);
+      snapshots.length = 0;
+      currentIndex = -1;
+    }
+  };
+}
+
 // src/hooks/useEditCanvas.ts
 function useEditCanvas(options) {
-  const canvasRef = (0, import_react2.useRef)(null);
-  const viewportRef = (0, import_react2.useRef)(null);
-  const alignmentCleanupRef = (0, import_react2.useRef)(null);
-  const rotationSnapCleanupRef = (0, import_react2.useRef)(null);
-  const modeCleanupRef = (0, import_react2.useRef)(null);
-  const vertexEditCleanupRef = (0, import_react2.useRef)(null);
-  const keyboardCleanupRef = (0, import_react2.useRef)(null);
-  const [zoom, setZoom] = (0, import_react2.useState)(1);
-  const [selected, setSelected] = (0, import_react2.useState)([]);
-  const [viewportMode, setViewportModeState] = (0, import_react2.useState)("select");
-  const [isEditingVertices, setIsEditingVertices] = (0, import_react2.useState)(false);
-  const [isDirty, setIsDirty] = (0, import_react2.useState)(false);
-  const setMode = (0, import_react2.useCallback)((setup) => {
+  const canvasRef = (0, import_react3.useRef)(null);
+  const viewportRef = (0, import_react3.useRef)(null);
+  const alignmentCleanupRef = (0, import_react3.useRef)(null);
+  const rotationSnapCleanupRef = (0, import_react3.useRef)(null);
+  const modeCleanupRef = (0, import_react3.useRef)(null);
+  const vertexEditCleanupRef = (0, import_react3.useRef)(null);
+  const keyboardCleanupRef = (0, import_react3.useRef)(null);
+  const historyRef = (0, import_react3.useRef)(null);
+  const optionsRef = (0, import_react3.useRef)(options);
+  optionsRef.current = options;
+  const savedSelectabilityRef = (0, import_react3.useRef)(
+    /* @__PURE__ */ new WeakMap()
+  );
+  const [zoom, setZoom] = (0, import_react3.useState)(1);
+  const [selected, setSelected] = (0, import_react3.useState)([]);
+  const [viewportMode, setViewportModeState] = (0, import_react3.useState)("select");
+  const [isEditingVertices, setIsEditingVertices] = (0, import_react3.useState)(false);
+  const [isDirty, setIsDirty] = (0, import_react3.useState)(false);
+  const [canUndo, setCanUndo] = (0, import_react3.useState)(false);
+  const [canRedo, setCanRedo] = (0, import_react3.useState)(false);
+  const setMode = (0, import_react3.useCallback)((setup) => {
     vertexEditCleanupRef.current?.();
     vertexEditCleanupRef.current = null;
     setIsEditingVertices(false);
@@ -2283,10 +2439,17 @@ function useEditCanvas(options) {
     if (setup === null) {
       canvas.selection = true;
       canvas.forEachObject((obj) => {
-        obj.selectable = true;
-        obj.evented = true;
+        const saved = savedSelectabilityRef.current.get(obj);
+        obj.selectable = saved?.selectable ?? true;
+        obj.evented = saved?.evented ?? true;
       });
     } else {
+      canvas.forEachObject((obj) => {
+        savedSelectabilityRef.current.set(obj, {
+          selectable: obj.selectable,
+          evented: obj.evented
+        });
+      });
       canvas.selection = false;
       canvas.forEachObject((obj) => {
         obj.selectable = false;
@@ -2298,37 +2461,41 @@ function useEditCanvas(options) {
       }
     }
   }, []);
-  const onReady = (0, import_react2.useCallback)(
+  const onReady = (0, import_react3.useCallback)(
     (canvas) => {
       canvasRef.current = canvas;
-      if (options?.scaledStrokes !== false) {
+      const opts = optionsRef.current;
+      if (opts?.scaledStrokes !== false) {
         enableScaledStrokes(canvas);
       }
-      enableScaledBorderRadius(canvas);
-      if (options?.keyboardShortcuts !== false) {
+      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, options?.enableAlignment);
-      if (options?.panAndZoom !== false) {
+      setCanvasAlignmentEnabled(canvas, opts?.enableAlignment);
+      if (opts?.panAndZoom !== false) {
         viewportRef.current = enablePanAndZoom(
           canvas,
-          typeof options?.panAndZoom === "object" ? options.panAndZoom : void 0
+          typeof opts?.panAndZoom === "object" ? opts.panAndZoom : void 0
         );
       }
       const alignmentEnabled = resolveAlignmentEnabled(
-        options?.enableAlignment,
-        options?.alignment
+        opts?.enableAlignment,
+        opts?.alignment
       );
       if (alignmentEnabled) {
         alignmentCleanupRef.current = enableObjectAlignment(
           canvas,
-          typeof options?.alignment === "object" ? options.alignment : void 0
+          typeof opts?.alignment === "object" ? opts.alignment : void 0
         );
       }
-      if (options?.rotationSnap !== false) {
+      if (opts?.rotationSnap !== false) {
         rotationSnapCleanupRef.current = enableRotationSnap(
           canvas,
-          typeof options?.rotationSnap === "object" ? options.rotationSnap : void 0
+          typeof opts?.rotationSnap === "object" ? opts.rotationSnap : void 0
         );
       }
       canvas.on("mouse:wheel", () => {
@@ -2343,44 +2510,63 @@ function useEditCanvas(options) {
       canvas.on("selection:cleared", () => {
         setSelected([]);
       });
-      if (options?.trackChanges) {
+      if (opts?.trackChanges) {
         canvas.on("object:added", () => setIsDirty(true));
         canvas.on("object:removed", () => setIsDirty(true));
         canvas.on("object:modified", () => setIsDirty(true));
       }
-      if (options?.vertexEdit !== false) {
-        const vertexOpts = typeof options?.vertexEdit === "object" ? options.vertexEdit : void 0;
+      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 import_fabric17.Polygon) {
             vertexEditCleanupRef.current?.();
-            vertexEditCleanupRef.current = enableVertexEdit(
-              canvas,
-              e.target,
-              vertexOpts,
-              () => {
+            vertexEditCleanupRef.current = enableVertexEdit(canvas, e.target, {
+              ...vertexOpts,
+              onExit: () => {
                 vertexEditCleanupRef.current = null;
                 setIsEditingVertices(false);
               }
-            );
+            });
             setIsEditingVertices(true);
           }
         });
       }
-      const onReadyResult = options?.onReady?.(canvas);
-      if (options?.autoFitToBackground !== false) {
+      if (opts?.history) {
+        const historyOpts = typeof opts.history === "object" ? opts.history : void 0;
+        historyRef.current = createHistoryTracker(canvas, historyOpts);
+      }
+      const onReadyResult = opts?.onReady?.(canvas);
+      if (opts?.autoFitToBackground !== false) {
         Promise.resolve(onReadyResult).then(() => {
           if (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
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     setCanvasAlignmentEnabled(canvas, options?.enableAlignment);
@@ -2398,28 +2584,24 @@ function useEditCanvas(options) {
       alignmentCleanupRef.current = null;
     }
   }, [options?.enableAlignment]);
-  const setViewportMode = (0, import_react2.useCallback)((mode) => {
+  const setViewportMode = (0, import_react3.useCallback)((mode) => {
     viewportRef.current?.setMode(mode);
     setViewportModeState(mode);
   }, []);
-  const { resetViewport: resetViewport2, zoomIn, zoomOut, panToObject } = createViewportActions(
-    canvasRef,
-    viewportRef,
-    setZoom
-  );
-  const setBackground = (0, import_react2.useCallback)(
+  const { resetViewport: resetViewport2, zoomIn, zoomOut, panToObject, zoomToFit } = useViewportActions(canvasRef, viewportRef, setZoom);
+  const setBackground = (0, import_react3.useCallback)(
     async (url, bgOpts) => {
       const canvas = canvasRef.current;
       if (!canvas) throw new Error("Canvas not ready");
-      const resizeOpts = options?.backgroundResize !== false ? typeof options?.backgroundResize === "object" ? { ...options.backgroundResize, ...bgOpts } : { ...bgOpts } : bgOpts?.preserveContrast ? { preserveContrast: true } : void 0;
+      const opts = optionsRef.current;
+      const resizeOpts = opts?.backgroundResize !== false ? typeof opts?.backgroundResize === "object" ? { ...opts.backgroundResize, ...bgOpts } : { ...bgOpts } : bgOpts?.preserveContrast ? { preserveContrast: true } : void 0;
       const img = await setBackgroundImage(canvas, url, resizeOpts);
-      if (options?.autoFitToBackground !== false) {
+      if (opts?.autoFitToBackground !== false) {
         fitViewportToBackground(canvas);
         syncZoom(canvasRef, setZoom);
       }
       return img;
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
   return {
@@ -2444,7 +2626,9 @@ function useEditCanvas(options) {
       /** Zoom out from the canvas center. Default step: 0.2. */
       zoomOut,
       /** Pan the viewport to center on a specific object. */
-      panToObject
+      panToObject,
+      /** Zoom and pan to fit a specific object in the viewport. */
+      zoomToFit
     },
     /** Whether vertex edit mode is currently active (reactive). */
     isEditingVertices,
@@ -2476,12 +2660,32 @@ function useEditCanvas(options) {
     /** Whether the canvas has been modified since the last `resetDirty()` call. Requires `trackChanges: true`. */
     isDirty,
     /** Reset the dirty flag (e.g., after a successful save). */
-    resetDirty: (0, import_react2.useCallback)(() => setIsDirty(false), [])
+    resetDirty: (0, import_react3.useCallback)(() => setIsDirty(false), []),
+    /** Undo the last change. Requires `history: true`. */
+    undo: (0, import_react3.useCallback)(async () => {
+      const h = historyRef.current;
+      if (!h) return;
+      await h.undo();
+      setCanUndo(h.canUndo());
+      setCanRedo(h.canRedo());
+    }, []),
+    /** Redo a previously undone change. Requires `history: true`. */
+    redo: (0, import_react3.useCallback)(async () => {
+      const h = historyRef.current;
+      if (!h) return;
+      await h.redo();
+      setCanUndo(h.canUndo());
+      setCanRedo(h.canRedo());
+    }, []),
+    /** Whether an undo operation is available (reactive). Requires `history: true`. */
+    canUndo,
+    /** Whether a redo operation is available (reactive). Requires `history: true`. */
+    canRedo
   };
 }
 
 // src/hooks/useViewCanvas.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 function lockCanvas(canvas) {
   canvas.selection = false;
   canvas.forEachObject((obj) => {
@@ -2489,18 +2693,24 @@ function lockCanvas(canvas) {
   });
 }
 function useViewCanvas(options) {
-  const canvasRef = (0, import_react3.useRef)(null);
-  const viewportRef = (0, import_react3.useRef)(null);
-  const [zoom, setZoom] = (0, import_react3.useState)(1);
-  const onReady = (0, import_react3.useCallback)(
+  const canvasRef = (0, import_react4.useRef)(null);
+  const viewportRef = (0, import_react4.useRef)(null);
+  const optionsRef = (0, import_react4.useRef)(options);
+  optionsRef.current = options;
+  const [zoom, setZoom] = (0, import_react4.useState)(1);
+  const onReady = (0, import_react4.useCallback)(
     (canvas) => {
       canvasRef.current = canvas;
-      if (options?.scaledStrokes !== false) {
+      const opts = optionsRef.current;
+      if (opts?.scaledStrokes !== false) {
         enableScaledStrokes(canvas);
       }
-      enableScaledBorderRadius(canvas);
-      if (options?.panAndZoom !== false) {
-        const panAndZoomOpts = typeof options?.panAndZoom === "object" ? options.panAndZoom : {};
+      if (opts?.borderRadius !== false) {
+        const borderRadiusOpts = typeof opts?.borderRadius === "number" ? { radius: opts.borderRadius } : void 0;
+        enableScaledBorderRadius(canvas, borderRadiusOpts);
+      }
+      if (opts?.panAndZoom !== false) {
+        const panAndZoomOpts = typeof opts?.panAndZoom === "object" ? opts.panAndZoom : {};
         viewportRef.current = enablePanAndZoom(canvas, {
           ...panAndZoomOpts,
           initialMode: "pan"
@@ -2513,8 +2723,8 @@ function useViewCanvas(options) {
       canvas.on("mouse:wheel", () => {
         setZoom(canvas.getZoom());
       });
-      const onReadyResult = options?.onReady?.(canvas);
-      if (options?.autoFitToBackground !== false) {
+      const onReadyResult = opts?.onReady?.(canvas);
+      if (opts?.autoFitToBackground !== false) {
         Promise.resolve(onReadyResult).then(() => {
           if (canvas.backgroundImage) {
             fitViewportToBackground(canvas);
@@ -2524,26 +2734,21 @@ function useViewCanvas(options) {
       }
     },
     // onReady and panAndZoom are intentionally excluded — we only initialize once
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const { resetViewport: resetViewport2, zoomIn, zoomOut, panToObject } = createViewportActions(
-    canvasRef,
-    viewportRef,
-    setZoom
-  );
+  const { resetViewport: resetViewport2, zoomIn, zoomOut, panToObject, zoomToFit } = useViewportActions(canvasRef, viewportRef, setZoom);
   const findObject = (id) => {
     const c = canvasRef.current;
     if (!c) return void 0;
     return c.getObjects().find((o) => o.data?.id === id);
   };
-  const setObjectStyle = (0, import_react3.useCallback)((id, style) => {
+  const setObjectStyle = (0, import_react4.useCallback)((id, style) => {
     const obj = findObject(id);
     if (!obj) return;
     obj.set(style);
     canvasRef.current.requestRenderAll();
   }, []);
-  const setObjectStyles = (0, import_react3.useCallback)(
+  const setObjectStyles = (0, import_react4.useCallback)(
     (styles) => {
       const c = canvasRef.current;
       if (!c) return;
@@ -2564,7 +2769,7 @@ function useViewCanvas(options) {
     },
     []
   );
-  const setObjectStyleByType = (0, import_react3.useCallback)(
+  const setObjectStyleByType = (0, import_react4.useCallback)(
     (type, style) => {
       const c = canvasRef.current;
       if (!c) return;
@@ -2595,7 +2800,9 @@ function useViewCanvas(options) {
       /** Zoom out from the canvas center. Default step: 0.2. */
       zoomOut,
       /** Pan the viewport to center on a specific object. */
-      panToObject
+      panToObject,
+      /** Zoom and pan to fit a specific object in the viewport. */
+      zoomToFit
     },
     /** Update a single object's visual style by its `data.id`. */
     setObjectStyle,
@@ -2607,11 +2814,11 @@ function useViewCanvas(options) {
 }
 
 // src/hooks/useCanvasEvents.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useCanvasEvents(canvasRef, events) {
-  const eventsRef = (0, import_react4.useRef)(events);
+  const eventsRef = (0, import_react5.useRef)(events);
   eventsRef.current = events;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const wrappers = /* @__PURE__ */ new Map();
@@ -2632,17 +2839,17 @@ function useCanvasEvents(canvasRef, events) {
 }
 
 // src/hooks/useCanvasTooltip.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 function useCanvasTooltip(canvasRef, options) {
-  const [state, setState] = (0, import_react5.useState)({
+  const [state, setState] = (0, import_react6.useState)({
     visible: false,
     content: null,
     position: { x: 0, y: 0 }
   });
-  const hoveredObjectRef = (0, import_react5.useRef)(null);
-  const optionsRef = (0, import_react5.useRef)(options);
+  const hoveredObjectRef = (0, import_react6.useRef)(null);
+  const optionsRef = (0, import_react6.useRef)(options);
   optionsRef.current = options;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     function calculatePosition(target) {
@@ -2696,13 +2903,13 @@ function useCanvasTooltip(canvasRef, options) {
 }
 
 // src/hooks/useCanvasClick.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 function useCanvasClick(canvasRef, onClick, options) {
-  const onClickRef = (0, import_react6.useRef)(onClick);
+  const onClickRef = (0, import_react7.useRef)(onClick);
   onClickRef.current = onClick;
-  const optionsRef = (0, import_react6.useRef)(options);
+  const optionsRef = (0, import_react7.useRef)(options);
   optionsRef.current = options;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     let mouseDown = null;
@@ -2747,13 +2954,13 @@ function useCanvasClick(canvasRef, onClick, options) {
 }
 
 // src/hooks/useObjectOverlay.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_fabric18 = require("fabric");
 function useObjectOverlay(canvasRef, object, options) {
-  const containerRef = (0, import_react7.useRef)(null);
-  const optionsRef = (0, import_react7.useRef)(options);
+  const containerRef = (0, import_react8.useRef)(null);
+  const optionsRef = (0, import_react8.useRef)(options);
   optionsRef.current = options;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas || !object) return;
     function update() {
@@ -2768,36 +2975,41 @@ function useObjectOverlay(canvasRef, object, options) {
       const screenCoords = import_fabric18.util.transformPoint(center, vt);
       const screenWidth = actualWidth * zoom;
       const screenHeight = actualHeight * zoom;
-      el.style.left = `${screenCoords.x - screenWidth / 2}px`;
-      el.style.top = `${screenCoords.y - screenHeight / 2}px`;
-      el.style.width = `${screenWidth}px`;
-      el.style.height = `${screenHeight}px`;
       const angle = object.angle ?? 0;
-      el.style.rotate = angle !== 0 ? `${angle}deg` : "";
       const opts = optionsRef.current;
-      if (opts?.autoScaleContent) {
-        const contentScale = Math.min(screenWidth, screenHeight) / 100;
-        const clampedScale = Math.max(0.1, Math.min(contentScale, 2));
-        el.style.setProperty("--overlay-scale", String(clampedScale));
-        if (opts.textSelector) {
-          const textMinScale = opts.textMinScale ?? 0.5;
+      if (opts?.autoScaleContent !== false) {
+        el.style.left = `${screenCoords.x - actualWidth / 2}px`;
+        el.style.top = `${screenCoords.y - actualHeight / 2}px`;
+        el.style.width = `${actualWidth}px`;
+        el.style.height = `${actualHeight}px`;
+        el.style.transformOrigin = "center center";
+        el.style.transform = angle !== 0 ? `scale(${zoom}) rotate(${angle}deg)` : `scale(${zoom})`;
+        el.style.rotate = "";
+        el.style.setProperty("--overlay-scale", String(zoom));
+        if (opts?.textSelector) {
+          const textMinScale = opts?.textMinScale ?? 0.5;
           const textEls = el.querySelectorAll(opts.textSelector);
-          const display = clampedScale < textMinScale ? "none" : "";
+          const display = zoom < textMinScale ? "none" : "";
           textEls.forEach((t) => {
             t.style.display = display;
           });
         }
+      } else {
+        el.style.left = `${screenCoords.x - screenWidth / 2}px`;
+        el.style.top = `${screenCoords.y - screenHeight / 2}px`;
+        el.style.width = `${screenWidth}px`;
+        el.style.height = `${screenHeight}px`;
+        el.style.transform = "";
+        el.style.rotate = angle !== 0 ? `${angle}deg` : "";
       }
     }
     update();
     canvas.on("after:render", update);
-    canvas.on("mouse:wheel", update);
     object.on("moving", update);
     object.on("scaling", update);
     object.on("rotating", update);
     return () => {
       canvas.off("after:render", update);
-      canvas.off("mouse:wheel", update);
       object.off("moving", update);
       object.off("scaling", update);
       object.off("rotating", update);
@@ -2825,6 +3037,7 @@ var import_fabric19 = require("fabric");
   Rect,
   createCircle,
   createCircleAtPoint,
+  createHistoryTracker,
   createPolygon,
   createPolygonAtPoint,
   createPolygonFromDrag,