@bwp-web/canvas 0.4.0

package/dist/hooks/useViewCanvas.d.ts

@@ -0,0 +1,66 @@
+import { Canvas as FabricCanvas } from 'fabric';
+import { type PanAndZoomOptions } from '../viewport';
+/** Visual properties that can be updated on view-canvas objects. */
+export interface ViewObjectStyle {
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    opacity?: number;
+    visible?: boolean;
+}
+export interface UseViewCanvasOptions {
+    /** Configure pan and zoom. Pass `false` to disable, or options to customize. Default: enabled. */
+    panAndZoom?: boolean | PanAndZoomOptions;
+    /**
+     * Keep stroke widths visually constant as the user zooms in/out.
+     * Pass `false` to disable. Default: enabled.
+     */
+    scaledStrokes?: boolean;
+    /** Called after the canvas is initialized and viewport is set up. */
+    onReady?: (canvas: FabricCanvas) => void | Promise<void>;
+    /**
+     * Automatically fit the viewport to the background image after `onReady`
+     * completes, if a background image is present. Also applies when
+     * `viewport.reset` is called while a background image is set.
+     * Pass `false` to disable. Default: enabled.
+     */
+    autoFitToBackground?: boolean;
+}
+/**
+ * Hook that provides a view-only canvas experience.
+ *
+ * Like {@link useEditCanvas} but without create, edit, delete, or selection
+ * capabilities. The canvas is always in pan mode — click and drag to pan,
+ * scroll to zoom.
+ *
+ * @example
+ * ```tsx
+ * const canvas = useViewCanvas();
+ *
+ * return <Canvas onReady={canvas.onReady} width={800} height={600} />;
+ * ```
+ */
+export declare function useViewCanvas(options?: UseViewCanvasOptions): {
+    /** Pass this to `<Canvas onReady={...} />` */
+    onReady: (canvas: FabricCanvas) => void;
+    /** Ref to the underlying Fabric canvas instance. */
+    canvasRef: import("react").RefObject<FabricCanvas | null>;
+    /** Current zoom level (reactive). */
+    zoom: number;
+    /** Viewport controls. */
+    viewport: {
+        /** Reset viewport to default (no pan, zoom = 1), or fit to background if one is set. */
+        reset: () => void;
+        /** Zoom in toward the canvas center. Default step: 0.2. */
+        zoomIn: (step?: number) => void;
+        /** Zoom out from the canvas center. Default step: 0.2. */
+        zoomOut: (step?: number) => void;
+    };
+    /** Update a single object's visual style by its `data.id`. */
+    setObjectStyle: (id: string, style: ViewObjectStyle) => void;
+    /** Batch-update multiple objects' visual styles in one render. Keyed by `data.id`. */
+    setObjectStyles: (styles: Record<string, ViewObjectStyle>) => void;
+    /** Apply a visual style to all objects whose `data.type` matches. */
+    setObjectStyleByType: (type: string, style: ViewObjectStyle) => void;
+};
+//# sourceMappingURL=useViewCanvas.d.ts.map

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

@@ -0,0 +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"}