@bwp-web/canvas 0.4.0

package/dist/index.js

@@ -0,0 +1,2365 @@
+// src/Canvas/Canvas.tsx
+import { Canvas as FabricCanvas } from "fabric";
+import { useEffect, useRef } from "react";
+
+// src/keyboard.ts
+function deleteObjects(canvas, ...objects) {
+  canvas.remove(...objects);
+  canvas.requestRenderAll();
+}
+function enableKeyboardShortcuts(canvas) {
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape" || e.key === "Delete" || e.key === "Backspace") {
+      const active = canvas.getActiveObjects();
+      if (active.length > 0) {
+        canvas.discardActiveObject();
+        deleteObjects(canvas, ...active);
+      }
+    }
+  };
+  document.addEventListener("keydown", handleKeyDown);
+  return () => {
+    document.removeEventListener("keydown", handleKeyDown);
+  };
+}
+
+// src/Canvas/Canvas.tsx
+import { jsx } from "react/jsx-runtime";
+function Canvas({
+  width = 800,
+  height = 600,
+  className,
+  style,
+  onReady
+}) {
+  const canvasRef = useRef(null);
+  useEffect(() => {
+    const el = canvasRef.current;
+    if (!el) {
+      return;
+    }
+    const fabricCanvas = new FabricCanvas(el, { width, height });
+    onReady?.(fabricCanvas);
+    const cleanupShortcuts = enableKeyboardShortcuts(fabricCanvas);
+    return () => {
+      cleanupShortcuts();
+      fabricCanvas.dispose();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef }) });
+}
+
+// src/hooks/useEditCanvas.ts
+import { useCallback, useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { Polygon as Polygon4 } from "fabric";
+
+// src/viewport.ts
+import { Point } from "fabric";
+
+// src/constants.ts
+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_VIEWPORT_PADDING = 0.05;
+var BASE_CANVAS_SIZE = 1e3;
+var DEFAULT_SNAP_MARGIN = 6;
+var DEFAULT_ANGLE_SNAP_INTERVAL = 15;
+var MIN_DRAG_SIZE = 3;
+var POLYGON_CLOSE_THRESHOLD = 10;
+var DEFAULT_IMAGE_MAX_SIZE = 4096;
+var DEFAULT_IMAGE_MIN_SIZE = 480;
+var DEFAULT_VERTEX_HANDLE_RADIUS = 6;
+var DEFAULT_VERTEX_HANDLE_FILL = "#ffffff";
+var DEFAULT_VERTEX_HANDLE_STROKE = "#2196f3";
+var DEFAULT_VERTEX_HANDLE_STROKE_WIDTH = 2;
+
+// src/viewport.ts
+function getPointerXY(e) {
+  if (e instanceof MouseEvent) return { x: e.clientX, y: e.clientY };
+  if (typeof TouchEvent !== "undefined" && e instanceof TouchEvent && e.touches.length > 0) {
+    return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+  }
+  return null;
+}
+function touchDistance(touches) {
+  const dx = touches[0].clientX - touches[1].clientX;
+  const dy = touches[0].clientY - touches[1].clientY;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+function touchMidpoint(touches, el) {
+  const rect = el.getBoundingClientRect();
+  return new Point(
+    (touches[0].clientX + touches[1].clientX) / 2 - rect.left,
+    (touches[0].clientY + touches[1].clientY) / 2 - rect.top
+  );
+}
+function setupWheelZoom(canvas, bounds, zoomFactor, isEnabled) {
+  const handleWheel = (opt) => {
+    if (!isEnabled()) return;
+    const e = opt.e;
+    e.preventDefault();
+    e.stopPropagation();
+    const delta = e.deltaY;
+    let zoom = canvas.getZoom();
+    zoom = delta < 0 ? zoom * zoomFactor : zoom / zoomFactor;
+    zoom = Math.min(Math.max(zoom, bounds.minZoom), bounds.maxZoom);
+    canvas.zoomToPoint(new Point(e.offsetX, e.offsetY), zoom);
+  };
+  canvas.on("mouse:wheel", handleWheel);
+  return handleWheel;
+}
+function setupMousePan(canvas, getMode, isEnabled) {
+  let isPanning = false;
+  let lastPanX = 0;
+  let lastPanY = 0;
+  let didDisableSelection = false;
+  const handleMouseDown = (opt) => {
+    if (!isEnabled()) return;
+    const pos = getPointerXY(opt.e);
+    if (!pos) return;
+    const e = opt.e;
+    const mode = getMode();
+    const isMiddleButton = e instanceof MouseEvent && e.button === 1;
+    const isModifiedSelect = e instanceof MouseEvent && mode === "select" && (e.metaKey || e.ctrlKey);
+    const shouldPan = mode === "pan" || isMiddleButton || isModifiedSelect || mode === "select" && !opt.target;
+    if (shouldPan) {
+      isPanning = true;
+      lastPanX = pos.x;
+      lastPanY = pos.y;
+      if (canvas.selection) {
+        didDisableSelection = true;
+        canvas.selection = false;
+      }
+      canvas.setCursor("grab");
+    }
+  };
+  const handleMouseMove = (opt) => {
+    if (!isPanning) return;
+    const pos = getPointerXY(opt.e);
+    if (!pos) return;
+    const dx = pos.x - lastPanX;
+    const dy = pos.y - lastPanY;
+    lastPanX = pos.x;
+    lastPanY = pos.y;
+    canvas.relativePan(new Point(dx, dy));
+    canvas.setCursor("grab");
+  };
+  const handleMouseUp = () => {
+    if (isPanning) {
+      isPanning = false;
+      if (didDisableSelection) {
+        canvas.selection = true;
+        didDisableSelection = false;
+      }
+      canvas.setCursor(getMode() === "pan" ? "grab" : "default");
+    }
+  };
+  canvas.on("mouse:down", handleMouseDown);
+  canvas.on("mouse:move", handleMouseMove);
+  canvas.on("mouse:up", handleMouseUp);
+  return { handleMouseDown, handleMouseMove, handleMouseUp };
+}
+function setupPinchZoom(canvas, bounds, isEnabled) {
+  const canvasEl = canvas.getElement();
+  if (typeof TouchEvent === "undefined") return () => {
+  };
+  let lastPinchDist = 0;
+  const onTouchStart = (e) => {
+    if (e.touches.length === 2) {
+      e.preventDefault();
+      lastPinchDist = touchDistance(e.touches);
+    }
+  };
+  const onTouchMove = (e) => {
+    if (!isEnabled() || e.touches.length !== 2) return;
+    e.preventDefault();
+    const dist = touchDistance(e.touches);
+    if (lastPinchDist === 0) {
+      lastPinchDist = dist;
+      return;
+    }
+    const ratio = dist / lastPinchDist;
+    lastPinchDist = dist;
+    const mid = touchMidpoint(e.touches, canvasEl);
+    canvas.zoomToPoint(
+      mid,
+      Math.min(
+        Math.max(canvas.getZoom() * ratio, bounds.minZoom),
+        bounds.maxZoom
+      )
+    );
+  };
+  const onTouchEnd = (e) => {
+    if (e.touches.length < 2) lastPinchDist = 0;
+  };
+  canvasEl.addEventListener("touchstart", onTouchStart, { passive: false });
+  canvasEl.addEventListener("touchmove", onTouchMove, { passive: false });
+  canvasEl.addEventListener("touchend", onTouchEnd);
+  return () => {
+    canvasEl.removeEventListener("touchstart", onTouchStart);
+    canvasEl.removeEventListener("touchmove", onTouchMove);
+    canvasEl.removeEventListener("touchend", onTouchEnd);
+  };
+}
+function enablePanAndZoom(canvas, options) {
+  const bounds = {
+    minZoom: options?.minZoom ?? DEFAULT_MIN_ZOOM,
+    maxZoom: options?.maxZoom ?? DEFAULT_MAX_ZOOM
+  };
+  const zoomFactor = options?.zoomFactor ?? DEFAULT_ZOOM_FACTOR;
+  let mode = options?.initialMode ?? "select";
+  let enabled = true;
+  const isEnabled = () => enabled;
+  const getMode = () => mode;
+  const handleWheel = setupWheelZoom(canvas, bounds, zoomFactor, isEnabled);
+  const panHandlers = setupMousePan(canvas, getMode, isEnabled);
+  const cleanupPinch = setupPinchZoom(canvas, bounds, isEnabled);
+  return {
+    setMode(newMode) {
+      mode = newMode;
+      if (newMode === "pan") {
+        canvas.selection = false;
+        canvas.forEachObject((obj) => {
+          obj.selectable = false;
+          obj.evented = false;
+        });
+        canvas.discardActiveObject();
+        canvas.setCursor("grab");
+      } else {
+        canvas.selection = true;
+        canvas.forEachObject((obj) => {
+          obj.selectable = true;
+          obj.evented = true;
+        });
+        canvas.setCursor("default");
+      }
+      canvas.requestRenderAll();
+    },
+    getMode() {
+      return mode;
+    },
+    setEnabled(value) {
+      enabled = value;
+    },
+    zoomIn(step = DEFAULT_ZOOM_STEP) {
+      const z = Math.min(canvas.getZoom() + step, bounds.maxZoom);
+      canvas.zoomToPoint(
+        new 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 Point(canvas.getWidth() / 2, canvas.getHeight() / 2),
+        z
+      );
+    },
+    cleanup() {
+      canvas.off("mouse:wheel", handleWheel);
+      canvas.off("mouse:down", panHandlers.handleMouseDown);
+      canvas.off("mouse:move", panHandlers.handleMouseMove);
+      canvas.off("mouse:up", panHandlers.handleMouseUp);
+      cleanupPinch();
+    }
+  };
+}
+function resetViewport(canvas) {
+  canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
+}
+
+// src/background.ts
+import { FabricImage, filters } from "fabric";
+function getBackgroundImage(canvas) {
+  return canvas.backgroundImage;
+}
+function fitViewportToBackground(canvas, options) {
+  const bg = getBackgroundImage(canvas);
+  if (!bg) return;
+  const bgWidth = bg.getScaledWidth();
+  const bgHeight = bg.getScaledHeight();
+  if (!bgWidth || !bgHeight) return;
+  const center = bg.getCenterPoint();
+  const imgLeft = center.x - bgWidth / 2;
+  const imgTop = center.y - bgHeight / 2;
+  const padding = options?.padding ?? DEFAULT_VIEWPORT_PADDING;
+  const canvasWidth = canvas.getWidth();
+  const canvasHeight = canvas.getHeight();
+  const availableWidth = canvasWidth * (1 - padding * 2);
+  const availableHeight = canvasHeight * (1 - padding * 2);
+  const scale = Math.min(availableWidth / bgWidth, availableHeight / bgHeight);
+  const scaledW = bgWidth * scale;
+  const scaledH = bgHeight * scale;
+  const offsetX = (canvasWidth - scaledW) / 2 - imgLeft * scale;
+  const offsetY = (canvasHeight - scaledH) / 2 - imgTop * scale;
+  canvas.setViewportTransform([scale, 0, 0, scale, offsetX, offsetY]);
+  canvas.requestRenderAll();
+}
+function setBackgroundOpacity(canvas, opacity) {
+  const bg = getBackgroundImage(canvas);
+  if (!bg) return;
+  bg.set("opacity", Math.min(1, Math.max(0, opacity)));
+  canvas.requestRenderAll();
+}
+function getBackgroundOpacity(canvas) {
+  const bg = getBackgroundImage(canvas);
+  return bg?.opacity ?? 1;
+}
+function setBackgroundInverted(canvas, inverted) {
+  const bg = getBackgroundImage(canvas);
+  if (!bg) return;
+  const currentFilters = bg.filters ?? [];
+  const hasInvert = currentFilters.some((f) => f instanceof filters.Invert);
+  if (inverted && !hasInvert) {
+    bg.filters = [...currentFilters, new filters.Invert()];
+    bg.applyFilters();
+  } else if (!inverted && hasInvert) {
+    bg.filters = currentFilters.filter((f) => !(f instanceof filters.Invert));
+    bg.applyFilters();
+  }
+  canvas.requestRenderAll();
+}
+function getBackgroundInverted(canvas) {
+  const bg = getBackgroundImage(canvas);
+  if (!bg?.filters) return false;
+  return bg.filters.some((f) => f instanceof filters.Invert);
+}
+function resizeImageUrl(url, options) {
+  const maxSize = options?.maxSize ?? DEFAULT_IMAGE_MAX_SIZE;
+  const minSize = options?.minSize ?? DEFAULT_IMAGE_MIN_SIZE;
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      const { naturalWidth: w, naturalHeight: h } = img;
+      if (w < minSize && h < minSize) {
+        reject(
+          new Error(
+            `Image is too small (${w}\xD7${h}). Minimum size is ${minSize}px on either dimension.`
+          )
+        );
+        return;
+      }
+      const needsResize = w > maxSize || h > maxSize;
+      if (!needsResize) {
+        resolve({ url, width: w, height: h, wasResized: false });
+        return;
+      }
+      const scale = Math.min(maxSize / w, maxSize / h);
+      const newW = Math.round(w * scale);
+      const newH = Math.round(h * scale);
+      const tempCanvas = document.createElement("canvas");
+      tempCanvas.width = newW;
+      tempCanvas.height = newH;
+      const ctx = tempCanvas.getContext("2d");
+      if (!ctx) {
+        reject(new Error("Could not get 2D context for image resize."));
+        return;
+      }
+      ctx.drawImage(img, 0, 0, newW, newH);
+      resolve({
+        url: tempCanvas.toDataURL("image/png"),
+        width: newW,
+        height: newH,
+        wasResized: true
+      });
+    };
+    img.onerror = () => reject(new Error(`Failed to load image: ${url}`));
+    img.src = url;
+  });
+}
+async function setBackgroundImage(canvas, url, resize) {
+  let imageUrl = url;
+  if (resize !== void 0) {
+    const result = await resizeImageUrl(url, resize);
+    imageUrl = result.url;
+  }
+  const img = await FabricImage.fromURL(imageUrl, { crossOrigin: "anonymous" });
+  canvas.backgroundImage = img;
+  canvas.requestRenderAll();
+  return img;
+}
+
+// src/hooks/shared.ts
+function syncZoom(canvasRef, setZoom) {
+  const canvas = canvasRef.current;
+  if (canvas) setZoom(canvas.getZoom());
+}
+function createViewportActions(canvasRef, viewportRef, setZoom) {
+  const resetViewport2 = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    if (canvas.backgroundImage) {
+      fitViewportToBackground(canvas);
+    } else {
+      resetViewport(canvas);
+    }
+    setZoom(canvas.getZoom());
+  };
+  const zoomIn = (step) => {
+    viewportRef.current?.zoomIn(step);
+    syncZoom(canvasRef, setZoom);
+  };
+  const zoomOut = (step) => {
+    viewportRef.current?.zoomOut(step);
+    syncZoom(canvasRef, setZoom);
+  };
+  return { resetViewport: resetViewport2, zoomIn, zoomOut };
+}
+function resolveAlignmentEnabled(enableAlignment, alignmentProp) {
+  if (enableAlignment !== void 0) return enableAlignment;
+  return alignmentProp !== false;
+}
+
+// src/alignment/snapPoints.ts
+import { Point as Point3, Polygon, Rect, util } from "fabric";
+
+// src/alignment/objectAlignmentUtils.ts
+import {
+  ActiveSelection,
+  Group,
+  Point as Point2
+} from "fabric";
+function getStrokeFreeCoords(obj) {
+  const m = obj.calcTransformMatrix();
+  const w = obj.width / 2;
+  const h = obj.height / 2;
+  return [
+    new Point2(-w, -h).transform(m),
+    // tl
+    new Point2(w, -h).transform(m),
+    // tr
+    new Point2(w, h).transform(m),
+    // br
+    new Point2(-w, h).transform(m)
+    // bl
+  ];
+}
+function getAbsoluteDistance(a, b) {
+  return Math.abs(a - b);
+}
+function findNearestOnAxis(point, list, axis) {
+  let distance = Infinity;
+  let matches = [];
+  for (const item of list) {
+    const d = getAbsoluteDistance(point[axis], item[axis]);
+    if (distance > d) {
+      matches = [];
+      distance = d;
+    }
+    if (distance === d) {
+      matches.push(item);
+    }
+  }
+  return { distance, matches };
+}
+function getBoundingPointMap(target) {
+  const coords = getStrokeFreeCoords(target);
+  return {
+    tl: coords[0],
+    tr: coords[1],
+    br: coords[2],
+    bl: coords[3],
+    mt: coords[0].add(coords[1]).scalarDivide(2),
+    mr: coords[1].add(coords[2]).scalarDivide(2),
+    mb: coords[2].add(coords[3]).scalarDivide(2),
+    ml: coords[3].add(coords[0]).scalarDivide(2)
+  };
+}
+function getOppositeCornerMap(target) {
+  const aCoords = target.aCoords ?? target.calcACoords();
+  return {
+    tl: aCoords.br,
+    tr: aCoords.bl,
+    br: aCoords.tl,
+    bl: aCoords.tr,
+    mt: aCoords.br.add(aCoords.bl).scalarDivide(2),
+    mr: aCoords.bl.add(aCoords.tl).scalarDivide(2),
+    mb: aCoords.tl.add(aCoords.tr).scalarDivide(2),
+    ml: aCoords.tr.add(aCoords.br).scalarDivide(2)
+  };
+}
+function getAlignmentTargets(target) {
+  const objects = /* @__PURE__ */ new Set();
+  const canvas = target.canvas;
+  if (!canvas) return objects;
+  const children = target instanceof ActiveSelection ? target.getObjects() : [target];
+  canvas.forEachObject((o) => {
+    if (!o.isOnScreen() || !o.visible) return;
+    if (o.constructor === Group) {
+      collectGroupChildren(objects, o);
+      return;
+    }
+    objects.add(o);
+  });
+  for (const child of children) {
+    if (child.constructor === Group) {
+      for (const gc of child.getObjects()) objects.delete(gc);
+    } else {
+      objects.delete(child);
+    }
+  }
+  return objects;
+}
+function collectGroupChildren(objects, group) {
+  for (const child of group.getObjects()) {
+    if (!child.visible) continue;
+    if (child.constructor === Group) {
+      collectGroupChildren(objects, child);
+    } else {
+      objects.add(child);
+    }
+  }
+}
+
+// src/alignment/snapPoints.ts
+var registry = [];
+function registerSnapPointExtractor(matcher, extractor) {
+  registry.unshift({ matcher, extractor });
+}
+function getSnapPoints(object) {
+  for (const { matcher, extractor } of registry) {
+    if (matcher(object)) {
+      return extractor(object);
+    }
+  }
+  return getDefaultSnapPoints(object);
+}
+function getDefaultSnapPoints(object) {
+  const coords = getStrokeFreeCoords(object);
+  return [...coords, object.getCenterPoint()];
+}
+registerSnapPointExtractor(
+  (obj) => obj instanceof Rect,
+  (obj) => {
+    const [tl, tr, br, bl] = getStrokeFreeCoords(obj);
+    const mt = tl.add(tr).scalarDivide(2);
+    const mr = tr.add(br).scalarDivide(2);
+    const mb = br.add(bl).scalarDivide(2);
+    const ml = bl.add(tl).scalarDivide(2);
+    return [tl, tr, br, bl, mt, mr, mb, ml, obj.getCenterPoint()];
+  }
+);
+registerSnapPointExtractor(
+  (obj) => obj instanceof Polygon,
+  (obj) => {
+    const polygon = obj;
+    const matrix = polygon.calcTransformMatrix();
+    const points = polygon.points.map((pt) => {
+      const local = new Point3(
+        pt.x - polygon.pathOffset.x,
+        pt.y - polygon.pathOffset.y
+      );
+      return util.transformPoint(local, matrix);
+    });
+    points.push(polygon.getCenterPoint());
+    return points;
+  }
+);
+
+// src/alignment/objectAlignment.ts
+import { util as util2 } from "fabric";
+
+// src/alignment/objectAlignmentRendering.ts
+function drawAlignmentLine(config, origin, target) {
+  const ctx = config.canvas.getTopContext();
+  const vt = config.canvas.viewportTransform;
+  const zoom = config.canvas.getZoom();
+  ctx.save();
+  ctx.transform(...vt);
+  ctx.lineWidth = config.width / zoom;
+  if (config.lineDash) ctx.setLineDash(config.lineDash);
+  ctx.strokeStyle = config.color;
+  ctx.beginPath();
+  ctx.moveTo(origin.x, origin.y);
+  ctx.lineTo(target.x, target.y);
+  ctx.stroke();
+  if (config.lineDash) ctx.setLineDash([]);
+  drawXMarker(ctx, origin, config.xSize / zoom);
+  drawXMarker(ctx, target, config.xSize / zoom);
+  ctx.restore();
+}
+function drawXMarker(ctx, point, size) {
+  ctx.save();
+  ctx.translate(point.x, point.y);
+  ctx.beginPath();
+  ctx.moveTo(-size, -size);
+  ctx.lineTo(size, size);
+  ctx.moveTo(size, -size);
+  ctx.lineTo(-size, size);
+  ctx.stroke();
+  ctx.restore();
+}
+function drawMarkerList(config, lines) {
+  const ctx = config.canvas.getTopContext();
+  const vt = config.canvas.viewportTransform;
+  const zoom = config.canvas.getZoom();
+  const markerSize = config.xSize / zoom;
+  ctx.save();
+  ctx.transform(...vt);
+  ctx.lineWidth = config.width / zoom;
+  ctx.strokeStyle = config.color;
+  for (const item of lines) drawXMarker(ctx, item.target, markerSize);
+  ctx.restore();
+}
+function drawVerticalAlignmentLines(config, lines) {
+  for (const v of lines) {
+    const { origin, target } = JSON.parse(v);
+    const from = { x: target.x, y: origin.y };
+    drawAlignmentLine(config, from, target);
+  }
+}
+function drawHorizontalAlignmentLines(config, lines) {
+  for (const h of lines) {
+    const { origin, target } = JSON.parse(h);
+    const from = { x: origin.x, y: target.y };
+    drawAlignmentLine(config, from, target);
+  }
+}
+
+// src/alignment/objectAlignmentMath.ts
+var OPPOSITE_ORIGIN_MAP = {
+  tl: ["right", "bottom"],
+  tr: ["left", "bottom"],
+  br: ["left", "top"],
+  bl: ["right", "top"],
+  mt: ["center", "bottom"],
+  mr: ["left", "center"],
+  mb: ["center", "top"],
+  ml: ["right", "center"]
+};
+function collectMovingAlignmentLines(target, points, margin) {
+  const list = [...getStrokeFreeCoords(target)];
+  list.push(target.getCenterPoint());
+  const opts = { target, list, points, margin };
+  const verticalLines = collectMovingAxisMatches({ ...opts, axis: "x" });
+  const horizontalLines = collectMovingAxisMatches({ ...opts, axis: "y" });
+  return { verticalLines, horizontalLines };
+}
+function collectMovingAxisMatches(props) {
+  const { target, list, points, margin, axis } = props;
+  const result = [];
+  const distances = [];
+  let min = Infinity;
+  for (const item of list) {
+    const nearest = findNearestOnAxis(item, points, axis);
+    distances.push(nearest);
+    if (min > nearest.distance) min = nearest.distance;
+  }
+  if (min > margin) return result;
+  let snapped = false;
+  for (let i = 0; i < list.length; i++) {
+    if (distances[i].distance !== min) continue;
+    for (const item of distances[i].matches) {
+      result.push({ origin: list[i], target: item });
+    }
+    if (snapped) continue;
+    snapped = true;
+    const snapOffset = distances[i].matches[0][axis] - list[i][axis];
+    list.forEach((item) => {
+      item[axis] += snapOffset;
+    });
+    const center = target.getCenterPoint();
+    center[axis] += snapOffset;
+    target.setXY(center, "center", "center");
+    target.setCoords();
+  }
+  return result;
+}
+function collectVerticalSnapOffset(props) {
+  const {
+    target,
+    isScale,
+    isUniform,
+    corner,
+    point,
+    diagonalPoint,
+    list,
+    isCenter,
+    margin
+  } = props;
+  const { distance, matches } = findNearestOnAxis(point, list, "x");
+  if (distance > margin) return [];
+  let snapOffset = matches[matches.length - 1].x - point.x;
+  const dirX = corner.includes("l") ? -1 : 1;
+  snapOffset *= dirX;
+  const { width, height, scaleX, scaleY } = target;
+  const scaleWidth = scaleX * width;
+  const sx = (snapOffset + scaleWidth) / scaleWidth;
+  if (sx === 0) return [];
+  if (isScale) {
+    target.set("scaleX", scaleX * sx);
+    if (isUniform) target.set("scaleY", scaleY * sx);
+  } else {
+    target.set("width", width * sx);
+    if (isUniform) target.set("height", height * sx);
+  }
+  if (isCenter) {
+    target.setRelativeXY(diagonalPoint, "center", "center");
+  } else {
+    target.setRelativeXY(diagonalPoint, ...OPPOSITE_ORIGIN_MAP[corner]);
+  }
+  target.setCoords();
+  return matches.map((t) => ({ origin: point, target: t }));
+}
+function collectHorizontalSnapOffset(props) {
+  const {
+    target,
+    isScale,
+    isUniform,
+    corner,
+    point,
+    diagonalPoint,
+    list,
+    isCenter,
+    margin
+  } = props;
+  const { distance, matches } = findNearestOnAxis(point, list, "y");
+  if (distance > margin) return [];
+  let snapOffset = matches[matches.length - 1].y - point.y;
+  const dirY = corner.includes("t") ? -1 : 1;
+  snapOffset *= dirY;
+  const { width, height, scaleX, scaleY } = target;
+  const scaleHeight = scaleY * height;
+  const sy = (snapOffset + scaleHeight) / scaleHeight;
+  if (sy === 0) return [];
+  if (isScale) {
+    target.set("scaleY", scaleY * sy);
+    if (isUniform) target.set("scaleX", scaleX * sy);
+  } else {
+    target.set("height", height * sy);
+    if (isUniform) target.set("width", width * sy);
+  }
+  if (isCenter) {
+    target.setRelativeXY(diagonalPoint, "center", "center");
+  } else {
+    target.setRelativeXY(diagonalPoint, ...OPPOSITE_ORIGIN_MAP[corner]);
+  }
+  target.setCoords();
+  return matches.map((t) => ({ origin: point, target: t }));
+}
+
+// src/alignment/objectAlignment.ts
+function adjustCornerForFlip(corner, target) {
+  let adjusted = corner;
+  if (target.flipX) {
+    if (adjusted.includes("l")) adjusted = adjusted.replace("l", "r");
+    else if (adjusted.includes("r")) adjusted = adjusted.replace("r", "l");
+  }
+  if (target.flipY) {
+    if (adjusted.includes("t")) adjusted = adjusted.replace("t", "b");
+    else if (adjusted.includes("b")) adjusted = adjusted.replace("b", "t");
+  }
+  return adjusted;
+}
+var ObjectAlignmentGuides = class {
+  canvas;
+  margin;
+  scaleWithCanvasSize;
+  renderConfig;
+  horizontalLines = /* @__PURE__ */ new Set();
+  verticalLines = /* @__PURE__ */ new Set();
+  cacheMap = /* @__PURE__ */ new Map();
+  markersOnly = false;
+  constructor(canvas, opts) {
+    this.canvas = canvas;
+    this.margin = opts?.margin ?? DEFAULT_SNAP_MARGIN;
+    this.scaleWithCanvasSize = opts?.scaleWithCanvasSize ?? true;
+    this.renderConfig = {
+      canvas,
+      width: opts?.width ?? 1,
+      color: opts?.color ?? "rgba(255,0,0,0.9)",
+      xSize: opts?.xSize ?? 2.4,
+      lineDash: opts?.lineDash
+    };
+    this.mouseUp = this.mouseUp.bind(this);
+    this.onMoving = this.onMoving.bind(this);
+    this.onScalingOrResizing = this.onScalingOrResizing.bind(this);
+    this.beforeRender = this.beforeRender.bind(this);
+    this.afterRender = this.afterRender.bind(this);
+    canvas.on("mouse:up", this.mouseUp);
+    canvas.on("object:moving", this.onMoving);
+    canvas.on("object:scaling", this.onScalingOrResizing);
+    canvas.on("object:resizing", this.onScalingOrResizing);
+    canvas.on("before:render", this.beforeRender);
+    canvas.on("after:render", this.afterRender);
+  }
+  dispose() {
+    this.canvas.off("mouse:up", this.mouseUp);
+    this.canvas.off("object:moving", this.onMoving);
+    this.canvas.off("object:scaling", this.onScalingOrResizing);
+    this.canvas.off("object:resizing", this.onScalingOrResizing);
+    this.canvas.off("before:render", this.beforeRender);
+    this.canvas.off("after:render", this.afterRender);
+  }
+  // --- Margin calculation ---
+  computeMargin() {
+    const zoom = this.canvas.getZoom();
+    const sizeScale = this.scaleWithCanvasSize ? Math.max(this.canvas.width ?? 800, this.canvas.height ?? 600) / BASE_CANVAS_SIZE : 1;
+    return this.margin * sizeScale / zoom;
+  }
+  // --- Snap point caching ---
+  getCachedSnapPoints(object) {
+    const cacheKey = [
+      object.calcTransformMatrix().toString(),
+      object.width,
+      object.height,
+      "points" in object && Array.isArray(object.points) ? object.points.length : 0
+    ].join();
+    const cached = this.cacheMap.get(cacheKey);
+    if (cached) return cached;
+    const value = getSnapPoints(object);
+    this.cacheMap.set(cacheKey, value);
+    return value;
+  }
+  collectSnapPointsFromTargets(target) {
+    const objects = getAlignmentTargets(target);
+    const points = [];
+    for (const obj of objects) points.push(...this.getCachedSnapPoints(obj));
+    return points;
+  }
+  // --- Event handlers ---
+  mouseUp() {
+    this.verticalLines.clear();
+    this.horizontalLines.clear();
+    this.cacheMap.clear();
+    this.canvas.requestRenderAll();
+  }
+  onMoving(e) {
+    const target = e.target;
+    target.setCoords();
+    this.markersOnly = false;
+    this.verticalLines.clear();
+    this.horizontalLines.clear();
+    const points = this.collectSnapPointsFromTargets(target);
+    const margin = this.computeMargin();
+    const { verticalLines, horizontalLines } = collectMovingAlignmentLines(
+      target,
+      points,
+      margin
+    );
+    for (const l of verticalLines) this.verticalLines.add(JSON.stringify(l));
+    for (const l of horizontalLines)
+      this.horizontalLines.add(JSON.stringify(l));
+  }
+  onScalingOrResizing(e) {
+    const target = e.target;
+    target.setCoords();
+    const isScale = String(e.transform.action).startsWith("scale");
+    this.verticalLines.clear();
+    this.horizontalLines.clear();
+    const corner = adjustCornerForFlip(e.transform.corner, target);
+    const pointMap = getBoundingPointMap(target);
+    if (!(corner in pointMap)) return;
+    this.markersOnly = corner.includes("m");
+    if (this.markersOnly) {
+      if (target.getTotalAngle() % 90 !== 0) return;
+    }
+    const oppositeMap = getOppositeCornerMap(target);
+    const point = pointMap[corner];
+    let diagonalPoint = oppositeMap[corner];
+    const isCenter = e.transform.original.originX === "center" && e.transform.original.originY === "center";
+    if (isCenter) {
+      const p = target.group ? point.transform(
+        util2.invertTransform(target.group.calcTransformMatrix())
+      ) : point;
+      diagonalPoint = diagonalPoint.add(p).scalarDivide(2);
+    }
+    const uniformIsToggled = e.e[this.canvas.uniScaleKey];
+    let isUniform = this.canvas.uniformScaling && !uniformIsToggled || !this.canvas.uniformScaling && uniformIsToggled;
+    if (this.markersOnly) isUniform = false;
+    const allPoints = this.collectSnapPointsFromTargets(target);
+    const margin = this.computeMargin();
+    const props = {
+      target,
+      point,
+      diagonalPoint,
+      corner,
+      list: allPoints,
+      isScale,
+      isUniform,
+      isCenter,
+      margin
+    };
+    const skipVertical = this.markersOnly && (corner.includes("t") || corner.includes("b"));
+    const skipHorizontal = this.markersOnly && (corner.includes("l") || corner.includes("r"));
+    const vList = skipVertical ? [] : collectVerticalSnapOffset(props);
+    if (vList.length > 0) {
+      const updatedPointMap = getBoundingPointMap(target);
+      if (corner in updatedPointMap) props.point = updatedPointMap[corner];
+    }
+    const hList = skipHorizontal ? [] : collectHorizontalSnapOffset(props);
+    for (const l of vList) this.verticalLines.add(JSON.stringify(l));
+    for (const l of hList) this.horizontalLines.add(JSON.stringify(l));
+  }
+  // --- Render ---
+  beforeRender() {
+    this.canvas.clearContext(this.canvas.contextTop);
+  }
+  afterRender() {
+    if (this.markersOnly) {
+      const lines = [];
+      for (const v of this.verticalLines)
+        lines.push(JSON.parse(v));
+      for (const h of this.horizontalLines)
+        lines.push(JSON.parse(h));
+      drawMarkerList(this.renderConfig, lines);
+    } else {
+      drawVerticalAlignmentLines(this.renderConfig, this.verticalLines);
+      drawHorizontalAlignmentLines(this.renderConfig, this.horizontalLines);
+    }
+  }
+};
+function enableObjectAlignment(canvas, options) {
+  const alignment = new ObjectAlignmentGuides(canvas, options);
+  return () => alignment.dispose();
+}
+
+// src/alignment/rotationSnap.ts
+function snapToInterval(angle, interval) {
+  return Math.round(angle / interval) * interval;
+}
+function enableRotationSnap(canvas, options) {
+  const interval = options?.interval ?? DEFAULT_ANGLE_SNAP_INTERVAL;
+  const onRotating = (e) => {
+    if (!("shiftKey" in e.e) || !e.e.shiftKey) return;
+    e.target.angle = snapToInterval(e.target.angle, interval);
+  };
+  canvas.on("object:rotating", onRotating);
+  return () => canvas.off("object:rotating", onRotating);
+}
+
+// src/alignment/cursorSnapping.ts
+import { Point as Point5 } from "fabric";
+function snapCursorPoint(canvas, rawPoint, options) {
+  const zoom = canvas.getZoom();
+  const scaleWithSize = options?.scaleWithCanvasSize !== false;
+  const sizeScale = scaleWithSize ? Math.max(canvas.width ?? 800, canvas.height ?? 600) / BASE_CANVAS_SIZE : 1;
+  const margin = (options?.margin ?? DEFAULT_SNAP_MARGIN) * sizeScale / zoom;
+  const exclude = options?.exclude ?? /* @__PURE__ */ new Set();
+  let targetPoints;
+  if (options?.targetPoints) {
+    targetPoints = options.targetPoints;
+  } else {
+    targetPoints = [];
+    canvas.forEachObject((obj) => {
+      if (!obj.visible || !obj.isOnScreen()) return;
+      if (exclude.has(obj)) return;
+      targetPoints.push(...getSnapPoints(obj));
+    });
+  }
+  let bestDx = Infinity;
+  let bestDy = Infinity;
+  let snapTargetsX = [];
+  let snapTargetsY = [];
+  for (const tp of targetPoints) {
+    const dx = Math.abs(rawPoint.x - tp.x);
+    const dy = Math.abs(rawPoint.y - tp.y);
+    if (dx < bestDx) {
+      bestDx = dx;
+      snapTargetsX = [];
+    }
+    if (dx === bestDx) {
+      snapTargetsX.push(tp);
+    }
+    if (dy < bestDy) {
+      bestDy = dy;
+      snapTargetsY = [];
+    }
+    if (dy === bestDy) {
+      snapTargetsY.push(tp);
+    }
+  }
+  const snapX = bestDx <= margin && snapTargetsX.length > 0;
+  const snapY = bestDy <= margin && snapTargetsY.length > 0;
+  return {
+    point: new Point5(
+      snapX ? snapTargetsX[0].x : rawPoint.x,
+      snapY ? snapTargetsY[0].y : rawPoint.y
+    ),
+    snapped: snapX || snapY,
+    snapX,
+    snapY,
+    alignTargetsX: snapX ? snapTargetsX : void 0,
+    alignTargetsY: snapY ? snapTargetsY : void 0
+  };
+}
+function drawCursorGuidelines(canvas, snapResult, style) {
+  if (!snapResult.snapped) return;
+  const ctx = canvas.getTopContext();
+  const vt = canvas.viewportTransform;
+  const zoom = canvas.getZoom();
+  const color = style?.color ?? "rgba(255,0,0,0.9)";
+  const width = style?.width ?? 1;
+  const xSize = (style?.xSize ?? 2.4) / zoom;
+  ctx.save();
+  ctx.transform(vt[0], vt[1], vt[2], vt[3], vt[4], vt[5]);
+  ctx.lineWidth = width / zoom;
+  ctx.strokeStyle = color;
+  if (snapResult.snapX && snapResult.alignTargetsX) {
+    const to = snapResult.point;
+    for (const from of snapResult.alignTargetsX) {
+      ctx.beginPath();
+      ctx.moveTo(from.x, from.y);
+      ctx.lineTo(to.x, to.y);
+      ctx.stroke();
+      drawXMarker2(ctx, from, xSize);
+    }
+    drawXMarker2(ctx, new Point5(to.x, to.y), xSize);
+  }
+  if (snapResult.snapY && snapResult.alignTargetsY) {
+    const to = snapResult.point;
+    for (const from of snapResult.alignTargetsY) {
+      ctx.beginPath();
+      ctx.moveTo(from.x, from.y);
+      ctx.lineTo(to.x, to.y);
+      ctx.stroke();
+      drawXMarker2(ctx, from, xSize);
+    }
+    drawXMarker2(ctx, new Point5(to.x, to.y), xSize);
+  }
+  ctx.restore();
+}
+function drawXMarker2(ctx, point, size) {
+  ctx.beginPath();
+  ctx.moveTo(point.x - size, point.y - size);
+  ctx.lineTo(point.x + size, point.y + size);
+  ctx.moveTo(point.x + size, point.y - size);
+  ctx.lineTo(point.x - size, point.y + size);
+  ctx.stroke();
+}
+
+// src/interactions/shared.ts
+function restoreViewport(viewport) {
+  if (!viewport) return;
+  viewport.setEnabled(true);
+  viewport.setMode("select");
+}
+function createShiftKeyTracker(onChange) {
+  let shiftHeld = false;
+  const onKeyDown = (e) => {
+    if (e.key === "Shift" && !shiftHeld) {
+      shiftHeld = true;
+      onChange?.(true);
+    }
+  };
+  const onKeyUp = (e) => {
+    if (e.key === "Shift" && shiftHeld) {
+      shiftHeld = false;
+      onChange?.(false);
+    }
+  };
+  document.addEventListener("keydown", onKeyDown);
+  document.addEventListener("keyup", onKeyUp);
+  return {
+    get held() {
+      return shiftHeld;
+    },
+    cleanup() {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("keyup", onKeyUp);
+    }
+  };
+}
+
+// src/interactions/clickToCreate.ts
+function enableClickToCreate(canvas, factory, options) {
+  options?.viewport?.setEnabled(false);
+  const handleMouseDown = (event) => {
+    const obj = factory(canvas, event.scenePoint);
+    restoreViewport(options?.viewport);
+    options?.onCreated?.(obj);
+  };
+  canvas.on("mouse:down", handleMouseDown);
+  return () => {
+    canvas.off("mouse:down", handleMouseDown);
+    restoreViewport(options?.viewport);
+  };
+}
+
+// src/interactions/dragToCreate.ts
+import { Rect as Rect2 } from "fabric";
+
+// src/styles.ts
+import { alpha } from "@mui/material/styles";
+import { biampTheme } from "@bwp-web/styles";
+var { palette } = biampTheme();
+var DEFAULT_CONTROL_STYLE = {
+  borderColor: palette.info.main,
+  cornerColor: palette.info.main,
+  cornerStrokeColor: palette.info.main,
+  transparentCorners: true
+};
+var DEFAULT_SHAPE_STYLE = {
+  fill: alpha(palette.info.main, 0.3),
+  stroke: palette.info.main,
+  strokeWidth: 2.5,
+  strokeUniform: true,
+  ...DEFAULT_CONTROL_STYLE
+};
+var DEFAULT_CIRCLE_STYLE = {
+  fill: palette.info.main,
+  stroke: palette.info.main,
+  strokeWidth: 2.5,
+  strokeUniform: true,
+  ...DEFAULT_CONTROL_STYLE
+};
+var DEFAULT_DRAG_SHAPE_STYLE = {
+  fill: alpha(palette.info.main, 0.1),
+  stroke: palette.info.main,
+  strokeWidth: 2.5,
+  strokeUniform: true,
+  strokeDashArray: [5, 5]
+};
+var DEFAULT_GUIDELINE_SHAPE_STYLE = {
+  fill: alpha(palette.info.main, 0.1),
+  stroke: alpha(palette.info.main, 0.5),
+  strokeWidth: 2.5,
+  strokeUniform: true,
+  strokeDashArray: [5, 5]
+};
+var DEFAULT_ALIGNMENT_STYLE = {
+  color: "rgba(255, 0, 0, 0.9)",
+  width: 1,
+  xSize: 2.4
+};
+
+// src/interactions/interactionSnapping.ts
+import { Point as Point6 } from "fabric";
+var canvasAlignmentState = /* @__PURE__ */ new WeakMap();
+function setCanvasAlignmentEnabled(canvas, enabled) {
+  canvasAlignmentState.set(canvas, enabled);
+}
+function createInteractionSnapping(canvas, options, getAdditionalTargets) {
+  const canvasAlignment = canvasAlignmentState.get(canvas);
+  const snapEnabled = options?.enableAlignment !== void 0 ? options.enableAlignment : canvasAlignment !== void 0 ? canvasAlignment : options?.snapping !== false;
+  const snapMargin = typeof options?.snapping === "object" ? options.snapping.margin : void 0;
+  const guidelineStyle = typeof options?.snapping === "object" ? options.snapping.guidelineStyle : void 0;
+  const excludeSet = /* @__PURE__ */ new Set();
+  let cachedTargetPoints = null;
+  let lastSnapResult = null;
+  function getTargetPoints() {
+    if (cachedTargetPoints) return cachedTargetPoints;
+    cachedTargetPoints = [];
+    canvas.forEachObject((obj) => {
+      if (!obj.visible) return;
+      if (excludeSet.has(obj)) return;
+      cachedTargetPoints.push(...getSnapPoints(obj));
+    });
+    return cachedTargetPoints;
+  }
+  function getAllTargetPoints() {
+    const base = getTargetPoints();
+    if (!getAdditionalTargets) return base;
+    const additional = getAdditionalTargets();
+    return additional.length > 0 ? [...base, ...additional] : base;
+  }
+  const invalidateCache = () => {
+    cachedTargetPoints = null;
+  };
+  const beforeRender = () => {
+    canvas.clearContext(canvas.getTopContext());
+  };
+  const afterRender = () => {
+    if (lastSnapResult) {
+      drawCursorGuidelines(canvas, lastSnapResult, guidelineStyle);
+    }
+  };
+  if (snapEnabled) {
+    canvas.on("object:added", invalidateCache);
+    canvas.on("object:removed", invalidateCache);
+    canvas.on("before:render", beforeRender);
+    canvas.on("after:render", afterRender);
+  }
+  function snap(rawX, rawY) {
+    if (!snapEnabled) return { x: rawX, y: rawY };
+    const result = snapCursorPoint(canvas, new Point6(rawX, rawY), {
+      margin: snapMargin,
+      exclude: excludeSet,
+      targetPoints: getAllTargetPoints()
+    });
+    return { x: result.point.x, y: result.point.y };
+  }
+  function snapWithGuidelines(rawX, rawY) {
+    if (!snapEnabled) {
+      lastSnapResult = null;
+      return { x: rawX, y: rawY };
+    }
+    lastSnapResult = snapCursorPoint(canvas, new Point6(rawX, rawY), {
+      margin: snapMargin,
+      exclude: excludeSet,
+      targetPoints: getAllTargetPoints()
+    });
+    return { x: lastSnapResult.point.x, y: lastSnapResult.point.y };
+  }
+  return {
+    enabled: snapEnabled,
+    snap,
+    snapWithGuidelines,
+    clearSnapResult() {
+      lastSnapResult = null;
+    },
+    excludeSet,
+    cleanup() {
+      if (snapEnabled) {
+        canvas.off("object:added", invalidateCache);
+        canvas.off("object:removed", invalidateCache);
+        canvas.off("before:render", beforeRender);
+        canvas.off("after:render", afterRender);
+        canvas.clearContext(canvas.getTopContext());
+      }
+      lastSnapResult = null;
+    }
+  };
+}
+
+// src/interactions/dragToCreate.ts
+function enableDragToCreate(canvas, factory, options) {
+  let isDrawing = false;
+  let startX = 0;
+  let startY = 0;
+  let lastEndX = 0;
+  let lastEndY = 0;
+  let previewRect = null;
+  let previousSelection;
+  const snapping = createInteractionSnapping(canvas, options);
+  const shiftTracker = createShiftKeyTracker(() => {
+    updatePreview(lastEndX, lastEndY);
+  });
+  options?.viewport?.setEnabled(false);
+  const shouldConstrain = () => !!(options?.constrainToSquare || shiftTracker.held);
+  const computeDimensions = (endX, endY) => {
+    let width = Math.max(0, endX - startX);
+    let height = Math.max(0, endY - startY);
+    if (shouldConstrain()) {
+      const size = Math.max(width, height);
+      width = size;
+      height = size;
+    }
+    return { width, height };
+  };
+  const updatePreview = (endX, endY) => {
+    lastEndX = endX;
+    lastEndY = endY;
+    if (!isDrawing || !previewRect) return;
+    const { width, height } = computeDimensions(endX, endY);
+    previewRect.set({
+      left: startX + width / 2,
+      top: startY + height / 2,
+      width,
+      height
+    });
+    previewRect.setCoords();
+    canvas.requestRenderAll();
+  };
+  const handleMouseDown = (event) => {
+    isDrawing = true;
+    const snapped = snapping.snap(event.scenePoint.x, event.scenePoint.y);
+    startX = snapped.x;
+    startY = snapped.y;
+    lastEndX = startX;
+    lastEndY = startY;
+    previousSelection = canvas.selection;
+    canvas.selection = false;
+    previewRect = new Rect2({
+      ...DEFAULT_GUIDELINE_SHAPE_STYLE,
+      left: startX,
+      top: startY,
+      width: 0,
+      height: 0,
+      ...options?.previewStyle,
+      selectable: false,
+      evented: false
+    });
+    snapping.excludeSet.add(previewRect);
+    canvas.add(previewRect);
+  };
+  const handleMouseMove = (event) => {
+    if (!isDrawing || !previewRect) return;
+    const { x: endX, y: endY } = snapping.snapWithGuidelines(
+      event.scenePoint.x,
+      event.scenePoint.y
+    );
+    updatePreview(endX, endY);
+  };
+  const handleMouseUp = () => {
+    if (!isDrawing || !previewRect) return;
+    isDrawing = false;
+    snapping.clearSnapResult();
+    canvas.selection = previousSelection;
+    const { width, height } = computeDimensions(lastEndX, lastEndY);
+    snapping.excludeSet.delete(previewRect);
+    canvas.remove(previewRect);
+    if (width < MIN_DRAG_SIZE && height < MIN_DRAG_SIZE) {
+      canvas.requestRenderAll();
+      previewRect = null;
+      return;
+    }
+    const obj = factory(canvas, { startX, startY, width, height });
+    restoreViewport(options?.viewport);
+    options?.onCreated?.(obj);
+    previewRect = null;
+  };
+  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);
+    shiftTracker.cleanup();
+    snapping.cleanup();
+    if (isDrawing && previewRect) {
+      canvas.remove(previewRect);
+      canvas.requestRenderAll();
+    }
+    restoreViewport(options?.viewport);
+  };
+}
+
+// src/interactions/drawToCreate.ts
+import {
+  Circle,
+  Line,
+  Point as Point7
+} from "fabric";
+
+// src/shapes/rectangle.ts
+import { Rect as Rect3 } from "fabric";
+function createRectangle(canvas, options) {
+  const rect = new Rect3({ ...DEFAULT_SHAPE_STYLE, ...options });
+  canvas.add(rect);
+  canvas.requestRenderAll();
+  return rect;
+}
+function createRectangleAtPoint(canvas, point, options) {
+  const { width, height, ...style } = options;
+  const rect = new Rect3({
+    ...DEFAULT_SHAPE_STYLE,
+    left: point.x,
+    top: point.y,
+    width,
+    height,
+    ...style
+  });
+  canvas.add(rect);
+  canvas.requestRenderAll();
+  return rect;
+}
+function editRectangle(canvas, rect, changes) {
+  rect.set(changes);
+  rect.setCoords();
+  canvas.requestRenderAll();
+}
+
+// src/shapes/circle.ts
+import { Rect as Rect4 } from "fabric";
+var CIRCLE_CONSTRAINTS = {
+  lockRotation: true,
+  lockUniScaling: true
+};
+var HIDDEN_CIRCLE_CONTROLS = {
+  mt: false,
+  mb: false,
+  ml: false,
+  mr: false,
+  mtr: false
+};
+function applyCircleConstraints(rect) {
+  rect.shapeType = "circle";
+  rect.setControlsVisibility(HIDDEN_CIRCLE_CONTROLS);
+}
+function restoreCircleConstraints(rect) {
+  rect.set(CIRCLE_CONSTRAINTS);
+  rect.setControlsVisibility(HIDDEN_CIRCLE_CONTROLS);
+}
+function createCircle(canvas, options) {
+  const { size, ...rest } = options;
+  const rect = new Rect4({
+    ...DEFAULT_CIRCLE_STYLE,
+    ...CIRCLE_CONSTRAINTS,
+    width: size,
+    height: size,
+    rx: size / 2,
+    ry: size / 2,
+    ...rest
+  });
+  applyCircleConstraints(rect);
+  canvas.add(rect);
+  canvas.requestRenderAll();
+  return rect;
+}
+function createCircleAtPoint(canvas, point, options) {
+  const { size, ...style } = options;
+  const rect = new Rect4({
+    ...DEFAULT_CIRCLE_STYLE,
+    ...CIRCLE_CONSTRAINTS,
+    left: point.x,
+    top: point.y,
+    width: size,
+    height: size,
+    rx: size / 2,
+    ry: size / 2,
+    ...style
+  });
+  applyCircleConstraints(rect);
+  canvas.add(rect);
+  canvas.requestRenderAll();
+  return rect;
+}
+function editCircle(canvas, rect, changes) {
+  const { size, ...rest } = changes;
+  if (size !== void 0) {
+    rect.set({
+      width: size,
+      height: size,
+      rx: size / 2,
+      ry: size / 2,
+      ...rest
+    });
+  } else {
+    rect.set(rest);
+  }
+  rect.setCoords();
+  canvas.requestRenderAll();
+}
+
+// src/shapes/polygon.ts
+import { Polygon as Polygon2 } from "fabric";
+function createPolygon(canvas, options) {
+  const { points, ...rest } = options;
+  const polygon = new Polygon2(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 Polygon2(
+    [
+      { x: 0, y: 0 },
+      { x: width, y: 0 },
+      { x: width, y: height },
+      { x: 0, y: height }
+    ],
+    { ...DEFAULT_SHAPE_STYLE, left: point.x, top: point.y, ...style }
+  );
+  canvas.add(polygon);
+  canvas.requestRenderAll();
+  return polygon;
+}
+function createPolygonFromDrag(canvas, start, end, style) {
+  const width = Math.abs(end.x - start.x);
+  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 Polygon2(
+    [
+      { x: 0, y: 0 },
+      { x: width, y: 0 },
+      { x: width, y: height },
+      { x: 0, y: height }
+    ],
+    { ...DEFAULT_SHAPE_STYLE, left, top, ...style }
+  );
+  canvas.add(polygon);
+  canvas.requestRenderAll();
+  return polygon;
+}
+function createPolygonFromVertices(canvas, points, style) {
+  const polygon = new Polygon2(
+    points.map((p) => ({ x: p.x, y: p.y })),
+    { ...DEFAULT_SHAPE_STYLE, ...style }
+  );
+  canvas.add(polygon);
+  canvas.requestRenderAll();
+  return polygon;
+}
+function editPolygon(canvas, polygon, changes) {
+  const { points, ...rest } = changes;
+  if (points) {
+    polygon.points = points;
+    polygon.setDimensions();
+  }
+  polygon.set(rest);
+  polygon.setCoords();
+  canvas.requestRenderAll();
+}
+
+// src/interactions/drawToCreate.ts
+function snapAngleToInterval(point, ref, intervalDeg) {
+  const dx = point.x - ref.x;
+  const dy = point.y - ref.y;
+  const dist = Math.sqrt(dx * dx + dy * dy);
+  if (dist === 0) return point;
+  const radInterval = intervalDeg * Math.PI / 180;
+  const snappedAngle = Math.round(Math.atan2(dy, dx) / radInterval) * radInterval;
+  return {
+    x: ref.x + Math.cos(snappedAngle) * dist,
+    y: ref.y + Math.sin(snappedAngle) * dist
+  };
+}
+function snapAlongRay(angleSnapped, ref, doSnap) {
+  const cursorSnapped = doSnap(angleSnapped.x, angleSnapped.y);
+  const snappedX = cursorSnapped.x !== angleSnapped.x;
+  const snappedY = cursorSnapped.y !== angleSnapped.y;
+  if (!snappedX && !snappedY) return angleSnapped;
+  const rayDx = angleSnapped.x - ref.x;
+  const rayDy = angleSnapped.y - ref.y;
+  const candidates = [];
+  if (snappedX && Math.abs(rayDx) > 1e-9) {
+    const t = (cursorSnapped.x - ref.x) / rayDx;
+    const onRayY = ref.y + t * rayDy;
+    candidates.push({
+      x: cursorSnapped.x,
+      y: onRayY,
+      dist: Math.abs(onRayY - angleSnapped.y)
+    });
+  }
+  if (snappedY && Math.abs(rayDy) > 1e-9) {
+    const t = (cursorSnapped.y - ref.y) / rayDy;
+    const onRayX = ref.x + t * rayDx;
+    candidates.push({
+      x: onRayX,
+      y: cursorSnapped.y,
+      dist: Math.abs(onRayX - angleSnapped.x)
+    });
+  }
+  if (candidates.length === 0) return angleSnapped;
+  candidates.sort((a, b) => a.dist - b.dist);
+  const best = candidates[0];
+  doSnap(best.x, best.y);
+  return best;
+}
+function enableDrawToCreate(canvas, options) {
+  let exited = false;
+  const angleSnapEnabled = options?.angleSnap !== false;
+  const angleInterval = typeof options?.angleSnap === "object" ? options.angleSnap.interval ?? DEFAULT_ANGLE_SNAP_INTERVAL : DEFAULT_ANGLE_SNAP_INTERVAL;
+  const shiftTracker = createShiftKeyTracker();
+  const points = [];
+  const markers = [];
+  const edgeLines = [];
+  let trackingLine = null;
+  let closingLine = null;
+  let previousSelection;
+  const snapping = createInteractionSnapping(
+    canvas,
+    options,
+    () => points.map((p) => new Point7(p.x, p.y))
+  );
+  function trackPreviewElement(obj) {
+    snapping.excludeSet.add(obj);
+  }
+  function untrackPreviewElement(obj) {
+    snapping.excludeSet.delete(obj);
+  }
+  options?.viewport?.setEnabled(false);
+  const lineStyle = {
+    stroke: options?.style?.stroke ?? DEFAULT_DRAG_SHAPE_STYLE.stroke,
+    strokeWidth: options?.style?.strokeWidth ?? DEFAULT_DRAG_SHAPE_STYLE.strokeWidth,
+    strokeUniform: true,
+    selectable: false,
+    evented: false
+  };
+  const guideLineStyle = {
+    stroke: options?.style?.stroke ?? DEFAULT_GUIDELINE_SHAPE_STYLE.stroke,
+    strokeWidth: options?.style?.strokeWidth ?? DEFAULT_GUIDELINE_SHAPE_STYLE.strokeWidth,
+    strokeUniform: true,
+    selectable: false,
+    evented: false
+  };
+  const removePreviewElements = () => {
+    for (const marker of markers) {
+      canvas.remove(marker);
+      untrackPreviewElement(marker);
+    }
+    markers.length = 0;
+    for (const line of edgeLines) {
+      canvas.remove(line);
+      untrackPreviewElement(line);
+    }
+    edgeLines.length = 0;
+    if (trackingLine) {
+      canvas.remove(trackingLine);
+      untrackPreviewElement(trackingLine);
+      trackingLine = null;
+    }
+    if (closingLine) {
+      canvas.remove(closingLine);
+      untrackPreviewElement(closingLine);
+      closingLine = null;
+    }
+  };
+  const finalize = () => {
+    removePreviewElements();
+    snapping.clearSnapResult();
+    const polygon = createPolygonFromVertices(canvas, points, options?.style);
+    canvas.selection = previousSelection;
+    canvas.requestRenderAll();
+    restoreViewport(options?.viewport);
+    options?.onCreated?.(polygon);
+    points.length = 0;
+  };
+  const handleMouseDown = (event) => {
+    let { x, y } = event.scenePoint;
+    if (angleSnapEnabled && shiftTracker.held && points.length > 0) {
+      const ref = points[points.length - 1];
+      const angleSnapped = snapAngleToInterval({ x, y }, ref, angleInterval);
+      ({ x, y } = snapAlongRay(
+        angleSnapped,
+        ref,
+        (sx, sy) => snapping.snap(sx, sy)
+      ));
+    } else {
+      ({ x, y } = snapping.snap(x, y));
+    }
+    snapping.clearSnapResult();
+    if (points.length >= 3) {
+      const dx = x - points[0].x;
+      const dy = y - points[0].y;
+      if (Math.sqrt(dx * dx + dy * dy) <= POLYGON_CLOSE_THRESHOLD) {
+        finalize();
+        return;
+      }
+    }
+    if (points.length === 0) {
+      previousSelection = canvas.selection;
+      canvas.selection = false;
+    }
+    points.push({ x, y });
+    const marker = new Circle({
+      left: x,
+      top: y,
+      radius: 4,
+      fill: DEFAULT_SHAPE_STYLE.stroke,
+      stroke: DEFAULT_SHAPE_STYLE.stroke,
+      strokeWidth: 1,
+      strokeUniform: true,
+      selectable: false,
+      evented: false
+    });
+    markers.push(marker);
+    trackPreviewElement(marker);
+    canvas.add(marker);
+    if (points.length >= 2) {
+      const prev = points[points.length - 2];
+      const edge = new Line([prev.x, prev.y, x, y], lineStyle);
+      edgeLines.push(edge);
+      trackPreviewElement(edge);
+      canvas.add(edge);
+    }
+    canvas.requestRenderAll();
+  };
+  const handleMouseMove = (event) => {
+    if (points.length === 0) return;
+    const lastPoint = points[points.length - 1];
+    let { x, y } = event.scenePoint;
+    if (angleSnapEnabled && shiftTracker.held) {
+      const angleSnapped = snapAngleToInterval(
+        { x, y },
+        lastPoint,
+        angleInterval
+      );
+      ({ x, y } = snapAlongRay(
+        angleSnapped,
+        lastPoint,
+        (sx, sy) => snapping.snapWithGuidelines(sx, sy)
+      ));
+    } else {
+      ({ x, y } = snapping.snapWithGuidelines(x, y));
+    }
+    if (trackingLine) {
+      untrackPreviewElement(trackingLine);
+      canvas.remove(trackingLine);
+    }
+    trackingLine = new Line([lastPoint.x, lastPoint.y, x, y], {
+      ...guideLineStyle,
+      strokeDashArray: [5, 5]
+    });
+    trackPreviewElement(trackingLine);
+    canvas.add(trackingLine);
+    if (closingLine) {
+      untrackPreviewElement(closingLine);
+      canvas.remove(closingLine);
+      closingLine = null;
+    }
+    if (points.length >= 3) {
+      closingLine = new Line([x, y, points[0].x, points[0].y], {
+        ...guideLineStyle,
+        strokeDashArray: [5, 5]
+      });
+      trackPreviewElement(closingLine);
+      canvas.add(closingLine);
+    }
+    canvas.requestRenderAll();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape" || e.key === "Backspace") {
+      e.stopImmediatePropagation();
+      e.preventDefault();
+      cleanup("cancel");
+    }
+  };
+  canvas.on("mouse:down", handleMouseDown);
+  canvas.on("mouse:move", handleMouseMove);
+  document.addEventListener("keydown", handleKeyDown, true);
+  function cleanup(reason) {
+    if (exited) return;
+    exited = true;
+    canvas.off("mouse:down", handleMouseDown);
+    canvas.off("mouse:move", handleMouseMove);
+    document.removeEventListener("keydown", handleKeyDown, true);
+    shiftTracker.cleanup();
+    snapping.cleanup();
+    removePreviewElements();
+    if (points.length > 0) {
+      canvas.selection = previousSelection;
+    }
+    points.length = 0;
+    canvas.requestRenderAll();
+    restoreViewport(options?.viewport);
+    if (reason === "cancel") {
+      options?.onCancel?.();
+    }
+  }
+  return () => cleanup();
+}
+
+// src/interactions/vertexEdit.ts
+import {
+  Point as Point8,
+  util as util3
+} from "fabric";
+function localPointToScene(polygon, point) {
+  const matrix = polygon.calcTransformMatrix();
+  const localPoint = new Point8(
+    point.x - polygon.pathOffset.x,
+    point.y - polygon.pathOffset.y
+  );
+  return util3.transformPoint(localPoint, matrix);
+}
+function scenePointToLocal(polygon, scenePoint) {
+  const matrix = polygon.calcTransformMatrix();
+  const invMatrix = util3.invertTransform(matrix);
+  const localPoint = util3.transformPoint(scenePoint, invMatrix);
+  return {
+    x: localPoint.x + polygon.pathOffset.x,
+    y: localPoint.y + polygon.pathOffset.y
+  };
+}
+function sceneToScreen(scenePoint, canvas) {
+  return util3.transformPoint(scenePoint, canvas.viewportTransform);
+}
+function screenToScene(screenX, screenY, canvas) {
+  const inv = util3.invertTransform(canvas.viewportTransform);
+  return util3.transformPoint(new Point8(screenX, screenY), inv);
+}
+function createHandleElement(radius, fill, stroke, strokeWidth) {
+  const el = document.createElement("div");
+  const size = radius * 2;
+  el.style.cssText = [
+    "position: absolute",
+    `width: ${size}px`,
+    `height: ${size}px`,
+    `margin-left: ${-radius}px`,
+    `margin-top: ${-radius}px`,
+    "border-radius: 50%",
+    `background: ${fill}`,
+    `border: ${strokeWidth}px solid ${stroke}`,
+    "box-sizing: border-box",
+    "pointer-events: auto",
+    "cursor: grab",
+    "touch-action: none"
+  ].join("; ");
+  return el;
+}
+function positionHandle(handle, scenePoint, canvas) {
+  const screen = sceneToScreen(scenePoint, canvas);
+  handle.style.left = `${screen.x}px`;
+  handle.style.top = `${screen.y}px`;
+}
+function enableVertexEdit(canvas, polygon, options, onExit) {
+  let exited = false;
+  let draggingIndex = null;
+  const handleRadius = options?.handleRadius ?? DEFAULT_VERTEX_HANDLE_RADIUS;
+  const handleFill = options?.handleFill ?? DEFAULT_VERTEX_HANDLE_FILL;
+  const handleStroke = options?.handleStroke ?? DEFAULT_VERTEX_HANDLE_STROKE;
+  const handleStrokeWidth = options?.handleStrokeWidth ?? DEFAULT_VERTEX_HANDLE_STROKE_WIDTH;
+  const previousState = {
+    selectable: polygon.selectable,
+    evented: polygon.evented,
+    hasControls: polygon.hasControls,
+    canvasSelection: canvas.selection
+  };
+  const prevObjectStates = /* @__PURE__ */ new Map();
+  polygon.selectable = false;
+  polygon.evented = false;
+  polygon.hasControls = false;
+  canvas.selection = false;
+  canvas.discardActiveObject();
+  canvas.forEachObject((obj) => {
+    if (obj !== polygon) {
+      prevObjectStates.set(obj, {
+        selectable: obj.selectable,
+        evented: obj.evented
+      });
+      obj.selectable = false;
+      obj.evented = false;
+    }
+  });
+  const snapping = createInteractionSnapping(canvas, void 0, () => {
+    if (draggingIndex === null) return [];
+    return polygon.points.filter((_, i) => i !== draggingIndex).map((pt) => localPointToScene(polygon, pt));
+  });
+  snapping.excludeSet.add(polygon);
+  const container = document.createElement("div");
+  container.style.cssText = "position: absolute; inset: 0; pointer-events: none; overflow: hidden;";
+  canvas.wrapperEl.appendChild(container);
+  const handles = [];
+  const points = polygon.points;
+  for (let i = 0; i < points.length; i++) {
+    const handle = createHandleElement(
+      handleRadius,
+      handleFill,
+      handleStroke,
+      handleStrokeWidth
+    );
+    positionHandle(handle, localPointToScene(polygon, points[i]), canvas);
+    container.appendChild(handle);
+    handles.push(handle);
+    handle.addEventListener("pointerdown", (e) => {
+      if (exited) return;
+      e.preventDefault();
+      e.stopPropagation();
+      draggingIndex = i;
+      handle.setPointerCapture(e.pointerId);
+      handle.style.cursor = "grabbing";
+    });
+    handle.addEventListener("pointermove", (e) => {
+      if (draggingIndex !== i) return;
+      const wrapperRect = canvas.wrapperEl.getBoundingClientRect();
+      const canvasRelX = e.clientX - wrapperRect.left;
+      const canvasRelY = e.clientY - wrapperRect.top;
+      const rawScene = screenToScene(canvasRelX, canvasRelY, canvas);
+      const snapped = snapping.snapWithGuidelines(rawScene.x, rawScene.y);
+      const scenePoint = new Point8(snapped.x, snapped.y);
+      const anchorIdx = i === 0 ? 1 : 0;
+      const anchorBefore = localPointToScene(
+        polygon,
+        polygon.points[anchorIdx]
+      );
+      const localPoint = scenePointToLocal(polygon, scenePoint);
+      polygon.points[i] = localPoint;
+      polygon.setDimensions();
+      const anchorAfter = localPointToScene(polygon, polygon.points[anchorIdx]);
+      polygon.left += anchorBefore.x - anchorAfter.x;
+      polygon.top += anchorBefore.y - anchorAfter.y;
+      polygon.dirty = true;
+      polygon.setCoords();
+      repositionAllHandles();
+      canvas.requestRenderAll();
+    });
+    handle.addEventListener("pointerup", (e) => {
+      if (draggingIndex !== i) return;
+      handle.releasePointerCapture(e.pointerId);
+      draggingIndex = null;
+      handle.style.cursor = "grab";
+      snapping.clearSnapResult();
+      canvas.requestRenderAll();
+    });
+  }
+  function repositionAllHandles() {
+    const pts = polygon.points;
+    for (let j = 0; j < pts.length; j++) {
+      positionHandle(handles[j], localPointToScene(polygon, pts[j]), canvas);
+    }
+  }
+  const afterRender = () => {
+    if (draggingIndex === null) {
+      repositionAllHandles();
+    }
+  };
+  canvas.on("after:render", afterRender);
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.stopImmediatePropagation();
+      cleanup();
+    }
+  };
+  document.addEventListener("keydown", handleKeyDown, true);
+  const handleMouseDown = () => {
+    cleanup();
+  };
+  canvas.on("mouse:down", handleMouseDown);
+  function cleanup() {
+    if (exited) return;
+    exited = true;
+    snapping.cleanup();
+    canvas.off("after:render", afterRender);
+    canvas.off("mouse:down", handleMouseDown);
+    document.removeEventListener("keydown", handleKeyDown, true);
+    container.remove();
+    polygon.selectable = previousState.selectable;
+    polygon.evented = previousState.evented;
+    polygon.hasControls = previousState.hasControls;
+    canvas.selection = previousState.canvasSelection;
+    prevObjectStates.forEach((state, obj) => {
+      obj.selectable = state.selectable;
+      obj.evented = state.evented;
+    });
+    canvas.discardActiveObject();
+    canvas.requestRenderAll();
+    onExit?.();
+  }
+  return cleanup;
+}
+
+// src/serialization.ts
+import { Rect as Rect5 } from "fabric";
+var strokeBaseMap = /* @__PURE__ */ new WeakMap();
+function enableScaledStrokes(canvas) {
+  function applyScaledStrokes() {
+    const zoom = canvas.getZoom();
+    canvas.forEachObject((obj) => {
+      if (!obj.strokeWidth && obj.strokeWidth !== 0) return;
+      if (!strokeBaseMap.has(obj)) {
+        strokeBaseMap.set(obj, obj.strokeWidth ?? 0);
+      }
+      const base = strokeBaseMap.get(obj);
+      if (base === 0) return;
+      obj.strokeWidth = base / zoom;
+    });
+  }
+  canvas.on("before:render", applyScaledStrokes);
+  return () => {
+    canvas.off("before:render", applyScaledStrokes);
+    canvas.forEachObject((obj) => {
+      const base = strokeBaseMap.get(obj);
+      if (base !== void 0) {
+        obj.strokeWidth = base;
+      }
+    });
+  };
+}
+function getBaseStrokeWidth(obj) {
+  return strokeBaseMap.get(obj) ?? obj.strokeWidth ?? 0;
+}
+function serializeCanvas(canvas, options) {
+  const properties = [
+    "data",
+    "shapeType",
+    // Control styling — absent from Fabric's default toObject output
+    "borderColor",
+    "cornerColor",
+    "cornerStrokeColor",
+    "transparentCorners",
+    // Interaction locks — absent from Fabric's default toObject output
+    "lockRotation",
+    "lockUniScaling",
+    ...options?.properties ?? []
+  ];
+  const scaledWidths = /* @__PURE__ */ new Map();
+  canvas.forEachObject((obj) => {
+    const base = strokeBaseMap.get(obj);
+    if (base !== void 0 && obj.strokeWidth !== base) {
+      scaledWidths.set(obj, obj.strokeWidth ?? 0);
+      obj.strokeWidth = base;
+    }
+  });
+  const json = canvas.toObject(properties);
+  scaledWidths.forEach((scaled, obj) => {
+    obj.strokeWidth = scaled;
+  });
+  return json;
+}
+async function loadCanvas(canvas, json) {
+  await canvas.loadFromJSON(json);
+  canvas.forEachObject((obj) => {
+    obj.set(DEFAULT_CONTROL_STYLE);
+    if (obj.shapeType === "circle" && obj instanceof Rect5) {
+      restoreCircleConstraints(obj);
+    }
+  });
+  canvas.requestRenderAll();
+}
+
+// src/hooks/useEditCanvas.ts
+function useEditCanvas(options) {
+  const canvasRef = useRef2(null);
+  const viewportRef = useRef2(null);
+  const alignmentCleanupRef = useRef2(null);
+  const rotationSnapCleanupRef = useRef2(null);
+  const modeCleanupRef = useRef2(null);
+  const vertexEditCleanupRef = useRef2(null);
+  const keyboardCleanupRef = useRef2(null);
+  const [zoom, setZoom] = useState(1);
+  const [selected, setSelected] = useState([]);
+  const [viewportMode, setViewportModeState] = useState("select");
+  const [isEditingVertices, setIsEditingVertices] = useState(false);
+  const setMode = useCallback((setup) => {
+    vertexEditCleanupRef.current?.();
+    vertexEditCleanupRef.current = null;
+    setIsEditingVertices(false);
+    modeCleanupRef.current?.();
+    modeCleanupRef.current = null;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    if (setup === null) {
+      canvas.selection = true;
+      canvas.forEachObject((obj) => {
+        obj.selectable = true;
+        obj.evented = true;
+      });
+    } else {
+      canvas.selection = false;
+      canvas.forEachObject((obj) => {
+        obj.selectable = false;
+        obj.evented = false;
+      });
+      const cleanup = setup(canvas, viewportRef.current ?? void 0);
+      if (cleanup) {
+        modeCleanupRef.current = cleanup;
+      }
+    }
+  }, []);
+  const onReady = useCallback(
+    (canvas) => {
+      canvasRef.current = canvas;
+      if (options?.scaledStrokes !== false) {
+        enableScaledStrokes(canvas);
+      }
+      if (options?.keyboardShortcuts !== false) {
+        keyboardCleanupRef.current = enableKeyboardShortcuts(canvas);
+      }
+      setCanvasAlignmentEnabled(canvas, options?.enableAlignment);
+      if (options?.panAndZoom !== false) {
+        viewportRef.current = enablePanAndZoom(
+          canvas,
+          typeof options?.panAndZoom === "object" ? options.panAndZoom : void 0
+        );
+      }
+      const alignmentEnabled = resolveAlignmentEnabled(
+        options?.enableAlignment,
+        options?.alignment
+      );
+      if (alignmentEnabled) {
+        alignmentCleanupRef.current = enableObjectAlignment(
+          canvas,
+          typeof options?.alignment === "object" ? options.alignment : void 0
+        );
+      }
+      if (options?.rotationSnap !== false) {
+        rotationSnapCleanupRef.current = enableRotationSnap(
+          canvas,
+          typeof options?.rotationSnap === "object" ? options.rotationSnap : void 0
+        );
+      }
+      canvas.on("mouse:wheel", () => {
+        setZoom(canvas.getZoom());
+      });
+      canvas.on("selection:created", (e) => {
+        setSelected(e.selected ?? []);
+      });
+      canvas.on("selection:updated", (e) => {
+        setSelected(e.selected ?? []);
+      });
+      canvas.on("selection:cleared", () => {
+        setSelected([]);
+      });
+      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 Polygon4) {
+            vertexEditCleanupRef.current?.();
+            vertexEditCleanupRef.current = enableVertexEdit(
+              canvas,
+              e.target,
+              vertexOpts,
+              () => {
+                vertexEditCleanupRef.current = null;
+                setIsEditingVertices(false);
+              }
+            );
+            setIsEditingVertices(true);
+          }
+        });
+      }
+      const onReadyResult = options?.onReady?.(canvas);
+      if (options?.autoFitToBackground !== false) {
+        Promise.resolve(onReadyResult).then(() => {
+          if (canvas.backgroundImage) {
+            fitViewportToBackground(canvas);
+            syncZoom(canvasRef, setZoom);
+          }
+        });
+      }
+    },
+    // onReady and panAndZoom are intentionally excluded — we only initialize once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  useEffect2(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    setCanvasAlignmentEnabled(canvas, options?.enableAlignment);
+    const shouldEnable = resolveAlignmentEnabled(
+      options?.enableAlignment,
+      options?.alignment
+    );
+    if (shouldEnable && !alignmentCleanupRef.current) {
+      alignmentCleanupRef.current = enableObjectAlignment(
+        canvas,
+        typeof options?.alignment === "object" ? options.alignment : void 0
+      );
+    } else if (!shouldEnable && alignmentCleanupRef.current) {
+      alignmentCleanupRef.current();
+      alignmentCleanupRef.current = null;
+    }
+  }, [options?.enableAlignment]);
+  const setViewportMode = useCallback((mode) => {
+    viewportRef.current?.setMode(mode);
+    setViewportModeState(mode);
+  }, []);
+  const { resetViewport: resetViewport2, zoomIn, zoomOut } = createViewportActions(
+    canvasRef,
+    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;
+  }, []);
+  return {
+    /** Pass this to `<Canvas onReady={...} />` */
+    onReady,
+    /** Ref to the underlying Fabric canvas instance. */
+    canvasRef,
+    /** Current zoom level (reactive). */
+    zoom,
+    /** Currently selected objects (reactive). */
+    selected,
+    /** Viewport controls. */
+    viewport: {
+      /** Current viewport mode (reactive). */
+      mode: viewportMode,
+      /** Switch between 'select' and 'pan' viewport modes. */
+      setMode: setViewportMode,
+      /** Reset viewport to default (no pan, zoom = 1), or fit to background if one is set. */
+      reset: resetViewport2,
+      /** Zoom in toward the canvas center. Default step: 0.2. */
+      zoomIn,
+      /** Zoom out from the canvas center. Default step: 0.2. */
+      zoomOut
+    },
+    /** Whether vertex edit mode is currently active (reactive). */
+    isEditingVertices,
+    /**
+     * Activate an interaction mode or return to select mode.
+     *
+     * Pass a setup function to activate a creation mode:
+     * ```ts
+     * canvas.setMode((c, viewport) =>
+     *   enableClickToCreate(c, factory, { viewport })
+     * );
+     * ```
+     *
+     * Pass `null` to deactivate and return to select mode:
+     * ```ts
+     * canvas.setMode(null);
+     * ```
+     */
+    setMode,
+    /**
+     * 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.
+     */
+    setBackground
+  };
+}
+
+// src/hooks/useViewCanvas.ts
+import { useCallback as useCallback2, useRef as useRef3, useState as useState2 } from "react";
+import { Rect as Rect6 } from "fabric";
+var VIEW_BORDER_RADIUS = 4;
+function lockCanvas(canvas) {
+  canvas.selection = false;
+  canvas.forEachObject((obj) => {
+    obj.selectable = false;
+    obj.evented = false;
+    if (obj instanceof Rect6 && 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 });
+    }
+  });
+}
+function useViewCanvas(options) {
+  const canvasRef = useRef3(null);
+  const viewportRef = useRef3(null);
+  const [zoom, setZoom] = useState2(1);
+  const onReady = useCallback2(
+    (canvas) => {
+      canvasRef.current = canvas;
+      if (options?.scaledStrokes !== false) {
+        enableScaledStrokes(canvas);
+      }
+      if (options?.panAndZoom !== false) {
+        const panAndZoomOpts = typeof options?.panAndZoom === "object" ? options.panAndZoom : {};
+        viewportRef.current = enablePanAndZoom(canvas, {
+          ...panAndZoomOpts,
+          initialMode: "pan"
+        });
+      }
+      lockCanvas(canvas);
+      canvas.on("object:added", () => {
+        lockCanvas(canvas);
+      });
+      canvas.on("mouse:wheel", () => {
+        setZoom(canvas.getZoom());
+      });
+      const onReadyResult = options?.onReady?.(canvas);
+      if (options?.autoFitToBackground !== false) {
+        Promise.resolve(onReadyResult).then(() => {
+          if (canvas.backgroundImage) {
+            fitViewportToBackground(canvas);
+            syncZoom(canvasRef, setZoom);
+          }
+        });
+      }
+    },
+    // onReady and panAndZoom are intentionally excluded — we only initialize once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const { resetViewport: resetViewport2, zoomIn, zoomOut } = createViewportActions(
+    canvasRef,
+    viewportRef,
+    setZoom
+  );
+  const findObject = (id) => {
+    const c = canvasRef.current;
+    if (!c) return void 0;
+    return c.getObjects().find((o) => o.data?.id === id);
+  };
+  const setObjectStyle = useCallback2((id, style) => {
+    const obj = findObject(id);
+    if (!obj) return;
+    obj.set(style);
+    canvasRef.current.requestRenderAll();
+  }, []);
+  const setObjectStyles = useCallback2(
+    (styles) => {
+      const c = canvasRef.current;
+      if (!c) return;
+      const objects = c.getObjects();
+      const idMap = /* @__PURE__ */ new Map();
+      for (const obj of objects) {
+        if (obj.data?.id) idMap.set(obj.data.id, obj);
+      }
+      let updated = false;
+      for (const [id, style] of Object.entries(styles)) {
+        const obj = idMap.get(id);
+        if (obj) {
+          obj.set(style);
+          updated = true;
+        }
+      }
+      if (updated) c.requestRenderAll();
+    },
+    []
+  );
+  const setObjectStyleByType = useCallback2(
+    (type, style) => {
+      const c = canvasRef.current;
+      if (!c) return;
+      let updated = false;
+      for (const obj of c.getObjects()) {
+        if (obj.data?.type === type) {
+          obj.set(style);
+          updated = true;
+        }
+      }
+      if (updated) c.requestRenderAll();
+    },
+    []
+  );
+  return {
+    /** Pass this to `<Canvas onReady={...} />` */
+    onReady,
+    /** Ref to the underlying Fabric canvas instance. */
+    canvasRef,
+    /** Current zoom level (reactive). */
+    zoom,
+    /** Viewport controls. */
+    viewport: {
+      /** Reset viewport to default (no pan, zoom = 1), or fit to background if one is set. */
+      reset: resetViewport2,
+      /** Zoom in toward the canvas center. Default step: 0.2. */
+      zoomIn,
+      /** Zoom out from the canvas center. Default step: 0.2. */
+      zoomOut
+    },
+    /** Update a single object's visual style by its `data.id`. */
+    setObjectStyle,
+    /** Batch-update multiple objects' visual styles in one render. Keyed by `data.id`. */
+    setObjectStyles,
+    /** Apply a visual style to all objects whose `data.type` matches. */
+    setObjectStyleByType
+  };
+}
+export {
+  Canvas,
+  DEFAULT_ALIGNMENT_STYLE,
+  DEFAULT_CIRCLE_STYLE,
+  DEFAULT_CONTROL_STYLE,
+  DEFAULT_DRAG_SHAPE_STYLE,
+  DEFAULT_GUIDELINE_SHAPE_STYLE,
+  DEFAULT_SHAPE_STYLE,
+  createCircle,
+  createCircleAtPoint,
+  createPolygon,
+  createPolygonAtPoint,
+  createPolygonFromDrag,
+  createPolygonFromVertices,
+  createRectangle,
+  createRectangleAtPoint,
+  deleteObjects,
+  editCircle,
+  editPolygon,
+  editRectangle,
+  enableClickToCreate,
+  enableDragToCreate,
+  enableDrawToCreate,
+  enableKeyboardShortcuts,
+  enableObjectAlignment,
+  enablePanAndZoom,
+  enableRotationSnap,
+  enableScaledStrokes,
+  enableVertexEdit,
+  fitViewportToBackground,
+  getBackgroundInverted,
+  getBackgroundOpacity,
+  getBaseStrokeWidth,
+  getSnapPoints,
+  loadCanvas,
+  registerSnapPointExtractor,
+  resetViewport,
+  resizeImageUrl,
+  serializeCanvas,
+  setBackgroundImage,
+  setBackgroundInverted,
+  setBackgroundOpacity,
+  snapCursorPoint,
+  useEditCanvas,
+  useViewCanvas
+};
+//# sourceMappingURL=index.js.map