@graphrefly/graphrefly 0.45.0 → 0.47.0

package/dist/utils/topology-view/index.cjs

@@ -0,0 +1,620 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/topology-view/index.ts
+var topology_view_exports = {};
+__export(topology_view_exports, {
+  TopologyViewGraph: () => TopologyViewGraph,
+  topologyView: () => topologyView
+});
+module.exports = __toCommonJS(topology_view_exports);
+var import_graph = require("@graphrefly/pure-ts/graph");
+
+// src/base/render/_layout-sugiyama.ts
+function sugiyamaLayout(input) {
+  const state = buildInitial(input);
+  assignLayers(state);
+  insertVirtualNodes(state);
+  minimizeCrossings(state);
+  assignCoordinates(state, input);
+  const edges = routeEdges(state, input);
+  const { width, height } = boundingBox(state);
+  const boxes = [];
+  for (const layer of state.layers) {
+    for (const n of layer) {
+      if (n.isVirtual) continue;
+      boxes.push({
+        id: n.id,
+        layer: n.layer,
+        order: n.order,
+        x: n.x,
+        y: n.y,
+        w: n.w,
+        h: n.h
+      });
+    }
+  }
+  return { boxes, edges, width, height };
+}
+function buildInitial(input) {
+  const nodes = /* @__PURE__ */ new Map();
+  for (const id of input.nodes) {
+    nodes.set(id, {
+      id,
+      isVirtual: false,
+      layer: -1,
+      order: 0,
+      x: 0,
+      y: 0,
+      w: input.widthCells(id),
+      h: input.heightCells(id),
+      in: [],
+      out: []
+    });
+  }
+  const hops = [];
+  let chainId = 0;
+  for (const e of input.edges) {
+    if (e.from === e.to) continue;
+    const f = nodes.get(e.from);
+    const t = nodes.get(e.to);
+    if (!f || !t) continue;
+    const hop = {
+      chainId: chainId++,
+      chainFrom: e.from,
+      chainTo: e.to,
+      fromId: e.from,
+      toId: e.to,
+      hopIndex: 0,
+      chainLen: 1
+    };
+    f.out.push(hop);
+    t.in.push(hop);
+    hops.push(hop);
+  }
+  return { nodes, layers: [], hops };
+}
+function assignLayers(state) {
+  const indeg = /* @__PURE__ */ new Map();
+  for (const n of state.nodes.values()) indeg.set(n.id, n.in.length);
+  const queue = [];
+  for (const n of state.nodes.values()) {
+    if ((indeg.get(n.id) ?? 0) === 0) {
+      n.layer = 0;
+      queue.push(n);
+    }
+  }
+  const visited = /* @__PURE__ */ new Set();
+  let head = 0;
+  while (head < queue.length) {
+    const n = queue[head++];
+    if (visited.has(n.id)) continue;
+    visited.add(n.id);
+    for (const hop of n.out) {
+      const t = state.nodes.get(hop.toId);
+      t.layer = Math.max(t.layer, n.layer + 1);
+      const d = (indeg.get(t.id) ?? 0) - 1;
+      indeg.set(t.id, d);
+      if (d <= 0) queue.push(t);
+    }
+  }
+  for (const n of state.nodes.values()) if (n.layer < 0) n.layer = 0;
+}
+function insertVirtualNodes(state) {
+  const maxLayer = Math.max(0, ...Array.from(state.nodes.values(), (n) => n.layer));
+  const layers = Array.from({ length: maxLayer + 1 }, () => []);
+  for (const n of state.nodes.values()) layers[n.layer].push(n);
+  const newHops = [];
+  let virtCounter = 0;
+  for (const hop of state.hops) {
+    const f = state.nodes.get(hop.fromId);
+    const t = state.nodes.get(hop.toId);
+    const span = t.layer - f.layer;
+    if (span <= 0) {
+      f.out = f.out.filter((h) => h !== hop);
+      t.in = t.in.filter((h) => h !== hop);
+      continue;
+    }
+    if (span === 1) {
+      hop.hopIndex = 0;
+      hop.chainLen = 1;
+      newHops.push(hop);
+      continue;
+    }
+    f.out = f.out.filter((h) => h !== hop);
+    t.in = t.in.filter((h) => h !== hop);
+    let prev = f;
+    for (let i = 1; i < span; i += 1) {
+      const vid = `__virt_${virtCounter++}__`;
+      const v = {
+        id: vid,
+        isVirtual: true,
+        layer: f.layer + i,
+        order: 0,
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 1,
+        in: [],
+        out: []
+      };
+      state.nodes.set(vid, v);
+      layers[v.layer].push(v);
+      const h = {
+        chainId: hop.chainId,
+        chainFrom: hop.chainFrom,
+        chainTo: hop.chainTo,
+        fromId: prev.id,
+        toId: vid,
+        hopIndex: i - 1,
+        chainLen: span
+      };
+      prev.out.push(h);
+      v.in.push(h);
+      newHops.push(h);
+      prev = v;
+    }
+    const finalHop = {
+      chainId: hop.chainId,
+      chainFrom: hop.chainFrom,
+      chainTo: hop.chainTo,
+      fromId: prev.id,
+      toId: t.id,
+      hopIndex: span - 1,
+      chainLen: span
+    };
+    prev.out.push(finalHop);
+    t.in.push(finalHop);
+    newHops.push(finalHop);
+  }
+  for (const layer of layers) {
+    for (let i = 0; i < layer.length; i += 1) layer[i].order = i;
+  }
+  state.layers = layers;
+  state.hops = newHops;
+}
+function minimizeCrossings(state) {
+  const SWEEPS = 4;
+  for (let sweep = 0; sweep < SWEEPS; sweep += 1) {
+    for (let li = 1; li < state.layers.length; li += 1) {
+      sortByBarycenter(state, state.layers[li], "in");
+      reindex(state.layers[li]);
+    }
+    for (let li = state.layers.length - 2; li >= 0; li -= 1) {
+      sortByBarycenter(state, state.layers[li], "out");
+      reindex(state.layers[li]);
+    }
+  }
+  for (let iter = 0; iter < 2; iter += 1) {
+    let improved = false;
+    for (let li = 1; li < state.layers.length; li += 1) {
+      const layer = state.layers[li];
+      for (let i = 0; i + 1 < layer.length; i += 1) {
+        const before = pairCrossings(state, layer[i], layer[i + 1], "in");
+        [layer[i], layer[i + 1]] = [layer[i + 1], layer[i]];
+        reindex(layer);
+        const after = pairCrossings(state, layer[i], layer[i + 1], "in");
+        if (after < before) {
+          improved = true;
+        } else {
+          [layer[i], layer[i + 1]] = [layer[i + 1], layer[i]];
+          reindex(layer);
+        }
+      }
+    }
+    if (!improved) break;
+  }
+}
+function sortByBarycenter(state, layer, direction) {
+  const bary = /* @__PURE__ */ new Map();
+  for (const n of layer) {
+    const neighbors = direction === "in" ? n.in : n.out;
+    if (neighbors.length === 0) {
+      bary.set(n.id, n.order);
+      continue;
+    }
+    let sum = 0;
+    let count = 0;
+    for (const h of neighbors) {
+      const other = state.nodes.get(direction === "in" ? h.fromId : h.toId);
+      if (!other) continue;
+      sum += other.order;
+      count += 1;
+    }
+    bary.set(n.id, count === 0 ? n.order : sum / count);
+  }
+  layer.sort((a, b) => {
+    const ba = bary.get(a.id);
+    const bb = bary.get(b.id);
+    if (ba !== bb) return ba - bb;
+    return a.order - b.order;
+  });
+}
+function reindex(layer) {
+  for (let i = 0; i < layer.length; i += 1) layer[i].order = i;
+}
+function pairCrossings(state, a, b, direction) {
+  const aEdges = direction === "in" ? a.in : a.out;
+  const bEdges = direction === "in" ? b.in : b.out;
+  let crossings = 0;
+  for (const ea of aEdges) {
+    for (const eb of bEdges) {
+      const oa = state.nodes.get(direction === "in" ? ea.fromId : ea.toId)?.order ?? 0;
+      const ob = state.nodes.get(direction === "in" ? eb.fromId : eb.toId)?.order ?? 0;
+      if (a.order < b.order && oa > ob || a.order > b.order && oa < ob) {
+        crossings += 1;
+      }
+    }
+  }
+  return crossings;
+}
+function assignCoordinates(state, input) {
+  if (input.direction === "LR") assignCoordinatesLR(state, input);
+  else assignCoordinatesTD(state, input);
+}
+function assignCoordinatesLR(state, input) {
+  const layerX = [];
+  let cursorX = 0;
+  for (let li = 0; li < state.layers.length; li += 1) {
+    layerX.push(cursorX);
+    let maxW = 0;
+    for (const n of state.layers[li]) maxW = Math.max(maxW, n.w);
+    cursorX += maxW + input.layerGap;
+  }
+  for (let li = 0; li < state.layers.length; li += 1) {
+    for (const n of state.layers[li]) n.x = layerX[li];
+  }
+  for (const layer of state.layers) {
+    let y = 0;
+    for (const n of layer) {
+      n.y = y;
+      y += n.h + input.nodeGap;
+    }
+  }
+  runMedianPasses(state, input, "y");
+}
+function assignCoordinatesTD(state, input) {
+  const layerY = [];
+  let cursorY = 0;
+  for (let li = 0; li < state.layers.length; li += 1) {
+    layerY.push(cursorY);
+    let maxH = 0;
+    for (const n of state.layers[li]) maxH = Math.max(maxH, n.h);
+    cursorY += maxH + input.layerGap;
+  }
+  for (let li = 0; li < state.layers.length; li += 1) {
+    for (const n of state.layers[li]) n.y = layerY[li];
+  }
+  for (const layer of state.layers) {
+    let x = 0;
+    for (const n of layer) {
+      n.x = x;
+      x += n.w + input.nodeGap;
+    }
+  }
+  runMedianPasses(state, input, "x");
+}
+function runMedianPasses(state, input, axis) {
+  const sizeOf = (n) => axis === "y" ? n.h : n.w;
+  const gap = input.nodeGap;
+  for (let pass = 0; pass < 2; pass += 1) {
+    const walk = pass === 0 ? state.layers.slice(1) : state.layers.slice(0, -1).reverse();
+    for (const layer of walk) {
+      const preferred = /* @__PURE__ */ new Map();
+      for (const n of layer) {
+        const neighbors = pass === 0 ? n.in : n.out;
+        if (neighbors.length === 0) continue;
+        const centers = [];
+        for (const h of neighbors) {
+          const other = state.nodes.get(pass === 0 ? h.fromId : h.toId);
+          if (!other) continue;
+          const base = axis === "y" ? other.y : other.x;
+          centers.push(base + Math.floor(sizeOf(other) / 2));
+        }
+        if (centers.length === 0) continue;
+        centers.sort((a, b) => a - b);
+        const mid = centers[Math.floor(centers.length / 2)];
+        preferred.set(n.id, mid - Math.floor(sizeOf(n) / 2));
+      }
+      let floor = 0;
+      for (const n of layer) {
+        const p = preferred.get(n.id);
+        const current = axis === "y" ? n.y : n.x;
+        const target = p ?? current;
+        const clamped = Math.max(target, floor);
+        if (axis === "y") n.y = clamped;
+        else n.x = clamped;
+        floor = clamped + sizeOf(n) + gap;
+      }
+    }
+  }
+}
+function routeEdges(state, input) {
+  const byChain = /* @__PURE__ */ new Map();
+  for (const h of state.hops) {
+    const arr = byChain.get(h.chainId);
+    if (arr) arr.push(h);
+    else byChain.set(h.chainId, [h]);
+  }
+  for (const arr of byChain.values()) arr.sort((a, b) => a.hopIndex - b.hopIndex);
+  const isLR = input.direction === "LR";
+  const primary = (n) => isLR ? n.x : n.y;
+  const primarySize = (n) => isLR ? n.w : n.h;
+  const crossCenter = (n) => isLR ? n.y + Math.floor(n.h / 2) : n.x + Math.floor(n.w / 2);
+  const hopTrackCross = /* @__PURE__ */ new Map();
+  for (let g = 0; g + 1 < state.layers.length; g += 1) {
+    const srcLayer = state.layers[g];
+    const dstLayer = state.layers[g + 1];
+    let gutterStart = 0;
+    for (const n of srcLayer) gutterStart = Math.max(gutterStart, primary(n) + primarySize(n));
+    let gutterEnd = Number.POSITIVE_INFINITY;
+    for (const n of dstLayer) gutterEnd = Math.min(gutterEnd, primary(n));
+    const gEnd = Number.isFinite(gutterEnd) ? gutterEnd - 1 : gutterStart;
+    const gutterWidth = Math.max(1, gEnd - gutterStart + 1);
+    const gutterHops = [];
+    for (const n of srcLayer) for (const h of n.out) gutterHops.push(h);
+    gutterHops.sort((a, b) => {
+      const sa = crossCenter(state.nodes.get(a.fromId));
+      const sb = crossCenter(state.nodes.get(b.fromId));
+      if (sa !== sb) return sa - sb;
+      const da = crossCenter(state.nodes.get(a.toId));
+      const db = crossCenter(state.nodes.get(b.toId));
+      return da - db;
+    });
+    const tracks = [];
+    const hopToTrackIdx = /* @__PURE__ */ new Map();
+    for (const h of gutterHops) {
+      const sc = crossCenter(state.nodes.get(h.fromId));
+      const dc = crossCenter(state.nodes.get(h.toId));
+      const lo = Math.min(sc, dc);
+      const hi = Math.max(sc, dc);
+      let idx = -1;
+      for (let t = 0; t < tracks.length; t += 1) {
+        const intervals = tracks[t];
+        let fits = true;
+        for (const iv of intervals) {
+          if (iv.lo <= hi && lo <= iv.hi) {
+            fits = false;
+            break;
+          }
+        }
+        if (fits) {
+          intervals.push({ lo, hi });
+          idx = t;
+          break;
+        }
+      }
+      if (idx < 0) {
+        tracks.push([{ lo, hi }]);
+        idx = tracks.length - 1;
+      }
+      hopToTrackIdx.set(h, idx);
+    }
+    const count = tracks.length;
+    const hasMargin = gutterWidth >= Math.max(3, count + 2);
+    const usableStart = hasMargin ? gutterStart + 1 : gutterStart;
+    const usableEnd = hasMargin ? gEnd - 1 : gEnd;
+    const usableWidth = Math.max(1, usableEnd - usableStart + 1);
+    for (const h of gutterHops) {
+      const idx = hopToTrackIdx.get(h);
+      let trackPrimary;
+      if (count <= 1) {
+        trackPrimary = usableStart + Math.floor(usableWidth / 2);
+      } else {
+        const step = (usableWidth - 1) / (count - 1);
+        trackPrimary = usableStart + Math.floor(idx * step);
+      }
+      hopTrackCross.set(h, Math.max(gutterStart, Math.min(gEnd, trackPrimary)));
+    }
+  }
+  const out = [];
+  for (const [, hops] of byChain) {
+    const points = [];
+    for (let i = 0; i < hops.length; i += 1) {
+      const h = hops[i];
+      const src = state.nodes.get(h.fromId);
+      const dst = state.nodes.get(h.toId);
+      const track = hopTrackCross.get(h);
+      const srcPrimary = src.isVirtual ? primary(src) : primary(src) + primarySize(src);
+      const dstPrimary = dst.isVirtual ? primary(dst) : primary(dst) - 1;
+      const sc = crossCenter(src);
+      const dc = crossCenter(dst);
+      if (i === 0) pushPoint(points, isLR, srcPrimary, sc);
+      if (sc !== dc) {
+        pushPoint(points, isLR, track, sc);
+        pushPoint(points, isLR, track, dc);
+      }
+      pushPoint(points, isLR, dstPrimary, dc);
+    }
+    const chain = hops[0];
+    out.push({
+      from: chain.chainFrom,
+      to: chain.chainTo,
+      points: dedupWaypoints(points)
+    });
+  }
+  return out;
+}
+function pushPoint(acc, isLR, primary, cross) {
+  acc.push(isLR ? { x: primary, y: cross } : { x: cross, y: primary });
+}
+function dedupWaypoints(points) {
+  const out = [];
+  for (const p of points) {
+    const last = out[out.length - 1];
+    if (!last || last.x !== p.x || last.y !== p.y) out.push(p);
+  }
+  return out;
+}
+function boundingBox(state) {
+  let w = 0;
+  let h = 0;
+  for (const layer of state.layers) {
+    for (const n of layer) {
+      w = Math.max(w, n.x + n.w);
+      h = Math.max(h, n.y + n.h);
+    }
+  }
+  return { width: w, height: h };
+}
+
+// src/utils/topology-view/_internal.ts
+var MIN_W = 3;
+var MAX_W = 24;
+var NODE_H = 1;
+var LAYER_GAP = 4;
+var NODE_GAP = 1;
+function widthOf(id) {
+  const local = id.includes("::") ? id.split("::").pop() ?? id : id;
+  return Math.max(MIN_W, Math.min(MAX_W, local.length + 2));
+}
+function heightOf(_id) {
+  return NODE_H;
+}
+function defaultLayout(spec, direction = "LR") {
+  const ids = Object.keys(spec.nodes).sort();
+  const edges = spec.edges.map((e) => ({ from: e.from, to: e.to }));
+  if (ids.length === 0) {
+    return { boxes: [], edges: [] };
+  }
+  const result = sugiyamaLayout({
+    nodes: ids,
+    edges,
+    widthCells: widthOf,
+    heightCells: heightOf,
+    layerGap: LAYER_GAP,
+    nodeGap: NODE_GAP,
+    direction
+  });
+  const boxes = result.boxes.map((b) => ({
+    id: b.id,
+    x: b.x,
+    y: b.y,
+    w: b.w,
+    h: b.h,
+    meta: spec.nodes[b.id]?.meta
+  }));
+  const seenPerTo = /* @__PURE__ */ new Map();
+  const edgeOut = result.edges.map((e) => {
+    const toDeps = spec.nodes[e.to]?.deps ?? [];
+    const cursorKey = `${e.to}::${e.from}`;
+    const startFrom = seenPerTo.get(cursorKey) ?? 0;
+    const depIndex = toDeps.indexOf(e.from, startFrom);
+    seenPerTo.set(cursorKey, depIndex >= 0 ? depIndex + 1 : startFrom);
+    const points = e.points.map((p) => [p.x, p.y]);
+    return {
+      from: e.from,
+      to: e.to,
+      depIndex: depIndex >= 0 ? depIndex : -1,
+      points
+    };
+  });
+  return { boxes, edges: edgeOut };
+}
+
+// src/utils/topology-view/index.ts
+var TOPOLOGY_TYPES = /* @__PURE__ */ new Set([
+  "node-added",
+  "node-removed",
+  "mount",
+  "unmount"
+]);
+function isTopologyChange(c) {
+  return TOPOLOGY_TYPES.has(c.type);
+}
+var TopologyViewGraph = class extends import_graph.Graph {
+  target;
+  layout;
+  frame;
+  constructor(opts) {
+    const name = opts.name ?? "topology-view";
+    super(name, opts.graphOptions);
+    this.target = opts.graph;
+    this.layout = opts.layout ?? ((spec) => defaultLayout(spec, "LR"));
+    const changeset = this.target.observe({
+      changeset: true,
+      changesetName: "target-changeset"
+    });
+    this.add(changeset, { name: "changeset" });
+    const seedLayout = this._computeLayout();
+    const layoutNode = this.derived(
+      "layout",
+      ["changeset"],
+      (data, _ctx) => {
+        const batch0 = data[0];
+        if (batch0 == null || batch0.length === 0) {
+          return [];
+        }
+        let topologyHit = false;
+        for (const c of batch0) {
+          if (isTopologyChange(c)) {
+            topologyHit = true;
+            break;
+          }
+        }
+        if (!topologyHit) {
+          return [];
+        }
+        return [this._computeLayout()];
+      },
+      { initial: seedLayout, partial: true }
+    );
+    void layoutNode;
+    this.frame = this.derived(
+      "frame",
+      ["layout", "changeset"],
+      (data, ctx) => {
+        const layoutBatch = data[0];
+        const changesetBatch = data[1];
+        const layout = layoutBatch != null && layoutBatch.length > 0 ? layoutBatch.at(-1) : ctx.prevData[0];
+        if (layout == null) {
+          return [];
+        }
+        const changes = [];
+        if (changesetBatch != null) {
+          for (const c of changesetBatch) changes.push(c);
+        }
+        return [
+          {
+            boxes: layout.boxes,
+            edges: layout.edges,
+            changes
+          }
+        ];
+      },
+      {
+        initial: { boxes: seedLayout.boxes, edges: seedLayout.edges, changes: [] },
+        partial: true
+      }
+    );
+  }
+  _computeLayout() {
+    if (this.target.destroyed) {
+      return { boxes: [], edges: [] };
+    }
+    const spec = this.target.describe();
+    return this.layout(spec);
+  }
+};
+function topologyView(opts) {
+  const view = new TopologyViewGraph(opts);
+  view.tagFactory("topologyView");
+  return view;
+}
+//# sourceMappingURL=index.cjs.map