@bwp-web/canvas 0.4.0 → 0.4.2

package/dist/index.cjs

@@ -27,6 +27,11 @@ __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,
   createCircle: () => createCircle,
   createCircleAtPoint: () => createCircleAtPoint,
   createPolygon: () => createPolygon,
@@ -62,13 +67,19 @@ __export(index_exports, {
   setBackgroundInverted: () => setBackgroundInverted,
   setBackgroundOpacity: () => setBackgroundOpacity,
   snapCursorPoint: () => snapCursorPoint,
+  useCanvasClick: () => useCanvasClick,
+  useCanvasEvents: () => useCanvasEvents,
+  useCanvasTooltip: () => useCanvasTooltip,
   useEditCanvas: () => useEditCanvas,
   useViewCanvas: () => useViewCanvas
 });
 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
@@ -107,7 +118,7 @@ function Canvas({
     if (!el) {
       return;
     }
-    const fabricCanvas = new import_fabric.Canvas(el, { width, height });
+    const fabricCanvas = new import_fabric2.Canvas(el, { width, height });
     onReady?.(fabricCanvas);
     const cleanupShortcuts = enableKeyboardShortcuts(fabricCanvas);
     return () => {
@@ -120,10 +131,10 @@ function Canvas({
 
 // 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 +169,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 +184,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 +222,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,14 +325,14 @@ 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
       );
     },
@@ -339,7 +350,7 @@ function resetViewport(canvas) {
 }
 
 // src/background.ts
-var import_fabric3 = require("fabric");
+var import_fabric4 = require("fabric");
 function getBackgroundImage(canvas) {
   return canvas.backgroundImage;
 }
@@ -379,12 +390,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 +403,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 +449,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;
 }
@@ -482,22 +497,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 +564,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 +585,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 +611,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 +622,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 +639,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 +942,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 +1011,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 +1054,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 +1086,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 +1097,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 +1159,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 +1206,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 +1254,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 +1266,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 +1342,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,
@@ -1384,19 +1399,19 @@ function enableDragToCreate(canvas, factory, options) {
 }
 
 // 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 +1430,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 +1452,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 +1468,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 +1502,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 +1530,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 +1544,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 +1622,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);
@@ -1689,7 +1704,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 +1720,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 +1749,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 +1761,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 +1803,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 +1916,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 +1989,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,11 +2046,18 @@ 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);
     }
   });
@@ -2055,6 +2077,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 +2148,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,
@@ -2184,17 +2212,21 @@ function useEditCanvas(options) {
     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,
@@ -2239,21 +2271,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 });
@@ -2374,6 +2413,149 @@ 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/index.ts
+var import_fabric19 = require("fabric");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Canvas,
@@ -2383,6 +2565,11 @@ function useViewCanvas(options) {
   DEFAULT_DRAG_SHAPE_STYLE,
   DEFAULT_GUIDELINE_SHAPE_STYLE,
   DEFAULT_SHAPE_STYLE,
+  FabricCanvas,
+  FabricImage,
+  FabricObject,
+  Polygon,
+  Rect,
   createCircle,
   createCircleAtPoint,
   createPolygon,
@@ -2418,6 +2605,9 @@ function useViewCanvas(options) {
   setBackgroundInverted,
   setBackgroundOpacity,
   snapCursorPoint,
+  useCanvasClick,
+  useCanvasEvents,
+  useCanvasTooltip,
   useEditCanvas,
   useViewCanvas
 });