@bwp-web/canvas 0.4.2 → 0.4.3

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export { useCanvasTooltip } from './hooks';
 export type { UseCanvasTooltipOptions, CanvasTooltipState } from './hooks';
 export { useCanvasClick } from './hooks';
 export type { UseCanvasClickOptions } from './hooks';
+export { useObjectOverlay } from './hooks';
+export type { UseObjectOverlayOptions } from './hooks';
 export type { Point2D, ShapeStyleOptions, SnappingOptions, InteractionModeOptions, SnappableInteractionOptions, DragBounds, ModeSetup, } from './types';
 export { createRectangle, createRectangleAtPoint, editRectangle, } from './shapes';
 export type { RectangleOptions, RectangleAtPointOptions } from './shapes';
@@ -26,7 +28,7 @@ export type { DrawToCreateOptions } from './interactions';
 export { enableVertexEdit } from './interactions';
 export type { VertexEditOptions } from './interactions';
 export { enablePanAndZoom, resetViewport } from './viewport';
-export type { ViewportController, ViewportMode, PanAndZoomOptions, } from './viewport';
+export type { ViewportController, ViewportMode, PanAndZoomOptions, PanToObjectOptions, } from './viewport';
 export { getSnapPoints, registerSnapPointExtractor } from './alignment';
 export type { SnapPointExtractor } from './alignment';
 export { enableObjectAlignment } from './alignment';
@@ -38,8 +40,8 @@ export type { CursorSnapResult, CursorSnapOptions, GuidelineStyle, } from './ali
 export { deleteObjects, enableKeyboardShortcuts } from './keyboard';
 export { enableScaledStrokes, serializeCanvas, loadCanvas, getBaseStrokeWidth, } from './serialization';
 export type { SerializeOptions, LoadCanvasOptions } from './serialization';
-export { fitViewportToBackground, setBackgroundOpacity, getBackgroundOpacity, setBackgroundInverted, getBackgroundInverted, resizeImageUrl, setBackgroundImage, } from './background';
+export { fitViewportToBackground, getBackgroundSrc, setBackgroundOpacity, getBackgroundOpacity, setBackgroundInverted, getBackgroundInverted, resizeImageUrl, setBackgroundImage, } from './background';
 export type { FitViewportOptions, ResizeResult, ResizeImageOptions, SetBackgroundImageOptions, } from './background';
 export { DEFAULT_CONTROL_STYLE, DEFAULT_SHAPE_STYLE, DEFAULT_CIRCLE_STYLE, DEFAULT_DRAG_SHAPE_STYLE, DEFAULT_GUIDELINE_SHAPE_STYLE, DEFAULT_ALIGNMENT_STYLE, } from './styles';
-export { Canvas as FabricCanvas, FabricObject, FabricImage, Rect, Polygon, } from 'fabric';
+export { Canvas as FabricCanvas, FabricObject, FabricImage, Rect, Polygon, Point, util, } from 'fabric';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,sBAAsB,CAAC;AAG9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,YAAY,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,YAAY,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAC3C,YAAY,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAGvD,YAAY,EACV,OAAO,EACP,iBAAiB,EACjB,eAAe,EACf,sBAAsB,EACtB,2BAA2B,EAC3B,UAAU,EACV,SAAS,GACV,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,eAAe,EACf,sBAAsB,EACtB,aAAa,GACd,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAE1E,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACzE,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEpE,OAAO,EACL,aAAa,EACb,oBAAoB,EACpB,qBAAqB,EACrB,yBAAyB,EACzB,WAAW,GACZ,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGxD,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC7D,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,aAAa,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AACxE,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AACpD,YAAY,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,GACf,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAGpE,OAAO,EACL,mBAAmB,EACnB,eAAe,EACf,UAAU,EACV,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAG3E,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EACd,kBAAkB,GACnB,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,6BAA6B,EAC7B,uBAAuB,GACxB,MAAM,UAAU,CAAC;AAKlB,OAAO,EACL,MAAM,IAAI,YAAY,EACtB,YAAY,EACZ,WAAW,EACX,IAAI,EACJ,OAAO,EACP,KAAK,EACL,IAAI,GACL,MAAM,QAAQ,CAAC"}

package/dist/index.js

@@ -29,27 +29,56 @@ function enableKeyboardShortcuts(canvas) {
 // src/Canvas/Canvas.tsx
 import { jsx } from "react/jsx-runtime";
 function Canvas({
-  width = 800,
-  height = 600,
+  width,
+  height,
   className,
   style,
   onReady
 }) {
   const canvasRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const isFixedSize = width !== void 0 && height !== void 0;
   useEffect(() => {
     const el = canvasRef.current;
-    if (!el) {
-      return;
-    }
-    const fabricCanvas = new FabricCanvas(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 FabricCanvas(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__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef }) });
+  const wrapperStyle = isFixedSize ? { ...style } : { width: "100%", height: "100%", ...style };
+  return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className, style: wrapperStyle, children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef }) });
 }
 
 // src/hooks/useEditCanvas.ts
@@ -57,7 +86,9 @@ import { useCallback, useEffect as useEffect2, useRef as useRef2, useState } fro
 import { Polygon as Polygon4 } from "fabric";
 
 // src/viewport.ts
-import { Point } from "fabric";
+import {
+  Point
+} from "fabric";
 
 // src/constants.ts
 var DEFAULT_MIN_ZOOM = 0.2;
@@ -259,6 +290,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);
@@ -277,6 +356,11 @@ import { FabricImage, filters } from "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;
@@ -412,7 +496,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;
@@ -1308,21 +1395,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
@@ -1602,6 +1707,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);
@@ -1996,6 +2104,7 @@ async function loadCanvas(canvas, json, options) {
     }
   });
   canvas.requestRenderAll();
+  return canvas.getObjects();
 }
 
 // src/hooks/useEditCanvas.ts
@@ -2141,7 +2250,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
@@ -2181,7 +2290,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,
@@ -2271,7 +2382,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
@@ -2337,7 +2448,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,
@@ -2488,13 +2601,75 @@ function useCanvasClick(canvasRef, onClick, options) {
   }, [canvasRef]);
 }
 
+// src/hooks/useObjectOverlay.ts
+import { useEffect as useEffect6, useRef as useRef7 } from "react";
+import { util as util4 } from "fabric";
+function useObjectOverlay(canvasRef, object, options) {
+  const containerRef = useRef7(null);
+  const optionsRef = useRef7(options);
+  optionsRef.current = options;
+  useEffect6(() => {
+    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 = util4.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
 import {
   Canvas as Canvas2,
   FabricObject as FabricObject5,
   FabricImage as FabricImage2,
   Rect as Rect7,
-  Polygon as Polygon5
+  Polygon as Polygon5,
+  Point as Point9,
+  util as util5
 } from "fabric";
 export {
   Canvas,
@@ -2507,6 +2682,7 @@ export {
   Canvas2 as FabricCanvas,
   FabricImage2 as FabricImage,
   FabricObject5 as FabricObject,
+  Point9 as Point,
   Polygon5 as Polygon,
   Rect7 as Rect,
   createCircle,
@@ -2533,6 +2709,7 @@ export {
   fitViewportToBackground,
   getBackgroundInverted,
   getBackgroundOpacity,
+  getBackgroundSrc,
   getBaseStrokeWidth,
   getSnapPoints,
   loadCanvas,
@@ -2548,6 +2725,8 @@ export {
   useCanvasEvents,
   useCanvasTooltip,
   useEditCanvas,
-  useViewCanvas
+  useObjectOverlay,
+  useViewCanvas,
+  util5 as util
 };
 //# sourceMappingURL=index.js.map