@bwp-web/canvas 0.4.0 → 0.4.2

package/dist/index.d.ts

@@ -5,6 +5,12 @@ export { useEditCanvas } from './hooks';
 export type { UseEditCanvasOptions } from './hooks';
 export { useViewCanvas } from './hooks';
 export type { UseViewCanvasOptions, ViewObjectStyle } from './hooks';
+export { useCanvasEvents } from './hooks';
+export type { CanvasEventHandlers } from './hooks';
+export { useCanvasTooltip } from './hooks';
+export type { UseCanvasTooltipOptions, CanvasTooltipState } from './hooks';
+export { useCanvasClick } from './hooks';
+export type { UseCanvasClickOptions } 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';
@@ -31,8 +37,9 @@ export { snapCursorPoint } from './alignment';
 export type { CursorSnapResult, CursorSnapOptions, GuidelineStyle, } from './alignment';
 export { deleteObjects, enableKeyboardShortcuts } from './keyboard';
 export { enableScaledStrokes, serializeCanvas, loadCanvas, getBaseStrokeWidth, } from './serialization';
-export type { SerializeOptions } from './serialization';
+export type { SerializeOptions, LoadCanvasOptions } from './serialization';
 export { fitViewportToBackground, setBackgroundOpacity, getBackgroundOpacity, setBackgroundInverted, getBackgroundInverted, resizeImageUrl, setBackgroundImage, } from './background';
-export type { FitViewportOptions, ResizeResult, ResizeImageOptions, } 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';
 //# 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":"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;AAGrE,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,GAClB,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,MAAM,iBAAiB,CAAC;AAGxD,OAAO,EACL,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EACd,kBAAkB,GACnB,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,GACnB,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,6BAA6B,EAC7B,uBAAuB,GACxB,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,3 +1,6 @@
+// src/fabricAugmentation.ts
+import "fabric";
+
 // src/Canvas/Canvas.tsx
 import { Canvas as FabricCanvas } from "fabric";
 import { useEffect, useRef } from "react";
@@ -369,14 +372,18 @@ function resizeImageUrl(url, options) {
     img.src = url;
   });
 }
-async function setBackgroundImage(canvas, url, resize) {
+async function setBackgroundImage(canvas, url, options) {
+  const prevOpacity = options?.preserveOpacity ? getBackgroundOpacity(canvas) : void 0;
   let imageUrl = url;
-  if (resize !== void 0) {
-    const result = await resizeImageUrl(url, resize);
+  if (options !== void 0) {
+    const result = await resizeImageUrl(url, options);
     imageUrl = result.url;
   }
   const img = await FabricImage.fromURL(imageUrl, { crossOrigin: "anonymous" });
   canvas.backgroundImage = img;
+  if (prevOpacity !== void 0 && prevOpacity !== 1) {
+    img.set("opacity", prevOpacity);
+  }
   canvas.requestRenderAll();
   return img;
 }
@@ -1973,8 +1980,15 @@ function serializeCanvas(canvas, options) {
   });
   return json;
 }
-async function loadCanvas(canvas, json) {
+async function loadCanvas(canvas, json, options) {
   await canvas.loadFromJSON(json);
+  if (options?.filter) {
+    const toRemove = [];
+    canvas.forEachObject((obj) => {
+      if (!options.filter(obj)) toRemove.push(obj);
+    });
+    for (const obj of toRemove) canvas.remove(obj);
+  }
   canvas.forEachObject((obj) => {
     obj.set(DEFAULT_CONTROL_STYLE);
     if (obj.shapeType === "circle" && obj instanceof Rect5) {
@@ -1997,6 +2011,7 @@ function useEditCanvas(options) {
   const [selected, setSelected] = useState([]);
   const [viewportMode, setViewportModeState] = useState("select");
   const [isEditingVertices, setIsEditingVertices] = useState(false);
+  const [isDirty, setIsDirty] = useState(false);
   const setMode = useCallback((setup) => {
     vertexEditCleanupRef.current?.();
     vertexEditCleanupRef.current = null;
@@ -2067,6 +2082,11 @@ function useEditCanvas(options) {
       canvas.on("selection:cleared", () => {
         setSelected([]);
       });
+      if (options?.trackChanges) {
+        canvas.on("object:added", () => setIsDirty(true));
+        canvas.on("object:removed", () => setIsDirty(true));
+        canvas.on("object:modified", () => setIsDirty(true));
+      }
       if (options?.vertexEdit !== false) {
         const vertexOpts = typeof options?.vertexEdit === "object" ? options.vertexEdit : void 0;
         canvas.on("mouse:dblclick", (e) => {
@@ -2126,17 +2146,21 @@ function useEditCanvas(options) {
     viewportRef,
     setZoom
   );
-  const setBackground = useCallback(async (url) => {
-    const canvas = canvasRef.current;
-    if (!canvas) throw new Error("Canvas not ready");
-    const resizeOpts = options?.backgroundResize !== false ? typeof options?.backgroundResize === "object" ? options.backgroundResize : {} : void 0;
-    const img = await setBackgroundImage(canvas, url, resizeOpts);
-    if (options?.autoFitToBackground !== false) {
-      fitViewportToBackground(canvas);
-      syncZoom(canvasRef, setZoom);
-    }
-    return img;
-  }, []);
+  const setBackground = useCallback(
+    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 img = await setBackgroundImage(canvas, url, resizeOpts);
+      if (options?.autoFitToBackground !== false) {
+        fitViewportToBackground(canvas);
+        syncZoom(canvasRef, setZoom);
+      }
+      return img;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
   return {
     /** Pass this to `<Canvas onReady={...} />` */
     onReady,
@@ -2181,8 +2205,15 @@ function useEditCanvas(options) {
      * Set a background image from a URL. Automatically resizes if the image
      * 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
+     * when replacing the image.
      */
-    setBackground
+    setBackground,
+    /** Whether the canvas has been modified since the last `resetDirty()` call. Requires `trackChanges: true`. */
+    isDirty,
+    /** Reset the dirty flag (e.g., after a successful save). */
+    resetDirty: useCallback(() => setIsDirty(false), [])
   };
 }
 
@@ -2316,6 +2347,155 @@ function useViewCanvas(options) {
     setObjectStyleByType
   };
 }
+
+// src/hooks/useCanvasEvents.ts
+import { useEffect as useEffect3, useRef as useRef4 } from "react";
+function useCanvasEvents(canvasRef, events) {
+  const eventsRef = useRef4(events);
+  eventsRef.current = events;
+  useEffect3(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const wrappers = /* @__PURE__ */ new Map();
+    for (const key of Object.keys(eventsRef.current)) {
+      if (!eventsRef.current[key]) continue;
+      const wrapped = (options) => {
+        eventsRef.current[key]?.(options);
+      };
+      canvas.on(key, wrapped);
+      wrappers.set(key, wrapped);
+    }
+    return () => {
+      wrappers.forEach((handler, name) => {
+        canvas.off(name, handler);
+      });
+    };
+  }, [canvasRef]);
+}
+
+// src/hooks/useCanvasTooltip.ts
+import { useEffect as useEffect4, useRef as useRef5, useState as useState3 } from "react";
+function useCanvasTooltip(canvasRef, options) {
+  const [state, setState] = useState3({
+    visible: false,
+    content: null,
+    position: { x: 0, y: 0 }
+  });
+  const hoveredObjectRef = useRef5(null);
+  const optionsRef = useRef5(options);
+  optionsRef.current = options;
+  useEffect4(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    function calculatePosition(target) {
+      const bounds = target.getBoundingRect();
+      const zoom = canvas.getZoom();
+      const vt = canvas.viewportTransform;
+      if (!vt) return null;
+      return {
+        x: (bounds.left + bounds.width / 2) * zoom + vt[4],
+        y: bounds.top * zoom + vt[5] - 10
+      };
+    }
+    const handleMouseOver = (e) => {
+      const target = e.target;
+      if (!target) return;
+      const content = optionsRef.current.getContent(target);
+      if (content === null) return;
+      if (hoveredObjectRef.current !== target) {
+        hoveredObjectRef.current = target;
+        const position = calculatePosition(target);
+        if (position) {
+          setState({ visible: true, content, position });
+        }
+      }
+    };
+    const handleMouseOut = (e) => {
+      if (e.target && hoveredObjectRef.current === e.target) {
+        setState((prev) => ({ ...prev, visible: false }));
+        hoveredObjectRef.current = null;
+      }
+    };
+    const updatePosition = () => {
+      if (!hoveredObjectRef.current) return;
+      const position = calculatePosition(hoveredObjectRef.current);
+      if (position) {
+        setState((prev) => prev.visible ? { ...prev, position } : prev);
+      }
+    };
+    canvas.on("mouse:over", handleMouseOver);
+    canvas.on("mouse:out", handleMouseOut);
+    canvas.on("after:render", updatePosition);
+    canvas.on("mouse:wheel", updatePosition);
+    return () => {
+      canvas.off("mouse:over", handleMouseOver);
+      canvas.off("mouse:out", handleMouseOut);
+      canvas.off("after:render", updatePosition);
+      canvas.off("mouse:wheel", updatePosition);
+    };
+  }, [canvasRef]);
+  return state;
+}
+
+// src/hooks/useCanvasClick.ts
+import { useEffect as useEffect5, useRef as useRef6 } from "react";
+function useCanvasClick(canvasRef, onClick, options) {
+  const onClickRef = useRef6(onClick);
+  onClickRef.current = onClick;
+  const optionsRef = useRef6(options);
+  optionsRef.current = options;
+  useEffect5(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    let mouseDown = null;
+    let isPanning = false;
+    const handleMouseDown = (e) => {
+      const native = e.e instanceof TouchEvent ? e.e.touches[0] : e.e;
+      if (native) {
+        mouseDown = { x: native.clientX, y: native.clientY, time: Date.now() };
+        isPanning = false;
+      }
+    };
+    const handleMouseMove = (e) => {
+      if (!mouseDown) return;
+      const native = e.e instanceof TouchEvent ? e.e.touches[0] : e.e;
+      if (!native) return;
+      const threshold = optionsRef.current?.threshold ?? 5;
+      const deltaX = Math.abs(native.clientX - mouseDown.x);
+      const deltaY = Math.abs(native.clientY - mouseDown.y);
+      if (deltaX > threshold || deltaY > threshold) {
+        isPanning = true;
+      }
+    };
+    const handleMouseUp = (e) => {
+      if (!mouseDown) return;
+      const maxDuration = optionsRef.current?.maxDuration ?? 300;
+      const elapsed = Date.now() - mouseDown.time;
+      if (!isPanning && elapsed < maxDuration) {
+        onClickRef.current(e.target);
+      }
+      mouseDown = null;
+      isPanning = false;
+    };
+    canvas.on("mouse:down", handleMouseDown);
+    canvas.on("mouse:move", handleMouseMove);
+    canvas.on("mouse:up", handleMouseUp);
+    return () => {
+      canvas.off("mouse:down", handleMouseDown);
+      canvas.off("mouse:move", handleMouseMove);
+      canvas.off("mouse:up", handleMouseUp);
+    };
+  }, [canvasRef]);
+}
+
+// src/index.ts
+import {
+  Canvas as Canvas2,
+  FabricObject as FabricObject5,
+  FabricImage as FabricImage2,
+  Rect as Rect7,
+  Polygon as Polygon5
+} from "fabric";
 export {
   Canvas,
   DEFAULT_ALIGNMENT_STYLE,
@@ -2324,6 +2504,11 @@ export {
   DEFAULT_DRAG_SHAPE_STYLE,
   DEFAULT_GUIDELINE_SHAPE_STYLE,
   DEFAULT_SHAPE_STYLE,
+  Canvas2 as FabricCanvas,
+  FabricImage2 as FabricImage,
+  FabricObject5 as FabricObject,
+  Polygon5 as Polygon,
+  Rect7 as Rect,
   createCircle,
   createCircleAtPoint,
   createPolygon,
@@ -2359,6 +2544,9 @@ export {
   setBackgroundInverted,
   setBackgroundOpacity,
   snapCursorPoint,
+  useCanvasClick,
+  useCanvasEvents,
+  useCanvasTooltip,
   useEditCanvas,
   useViewCanvas
 };