@bwp-web/canvas 0.9.2 → 0.9.4

package/dist/hooks/useEditCanvas.d.ts

@@ -120,7 +120,7 @@ export declare function useEditCanvas(options?: UseEditCanvasOptions): {
     canvasRef: import("react").RefObject<FabricCanvas | null>;
     /** Current zoom level (reactive). */
     zoom: number;
-    /** 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: FabricObject<Partial<import("fabric").FabricObjectProps>, import("fabric").SerializedObjectProps, import("fabric").ObjectEvents>[];
     /** Whether canvas data is currently being loaded. */
     isLoading: boolean;

package/dist/hooks/useEditCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEditCanvas.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditCanvas.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,KAAK,YAAY,EAAW,MAAM,QAAQ,CAAC;AAC5E,OAAO,EAEL,KAAK,iBAAiB,EAEtB,KAAK,YAAY,EAClB,MAAM,aAAa,CAAC;AAMrB,OAAO,EAEL,KAAK,sBAAsB,EAE3B,KAAK,mBAAmB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EAIL,KAAK,kBAAkB,EAExB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,cAAc,EAEpB,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,WAAW,oBAAoB;IACnC,kGAAkG;IAClG,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,mIAAmI;IACnI,SAAS,CAAC,EAAE,OAAO,GAAG,sBAAsB,CAAC;IAC7C;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC;IAChD;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IACnC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,OAAO,CAAC;IACxC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IAqXtD,8CAA8C;sBAnSvC,YAAY;IAqSnB,oDAAoD;;IAEpD,qCAAqC;;IAErC,0EAA0E;;IAE1E,qDAAqD;;IAErD,6CAA6C;;IAE7C,yBAAyB;;QAtFzB,wCAAwC;;QAExC,wDAAwD;wBAbjB,YAAY;QAenD,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;QAE1D,uDAAuD;;QAEvD,6DAA6D;;;IA4E7D,+DAA+D;;IAE/D;;;;;;;;;;;;;;OAcG;qBA1W6B,SAAS,GAAG,IAAI;IA4WhD;;;;;;;OAOG;yBAnEO,MAAM,WAAW;QAAE,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE;IAqEzD,uIAAuI;;IAEvI,4DAA4D;;IAE5D,oGAAoG;;IAEpG,sDAAsD;;IAEtD,iEAAiE;;IAEjE,mFAAmF;;IAEnF,kFAAkF;;IAElF,gFAAgF;;IAEhF,wEAAwE;8BAtJ/B,OAAO;EAwKrD"}
+{"version":3,"file":"useEditCanvas.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditCanvas.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,KAAK,YAAY,EAAW,MAAM,QAAQ,CAAC;AAC5E,OAAO,EAEL,KAAK,iBAAiB,EAEtB,KAAK,YAAY,EAClB,MAAM,aAAa,CAAC;AAMrB,OAAO,EAEL,KAAK,sBAAsB,EAE3B,KAAK,mBAAmB,EACzB,MAAM,cAAc,CAAC;AACtB,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EAIL,KAAK,kBAAkB,EAExB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,cAAc,EAEpB,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,WAAW,oBAAoB;IACnC,kGAAkG;IAClG,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC,mIAAmI;IACnI,SAAS,CAAC,EAAE,OAAO,GAAG,sBAAsB,CAAC;IAC7C;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IACzC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC;IAChD;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IACnC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,OAAO,CAAC;IACxC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,oBAAoB;IAmYtD,8CAA8C;sBAjTvC,YAAY;IAmTnB,oDAAoD;;IAEpD,qCAAqC;;IAErC,mIAAmI;;IAEnI,qDAAqD;;IAErD,6CAA6C;;IAE7C,yBAAyB;;QAtFzB,wCAAwC;;QAExC,wDAAwD;wBAbjB,YAAY;QAenD,wFAAwF;;QAExF,2DAA2D;;QAE3D,0DAA0D;;QAE1D,uDAAuD;;QAEvD,6DAA6D;;;IA4E7D,+DAA+D;;IAE/D;;;;;;;;;;;;;;OAcG;qBAxX6B,SAAS,GAAG,IAAI;IA0XhD;;;;;;;OAOG;yBAnEO,MAAM,WAAW;QAAE,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE;IAqEzD,uIAAuI;;IAEvI,4DAA4D;;IAE5D,oGAAoG;;IAEpG,sDAAsD;;IAEtD,iEAAiE;;IAEjE,mFAAmF;;IAEnF,kFAAkF;;IAElF,gFAAgF;;IAEhF,wEAAwE;8BAtJ/B,OAAO;EAwKrD"}

package/dist/index.cjs

@@ -1826,7 +1826,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 = [];
@@ -1894,20 +1930,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;
@@ -1944,7 +1967,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 import_fabric14.Rect({
+          ...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;
@@ -1987,6 +2066,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();
@@ -1996,20 +2116,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") {
@@ -2644,6 +2773,16 @@ function useEditCanvas(options) {
           canvas.on("object:modified", markDirtyIfNotLoading);
           canvas.on("background:modified", markDirtyIfNotLoading);
         }
+        canvas.on("object:added", (e) => {
+          if (!isInitialLoadRef.current && e.target) {
+            setObjects((prev) => [...prev, e.target]);
+          }
+        });
+        canvas.on("object:removed", (e) => {
+          if (!isInitialLoadRef.current && e.target) {
+            setObjects((prev) => prev.filter((o) => o !== e.target));
+          }
+        });
         if (opts?.history) {
           const syncHistoryState = () => {
             const h = historyRef.current;
@@ -2817,7 +2956,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,