@bwp-web/canvas 0.8.1 → 0.8.3

package/dist/index.cjs

@@ -27,6 +27,7 @@ __export(index_exports, {
   DEFAULT_DRAG_SHAPE_STYLE: () => DEFAULT_DRAG_SHAPE_STYLE,
   DEFAULT_GUIDELINE_SHAPE_STYLE: () => DEFAULT_GUIDELINE_SHAPE_STYLE,
   DEFAULT_SHAPE_STYLE: () => DEFAULT_SHAPE_STYLE,
+  EditCanvasProvider: () => EditCanvasProvider,
   FabricCanvas: () => import_fabric19.Canvas,
   FabricImage: () => import_fabric19.FabricImage,
   FabricObject: () => import_fabric19.FabricObject,
@@ -37,6 +38,7 @@ __export(index_exports, {
   Point: () => import_fabric19.Point,
   Polygon: () => import_fabric19.Polygon,
   Rect: () => import_fabric19.Rect,
+  ViewCanvasProvider: () => ViewCanvasProvider,
   createCircle: () => createCircle,
   createCircleAtPoint: () => createCircleAtPoint,
   createHistoryTracker: () => createHistoryTracker,
@@ -77,9 +79,12 @@ __export(index_exports, {
   snapCursorPoint: () => snapCursorPoint,
   useCanvasClick: () => useCanvasClick,
   useCanvasEvents: () => useCanvasEvents,
+  useCanvasRef: () => useCanvasRef,
   useCanvasTooltip: () => useCanvasTooltip,
   useEditCanvas: () => useEditCanvas,
+  useEditCanvasContext: () => useEditCanvasContext,
   useViewCanvas: () => useViewCanvas,
+  useViewCanvasContext: () => useViewCanvasContext,
   util: () => import_fabric19.util
 });
 module.exports = __toCommonJS(index_exports);
@@ -2389,6 +2394,10 @@ async function loadCanvas(canvas, json, options) {
       });
       bg.setCoords();
     }
+    if (bg.filters?.some((f) => f instanceof import_fabric16.filters.Invert)) {
+      bg.filters = bg.filters.filter((f) => !(f instanceof import_fabric16.filters.Invert));
+      bg.applyFilters();
+    }
   }
   if (options?.filter) {
     const toRemove = [];
@@ -2520,6 +2529,7 @@ function useEditCanvas(options) {
   const vertexEditCleanupRef = (0, import_react3.useRef)(null);
   const keyboardCleanupRef = (0, import_react3.useRef)(null);
   const historyRef = (0, import_react3.useRef)(null);
+  const isInitialLoadRef = (0, import_react3.useRef)(false);
   const optionsRef = (0, import_react3.useRef)(options);
   optionsRef.current = options;
   const savedSelectabilityRef = (0, import_react3.useRef)(
@@ -2532,6 +2542,11 @@ function useEditCanvas(options) {
   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 [objects, setObjects] = (0, import_react3.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
+  const [lockLightMode, setLockLightModeState] = (0, import_react3.useState)(
+    void 0
+  );
   const setMode = (0, import_react3.useCallback)((setup) => {
     vertexEditCleanupRef.current?.();
     vertexEditCleanupRef.current = null;
@@ -2616,11 +2631,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 = () => {
@@ -2658,8 +2676,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);
@@ -2689,37 +2730,25 @@ function useEditCanvas(options) {
       alignmentCleanupRef.current = null;
     }
   }, [options?.enableAlignment]);
+  (0, import_react3.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || options?.invertBackground === void 0) return;
+    setBackgroundInverted(canvas, options.invertBackground);
+  }, [options?.invertBackground]);
+  const setLockLightMode = (0, import_react3.useCallback)((value) => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      canvas.lockLightMode = value;
+    }
+    setLockLightModeState(value);
+  }, []);
   const setViewportMode = (0, import_react3.useCallback)((mode) => {
     viewportRef.current?.setMode(mode);
     setViewportModeState(mode);
   }, []);
   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 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 = (0, import_react3.useMemo)(
+    () => ({
       /** Current viewport mode (reactive). */
       mode: viewportMode,
       /** Switch between 'select' and 'pan' viewport modes. */
@@ -2734,61 +2763,125 @@ 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 = (0, import_react3.useCallback)(() => setIsDirty(false), []);
+  const markDirty = (0, import_react3.useCallback)(() => setIsDirty(true), []);
+  const undo = (0, import_react3.useCallback)(async () => {
+    const h = historyRef.current;
+    if (!h) return;
+    await h.undo();
+    setCanUndo(h.canUndo());
+    setCanRedo(h.canRedo());
+  }, []);
+  const redo = (0, import_react3.useCallback)(async () => {
+    const h = historyRef.current;
+    if (!h) return;
+    await h.redo();
+    setCanUndo(h.canUndo());
+    setCanRedo(h.canRedo());
+  }, []);
+  const setBackground = (0, import_react3.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: (0, import_react3.useCallback)(() => setIsDirty(false), []),
-    /** Manually mark the canvas as dirty (e.g., after a custom operation not tracked automatically). */
-    markDirty: (0, import_react3.useCallback)(() => setIsDirty(true), []),
-    /** 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
-  };
+    []
+  );
+  return (0, import_react3.useMemo)(
+    () => ({
+      /** 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
@@ -2805,6 +2898,8 @@ function useViewCanvas(options) {
   const optionsRef = (0, import_react4.useRef)(options);
   optionsRef.current = options;
   const [zoom, setZoom] = (0, import_react4.useState)(1);
+  const [objects, setObjects] = (0, import_react4.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
   const onReady = (0, import_react4.useCallback)(
     (canvas) => {
       canvasRef.current = canvas;
@@ -2831,20 +2926,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
     []
   );
+  (0, import_react4.useEffect)(() => {
+    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 = (0, import_react4.useMemo)(
+    () => ({
+      /** 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;
@@ -2860,9 +2992,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;
@@ -2892,42 +3024,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 (0, import_react4.useMemo)(
+    () => ({
+      /** 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
+var import_react7 = require("react");
+
+// src/context/ViewCanvasContext.tsx
 var import_react5 = require("react");
-function useCanvasEvents(canvasRef, events) {
-  const eventsRef = (0, import_react5.useRef)(events);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ViewCanvasContext = (0, import_react5.createContext)(null);
+function ViewCanvasProvider({
+  options,
+  children
+}) {
+  const canvas = useViewCanvas(options);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ViewCanvasContext.Provider, { value: canvas, children });
+}
+function useViewCanvasContext() {
+  const ctx = (0, import_react5.useContext)(ViewCanvasContext);
+  if (ctx === null) {
+    throw new Error(
+      "useViewCanvasContext must be used within a <ViewCanvasProvider>"
+    );
+  }
+  return ctx;
+}
+function useViewCanvasContextSafe() {
+  return (0, import_react5.useContext)(ViewCanvasContext);
+}
+
+// src/context/EditCanvasContext.tsx
+var import_react6 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var EditCanvasContext = (0, import_react6.createContext)(null);
+function EditCanvasProvider({
+  options,
+  children
+}) {
+  const canvas = useEditCanvas(options);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EditCanvasContext.Provider, { value: canvas, children });
+}
+function useEditCanvasContext() {
+  const ctx = (0, import_react6.useContext)(EditCanvasContext);
+  if (ctx === null) {
+    throw new Error(
+      "useEditCanvasContext must be used within an <EditCanvasProvider>"
+    );
+  }
+  return ctx;
+}
+function useEditCanvasContextSafe() {
+  return (0, import_react6.useContext)(EditCanvasContext);
+}
+
+// src/context/useCanvasRef.ts
+function useCanvasRef() {
+  const viewCtx = useViewCanvasContextSafe();
+  const editCtx = useEditCanvasContextSafe();
+  return viewCtx?.canvasRef ?? editCtx?.canvasRef ?? null;
+}
+
+// src/hooks/useCanvasEvents.ts
+function useCanvasEvents(canvasRefOrEvents, maybeEvents) {
+  const isContextOverload = maybeEvents === void 0;
+  const contextCanvasRef = useCanvasRef();
+  const resolvedCanvasRef = isContextOverload ? contextCanvasRef : canvasRefOrEvents;
+  const events = isContextOverload ? canvasRefOrEvents : maybeEvents;
+  const eventsRef = (0, import_react7.useRef)(events);
   eventsRef.current = events;
-  (0, import_react5.useEffect)(() => {
-    const canvas = canvasRef.current;
+  (0, import_react7.useEffect)(() => {
+    const canvas = resolvedCanvasRef?.current;
     if (!canvas) return;
     const wrappers = /* @__PURE__ */ new Map();
     for (const key of Object.keys(eventsRef.current)) {
@@ -2943,22 +3134,26 @@ function useCanvasEvents(canvasRef, events) {
         canvas.off(name, handler);
       });
     };
-  }, [canvasRef]);
+  }, [resolvedCanvasRef]);
 }
 
 // src/hooks/useCanvasTooltip.ts
-var import_react6 = require("react");
-function useCanvasTooltip(canvasRef, options) {
-  const [state, setState] = (0, import_react6.useState)({
+var import_react8 = require("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] = (0, import_react8.useState)({
     visible: false,
     content: null,
     position: { x: 0, y: 0 }
   });
-  const hoveredObjectRef = (0, import_react6.useRef)(null);
-  const optionsRef = (0, import_react6.useRef)(options);
+  const hoveredObjectRef = (0, import_react8.useRef)(null);
+  const optionsRef = (0, import_react8.useRef)(options);
   optionsRef.current = options;
-  (0, import_react6.useEffect)(() => {
-    const canvas = canvasRef.current;
+  (0, import_react8.useEffect)(() => {
+    const canvas = resolvedCanvasRef?.current;
     if (!canvas) return;
     function calculatePosition(target) {
       const bounds = target.getBoundingRect();
@@ -3006,19 +3201,24 @@ function useCanvasTooltip(canvasRef, options) {
       canvas.off("after:render", updatePosition);
       canvas.off("mouse:wheel", updatePosition);
     };
-  }, [canvasRef]);
+  }, [resolvedCanvasRef]);
   return state;
 }
 
 // src/hooks/useCanvasClick.ts
-var import_react7 = require("react");
-function useCanvasClick(canvasRef, onClick, options) {
-  const onClickRef = (0, import_react7.useRef)(onClick);
+var import_react9 = require("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 = (0, import_react9.useRef)(onClick);
   onClickRef.current = onClick;
-  const optionsRef = (0, import_react7.useRef)(options);
+  const optionsRef = (0, import_react9.useRef)(options);
   optionsRef.current = options;
-  (0, import_react7.useEffect)(() => {
-    const canvas = canvasRef.current;
+  (0, import_react9.useEffect)(() => {
+    const canvas = resolvedCanvasRef?.current;
     if (!canvas) return;
     let mouseDown = null;
     let isPanning = false;
@@ -3058,24 +3258,26 @@ function useCanvasClick(canvasRef, onClick, options) {
       canvas.off("mouse:move", handleMouseMove);
       canvas.off("mouse:up", handleMouseUp);
     };
-  }, [canvasRef]);
+  }, [resolvedCanvasRef]);
 }
 
 // src/overlay/ObjectOverlay.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_material = require("@mui/material");
 var import_fabric18 = require("fabric");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function ObjectOverlay({
-  canvasRef,
+  canvasRef: canvasRefProp,
   object,
   sx,
   children,
   ...rest
 }) {
-  const stackRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
-    const canvas = canvasRef.current;
+  const contextCanvasRef = useCanvasRef();
+  const canvasRef = canvasRefProp ?? contextCanvasRef;
+  const stackRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
+    const canvas = canvasRef?.current;
     if (!canvas || !object) return;
     function update() {
       const el = stackRef.current;
@@ -3109,7 +3311,7 @@ function ObjectOverlay({
     };
   }, [canvasRef, object]);
   if (!object) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_material.Stack,
     {
       ref: stackRef,
@@ -3129,8 +3331,8 @@ function ObjectOverlay({
 
 // src/overlay/OverlayContent.tsx
 var import_material2 = require("@mui/material");
-var import_react9 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function OverlayContent({
   children,
   padding = 4,
@@ -3138,9 +3340,9 @@ function OverlayContent({
   sx,
   ...rest
 }) {
-  const outerRef = (0, import_react9.useRef)(null);
-  const innerRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useEffect)(() => {
+  const outerRef = (0, import_react11.useRef)(null);
+  const innerRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     const outer = outerRef.current;
     const inner = innerRef.current;
     if (!outer || !inner) return;
@@ -3169,7 +3371,7 @@ function OverlayContent({
     fit();
     return () => observer.disconnect();
   }, [padding, maxScale]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_material2.Stack,
     {
       ref: outerRef,
@@ -3182,7 +3384,7 @@ function OverlayContent({
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_material2.Stack,
         {
           ref: innerRef,
@@ -3201,8 +3403,8 @@ function OverlayContent({
 
 // src/overlay/FixedSizeContent.tsx
 var import_material3 = require("@mui/material");
-var import_react10 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function FixedSizeContent({
   children,
   hideOnOverflow = true,
@@ -3210,9 +3412,9 @@ function FixedSizeContent({
   sx,
   ...rest
 }) {
-  const ref = (0, import_react10.useRef)(null);
-  const totalContentHeightRef = (0, import_react10.useRef)(0);
-  (0, import_react10.useEffect)(() => {
+  const ref = (0, import_react12.useRef)(null);
+  const totalContentHeightRef = (0, import_react12.useRef)(0);
+  (0, import_react12.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     let clipAncestor = el.parentElement;
@@ -3249,7 +3451,7 @@ function FixedSizeContent({
     check();
     return () => observer.disconnect();
   }, [hideOnOverflow, truncationPadding]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_material3.Stack,
     {
       ref,
@@ -3275,8 +3477,8 @@ function FixedSizeContent({
 
 // src/overlay/OverlayBadge.tsx
 var import_material4 = require("@mui/material");
-var import_react11 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function toPx(v) {
   if (v === void 0) return void 0;
   return typeof v === "number" ? `${v}px` : v;
@@ -3318,9 +3520,9 @@ function OverlayBadge({
   sx,
   ...rest
 }) {
-  const ref = (0, import_react11.useRef)(null);
-  const baseSize = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const ref = (0, import_react13.useRef)(null);
+  const baseSize = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     const ancestor = el.parentElement;
@@ -3372,7 +3574,7 @@ function OverlayBadge({
     bottom: toPx(bottom),
     left: toPx(left)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_material4.Stack,
     {
       ref,
@@ -3403,6 +3605,7 @@ var import_fabric19 = require("fabric");
   DEFAULT_DRAG_SHAPE_STYLE,
   DEFAULT_GUIDELINE_SHAPE_STYLE,
   DEFAULT_SHAPE_STYLE,
+  EditCanvasProvider,
   FabricCanvas,
   FabricImage,
   FabricObject,
@@ -3413,6 +3616,7 @@ var import_fabric19 = require("fabric");
   Point,
   Polygon,
   Rect,
+  ViewCanvasProvider,
   createCircle,
   createCircleAtPoint,
   createHistoryTracker,
@@ -3453,9 +3657,12 @@ var import_fabric19 = require("fabric");
   snapCursorPoint,
   useCanvasClick,
   useCanvasEvents,
+  useCanvasRef,
   useCanvasTooltip,
   useEditCanvas,
+  useEditCanvasContext,
   useViewCanvas,
+  useViewCanvasContext,
   util
 });
 //# sourceMappingURL=index.cjs.map