dsh-model-everything 0.5.0 → 0.5.2

package/lib/render/channels.js

@@ -0,0 +1,243 @@
+/**
+ * Channel assignment: where the vertical lanes and the horizontal runs between two rows go.
+ *
+ * The stages before this one decide where the boxes are, and the painter decides what a box looks like. What is left
+ * is the space between two rows, and an edge that decides that space alone will collide with the next one: every long
+ * edge has to cross a row somewhere, and every edge whose two ends are not vertically aligned needs one horizontal run
+ * inside the gap it crosses. Chosen independently, two runs land on one height and read as a junction, and a run
+ * sweeps across a vertical another edge is already using.
+ *
+ * So this stage assigns both, after the boxes have settled and before anything is drawn:
+ *
+ * - **A lane's x.** A long edge owns one vertical lane through the rows it crosses. The x is a position no box
+ *   occupies in any of those rows, and lanes keep the order their dummies have in the ordering, so two lanes never
+ *   share an x inside one gap. Alignment is worth a detour: a lane that lands inside a box's own port span turns a
+ *   four-bend staircase into a straight drop, so alignment comes before distance from the proposed position.
+ * - **A run's y.** The horizontal runs inside one gap are stacked at distinct heights - Graphviz's virtual nodes - so
+ *   two runs never lie on one line, and a nested run stays near the box it leaves.
+ *
+ * Pure: rows, chains and coordinates in; lane positions and run heights out.
+ */
+/** How far a port sits from a box's corner. The painter places ports from this same number. */
+export const PORT_INSET = 10;
+/** The x's a port may sit at on a box's top or bottom side. */
+function spanOf(box) {
+    const lo = box.x + PORT_INSET;
+    const hi = box.x + box.width - PORT_INSET;
+    return hi > lo ? { lo, hi } : { lo: box.x + box.width / 2, hi: box.x + box.width / 2 };
+}
+function clamp(value, span) {
+    return Math.min(span.hi, Math.max(span.lo, value));
+}
+function inside(value, span) {
+    return value >= span.lo - 0.001 && value <= span.hi + 0.001;
+}
+/** The intervals a blocked strip cuts out of the free ones. */
+function cut(free, blocked) {
+    const out = [];
+    for (const span of free) {
+        if (blocked.hi <= span.lo || blocked.lo >= span.hi) {
+            out.push(span);
+            continue;
+        }
+        if (blocked.lo > span.lo)
+            out.push({ lo: span.lo, hi: blocked.lo });
+        if (blocked.hi < span.hi)
+            out.push({ lo: blocked.hi, hi: span.hi });
+    }
+    return out;
+}
+/** The nearest free x at or after `value`: a lane pushed right never lands inside a box. */
+function atOrAfter(value, free) {
+    let found = value;
+    for (const span of free) {
+        if (span.hi < value)
+            continue;
+        found = Math.max(value, span.lo);
+        break;
+    }
+    return found;
+}
+/** The x a lane takes: aligned with a box's own port if it can be, then the proposed position, then the detour. */
+function choose(entry) {
+    const candidates = [entry.proposal, entry.source.lo, entry.source.hi, entry.target.lo, entry.target.hi];
+    candidates.push((clamp(entry.proposal, entry.source) + clamp(entry.proposal, entry.target)) / 2);
+    // Ordered by what the drawing wants: no detour at either end first, then the position coordinate assignment
+    // proposed, then the shorter detour. A free x is never this stage's to invent - the corridor is already there.
+    let best = entry.proposal;
+    let bestBends = Infinity;
+    let bestFar = Infinity;
+    let bestReach = Infinity;
+    for (const span of entry.free) {
+        for (const value of candidates) {
+            const x = clamp(value, span);
+            const bends = (inside(x, entry.source) ? 0 : 1) + (inside(x, entry.target) ? 0 : 1);
+            const far = Math.abs(x - entry.proposal);
+            const reach = Math.abs(x - clamp(x, entry.source)) + Math.abs(x - clamp(x, entry.target));
+            const better = bends < bestBends ||
+                (bends === bestBends && (far < bestFar - 0.001 || (Math.abs(far - bestFar) <= 0.001 && reach < bestReach)));
+            if (!better)
+                continue;
+            best = x;
+            bestBends = bends;
+            bestFar = far;
+            bestReach = reach;
+        }
+    }
+    return best;
+}
+/**
+ * The two ports the painter will place for an edge between two adjacent rows.
+ *
+ * The painter reads the side off the rows and the position off the box the edge points at; this repeats that rule so
+ * the run's height can be stacked against the runs it will actually share a gap with.
+ */
+function adjacentPorts(source, target) {
+    const fromMiddle = source.x + source.width / 2;
+    const toMiddle = target.x + target.width / 2;
+    const fromSpan = spanOf(source);
+    const toSpan = spanOf(target);
+    const chosen = inside(fromMiddle, toSpan) ? fromMiddle : clamp(toMiddle, fromSpan);
+    return { from: clamp(chosen, fromSpan), to: clamp(chosen, toSpan) };
+}
+export function assignChannels(input, options) {
+    const { layers, chains, chainOf, boxes, layerY, layerHeight, laneX } = input;
+    const rowOf = new Map();
+    layers.forEach((row, depth) => {
+        for (const id of row)
+            rowOf.set(id, depth);
+    });
+    // A lane's x: free in every row it crosses, and reachable from both ends.
+    const long = [];
+    for (const chain of chains) {
+        if (chain.path.length <= 2)
+            continue;
+        const head = chain.path[0];
+        const tail = chain.path[chain.path.length - 1];
+        const from = rowOf.get(head);
+        const to = rowOf.get(tail);
+        if (from === undefined || to === undefined || to <= from)
+            continue;
+        const lane = chainOf.get(chain.path[1]);
+        const source = boxes.get(head);
+        const target = boxes.get(tail);
+        // A lane into a boundary has no box to arrive at: that edge is the router's.
+        if (lane === undefined || source === undefined || target === undefined)
+            continue;
+        let free = [{ lo: -Infinity, hi: Infinity }];
+        for (let depth = from + 1; depth < to; depth += 1) {
+            for (const id of layers[depth]) {
+                const box = boxes.get(id);
+                if (box === undefined)
+                    continue;
+                free = cut(free, { lo: box.x - options.clearance, hi: box.x + box.width + options.clearance });
+            }
+        }
+        const centre = (source.x + source.width / 2 + target.x + target.width / 2) / 2;
+        long.push({
+            edge: chain.index,
+            lane,
+            path: chain.path,
+            from,
+            to,
+            free,
+            source: spanOf(source),
+            target: spanOf(target),
+            proposal: laneX.get(lane) ?? centre,
+            x: 0,
+        });
+    }
+    for (const entry of long)
+        entry.x = choose(entry);
+    // The order inside a gap: two lanes never share an x, and the left one is the one the ordering put left.
+    const byGap = new Map();
+    for (const entry of long) {
+        for (let gap = entry.from; gap < entry.to; gap += 1) {
+            // The dummy in the lower row of the gap; the last gap has none, and its upper row's dummy orders it.
+            const row = gap + 1 < entry.to ? gap + 1 : gap;
+            const id = entry.path[row - entry.from];
+            const index = layers[row].indexOf(id);
+            byGap.set(gap, [...(byGap.get(gap) ?? []), { entry, index }]);
+        }
+    }
+    for (const [, list] of byGap)
+        list.sort((left, right) => left.index - right.index);
+    for (let round = 0; round < 4; round += 1) {
+        let moved = false;
+        for (const [, list] of byGap) {
+            let previous = -Infinity;
+            for (const item of list) {
+                const x = item.entry.x < previous + options.spacing ? atOrAfter(previous + options.spacing, item.entry.free) : item.entry.x;
+                if (x !== item.entry.x) {
+                    item.entry.x = x;
+                    moved = true;
+                }
+                previous = item.entry.x;
+            }
+        }
+        if (!moved)
+            break;
+    }
+    // The runs: one per edge end that does not land on its lane, stacked at distinct heights inside the gap.
+    const stacks = new Map();
+    const want = (gap, edge, left) => {
+        stacks.set(gap, [...(stacks.get(gap) ?? []), { edge, gap, left }]);
+    };
+    for (const entry of long) {
+        const head = clamp(entry.x, entry.source);
+        const tail = clamp(entry.x, entry.target);
+        if (Math.abs(head - entry.x) > 0.5)
+            want(entry.from, entry.edge, Math.min(head, entry.x));
+        if (Math.abs(tail - entry.x) > 0.5)
+            want(entry.to - 1, entry.edge, Math.min(tail, entry.x));
+    }
+    for (const chain of chains) {
+        if (chain.path.length > 2)
+            continue;
+        const head = chain.path[0];
+        const tail = chain.path[chain.path.length - 1];
+        const from = rowOf.get(head);
+        const to = rowOf.get(tail);
+        if (from === undefined || to === undefined || Math.abs(from - to) !== 1)
+            continue;
+        const source = boxes.get(head);
+        const target = boxes.get(tail);
+        if (source === undefined || target === undefined)
+            continue;
+        const ports = adjacentPorts(source, target);
+        want(Math.min(from, to), chain.index, Math.min(ports.from, ports.to));
+    }
+    // A gap always has a row below it, so its strip is bounded: one stack per gap, inside that strip.
+    const midOf = (gap) => (layerY[gap] + layerHeight[gap] + layerY[gap + 1]) / 2;
+    const heightOf = new Map();
+    for (const [gap, list] of stacks) {
+        const top = layerY[gap] + layerHeight[gap];
+        const bottom = layerY[gap + 1];
+        const pad = Math.min(8, Math.max(1, (bottom - top) / 3));
+        const lo = top + pad;
+        const hi = Math.max(lo, bottom - pad);
+        // Left to right, so a run that stays near its box sits near the row it left.
+        const sorted = [...list].sort((left, right) => left.left - right.left || left.edge - right.edge);
+        sorted.forEach((item, index) => {
+            const y = sorted.length === 1 ? (lo + hi) / 2 : lo + ((hi - lo) * (index + 1)) / (sorted.length + 1);
+            const heights = heightOf.get(item.edge) ?? new Map();
+            heights.set(item.gap, y);
+            heightOf.set(item.edge, heights);
+        });
+    }
+    const lanes = new Map();
+    for (const entry of long) {
+        const y = [];
+        for (let gap = entry.from; gap < entry.to; gap += 1)
+            y.push(heightOf.get(entry.edge)?.get(gap) ?? midOf(gap));
+        lanes.set(entry.edge, { x: entry.x, y });
+    }
+    const runs = new Map();
+    for (const [edge, heights] of heightOf) {
+        // A long edge's heights belong to its lane; an edge between two rows has the one run it asked for.
+        if (lanes.has(edge))
+            continue;
+        runs.set(edge, [...heights.values()][0]);
+    }
+    return { lanes, runs };
+}

package/lib/render/collapse.js

@@ -9,20 +9,17 @@
  * an architecture diagram that cannot be folded is read at one zoom level forever.
  */
 /** How many nodes a group holds, counting the whole subtree - what the folded box offers to unfold. */
-function subtreeSize(diagram, groupId, seen) {
+function subtreeSize(groups, groupId, seen) {
     if (seen.has(groupId))
         return 0;
     seen.add(groupId);
-    const groups = diagram.groups ?? [];
     const group = groups.find((entry) => entry.id === groupId);
-    if (group === undefined)
-        return 0;
     const children = groups.filter((entry) => entry.parent === groupId);
-    return group.members.length + children.reduce((total, child) => total + subtreeSize(diagram, child.id, seen), 0);
+    return group.members.length + children.reduce((total, child) => total + subtreeSize(groups, child.id, seen), 0);
 }
 /** The group that directly holds a node, when one does. */
-function ownerOf(diagram, nodeId) {
-    return (diagram.groups ?? []).find((group) => group.members.includes(nodeId))?.id;
+function ownerOf(groups, nodeId) {
+    return groups.find((group) => group.members.includes(nodeId))?.id;
 }
 /**
  * Fold the named groups.
@@ -45,7 +42,7 @@ export function collapse(diagram, folded) {
     const targets = new Set();
     for (const id of asked) {
         const group = byId.get(id);
-        if (group !== undefined && subtreeSize(diagram, id, new Set()) > 0)
+        if (group !== undefined && subtreeSize(groups, id, new Set()) > 0)
             targets.add(id);
     }
     if (targets.size === 0)
@@ -65,21 +62,16 @@ export function collapse(diagram, folded) {
     }
     const removedNodes = new Set();
     const removedGroups = new Set();
-    const descend = (groupId, seen) => {
-        if (seen.has(groupId))
-            return;
-        seen.add(groupId);
+    const descend = (groupId) => {
         removedGroups.add(groupId);
         const group = byId.get(groupId);
-        if (group === undefined)
-            return;
         for (const member of group.members)
             removedNodes.add(member);
         for (const child of groups.filter((entry) => entry.parent === groupId))
-            descend(child.id, seen);
+            descend(child.id);
     };
     for (const id of targets)
-        descend(id, new Set());
+        descend(id);
     /** The innermost fold that swallowed this id, if any. */
     const foldOf = (id) => {
         for (const target of targets) {
@@ -92,7 +84,7 @@ export function collapse(diagram, folded) {
                 return groups.filter((entry) => entry.parent === groupId).some((child) => inSubtree(child.id, seen));
             };
             const group = byId.get(target);
-            if (group.members.includes(id) || inSubtree(ownerOf(diagram, id) ?? '', new Set()))
+            if (group.members.includes(id) || inSubtree(ownerOf(groups, id), new Set()))
                 return target;
         }
         return undefined;
@@ -111,14 +103,14 @@ export function collapse(diagram, folded) {
             continue;
         emitted.add(fold);
         const group = byId.get(fold);
-        nodes.push({ id: fold, label: group.label + ' (' + String(subtreeSize(diagram, fold, new Set())) + ')', role: 'normal' });
+        nodes.push({ id: fold, label: group.label + ' (' + String(subtreeSize(groups, fold, new Set())) + ')', role: 'normal' });
     }
     // A fold whose members are not in `nodes` at all still deserves a box rather than vanishing.
     for (const id of targets) {
         if (emitted.has(id))
             continue;
         const group = byId.get(id);
-        nodes.push({ id, label: group.label + ' (' + String(subtreeSize(diagram, id, new Set())) + ')', role: 'normal' });
+        nodes.push({ id, label: group.label + ' (' + String(subtreeSize(groups, id, new Set())) + ')', role: 'normal' });
     }
     const edges = [];
     const seenEdges = new Set();
@@ -140,7 +132,7 @@ export function collapse(diagram, folded) {
     const adopted = new Map();
     for (const id of targets) {
         const parent = byId.get(id)?.parent;
-        if (parent === undefined || targets.has(parent) || removedGroups.has(parent))
+        if (parent === undefined)
             continue;
         adopted.set(parent, [...(adopted.get(parent) ?? []), id]);
     }

package/lib/render/components.js

@@ -0,0 +1,99 @@
+/**
+ * The two decompositions a drawing needs before it can be packed.
+ *
+ * **Weakly connected components.** Two subgraphs with no edge between them are two drawings that happen to share a
+ * page. Laying them out together makes them share one set of layers, so the wider one sets every column width and
+ * the narrower one is squeezed beside it; moving one moves the other. Split first, lay each out on its own, then pack
+ * the rectangles.
+ *
+ * **Packing.** A pile of rectangles has to become a page. The target is the aspect ratio a page and a screen share -
+ * 1.6 - and a shelf packer is enough to get there: sort by height, fill a shelf until the next rectangle would make
+ * the drawing wider than the page it is aiming at, then start the next shelf. No overlap, and a deterministic order,
+ * so the same rectangles always pack the same way.
+ *
+ * Pure, and asserted on the rectangles themselves.
+ */
+/** The aspect ratio a page and a landscape screen share. */
+const PAGE_ASPECT = 1.6;
+/**
+ * The nodes of each weakly connected component, in the order the nodes were written.
+ *
+ * An isolated node is a component of its own: it is not noise, it is a drawing with nothing joining it, and the
+ * packer is what decides where it goes.
+ */
+export function weakComponents(nodes, edges) {
+    const known = new Set(nodes.map((node) => node.id));
+    const neighbours = new Map();
+    const link = (from, to) => {
+        neighbours.set(from, [...(neighbours.get(from) ?? []), to]);
+    };
+    for (const edge of edges) {
+        if (!known.has(edge.from) || !known.has(edge.to) || edge.from === edge.to)
+            continue;
+        link(edge.from, edge.to);
+        link(edge.to, edge.from);
+    }
+    const seen = new Set();
+    const components = [];
+    for (const node of nodes) {
+        if (seen.has(node.id))
+            continue;
+        const members = [];
+        const queue = [node.id];
+        seen.add(node.id);
+        for (let head = 0; head < queue.length; head += 1) {
+            const id = queue[head];
+            members.push(id);
+            for (const next of neighbours.get(id) ?? []) {
+                if (seen.has(next))
+                    continue;
+                seen.add(next);
+                queue.push(next);
+            }
+        }
+        components.push(members);
+    }
+    return components;
+}
+/**
+ * Pack rectangles into a page of roughly `aspect`, using shelves.
+ *
+ * The shelf width is derived from the total area and the target aspect: that is the width at which a perfect grid
+ * would have the wanted shape, so a shelf that fills it lands near the target. Rectangles are taken tallest first,
+ * which is what keeps a shelf from being mostly empty air above a short rectangle.
+ */
+export function packRectangles(rectangles, options = {}) {
+    const gap = options.gap ?? 30;
+    const aspect = options.aspect ?? PAGE_ASPECT;
+    if (rectangles.length === 0)
+        return { placements: [], width: 0, height: 0 };
+    const area = rectangles.reduce((total, rectangle) => total + (rectangle.width + gap) * (rectangle.height + gap), 0);
+    const targetWidth = Math.max(gap, Math.sqrt(area * aspect));
+    const order = rectangles
+        .map((rectangle, index) => ({ rectangle, index }))
+        .sort((left, right) => right.rectangle.height - left.rectangle.height || right.rectangle.width - left.rectangle.width || left.index - right.index);
+    const placements = rectangles.map((rectangle) => ({ x: 0, y: 0, width: rectangle.width, height: rectangle.height }));
+    let x = 0;
+    let y = 0;
+    let shelfHeight = 0;
+    let width = 0;
+    for (const entry of order) {
+        const rectangle = entry.rectangle;
+        if (x > 0 && x + rectangle.width > targetWidth) {
+            y += shelfHeight + gap;
+            x = 0;
+            shelfHeight = 0;
+        }
+        placements[entry.index] = { x, y, width: rectangle.width, height: rectangle.height };
+        x += rectangle.width + gap;
+        width = Math.max(width, x - gap);
+        shelfHeight = Math.max(shelfHeight, rectangle.height);
+    }
+    return { placements, width, height: y + shelfHeight };
+}
+/** The aspect ratio of a box, as a number a reader can compare against the page's. */
+export function aspectOf(width, height) {
+    if (width <= 0 || height <= 0)
+        return 1;
+    return Math.max(width, height) / Math.min(width, height);
+}