@bwp-web/canvas 0.8.0 → 0.8.2

package/dist/background.d.ts

@@ -27,6 +27,8 @@ export declare function fitViewportToBackground(canvas: FabricCanvas, options?:
  * - **2**: maximum contrast (darks are truly dark, lights truly light).
  *
  * Clamped to the 0–2 range.
+ *
+ * Fires `background:modified` on the canvas when the contrast actually changes.
  */
 export declare function setBackgroundContrast(canvas: FabricCanvas, value: number): void;
 /**
@@ -38,6 +40,8 @@ export declare function setBackgroundContrast(canvas: FabricCanvas, value: numbe
 export declare function getBackgroundContrast(canvas: FabricCanvas): number;
 /**
  * Add or remove the Invert filter from the canvas background image.
+ *
+ * Fires `background:modified` on the canvas when the invert state actually changes.
  */
 export declare function setBackgroundInverted(canvas: FabricCanvas, inverted: boolean): void;
 /**
@@ -93,6 +97,8 @@ export interface SetBackgroundImageOptions extends ResizeImageOptions {
  * preserve the current background contrast when replacing the image.
  * Omit to load the URL as-is without resizing.
  *
+ * Fires `background:modified` on the canvas after the image is set.
+ *
  * Returns the created FabricImage for further manipulation.
  */
 export declare function setBackgroundImage(canvas: FabricCanvas, url: string, options?: SetBackgroundImageOptions): Promise<FabricImage>;

package/dist/background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../src/background.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,WAAW,EAAW,MAAM,QAAQ,CAAC;AAWtE;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,GAAG,IAAI,CAIpE;AAID,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,kBAAkB,GAC3B,IAAI,CAiCN;AAID;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE,MAAM,GACZ,IAAI,CA6BN;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAUlE;AAID;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,OAAO,GAChB,IAAI,CAgBN;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,YAAY,GAAG,OAAO,CAInE;AAID,MAAM,WAAW,YAAY;IAC3B,+EAA+E;IAC/E,GAAG,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,kBAAkB,GAC3B,OAAO,CAAC,YAAY,CAAC,CAkDvB;AAID,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,yBAAyB,GAClC,OAAO,CAAC,WAAW,CAAC,CA4BtB"}
+{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../src/background.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,WAAW,EAAW,MAAM,QAAQ,CAAC;AAWtE;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,GAAG,IAAI,CAIpE;AAID,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,kBAAkB,GAC3B,IAAI,CAiCN;AAID;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE,MAAM,GACZ,IAAI,CAmCN;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAUlE;AAID;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,OAAO,GAChB,IAAI,CAqBN;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,YAAY,GAAG,OAAO,CAInE;AAID,MAAM,WAAW,YAAY;IAC3B,+EAA+E;IAC/E,GAAG,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,kBAAkB,GAC3B,OAAO,CAAC,YAAY,CAAC,CAkDvB;AAID,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;GAUG;AACH,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,yBAAyB,GAClC,OAAO,CAAC,WAAW,CAAC,CA6BtB"}

package/dist/context/EditCanvasContext.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+import { useEditCanvas, type UseEditCanvasOptions } from '../hooks/useEditCanvas';
+/** The full return value of {@link useEditCanvas}, exposed via context. */
+export type EditCanvasContextValue = ReturnType<typeof useEditCanvas>;
+export interface EditCanvasProviderProps {
+    /** Options forwarded to the underlying {@link useEditCanvas} hook. */
+    options?: UseEditCanvasOptions;
+    children: ReactNode;
+}
+/**
+ * Calls {@link useEditCanvas} internally and provides the full canvas API
+ * to all descendants via React context.
+ *
+ * Use {@link useEditCanvasContext} in any descendant to access `canvasRef`,
+ * `isDirty`, `viewport`, `setMode`, `setBackground`, and every other value
+ * that `useEditCanvas` returns — without prop drilling or bridge contexts.
+ *
+ * @example
+ * ```tsx
+ * <EditCanvasProvider options={{ trackChanges: true, history: true }}>
+ *   <MyCanvas />
+ *   <MySidebar />
+ *   <MyToolbar />
+ * </EditCanvasProvider>
+ *
+ * function MyCanvas() {
+ *   const { onReady } = useEditCanvasContext();
+ *   return <Canvas onReady={onReady} />;
+ * }
+ *
+ * function MySidebar() {
+ *   const { isDirty, resetDirty } = useEditCanvasContext();
+ *   return <SaveButton disabled={!isDirty} onClick={() => { save(); resetDirty(); }} />;
+ * }
+ * ```
+ */
+export declare function EditCanvasProvider({ options, children, }: EditCanvasProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Access the full {@link useEditCanvas} API from any descendant of
+ * {@link EditCanvasProvider}.
+ *
+ * Throws if called outside of a provider.
+ */
+export declare function useEditCanvasContext(): EditCanvasContextValue;
+//# sourceMappingURL=EditCanvasContext.d.ts.map

package/dist/context/EditCanvasContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditCanvasContext.d.ts","sourceRoot":"","sources":["../../src/context/EditCanvasContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EAC1B,MAAM,wBAAwB,CAAC;AAEhC,2EAA2E;AAC3E,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AAItE,MAAM,WAAW,uBAAuB;IACtC,sEAAsE;IACtE,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,2CAOzB;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,IAAI,sBAAsB,CAQ7D"}

package/dist/context/ViewCanvasContext.d.ts

@@ -0,0 +1,44 @@
+import { type ReactNode } from 'react';
+import { useViewCanvas, type UseViewCanvasOptions } from '../hooks/useViewCanvas';
+/** The full return value of {@link useViewCanvas}, exposed via context. */
+export type ViewCanvasContextValue = ReturnType<typeof useViewCanvas>;
+export interface ViewCanvasProviderProps {
+    /** Options forwarded to the underlying {@link useViewCanvas} hook. */
+    options?: UseViewCanvasOptions;
+    children: ReactNode;
+}
+/**
+ * Calls {@link useViewCanvas} internally and provides the full canvas API
+ * to all descendants via React context.
+ *
+ * Use {@link useViewCanvasContext} in any descendant to access `canvasRef`,
+ * `viewport`, `setObjectStyle`, and every other value that `useViewCanvas`
+ * returns — without prop drilling or bridge contexts.
+ *
+ * @example
+ * ```tsx
+ * <ViewCanvasProvider options={{ scaledStrokes: true }}>
+ *   <MyCanvas />
+ *   <MyToolbar />
+ * </ViewCanvasProvider>
+ *
+ * function MyCanvas() {
+ *   const { onReady } = useViewCanvasContext();
+ *   return <Canvas onReady={onReady} />;
+ * }
+ *
+ * function MyToolbar() {
+ *   const { viewport } = useViewCanvasContext();
+ *   return <ZoomControls onZoomIn={viewport.zoomIn} onZoomOut={viewport.zoomOut} />;
+ * }
+ * ```
+ */
+export declare function ViewCanvasProvider({ options, children, }: ViewCanvasProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Access the full {@link useViewCanvas} API from any descendant of
+ * {@link ViewCanvasProvider}.
+ *
+ * Throws if called outside of a provider.
+ */
+export declare function useViewCanvasContext(): ViewCanvasContextValue;
+//# sourceMappingURL=ViewCanvasContext.d.ts.map

package/dist/context/ViewCanvasContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewCanvasContext.d.ts","sourceRoot":"","sources":["../../src/context/ViewCanvasContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EAC1B,MAAM,wBAAwB,CAAC;AAEhC,2EAA2E;AAC3E,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AAItE,MAAM,WAAW,uBAAuB;IACtC,sEAAsE;IACtE,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,2CAOzB;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,IAAI,sBAAsB,CAQ7D"}

package/dist/context/index.d.ts

@@ -0,0 +1,5 @@
+export { EditCanvasProvider, useEditCanvasContext } from './EditCanvasContext';
+export type { EditCanvasProviderProps, EditCanvasContextValue, } from './EditCanvasContext';
+export { ViewCanvasProvider, useViewCanvasContext } from './ViewCanvasContext';
+export type { ViewCanvasProviderProps, ViewCanvasContextValue, } from './ViewCanvasContext';
+//# sourceMappingURL=index.d.ts.map

package/dist/context/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,YAAY,EACV,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,qBAAqB,CAAC"}

package/dist/fabricAugmentation.d.ts

@@ -13,5 +13,8 @@ declare module 'fabric' {
     interface Canvas {
         lockLightMode?: boolean;
     }
+    interface CanvasEvents {
+        'background:modified': object;
+    }
 }
 //# sourceMappingURL=fabricAugmentation.d.ts.map

package/dist/fabricAugmentation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fabricAugmentation.d.ts","sourceRoot":"","sources":["../src/fabricAugmentation.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,CAAC;AAEhB,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;AAEjC,mDAAmD;AACnD,MAAM,MAAM,cAAc,GACtB,OAAO,GACP,QAAQ,GACR,MAAM,GACN,eAAe,GACf,UAAU,CAAC;AAEf,OAAO,QAAQ,QAAQ,CAAC;IACtB,UAAU,YAAY;QACpB,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,IAAI,CAAC,EAAE;YACL,IAAI,EAAE,cAAc,CAAC;YACrB,EAAE,EAAE,MAAM,CAAC;SACZ,CAAC;KACH;IACD,UAAU,MAAM;QACd,aAAa,CAAC,EAAE,OAAO,CAAC;KACzB;CACF"}
+{"version":3,"file":"fabricAugmentation.d.ts","sourceRoot":"","sources":["../src/fabricAugmentation.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,CAAC;AAEhB,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC;AAEjC,mDAAmD;AACnD,MAAM,MAAM,cAAc,GACtB,OAAO,GACP,QAAQ,GACR,MAAM,GACN,eAAe,GACf,UAAU,CAAC;AAEf,OAAO,QAAQ,QAAQ,CAAC;IACtB,UAAU,YAAY;QACpB,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB,IAAI,CAAC,EAAE;YACL,IAAI,EAAE,cAAc,CAAC;YACrB,EAAE,EAAE,MAAM,CAAC;SACZ,CAAC;KACH;IACD,UAAU,MAAM;QACd,aAAa,CAAC,EAAE,OAAO,CAAC;KACzB;IACD,UAAU,YAAY;QACpB,qBAAqB,EAAE,MAAM,CAAC;KAC/B;CACF"}

package/dist/hooks/useEditCanvas.d.ts

@@ -55,8 +55,10 @@ export interface UseEditCanvasOptions {
      */
     backgroundResize?: boolean | ResizeImageOptions;
     /**
-     * Track object add/remove/modify events and expose an `isDirty` flag.
-     * Call `resetDirty()` after a successful save to clear the flag.
+     * Track canvas mutations and expose an `isDirty` flag.
+     * Listens for `object:added`, `object:removed`, `object:modified`, and
+     * `background:modified` events. Call `resetDirty()` after a successful
+     * save to clear the flag, or `markDirty()` to set it manually.
      * Default: disabled.
      */
     trackChanges?: boolean;
@@ -153,6 +155,8 @@ export declare function useEditCanvas(options?: UseEditCanvasOptions): {
     isDirty: boolean;
     /** Reset the dirty flag (e.g., after a successful save). */
     resetDirty: () => void;
+    /** Manually mark the canvas as dirty (e.g., after a custom operation not tracked automatically). */
+    markDirty: () => void;
     /** Undo the last change. Requires `history: true`. */
     undo: () => Promise<void>;
     /** Redo a previously undone change. Requires `history: true`. */

package/dist/hooks/useEditCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEditCanvas.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditCanvas.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,KAAK,YAAY,EAAW,MAAM,QAAQ,CAAC;AAC5E,OAAO,EAEL,KAAK,iBAAiB,EAEtB,KAAK,YAAY,EAClB,MAAM,aAAa,CAAC;AAMrB,OAAO,EAEL,KAAK,sBAAsB,EAE3B,KAAK,mBAAmB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,iBAAiB,CAAC;AAOzB,OAAO,EAGL,KAAK,kBAAkB,EAExB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,cAAc,EAEpB,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,WAAW,oBAAoB;IACnC,kGAAkG;IAClG,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,mIAAmI;IACnI,SAAS,CAAC,EAAE,OAAO,GAAG,sBAAsB,CAAC;IAC7C;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC;IAChD;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;CACpC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IA+QxD,8CAA8C;sBAnMrC,YAAY;IAqMrB,oDAAoD;;IAEpD,qCAAqC;;IAErC,6CAA6C;;IAE7C,yBAAyB;;QAEvB,wCAAwC;;QAExC,wDAAwD;wBAhDjB,YAAY;QAkDnD,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;QAE1D,uDAAuD;;QAEvD,6DAA6D;;;IAG/D,+DAA+D;;IAE/D;;;;;;;;;;;;;;OAcG;qBArR+B,SAAS,GAAG,IAAI;IAuRlD;;;;;;;OAOG;yBA7ES,MAAM,WAAW;QAAE,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE;IA+E3D,8GAA8G;;IAE9G,4DAA4D;;IAE5D,sDAAsD;;IAQtD,iEAAiE;;IAQjE,mFAAmF;;IAEnF,kFAAkF;;EAGrF"}
+{"version":3,"file":"useEditCanvas.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditCanvas.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,KAAK,YAAY,EAAW,MAAM,QAAQ,CAAC;AAC5E,OAAO,EAEL,KAAK,iBAAiB,EAEtB,KAAK,YAAY,EAClB,MAAM,aAAa,CAAC;AAMrB,OAAO,EAEL,KAAK,sBAAsB,EAE3B,KAAK,mBAAmB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,iBAAiB,CAAC;AAOzB,OAAO,EAGL,KAAK,kBAAkB,EAExB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,cAAc,EAEpB,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,WAAW,oBAAoB;IACnC,kGAAkG;IAClG,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,mIAAmI;IACnI,SAAS,CAAC,EAAE,OAAO,GAAG,sBAAsB,CAAC;IAC7C;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC;IAChD;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;CACpC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IAiRxD,8CAA8C;sBArMrC,YAAY;IAuMrB,oDAAoD;;IAEpD,qCAAqC;;IAErC,6CAA6C;;IAE7C,yBAAyB;;QAEvB,wCAAwC;;QAExC,wDAAwD;wBAhDjB,YAAY;QAkDnD,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;QAE1D,uDAAuD;;QAEvD,6DAA6D;;;IAG/D,+DAA+D;;IAE/D;;;;;;;;;;;;;;OAcG;qBAvR+B,SAAS,GAAG,IAAI;IAyRlD;;;;;;;OAOG;yBA7ES,MAAM,WAAW;QAAE,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE;IA+E3D,8GAA8G;;IAE9G,4DAA4D;;IAE5D,oGAAoG;;IAEpG,sDAAsD;;IAQtD,iEAAiE;;IAQjE,mFAAmF;;IAEnF,kFAAkF;;EAGrF"}

package/dist/hooks/useViewCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useViewCanvas.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewCanvas.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AACnE,OAAO,EAEL,KAAK,iBAAiB,EAEvB,MAAM,aAAa,CAAC;AASrB,oEAAoE;AACpE,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,kGAAkG;IAClG,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC/B;AAUD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IAuHxD,8CAA8C;sBA9GrC,YAAY;IAgHrB,oDAAoD;;IAEpD,qCAAqC;;IAErC,yBAAyB;;QAEvB,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;QAE1D,uDAAuD;;QAEvD,6DAA6D;;;IAG/D,8DAA8D;yBAnExB,MAAM,SAAS,eAAe;IAqEpE,sFAAsF;8BA5D7E,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC;IA8DxC,qEAAqE;iCAvC9D,MAAM,SAAS,eAAe;EA0CxC"}
+{"version":3,"file":"useViewCanvas.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewCanvas.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AACnE,OAAO,EAEL,KAAK,iBAAiB,EAEvB,MAAM,aAAa,CAAC;AASrB,oEAAoE;AACpE,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,kGAAkG;IAClG,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC/B;AAUD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IA0HxD,8CAA8C;sBAjHrC,YAAY;IAmHrB,oDAAoD;;IAEpD,qCAAqC;;IAErC,yBAAyB;;QAEvB,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;QAE1D,uDAAuD;;QAEvD,6DAA6D;;;IAG/D,8DAA8D;yBAnExB,MAAM,SAAS,eAAe;IAqEpE,sFAAsF;8BA5D7E,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC;IA8DxC,qEAAqE;iCAvC9D,MAAM,SAAS,eAAe;EA0CxC"}

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,
@@ -79,7 +81,9 @@ __export(index_exports, {
   useCanvasEvents: () => useCanvasEvents,
   useCanvasTooltip: () => useCanvasTooltip,
   useEditCanvas: () => useEditCanvas,
+  useEditCanvasContext: () => useEditCanvasContext,
   useViewCanvas: () => useViewCanvas,
+  useViewCanvasContext: () => useViewCanvasContext,
   util: () => import_fabric19.util
 });
 module.exports = __toCommonJS(index_exports);
@@ -518,21 +522,26 @@ function setBackgroundContrast(canvas, value) {
   const contrastIdx = currentFilters.findIndex(
     (f) => f instanceof import_fabric4.filters.Contrast
   );
+  let changed = false;
   if (contrast === 0) {
     if (contrastIdx >= 0) {
       bg.filters = currentFilters.filter(
         (f) => !(f instanceof import_fabric4.filters.Contrast)
       );
       bg.applyFilters();
+      changed = true;
     }
   } else if (contrastIdx >= 0) {
     currentFilters[contrastIdx].contrast = contrast;
     bg.applyFilters();
+    changed = true;
   } else {
     bg.filters = [...currentFilters, new import_fabric4.filters.Contrast({ contrast })];
     bg.applyFilters();
+    changed = true;
   }
   canvas.requestRenderAll();
+  if (changed) canvas.fire("background:modified");
 }
 function getBackgroundContrast(canvas) {
   const bg = getBackgroundImage(canvas);
@@ -547,14 +556,18 @@ function setBackgroundInverted(canvas, inverted) {
   if (!bg) return;
   const currentFilters = bg.filters ?? [];
   const hasInvert = currentFilters.some((f) => f instanceof import_fabric4.filters.Invert);
+  let changed = false;
   if (inverted && !hasInvert) {
     bg.filters = [...currentFilters, new import_fabric4.filters.Invert()];
     bg.applyFilters();
+    changed = true;
   } else if (!inverted && hasInvert) {
     bg.filters = currentFilters.filter((f) => !(f instanceof import_fabric4.filters.Invert));
     bg.applyFilters();
+    changed = true;
   }
   canvas.requestRenderAll();
+  if (changed) canvas.fire("background:modified");
 }
 function getBackgroundInverted(canvas) {
   const bg = getBackgroundImage(canvas);
@@ -620,6 +633,7 @@ async function setBackgroundImage(canvas, url, options) {
     setBackgroundContrast(canvas, prevContrast);
   }
   canvas.requestRenderAll();
+  canvas.fire("background:modified");
   return img;
 }
 
@@ -2379,6 +2393,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 = [];
@@ -2610,6 +2628,7 @@ function useEditCanvas(options) {
           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?.history) {
           const syncHistoryState = () => {
@@ -2623,6 +2642,7 @@ function useEditCanvas(options) {
           canvas.on("object:added", syncHistoryState);
           canvas.on("object:removed", syncHistoryState);
           canvas.on("object:modified", syncHistoryState);
+          canvas.on("background:modified", syncHistoryState);
         }
         if (opts?.vertexEdit !== false) {
           const vertexOpts = typeof opts?.vertexEdit === "object" ? opts.vertexEdit : void 0;
@@ -2754,6 +2774,8 @@ function useEditCanvas(options) {
     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;
@@ -2813,6 +2835,7 @@ function useViewCanvas(options) {
       canvas.on("object:added", () => {
         lockCanvas(canvas);
       });
+      canvas.hoverCursor = "pointer";
       canvas.on("mouse:wheel", () => {
         setZoom(canvas.getZoom());
       });
@@ -3046,11 +3069,53 @@ function useCanvasClick(canvasRef, onClick, options) {
   }, [canvasRef]);
 }
 
-// src/overlay/ObjectOverlay.tsx
+// src/context/EditCanvasContext.tsx
 var import_react8 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var EditCanvasContext = (0, import_react8.createContext)(null);
+function EditCanvasProvider({
+  options,
+  children
+}) {
+  const canvas = useEditCanvas(options);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EditCanvasContext.Provider, { value: canvas, children });
+}
+function useEditCanvasContext() {
+  const ctx = (0, import_react8.useContext)(EditCanvasContext);
+  if (ctx === null) {
+    throw new Error(
+      "useEditCanvasContext must be used within an <EditCanvasProvider>"
+    );
+  }
+  return ctx;
+}
+
+// src/context/ViewCanvasContext.tsx
+var import_react9 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ViewCanvasContext = (0, import_react9.createContext)(null);
+function ViewCanvasProvider({
+  options,
+  children
+}) {
+  const canvas = useViewCanvas(options);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewCanvasContext.Provider, { value: canvas, children });
+}
+function useViewCanvasContext() {
+  const ctx = (0, import_react9.useContext)(ViewCanvasContext);
+  if (ctx === null) {
+    throw new Error(
+      "useViewCanvasContext must be used within a <ViewCanvasProvider>"
+    );
+  }
+  return ctx;
+}
+
+// src/overlay/ObjectOverlay.tsx
+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,
   object,
@@ -3058,8 +3123,8 @@ function ObjectOverlay({
   children,
   ...rest
 }) {
-  const stackRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const stackRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas || !object) return;
     function update() {
@@ -3094,7 +3159,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,
@@ -3114,8 +3179,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,
@@ -3123,9 +3188,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;
@@ -3154,7 +3219,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,
@@ -3167,7 +3232,7 @@ function OverlayContent({
         ...sx
       },
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_material2.Stack,
         {
           ref: innerRef,
@@ -3186,8 +3251,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,
@@ -3195,9 +3260,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;
@@ -3234,7 +3299,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,
@@ -3260,12 +3325,37 @@ 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;
 }
+function deriveAngle(top, right, bottom, left) {
+  const hasTop = top !== void 0;
+  const hasRight = right !== void 0;
+  const hasBottom = bottom !== void 0;
+  const hasLeft = left !== void 0;
+  if (hasTop && hasRight) return 45;
+  if (hasTop && hasLeft) return 135;
+  if (hasBottom && hasRight) return 315;
+  if (hasBottom && hasLeft) return 225;
+  if (hasTop) return 90;
+  if (hasRight) return 0;
+  if (hasBottom) return 270;
+  if (hasLeft) return 180;
+  return 45;
+}
+function ellipsePosition(angleDeg) {
+  const rad = angleDeg * Math.PI / 180;
+  return {
+    pctX: 50 + 50 * Math.cos(rad),
+    pctY: 50 - 50 * Math.sin(rad)
+  };
+}
+function toNum(v) {
+  return typeof v === "number" ? v : 0;
+}
 function OverlayBadge({
   children,
   maxScale = 2,
@@ -3274,12 +3364,13 @@ function OverlayBadge({
   right,
   bottom,
   left,
+  circular = false,
   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;
@@ -3304,7 +3395,8 @@ function OverlayBadge({
         const overlayScale = parseFloat(
           getComputedStyle(el).getPropertyValue("--overlay-scale")
         ) || 1;
-        el.style.transform = `scale(${ownScale / overlayScale})`;
+        const scale = `scale(${ownScale / overlayScale})`;
+        el.style.transform = circular ? `translate(-50%, -50%) ${scale}` : scale;
       });
     }
     const observer = new ResizeObserver(update);
@@ -3314,17 +3406,29 @@ function OverlayBadge({
       observer.disconnect();
       baseSize.current = null;
     };
-  }, [maxScale, minScale]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  }, [maxScale, minScale, circular]);
+  const positionSx = circular ? (() => {
+    const angle = deriveAngle(top, right, bottom, left);
+    const { pctX, pctY } = ellipsePosition(angle);
+    const leftOffset = toNum(left) - toNum(right);
+    const topOffset = toNum(top) - toNum(bottom);
+    return {
+      left: `calc(${pctX}% + ${leftOffset}px)`,
+      top: `calc(${pctY}% + ${topOffset}px)`
+    };
+  })() : {
+    top: toPx(top),
+    right: toPx(right),
+    bottom: toPx(bottom),
+    left: toPx(left)
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_material4.Stack,
     {
       ref,
       sx: {
         position: "absolute",
-        top: toPx(top),
-        right: toPx(right),
-        bottom: toPx(bottom),
-        left: toPx(left),
+        ...positionSx,
         transformOrigin: "center center",
         pointerEvents: "auto",
         width: "max-content",
@@ -3349,6 +3453,7 @@ var import_fabric19 = require("fabric");
   DEFAULT_DRAG_SHAPE_STYLE,
   DEFAULT_GUIDELINE_SHAPE_STYLE,
   DEFAULT_SHAPE_STYLE,
+  EditCanvasProvider,
   FabricCanvas,
   FabricImage,
   FabricObject,
@@ -3359,6 +3464,7 @@ var import_fabric19 = require("fabric");
   Point,
   Polygon,
   Rect,
+  ViewCanvasProvider,
   createCircle,
   createCircleAtPoint,
   createHistoryTracker,
@@ -3401,7 +3507,9 @@ var import_fabric19 = require("fabric");
   useCanvasEvents,
   useCanvasTooltip,
   useEditCanvas,
+  useEditCanvasContext,
   useViewCanvas,
+  useViewCanvasContext,
   util
 });
 //# sourceMappingURL=index.cjs.map