@bwp-web/canvas 0.9.3 → 0.10.0

package/dist/index.js

@@ -1527,7 +1527,8 @@ function enableDragToCreate(canvas, factory, options) {
 import {
   Circle,
   Line,
-  Point as Point7
+  Point as Point7,
+  Rect as Rect5
 } from "fabric";
 
 // src/shapes/rectangle.ts
@@ -1741,7 +1742,43 @@ 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 dragEnabled = options?.dragOnHold !== false;
+  let dragPending = false;
+  let isDragMode = false;
+  let dragStartX = 0;
+  let dragStartY = 0;
+  let dragLastEndX = 0;
+  let dragLastEndY = 0;
+  let dragPreviewRect = null;
+  const computeDragDimensions = (endX, endY) => {
+    let width = Math.max(0, endX - dragStartX);
+    let height = Math.max(0, endY - dragStartY);
+    if (shiftTracker.held) {
+      const size = Math.max(width, height);
+      width = size;
+      height = size;
+    }
+    return { width, height };
+  };
+  const updateDragPreview = (endX, endY) => {
+    dragLastEndX = endX;
+    dragLastEndY = endY;
+    if (!isDragMode || !dragPreviewRect) return;
+    const { width, height } = computeDragDimensions(endX, endY);
+    dragPreviewRect.set({
+      left: dragStartX + width / 2,
+      top: dragStartY + height / 2,
+      width,
+      height
+    });
+    dragPreviewRect.setCoords();
+    canvas.requestRenderAll();
+  };
+  const shiftTracker = createShiftKeyTracker(() => {
+    if (isDragMode) {
+      updateDragPreview(dragLastEndX, dragLastEndY);
+    }
+  });
   const points = [];
   const markers = [];
   const edgeLines = [];
@@ -1809,20 +1846,7 @@ function enableDrawToCreate(canvas, options) {
     options?.onCreated?.(obj);
     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();
+  const placeVertex = (x, y) => {
     if (points.length >= 3) {
       const dx = x - points[0].x;
       const dy = y - points[0].y;
@@ -1859,7 +1883,63 @@ function enableDrawToCreate(canvas, options) {
     }
     canvas.requestRenderAll();
   };
+  const handleMouseDown = (event) => {
+    if (dragEnabled && points.length === 0) {
+      const snapped = snapping.snap(event.scenePoint.x, event.scenePoint.y);
+      dragStartX = snapped.x;
+      dragStartY = snapped.y;
+      dragLastEndX = dragStartX;
+      dragLastEndY = dragStartY;
+      dragPending = true;
+      snapping.clearSnapResult();
+      return;
+    }
+    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();
+    placeVertex(x, y);
+  };
   const handleMouseMove = (event) => {
+    if (dragPending) {
+      const dx = Math.abs(event.scenePoint.x - dragStartX);
+      const dy = Math.abs(event.scenePoint.y - dragStartY);
+      if (dx >= MIN_DRAG_SIZE || dy >= MIN_DRAG_SIZE) {
+        isDragMode = true;
+        dragPending = false;
+        previousSelection = canvas.selection;
+        canvas.selection = false;
+        dragPreviewRect = new Rect5({
+          ...DEFAULT_GUIDELINE_SHAPE_STYLE,
+          left: dragStartX,
+          top: dragStartY,
+          width: 0,
+          height: 0,
+          selectable: false,
+          evented: false
+        });
+        snapping.excludeSet.add(dragPreviewRect);
+        canvas.add(dragPreviewRect);
+      }
+      return;
+    }
+    if (isDragMode && dragPreviewRect) {
+      const { x: endX, y: endY } = snapping.snapWithGuidelines(
+        event.scenePoint.x,
+        event.scenePoint.y
+      );
+      updateDragPreview(endX, endY);
+      return;
+    }
     if (points.length === 0) return;
     const lastPoint = points[points.length - 1];
     let { x, y } = event.scenePoint;
@@ -1902,6 +1982,47 @@ function enableDrawToCreate(canvas, options) {
     }
     canvas.requestRenderAll();
   };
+  const handleMouseUp = () => {
+    if (isDragMode && dragPreviewRect) {
+      isDragMode = false;
+      snapping.clearSnapResult();
+      const { width, height } = computeDragDimensions(
+        dragLastEndX,
+        dragLastEndY
+      );
+      snapping.excludeSet.delete(dragPreviewRect);
+      canvas.remove(dragPreviewRect);
+      dragPreviewRect = null;
+      if (width < MIN_DRAG_SIZE && height < MIN_DRAG_SIZE) {
+        canvas.selection = previousSelection;
+        canvas.requestRenderAll();
+        placeVertex(dragStartX, dragStartY);
+        return;
+      }
+      const obj = createPolygonFromVertices(
+        canvas,
+        [
+          { x: dragStartX, y: dragStartY },
+          { x: dragStartX + width, y: dragStartY },
+          { x: dragStartX + width, y: dragStartY + height },
+          { x: dragStartX, y: dragStartY + height }
+        ],
+        options?.style
+      );
+      if (options?.data) {
+        obj.data = options.data;
+      }
+      canvas.selection = previousSelection;
+      canvas.requestRenderAll();
+      restoreViewport(options?.viewport);
+      options?.onCreated?.(obj);
+      return;
+    }
+    if (dragPending) {
+      dragPending = false;
+      placeVertex(dragStartX, dragStartY);
+    }
+  };
   const handleKeyDown = (e) => {
     if (e.key === "Escape" || e.key === "Backspace") {
       e.stopImmediatePropagation();
@@ -1911,20 +2032,29 @@ function enableDrawToCreate(canvas, options) {
   };
   canvas.on("mouse:down", handleMouseDown);
   canvas.on("mouse:move", handleMouseMove);
+  canvas.on("mouse:up", handleMouseUp);
   document.addEventListener("keydown", handleKeyDown, true);
   function cleanup(reason) {
     if (exited) return;
     exited = true;
     canvas.off("mouse:down", handleMouseDown);
     canvas.off("mouse:move", handleMouseMove);
+    canvas.off("mouse:up", handleMouseUp);
     document.removeEventListener("keydown", handleKeyDown, true);
     shiftTracker.cleanup();
     snapping.cleanup();
     removePreviewElements();
-    if (points.length > 0) {
+    if (dragPreviewRect) {
+      snapping.excludeSet.delete(dragPreviewRect);
+      canvas.remove(dragPreviewRect);
+      dragPreviewRect = null;
+    }
+    if (points.length > 0 || isDragMode || dragPending) {
       canvas.selection = previousSelection;
     }
     points.length = 0;
+    dragPending = false;
+    isDragMode = false;
     canvas.requestRenderAll();
     restoreViewport(options?.viewport);
     if (reason === "cancel") {
@@ -2126,7 +2256,7 @@ function enableVertexEdit(canvas, polygon, options, onExit) {
 // src/serialization.ts
 import {
   FabricImage as FabricImage2,
-  Rect as Rect5,
+  Rect as Rect6,
   filters as filters2
 } from "fabric";
 var strokeBaseMap = /* @__PURE__ */ new WeakMap();
@@ -2160,7 +2290,7 @@ function enableScaledBorderRadius(canvas, options) {
   const radius = options?.radius ?? DEFAULT_VIEW_BORDER_RADIUS;
   function applyScaledBorderRadius() {
     canvas.forEachObject((obj) => {
-      if (!(obj instanceof Rect5)) return;
+      if (!(obj instanceof Rect6)) return;
       if (!borderRadiusBaseMap.has(obj)) return;
       const rx = radius / (obj.scaleX ?? 1);
       const ry = radius / (obj.scaleY ?? 1);
@@ -2171,7 +2301,7 @@ function enableScaledBorderRadius(canvas, options) {
   return () => {
     canvas.off("before:render", applyScaledBorderRadius);
     canvas.forEachObject((obj) => {
-      if (!(obj instanceof Rect5)) return;
+      if (!(obj instanceof Rect6)) return;
       const base = borderRadiusBaseMap.get(obj);
       if (base !== void 0) {
         obj.set({ rx: base.rx, ry: base.ry });
@@ -2198,7 +2328,7 @@ function prepareStrokeWidths(canvas) {
 function prepareBorderRadii(canvas) {
   const appliedRadii = /* @__PURE__ */ new Map();
   canvas.forEachObject((obj) => {
-    if (!(obj instanceof Rect5)) return;
+    if (!(obj instanceof Rect6)) return;
     const base = borderRadiusBaseMap.get(obj);
     if (base !== void 0) {
       appliedRadii.set(obj, { rx: obj.rx ?? 0, ry: obj.ry ?? 0 });
@@ -2349,11 +2479,11 @@ async function loadCanvas(canvas, json, options) {
       delete data.strokeWidthBase;
     }
     obj.set(DEFAULT_CONTROL_STYLE);
-    if (obj.shapeType === "circle" && obj instanceof Rect5) {
+    if (obj.shapeType === "circle" && obj instanceof Rect6) {
       restoreCircleConstraints(obj);
     }
     const borderRadius = options?.borderRadius ?? DEFAULT_VIEW_BORDER_RADIUS;
-    if (borderRadius !== false && obj instanceof Rect5 && obj.shapeType !== "circle" && obj.data?.type !== "DEVICE") {
+    if (borderRadius !== false && obj instanceof Rect6 && obj.shapeType !== "circle" && obj.data?.type !== "DEVICE") {
       borderRadiusBaseMap.set(obj, { rx: obj.rx ?? 0, ry: obj.ry ?? 0 });
       const rx = borderRadius / (obj.scaleX ?? 1);
       const ry = borderRadius / (obj.scaleY ?? 1);
@@ -2749,7 +2879,7 @@ function useEditCanvas(options) {
       canvasRef,
       /** Current zoom level (reactive). */
       zoom,
-      /** Loaded objects (reactive). Populated when `canvasData` is provided. */
+      /** Canvas objects (reactive). Populated from `canvasData` on load, and kept in sync as objects are added or removed at runtime. */
       objects,
       /** Whether canvas data is currently being loaded. */
       isLoading,
@@ -3647,7 +3777,7 @@ import {
   Canvas as Canvas2,
   FabricObject as FabricObject5,
   FabricImage as FabricImage3,
-  Rect as Rect6,
+  Rect as Rect7,
   Polygon as Polygon5,
   Point as Point9,
   util as util5
@@ -3670,7 +3800,7 @@ export {
   OverlayContent,
   Point9 as Point,
   Polygon5 as Polygon,
-  Rect6 as Rect,
+  Rect7 as Rect,
   ViewCanvasProvider,
   createCircle,
   createCircleAtPoint,