@bwp-web/canvas 0.5.1 → 0.6.1

package/dist/index.js

@@ -33,7 +33,9 @@ function Canvas({
   height,
   className,
   style,
-  onReady
+  onReady,
+  keyboardShortcuts,
+  fabricOptions
 }) {
   const canvasRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -45,11 +47,12 @@ function Canvas({
     const initialWidth = isFixedSize ? width : wrapper.clientWidth || 800;
     const initialHeight = isFixedSize ? height : wrapper.clientHeight || 600;
     const fabricCanvas = new FabricCanvas(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) {
@@ -73,7 +76,7 @@ function Canvas({
     return () => {
       cancelAnimationFrame(rafId);
       observer?.disconnect();
-      cleanupShortcuts();
+      cleanupShortcuts?.();
       fabricCanvas.dispose();
     };
   }, []);
@@ -93,7 +96,7 @@ import {
 // 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;
@@ -136,7 +139,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 Point(e.offsetX, e.offsetY), zoom);
   };
@@ -244,8 +247,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);
@@ -291,6 +301,7 @@ function enablePanAndZoom(canvas, options) {
       );
     },
     panToObject(object, panOpts) {
+      cancelAnimation();
       const zoom = canvas.getZoom();
       const objectCenter = object.getCenterPoint();
       const canvasCenterX = canvas.getWidth() / 2;
@@ -333,12 +344,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);
@@ -351,6 +387,9 @@ function resetViewport(canvas) {
   canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
 }
 
+// src/hooks/shared.ts
+import { useMemo } from "react";
+
 // src/background.ts
 import { FabricImage, filters } from "fabric";
 function getBackgroundImage(canvas) {
@@ -481,7 +520,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;
   }
@@ -499,29 +539,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 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;
@@ -1588,7 +1634,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;
@@ -1600,16 +1646,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 Polygon2(
     points.map((p) => ({ x: p.x, y: p.y })),
-    { ...DEFAULT_SHAPE_STYLE, ...style }
+    { ...DEFAULT_SHAPE_STYLE, ...options }
   );
   canvas.add(polygon);
   canvas.requestRenderAll();
@@ -1733,14 +1779,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) => {
@@ -2052,16 +2098,19 @@ function enableVertexEdit(canvas, polygon, options, onExit) {
     });
     canvas.discardActiveObject();
     canvas.requestRenderAll();
-    onExit?.();
+    (options?.onExit ?? onExit)?.();
   }
   return cleanup;
 }
 
 // src/serialization.ts
-import { Rect as Rect5 } from "fabric";
+import {
+  FabricImage as FabricImage2,
+  Rect as Rect5
+} from "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();
@@ -2086,13 +2135,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 Rect5)) 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 });
     });
   }
@@ -2142,19 +2192,81 @@ function serializeCanvas(canvas, options) {
       obj.set({ rx: base.rx, ry: base.ry });
     }
   });
+  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 });
+  });
+  const bg = canvas.backgroundImage;
+  let savedBgOrigin = null;
+  if (bg instanceof FabricImage2 && (bg.originX !== "left" || bg.originY !== "top")) {
+    savedBgOrigin = {
+      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 });
+  }
+  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
+      };
+    }
+  });
   const json = canvas.toObject(properties);
   delete json.backgroundColor;
+  json.backgroundFilters = {
+    opacity: getBackgroundContrast(canvas),
+    inverted: getBackgroundInverted(canvas)
+  };
   scaledWidths.forEach((scaled, obj) => {
     obj.strokeWidth = scaled;
   });
   appliedRadii.forEach((radii, obj) => {
     obj.set({ rx: radii.rx, ry: radii.ry });
   });
+  savedOrigins.forEach((saved, obj) => {
+    obj.set(saved);
+  });
+  if (savedBgOrigin && bg instanceof FabricImage2) {
+    bg.set(savedBgOrigin);
+  }
+  savedData.forEach((originalData, obj) => {
+    obj.data = originalData;
+  });
   return json;
 }
 async function loadCanvas(canvas, json, options) {
   await canvas.loadFromJSON(json);
   canvas.backgroundColor = "";
+  delete canvas.backgroundFilters;
+  const bg = canvas.backgroundImage;
+  if (bg instanceof FabricImage2) {
+    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) => {
@@ -2174,14 +2286,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 Rect5) {
       restoreCircleConstraints(obj);
     }
-    if (obj instanceof Rect5 && obj.shapeType !== "circle" && obj.data?.type !== "DEVICE") {
+    const borderRadius = options?.borderRadius ?? DEFAULT_VIEW_BORDER_RADIUS;
+    if (borderRadius !== false && obj instanceof Rect5 && 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 });
     }
   });
@@ -2189,6 +2306,87 @@ 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 = useRef2(null);
@@ -2198,11 +2396,19 @@ function useEditCanvas(options) {
   const modeCleanupRef = useRef2(null);
   const vertexEditCleanupRef = useRef2(null);
   const keyboardCleanupRef = useRef2(null);
+  const historyRef = useRef2(null);
+  const optionsRef = useRef2(options);
+  optionsRef.current = options;
+  const savedSelectabilityRef = useRef2(
+    /* @__PURE__ */ new WeakMap()
+  );
   const [zoom, setZoom] = useState(1);
   const [selected, setSelected] = useState([]);
   const [viewportMode, setViewportModeState] = useState("select");
   const [isEditingVertices, setIsEditingVertices] = useState(false);
   const [isDirty, setIsDirty] = useState(false);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
   const setMode = useCallback((setup) => {
     vertexEditCleanupRef.current?.();
     vertexEditCleanupRef.current = null;
@@ -2214,10 +2420,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;
@@ -2232,34 +2445,38 @@ function useEditCanvas(options) {
   const onReady = 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", () => {
@@ -2274,41 +2491,60 @@ 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 Polygon4) {
             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
     []
   );
   useEffect2(() => {
@@ -2333,24 +2569,20 @@ function useEditCanvas(options) {
     viewportRef.current?.setMode(mode);
     setViewportModeState(mode);
   }, []);
-  const { resetViewport: resetViewport2, zoomIn, zoomOut, panToObject } = createViewportActions(
-    canvasRef,
-    viewportRef,
-    setZoom
-  );
+  const { resetViewport: resetViewport2, zoomIn, zoomOut, panToObject, zoomToFit } = useViewportActions(canvasRef, viewportRef, setZoom);
   const setBackground = 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 {
@@ -2375,7 +2607,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,
@@ -2407,7 +2641,27 @@ 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: useCallback(() => setIsDirty(false), [])
+    resetDirty: useCallback(() => setIsDirty(false), []),
+    /** Undo the last change. Requires `history: true`. */
+    undo: 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: 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
   };
 }
 
@@ -2422,16 +2676,22 @@ function lockCanvas(canvas) {
 function useViewCanvas(options) {
   const canvasRef = useRef3(null);
   const viewportRef = useRef3(null);
+  const optionsRef = useRef3(options);
+  optionsRef.current = options;
   const [zoom, setZoom] = useState2(1);
   const onReady = useCallback2(
     (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"
@@ -2444,8 +2704,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);
@@ -2455,14 +2715,9 @@ 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;
@@ -2526,7 +2781,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,
@@ -2699,36 +2956,41 @@ function useObjectOverlay(canvasRef, object, options) {
       const screenCoords = util4.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);
@@ -2741,7 +3003,7 @@ function useObjectOverlay(canvasRef, object, options) {
 import {
   Canvas as Canvas2,
   FabricObject as FabricObject5,
-  FabricImage as FabricImage2,
+  FabricImage as FabricImage3,
   Rect as Rect6,
   Polygon as Polygon5,
   Point as Point9,
@@ -2756,13 +3018,14 @@ export {
   DEFAULT_GUIDELINE_SHAPE_STYLE,
   DEFAULT_SHAPE_STYLE,
   Canvas2 as FabricCanvas,
-  FabricImage2 as FabricImage,
+  FabricImage3 as FabricImage,
   FabricObject5 as FabricObject,
   Point9 as Point,
   Polygon5 as Polygon,
   Rect6 as Rect,
   createCircle,
   createCircleAtPoint,
+  createHistoryTracker,
   createPolygon,
   createPolygonAtPoint,
   createPolygonFromDrag,