@bwp-web/canvas 0.8.1 → 0.8.3

package/dist/index.js

@@ -85,7 +85,7 @@ function Canvas({
 }
 
 // src/hooks/useEditCanvas.ts
-import { useCallback, useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState } from "react";
 import { Polygon as Polygon4 } from "fabric";
 
 // src/viewport.ts
@@ -2126,7 +2126,8 @@ function enableVertexEdit(canvas, polygon, options, onExit) {
 // src/serialization.ts
 import {
   FabricImage as FabricImage2,
-  Rect as Rect5
+  Rect as Rect5,
+  filters as filters2
 } from "fabric";
 var strokeBaseMap = /* @__PURE__ */ new WeakMap();
 var borderRadiusBaseMap = /* @__PURE__ */ new WeakMap();
@@ -2319,6 +2320,10 @@ async function loadCanvas(canvas, json, options) {
       });
       bg.setCoords();
     }
+    if (bg.filters?.some((f) => f instanceof filters2.Invert)) {
+      bg.filters = bg.filters.filter((f) => !(f instanceof filters2.Invert));
+      bg.applyFilters();
+    }
   }
   if (options?.filter) {
     const toRemove = [];
@@ -2450,6 +2455,7 @@ function useEditCanvas(options) {
   const vertexEditCleanupRef = useRef2(null);
   const keyboardCleanupRef = useRef2(null);
   const historyRef = useRef2(null);
+  const isInitialLoadRef = useRef2(false);
   const optionsRef = useRef2(options);
   optionsRef.current = options;
   const savedSelectabilityRef = useRef2(
@@ -2462,6 +2468,11 @@ function useEditCanvas(options) {
   const [isDirty, setIsDirty] = useState(false);
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
+  const [objects, setObjects] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [lockLightMode, setLockLightModeState] = useState(
+    void 0
+  );
   const setMode = useCallback((setup) => {
     vertexEditCleanupRef.current?.();
     vertexEditCleanupRef.current = null;
@@ -2546,11 +2557,14 @@ function useEditCanvas(options) {
         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));
-          canvas.on("background:modified", () => setIsDirty(true));
+        if (opts?.trackChanges !== false) {
+          const markDirtyIfNotLoading = () => {
+            if (!isInitialLoadRef.current) setIsDirty(true);
+          };
+          canvas.on("object:added", markDirtyIfNotLoading);
+          canvas.on("object:removed", markDirtyIfNotLoading);
+          canvas.on("object:modified", markDirtyIfNotLoading);
+          canvas.on("background:modified", markDirtyIfNotLoading);
         }
         if (opts?.history) {
           const syncHistoryState = () => {
@@ -2588,8 +2602,31 @@ function useEditCanvas(options) {
         }
       }
       function invokeOnReady() {
-        const onReadyResult = opts?.onReady?.(canvas);
-        Promise.resolve(onReadyResult).then(() => {
+        const initPromise = (async () => {
+          if (opts?.canvasData) {
+            setIsLoading(true);
+            isInitialLoadRef.current = true;
+            try {
+              const loaded = await loadCanvas(canvas, opts.canvasData, {
+                filter: opts.filter,
+                borderRadius: opts.borderRadius
+              });
+              setObjects(loaded);
+            } finally {
+              isInitialLoadRef.current = false;
+              setIsLoading(false);
+            }
+          }
+        })();
+        initPromise.then(async () => {
+          const onReadyResult = opts?.onReady?.(canvas);
+          await Promise.resolve(onReadyResult);
+          if (opts?.invertBackground !== void 0) {
+            setBackgroundInverted(canvas, opts.invertBackground);
+          }
+          if (canvas.lockLightMode !== void 0) {
+            setLockLightModeState(canvas.lockLightMode);
+          }
           if (opts?.autoFitToBackground !== false && canvas.backgroundImage) {
             fitViewportToBackground(canvas);
             syncZoom(canvasRef, setZoom);
@@ -2619,37 +2656,25 @@ function useEditCanvas(options) {
       alignmentCleanupRef.current = null;
     }
   }, [options?.enableAlignment]);
+  useEffect2(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || options?.invertBackground === void 0) return;
+    setBackgroundInverted(canvas, options.invertBackground);
+  }, [options?.invertBackground]);
+  const setLockLightMode = useCallback((value) => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      canvas.lockLightMode = value;
+    }
+    setLockLightModeState(value);
+  }, []);
   const setViewportMode = useCallback((mode) => {
     viewportRef.current?.setMode(mode);
     setViewportModeState(mode);
   }, []);
   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 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 (opts?.autoFitToBackground !== false) {
-        fitViewportToBackground(canvas);
-        syncZoom(canvasRef, setZoom);
-      }
-      return img;
-    },
-    []
-  );
-  return {
-    /** Pass this to `<Canvas onReady={...} />` */
-    onReady,
-    /** Ref to the underlying Fabric canvas instance. */
-    canvasRef,
-    /** Current zoom level (reactive). */
-    zoom,
-    /** Currently selected objects (reactive). */
-    selected,
-    /** Viewport controls. */
-    viewport: {
+  const viewport = useMemo2(
+    () => ({
       /** Current viewport mode (reactive). */
       mode: viewportMode,
       /** Switch between 'select' and 'pan' viewport modes. */
@@ -2664,65 +2689,129 @@ function useEditCanvas(options) {
       panToObject,
       /** Zoom and pan to fit a specific object in the viewport. */
       zoomToFit
+    }),
+    [
+      viewportMode,
+      setViewportMode,
+      resetViewport2,
+      zoomIn,
+      zoomOut,
+      panToObject,
+      zoomToFit
+    ]
+  );
+  const resetDirty = useCallback(() => setIsDirty(false), []);
+  const markDirty = useCallback(() => setIsDirty(true), []);
+  const undo = useCallback(async () => {
+    const h = historyRef.current;
+    if (!h) return;
+    await h.undo();
+    setCanUndo(h.canUndo());
+    setCanRedo(h.canRedo());
+  }, []);
+  const redo = useCallback(async () => {
+    const h = historyRef.current;
+    if (!h) return;
+    await h.redo();
+    setCanUndo(h.canUndo());
+    setCanRedo(h.canRedo());
+  }, []);
+  const setBackground = useCallback(
+    async (url, bgOpts) => {
+      const canvas = canvasRef.current;
+      if (!canvas) throw new Error("Canvas not ready");
+      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 (opts?.autoFitToBackground !== false) {
+        fitViewportToBackground(canvas);
+        syncZoom(canvasRef, setZoom);
+      }
+      return img;
     },
-    /** Whether vertex edit mode is currently active (reactive). */
-    isEditingVertices,
-    /**
-     * Activate an interaction mode or return to select mode.
-     *
-     * Pass a setup function to activate a creation mode:
-     * ```ts
-     * canvas.setMode((c, viewport) =>
-     *   enableClickToCreate(c, factory, { viewport })
-     * );
-     * ```
-     *
-     * Pass `null` to deactivate and return to select mode:
-     * ```ts
-     * canvas.setMode(null);
-     * ```
-     */
-    setMode,
-    /**
-     * Set a background image from a URL. Automatically resizes if the image
-     * exceeds the configured limits (opt out via `backgroundResize: false`),
-     * and fits the viewport after setting if `autoFitToBackground` is enabled.
-     *
-     * Pass `{ preserveContrast: true }` to keep the current background contrast
-     * when replacing the image.
-     */
-    setBackground,
-    /** 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), []),
-    /** Manually mark the canvas as dirty (e.g., after a custom operation not tracked automatically). */
-    markDirty: useCallback(() => setIsDirty(true), []),
-    /** 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
-  };
+    []
+  );
+  return useMemo2(
+    () => ({
+      /** Pass this to `<Canvas onReady={...} />` */
+      onReady,
+      /** Ref to the underlying Fabric canvas instance. */
+      canvasRef,
+      /** Current zoom level (reactive). */
+      zoom,
+      /** Loaded objects (reactive). Populated when `canvasData` is provided. */
+      objects,
+      /** Whether canvas data is currently being loaded. */
+      isLoading,
+      /** Currently selected objects (reactive). */
+      selected,
+      /** Viewport controls. */
+      viewport,
+      /** Whether vertex edit mode is currently active (reactive). */
+      isEditingVertices,
+      /**
+       * Activate an interaction mode or return to select mode.
+       *
+       * Pass a setup function to activate a creation mode:
+       * ```ts
+       * canvas.setMode((c, viewport) =>
+       *   enableClickToCreate(c, factory, { viewport })
+       * );
+       * ```
+       *
+       * Pass `null` to deactivate and return to select mode:
+       * ```ts
+       * canvas.setMode(null);
+       * ```
+       */
+      setMode,
+      /**
+       * Set a background image from a URL. Automatically resizes if the image
+       * exceeds the configured limits (opt out via `backgroundResize: false`),
+       * and fits the viewport after setting if `autoFitToBackground` is enabled.
+       *
+       * Pass `{ preserveContrast: true }` to keep the current background contrast
+       * when replacing the image.
+       */
+      setBackground,
+      /** Whether the canvas has been modified since the last `resetDirty()` call. Enabled by default (disable via `trackChanges: false`). */
+      isDirty,
+      /** Reset the dirty flag (e.g., after a successful save). */
+      resetDirty,
+      /** Manually mark the canvas as dirty (e.g., after a custom operation not tracked automatically). */
+      markDirty,
+      /** Undo the last change. Requires `history: true`. */
+      undo,
+      /** Redo a previously undone change. Requires `history: true`. */
+      redo,
+      /** Whether an undo operation is available (reactive). Requires `history: true`. */
+      canUndo,
+      /** Whether a redo operation is available (reactive). Requires `history: true`. */
+      canRedo,
+      /** Whether the canvas is locked to light mode. Read from loaded canvas data. */
+      lockLightMode,
+      /** Update lockLightMode on both the canvas instance and React state. */
+      setLockLightMode
+    }),
+    // Only reactive state in deps — refs and stable callbacks are omitted
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      zoom,
+      objects,
+      isLoading,
+      selected,
+      viewport,
+      isEditingVertices,
+      isDirty,
+      canUndo,
+      canRedo,
+      lockLightMode
+    ]
+  );
 }
 
 // src/hooks/useViewCanvas.ts
-import { useCallback as useCallback2, useRef as useRef3, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState2 } from "react";
 function lockCanvas(canvas) {
   canvas.selection = false;
   canvas.forEachObject((obj) => {
@@ -2735,6 +2824,8 @@ function useViewCanvas(options) {
   const optionsRef = useRef3(options);
   optionsRef.current = options;
   const [zoom, setZoom] = useState2(1);
+  const [objects, setObjects] = useState2([]);
+  const [isLoading, setIsLoading] = useState2(false);
   const onReady = useCallback2(
     (canvas) => {
       canvasRef.current = canvas;
@@ -2761,20 +2852,57 @@ function useViewCanvas(options) {
       canvas.on("mouse:wheel", () => {
         setZoom(canvas.getZoom());
       });
-      const onReadyResult = opts?.onReady?.(canvas);
-      if (opts?.autoFitToBackground !== false) {
-        Promise.resolve(onReadyResult).then(() => {
-          if (canvas.backgroundImage) {
-            fitViewportToBackground(canvas);
-            syncZoom(canvasRef, setZoom);
+      const initPromise = (async () => {
+        if (opts?.canvasData) {
+          setIsLoading(true);
+          try {
+            const loaded = await loadCanvas(canvas, opts.canvasData, {
+              filter: opts.filter,
+              borderRadius: opts.borderRadius
+            });
+            lockCanvas(canvas);
+            setObjects(loaded);
+          } finally {
+            setIsLoading(false);
           }
-        });
-      }
+        }
+      })();
+      initPromise.then(async () => {
+        const onReadyResult = opts?.onReady?.(canvas);
+        await Promise.resolve(onReadyResult);
+        if (opts?.invertBackground !== void 0) {
+          setBackgroundInverted(canvas, opts.invertBackground);
+        }
+        if (opts?.autoFitToBackground !== false && canvas.backgroundImage) {
+          fitViewportToBackground(canvas);
+          syncZoom(canvasRef, setZoom);
+        }
+      });
     },
     // onReady and panAndZoom are intentionally excluded — we only initialize once
     []
   );
+  useEffect3(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || options?.invertBackground === void 0) return;
+    setBackgroundInverted(canvas, options.invertBackground);
+  }, [options?.invertBackground]);
   const { resetViewport: resetViewport2, zoomIn, zoomOut, panToObject, zoomToFit } = useViewportActions(canvasRef, viewportRef, setZoom);
+  const viewport = useMemo3(
+    () => ({
+      /** Reset viewport to default (no pan, zoom = 1), or fit to background if one is set. */
+      reset: resetViewport2,
+      /** Zoom in toward the canvas center. Default step: 0.2. */
+      zoomIn,
+      /** Zoom out from the canvas center. Default step: 0.2. */
+      zoomOut,
+      /** Pan the viewport to center on a specific object. */
+      panToObject,
+      /** Zoom and pan to fit a specific object in the viewport. */
+      zoomToFit
+    }),
+    [resetViewport2, zoomIn, zoomOut, panToObject, zoomToFit]
+  );
   const findObject = (id) => {
     const c = canvasRef.current;
     if (!c) return void 0;
@@ -2790,9 +2918,9 @@ function useViewCanvas(options) {
     (styles) => {
       const c = canvasRef.current;
       if (!c) return;
-      const objects = c.getObjects();
+      const objects2 = c.getObjects();
       const idMap = /* @__PURE__ */ new Map();
-      for (const obj of objects) {
+      for (const obj of objects2) {
         if (obj.data?.id) idMap.set(obj.data.id, obj);
       }
       let updated = false;
@@ -2822,42 +2950,101 @@ function useViewCanvas(options) {
     },
     []
   );
-  return {
-    /** Pass this to `<Canvas onReady={...} />` */
-    onReady,
-    /** Ref to the underlying Fabric canvas instance. */
-    canvasRef,
-    /** Current zoom level (reactive). */
-    zoom,
-    /** Viewport controls. */
-    viewport: {
-      /** Reset viewport to default (no pan, zoom = 1), or fit to background if one is set. */
-      reset: resetViewport2,
-      /** Zoom in toward the canvas center. Default step: 0.2. */
-      zoomIn,
-      /** Zoom out from the canvas center. Default step: 0.2. */
-      zoomOut,
-      /** Pan the viewport to center on a specific object. */
-      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,
-    /** Batch-update multiple objects' visual styles in one render. Keyed by `data.id`. */
-    setObjectStyles,
-    /** Apply a visual style to all objects whose `data.type` matches. */
-    setObjectStyleByType
-  };
+  return useMemo3(
+    () => ({
+      /** Pass this to `<Canvas onReady={...} />` */
+      onReady,
+      /** Ref to the underlying Fabric canvas instance. */
+      canvasRef,
+      /** Current zoom level (reactive). */
+      zoom,
+      /** Loaded objects (reactive). Populated when `canvasData` is provided. */
+      objects,
+      /** Whether canvas data is currently being loaded. */
+      isLoading,
+      /** Viewport controls. */
+      viewport,
+      /** Update a single object's visual style by its `data.id`. */
+      setObjectStyle,
+      /** Batch-update multiple objects' visual styles in one render. Keyed by `data.id`. */
+      setObjectStyles,
+      /** Apply a visual style to all objects whose `data.type` matches. */
+      setObjectStyleByType
+    }),
+    // Only reactive state in deps — refs and stable callbacks are omitted
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [zoom, objects, isLoading, viewport]
+  );
+}
+
+// src/hooks/useCanvasEvents.ts
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
+
+// src/context/ViewCanvasContext.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ViewCanvasContext = createContext(null);
+function ViewCanvasProvider({
+  options,
+  children
+}) {
+  const canvas = useViewCanvas(options);
+  return /* @__PURE__ */ jsx2(ViewCanvasContext.Provider, { value: canvas, children });
+}
+function useViewCanvasContext() {
+  const ctx = useContext(ViewCanvasContext);
+  if (ctx === null) {
+    throw new Error(
+      "useViewCanvasContext must be used within a <ViewCanvasProvider>"
+    );
+  }
+  return ctx;
+}
+function useViewCanvasContextSafe() {
+  return useContext(ViewCanvasContext);
+}
+
+// src/context/EditCanvasContext.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var EditCanvasContext = createContext2(null);
+function EditCanvasProvider({
+  options,
+  children
+}) {
+  const canvas = useEditCanvas(options);
+  return /* @__PURE__ */ jsx3(EditCanvasContext.Provider, { value: canvas, children });
+}
+function useEditCanvasContext() {
+  const ctx = useContext2(EditCanvasContext);
+  if (ctx === null) {
+    throw new Error(
+      "useEditCanvasContext must be used within an <EditCanvasProvider>"
+    );
+  }
+  return ctx;
+}
+function useEditCanvasContextSafe() {
+  return useContext2(EditCanvasContext);
+}
+
+// src/context/useCanvasRef.ts
+function useCanvasRef() {
+  const viewCtx = useViewCanvasContextSafe();
+  const editCtx = useEditCanvasContextSafe();
+  return viewCtx?.canvasRef ?? editCtx?.canvasRef ?? null;
 }
 
 // src/hooks/useCanvasEvents.ts
-import { useEffect as useEffect3, useRef as useRef4 } from "react";
-function useCanvasEvents(canvasRef, events) {
+function useCanvasEvents(canvasRefOrEvents, maybeEvents) {
+  const isContextOverload = maybeEvents === void 0;
+  const contextCanvasRef = useCanvasRef();
+  const resolvedCanvasRef = isContextOverload ? contextCanvasRef : canvasRefOrEvents;
+  const events = isContextOverload ? canvasRefOrEvents : maybeEvents;
   const eventsRef = useRef4(events);
   eventsRef.current = events;
-  useEffect3(() => {
-    const canvas = canvasRef.current;
+  useEffect4(() => {
+    const canvas = resolvedCanvasRef?.current;
     if (!canvas) return;
     const wrappers = /* @__PURE__ */ new Map();
     for (const key of Object.keys(eventsRef.current)) {
@@ -2873,12 +3060,16 @@ function useCanvasEvents(canvasRef, events) {
         canvas.off(name, handler);
       });
     };
-  }, [canvasRef]);
+  }, [resolvedCanvasRef]);
 }
 
 // src/hooks/useCanvasTooltip.ts
-import { useEffect as useEffect4, useRef as useRef5, useState as useState3 } from "react";
-function useCanvasTooltip(canvasRef, options) {
+import { useEffect as useEffect5, useRef as useRef5, useState as useState3 } from "react";
+function useCanvasTooltip(canvasRefOrOptions, maybeOptions) {
+  const isContextOverload = maybeOptions === void 0;
+  const contextCanvasRef = useCanvasRef();
+  const resolvedCanvasRef = isContextOverload ? contextCanvasRef : canvasRefOrOptions;
+  const options = isContextOverload ? canvasRefOrOptions : maybeOptions;
   const [state, setState] = useState3({
     visible: false,
     content: null,
@@ -2887,8 +3078,8 @@ function useCanvasTooltip(canvasRef, options) {
   const hoveredObjectRef = useRef5(null);
   const optionsRef = useRef5(options);
   optionsRef.current = options;
-  useEffect4(() => {
-    const canvas = canvasRef.current;
+  useEffect5(() => {
+    const canvas = resolvedCanvasRef?.current;
     if (!canvas) return;
     function calculatePosition(target) {
       const bounds = target.getBoundingRect();
@@ -2936,19 +3127,24 @@ function useCanvasTooltip(canvasRef, options) {
       canvas.off("after:render", updatePosition);
       canvas.off("mouse:wheel", updatePosition);
     };
-  }, [canvasRef]);
+  }, [resolvedCanvasRef]);
   return state;
 }
 
 // src/hooks/useCanvasClick.ts
-import { useEffect as useEffect5, useRef as useRef6 } from "react";
-function useCanvasClick(canvasRef, onClick, options) {
+import { useEffect as useEffect6, useRef as useRef6 } from "react";
+function useCanvasClick(canvasRefOrOnClick, onClickOrOptions, maybeOptions) {
+  const isContextOverload = typeof canvasRefOrOnClick === "function";
+  const contextCanvasRef = useCanvasRef();
+  const resolvedCanvasRef = isContextOverload ? contextCanvasRef : canvasRefOrOnClick;
+  const onClick = isContextOverload ? canvasRefOrOnClick : onClickOrOptions;
+  const options = isContextOverload ? onClickOrOptions : maybeOptions;
   const onClickRef = useRef6(onClick);
   onClickRef.current = onClick;
   const optionsRef = useRef6(options);
   optionsRef.current = options;
-  useEffect5(() => {
-    const canvas = canvasRef.current;
+  useEffect6(() => {
+    const canvas = resolvedCanvasRef?.current;
     if (!canvas) return;
     let mouseDown = null;
     let isPanning = false;
@@ -2988,24 +3184,26 @@ function useCanvasClick(canvasRef, onClick, options) {
       canvas.off("mouse:move", handleMouseMove);
       canvas.off("mouse:up", handleMouseUp);
     };
-  }, [canvasRef]);
+  }, [resolvedCanvasRef]);
 }
 
 // src/overlay/ObjectOverlay.tsx
-import { useEffect as useEffect6, useRef as useRef7 } from "react";
+import { useEffect as useEffect7, useRef as useRef7 } from "react";
 import { Stack } from "@mui/material";
 import { util as util4 } from "fabric";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function ObjectOverlay({
-  canvasRef,
+  canvasRef: canvasRefProp,
   object,
   sx,
   children,
   ...rest
 }) {
+  const contextCanvasRef = useCanvasRef();
+  const canvasRef = canvasRefProp ?? contextCanvasRef;
   const stackRef = useRef7(null);
-  useEffect6(() => {
-    const canvas = canvasRef.current;
+  useEffect7(() => {
+    const canvas = canvasRef?.current;
     if (!canvas || !object) return;
     function update() {
       const el = stackRef.current;
@@ -3039,7 +3237,7 @@ function ObjectOverlay({
     };
   }, [canvasRef, object]);
   if (!object) return null;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(
     Stack,
     {
       ref: stackRef,
@@ -3059,8 +3257,8 @@ function ObjectOverlay({
 
 // src/overlay/OverlayContent.tsx
 import { Stack as Stack2 } from "@mui/material";
-import { useEffect as useEffect7, useRef as useRef8 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useRef as useRef8 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function OverlayContent({
   children,
   padding = 4,
@@ -3070,7 +3268,7 @@ function OverlayContent({
 }) {
   const outerRef = useRef8(null);
   const innerRef = useRef8(null);
-  useEffect7(() => {
+  useEffect8(() => {
     const outer = outerRef.current;
     const inner = innerRef.current;
     if (!outer || !inner) return;
@@ -3099,7 +3297,7 @@ function OverlayContent({
     fit();
     return () => observer.disconnect();
   }, [padding, maxScale]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     Stack2,
     {
       ref: outerRef,
@@ -3112,7 +3310,7 @@ function OverlayContent({
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx5(
         Stack2,
         {
           ref: innerRef,
@@ -3131,8 +3329,8 @@ function OverlayContent({
 
 // src/overlay/FixedSizeContent.tsx
 import { Stack as Stack3 } from "@mui/material";
-import { useEffect as useEffect8, useRef as useRef9 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useRef as useRef9 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function FixedSizeContent({
   children,
   hideOnOverflow = true,
@@ -3142,7 +3340,7 @@ function FixedSizeContent({
 }) {
   const ref = useRef9(null);
   const totalContentHeightRef = useRef9(0);
-  useEffect8(() => {
+  useEffect9(() => {
     const el = ref.current;
     if (!el) return;
     let clipAncestor = el.parentElement;
@@ -3179,7 +3377,7 @@ function FixedSizeContent({
     check();
     return () => observer.disconnect();
   }, [hideOnOverflow, truncationPadding]);
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     Stack3,
     {
       ref,
@@ -3205,8 +3403,8 @@ function FixedSizeContent({
 
 // src/overlay/OverlayBadge.tsx
 import { Stack as Stack4 } from "@mui/material";
-import { useEffect as useEffect9, useRef as useRef10 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { useEffect as useEffect10, useRef as useRef10 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function toPx(v) {
   if (v === void 0) return void 0;
   return typeof v === "number" ? `${v}px` : v;
@@ -3250,7 +3448,7 @@ function OverlayBadge({
 }) {
   const ref = useRef10(null);
   const baseSize = useRef10(null);
-  useEffect9(() => {
+  useEffect10(() => {
     const el = ref.current;
     if (!el) return;
     const ancestor = el.parentElement;
@@ -3302,7 +3500,7 @@ function OverlayBadge({
     bottom: toPx(bottom),
     left: toPx(left)
   };
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     Stack4,
     {
       ref,
@@ -3340,6 +3538,7 @@ export {
   DEFAULT_DRAG_SHAPE_STYLE,
   DEFAULT_GUIDELINE_SHAPE_STYLE,
   DEFAULT_SHAPE_STYLE,
+  EditCanvasProvider,
   Canvas2 as FabricCanvas,
   FabricImage3 as FabricImage,
   FabricObject5 as FabricObject,
@@ -3350,6 +3549,7 @@ export {
   Point9 as Point,
   Polygon5 as Polygon,
   Rect6 as Rect,
+  ViewCanvasProvider,
   createCircle,
   createCircleAtPoint,
   createHistoryTracker,
@@ -3390,9 +3590,12 @@ export {
   snapCursorPoint,
   useCanvasClick,
   useCanvasEvents,
+  useCanvasRef,
   useCanvasTooltip,
   useEditCanvas,
+  useEditCanvasContext,
   useViewCanvas,
+  useViewCanvasContext,
   util5 as util
 };
 //# sourceMappingURL=index.js.map