@bwp-web/canvas 0.4.2 → 0.4.3

package/dist/Canvas/Canvas.d.ts

@@ -1,7 +1,17 @@
 import { Canvas as FabricCanvas } from 'fabric';
-import { CSSProperties } from 'react';
+import { type CSSProperties } from 'react';
 export interface CanvasProps {
+    /**
+     * Canvas width in pixels. When both `width` and `height` are provided,
+     * the canvas uses fixed dimensions. When omitted, the canvas auto-fills
+     * its parent container and resizes with it.
+     */
     width?: number;
+    /**
+     * Canvas height in pixels. When both `width` and `height` are provided,
+     * the canvas uses fixed dimensions. When omitted, the canvas auto-fills
+     * its parent container and resizes with it.
+     */
     height?: number;
     className?: string;
     style?: CSSProperties;

package/dist/Canvas/Canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../src/Canvas/Canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,aAAa,EAAqB,MAAM,OAAO,CAAC;AAGzD,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,MAAM,CAAC,EACrB,KAAW,EACX,MAAY,EACZ,SAAS,EACT,KAAK,EACL,OAAO,GACR,EAAE,WAAW,2CA2Bb"}
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../src/Canvas/Canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,KAAK,aAAa,EAAqB,MAAM,OAAO,CAAC;AAG9D,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,GACR,EAAE,WAAW,2CAqEb"}

package/dist/background.d.ts

@@ -1,4 +1,9 @@
 import { Canvas as FabricCanvas, FabricImage } from 'fabric';
+/**
+ * Get the source URL of the canvas background image, or `null` if no
+ * background image is set.
+ */
+export declare function getBackgroundSrc(canvas: FabricCanvas): string | null;
 export interface FitViewportOptions {
     /**
      * Fraction of the canvas to leave as empty margin around the image.

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;AAatE,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;;;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"}

package/dist/hooks/index.d.ts

@@ -8,4 +8,6 @@ export { useCanvasTooltip } from './useCanvasTooltip';
 export type { UseCanvasTooltipOptions, CanvasTooltipState, } from './useCanvasTooltip';
 export { useCanvasClick } from './useCanvasClick';
 export type { UseCanvasClickOptions } from './useCanvasClick';
+export { useObjectOverlay } from './useObjectOverlay';
+export type { UseObjectOverlayOptions } from './useObjectOverlay';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACV,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAE9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/hooks/shared.d.ts

@@ -1,6 +1,6 @@
 import { type RefObject } from 'react';
-import { Canvas as FabricCanvas } from 'fabric';
-import { type ViewportController } from '../viewport';
+import { Canvas as FabricCanvas, type FabricObject } from 'fabric';
+import { type PanToObjectOptions, type ViewportController } from '../viewport';
 /** Sync React zoom state with the canvas zoom level. */
 export declare function syncZoom(canvasRef: RefObject<FabricCanvas | null>, setZoom: (z: number) => void): void;
 /**
@@ -11,6 +11,7 @@ export declare function createViewportActions(canvasRef: RefObject<FabricCanvas
     resetViewport: () => void;
     zoomIn: (step?: number) => void;
     zoomOut: (step?: number) => void;
+    panToObject: (object: FabricObject, panOpts?: PanToObjectOptions) => void;
 };
 /**
  * Resolve whether alignment should be enabled based on the master toggle

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

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/hooks/shared.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,aAAa,CAAC;AAGrB,wDAAwD;AACxD,wBAAgB,QAAQ,CACtB,SAAS,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,EACzC,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,GAC3B,IAAI,CAGN;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,EACzC,WAAW,EAAE,SAAS,CAAC,kBAAkB,GAAG,IAAI,CAAC,EACjD,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;;oBAaL,MAAM;qBAKL,MAAM;EAM/B;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,eAAe,EAAE,OAAO,GAAG,SAAS,EACpC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAC1C,OAAO,CAGT"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/hooks/shared.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AACnE,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACxB,MAAM,aAAa,CAAC;AAGrB,wDAAwD;AACxD,wBAAgB,QAAQ,CACtB,SAAS,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,EACzC,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,GAC3B,IAAI,CAGN;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,EACzC,WAAW,EAAE,SAAS,CAAC,kBAAkB,GAAG,IAAI,CAAC,EACjD,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;;oBAaL,MAAM;qBAKL,MAAM;0BAKD,YAAY,YAAY,kBAAkB;EAKxE;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,eAAe,EAAE,OAAO,GAAG,SAAS,EACpC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAC1C,OAAO,CAGT"}

package/dist/hooks/useEditCanvas.d.ts

@@ -103,6 +103,8 @@ export declare function useEditCanvas(options?: UseEditCanvasOptions): {
         zoomIn: (step?: number) => void;
         /** Zoom out from the canvas center. Default step: 0.2. */
         zoomOut: (step?: number) => void;
+        /** Pan the viewport to center on a specific object. */
+        panToObject: (object: FabricObject, panOpts?: import("../viewport").PanToObjectOptions) => void;
     };
     /** Whether vertex edit mode is currently active (reactive). */
     isEditingVertices: 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;;;IAG5D,+DAA+D;;IAE/D;;;;;;;;;;;;;;OAcG;qBAnP+B,SAAS,GAAG,IAAI;IAqPlD;;;;;;;OAOG;yBAzES,MAAM,WAAW;QAAE,eAAe,CAAC,EAAE,OAAO,CAAA;KAAE;IA2E1D,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;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"}

package/dist/hooks/useObjectOverlay.d.ts

@@ -0,0 +1,49 @@
+import { type RefObject } from 'react';
+import type { Canvas as FabricCanvas, FabricObject } from 'fabric';
+export interface UseObjectOverlayOptions {
+    /**
+     * Automatically scale the overlay content so it fits within the object
+     * bounds at the current zoom level.
+     * Default: false.
+     */
+    autoScaleContent?: boolean;
+    /**
+     * CSS selector for a text element inside the overlay. When
+     * `autoScaleContent` is enabled and the computed scale drops below a
+     * threshold, elements matching this selector are hidden (via
+     * `display: none`) so only icons remain visible.
+     * Default: undefined (no text hiding).
+     */
+    textSelector?: string;
+    /**
+     * Minimum content scale at which `textSelector` elements remain visible.
+     * Below this threshold, matched elements are hidden.
+     * Default: 0.5.
+     */
+    textMinScale?: number;
+}
+/**
+ * Position a DOM element over a Fabric canvas object, kept in sync with
+ * pan, zoom, move, scale, and rotate transforms.
+ *
+ * Returns a ref to attach to the overlay container element. The element
+ * must be positioned absolutely within a relative-positioned parent that
+ * wraps the `<Canvas>` component.
+ *
+ * @example
+ * ```tsx
+ * const overlayRef = useObjectOverlay(canvasRef, object, {
+ *   autoScaleContent: true,
+ *   textSelector: '.desk-text',
+ * });
+ *
+ * return (
+ *   <div ref={overlayRef} style={{ position: 'absolute', pointerEvents: 'none' }}>
+ *     <CanvasDeskIcon />
+ *     <span className="desk-text">{name}</span>
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useObjectOverlay(canvasRef: RefObject<FabricCanvas | null>, object: FabricObject | null | undefined, options?: UseObjectOverlayOptions): RefObject<HTMLDivElement | null>;
+//# sourceMappingURL=useObjectOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useObjectOverlay.d.ts","sourceRoot":"","sources":["../../src/hooks/useObjectOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAGnE,MAAM,WAAW,uBAAuB;IACtC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,EACzC,MAAM,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,EACvC,OAAO,CAAC,EAAE,uBAAuB,GAChC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAuElC"}

package/dist/hooks/useViewCanvas.d.ts

@@ -1,4 +1,4 @@
-import { Canvas as FabricCanvas } from 'fabric';
+import { Canvas as FabricCanvas, type FabricObject } from 'fabric';
 import { type PanAndZoomOptions } from '../viewport';
 /** Visual properties that can be updated on view-canvas objects. */
 export interface ViewObjectStyle {
@@ -55,6 +55,8 @@ export declare function useViewCanvas(options?: UseViewCanvasOptions): {
         zoomIn: (step?: number) => void;
         /** Zoom out from the canvas center. Default step: 0.2. */
         zoomOut: (step?: number) => void;
+        /** Pan the viewport to center on a specific object. */
+        panToObject: (object: FabricObject, panOpts?: import("../viewport").PanToObjectOptions) => void;
     };
     /** Update a single object's visual style by its `data.id`. */
     setObjectStyle: (id: string, style: ViewObjectStyle) => void;

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,EAA2B,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;;;IAG5D,8DAA8D;yBA/DxB,MAAM,SAAS,eAAe;IAiEpE,sFAAsF;8BAxD7E,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC;IA0DxC,qEAAqE;iCAnC9D,MAAM,SAAS,eAAe;EAsCxC"}
+{"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"}

package/dist/index.cjs

@@ -27,11 +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_fabric19.Canvas,
-  FabricImage: () => import_fabric19.FabricImage,
-  FabricObject: () => import_fabric19.FabricObject,
-  Polygon: () => import_fabric19.Polygon,
-  Rect: () => import_fabric19.Rect,
+  FabricCanvas: () => import_fabric20.Canvas,
+  FabricImage: () => import_fabric20.FabricImage,
+  FabricObject: () => import_fabric20.FabricObject,
+  Point: () => import_fabric20.Point,
+  Polygon: () => import_fabric20.Polygon,
+  Rect: () => import_fabric20.Rect,
   createCircle: () => createCircle,
   createCircleAtPoint: () => createCircleAtPoint,
   createPolygon: () => createPolygon,
@@ -56,6 +57,7 @@ __export(index_exports, {
   fitViewportToBackground: () => fitViewportToBackground,
   getBackgroundInverted: () => getBackgroundInverted,
   getBackgroundOpacity: () => getBackgroundOpacity,
+  getBackgroundSrc: () => getBackgroundSrc,
   getBaseStrokeWidth: () => getBaseStrokeWidth,
   getSnapPoints: () => getSnapPoints,
   loadCanvas: () => loadCanvas,
@@ -71,7 +73,9 @@ __export(index_exports, {
   useCanvasEvents: () => useCanvasEvents,
   useCanvasTooltip: () => useCanvasTooltip,
   useEditCanvas: () => useEditCanvas,
-  useViewCanvas: () => useViewCanvas
+  useObjectOverlay: () => useObjectOverlay,
+  useViewCanvas: () => useViewCanvas,
+  util: () => import_fabric20.util
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -106,27 +110,56 @@ function enableKeyboardShortcuts(canvas) {
 // src/Canvas/Canvas.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function Canvas({
-  width = 800,
-  height = 600,
+  width,
+  height,
   className,
   style,
   onReady
 }) {
   const canvasRef = (0, import_react.useRef)(null);
+  const wrapperRef = (0, import_react.useRef)(null);
+  const isFixedSize = width !== void 0 && height !== void 0;
   (0, import_react.useEffect)(() => {
     const el = canvasRef.current;
-    if (!el) {
-      return;
-    }
-    const fabricCanvas = new import_fabric2.Canvas(el, { width, height });
+    const wrapper = wrapperRef.current;
+    if (!el || !wrapper) return;
+    const initialWidth = isFixedSize ? width : wrapper.clientWidth || 800;
+    const initialHeight = isFixedSize ? height : wrapper.clientHeight || 600;
+    const fabricCanvas = new import_fabric2.Canvas(el, {
+      width: initialWidth,
+      height: initialHeight
+    });
     onReady?.(fabricCanvas);
     const cleanupShortcuts = enableKeyboardShortcuts(fabricCanvas);
+    let observer;
+    let rafId = 0;
+    if (!isFixedSize) {
+      let currentWidth = initialWidth;
+      let currentHeight = initialHeight;
+      observer = new ResizeObserver((entries) => {
+        cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(() => {
+          const entry = entries[0];
+          if (!entry) return;
+          const { width: newWidth, height: newHeight } = entry.contentRect;
+          if (newWidth > 0 && newHeight > 0 && (newWidth !== currentWidth || newHeight !== currentHeight)) {
+            currentWidth = newWidth;
+            currentHeight = newHeight;
+            fabricCanvas.setDimensions({ width: newWidth, height: newHeight });
+          }
+        });
+      });
+      observer.observe(wrapper);
+    }
     return () => {
+      cancelAnimationFrame(rafId);
+      observer?.disconnect();
       cleanupShortcuts();
       fabricCanvas.dispose();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("canvas", { ref: canvasRef }) });
+  const wrapperStyle = isFixedSize ? { ...style } : { width: "100%", height: "100%", ...style };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: wrapperRef, className, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("canvas", { ref: canvasRef }) });
 }
 
 // src/hooks/useEditCanvas.ts
@@ -336,6 +369,54 @@ function enablePanAndZoom(canvas, options) {
         z
       );
     },
+    panToObject(object, panOpts) {
+      const zoom = canvas.getZoom();
+      const objectCenter = object.getCenterPoint();
+      const canvasCenterX = canvas.getWidth() / 2;
+      const canvasCenterY = canvas.getHeight() / 2;
+      const targetX = canvasCenterX - objectCenter.x * zoom;
+      const targetY = canvasCenterY - objectCenter.y * zoom;
+      if (!panOpts?.animate) {
+        const vt2 = canvas.viewportTransform;
+        if (!vt2) return;
+        canvas.setViewportTransform([
+          vt2[0],
+          vt2[1],
+          vt2[2],
+          vt2[3],
+          targetX,
+          targetY
+        ]);
+        return;
+      }
+      const duration = panOpts.duration ?? 300;
+      const vt = canvas.viewportTransform;
+      if (!vt) return;
+      const startX = vt[4];
+      const startY = vt[5];
+      const startTime = performance.now();
+      function step(now) {
+        const elapsed = now - startTime;
+        const t = Math.min(elapsed / duration, 1);
+        const eased = 1 - Math.pow(1 - t, 3);
+        const currentX = startX + (targetX - startX) * eased;
+        const currentY = startY + (targetY - startY) * eased;
+        const currentVt = canvas.viewportTransform;
+        if (!currentVt) return;
+        canvas.setViewportTransform([
+          currentVt[0],
+          currentVt[1],
+          currentVt[2],
+          currentVt[3],
+          currentX,
+          currentY
+        ]);
+        if (t < 1) {
+          requestAnimationFrame(step);
+        }
+      }
+      requestAnimationFrame(step);
+    },
     cleanup() {
       canvas.off("mouse:wheel", handleWheel);
       canvas.off("mouse:down", panHandlers.handleMouseDown);
@@ -354,6 +435,11 @@ var import_fabric4 = require("fabric");
 function getBackgroundImage(canvas) {
   return canvas.backgroundImage;
 }
+function getBackgroundSrc(canvas) {
+  const bg = getBackgroundImage(canvas);
+  if (!bg) return null;
+  return bg.getSrc() || null;
+}
 function fitViewportToBackground(canvas, options) {
   const bg = getBackgroundImage(canvas);
   if (!bg) return;
@@ -489,7 +575,10 @@ function createViewportActions(canvasRef, viewportRef, setZoom) {
     viewportRef.current?.zoomOut(step);
     syncZoom(canvasRef, setZoom);
   };
-  return { resetViewport: resetViewport2, zoomIn, zoomOut };
+  const panToObject = (object, panOpts) => {
+    viewportRef.current?.panToObject(object, panOpts);
+  };
+  return { resetViewport: resetViewport2, zoomIn, zoomOut, panToObject };
 }
 function resolveAlignmentEnabled(enableAlignment, alignmentProp) {
   if (enableAlignment !== void 0) return enableAlignment;
@@ -1381,21 +1470,39 @@ function enableDragToCreate(canvas, factory, options) {
     options?.onCreated?.(obj);
     previewRect = null;
   };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.stopImmediatePropagation();
+      e.preventDefault();
+      cleanup("cancel");
+    }
+  };
   canvas.on("mouse:down", handleMouseDown);
   canvas.on("mouse:move", handleMouseMove);
   canvas.on("mouse:up", handleMouseUp);
-  return () => {
+  document.addEventListener("keydown", handleKeyDown, true);
+  let exited = false;
+  function cleanup(reason) {
+    if (exited) return;
+    exited = true;
     canvas.off("mouse:down", handleMouseDown);
     canvas.off("mouse:move", handleMouseMove);
     canvas.off("mouse:up", handleMouseUp);
+    document.removeEventListener("keydown", handleKeyDown, true);
     shiftTracker.cleanup();
     snapping.cleanup();
     if (isDrawing && previewRect) {
+      snapping.excludeSet.delete(previewRect);
       canvas.remove(previewRect);
+      canvas.selection = previousSelection;
       canvas.requestRenderAll();
     }
     restoreViewport(options?.viewport);
-  };
+    if (reason === "cancel") {
+      options?.onCancel?.();
+    }
+  }
+  return () => cleanup();
 }
 
 // src/interactions/drawToCreate.ts
@@ -1671,6 +1778,9 @@ function enableDrawToCreate(canvas, options) {
     removePreviewElements();
     snapping.clearSnapResult();
     const polygon = createPolygonFromVertices(canvas, points, options?.style);
+    if (options?.data) {
+      polygon.data = options.data;
+    }
     canvas.selection = previousSelection;
     canvas.requestRenderAll();
     restoreViewport(options?.viewport);
@@ -2062,6 +2172,7 @@ async function loadCanvas(canvas, json, options) {
     }
   });
   canvas.requestRenderAll();
+  return canvas.getObjects();
 }
 
 // src/hooks/useEditCanvas.ts
@@ -2207,7 +2318,7 @@ function useEditCanvas(options) {
     viewportRef.current?.setMode(mode);
     setViewportModeState(mode);
   }, []);
-  const { resetViewport: resetViewport2, zoomIn, zoomOut } = createViewportActions(
+  const { resetViewport: resetViewport2, zoomIn, zoomOut, panToObject } = createViewportActions(
     canvasRef,
     viewportRef,
     setZoom
@@ -2247,7 +2358,9 @@ function useEditCanvas(options) {
       /** Zoom in toward the canvas center. Default step: 0.2. */
       zoomIn,
       /** Zoom out from the canvas center. Default step: 0.2. */
-      zoomOut
+      zoomOut,
+      /** Pan the viewport to center on a specific object. */
+      panToObject
     },
     /** Whether vertex edit mode is currently active (reactive). */
     isEditingVertices,
@@ -2337,7 +2450,7 @@ function useViewCanvas(options) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const { resetViewport: resetViewport2, zoomIn, zoomOut } = createViewportActions(
+  const { resetViewport: resetViewport2, zoomIn, zoomOut, panToObject } = createViewportActions(
     canvasRef,
     viewportRef,
     setZoom
@@ -2403,7 +2516,9 @@ function useViewCanvas(options) {
       /** Zoom in toward the canvas center. Default step: 0.2. */
       zoomIn,
       /** Zoom out from the canvas center. Default step: 0.2. */
-      zoomOut
+      zoomOut,
+      /** Pan the viewport to center on a specific object. */
+      panToObject
     },
     /** Update a single object's visual style by its `data.id`. */
     setObjectStyle,
@@ -2554,8 +2669,68 @@ function useCanvasClick(canvasRef, onClick, options) {
   }, [canvasRef]);
 }
 
-// src/index.ts
+// src/hooks/useObjectOverlay.ts
+var import_react7 = require("react");
 var import_fabric19 = require("fabric");
+function useObjectOverlay(canvasRef, object, options) {
+  const containerRef = (0, import_react7.useRef)(null);
+  const optionsRef = (0, import_react7.useRef)(options);
+  optionsRef.current = options;
+  (0, import_react7.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !object) return;
+    function update() {
+      const el = containerRef.current;
+      if (!el || !canvas || !object) return;
+      const zoom = canvas.getZoom();
+      const vt = canvas.viewportTransform;
+      if (!vt) return;
+      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 screenWidth = actualWidth * zoom;
+      const screenHeight = actualHeight * zoom;
+      el.style.left = `${screenCoords.x - screenWidth / 2}px`;
+      el.style.top = `${screenCoords.y - screenHeight / 2}px`;
+      el.style.width = `${screenWidth}px`;
+      el.style.height = `${screenHeight}px`;
+      const angle = object.angle ?? 0;
+      el.style.rotate = angle !== 0 ? `${angle}deg` : "";
+      const opts = optionsRef.current;
+      if (opts?.autoScaleContent) {
+        const contentScale = Math.min(screenWidth, screenHeight) / 100;
+        const clampedScale = Math.max(0.1, Math.min(contentScale, 2));
+        el.style.setProperty("--overlay-scale", String(clampedScale));
+        if (opts.textSelector) {
+          const textMinScale = opts.textMinScale ?? 0.5;
+          const textEls = el.querySelectorAll(opts.textSelector);
+          const display = clampedScale < textMinScale ? "none" : "";
+          textEls.forEach((t) => {
+            t.style.display = display;
+          });
+        }
+      }
+    }
+    update();
+    canvas.on("after:render", update);
+    canvas.on("mouse:wheel", update);
+    object.on("moving", update);
+    object.on("scaling", update);
+    object.on("rotating", update);
+    return () => {
+      canvas.off("after:render", update);
+      canvas.off("mouse:wheel", update);
+      object.off("moving", update);
+      object.off("scaling", update);
+      object.off("rotating", update);
+    };
+  }, [canvasRef, object]);
+  return containerRef;
+}
+
+// src/index.ts
+var import_fabric20 = require("fabric");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Canvas,
@@ -2568,6 +2743,7 @@ var import_fabric19 = require("fabric");
   FabricCanvas,
   FabricImage,
   FabricObject,
+  Point,
   Polygon,
   Rect,
   createCircle,
@@ -2594,6 +2770,7 @@ var import_fabric19 = require("fabric");
   fitViewportToBackground,
   getBackgroundInverted,
   getBackgroundOpacity,
+  getBackgroundSrc,
   getBaseStrokeWidth,
   getSnapPoints,
   loadCanvas,
@@ -2609,6 +2786,8 @@ var import_fabric19 = require("fabric");
   useCanvasEvents,
   useCanvasTooltip,
   useEditCanvas,
-  useViewCanvas
+  useObjectOverlay,
+  useViewCanvas,
+  util
 });
 //# sourceMappingURL=index.cjs.map