stickyflow 0.11.2 → 0.11.3

package/dist/interaction/index.js

@@ -3101,7 +3101,7 @@ function snapCandidates(svg, axis, excludeIds) {
   return values;
 }
 function movedSegments(drag, value) {
-  const next = drag.segments.map((segment) => ({ ...segment }));
+  const next = drag.segments.map((segment2) => ({ ...segment2 }));
   const target = next[drag.index];
   const before = next[drag.index - 1];
   const after = next[drag.index + 1];
@@ -3127,16 +3127,16 @@ function movedSegments(drag, value) {
   return next;
 }
 function pathSegments(segments) {
-  return segments.map((segment) => {
-    const start = { x: segment.ax, y: segment.ay };
-    const end = { x: segment.bx, y: segment.by };
+  return segments.map((segment2) => {
+    const start = { x: segment2.ax, y: segment2.ay };
+    const end = { x: segment2.bx, y: segment2.by };
     return {
       start,
       end,
       midpoint: { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 },
-      originalMidpoint: { x: segment.ox, y: segment.oy },
+      originalMidpoint: { x: segment2.ox, y: segment2.oy },
       isHorizontal: Math.abs(end.x - start.x) > Math.abs(end.y - start.y),
-      canMove: segment.movable
+      canMove: segment2.movable
     };
   });
 }
@@ -3163,9 +3163,9 @@ var LinkSegmentSession = class {
     const owner = path && resolveOwner(path);
     const index = Number(handle.getAttribute("data-sf-link-segment"));
     const segments = path ? parseSegments(path) : [];
-    const segment = segments[index];
+    const segment2 = segments[index];
     const point = pointerUserPoint(this.#svg, event);
-    if (!path || !owner || !segment || !point) {
+    if (!path || !owner || !segment2 || !point) {
       return;
     }
     const axis = handle.getAttribute("data-sf-link-segment-axis") === "x" ? "x" : "y";
@@ -3176,7 +3176,7 @@ var LinkSegmentSession = class {
     guide.setAttribute("visibility", "hidden");
     overlay.appendChild(guide);
     handle.setPointerCapture?.(event.pointerId);
-    const current = axis === "y" ? segment.ay : segment.ax;
+    const current = axis === "y" ? segment2.ay : segment2.ax;
     this.#drag = {
       owner,
       path,
@@ -3185,7 +3185,7 @@ var LinkSegmentSession = class {
       segments,
       index,
       axis,
-      base: axis === "y" ? segment.oy : segment.ox,
+      base: axis === "y" ? segment2.oy : segment2.ox,
       start: axis === "y" ? point.y : point.x,
       origin: current,
       originalD: path.getAttribute("d") ?? "",
@@ -3273,11 +3273,11 @@ var LinkSegmentSession = class {
     const data = roundedOrthogonalPathData(pathSegments(next), Math.max(16, strokeWidth * 4));
     drag.path.setAttribute("d", data);
     drag.overlay.querySelector("path")?.setAttribute("d", data);
-    const segment = next[drag.index];
+    const segment2 = next[drag.index];
     const width = Number(drag.handle.getAttribute("width"));
     const height = Number(drag.handle.getAttribute("height"));
-    drag.handle.setAttribute("x", String((segment.ax + segment.bx) / 2 - width / 2));
-    drag.handle.setAttribute("y", String((segment.ay + segment.by) / 2 - height / 2));
+    drag.handle.setAttribute("x", String((segment2.ax + segment2.bx) / 2 - width / 2));
+    drag.handle.setAttribute("y", String((segment2.ay + segment2.by) / 2 - height / 2));
     const view = this.#svg.viewBox.baseVal;
     if (snapped === null) {
       drag.guide.setAttribute("visibility", "hidden");
@@ -3442,6 +3442,66 @@ function nearestCandidates(bounds, candidates, limit = 50) {
   return [...candidates].sort((first, second) => centerDistance(bounds, first) - centerDistance(bounds, second)).slice(0, limit);
 }
 
+// src/runtime/interaction/snapping/gaps.ts
+function rowOf(bounds, candidates, axis) {
+  const [crossStart, crossSize] = axis === "x" ? ["y", "height"] : ["x", "width"];
+  const [start, size] = axis === "x" ? ["x", "width"] : ["y", "height"];
+  return candidates.filter(
+    (candidate) => candidate[crossStart] < bounds[crossStart] + bounds[crossSize] && bounds[crossStart] < candidate[crossStart] + candidate[crossSize]
+  ).map((candidate) => ({
+    start: candidate[start],
+    end: candidate[start] + candidate[size],
+    cross: candidate[crossStart] + candidate[crossSize] / 2
+  })).sort((first, second) => first.start - second.start);
+}
+function segment(axis, from, to, cross) {
+  return axis === "x" ? { orientation: "segment", x1: from, y1: cross, x2: to, y2: cross } : { orientation: "segment", x1: cross, y1: from, x2: cross, y2: to };
+}
+function axisGapSnap(bounds, candidates, axis, threshold) {
+  const row = rowOf(bounds, candidates, axis);
+  const start = axis === "x" ? bounds.x : bounds.y;
+  const size = axis === "x" ? bounds.width : bounds.height;
+  const center = start + size / 2;
+  const before = row.filter((span) => (span.start + span.end) / 2 < center).at(-1);
+  const after = row.find((span) => (span.start + span.end) / 2 >= center);
+  const pairs = row.slice(1).map((span, index) => ({ first: row[index], second: span, gap: span.start - row[index].end }));
+  let best = null;
+  const consider = (target, guides) => {
+    const delta = target - start;
+    if (Math.abs(delta) < threshold && (!best || Math.abs(delta) < Math.abs(best.delta))) {
+      best = { delta, guides };
+    }
+  };
+  if (before && after) {
+    const target = (before.end + after.start - size) / 2;
+    if (target >= before.end) {
+      consider(target, [
+        segment(axis, before.end, target, before.cross),
+        segment(axis, target + size, after.start, after.cross)
+      ]);
+    }
+  }
+  for (const { first, second, gap } of pairs) {
+    if (gap <= 0) {
+      continue;
+    }
+    const existing = segment(axis, first.end, second.start, first.cross);
+    if (before) {
+      consider(before.end + gap, [existing, segment(axis, before.end, before.end + gap, before.cross)]);
+    }
+    if (after) {
+      consider(after.start - gap - size, [existing, segment(axis, after.start - gap, after.start, after.cross)]);
+    }
+  }
+  return best;
+}
+function computeGapSnap(bounds, candidates, threshold) {
+  return {
+    x: axisGapSnap(bounds, candidates, "x", threshold),
+    y: axisGapSnap(bounds, candidates, "y", threshold)
+  };
+}
+
 // src/runtime/interaction/snapping/isometricDiagonal.ts
 var AXES2 = [
   { x: AXIS_COS, y: AXIS_SIN },
@@ -3555,17 +3615,23 @@ function snapMove(svg, drag, rawDx, rawDy) {
   const leadBounds = offsetBounds(drag.canvasObjects[0].draggedBounds, rawDx, rawDy);
   const excludedIds = new Set(drag.canvasObjects.map((canvasObject) => canvasObject.owner.id));
   const candidates = nearestCandidates(leadBounds, findSnapCandidateBounds(svg, excludedIds));
+  const threshold = snapDistancePx(svg) / pxPerUnit(svg);
   const snap = computeSnap(leadBounds, candidates, {
-    threshold: snapDistancePx(svg) / pxPerUnit(svg),
+    threshold,
     activeX: MOVE_ACTIVE_POINTS,
     activeY: MOVE_ACTIVE_POINTS,
     guideOverhang: GUIDE_OVERHANG2
   });
-  return {
-    dx: rawDx + snap.x.delta,
-    dy: rawDy + snap.y.delta,
-    guides: [snap.x.guide, snap.y.guide].filter((guide) => guide !== null)
+  const gaps = computeGapSnap(leadBounds, candidates, threshold);
+  const pick = (align, gap) => {
+    if (gap && (!align.guide || Math.abs(gap.delta) < Math.abs(align.delta))) {
+      return gap;
+    }
+    return { delta: align.delta, guides: align.guide ? [align.guide] : [] };
   };
+  const x = pick(snap.x, gaps.x);
+  const y = pick(snap.y, gaps.y);
+  return { dx: rawDx + x.delta, dy: rawDy + y.delta, guides: [...x.guides, ...y.guides] };
 }
 
 // src/runtime/interaction/move/completion.ts
@@ -6527,8 +6593,8 @@ function parsePropertyPath(path) {
     return null;
   }
   const blocks = [];
-  for (const segment of segments.slice(0, -1)) {
-    const block = parseBlockSegment(segment);
+  for (const segment2 of segments.slice(0, -1)) {
+    const block = parseBlockSegment(segment2);
     if (block === null) {
       return null;
     }
@@ -6536,15 +6602,15 @@ function parsePropertyPath(path) {
   }
   return { blocks, property };
 }
-function parseBlockSegment(segment) {
-  const match = segment.match(BLOCK_SEGMENT);
+function parseBlockSegment(segment2) {
+  const match = segment2.match(BLOCK_SEGMENT);
   if (!match) {
     return null;
   }
   return match[2] === void 0 ? { name: match[1] } : { name: match[1], id: match[2] };
 }
-function parsePropertySegment(segment) {
-  const match = segment.match(PROPERTY_SEGMENT);
+function parsePropertySegment(segment2) {
+  const match = segment2.match(PROPERTY_SEGMENT);
   if (!match) {
     return null;
   }