@bwp-web/canvas 0.4.3 → 0.5.1

package/dist/background.d.ts

@@ -19,15 +19,23 @@ export interface FitViewportOptions {
  */
 export declare function fitViewportToBackground(canvas: FabricCanvas, options?: FitViewportOptions): void;
 /**
- * Set the opacity of the canvas background image.
- * Value is clamped to the 0–1 range.
+ * Set the contrast of the canvas background image.
+ *
+ * Value is expressed as a 0–2 scale:
+ * - **0**: minimum contrast (flat grey).
+ * - **1**: normal / unmodified (no filter applied).
+ * - **2**: maximum contrast (darks are truly dark, lights truly light).
+ *
+ * Clamped to the 0–2 range.
  */
-export declare function setBackgroundOpacity(canvas: FabricCanvas, opacity: number): void;
+export declare function setBackgroundContrast(canvas: FabricCanvas, value: number): void;
 /**
- * Get the current opacity of the canvas background image.
+ * Get the current contrast of the canvas background image.
+ *
+ * Returns a value in the 0–2 range where 1 is normal (no filter).
  * Returns 1 if no background image is set.
  */
-export declare function getBackgroundOpacity(canvas: FabricCanvas): number;
+export declare function getBackgroundContrast(canvas: FabricCanvas): number;
 /**
  * Add or remove the Invert filter from the canvas background image.
  */
@@ -75,14 +83,14 @@ export interface ResizeImageOptions {
  */
 export declare function resizeImageUrl(url: string, options?: ResizeImageOptions): Promise<ResizeResult>;
 export interface SetBackgroundImageOptions extends ResizeImageOptions {
-    /** Preserve the current background opacity when replacing the image. */
-    preserveOpacity?: boolean;
+    /** Preserve the current background contrast when replacing the image. */
+    preserveContrast?: boolean;
 }
 /**
  * Set an image URL as the canvas background image.
  *
  * Pass options to control auto-resize (`maxSize`, `minSize`) and/or
- * preserve the current background opacity when replacing the image.
+ * preserve the current background contrast when replacing the image.
  * Omit to load the URL as-is without resizing.
  *
  * Returns the created FabricImage for further manipulation.

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;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,MAAM,GACd,IAAI,CAKN;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAGjE;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,wEAAwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,yBAAyB,GAClC,OAAO,CAAC,WAAW,CAAC,CAmBtB"}
+{"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,CAmBtB"}

package/dist/constants.d.ts

@@ -4,8 +4,8 @@ export declare const DEFAULT_MIN_ZOOM = 0.2;
 export declare const DEFAULT_MAX_ZOOM = 10;
 /** Zoom sensitivity multiplier (applied per wheel tick). */
 export declare const DEFAULT_ZOOM_FACTOR = 1.03;
-/** Default step for programmatic zoomIn/zoomOut. */
-export declare const DEFAULT_ZOOM_STEP = 0.2;
+/** Default multiplier for programmatic zoomIn/zoomOut (1.2 = 20% per click). */
+export declare const DEFAULT_ZOOM_STEP = 1.2;
 /** Default viewport padding fraction (5% on each side). */
 export declare const DEFAULT_VIEWPORT_PADDING = 0.05;
 /** Reference canvas dimension for scaling snap margins proportionally. */

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAEA,0BAA0B;AAC1B,eAAO,MAAM,gBAAgB,MAAM,CAAC;AACpC,0BAA0B;AAC1B,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,OAAO,CAAC;AACxC,oDAAoD;AACpD,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,2DAA2D;AAC3D,eAAO,MAAM,wBAAwB,OAAO,CAAC;AAI7C,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,yFAAyF;AACzF,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,8CAA8C;AAC9C,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAI9C;;;GAGG;AACH,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAI1C,oDAAoD;AACpD,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAC3C,8EAA8E;AAC9E,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAI1C,eAAO,MAAM,4BAA4B,IAAI,CAAC;AAC9C,eAAO,MAAM,0BAA0B,YAAY,CAAC;AACpD,eAAO,MAAM,4BAA4B,YAAY,CAAC;AACtD,eAAO,MAAM,kCAAkC,IAAI,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAEA,0BAA0B;AAC1B,eAAO,MAAM,gBAAgB,MAAM,CAAC;AACpC,0BAA0B;AAC1B,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,4DAA4D;AAC5D,eAAO,MAAM,mBAAmB,OAAO,CAAC;AACxC,gFAAgF;AAChF,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,2DAA2D;AAC3D,eAAO,MAAM,wBAAwB,OAAO,CAAC;AAI7C,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,yFAAyF;AACzF,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,8CAA8C;AAC9C,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAI9C;;;GAGG;AACH,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAI1C,oDAAoD;AACpD,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAC3C,8EAA8E;AAC9E,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAI1C,eAAO,MAAM,4BAA4B,IAAI,CAAC;AAC9C,eAAO,MAAM,0BAA0B,YAAY,CAAC;AACpD,eAAO,MAAM,4BAA4B,YAAY,CAAC;AACtD,eAAO,MAAM,kCAAkC,IAAI,CAAC"}

package/dist/hooks/useEditCanvas.d.ts

@@ -129,11 +129,11 @@ export declare function useEditCanvas(options?: UseEditCanvasOptions): {
      * exceeds the configured limits (opt out via `backgroundResize: false`),
      * and fits the viewport after setting if `autoFitToBackground` is enabled.
      *
-     * Pass `{ preserveOpacity: true }` to keep the current background opacity
+     * Pass `{ preserveContrast: true }` to keep the current background contrast
      * when replacing the image.
      */
     setBackground: (url: string, bgOpts?: {
-        preserveOpacity?: boolean;
+        preserveContrast?: boolean;
     }) => Promise<import("fabric").FabricImage<Partial<import("fabric").ImageProps>, import("fabric").SerializedImageProps, import("fabric").ObjectEvents>>;
     /** Whether the canvas has been modified since the last `resetDirty()` call. Requires `trackChanges: true`. */
     isDirty: boolean;

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;AAGzB,OAAO,EAGL,KAAK,kBAAkB,EAExB,MAAM,eAAe,CAAC;AACvB,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;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IAuOxD,8CAA8C;sBA9KrC,YAAY;IAgLrB,oDAAoD;;IAEpD,qCAAqC;;IAErC,6CAA6C;;IAE7C,yBAAyB;;QAEvB,wCAAwC;;QAExC,wDAAwD;wBAnDjB,YAAY;QAqDnD,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;QAE1D,uDAAuD;;;IAGzD,+DAA+D;;IAE/D;;;;;;;;;;;;;;OAcG;qBArP+B,SAAS,GAAG,IAAI;IAuPlD;;;;;;;OAOG;yBA3ES,MAAM,WAAW;QAAE,eAAe,CAAC,EAAE,OAAO,CAAA;KAAE;IA6E1D,8GAA8G;;IAE9G,4DAA4D;;EAG/D"}
+{"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;AAMzB,OAAO,EAGL,KAAK,kBAAkB,EAExB,MAAM,eAAe,CAAC;AACvB,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;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IAyOxD,8CAA8C;sBAhLrC,YAAY;IAkLrB,oDAAoD;;IAEpD,qCAAqC;;IAErC,6CAA6C;;IAE7C,yBAAyB;;QAEvB,wCAAwC;;QAExC,wDAAwD;wBAnDjB,YAAY;QAqDnD,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;QAE1D,uDAAuD;;;IAGzD,+DAA+D;;IAE/D;;;;;;;;;;;;;;OAcG;qBAvP+B,SAAS,GAAG,IAAI;IAyPlD;;;;;;;OAOG;yBA3ES,MAAM,WAAW;QAAE,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE;IA6E3D,8GAA8G;;IAE9G,4DAA4D;;EAG/D"}

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,EAAQ,MAAM,QAAQ,CAAC;AACzE,OAAO,EAEL,KAAK,iBAAiB,EAEvB,MAAM,aAAa,CAAC;AAKrB,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;CAC/B;AAuBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IAgHxD,8CAA8C;sBAzGrC,YAAY;IA2GrB,oDAAoD;;IAEpD,qCAAqC;;IAErC,yBAAyB;;QAEvB,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;QAE1D,uDAAuD;;;IAGzD,8DAA8D;yBAjExB,MAAM,SAAS,eAAe;IAmEpE,sFAAsF;8BA1D7E,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC;IA4DxC,qEAAqE;iCArC9D,MAAM,SAAS,eAAe;EAwCxC"}
+{"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;AAQrB,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;CAC/B;AAUD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IAkHxD,8CAA8C;sBA3GrC,YAAY;IA6GrB,oDAAoD;;IAEpD,qCAAqC;;IAErC,yBAAyB;;QAEvB,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;QAE1D,uDAAuD;;;IAGzD,8DAA8D;yBAjExB,MAAM,SAAS,eAAe;IAmEpE,sFAAsF;8BA1D7E,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC;IA4DxC,qEAAqE;iCArC9D,MAAM,SAAS,eAAe;EAwCxC"}

package/dist/index.cjs

@@ -27,12 +27,12 @@ __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,
-  FabricCanvas: () => import_fabric20.Canvas,
-  FabricImage: () => import_fabric20.FabricImage,
-  FabricObject: () => import_fabric20.FabricObject,
-  Point: () => import_fabric20.Point,
-  Polygon: () => import_fabric20.Polygon,
-  Rect: () => import_fabric20.Rect,
+  FabricCanvas: () => import_fabric19.Canvas,
+  FabricImage: () => import_fabric19.FabricImage,
+  FabricObject: () => import_fabric19.FabricObject,
+  Point: () => import_fabric19.Point,
+  Polygon: () => import_fabric19.Polygon,
+  Rect: () => import_fabric19.Rect,
   createCircle: () => createCircle,
   createCircleAtPoint: () => createCircleAtPoint,
   createPolygon: () => createPolygon,
@@ -52,11 +52,12 @@ __export(index_exports, {
   enableObjectAlignment: () => enableObjectAlignment,
   enablePanAndZoom: () => enablePanAndZoom,
   enableRotationSnap: () => enableRotationSnap,
+  enableScaledBorderRadius: () => enableScaledBorderRadius,
   enableScaledStrokes: () => enableScaledStrokes,
   enableVertexEdit: () => enableVertexEdit,
   fitViewportToBackground: () => fitViewportToBackground,
+  getBackgroundContrast: () => getBackgroundContrast,
   getBackgroundInverted: () => getBackgroundInverted,
-  getBackgroundOpacity: () => getBackgroundOpacity,
   getBackgroundSrc: () => getBackgroundSrc,
   getBaseStrokeWidth: () => getBaseStrokeWidth,
   getSnapPoints: () => getSnapPoints,
@@ -65,9 +66,9 @@ __export(index_exports, {
   resetViewport: () => resetViewport,
   resizeImageUrl: () => resizeImageUrl,
   serializeCanvas: () => serializeCanvas,
+  setBackgroundContrast: () => setBackgroundContrast,
   setBackgroundImage: () => setBackgroundImage,
   setBackgroundInverted: () => setBackgroundInverted,
-  setBackgroundOpacity: () => setBackgroundOpacity,
   snapCursorPoint: () => snapCursorPoint,
   useCanvasClick: () => useCanvasClick,
   useCanvasEvents: () => useCanvasEvents,
@@ -75,7 +76,7 @@ __export(index_exports, {
   useEditCanvas: () => useEditCanvas,
   useObjectOverlay: () => useObjectOverlay,
   useViewCanvas: () => useViewCanvas,
-  util: () => import_fabric20.util
+  util: () => import_fabric19.util
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -173,7 +174,7 @@ var import_fabric3 = require("fabric");
 var DEFAULT_MIN_ZOOM = 0.2;
 var DEFAULT_MAX_ZOOM = 10;
 var DEFAULT_ZOOM_FACTOR = 1.03;
-var DEFAULT_ZOOM_STEP = 0.2;
+var DEFAULT_ZOOM_STEP = 1.2;
 var DEFAULT_VIEWPORT_PADDING = 0.05;
 var BASE_CANVAS_SIZE = 1e3;
 var DEFAULT_SNAP_MARGIN = 6;
@@ -355,15 +356,15 @@ function enablePanAndZoom(canvas, options) {
     setEnabled(value) {
       enabled = value;
     },
-    zoomIn(step = DEFAULT_ZOOM_STEP) {
-      const z = Math.min(canvas.getZoom() + step, bounds.maxZoom);
+    zoomIn(factor = DEFAULT_ZOOM_STEP) {
+      const z = Math.min(canvas.getZoom() * factor, bounds.maxZoom);
       canvas.zoomToPoint(
         new import_fabric3.Point(canvas.getWidth() / 2, canvas.getHeight() / 2),
         z
       );
     },
-    zoomOut(step = DEFAULT_ZOOM_STEP) {
-      const z = Math.max(canvas.getZoom() - step, bounds.minZoom);
+    zoomOut(factor = DEFAULT_ZOOM_STEP) {
+      const z = Math.max(canvas.getZoom() / factor, bounds.minZoom);
       canvas.zoomToPoint(
         new import_fabric3.Point(canvas.getWidth() / 2, canvas.getHeight() / 2),
         z
@@ -462,15 +463,37 @@ function fitViewportToBackground(canvas, options) {
   canvas.setViewportTransform([scale, 0, 0, scale, offsetX, offsetY]);
   canvas.requestRenderAll();
 }
-function setBackgroundOpacity(canvas, opacity) {
+function setBackgroundContrast(canvas, value) {
   const bg = getBackgroundImage(canvas);
   if (!bg) return;
-  bg.set("opacity", Math.min(1, Math.max(0, opacity)));
+  const contrast = Math.min(Math.max(value, 0), 2) - 1;
+  const currentFilters = bg.filters ?? [];
+  const contrastIdx = currentFilters.findIndex(
+    (f) => f instanceof import_fabric4.filters.Contrast
+  );
+  if (contrast === 0) {
+    if (contrastIdx >= 0) {
+      bg.filters = currentFilters.filter(
+        (f) => !(f instanceof import_fabric4.filters.Contrast)
+      );
+      bg.applyFilters();
+    }
+  } else if (contrastIdx >= 0) {
+    currentFilters[contrastIdx].contrast = contrast;
+    bg.applyFilters();
+  } else {
+    bg.filters = [...currentFilters, new import_fabric4.filters.Contrast({ contrast })];
+    bg.applyFilters();
+  }
   canvas.requestRenderAll();
 }
-function getBackgroundOpacity(canvas) {
+function getBackgroundContrast(canvas) {
   const bg = getBackgroundImage(canvas);
-  return bg?.opacity ?? 1;
+  if (!bg) return 1;
+  const contrastFilter = bg.filters?.find(
+    (f) => f instanceof import_fabric4.filters.Contrast
+  );
+  return 1 + (contrastFilter?.contrast ?? 0);
 }
 function setBackgroundInverted(canvas, inverted) {
   const bg = getBackgroundImage(canvas);
@@ -536,7 +559,7 @@ function resizeImageUrl(url, options) {
   });
 }
 async function setBackgroundImage(canvas, url, options) {
-  const prevOpacity = options?.preserveOpacity ? getBackgroundOpacity(canvas) : void 0;
+  const prevContrast = options?.preserveContrast ? getBackgroundContrast(canvas) : void 0;
   let imageUrl = url;
   if (options !== void 0) {
     const result = await resizeImageUrl(url, options);
@@ -544,8 +567,8 @@ async function setBackgroundImage(canvas, url, options) {
   }
   const img = await import_fabric4.FabricImage.fromURL(imageUrl, { crossOrigin: "anonymous" });
   canvas.backgroundImage = img;
-  if (prevOpacity !== void 0 && prevOpacity !== 1) {
-    img.set("opacity", prevOpacity);
+  if (prevContrast !== void 0 && prevContrast !== 1) {
+    setBackgroundContrast(canvas, prevContrast);
   }
   canvas.requestRenderAll();
   return img;
@@ -1463,6 +1486,11 @@ function enableDragToCreate(canvas, factory, options) {
     if (width < MIN_DRAG_SIZE && height < MIN_DRAG_SIZE) {
       canvas.requestRenderAll();
       previewRect = null;
+      if (options?.clickFactory) {
+        const obj2 = options.clickFactory(canvas, { x: startX, y: startY });
+        restoreViewport(options?.viewport);
+        options?.onCreated?.(obj2);
+      }
       return;
     }
     const obj = factory(canvas, { startX, startY, width, height });
@@ -2101,6 +2129,8 @@ function enableVertexEdit(canvas, polygon, options, onExit) {
 // src/serialization.ts
 var import_fabric16 = require("fabric");
 var strokeBaseMap = /* @__PURE__ */ new WeakMap();
+var borderRadiusBaseMap = /* @__PURE__ */ new WeakMap();
+var VIEW_BORDER_RADIUS = 4;
 function enableScaledStrokes(canvas) {
   function applyScaledStrokes() {
     const zoom = canvas.getZoom();
@@ -2125,6 +2155,28 @@ function enableScaledStrokes(canvas) {
     });
   };
 }
+function enableScaledBorderRadius(canvas) {
+  function applyScaledBorderRadius() {
+    canvas.forEachObject((obj) => {
+      if (!(obj instanceof import_fabric16.Rect)) return;
+      if (!borderRadiusBaseMap.has(obj)) return;
+      const rx = VIEW_BORDER_RADIUS / (obj.scaleX ?? 1);
+      const ry = VIEW_BORDER_RADIUS / (obj.scaleY ?? 1);
+      obj.set({ rx, ry });
+    });
+  }
+  canvas.on("before:render", applyScaledBorderRadius);
+  return () => {
+    canvas.off("before:render", applyScaledBorderRadius);
+    canvas.forEachObject((obj) => {
+      if (!(obj instanceof import_fabric16.Rect)) return;
+      const base = borderRadiusBaseMap.get(obj);
+      if (base !== void 0) {
+        obj.set({ rx: base.rx, ry: base.ry });
+      }
+    });
+  };
+}
 function getBaseStrokeWidth(obj) {
   return strokeBaseMap.get(obj) ?? obj.strokeWidth ?? 0;
 }
@@ -2150,14 +2202,28 @@ function serializeCanvas(canvas, options) {
       obj.strokeWidth = base;
     }
   });
+  const appliedRadii = /* @__PURE__ */ new Map();
+  canvas.forEachObject((obj) => {
+    if (!(obj instanceof import_fabric16.Rect)) return;
+    const base = borderRadiusBaseMap.get(obj);
+    if (base !== void 0) {
+      appliedRadii.set(obj, { rx: obj.rx ?? 0, ry: obj.ry ?? 0 });
+      obj.set({ rx: base.rx, ry: base.ry });
+    }
+  });
   const json = canvas.toObject(properties);
+  delete json.backgroundColor;
   scaledWidths.forEach((scaled, obj) => {
     obj.strokeWidth = scaled;
   });
+  appliedRadii.forEach((radii, obj) => {
+    obj.set({ rx: radii.rx, ry: radii.ry });
+  });
   return json;
 }
 async function loadCanvas(canvas, json, options) {
   await canvas.loadFromJSON(json);
+  canvas.backgroundColor = "";
   if (options?.filter) {
     const toRemove = [];
     canvas.forEachObject((obj) => {
@@ -2165,11 +2231,28 @@ async function loadCanvas(canvas, json, options) {
     });
     for (const obj of toRemove) canvas.remove(obj);
   }
+  canvas.forEachObject((obj) => {
+    if (obj.originX === "center" && obj.originY === "center") return;
+    const center = obj.getCenterPoint();
+    obj.set({
+      originX: "center",
+      originY: "center",
+      left: center.x,
+      top: center.y
+    });
+    obj.setCoords();
+  });
   canvas.forEachObject((obj) => {
     obj.set(DEFAULT_CONTROL_STYLE);
     if (obj.shapeType === "circle" && obj instanceof import_fabric16.Rect) {
       restoreCircleConstraints(obj);
     }
+    if (obj instanceof import_fabric16.Rect && obj.shapeType !== "circle" && obj.data?.type !== "DEVICE") {
+      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);
+      obj.set({ rx, ry });
+    }
   });
   canvas.requestRenderAll();
   return canvas.getObjects();
@@ -2221,6 +2304,7 @@ function useEditCanvas(options) {
       if (options?.scaledStrokes !== false) {
         enableScaledStrokes(canvas);
       }
+      enableScaledBorderRadius(canvas);
       if (options?.keyboardShortcuts !== false) {
         keyboardCleanupRef.current = enableKeyboardShortcuts(canvas);
       }
@@ -2327,7 +2411,7 @@ function useEditCanvas(options) {
     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?.preserveOpacity ? { preserveOpacity: true } : void 0;
+      const resizeOpts = options?.backgroundResize !== false ? typeof options?.backgroundResize === "object" ? { ...options.backgroundResize, ...bgOpts } : { ...bgOpts } : bgOpts?.preserveContrast ? { preserveContrast: true } : void 0;
       const img = await setBackgroundImage(canvas, url, resizeOpts);
       if (options?.autoFitToBackground !== false) {
         fitViewportToBackground(canvas);
@@ -2385,7 +2469,7 @@ function useEditCanvas(options) {
      * exceeds the configured limits (opt out via `backgroundResize: false`),
      * and fits the viewport after setting if `autoFitToBackground` is enabled.
      *
-     * Pass `{ preserveOpacity: true }` to keep the current background opacity
+     * Pass `{ preserveContrast: true }` to keep the current background contrast
      * when replacing the image.
      */
     setBackground,
@@ -2398,18 +2482,10 @@ function useEditCanvas(options) {
 
 // src/hooks/useViewCanvas.ts
 var import_react3 = require("react");
-var import_fabric18 = require("fabric");
-var VIEW_BORDER_RADIUS = 4;
 function lockCanvas(canvas) {
   canvas.selection = false;
   canvas.forEachObject((obj) => {
     obj.selectable = false;
-    obj.evented = false;
-    if (obj instanceof import_fabric18.Rect && obj.shapeType !== "circle" && obj.data?.type !== "DEVICE") {
-      const rx = VIEW_BORDER_RADIUS / (obj.scaleX ?? 1);
-      const ry = VIEW_BORDER_RADIUS / (obj.scaleY ?? 1);
-      obj.set({ rx, ry });
-    }
   });
 }
 function useViewCanvas(options) {
@@ -2422,6 +2498,7 @@ function useViewCanvas(options) {
       if (options?.scaledStrokes !== false) {
         enableScaledStrokes(canvas);
       }
+      enableScaledBorderRadius(canvas);
       if (options?.panAndZoom !== false) {
         const panAndZoomOpts = typeof options?.panAndZoom === "object" ? options.panAndZoom : {};
         viewportRef.current = enablePanAndZoom(canvas, {
@@ -2671,7 +2748,7 @@ function useCanvasClick(canvasRef, onClick, options) {
 
 // src/hooks/useObjectOverlay.ts
 var import_react7 = require("react");
-var import_fabric19 = require("fabric");
+var import_fabric18 = require("fabric");
 function useObjectOverlay(canvasRef, object, options) {
   const containerRef = (0, import_react7.useRef)(null);
   const optionsRef = (0, import_react7.useRef)(options);
@@ -2688,7 +2765,7 @@ function useObjectOverlay(canvasRef, object, options) {
       const center = object.getCenterPoint();
       const actualWidth = (object.width ?? 0) * (object.scaleX ?? 1);
       const actualHeight = (object.height ?? 0) * (object.scaleY ?? 1);
-      const screenCoords = import_fabric19.util.transformPoint(center, vt);
+      const screenCoords = import_fabric18.util.transformPoint(center, vt);
       const screenWidth = actualWidth * zoom;
       const screenHeight = actualHeight * zoom;
       el.style.left = `${screenCoords.x - screenWidth / 2}px`;
@@ -2730,7 +2807,7 @@ function useObjectOverlay(canvasRef, object, options) {
 }
 
 // src/index.ts
-var import_fabric20 = require("fabric");
+var import_fabric19 = require("fabric");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Canvas,
@@ -2765,11 +2842,12 @@ var import_fabric20 = require("fabric");
   enableObjectAlignment,
   enablePanAndZoom,
   enableRotationSnap,
+  enableScaledBorderRadius,
   enableScaledStrokes,
   enableVertexEdit,
   fitViewportToBackground,
+  getBackgroundContrast,
   getBackgroundInverted,
-  getBackgroundOpacity,
   getBackgroundSrc,
   getBaseStrokeWidth,
   getSnapPoints,
@@ -2778,9 +2856,9 @@ var import_fabric20 = require("fabric");
   resetViewport,
   resizeImageUrl,
   serializeCanvas,
+  setBackgroundContrast,
   setBackgroundImage,
   setBackgroundInverted,
-  setBackgroundOpacity,
   snapCursorPoint,
   useCanvasClick,
   useCanvasEvents,