stickyflow 0.11.1 → 0.11.3

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunk4KBU4CFU_cjs = require('./chunk-4KBU4CFU.cjs');
-var chunkEHH6ZDK6_cjs = require('./chunk-EHH6ZDK6.cjs');
+var chunkGQRJSA73_cjs = require('./chunk-GQRJSA73.cjs');
+var chunkK5PGMZAD_cjs = require('./chunk-K5PGMZAD.cjs');
 var chunkUHKFJBY5_cjs = require('./chunk-UHKFJBY5.cjs');
 
 // src/model/shape/supportedTypes.ts
@@ -76,7 +76,7 @@ function flattenGroups(groups, buckets) {
 // src/adapters/importJson/assembly.ts
 function sflToImportJson(sfl) {
   const state = chunkUHKFJBY5_cjs.sflToCanvasState(sfl);
-  const collected = chunkEHH6ZDK6_cjs.collectCanvasObjects(state);
+  const collected = chunkK5PGMZAD_cjs.collectCanvasObjects(state);
   const canvas = emptyBuckets();
   const { groupBuckets, bucketFor } = createBucketResolver(indexGroupMembership(state.groups), canvas);
   for (const shape of collected.shapes) {
@@ -107,47 +107,47 @@ function sflToImportJson(sfl) {
 
 Object.defineProperty(exports, "buildBindingGraph", {
   enumerable: true,
-  get: function () { return chunk4KBU4CFU_cjs.buildBindingGraph; }
+  get: function () { return chunkGQRJSA73_cjs.buildBindingGraph; }
 });
 Object.defineProperty(exports, "createBindingRuntime", {
   enumerable: true,
-  get: function () { return chunk4KBU4CFU_cjs.createBindingRuntime; }
+  get: function () { return chunkGQRJSA73_cjs.createBindingRuntime; }
 });
 Object.defineProperty(exports, "createDataSource", {
   enumerable: true,
-  get: function () { return chunk4KBU4CFU_cjs.createDataSource; }
+  get: function () { return chunkGQRJSA73_cjs.createDataSource; }
 });
 Object.defineProperty(exports, "interactiveElements", {
   enumerable: true,
-  get: function () { return chunk4KBU4CFU_cjs.interactiveElements; }
+  get: function () { return chunkGQRJSA73_cjs.interactiveElements; }
 });
 Object.defineProperty(exports, "renderBound", {
   enumerable: true,
-  get: function () { return chunk4KBU4CFU_cjs.renderBound; }
+  get: function () { return chunkGQRJSA73_cjs.renderBound; }
 });
 Object.defineProperty(exports, "decodeColor", {
   enumerable: true,
-  get: function () { return chunkEHH6ZDK6_cjs.decodeColor; }
+  get: function () { return chunkK5PGMZAD_cjs.decodeColor; }
 });
 Object.defineProperty(exports, "decodeShadow", {
   enumerable: true,
-  get: function () { return chunkEHH6ZDK6_cjs.decodeShadow; }
+  get: function () { return chunkK5PGMZAD_cjs.decodeShadow; }
 });
 Object.defineProperty(exports, "defineComponent", {
   enumerable: true,
-  get: function () { return chunkEHH6ZDK6_cjs.defineComponent; }
+  get: function () { return chunkK5PGMZAD_cjs.defineComponent; }
 });
 Object.defineProperty(exports, "render", {
   enumerable: true,
-  get: function () { return chunkEHH6ZDK6_cjs.render; }
+  get: function () { return chunkK5PGMZAD_cjs.render; }
 });
 Object.defineProperty(exports, "renderCanvas", {
   enumerable: true,
-  get: function () { return chunkEHH6ZDK6_cjs.renderCanvas; }
+  get: function () { return chunkK5PGMZAD_cjs.renderCanvas; }
 });
 Object.defineProperty(exports, "sflToRenderInput", {
   enumerable: true,
-  get: function () { return chunkEHH6ZDK6_cjs.sflToRenderInput; }
+  get: function () { return chunkK5PGMZAD_cjs.sflToRenderInput; }
 });
 Object.defineProperty(exports, "AXIS_COS", {
   enumerable: true,

package/dist/index.js

@@ -1,6 +1,6 @@
-export { buildBindingGraph, createBindingRuntime, createDataSource, interactiveElements, renderBound } from './chunk-UD6IG2PG.js';
-import { collectCanvasObjects } from './chunk-TQIYK5OA.js';
-export { decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput } from './chunk-TQIYK5OA.js';
+export { buildBindingGraph, createBindingRuntime, createDataSource, interactiveElements, renderBound } from './chunk-W25SXORW.js';
+import { collectCanvasObjects } from './chunk-EBHO2FJ5.js';
+export { decodeColor, decodeShadow, defineComponent, render, renderCanvas, sflToRenderInput } from './chunk-EBHO2FJ5.js';
 import { sflToCanvasState } from './chunk-G6IW2IX3.js';
 export { AXIS_COS, AXIS_SIN, CHART_TYPES, COMPONENT_CATEGORIES, DOM_CONTRACT_VERSION, canonicalizeSource as canonicalize, componentTypes, flattenPath, getComponentDescriptor, isChartObject, isDimensionObject, isGenericComponent, isIsometricObject, isPathObject, isSwimlaneObject, parseSource as parse, pathBounds, pathToSymbol, sflToCanvasState, symbolToPath } from './chunk-G6IW2IX3.js';
 

package/dist/interaction/index.cjs

@@ -3103,7 +3103,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];
@@ -3129,16 +3129,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
     };
   });
 }
@@ -3165,9 +3165,9 @@ var LinkSegmentSession = class {
     const owner = path && chunkWZA3DJJH_cjs.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 = chunkWZA3DJJH_cjs.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";
@@ -3178,7 +3178,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,
@@ -3187,7 +3187,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") ?? "",
@@ -3275,11 +3275,11 @@ var LinkSegmentSession = class {
     const data = chunkUHKFJBY5_cjs.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");
@@ -3444,6 +3444,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: chunkUHKFJBY5_cjs.AXIS_COS, y: chunkUHKFJBY5_cjs.AXIS_SIN },
@@ -3557,17 +3617,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, chunkWZA3DJJH_cjs.findSnapCandidateBounds(svg, excludedIds));
+  const threshold = snapDistancePx(svg) / chunkWZA3DJJH_cjs.pxPerUnit(svg);
   const snap = computeSnap(leadBounds, candidates, {
-    threshold: snapDistancePx(svg) / chunkWZA3DJJH_cjs.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
@@ -6529,8 +6595,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;
     }
@@ -6538,15 +6604,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;
   }
@@ -7246,7 +7312,22 @@ function movePathPoints(lines, range, dx, dy) {
 function applyMoveChanges(sfl, events) {
   const state = chunkUHKFJBY5_cjs.sflToCanvasState(sfl);
   const lines = sfl.split("\n");
+  const parents = new Map(state.canvasObjects.map((candidate) => [candidate.id, candidate.parentFrameId]));
+  const moving = new Set(events.map((event) => event.owner.id));
+  const hasMovingAncestor = (id) => {
+    const seen = /* @__PURE__ */ new Set();
+    for (let parent = parents.get(id); parent && !seen.has(parent); parent = parents.get(parent)) {
+      if (moving.has(parent)) {
+        return true;
+      }
+      seen.add(parent);
+    }
+    return false;
+  };
   for (const event of events) {
+    if (hasMovingAncestor(event.owner.id)) {
+      continue;
+    }
     const canvasObject = state.canvasObjects.find((candidate) => candidate.id === event.owner.id);
     const range = canvasObject ? findOwnerBlock(lines, event.owner.id) : null;
     if (!canvasObject || !range) {