@weasel-js/diagram 1.9.3 → 1.10.0

package/README.md

@@ -129,7 +129,7 @@ without a canvas. The layout defaults to `layered`, picked by name or passed as
 any `LayoutFn`; `layoutOptions` merge over `order: 'barycenter'`, and
 `'none'` leaves every node at its `at`.
 
-`DiagramView` is the front door for the whole package. The data owns the
+The data owns the
 diagram: a new `specs` array is reconciled into the scene the view already
 holds (`reconcileSpecs` in core), so the view, the pick and anything moved
 since survive it. Editing reports rather than writes —
@@ -157,7 +157,7 @@ readable; the rest is a pan away.
 
 ## Design notes
 
-Five decisions the code cannot explain on its own.
+Decisions the code cannot explain on its own.
 
 **`dependsOn: 'children'` is deliberately absent from the reverse dependents
 index.** Deleting a node deletes everything that names it in `dependsOn`, and a

package/dist/{chunk-ERT3XWBS.js → chunk-BWQJYEA3.js}

@@ -1,5 +1,6 @@
-import { rectPath, polygonFromPoints, PathBuilder, PATH_M, PATH_L, PATH_C, flattenCubic, PATH_Q, PATH_Z, AUTO_POSE_DESCRIPTOR, rotatePoint, createSimulation } from '@weasel-js/core/math';
-import { cssFamilyName } from '@weasel-js/core';
+import { rectPath, polygonFromPoints, PathBuilder, PATH_M, PATH_L, PATH_C, flattenCubic, PATH_Q, PATH_Z, AUTO_POSE_DESCRIPTOR, rotatePoint } from '@weasel-js/core/math';
+import { cssFamilyName } from '@weasel-js/font';
+import { createSimulation } from '@weasel-js/simulation';
 
 // src/outline.ts
 var LEAN = 0.2;
@@ -487,6 +488,30 @@ function settle(graph, slots, opts = {}) {
   }
   return translated(graph, placed, pinned, tolerance);
 }
+function untilSettled(once, graph, opts = {}, passes = 8) {
+  const first = once(graph, opts);
+  if (first.size === 0) return first;
+  const at = new Map(first);
+  for (let pass = 1; pass < passes; pass++) {
+    const nodes = graph.nodes.map((node) => {
+      const to = at.get(node.id);
+      return to === void 0 ? node : { ...node, bounds: { ...node.bounds, x: to.x, y: to.y } };
+    });
+    const byId = new Map(nodes.map((n) => [n.id, n]));
+    const next = once({ ...graph, nodes, node: (id) => byId.get(id) }, opts);
+    if (next.size === 0) break;
+    for (const [id, to] of next) at.set(id, to);
+  }
+  const tolerance = opts.tolerance ?? DEFAULT_TOLERANCE;
+  const out = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    const to = at.get(node.id);
+    if (to === void 0) continue;
+    if (Math.abs(to.x - node.bounds.x) <= tolerance && Math.abs(to.y - node.bounds.y) <= tolerance) continue;
+    out.set(node.id, to);
+  }
+  return out;
+}
 function translated(graph, placed, pinned, tolerance = DEFAULT_TOLERANCE) {
   const anchor = anchorDelta(graph, placed, pinned);
   const out = /* @__PURE__ */ new Map();
@@ -565,10 +590,14 @@ function rankGaps(graph, rows, axes, rankGap) {
   const gaps = rows.slice(1).map(() => rankGap);
   const ends = /* @__PURE__ */ new Map();
   const starts = /* @__PURE__ */ new Map();
+  const reach = (span, side) => {
+    const own = canonical(span.group.inset, axes)[side === "lo" ? "rankLo" : "rankHi"];
+    const flush = span.children.filter((c) => c[side] === span[side]);
+    return own + Math.max(0, ...flush.map((c) => reach(c, side)));
+  };
   for (const span of groupSpans(graph, rows)) {
-    const inset = canonical(span.group.inset, axes);
-    ends.set(span.hi, Math.max(ends.get(span.hi) ?? 0, inset.rankHi));
-    starts.set(span.lo, Math.max(starts.get(span.lo) ?? 0, inset.rankLo));
+    ends.set(span.hi, Math.max(ends.get(span.hi) ?? 0, reach(span, "hi")));
+    starts.set(span.lo, Math.max(starts.get(span.lo) ?? 0, reach(span, "lo")));
   }
   for (let i = 0; i < gaps.length; i++) {
     gaps[i] = Math.max(gaps[i], rankGap + (ends.get(i) ?? 0) + (starts.get(i + 1) ?? 0));
@@ -579,92 +608,125 @@ function groupSpans(graph, rows) {
   const rankOf = /* @__PURE__ */ new Map();
   rows.forEach((row, i) => row.forEach((n) => rankOf.set(n.id, i)));
   const spans = [];
+  const byId = /* @__PURE__ */ new Map();
   for (const group of graph.groups ?? []) {
     const ranks = group.members.map((id) => rankOf.get(id)).filter((r) => r !== void 0);
     if (ranks.length === 0) continue;
-    spans.push({ group, lo: Math.min(...ranks), hi: Math.max(...ranks) });
+    const span = { group, lo: Math.min(...ranks), hi: Math.max(...ranks), children: [] };
+    spans.push(span);
+    byId.set(group.id, span);
+  }
+  for (const span of spans) {
+    const parent = span.group.parent === void 0 ? void 0 : byId.get(span.group.parent);
+    if (parent === void 0) continue;
+    span.parent = parent;
+    parent.children.push(span);
   }
   return spans;
 }
 function packClusters(graph, rows, preferred, axes, nodeGap) {
   const spans = groupSpans(graph, rows);
-  const spanOf = /* @__PURE__ */ new Map();
-  for (const span of spans) for (const id of span.group.members) spanOf.set(id, span);
+  const spanById = new Map(spans.map((s) => [s.group.id, s]));
+  const spanOf = (n) => n.group === void 0 ? void 0 : spanById.get(n.group);
   const width = (n) => extent(n.bounds, axes.cross);
   const pref = (n) => preferred.get(n.id) ?? 0;
-  const packedWidth = (ns) => ns.reduce((s, n) => s + width(n), 0) + Math.max(0, ns.length - 1) * nodeGap;
   const insets = new Map(spans.map((s) => [s, canonical(s.group.inset, axes)]));
-  const inner = /* @__PURE__ */ new Map();
   const centerOf = /* @__PURE__ */ new Map();
   for (const span of spans) {
-    let widest = 0;
+    const inside = new Set(span.group.members);
     let sum = 0;
     let count = 0;
     for (const row of rows) {
-      const members = row.filter((n) => spanOf.get(n.id) === span);
-      widest = Math.max(widest, packedWidth(members));
-      for (const n of members) {
+      for (const n of row) {
+        if (!inside.has(n.id)) continue;
         sum += pref(n) + width(n) / 2;
         count++;
       }
     }
-    inner.set(span, widest);
     centerOf.set(span, count === 0 ? 0 : sum / count);
   }
-  const outer = (span) => inner.get(span) + insets.get(span).crossLo + insets.get(span).crossHi;
-  const itemsByRow = rows.map((row, r) => {
+  const itemsByRow = (owner, among) => rows.map((row, r) => {
     const items = [];
     for (const node of row) {
-      if (!spanOf.has(node.id)) items.push({ kind: "node", node, center: pref(node) + width(node) / 2 });
+      if (spanOf(node) === owner) items.push({ kind: "node", node, center: pref(node) + width(node) / 2 });
     }
-    for (const span of spans) {
-      if (r < span.lo || r > span.hi) continue;
-      items.push({
-        kind: "group",
-        span,
-        members: row.filter((n) => spanOf.get(n.id) === span),
-        center: centerOf.get(span)
-      });
+    for (const span of among) {
+      if (r >= span.lo && r <= span.hi) items.push({ kind: "group", span, center: centerOf.get(span) });
     }
     return items.map((item, i) => ({ item, i })).sort((a, b) => a.item.center - b.item.center || a.i - b.i).map(({ item }) => item);
   });
-  const start = new Map(spans.map((s) => [s, centerOf.get(s) - outer(s) / 2]));
-  const at = /* @__PURE__ */ new Map();
-  for (let pass = 0; pass <= spans.length; pass++) {
-    let raised = false;
-    for (const items of itemsByRow) {
-      let cursor = -Infinity;
-      for (const item of items) {
-        if (item.kind === "node") {
-          const x2 = Math.max(pref(item.node), cursor);
-          at.set(item.node.id, x2);
-          cursor = x2 + width(item.node) + nodeGap;
-          continue;
+  const settle2 = (byRow, start2, nodeFloor, origin) => {
+    const nodeAt = /* @__PURE__ */ new Map();
+    let ends = [];
+    for (let pass = 0; pass <= start2.size; pass++) {
+      let raised = false;
+      ends = byRow.map((items) => {
+        let cursor = origin;
+        for (const item of items) {
+          if (item.kind === "node") {
+            const x2 = Math.max(nodeFloor(item.node), cursor);
+            nodeAt.set(item.node.id, x2);
+            cursor = x2 + width(item.node) + nodeGap;
+            continue;
+          }
+          const s = start2.get(item.span);
+          const x = Math.max(s, cursor);
+          if (x > s) {
+            start2.set(item.span, x);
+            raised = true;
+          }
+          cursor = x + outer(item.span) + nodeGap;
         }
-        const s = start.get(item.span);
-        const x = Math.max(s, cursor);
-        if (x > s) {
-          start.set(item.span, x);
-          raised = true;
-        }
-        const inset = insets.get(item.span);
-        let m = x + inset.crossLo + (inner.get(item.span) - packedWidth(item.members)) / 2;
-        for (const node of item.members) {
-          at.set(node.id, m);
-          m += width(node) + nodeGap;
-        }
-        cursor = x + outer(item.span) + nodeGap;
-      }
+        return items.length === 0 ? origin : cursor - nodeGap;
+      });
+      if (!raised) break;
     }
-    if (!raised) break;
+    return { nodeAt, ends };
+  };
+  const blocks = /* @__PURE__ */ new Map();
+  const blockOf = (span) => {
+    const known = blocks.get(span);
+    if (known !== void 0) return known;
+    const byRow = itemsByRow(span, span.children);
+    const childAt = new Map(span.children.map((c) => [c, 0]));
+    const { nodeAt, ends } = settle2(byRow, childAt, () => 0, 0);
+    const block = { width: Math.max(0, ...ends), nodeAt, childAt };
+    byRow.forEach((items, r) => {
+      if (items.some((item) => item.kind === "group")) return;
+      const shift = (block.width - ends[r]) / 2;
+      for (const item of items) {
+        if (item.kind === "node") nodeAt.set(item.node.id, nodeAt.get(item.node.id) + shift);
+      }
+    });
+    blocks.set(span, block);
+    return block;
+  };
+  function outer(span) {
+    const inset = insets.get(span);
+    return blockOf(span).width + inset.crossLo + inset.crossHi;
   }
+  const roots = spans.filter((s) => s.parent === void 0);
+  const start = new Map(roots.map((s) => [s, centerOf.get(s) - outer(s) / 2]));
+  const { nodeAt: at } = settle2(itemsByRow(void 0, roots), start, pref, -Infinity);
+  const place = (span, from) => {
+    const origin = from + insets.get(span).crossLo;
+    const block = blockOf(span);
+    for (const [id, local] of block.nodeAt) at.set(id, origin + local);
+    for (const [child, local] of block.childAt) place(child, origin + local);
+  };
+  for (const root of roots) place(root, start.get(root));
   return at;
 }
 function expandGroupEdges(edges, groups) {
   const byId = new Map(groups.map((g) => [g.id, g]));
   if (byId.size === 0) return [...edges];
-  const groupOf = /* @__PURE__ */ new Map();
-  for (const g of groups) for (const m of g.members) groupOf.set(m, g.id);
+  const within = (id, group) => {
+    if (!byId.has(id)) return group.members.includes(id);
+    for (let at = byId.get(id); at !== void 0; at = at.parent === void 0 ? void 0 : byId.get(at.parent)) {
+      if (at === group) return true;
+    }
+    return false;
+  };
   const entries = /* @__PURE__ */ new Map();
   const exits = /* @__PURE__ */ new Map();
   for (const g of groups) {
@@ -690,9 +752,8 @@ function expandGroupEdges(edges, groups) {
       out.push(e);
       continue;
     }
-    const fromOwner = fromGroup ?? groupOf.get(e.from);
-    const toOwner = toGroup ?? groupOf.get(e.to);
-    if (fromOwner !== void 0 && fromOwner === toOwner) continue;
+    if (fromGroup !== void 0 && within(e.to, byId.get(fromGroup))) continue;
+    if (toGroup !== void 0 && within(e.from, byId.get(toGroup))) continue;
     const froms = fromGroup !== void 0 ? exits.get(fromGroup) : [e.from];
     const tos = toGroup !== void 0 ? entries.get(toGroup) : [e.to];
     let k = 0;
@@ -702,13 +763,118 @@ function expandGroupEdges(edges, groups) {
   }
   return out;
 }
+
+// src/forceGroups.ts
+function resolve(groups, byId) {
+  const out = [];
+  for (const group of groups) {
+    const members = group.members.map((id) => byId.get(id)).filter((b) => b !== void 0);
+    if (members.length > 0) out.push({ members, group, children: [] });
+  }
+  const byGroup = new Map(out.map((g) => [g.group.id, g]));
+  for (const g of out) {
+    const parent = g.group.parent === void 0 ? void 0 : byGroup.get(g.group.parent);
+    if (parent === void 0) continue;
+    g.parent = parent;
+    parent.children.push(g);
+  }
+  return out;
+}
+function groupCohesion(groups, byId, strength) {
+  const resolved = resolve(groups, byId);
+  return (alpha) => {
+    for (const { members } of resolved) {
+      let cx = 0;
+      let cy = 0;
+      for (const m of members) {
+        cx += m.x;
+        cy += m.y;
+      }
+      cx /= members.length;
+      cy /= members.length;
+      for (const m of members) {
+        m.vx += (cx - m.x) * strength * alpha;
+        m.vy += (cy - m.y) * strength * alpha;
+      }
+    }
+  };
+}
+function boxOf(g) {
+  let x0 = Infinity;
+  let y0 = Infinity;
+  let x1 = -Infinity;
+  let y1 = -Infinity;
+  for (const m of g.members) {
+    x0 = Math.min(x0, m.x - m.hw);
+    y0 = Math.min(y0, m.y - m.hh);
+    x1 = Math.max(x1, m.x + m.hw);
+    y1 = Math.max(y1, m.y + m.hh);
+  }
+  for (const child of g.children) {
+    const b = boxOf(child);
+    x0 = Math.min(x0, b.x0);
+    y0 = Math.min(y0, b.y0);
+    x1 = Math.max(x1, b.x1);
+    y1 = Math.max(y1, b.y1);
+  }
+  const { inset } = g.group;
+  return { x0: x0 - inset.left, y0: y0 - inset.top, x1: x1 + inset.right, y1: y1 + inset.bottom };
+}
+function clearance(a, b, padding) {
+  const gapX = Math.min(a.x1, b.x1) - Math.max(a.x0, b.x0) + padding;
+  const gapY = Math.min(a.y1, b.y1) - Math.max(a.y0, b.y0) + padding;
+  if (gapX <= 0 || gapY <= 0) return null;
+  const dx = b.x0 + b.x1 - (a.x0 + a.x1);
+  const dy = b.y0 + b.y1 - (a.y0 + a.y1);
+  return gapX < gapY ? { x: (Math.sign(dx) || 1) * gapX, y: 0 } : { x: 0, y: (Math.sign(dy) || 1) * gapY };
+}
+function holds(outer, inner) {
+  for (let at = inner.parent; at !== void 0; at = at.parent) {
+    if (at === outer) return true;
+  }
+  return false;
+}
+function shove(bodies, x, y) {
+  for (const body of bodies) {
+    body.vx += x;
+    body.vy += y;
+  }
+}
+function separateGroups(groups, bodies, byId, padding) {
+  const resolved = resolve(groups, byId);
+  const memberSets = resolved.map((g) => new Set(g.members));
+  return () => {
+    const boxes = resolved.map(boxOf);
+    for (let i = 0; i < resolved.length; i++) {
+      for (let j = i + 1; j < resolved.length; j++) {
+        if (holds(resolved[i], resolved[j]) || holds(resolved[j], resolved[i])) continue;
+        const push = clearance(boxes[i], boxes[j], padding);
+        if (push === null) continue;
+        shove(resolved[i].members, -push.x / 2, -push.y / 2);
+        shove(resolved[j].members, push.x / 2, push.y / 2);
+      }
+      for (const body of bodies) {
+        if (memberSets[i].has(body)) continue;
+        const box = { x0: body.x - body.hw, y0: body.y - body.hh, x1: body.x + body.hw, y1: body.y + body.hh };
+        const push = clearance(boxes[i], box, padding);
+        if (push === null) continue;
+        shove(resolved[i].members, -push.x / 2, -push.y / 2);
+        body.vx += push.x / 2;
+        body.vy += push.y / 2;
+      }
+    }
+  };
+}
+
+// src/force.ts
 var DEFAULTS = {
   iterations: 300,
   linkDistance: 160,
   linkStrength: 0.35,
   charge: -3e3,
   gravity: 0.02,
-  padding: 24
+  padding: 24,
+  groupStrength: 0.2
 };
 var GOLDEN = Math.PI * (3 - Math.sqrt(5));
 var NUDGE = 0.5;
@@ -787,7 +953,8 @@ function forceRelaxation(graph, opts = {}) {
     linkStrength = DEFAULTS.linkStrength,
     charge: chargeStrength = DEFAULTS.charge,
     gravity: gravityStrength = DEFAULTS.gravity,
-    padding = DEFAULTS.padding
+    padding = DEFAULTS.padding,
+    groupStrength = DEFAULTS.groupStrength
   } = opts;
   const pinned = pinnedSet(graph, opts);
   const bodies = graph.nodes.map((node) => {
@@ -810,13 +977,15 @@ function forceRelaxation(graph, opts = {}) {
     x: bodies.reduce((sum, b) => sum + b.x, 0) / bodies.length,
     y: bodies.reduce((sum, b) => sum + b.y, 0) / bodies.length
   };
+  const groups = graph.groups ?? [];
   const sim = createSimulation({
     nodes: bodies,
     forces: [
       charge(bodies, chargeStrength),
       links(byId, graph, linkDistance, linkStrength),
       gravity(bodies, centroid, gravityStrength),
-      separateBoxes(bodies, padding)
+      separateBoxes(bodies, padding),
+      ...groups.length > 0 ? [groupCohesion(groups, byId, groupStrength), separateGroups(groups, bodies, byId, padding)] : []
     ]
   });
   return {
@@ -920,7 +1089,12 @@ function ranksOf(graph, back) {
   for (const node of graph.nodes) rankOf(node.id);
   return ranks;
 }
-var layered = (graph, opts = {}) => {
+var layered = (graph, opts = {}) => (
+  // Barycenter ordering reorders on every run by design, so it has no
+  // arrangement to settle on.
+  (graph.groups?.length ?? 0) > 0 && opts.order !== "barycenter" ? untilSettled(layeredOnce, graph, opts) : layeredOnce(graph, opts)
+);
+var layeredOnce = (graph, opts = {}) => {
   const axes = axesFor(opts.direction);
   const nodeGap = opts.nodeGap ?? DEFAULT_NODE_GAP;
   const rankGap = opts.rankGap ?? DEFAULT_RANK_GAP;
@@ -997,7 +1171,8 @@ function forestOf(graph, crossAxis) {
   }
   return { roots, children, depth };
 }
-var tree = (graph, opts = {}) => {
+var tree = (graph, opts = {}) => (graph.groups?.length ?? 0) > 0 ? untilSettled(treeOnce, graph, opts) : treeOnce(graph, opts);
+var treeOnce = (graph, opts = {}) => {
   const axes = axesFor(opts.direction);
   const nodeGap = opts.nodeGap ?? DEFAULT_NODE_GAP;
   const rankGap = opts.rankGap ?? DEFAULT_RANK_GAP;
@@ -1060,6 +1235,6 @@ var tree = (graph, opts = {}) => {
   return settle(graph, slots, opts);
 };
 
-export { COMPASS, DEFAULT_GROUP_INSET, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DIAGRAM_TRAIT_KEY, axesFor, backEdges, bodyOutline, bodyTrait, boxForContent, buildBody, canvasMeasure, center, contentBox, createDiagramNodes, dataKeyReader, diagramNodeOf, expandGroupEdges, extent, force, forceRelaxation, forestOf, graphOrder, insetOf, isPinned, layered, layoutBody, layoutRowPorts, measureBody, outlinePath, outlinePolyline, packAcross, packClusters, pinnedSet, portOf, portsOf, portsOnOutline, rankGaps, ranksOf, rayHit, seededOrder, settle, sizeToBody, translated, tree };
-//# sourceMappingURL=chunk-ERT3XWBS.js.map
-//# sourceMappingURL=chunk-ERT3XWBS.js.map
+export { COMPASS, DEFAULT_GROUP_INSET, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DIAGRAM_TRAIT_KEY, axesFor, backEdges, bodyOutline, bodyTrait, boxForContent, buildBody, canvasMeasure, center, contentBox, createDiagramNodes, dataKeyReader, diagramNodeOf, expandGroupEdges, extent, force, forceRelaxation, forestOf, graphOrder, insetOf, isPinned, layered, layoutBody, layoutRowPorts, measureBody, outlinePath, outlinePolyline, packAcross, packClusters, pinnedSet, portOf, portsOf, portsOnOutline, rankGaps, ranksOf, rayHit, seededOrder, settle, sizeToBody, translated, tree, untilSettled };
+//# sourceMappingURL=chunk-BWQJYEA3.js.map
+//# sourceMappingURL=chunk-BWQJYEA3.js.map