@floegence/floe-webapp-core 0.85.1 → 0.86.0

package/dist/components/graph/layout.js

@@ -1,91 +1,94 @@
 import { applyGraphPositions as v } from "./positions.js";
-function $(i) {
-  const n = /* @__PURE__ */ new Set(), p = (t) => {
-    if (!t || n.has(t)) throw new Error(`Duplicate or empty graph ID: ${t}`);
-    n.add(t);
-  }, s = new Map(i.nodes.map((t) => [t.id, t]));
-  for (const t of i.nodes) {
-    if (p(t.id), ![t.width, t.height].every((r) => Number.isFinite(r) && r > 0))
-      throw new Error(`Invalid dimensions for graph node: ${t.id}`);
-    for (const r of t.ports ?? []) p(r.id);
-    const a = /* @__PURE__ */ new Set([t.id]);
-    let d = t.parentId;
+import { computePackedGraphLayout as b } from "./packing.js";
+function N(n) {
+  const o = /* @__PURE__ */ new Set(), c = (e) => {
+    if (!e || o.has(e)) throw new Error(`Duplicate or empty graph ID: ${e}`);
+    o.add(e);
+  }, a = new Map(n.nodes.map((e) => [e.id, e]));
+  for (const e of n.nodes) {
+    if (c(e.id), ![e.width, e.height].every((i) => Number.isFinite(i) && i > 0))
+      throw new Error(`Invalid dimensions for graph node: ${e.id}`);
+    for (const i of e.ports ?? []) c(i.id);
+    const s = /* @__PURE__ */ new Set([e.id]);
+    let d = e.parentId;
     for (; d !== void 0; ) {
-      const r = s.get(d);
-      if (!r || r.kind !== "group")
-        throw new Error(`Invalid parent for graph node: ${t.id}`);
-      if (a.has(d)) throw new Error(`Cyclic graph containment: ${t.id}`);
-      a.add(d), d = r.parentId;
+      const i = a.get(d);
+      if (!i || i.kind !== "group")
+        throw new Error(`Invalid parent for graph node: ${e.id}`);
+      if (s.has(d)) throw new Error(`Cyclic graph containment: ${e.id}`);
+      s.add(d), d = i.parentId;
     }
   }
-  for (const t of i.edges) {
-    p(t.id);
-    for (const [a, d] of [
-      [t.source, t.sourcePort],
-      [t.target, t.targetPort]
+  for (const e of n.edges) {
+    c(e.id);
+    for (const [s, d] of [
+      [e.source, e.sourcePort],
+      [e.target, e.targetPort]
     ]) {
-      const r = s.get(a);
-      if (!r || d !== void 0 && !r.ports?.some((c) => c.id === d))
-        throw new Error(`Invalid endpoint for graph edge: ${t.id}`);
+      const i = a.get(s);
+      if (!i || d !== void 0 && !i.ports?.some((h) => h.id === d))
+        throw new Error(`Invalid endpoint for graph edge: ${e.id}`);
     }
   }
 }
-async function O(i, n, p) {
-  $(i);
-  const s = n.groupPadding ?? { top: 64, right: 28, bottom: 28, left: 28 };
-  if (![...Object.values(s), n.spacing ?? 64].every((e) => Number.isFinite(e) && e >= 0))
+async function P(n, o, c) {
+  if (N(n), o.aspectRatio !== void 0 && (!Number.isFinite(o.aspectRatio) || o.aspectRatio <= 0))
+    throw new Error("Graph layout aspect ratio must be finite and positive");
+  const a = o.groupPadding ?? { top: 64, right: 28, bottom: 28, left: 28 };
+  if (![...Object.values(a), o.spacing ?? 64].every((t) => Number.isFinite(t) && t >= 0))
     throw new Error("Graph layout spacing must be finite and nonnegative");
-  const t = /* @__PURE__ */ new Map();
-  for (const e of i.nodes)
-    t.set(e.id, {
-      id: e.id,
-      width: e.width,
-      height: e.height,
-      ...e.kind === "group" ? { children: [] } : {},
-      ports: e.ports?.map((o) => ({
-        id: o.id,
+  if (o.aspectRatio !== void 0) return b(n, o, c);
+  const e = /* @__PURE__ */ new Map();
+  for (const t of n.nodes)
+    e.set(t.id, {
+      id: t.id,
+      width: t.width,
+      height: t.height,
+      ...t.kind === "group" ? { children: [] } : {},
+      ports: t.ports?.map((r) => ({
+        id: r.id,
         width: 1,
         height: 1,
-        layoutOptions: { "elk.port.side": o.side }
+        layoutOptions: { "elk.port.side": r.side }
       })),
       layoutOptions: {
         "elk.portConstraints": "FIXED_ORDER",
-        "elk.padding": `[top=${s.top},left=${s.left},bottom=${s.bottom},right=${s.right}]`
+        "elk.padding": `[top=${a.top},left=${a.left},bottom=${a.bottom},right=${a.right}]`
       }
     });
-  const a = [];
-  for (const e of i.nodes)
-    (e.parentId ? t.get(e.parentId).children : a).push(t.get(e.id));
+  const s = [];
+  for (const t of n.nodes)
+    (t.parentId ? e.get(t.parentId).children : s).push(e.get(t.id));
   const d = /* @__PURE__ */ new Set([
-    ...i.nodes.flatMap((e) => [e.id, ...(e.ports ?? []).map((o) => o.id)]),
-    ...i.edges.map((e) => e.id)
+    ...n.nodes.flatMap((t) => [t.id, ...(t.ports ?? []).map((r) => r.id)]),
+    ...n.edges.map((t) => t.id)
   ]);
-  let r = "$graph";
-  for (; d.has(r); ) r += "$";
-  const c = await p.layout({
-    id: r,
-    children: a,
-    edges: i.edges.map((e) => ({
-      id: e.id,
-      sources: [e.sourcePort ?? e.source],
-      targets: [e.targetPort ?? e.target]
+  let i = "$graph";
+  for (; d.has(i); ) i += "$";
+  const h = await c.layout({
+    id: i,
+    children: s,
+    edges: n.edges.map((t) => ({
+      id: t.id,
+      sources: [t.sourcePort ?? t.source],
+      targets: [t.targetPort ?? t.target]
     })),
     layoutOptions: {
       "elk.algorithm": "layered",
-      "elk.direction": n.direction ?? "RIGHT",
+      "elk.direction": o.direction ?? "RIGHT",
       "elk.edgeRouting": "ORTHOGONAL",
       "elk.hierarchyHandling": "INCLUDE_CHILDREN",
-      "elk.spacing.nodeNode": String(n.spacing ?? 64),
-      "elk.layered.spacing.nodeNodeBetweenLayers": String(n.spacing ?? 64),
+      "elk.spacing.nodeNode": String(o.spacing ?? 64),
+      "elk.layered.spacing.nodeNodeBetweenLayers": String(o.spacing ?? 64),
       "elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
       "elk.randomSeed": "1"
     }
-  }), f = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Map(), I = (e) => {
-    for (const o of e.edges ?? []) {
-      const h = o.container ?? e.id, l = f.get(h) ?? { x: 0, y: 0 };
+  }), f = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Map(), E = (t) => {
+    for (const r of t.edges ?? []) {
+      const p = r.container ?? t.id, l = f.get(p) ?? { x: 0, y: 0 };
       x.set(
-        o.id,
-        (o.sections ?? []).map(
+        r.id,
+        (r.sections ?? []).map(
           (g) => [g.startPoint, ...g.bendPoints ?? [], g.endPoint].map((w) => ({
             x: w.x + l.x,
             y: w.y + l.y
@@ -93,34 +96,34 @@ async function O(i, n, p) {
         )
       );
     }
-    for (const o of e.children ?? []) I(o);
-  }, E = (e, o, h) => {
-    const l = o + (e.x ?? 0), g = h + (e.y ?? 0);
-    f.set(e.id, { x: l, y: g, width: e.width ?? 0, height: e.height ?? 0 });
-    for (const w of e.children ?? []) E(w, l, g);
+    for (const r of t.children ?? []) E(r);
+  }, I = (t, r, p) => {
+    const l = r + (t.x ?? 0), g = p + (t.y ?? 0);
+    f.set(t.id, { x: l, y: g, width: t.width ?? 0, height: t.height ?? 0 });
+    for (const w of t.children ?? []) I(w, l, g);
   };
-  for (const e of c.children ?? []) E(e, 0, 0);
-  I(c);
-  const y = !n.positions?.length && n.anchor && f.get(n.anchor.nodeId), m = y ? n.anchor.position.x - y.x : 0, u = y ? n.anchor.position.y - y.y : 0, k = i.nodes.map((e) => {
-    const o = f.get(e.id);
-    return { ...e, ...o, x: o.x + m, y: o.y + u };
+  for (const t of h.children ?? []) I(t, 0, 0);
+  E(h);
+  const y = !o.positions?.length && o.anchor && f.get(o.anchor.nodeId), m = y ? o.anchor.position.x - y.x : 0, u = y ? o.anchor.position.y - y.y : 0, k = n.nodes.map((t) => {
+    const r = f.get(t.id);
+    return { ...t, ...r, x: r.x + m, y: r.y + u };
   });
   return v(
     {
       nodes: k,
-      edges: i.edges.map((e) => ({
-        ...e,
-        sections: (x.get(e.id) ?? []).map(
-          (o) => o.map((h) => ({ x: h.x + m, y: h.y + u }))
+      edges: n.edges.map((t) => ({
+        ...t,
+        sections: (x.get(t.id) ?? []).map(
+          (r) => r.map((p) => ({ x: p.x + m, y: p.y + u }))
         )
       })),
-      bounds: { x: m, y: u, width: c.width ?? 0, height: c.height ?? 0 }
+      bounds: { x: m, y: u, width: h.width ?? 0, height: h.height ?? 0 }
     },
-    n,
-    i.nodes
+    o,
+    n.nodes
   );
 }
 export {
-  O as computeGraphLayout,
-  $ as validateGraphInput
+  P as computeGraphLayout,
+  N as validateGraphInput
 };

package/dist/components/graph/packing.d.ts

@@ -0,0 +1,4 @@
+import type { ELK } from 'elkjs/lib/elk-api';
+import type { GraphInput, GraphLayout, GraphLayoutOptions } from './types';
+/** Lay out each containment level as peers, then route the complete compound graph. */
+export declare function computePackedGraphLayout(input: GraphInput, options: GraphLayoutOptions, engine: Pick<ELK, 'layout'>): Promise<GraphLayout>;

package/dist/components/graph/packing.js

@@ -0,0 +1,74 @@
+import { applyGraphPositions as b, routeGraphGeometry as G } from "./positions.js";
+async function O(d, n, k) {
+  const a = new Map(d.nodes.map((e) => [e.id, { ...e, x: 0, y: 0 }])), r = /* @__PURE__ */ new Map();
+  for (const e of a.values()) {
+    const i = r.get(e.parentId) ?? [];
+    i.push(e), r.set(e.parentId, i);
+  }
+  const x = /* @__PURE__ */ new Set([
+    ...d.nodes.flatMap((e) => [e.id, ...(e.ports ?? []).map((i) => i.id)]),
+    ...d.edges.map((e) => e.id)
+  ]);
+  let l = "$packed";
+  for (; x.has(l); ) l += "$";
+  const g = n.groupPadding ?? { top: 64, right: 28, bottom: 28, left: 28 }, p = (e, i, o) => {
+    e.x += i, e.y += o;
+    for (const c of r.get(e.id) ?? []) p(c, i, o);
+  }, y = (e, i) => {
+    let o = a.get(e);
+    for (; o && o.parentId !== i; )
+      o = o.parentId ? a.get(o.parentId) : void 0;
+    return o;
+  }, m = async (e) => {
+    const i = r.get(e) ?? [];
+    for (const t of i) {
+      if (!r.has(t.id)) continue;
+      const s = await m(t.id);
+      t.width = Math.max(t.width, s.width), t.height = Math.max(t.height, s.height);
+    }
+    if (!i.length) return { width: 0, height: 0 };
+    const o = /* @__PURE__ */ new Map();
+    for (const t of d.edges) {
+      const s = y(t.source, e), h = y(t.target, e);
+      if (!s || !h || s.id === h.id) continue;
+      const w = JSON.stringify([s.id, h.id]);
+      o.has(w) || o.set(w, { id: t.id, sources: [s.id], targets: [h.id] });
+    }
+    const c = await k.layout({
+      id: e ?? l,
+      children: i.map((t) => ({ id: t.id, width: t.width, height: t.height })),
+      edges: [...o.values()],
+      layoutOptions: {
+        "elk.algorithm": o.size ? "layered" : "rectpacking",
+        "elk.direction": n.direction ?? "RIGHT",
+        "elk.edgeRouting": "ORTHOGONAL",
+        "elk.separateConnectedComponents": "true",
+        "elk.aspectRatio": String(n.aspectRatio),
+        "elk.spacing.componentComponent": String(n.spacing ?? 64),
+        "elk.spacing.nodeNode": String(n.spacing ?? 64),
+        "elk.layered.spacing.nodeNodeBetweenLayers": String(n.spacing ?? 64),
+        "elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
+        "elk.padding": e ? `[top=${g.top},left=${g.left},bottom=${g.bottom},right=${g.right}]` : "[top=12,left=12,bottom=12,right=12]",
+        "elk.randomSeed": "1"
+      }
+    });
+    for (const t of c.children ?? []) {
+      const s = a.get(t.id);
+      p(s, (t.x ?? 0) - s.x, (t.y ?? 0) - s.y);
+    }
+    return { width: c.width ?? 0, height: c.height ?? 0 };
+  }, S = await m(), f = !n.positions?.length && n.anchor && a.get(n.anchor.nodeId);
+  if (f) {
+    const e = n.anchor.position.x - f.x, i = n.anchor.position.y - f.y;
+    for (const o of r.get(void 0) ?? []) p(o, e, i);
+  }
+  const u = {
+    nodes: [...a.values()],
+    edges: d.edges.map((e) => ({ ...e, sections: [] })),
+    bounds: { x: 0, y: 0, ...S }
+  };
+  return n.positions?.length ? b(u, n, d.nodes) : G(u);
+}
+export {
+  O as computePackedGraphLayout
+};

package/dist/components/graph/positions.d.ts

@@ -1,3 +1,5 @@
 import type { GraphLayout, GraphLayoutOptions, GraphNode } from './types';
 /** Apply explicit fixed or preferred positions, then route the resulting geometry once. */
 export declare function applyGraphPositions(layout: GraphLayout, options: GraphLayoutOptions, input: readonly GraphNode[]): GraphLayout;
+/** Shared routing and bounds for explicit positions and packed compound geometry. */
+export declare function routeGraphGeometry(layout: GraphLayout): GraphLayout;

package/dist/components/graph/positions.js

@@ -1,169 +1,174 @@
-const H = (e, n = 0) => ({
-  left: e.x - n,
-  top: e.y - n,
-  right: e.x + e.width + n,
-  bottom: e.y + e.height + n
-}), N = (e, n) => e.x > n.left && e.x < n.right && e.y > n.top && e.y < n.bottom, W = (e, n, v) => !v.some(
-  (r) => e.x === n.x ? e.x > r.left && e.x < r.right && Math.max(e.y, n.y) > r.top && Math.min(e.y, n.y) < r.bottom : e.y > r.top && e.y < r.bottom && Math.max(e.x, n.x) > r.left && Math.min(e.x, n.x) < r.right
+const T = (r, a = 0) => ({
+  left: r.x - a,
+  top: r.y - a,
+  right: r.x + r.width + a,
+  bottom: r.y + r.height + a
+}), S = (r, a) => r.x > a.left && r.x < a.right && r.y > a.top && r.y < a.bottom, O = (r, a, w) => !w.some(
+  (c) => r.x === a.x ? r.x > c.left && r.x < c.right && Math.max(r.y, a.y) > c.top && Math.min(r.y, a.y) < c.bottom : r.y > c.top && r.y < c.bottom && Math.max(r.x, a.x) > c.left && Math.min(r.x, a.x) < c.right
 );
-function A(e, n, v) {
-  if (v.some((h) => N(e, h) || N(n, h)))
+function P(r, a, w) {
+  if (w.some((e) => S(r, e) || S(a, e)))
     throw new Error("Pinned graph positions obstruct an edge endpoint");
-  const r = [
-    .../* @__PURE__ */ new Set([e.x, n.x, ...v.flatMap((h) => [h.left, h.right])])
-  ].sort((h, t) => h - t), I = [
-    .../* @__PURE__ */ new Set([e.y, n.y, ...v.flatMap((h) => [h.top, h.bottom])])
-  ].sort((h, t) => h - t), w = (h) => ({ x: r[h % r.length], y: I[Math.floor(h / r.length)] }), M = I.indexOf(e.y) * r.length + r.indexOf(e.x), b = I.indexOf(n.y) * r.length + r.indexOf(n.x), S = /* @__PURE__ */ new Map([[M, 0]]), O = /* @__PURE__ */ new Map(), y = [], E = (h) => {
-    let t = y.length;
-    for (y.push(h); t > 0; ) {
-      const c = t - 1 >> 1;
-      if (y[c].score <= h.score) break;
-      y[t] = y[c], t = c;
+  const c = [
+    .../* @__PURE__ */ new Set([r.x, a.x, ...w.flatMap((e) => [e.left, e.right])])
+  ].sort((e, i) => e - i), m = [
+    .../* @__PURE__ */ new Set([r.y, a.y, ...w.flatMap((e) => [e.top, e.bottom])])
+  ].sort((e, i) => e - i), l = (e) => ({ x: c[e % c.length], y: m[Math.floor(e / c.length)] }), g = m.indexOf(r.y) * c.length + c.indexOf(r.x), n = m.indexOf(a.y) * c.length + c.indexOf(a.x), M = /* @__PURE__ */ new Map([[g, 0]]), d = /* @__PURE__ */ new Map(), t = [], u = (e) => {
+    let i = t.length;
+    for (t.push(e); i > 0; ) {
+      const x = i - 1 >> 1;
+      if (t[x].score <= e.score) break;
+      t[i] = t[x], i = x;
     }
-    y[t] = h;
-  }, T = () => {
-    const h = y[0], t = y.pop();
-    if (y.length) {
-      let c = 0;
-      for (; c * 2 + 1 < y.length; ) {
-        let p = c * 2 + 1;
-        if (p + 1 < y.length && y[p + 1].score < y[p].score && p++, y[p].score >= t.score) break;
-        y[c] = y[p], c = p;
+    t[i] = e;
+  }, I = () => {
+    const e = t[0], i = t.pop();
+    if (t.length) {
+      let x = 0;
+      for (; x * 2 + 1 < t.length; ) {
+        let h = x * 2 + 1;
+        if (h + 1 < t.length && t[h + 1].score < t[h].score && h++, t[h].score >= i.score) break;
+        t[x] = t[h], x = h;
       }
-      y[c] = t;
+      t[x] = i;
     }
-    return h;
+    return e;
   };
-  E({ id: M, score: 0, cost: 0 });
-  let P = 0;
-  for (; y.length && P++ < 5e4; ) {
-    const h = T();
-    if (h.cost !== S.get(h.id)) continue;
-    if (h.id === b) {
-      const x = [w(b)];
-      let s = b;
-      for (; s !== M; )
-        s = O.get(s), x.push(w(s));
-      return x.reverse(), x.filter((a, o) => {
-        const f = x[o - 1], m = x[o + 1];
-        return !f || !m || !(f.x === a.x && a.x === m.x || f.y === a.y && a.y === m.y);
+  u({ id: g, score: 0, cost: 0 });
+  let v = 0;
+  for (; t.length && v++ < 5e4; ) {
+    const e = I();
+    if (e.cost !== M.get(e.id)) continue;
+    if (e.id === n) {
+      const y = [l(n)];
+      let o = n;
+      for (; o !== g; )
+        o = d.get(o), y.push(l(o));
+      return y.reverse(), y.filter((p, f) => {
+        const E = y[f - 1], b = y[f + 1];
+        return !E || !b || !(E.x === p.x && p.x === b.x || E.y === p.y && p.y === b.y);
       });
     }
-    const t = w(h.id), c = h.id % r.length, p = Math.floor(h.id / r.length), d = [
-      c ? h.id - 1 : -1,
-      c + 1 < r.length ? h.id + 1 : -1,
-      p ? h.id - r.length : -1,
-      p + 1 < I.length ? h.id + r.length : -1
+    const i = l(e.id), x = e.id % c.length, h = Math.floor(e.id / c.length), s = [
+      x ? e.id - 1 : -1,
+      x + 1 < c.length ? e.id + 1 : -1,
+      h ? e.id - c.length : -1,
+      h + 1 < m.length ? e.id + c.length : -1
     ];
-    for (const x of d) {
-      if (x < 0) continue;
-      const s = w(x), a = h.cost + Math.abs(t.x - s.x) + Math.abs(t.y - s.y);
-      a >= (S.get(x) ?? 1 / 0) || !W(t, s, v) || (S.set(x, a), O.set(x, h.id), E({ id: x, cost: a, score: a + Math.abs(s.x - n.x) + Math.abs(s.y - n.y) }));
+    for (const y of s) {
+      if (y < 0) continue;
+      const o = l(y), p = e.cost + Math.abs(i.x - o.x) + Math.abs(i.y - o.y);
+      p >= (M.get(y) ?? 1 / 0) || !O(i, o, w) || (M.set(y, p), d.set(y, e.id), u({ id: y, cost: p, score: p + Math.abs(o.x - a.x) + Math.abs(o.y - a.y) }));
     }
   }
   throw new Error("Pinned graph positions cannot be routed within the layout budget");
 }
-function F(e, n, v) {
-  if (!n.positions?.length) return e;
-  const r = new Map(e.nodes.map((t) => [t.id, { ...t }])), I = /* @__PURE__ */ new Map();
-  for (const t of n.positions) {
-    if (!r.has(t.nodeId) || I.has(t.nodeId) || !Number.isFinite(t.x) || !Number.isFinite(t.y))
+function k(r, a, w) {
+  if (!a.positions?.length) return r;
+  const c = new Map(r.nodes.map((t) => [t.id, { ...t }])), m = /* @__PURE__ */ new Map();
+  for (const t of a.positions) {
+    if (!c.has(t.nodeId) || m.has(t.nodeId) || !Number.isFinite(t.x) || !Number.isFinite(t.y))
       throw new Error(`Invalid graph position: ${t.nodeId}`);
-    I.set(t.nodeId, t);
+    m.set(t.nodeId, t);
   }
-  const w = /* @__PURE__ */ new Map();
-  for (const t of r.values())
+  const l = /* @__PURE__ */ new Map();
+  for (const t of c.values())
     if (t.parentId) {
-      const c = w.get(t.parentId) ?? [];
-      c.push(t), w.set(t.parentId, c);
+      const u = l.get(t.parentId) ?? [];
+      u.push(t), l.set(t.parentId, u);
     }
-  const M = n.groupPadding ?? { top: 64, left: 28, right: 28, bottom: 28 }, b = n.positionMode === "preferred", S = new Map(v.map((t) => [t.id, t])), O = (t, c, p) => {
-    const d = { x: t.x, y: t.y }, x = I.get(t.id);
-    t.x = x?.x ?? t.x + c, t.y = x?.y ?? t.y + p;
-    const s = w.get(t.id) ?? [];
-    for (const l of s) O(l, t.x - d.x, t.y - d.y);
-    if (!s.length || b) return;
-    const a = Math.min(...s.map((l) => l.x)) - M.left, o = Math.min(...s.map((l) => l.y)) - M.top;
-    if (x && (a < t.x || o < t.y))
+  const g = a.groupPadding ?? { top: 64, left: 28, right: 28, bottom: 28 }, n = a.positionMode === "preferred", M = new Map(w.map((t) => [t.id, t])), d = (t, u, I) => {
+    const v = { x: t.x, y: t.y }, e = m.get(t.id);
+    t.x = e?.x ?? t.x + u, t.y = e?.y ?? t.y + I;
+    const i = l.get(t.id) ?? [];
+    for (const o of i) d(o, t.x - v.x, t.y - v.y);
+    if (!i.length || n) return;
+    const x = Math.min(...i.map((o) => o.x)) - g.left, h = Math.min(...i.map((o) => o.y)) - g.top;
+    if (e && (x < t.x || h < t.y))
       throw new Error(`Pinned child lies outside group content: ${t.id}`);
-    const f = Math.max(
+    const s = Math.max(
       t.x + t.width,
-      ...s.map((l) => l.x + l.width + M.right)
-    ), m = Math.max(
+      ...i.map((o) => o.x + o.width + g.right)
+    ), y = Math.max(
       t.y + t.height,
-      ...s.map((l) => l.y + l.height + M.bottom)
+      ...i.map((o) => o.y + o.height + g.bottom)
     );
-    x || (t.x = Math.min(t.x, a), t.y = Math.min(t.y, o)), t.width = f - t.x, t.height = m - t.y;
+    e || (t.x = Math.min(t.x, x), t.y = Math.min(t.y, h)), t.width = s - t.x, t.height = y - t.y;
   };
-  for (const t of r.values()) t.parentId || O(t, 0, 0);
-  if (b) {
-    const t = Math.max(16, n.spacing ?? 64), c = (s, a, o) => {
-      s.x += a, s.y += o;
-      for (const f of w.get(s.id) ?? []) c(f, a, o);
-    }, p = (s) => {
-      const a = [];
-      for (const o of [...s].sort(
-        (f, m) => f.y - m.y || f.x - m.x || f.id.localeCompare(m.id)
+  for (const t of c.values()) t.parentId || d(t, 0, 0);
+  if (n) {
+    const t = Math.max(16, a.spacing ?? 64), u = (i, x, h) => {
+      i.x += x, i.y += h;
+      for (const s of l.get(i.id) ?? []) u(s, x, h);
+    }, I = (i) => {
+      const x = [];
+      for (const h of [...i].sort(
+        (s, y) => s.y - y.y || s.x - y.x || s.id.localeCompare(y.id)
       )) {
-        const f = { x: o.x, y: o.y };
-        for (const i of [...a].sort((g, u) => g.x - u.x))
-          o.y < i.y + i.height + t && o.y + o.height + t > i.y && f.x < i.x + i.width + t && f.x + o.width + t > i.x && (f.x = i.x + i.width + t);
-        const m = { x: o.x, y: o.y };
-        for (const i of [...a].sort((g, u) => g.y - u.y))
-          o.x < i.x + i.width + t && o.x + o.width + t > i.x && m.y < i.y + i.height + t && m.y + o.height + t > i.y && (m.y = i.y + i.height + t);
-        const l = f.x - o.x < m.y - o.y ? f : m;
-        c(o, l.x - o.x, l.y - o.y), a.push(o);
+        const s = { x: h.x, y: h.y };
+        for (const p of [...x].sort((f, E) => f.x - E.x))
+          h.y < p.y + p.height + t && h.y + h.height + t > p.y && s.x < p.x + p.width + t && s.x + h.width + t > p.x && (s.x = p.x + p.width + t);
+        const y = { x: h.x, y: h.y };
+        for (const p of [...x].sort((f, E) => f.y - E.y))
+          h.x < p.x + p.width + t && h.x + h.width + t > p.x && y.y < p.y + p.height + t && y.y + h.height + t > p.y && (y.y = p.y + p.height + t);
+        const o = s.x - h.x < y.y - h.y ? s : y;
+        u(h, o.x - h.x, o.y - h.y), x.push(h);
       }
-    }, d = (s) => {
-      const a = w.get(s.id) ?? [];
-      if (!a.length) return;
-      for (const g of a) d(g);
-      p(a);
-      const o = Math.max(12, M.left), f = Math.max(12, M.top), m = Math.max(12, M.right), l = Math.max(12, M.bottom), i = I.get(s.id);
-      s.x = Math.min(i?.x ?? 1 / 0, Math.min(...a.map((g) => g.x)) - o), s.y = Math.min(i?.y ?? 1 / 0, Math.min(...a.map((g) => g.y)) - f), s.width = Math.max(
-        S.get(s.id).width,
-        Math.max(...a.map((g) => g.x + g.width)) + m - s.x
-      ), s.height = Math.max(
-        S.get(s.id).height,
-        Math.max(...a.map((g) => g.y + g.height)) + l - s.y
+    }, v = (i) => {
+      const x = l.get(i.id) ?? [];
+      if (!x.length) return;
+      for (const f of x) v(f);
+      I(x);
+      const h = Math.max(12, g.left), s = Math.max(12, g.top), y = Math.max(12, g.right), o = Math.max(12, g.bottom), p = m.get(i.id);
+      i.x = Math.min(p?.x ?? 1 / 0, Math.min(...x.map((f) => f.x)) - h), i.y = Math.min(p?.y ?? 1 / 0, Math.min(...x.map((f) => f.y)) - s), i.width = Math.max(
+        M.get(i.id).width,
+        Math.max(...x.map((f) => f.x + f.width)) + y - i.x
+      ), i.height = Math.max(
+        M.get(i.id).height,
+        Math.max(...x.map((f) => f.y + f.height)) + o - i.y
       );
-    }, x = [...r.values()].filter((s) => !s.parentId);
-    for (const s of x) d(s);
-    p(x);
+    }, e = [...c.values()].filter((i) => !i.parentId);
+    for (const i of e) v(i);
+    I(e);
   }
-  const y = e.edges.map((t) => {
-    const c = r.get(t.source), p = r.get(t.target), d = (i, g, u) => i.ports?.find((k) => k.id === g)?.side ?? u, x = c.x + c.width / 2 <= p.x + p.width / 2, s = (i, g) => {
-      const u = { x: i.x + i.width / 2, y: i.y + i.height / 2 };
-      return g === "NORTH" ? [
-        { x: u.x, y: i.y },
-        { x: u.x, y: i.y - 8 }
-      ] : g === "SOUTH" ? [
-        { x: u.x, y: i.y + i.height },
-        { x: u.x, y: i.y + i.height + 8 }
-      ] : g === "WEST" ? [
-        { x: i.x, y: u.y },
-        { x: i.x - 8, y: u.y }
+  return N({ ...r, nodes: [...c.values()] });
+}
+function N(r) {
+  if (!r.nodes.length) return r;
+  const a = new Map(r.nodes.map((n) => [n.id, n])), w = r.edges.map((n) => {
+    const M = a.get(n.source), d = a.get(n.target), t = (s, y, o) => s.ports?.find((p) => p.id === y)?.side ?? o, u = M.x + M.width / 2 <= d.x + d.width / 2, I = (s, y) => {
+      const o = { x: s.x + s.width / 2, y: s.y + s.height / 2 };
+      return y === "NORTH" ? [
+        { x: o.x, y: s.y },
+        { x: o.x, y: s.y - 8 }
+      ] : y === "SOUTH" ? [
+        { x: o.x, y: s.y + s.height },
+        { x: o.x, y: s.y + s.height + 8 }
+      ] : y === "WEST" ? [
+        { x: s.x, y: o.y },
+        { x: s.x - 8, y: o.y }
       ] : [
-        { x: i.x + i.width, y: u.y },
-        { x: i.x + i.width + 8, y: u.y }
+        { x: s.x + s.width, y: o.y },
+        { x: s.x + s.width + 8, y: o.y }
       ];
-    }, [a, o] = s(c, d(c, t.sourcePort, x ? "EAST" : "WEST")), [f, m] = s(
-      p,
-      d(p, t.targetPort, c === p ? "NORTH" : x ? "WEST" : "EAST")
-    ), l = [...r.values()].filter((i) => i.kind !== "group").map((i) => H(i, 4));
-    return { ...t, sections: [[a, ...A(o, m, l), f]] };
-  }), E = [...r.values()], T = y.flatMap((t) => t.sections.flat()), P = Math.min(...E.map((t) => t.x), ...T.map((t) => t.x)), h = Math.min(...E.map((t) => t.y), ...T.map((t) => t.y));
+    }, [v, e] = I(M, t(M, n.sourcePort, u ? "EAST" : "WEST")), [i, x] = I(
+      d,
+      t(d, n.targetPort, M === d ? "NORTH" : u ? "WEST" : "EAST")
+    ), h = [...a.values()].filter((s) => s.kind !== "group").map((s) => T(s, 4));
+    return { ...n, sections: [[v, ...P(e, x, h), i]] };
+  }), c = [...a.values()], m = w.flatMap((n) => n.sections.flat()), l = Math.min(...c.map((n) => n.x), ...m.map((n) => n.x)), g = Math.min(...c.map((n) => n.y), ...m.map((n) => n.y));
   return {
-    nodes: E,
-    edges: y,
+    nodes: c,
+    edges: w,
     bounds: {
-      x: P,
-      y: h,
-      width: Math.max(...E.map((t) => t.x + t.width), ...T.map((t) => t.x)) - P,
-      height: Math.max(...E.map((t) => t.y + t.height), ...T.map((t) => t.y)) - h
+      x: l,
+      y: g,
+      width: Math.max(...c.map((n) => n.x + n.width), ...m.map((n) => n.x)) - l,
+      height: Math.max(...c.map((n) => n.y + n.height), ...m.map((n) => n.y)) - g
     }
   };
 }
 export {
-  F as applyGraphPositions
+  k as applyGraphPositions,
+  N as routeGraphGeometry
 };

package/dist/components/graph/types.d.ts

@@ -46,6 +46,8 @@ export interface GraphLayout {
     bounds: GraphBounds;
 }
 export interface GraphLayoutOptions {
+    /** Desired width/height when packing disconnected objects, including group members. */
+    aspectRatio?: number;
     /** Absolute world positions. Descendants move with their group. Invalid positions always fail. */
     positions?: readonly (GraphPoint & {
         nodeId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.85.1",
+  "version": "0.86.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",