@bwp-web/canvas 0.4.2 → 0.5.0

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,
@@ -54,8 +55,9 @@ __export(index_exports, {
   enableScaledStrokes: () => enableScaledStrokes,
   enableVertexEdit: () => enableVertexEdit,
   fitViewportToBackground: () => fitViewportToBackground,
+  getBackgroundContrast: () => getBackgroundContrast,
   getBackgroundInverted: () => getBackgroundInverted,
-  getBackgroundOpacity: () => getBackgroundOpacity,
+  getBackgroundSrc: () => getBackgroundSrc,
   getBaseStrokeWidth: () => getBaseStrokeWidth,
   getSnapPoints: () => getSnapPoints,
   loadCanvas: () => loadCanvas,
@@ -63,15 +65,17 @@ __export(index_exports, {
   resetViewport: () => resetViewport,
   resizeImageUrl: () => resizeImageUrl,
   serializeCanvas: () => serializeCanvas,
+  setBackgroundContrast: () => setBackgroundContrast,
   setBackgroundImage: () => setBackgroundImage,
   setBackgroundInverted: () => setBackgroundInverted,
-  setBackgroundOpacity: () => setBackgroundOpacity,
   snapCursorPoint: () => snapCursorPoint,
   useCanvasClick: () => useCanvasClick,
   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
@@ -140,7 +173,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;
@@ -322,20 +355,68 @@ 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
       );
     },
+    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;
@@ -376,15 +462,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);
@@ -450,7 +558,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);
@@ -458,8 +566,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;
@@ -489,7 +597,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 +1492,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 +1800,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);
@@ -2041,6 +2173,7 @@ function serializeCanvas(canvas, options) {
     }
   });
   const json = canvas.toObject(properties);
+  delete json.backgroundColor;
   scaledWidths.forEach((scaled, obj) => {
     obj.strokeWidth = scaled;
   });
@@ -2055,6 +2188,17 @@ 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) {
@@ -2062,6 +2206,7 @@ async function loadCanvas(canvas, json, options) {
     }
   });
   canvas.requestRenderAll();
+  return canvas.getObjects();
 }
 
 // src/hooks/useEditCanvas.ts
@@ -2207,7 +2352,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
@@ -2216,7 +2361,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);
@@ -2247,7 +2392,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,
@@ -2272,7 +2419,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,
@@ -2337,7 +2484,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 +2550,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 +2703,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 +2777,7 @@ var import_fabric19 = require("fabric");
   FabricCanvas,
   FabricImage,
   FabricObject,
+  Point,
   Polygon,
   Rect,
   createCircle,
@@ -2592,8 +2802,9 @@ var import_fabric19 = require("fabric");
   enableScaledStrokes,
   enableVertexEdit,
   fitViewportToBackground,
+  getBackgroundContrast,
   getBackgroundInverted,
-  getBackgroundOpacity,
+  getBackgroundSrc,
   getBaseStrokeWidth,
   getSnapPoints,
   loadCanvas,
@@ -2601,14 +2812,16 @@ var import_fabric19 = require("fabric");
   resetViewport,
   resizeImageUrl,
   serializeCanvas,
+  setBackgroundContrast,
   setBackgroundImage,
   setBackgroundInverted,
-  setBackgroundOpacity,
   snapCursorPoint,
   useCanvasClick,
   useCanvasEvents,
   useCanvasTooltip,
   useEditCanvas,
-  useViewCanvas
+  useObjectOverlay,
+  useViewCanvas,
+  util
 });
 //# sourceMappingURL=index.cjs.map