@bwp-web/canvas 0.4.1 → 0.4.3

package/dist/index.cjs

@@ -27,6 +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_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,
@@ -51,6 +57,7 @@ __export(index_exports, {
   fitViewportToBackground: () => fitViewportToBackground,
   getBackgroundInverted: () => getBackgroundInverted,
   getBackgroundOpacity: () => getBackgroundOpacity,
+  getBackgroundSrc: () => getBackgroundSrc,
   getBaseStrokeWidth: () => getBaseStrokeWidth,
   getSnapPoints: () => getSnapPoints,
   loadCanvas: () => loadCanvas,
@@ -62,13 +69,21 @@ __export(index_exports, {
   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);
 
-// src/Canvas/Canvas.tsx
+// src/fabricAugmentation.ts
 var import_fabric = require("fabric");
+
+// src/Canvas/Canvas.tsx
+var import_fabric2 = require("fabric");
 var import_react = require("react");
 
 // src/keyboard.ts
@@ -95,35 +110,64 @@ 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_fabric.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
 var import_react2 = require("react");
-var import_fabric16 = require("fabric");
+var import_fabric17 = require("fabric");
 
 // src/viewport.ts
-var import_fabric2 = require("fabric");
+var import_fabric3 = require("fabric");
 
 // src/constants.ts
 var DEFAULT_MIN_ZOOM = 0.2;
@@ -158,7 +202,7 @@ function touchDistance(touches) {
 }
 function touchMidpoint(touches, el) {
   const rect = el.getBoundingClientRect();
-  return new import_fabric2.Point(
+  return new import_fabric3.Point(
     (touches[0].clientX + touches[1].clientX) / 2 - rect.left,
     (touches[0].clientY + touches[1].clientY) / 2 - rect.top
   );
@@ -173,7 +217,7 @@ function setupWheelZoom(canvas, bounds, zoomFactor, isEnabled) {
     let zoom = canvas.getZoom();
     zoom = delta < 0 ? zoom * zoomFactor : zoom / zoomFactor;
     zoom = Math.min(Math.max(zoom, bounds.minZoom), bounds.maxZoom);
-    canvas.zoomToPoint(new import_fabric2.Point(e.offsetX, e.offsetY), zoom);
+    canvas.zoomToPoint(new import_fabric3.Point(e.offsetX, e.offsetY), zoom);
   };
   canvas.on("mouse:wheel", handleWheel);
   return handleWheel;
@@ -211,7 +255,7 @@ function setupMousePan(canvas, getMode, isEnabled) {
     const dy = pos.y - lastPanY;
     lastPanX = pos.x;
     lastPanY = pos.y;
-    canvas.relativePan(new import_fabric2.Point(dx, dy));
+    canvas.relativePan(new import_fabric3.Point(dx, dy));
     canvas.setCursor("grab");
   };
   const handleMouseUp = () => {
@@ -314,17 +358,65 @@ function enablePanAndZoom(canvas, options) {
     zoomIn(step = DEFAULT_ZOOM_STEP) {
       const z = Math.min(canvas.getZoom() + step, bounds.maxZoom);
       canvas.zoomToPoint(
-        new import_fabric2.Point(canvas.getWidth() / 2, canvas.getHeight() / 2),
+        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);
       canvas.zoomToPoint(
-        new import_fabric2.Point(canvas.getWidth() / 2, canvas.getHeight() / 2),
+        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);
@@ -339,10 +431,15 @@ function resetViewport(canvas) {
 }
 
 // src/background.ts
-var import_fabric3 = require("fabric");
+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;
@@ -379,12 +476,12 @@ function setBackgroundInverted(canvas, inverted) {
   const bg = getBackgroundImage(canvas);
   if (!bg) return;
   const currentFilters = bg.filters ?? [];
-  const hasInvert = currentFilters.some((f) => f instanceof import_fabric3.filters.Invert);
+  const hasInvert = currentFilters.some((f) => f instanceof import_fabric4.filters.Invert);
   if (inverted && !hasInvert) {
-    bg.filters = [...currentFilters, new import_fabric3.filters.Invert()];
+    bg.filters = [...currentFilters, new import_fabric4.filters.Invert()];
     bg.applyFilters();
   } else if (!inverted && hasInvert) {
-    bg.filters = currentFilters.filter((f) => !(f instanceof import_fabric3.filters.Invert));
+    bg.filters = currentFilters.filter((f) => !(f instanceof import_fabric4.filters.Invert));
     bg.applyFilters();
   }
   canvas.requestRenderAll();
@@ -392,7 +489,7 @@ function setBackgroundInverted(canvas, inverted) {
 function getBackgroundInverted(canvas) {
   const bg = getBackgroundImage(canvas);
   if (!bg?.filters) return false;
-  return bg.filters.some((f) => f instanceof import_fabric3.filters.Invert);
+  return bg.filters.some((f) => f instanceof import_fabric4.filters.Invert);
 }
 function resizeImageUrl(url, options) {
   const maxSize = options?.maxSize ?? DEFAULT_IMAGE_MAX_SIZE;
@@ -438,14 +535,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 import_fabric3.FabricImage.fromURL(imageUrl, { crossOrigin: "anonymous" });
+  const img = await import_fabric4.FabricImage.fromURL(imageUrl, { crossOrigin: "anonymous" });
   canvas.backgroundImage = img;
+  if (prevOpacity !== void 0 && prevOpacity !== 1) {
+    img.set("opacity", prevOpacity);
+  }
   canvas.requestRenderAll();
   return img;
 }
@@ -474,7 +575,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;
@@ -482,22 +586,22 @@ function resolveAlignmentEnabled(enableAlignment, alignmentProp) {
 }
 
 // src/alignment/snapPoints.ts
-var import_fabric5 = require("fabric");
+var import_fabric6 = require("fabric");
 
 // src/alignment/objectAlignmentUtils.ts
-var import_fabric4 = require("fabric");
+var import_fabric5 = require("fabric");
 function getStrokeFreeCoords(obj) {
   const m = obj.calcTransformMatrix();
   const w = obj.width / 2;
   const h = obj.height / 2;
   return [
-    new import_fabric4.Point(-w, -h).transform(m),
+    new import_fabric5.Point(-w, -h).transform(m),
     // tl
-    new import_fabric4.Point(w, -h).transform(m),
+    new import_fabric5.Point(w, -h).transform(m),
     // tr
-    new import_fabric4.Point(w, h).transform(m),
+    new import_fabric5.Point(w, h).transform(m),
     // br
-    new import_fabric4.Point(-w, h).transform(m)
+    new import_fabric5.Point(-w, h).transform(m)
     // bl
   ];
 }
@@ -549,17 +653,17 @@ function getAlignmentTargets(target) {
   const objects = /* @__PURE__ */ new Set();
   const canvas = target.canvas;
   if (!canvas) return objects;
-  const children = target instanceof import_fabric4.ActiveSelection ? target.getObjects() : [target];
+  const children = target instanceof import_fabric5.ActiveSelection ? target.getObjects() : [target];
   canvas.forEachObject((o) => {
     if (!o.isOnScreen() || !o.visible) return;
-    if (o.constructor === import_fabric4.Group) {
+    if (o.constructor === import_fabric5.Group) {
       collectGroupChildren(objects, o);
       return;
     }
     objects.add(o);
   });
   for (const child of children) {
-    if (child.constructor === import_fabric4.Group) {
+    if (child.constructor === import_fabric5.Group) {
       for (const gc of child.getObjects()) objects.delete(gc);
     } else {
       objects.delete(child);
@@ -570,7 +674,7 @@ function getAlignmentTargets(target) {
 function collectGroupChildren(objects, group) {
   for (const child of group.getObjects()) {
     if (!child.visible) continue;
-    if (child.constructor === import_fabric4.Group) {
+    if (child.constructor === import_fabric5.Group) {
       collectGroupChildren(objects, child);
     } else {
       objects.add(child);
@@ -596,7 +700,7 @@ function getDefaultSnapPoints(object) {
   return [...coords, object.getCenterPoint()];
 }
 registerSnapPointExtractor(
-  (obj) => obj instanceof import_fabric5.Rect,
+  (obj) => obj instanceof import_fabric6.Rect,
   (obj) => {
     const [tl, tr, br, bl] = getStrokeFreeCoords(obj);
     const mt = tl.add(tr).scalarDivide(2);
@@ -607,16 +711,16 @@ registerSnapPointExtractor(
   }
 );
 registerSnapPointExtractor(
-  (obj) => obj instanceof import_fabric5.Polygon,
+  (obj) => obj instanceof import_fabric6.Polygon,
   (obj) => {
     const polygon = obj;
     const matrix = polygon.calcTransformMatrix();
     const points = polygon.points.map((pt) => {
-      const local = new import_fabric5.Point(
+      const local = new import_fabric6.Point(
         pt.x - polygon.pathOffset.x,
         pt.y - polygon.pathOffset.y
       );
-      return import_fabric5.util.transformPoint(local, matrix);
+      return import_fabric6.util.transformPoint(local, matrix);
     });
     points.push(polygon.getCenterPoint());
     return points;
@@ -624,7 +728,7 @@ registerSnapPointExtractor(
 );
 
 // src/alignment/objectAlignment.ts
-var import_fabric6 = require("fabric");
+var import_fabric7 = require("fabric");
 
 // src/alignment/objectAlignmentRendering.ts
 function drawAlignmentLine(config, origin, target) {
@@ -927,7 +1031,7 @@ var ObjectAlignmentGuides = class {
     const isCenter = e.transform.original.originX === "center" && e.transform.original.originY === "center";
     if (isCenter) {
       const p = target.group ? point.transform(
-        import_fabric6.util.invertTransform(target.group.calcTransformMatrix())
+        import_fabric7.util.invertTransform(target.group.calcTransformMatrix())
       ) : point;
       diagonalPoint = diagonalPoint.add(p).scalarDivide(2);
     }
@@ -996,7 +1100,7 @@ function enableRotationSnap(canvas, options) {
 }
 
 // src/alignment/cursorSnapping.ts
-var import_fabric7 = require("fabric");
+var import_fabric8 = require("fabric");
 function snapCursorPoint(canvas, rawPoint, options) {
   const zoom = canvas.getZoom();
   const scaleWithSize = options?.scaleWithCanvasSize !== false;
@@ -1039,7 +1143,7 @@ function snapCursorPoint(canvas, rawPoint, options) {
   const snapX = bestDx <= margin && snapTargetsX.length > 0;
   const snapY = bestDy <= margin && snapTargetsY.length > 0;
   return {
-    point: new import_fabric7.Point(
+    point: new import_fabric8.Point(
       snapX ? snapTargetsX[0].x : rawPoint.x,
       snapY ? snapTargetsY[0].y : rawPoint.y
     ),
@@ -1071,7 +1175,7 @@ function drawCursorGuidelines(canvas, snapResult, style) {
       ctx.stroke();
       drawXMarker2(ctx, from, xSize);
     }
-    drawXMarker2(ctx, new import_fabric7.Point(to.x, to.y), xSize);
+    drawXMarker2(ctx, new import_fabric8.Point(to.x, to.y), xSize);
   }
   if (snapResult.snapY && snapResult.alignTargetsY) {
     const to = snapResult.point;
@@ -1082,7 +1186,7 @@ function drawCursorGuidelines(canvas, snapResult, style) {
       ctx.stroke();
       drawXMarker2(ctx, from, xSize);
     }
-    drawXMarker2(ctx, new import_fabric7.Point(to.x, to.y), xSize);
+    drawXMarker2(ctx, new import_fabric8.Point(to.x, to.y), xSize);
   }
   ctx.restore();
 }
@@ -1144,7 +1248,7 @@ function enableClickToCreate(canvas, factory, options) {
 }
 
 // src/interactions/dragToCreate.ts
-var import_fabric9 = require("fabric");
+var import_fabric10 = require("fabric");
 
 // src/styles.ts
 var import_styles = require("@mui/material/styles");
@@ -1191,7 +1295,7 @@ var DEFAULT_ALIGNMENT_STYLE = {
 };
 
 // src/interactions/interactionSnapping.ts
-var import_fabric8 = require("fabric");
+var import_fabric9 = require("fabric");
 var canvasAlignmentState = /* @__PURE__ */ new WeakMap();
 function setCanvasAlignmentEnabled(canvas, enabled) {
   canvasAlignmentState.set(canvas, enabled);
@@ -1239,7 +1343,7 @@ function createInteractionSnapping(canvas, options, getAdditionalTargets) {
   }
   function snap(rawX, rawY) {
     if (!snapEnabled) return { x: rawX, y: rawY };
-    const result = snapCursorPoint(canvas, new import_fabric8.Point(rawX, rawY), {
+    const result = snapCursorPoint(canvas, new import_fabric9.Point(rawX, rawY), {
       margin: snapMargin,
       exclude: excludeSet,
       targetPoints: getAllTargetPoints()
@@ -1251,7 +1355,7 @@ function createInteractionSnapping(canvas, options, getAdditionalTargets) {
       lastSnapResult = null;
       return { x: rawX, y: rawY };
     }
-    lastSnapResult = snapCursorPoint(canvas, new import_fabric8.Point(rawX, rawY), {
+    lastSnapResult = snapCursorPoint(canvas, new import_fabric9.Point(rawX, rawY), {
       margin: snapMargin,
       exclude: excludeSet,
       targetPoints: getAllTargetPoints()
@@ -1327,7 +1431,7 @@ function enableDragToCreate(canvas, factory, options) {
     lastEndY = startY;
     previousSelection = canvas.selection;
     canvas.selection = false;
-    previewRect = new import_fabric9.Rect({
+    previewRect = new import_fabric10.Rect({
       ...DEFAULT_GUIDELINE_SHAPE_STYLE,
       left: startX,
       top: startY,
@@ -1366,37 +1470,55 @@ 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
-var import_fabric13 = require("fabric");
+var import_fabric14 = require("fabric");
 
 // src/shapes/rectangle.ts
-var import_fabric10 = require("fabric");
+var import_fabric11 = require("fabric");
 function createRectangle(canvas, options) {
-  const rect = new import_fabric10.Rect({ ...DEFAULT_SHAPE_STYLE, ...options });
+  const rect = new import_fabric11.Rect({ ...DEFAULT_SHAPE_STYLE, ...options });
   canvas.add(rect);
   canvas.requestRenderAll();
   return rect;
 }
 function createRectangleAtPoint(canvas, point, options) {
   const { width, height, ...style } = options;
-  const rect = new import_fabric10.Rect({
+  const rect = new import_fabric11.Rect({
     ...DEFAULT_SHAPE_STYLE,
     left: point.x,
     top: point.y,
@@ -1415,7 +1537,7 @@ function editRectangle(canvas, rect, changes) {
 }
 
 // src/shapes/circle.ts
-var import_fabric11 = require("fabric");
+var import_fabric12 = require("fabric");
 var CIRCLE_CONSTRAINTS = {
   lockRotation: true,
   lockUniScaling: true
@@ -1437,7 +1559,7 @@ function restoreCircleConstraints(rect) {
 }
 function createCircle(canvas, options) {
   const { size, ...rest } = options;
-  const rect = new import_fabric11.Rect({
+  const rect = new import_fabric12.Rect({
     ...DEFAULT_CIRCLE_STYLE,
     ...CIRCLE_CONSTRAINTS,
     width: size,
@@ -1453,7 +1575,7 @@ function createCircle(canvas, options) {
 }
 function createCircleAtPoint(canvas, point, options) {
   const { size, ...style } = options;
-  const rect = new import_fabric11.Rect({
+  const rect = new import_fabric12.Rect({
     ...DEFAULT_CIRCLE_STYLE,
     ...CIRCLE_CONSTRAINTS,
     left: point.x,
@@ -1487,17 +1609,17 @@ function editCircle(canvas, rect, changes) {
 }
 
 // src/shapes/polygon.ts
-var import_fabric12 = require("fabric");
+var import_fabric13 = require("fabric");
 function createPolygon(canvas, options) {
   const { points, ...rest } = options;
-  const polygon = new import_fabric12.Polygon(points, { ...DEFAULT_SHAPE_STYLE, ...rest });
+  const polygon = new import_fabric13.Polygon(points, { ...DEFAULT_SHAPE_STYLE, ...rest });
   canvas.add(polygon);
   canvas.requestRenderAll();
   return polygon;
 }
 function createPolygonAtPoint(canvas, point, options) {
   const { width, height, ...style } = options;
-  const polygon = new import_fabric12.Polygon(
+  const polygon = new import_fabric13.Polygon(
     [
       { x: 0, y: 0 },
       { x: width, y: 0 },
@@ -1515,7 +1637,7 @@ function createPolygonFromDrag(canvas, start, end, style) {
   const height = Math.abs(end.y - start.y);
   const left = Math.min(start.x, end.x) + width / 2;
   const top = Math.min(start.y, end.y) + height / 2;
-  const polygon = new import_fabric12.Polygon(
+  const polygon = new import_fabric13.Polygon(
     [
       { x: 0, y: 0 },
       { x: width, y: 0 },
@@ -1529,7 +1651,7 @@ function createPolygonFromDrag(canvas, start, end, style) {
   return polygon;
 }
 function createPolygonFromVertices(canvas, points, style) {
-  const polygon = new import_fabric12.Polygon(
+  const polygon = new import_fabric13.Polygon(
     points.map((p) => ({ x: p.x, y: p.y })),
     { ...DEFAULT_SHAPE_STYLE, ...style }
   );
@@ -1607,7 +1729,7 @@ function enableDrawToCreate(canvas, options) {
   const snapping = createInteractionSnapping(
     canvas,
     options,
-    () => points.map((p) => new import_fabric13.Point(p.x, p.y))
+    () => points.map((p) => new import_fabric14.Point(p.x, p.y))
   );
   function trackPreviewElement(obj) {
     snapping.excludeSet.add(obj);
@@ -1656,6 +1778,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);
@@ -1689,7 +1814,7 @@ function enableDrawToCreate(canvas, options) {
       canvas.selection = false;
     }
     points.push({ x, y });
-    const marker = new import_fabric13.Circle({
+    const marker = new import_fabric14.Circle({
       left: x,
       top: y,
       radius: 4,
@@ -1705,7 +1830,7 @@ function enableDrawToCreate(canvas, options) {
     canvas.add(marker);
     if (points.length >= 2) {
       const prev = points[points.length - 2];
-      const edge = new import_fabric13.Line([prev.x, prev.y, x, y], lineStyle);
+      const edge = new import_fabric14.Line([prev.x, prev.y, x, y], lineStyle);
       edgeLines.push(edge);
       trackPreviewElement(edge);
       canvas.add(edge);
@@ -1734,7 +1859,7 @@ function enableDrawToCreate(canvas, options) {
       untrackPreviewElement(trackingLine);
       canvas.remove(trackingLine);
     }
-    trackingLine = new import_fabric13.Line([lastPoint.x, lastPoint.y, x, y], {
+    trackingLine = new import_fabric14.Line([lastPoint.x, lastPoint.y, x, y], {
       ...guideLineStyle,
       strokeDashArray: [5, 5]
     });
@@ -1746,7 +1871,7 @@ function enableDrawToCreate(canvas, options) {
       closingLine = null;
     }
     if (points.length >= 3) {
-      closingLine = new import_fabric13.Line([x, y, points[0].x, points[0].y], {
+      closingLine = new import_fabric14.Line([x, y, points[0].x, points[0].y], {
         ...guideLineStyle,
         strokeDashArray: [5, 5]
       });
@@ -1788,30 +1913,30 @@ function enableDrawToCreate(canvas, options) {
 }
 
 // src/interactions/vertexEdit.ts
-var import_fabric14 = require("fabric");
+var import_fabric15 = require("fabric");
 function localPointToScene(polygon, point) {
   const matrix = polygon.calcTransformMatrix();
-  const localPoint = new import_fabric14.Point(
+  const localPoint = new import_fabric15.Point(
     point.x - polygon.pathOffset.x,
     point.y - polygon.pathOffset.y
   );
-  return import_fabric14.util.transformPoint(localPoint, matrix);
+  return import_fabric15.util.transformPoint(localPoint, matrix);
 }
 function scenePointToLocal(polygon, scenePoint) {
   const matrix = polygon.calcTransformMatrix();
-  const invMatrix = import_fabric14.util.invertTransform(matrix);
-  const localPoint = import_fabric14.util.transformPoint(scenePoint, invMatrix);
+  const invMatrix = import_fabric15.util.invertTransform(matrix);
+  const localPoint = import_fabric15.util.transformPoint(scenePoint, invMatrix);
   return {
     x: localPoint.x + polygon.pathOffset.x,
     y: localPoint.y + polygon.pathOffset.y
   };
 }
 function sceneToScreen(scenePoint, canvas) {
-  return import_fabric14.util.transformPoint(scenePoint, canvas.viewportTransform);
+  return import_fabric15.util.transformPoint(scenePoint, canvas.viewportTransform);
 }
 function screenToScene(screenX, screenY, canvas) {
-  const inv = import_fabric14.util.invertTransform(canvas.viewportTransform);
-  return import_fabric14.util.transformPoint(new import_fabric14.Point(screenX, screenY), inv);
+  const inv = import_fabric15.util.invertTransform(canvas.viewportTransform);
+  return import_fabric15.util.transformPoint(new import_fabric15.Point(screenX, screenY), inv);
 }
 function createHandleElement(radius, fill, stroke, strokeWidth) {
   const el = document.createElement("div");
@@ -1901,7 +2026,7 @@ function enableVertexEdit(canvas, polygon, options, onExit) {
       const canvasRelY = e.clientY - wrapperRect.top;
       const rawScene = screenToScene(canvasRelX, canvasRelY, canvas);
       const snapped = snapping.snapWithGuidelines(rawScene.x, rawScene.y);
-      const scenePoint = new import_fabric14.Point(snapped.x, snapped.y);
+      const scenePoint = new import_fabric15.Point(snapped.x, snapped.y);
       const anchorIdx = i === 0 ? 1 : 0;
       const anchorBefore = localPointToScene(
         polygon,
@@ -1974,7 +2099,7 @@ function enableVertexEdit(canvas, polygon, options, onExit) {
 }
 
 // src/serialization.ts
-var import_fabric15 = require("fabric");
+var import_fabric16 = require("fabric");
 var strokeBaseMap = /* @__PURE__ */ new WeakMap();
 function enableScaledStrokes(canvas) {
   function applyScaledStrokes() {
@@ -2031,15 +2156,23 @@ 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 import_fabric15.Rect) {
+    if (obj.shapeType === "circle" && obj instanceof import_fabric16.Rect) {
       restoreCircleConstraints(obj);
     }
   });
   canvas.requestRenderAll();
+  return canvas.getObjects();
 }
 
 // src/hooks/useEditCanvas.ts
@@ -2055,6 +2188,7 @@ function useEditCanvas(options) {
   const [selected, setSelected] = (0, import_react2.useState)([]);
   const [viewportMode, setViewportModeState] = (0, import_react2.useState)("select");
   const [isEditingVertices, setIsEditingVertices] = (0, import_react2.useState)(false);
+  const [isDirty, setIsDirty] = (0, import_react2.useState)(false);
   const setMode = (0, import_react2.useCallback)((setup) => {
     vertexEditCleanupRef.current?.();
     vertexEditCleanupRef.current = null;
@@ -2125,10 +2259,15 @@ 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) => {
-          if (e.target && e.target instanceof import_fabric16.Polygon) {
+          if (e.target && e.target instanceof import_fabric17.Polygon) {
             vertexEditCleanupRef.current?.();
             vertexEditCleanupRef.current = enableVertexEdit(
               canvas,
@@ -2179,22 +2318,26 @@ 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
   );
-  const setBackground = (0, import_react2.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 = (0, import_react2.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,
@@ -2215,7 +2358,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,
@@ -2239,21 +2384,28 @@ 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: (0, import_react2.useCallback)(() => setIsDirty(false), [])
   };
 }
 
 // src/hooks/useViewCanvas.ts
 var import_react3 = require("react");
-var import_fabric17 = require("fabric");
+var import_fabric18 = require("fabric");
 var VIEW_BORDER_RADIUS = 4;
 function lockCanvas(canvas) {
   canvas.selection = false;
   canvas.forEachObject((obj) => {
     obj.selectable = false;
     obj.evented = false;
-    if (obj instanceof import_fabric17.Rect && obj.shapeType !== "circle" && obj.data?.type !== "DEVICE") {
+    if (obj instanceof import_fabric18.Rect && obj.shapeType !== "circle" && obj.data?.type !== "DEVICE") {
       const rx = VIEW_BORDER_RADIUS / (obj.scaleX ?? 1);
       const ry = VIEW_BORDER_RADIUS / (obj.scaleY ?? 1);
       obj.set({ rx, ry });
@@ -2298,7 +2450,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
@@ -2364,7 +2516,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,
@@ -2374,6 +2528,209 @@ function useViewCanvas(options) {
     setObjectStyleByType
   };
 }
+
+// src/hooks/useCanvasEvents.ts
+var import_react4 = require("react");
+function useCanvasEvents(canvasRef, events) {
+  const eventsRef = (0, import_react4.useRef)(events);
+  eventsRef.current = events;
+  (0, import_react4.useEffect)(() => {
+    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
+var import_react5 = require("react");
+function useCanvasTooltip(canvasRef, options) {
+  const [state, setState] = (0, import_react5.useState)({
+    visible: false,
+    content: null,
+    position: { x: 0, y: 0 }
+  });
+  const hoveredObjectRef = (0, import_react5.useRef)(null);
+  const optionsRef = (0, import_react5.useRef)(options);
+  optionsRef.current = options;
+  (0, import_react5.useEffect)(() => {
+    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
+var import_react6 = require("react");
+function useCanvasClick(canvasRef, onClick, options) {
+  const onClickRef = (0, import_react6.useRef)(onClick);
+  onClickRef.current = onClick;
+  const optionsRef = (0, import_react6.useRef)(options);
+  optionsRef.current = options;
+  (0, import_react6.useEffect)(() => {
+    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/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,
@@ -2383,6 +2740,12 @@ function useViewCanvas(options) {
   DEFAULT_DRAG_SHAPE_STYLE,
   DEFAULT_GUIDELINE_SHAPE_STYLE,
   DEFAULT_SHAPE_STYLE,
+  FabricCanvas,
+  FabricImage,
+  FabricObject,
+  Point,
+  Polygon,
+  Rect,
   createCircle,
   createCircleAtPoint,
   createPolygon,
@@ -2407,6 +2770,7 @@ function useViewCanvas(options) {
   fitViewportToBackground,
   getBackgroundInverted,
   getBackgroundOpacity,
+  getBackgroundSrc,
   getBaseStrokeWidth,
   getSnapPoints,
   loadCanvas,
@@ -2418,7 +2782,12 @@ function useViewCanvas(options) {
   setBackgroundInverted,
   setBackgroundOpacity,
   snapCursorPoint,
+  useCanvasClick,
+  useCanvasEvents,
+  useCanvasTooltip,
   useEditCanvas,
-  useViewCanvas
+  useObjectOverlay,
+  useViewCanvas,
+  util
 });
 //# sourceMappingURL=index.cjs.map