@bwp-web/canvas 0.4.1 → 0.4.3

package/dist/interactions/dragToCreate.d.ts

@@ -8,6 +8,8 @@ export interface DragToCreateOptions extends SnappableInteractionOptions {
     };
     /** When true, constrain the drag to a 1:1 aspect ratio (square). */
     constrainToSquare?: boolean;
+    /** Called when the user cancels the drag via Escape. */
+    onCancel?: () => void;
 }
 /**
  * Enable drag-to-create mode.

package/dist/interactions/dragToCreate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dragToCreate.d.ts","sourceRoot":"","sources":["../../src/interactions/dragToCreate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,YAAY,EAAQ,MAAM,QAAQ,CAAC;AACpE,OAAO,KAAK,EACV,UAAU,EAEV,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,UAAU,CAAC;AAMlB,MAAM,WAAW,mBAAoB,SAAQ,2BAA2B;IACtE,gEAAgE;IAChE,YAAY,CAAC,EAAE,iBAAiB,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,KAAK,YAAY,EACnE,OAAO,CAAC,EAAE,mBAAmB,GAC5B,MAAM,IAAI,CA+HZ"}
+{"version":3,"file":"dragToCreate.d.ts","sourceRoot":"","sources":["../../src/interactions/dragToCreate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,YAAY,EAAQ,MAAM,QAAQ,CAAC;AACpE,OAAO,KAAK,EACV,UAAU,EAEV,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,UAAU,CAAC;AAMlB,MAAM,WAAW,mBAAoB,SAAQ,2BAA2B;IACtE,gEAAgE;IAChE,YAAY,CAAC,EAAE,iBAAiB,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,KAAK,YAAY,EACnE,OAAO,CAAC,EAAE,mBAAmB,GAC5B,MAAM,IAAI,CAuJZ"}

package/dist/interactions/drawToCreate.d.ts

@@ -1,9 +1,15 @@
-import { Canvas as FabricCanvas } from 'fabric';
+import { Canvas as FabricCanvas, FabricObject } from 'fabric';
 import type { SnappableInteractionOptions } from '../types';
 import { type PolygonStyleOptions } from '../shapes';
 export interface DrawToCreateOptions extends SnappableInteractionOptions {
     /** Style applied to the polygon being drawn. */
     style?: PolygonStyleOptions;
+    /**
+     * Metadata to attach to the created polygon. If provided, this is set on
+     * the polygon's `data` property after creation. Takes precedence over
+     * `style.data` if both are specified.
+     */
+    data?: FabricObject['data'];
     /**
      * Snap vertex positions to multiples of `interval` degrees when Shift is
      * held while placing a vertex. The angle is measured relative to the

package/dist/interactions/drawToCreate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawToCreate.d.ts","sourceRoot":"","sources":["../../src/interactions/drawToCreate.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,IAAI,YAAY,EAKvB,MAAM,QAAQ,CAAC;AAChB,OAAO,KAAK,EAAW,2BAA2B,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAahF,MAAM,WAAW,mBAAoB,SAAQ,2BAA2B;IACtE,gDAAgD;IAChD,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA8ED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,MAAM,IAAI,CA0OZ"}
+{"version":3,"file":"drawToCreate.d.ts","sourceRoot":"","sources":["../../src/interactions/drawToCreate.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,IAAI,YAAY,EAEtB,YAAY,EAGb,MAAM,QAAQ,CAAC;AAChB,OAAO,KAAK,EAAW,2BAA2B,EAAE,MAAM,UAAU,CAAC;AACrE,OAAO,EAA6B,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAahF,MAAM,WAAW,mBAAoB,SAAQ,2BAA2B;IACtE,gDAAgD;IAChD,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B;;;;OAIG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA8ED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,MAAM,IAAI,CA6OZ"}

package/dist/serialization.d.ts

@@ -42,11 +42,22 @@ export declare function getBaseStrokeWidth(obj: FabricObject): number;
  *   intended visual stroke width, not the zoom-adjusted one.
  */
 export declare function serializeCanvas(canvas: FabricCanvas, options?: SerializeOptions): object;
+/**
+ * Options for {@link loadCanvas}.
+ */
+export interface LoadCanvasOptions {
+    /**
+     * If provided, objects for which this function returns `false` are removed
+     * from the canvas after loading. Useful for filtering out objects whose IDs
+     * no longer exist in the application's data model.
+     */
+    filter?: (obj: FabricObject) => boolean;
+}
 /**
  * Load a canvas from a previously serialized JSON object (from {@link serializeCanvas}).
  *
  * Clears the canvas and restores all objects, then requests a re-render.
  * The returned promise resolves once the canvas is fully loaded.
  */
-export declare function loadCanvas(canvas: FabricCanvas, json: object): Promise<void>;
+export declare function loadCanvas(canvas: FabricCanvas, json: object, options?: LoadCanvasOptions): Promise<FabricObject[]>;
 //# sourceMappingURL=serialization.d.ts.map

package/dist/serialization.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"serialization.d.ts","sourceRoot":"","sources":["../src/serialization.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAQ,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AAWzE;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,IAAI,CA2BpE;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,YAAY,GAAG,MAAM,CAE5D;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,gBAAgB,GACzB,MAAM,CAiCR;AAED;;;;;GAKG;AACH,wBAAsB,UAAU,CAC9B,MAAM,EAAE,YAAY,EACpB,IAAI,EAAE,MAAM,GACX,OAAO,CAAC,IAAI,CAAC,CAaf"}
+{"version":3,"file":"serialization.d.ts","sourceRoot":"","sources":["../src/serialization.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAQ,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AAWzE;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,IAAI,CA2BpE;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,YAAY,GAAG,MAAM,CAE5D;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,gBAAgB,GACzB,MAAM,CAiCR;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,OAAO,CAAC;CACzC;AAED;;;;;GAKG;AACH,wBAAsB,UAAU,CAC9B,MAAM,EAAE,YAAY,EACpB,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,iBAAiB,GAC1B,OAAO,CAAC,YAAY,EAAE,CAAC,CAyBzB"}

package/dist/types.d.ts

@@ -11,6 +11,11 @@ export interface ShapeStyleOptions {
     fill?: string;
     stroke?: string;
     strokeWidth?: number;
+    /** Optional metadata to attach to the created object. */
+    data?: {
+        type: string;
+        id: string;
+    };
 }
 /** Snapping configuration used by interaction modes (dragToCreate, drawToCreate). */
 export type SnappingOptions = boolean | {

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEjE,yBAAyB;AACzB,MAAM,MAAM,OAAO,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/C,2DAA2D;AAC3D,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,qFAAqF;AACrF,MAAM,MAAM,eAAe,GACvB,OAAO,GACP;IACE,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAEN,mEAAmE;AACnE,MAAM,WAAW,sBAAsB;IACrC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAED,iEAAiE;AACjE,MAAM,WAAW,2BAA4B,SAAQ,sBAAsB;IACzE,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,uDAAuD;AACvD,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,6EAA6E;AAC7E,MAAM,MAAM,SAAS,GAAG,CACtB,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,kBAAkB,GAAG,SAAS,KACrC,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,YAAY,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AACnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAEjE,yBAAyB;AACzB,MAAM,MAAM,OAAO,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/C,2DAA2D;AAC3D,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;CACrC;AAED,qFAAqF;AACrF,MAAM,MAAM,eAAe,GACvB,OAAO,GACP;IACE,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAEN,mEAAmE;AACnE,MAAM,WAAW,sBAAsB;IACrC,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAED,iEAAiE;AACjE,MAAM,WAAW,2BAA4B,SAAQ,sBAAsB;IACzE,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,uDAAuD;AACvD,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,6EAA6E;AAC7E,MAAM,MAAM,SAAS,GAAG,CACtB,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,kBAAkB,GAAG,SAAS,KACrC,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC"}

package/dist/viewport.d.ts

@@ -1,5 +1,11 @@
-import { Canvas as FabricCanvas } from 'fabric';
+import { Canvas as FabricCanvas, type FabricObject } from 'fabric';
 export type ViewportMode = 'select' | 'pan';
+export interface PanToObjectOptions {
+    /** Animate the pan with an easing transition. Default: false. */
+    animate?: boolean;
+    /** Animation duration in milliseconds when `animate` is true. Default: 300. */
+    duration?: number;
+}
 export interface PanAndZoomOptions {
     /** Minimum zoom level (default: 0.2) */
     minZoom?: number;
@@ -27,6 +33,11 @@ export interface ViewportController {
      * Respects the configured min/max zoom bounds. Default step: 0.2.
      */
     zoomOut: (step?: number) => void;
+    /**
+     * Pan the viewport so the given object is centered on the canvas.
+     * Optionally animate the transition.
+     */
+    panToObject: (object: FabricObject, options?: PanToObjectOptions) => void;
     /** Remove all event listeners. */
     cleanup: () => void;
 }

package/dist/viewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewport.d.ts","sourceRoot":"","sources":["../src/viewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAwB,MAAM,QAAQ,CAAC;AAQtE,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE5C,MAAM,WAAW,iBAAiB;IAChC,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,WAAW,CAAC,EAAE,YAAY,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,OAAO,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACtC,qCAAqC;IACrC,OAAO,EAAE,MAAM,YAAY,CAAC;IAC5B,2EAA2E;IAC3E,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;OAGG;IACH,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,kCAAkC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA0MD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,kBAAkB,CAwEpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAExD"}
+{"version":3,"file":"viewport.d.ts","sourceRoot":"","sources":["../src/viewport.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,IAAI,YAAY,EACtB,KAAK,YAAY,EAGlB,MAAM,QAAQ,CAAC;AAQhB,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE5C,MAAM,WAAW,kBAAkB;IACjC,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,WAAW,CAAC,EAAE,YAAY,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,OAAO,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACtC,qCAAqC;IACrC,OAAO,EAAE,MAAM,YAAY,CAAC;IAC5B,2EAA2E;IAC3E,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;OAGG;IACH,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,WAAW,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC1E,kCAAkC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AA0MD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,YAAY,EACpB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,kBAAkB,CAkIpB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,CAExD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bwp-web/canvas",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -20,7 +20,9 @@
   "files": [
     "dist"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "./src/fabricAugmentation.ts"
+  ],
   "scripts": {
     "build": "tsup && tsc -p tsconfig.build.json",
     "build:types": "tsc -p tsconfig.build.json",
@@ -30,18 +32,17 @@
     "clean": "rm -rf dist node_modules .turbo",
     "prepublishOnly": "npm run build"
   },
-  "dependencies": {
-    "fabric": "^7.2.0"
-  },
   "peerDependencies": {
     "@bwp-web/styles": "*",
     "@mui/material": ">=7.0.0",
+    "fabric": "^7.2.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@bwp-web/eslint-config": "*",
     "@bwp-web/styles": "*",
+    "fabric": "^7.2.0",
     "@types/react": "^19.1.0",
     "eslint": "^9.39.2",
     "prettier": "^3.8.1",