@n-dx/web 0.1.0

package/dist/viewer/hooks/use-zone-drag.js

@@ -0,0 +1,60 @@
+/**
+ * useZoneDrag — Zone box drag-and-drop positioning hook.
+ *
+ * Handles dragging zone boxes within the SVG diagram. Tracks drag offsets
+ * per zone and distinguishes between click (toggle) and drag gestures.
+ */
+import { useState, useCallback, useRef } from "preact/hooks";
+/**
+ * Hook that manages zone box dragging within the SVG diagram.
+ *
+ * @param svgRef - Ref to the SVG element for coordinate conversion
+ * @param viewBox - Current viewBox for screen-to-SVG coordinate scaling
+ */
+export function useZoneDrag(svgRef, viewBox) {
+    const [dragOffsets, setDragOffsets] = useState(new Map());
+    const zoneDrag = useRef(null);
+    const isDragging = useCallback(() => zoneDrag.current !== null, []);
+    const startDrag = useCallback((zoneId, e) => {
+        const off = dragOffsets.get(zoneId) ?? { dx: 0, dy: 0 };
+        zoneDrag.current = {
+            zoneId,
+            startX: e.clientX,
+            startY: e.clientY,
+            origDx: off.dx,
+            origDy: off.dy,
+            moved: false,
+        };
+    }, [dragOffsets]);
+    const moveDrag = useCallback((e) => {
+        if (!zoneDrag.current || !svgRef.current)
+            return;
+        const rect = svgRef.current.getBoundingClientRect();
+        const scaleX = viewBox.w / rect.width;
+        const scaleY = viewBox.h / rect.height;
+        const dx = (e.clientX - zoneDrag.current.startX) * scaleX;
+        const dy = (e.clientY - zoneDrag.current.startY) * scaleY;
+        if (!zoneDrag.current.moved && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) {
+            zoneDrag.current.moved = true;
+        }
+        if (zoneDrag.current.moved) {
+            const zid = zoneDrag.current.zoneId;
+            const newDx = zoneDrag.current.origDx + dx;
+            const newDy = zoneDrag.current.origDy + dy;
+            setDragOffsets((prev) => {
+                const next = new Map(prev);
+                next.set(zid, { dx: newDx, dy: newDy });
+                return next;
+            });
+        }
+    }, [svgRef, viewBox.w, viewBox.h]);
+    const endDrag = useCallback(() => {
+        if (!zoneDrag.current)
+            return null;
+        const clickedZoneId = zoneDrag.current.moved ? null : zoneDrag.current.zoneId;
+        zoneDrag.current = null;
+        return clickedZoneId;
+    }, []);
+    return { dragOffsets, isDragging, startDrag, moveDrag, endDrag };
+}
+//# sourceMappingURL=use-zone-drag.js.map

package/dist/viewer/hooks/use-zone-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-zone-drag.js","sourceRoot":"","sources":["../../../src/viewer/hooks/use-zone-drag.ts"],"names":[],"mappings":"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"}