@adecore/diagram 0.0.1 → 0.17.0-beta.1

package/src/order.ts

@@ -0,0 +1,235 @@
+import { bandCode, bandOfCode, type Layering } from './graph.ts';
+
+/* Sweeps of the barycenter heuristic, alternating down and up; the best order any of them reached is kept. */
+const SWEEPS = 12;
+
+/*
+ * The order inside every layer, in place. A unit moves to the average position of the units it is
+ * joined to in the layer it was compared with, a tie keeps the order it had (file order to begin
+ * with), and the members of a group stay together as one block. The blocks of groups keep one order
+ * in every layer, and a unit that is not in a group stays on the same side of a group from one layer
+ * to the next inside it, so no hop has to cross a group it does not belong to.
+ */
+export function orderLayers(layering: Layering): void {
+    const { units, hops, bands, items } = layering;
+    const position = new Array<number>(units.length).fill(0);
+    const bandPosition = bands.map((band) => new Array<number>(band.last - band.first + 1).fill(0));
+    const hopsByLayer: number[][] = items.map(() => []);
+    hops.forEach((hop, index) => {
+        hopsByLayer[units[hop.from]!.layer]!.push(index);
+    });
+
+    const flatten = (layer: number): void => {
+        let at = 0;
+        for (const code of items[layer]!) {
+            if (code >= 0) {
+                position[code] = at++;
+                continue;
+            }
+            const band = bands[bandOfCode(code)]!;
+            const members = band.members[layer - band.first]!;
+            bandPosition[bandOfCode(code)]![layer - band.first] = at;
+            if (members.length === 0) {
+                at++;
+            }
+            for (const member of members) {
+                position[member] = at++;
+            }
+        }
+    };
+
+    const enforceBandOrder = (layer: number): void => {
+        const row = items[layer]!;
+        const slots: number[] = [];
+        const present: number[] = [];
+        row.forEach((code, index) => {
+            if (code < 0) {
+                slots.push(index);
+                present.push(bandOfCode(code));
+            }
+        });
+        present.sort((left, right) => bands[left]!.rank - bands[right]!.rank);
+        slots.forEach((slot, index) => {
+            row[slot] = bandCode(present[index]!);
+        });
+    };
+
+    const sortLayer = (layer: number, towardsUp: boolean): void => {
+        const keyOf = (unit: number): number => {
+            const neighbors = towardsUp ? units[unit]!.up : units[unit]!.down;
+            if (neighbors.length === 0) {
+                return position[unit]!;
+            }
+            let sum = 0;
+            for (const neighbor of neighbors) {
+                sum += position[neighbor]!;
+            }
+            return sum / neighbors.length;
+        };
+        const keyed = items[layer]!.map((code, index) => {
+            if (code >= 0) {
+                return { code, index, key: keyOf(code) };
+            }
+            const band = bands[bandOfCode(code)]!;
+            const slot = layer - band.first;
+            const members = band.members[slot]!.map((unit) => ({ unit, key: keyOf(unit), at: position[unit]! }));
+            members.sort((left, right) => left.key - right.key || left.at - right.at);
+            band.members[slot] = members.map((member) => member.unit);
+            const key = members.length > 0 ? members.reduce((sum, member) => sum + member.key, 0) / members.length : bandPosition[bandOfCode(code)]![slot]!;
+            return { code, index, key };
+        });
+        keyed.sort((left, right) => left.key - right.key || left.index - right.index);
+        items[layer] = keyed.map((entry) => entry.code);
+        enforceBandOrder(layer);
+        flatten(layer);
+    };
+
+    const updateRanks = (): void => {
+        const scores = bands.map((band, index) => {
+            let sum = 0;
+            for (let layer = band.first; layer <= band.last; layer++) {
+                const row = items[layer]!;
+                sum += row.indexOf(bandCode(index)) / row.length;
+            }
+            return sum / (band.last - band.first + 1);
+        });
+        const order = bands.map((_, index) => index).sort((left, right) => scores[left]! - scores[right]! || bands[left]!.rank - bands[right]!.rank);
+        order.forEach((band, rank) => {
+            bands[band]!.rank = rank;
+        });
+    };
+
+    // A free unit takes the side of every group its neighbors are on, as far as they agree.
+    const keepSides = (): void => {
+        for (let layer = 0; layer < items.length; layer++) {
+            if (!items[layer]!.some((code) => code < 0)) {
+                continue;
+            }
+            const previousIndex = new Map<number, number>();
+            (items[layer - 1] ?? []).forEach((code, index) => previousIndex.set(code, index));
+            const free = items[layer]!.filter((code) => code >= 0);
+            for (const unit of free) {
+                const row = items[layer]!;
+                const present = row.filter((code) => code < 0).map(bandOfCode);
+                let lower = 0;
+                let upper = present.length;
+                const narrow = (source: number, sourceLayer: number): void => {
+                    let low = 0;
+                    let high = present.length;
+                    present.forEach((band, slot) => {
+                        const target = bands[band]!;
+                        const sourceBand = units[source]!.band;
+                        if (sourceLayer < target.first || sourceLayer > target.last || sourceBand === band) {
+                            return;
+                        }
+                        const before =
+                            sourceBand >= 0 ? bands[sourceBand]!.rank < target.rank : previousIndex.get(source)! < previousIndex.get(bandCode(band))!;
+                        if (before) {
+                            high = Math.min(high, slot);
+                        } else {
+                            low = Math.max(low, slot + 1);
+                        }
+                    });
+                    if (Math.max(lower, low) <= Math.min(upper, high)) {
+                        lower = Math.max(lower, low);
+                        upper = Math.min(upper, high);
+                    }
+                };
+                for (const source of units[unit]!.up) {
+                    narrow(source, layer - 1);
+                }
+                // A member of a group in the next layer cannot move, so the free unit follows it instead.
+                for (const target of units[unit]!.down) {
+                    if (units[target]!.band >= 0) {
+                        narrow(target, layer + 1);
+                    }
+                }
+                const at = row.indexOf(unit);
+                const slot = row.slice(0, at).filter((code) => code < 0).length;
+                if (slot < lower) {
+                    row.splice(at, 1);
+                    row.splice(row.indexOf(bandCode(present[lower - 1]!)) + 1, 0, unit);
+                } else if (slot > upper) {
+                    row.splice(at, 1);
+                    row.splice(row.indexOf(bandCode(present[upper]!)), 0, unit);
+                }
+            }
+        }
+    };
+
+    const crossings = (): number => {
+        let total = 0;
+        for (let layer = 0; layer + 1 < items.length; layer++) {
+            const pairs = hopsByLayer[layer]!.map((index) => [position[hops[index]!.from]!, position[hops[index]!.to]!] as const);
+            if (pairs.length < 2) {
+                continue;
+            }
+            pairs.sort((left, right) => left[0] - right[0] || left[1] - right[1]);
+            // A Fenwick tree over the positions of the next layer counts the pairs that come in out of order.
+            const size = pairs.reduce((largest, pair) => Math.max(largest, pair[1]), 0) + 2;
+            const tree = new Array<number>(size + 1).fill(0);
+            pairs.forEach(([, to], seen) => {
+                let atMost = 0;
+                for (let i = to + 1; i > 0; i -= i & -i) {
+                    atMost += tree[i]!;
+                }
+                total += seen - atMost;
+                for (let i = to + 1; i <= size; i += i & -i) {
+                    tree[i]! += 1;
+                }
+            });
+        }
+        return total;
+    };
+
+    const settle = (): number => {
+        items.forEach((_, layer) => enforceBandOrder(layer));
+        keepSides();
+        items.forEach((_, layer) => flatten(layer));
+        return crossings();
+    };
+
+    const snapshot = () => ({
+        items: items.map((row) => row.slice()),
+        members: bands.map((band) => band.members.map((slot) => slot.slice())),
+        ranks: bands.map((band) => band.rank)
+    });
+
+    items.forEach((_, layer) => flatten(layer));
+    // A band's first layer always holds a member, which is what made it the first.
+    const firstSeen = bands.map((band, index) => [band.first, position[band.members[0]![0]!]!, index] as const);
+    firstSeen
+        .slice()
+        .sort((left, right) => left[0] - right[0] || left[1] - right[1] || left[2] - right[2])
+        .forEach(([, , band], rank) => {
+            bands[band]!.rank = rank;
+        });
+
+    let bestCount = settle();
+    let best = snapshot();
+    for (let sweep = 0; sweep < SWEEPS && bestCount > 0; sweep++) {
+        if (sweep % 2 === 0) {
+            for (let layer = 1; layer < items.length; layer++) {
+                sortLayer(layer, true);
+            }
+        } else {
+            for (let layer = items.length - 2; layer >= 0; layer--) {
+                sortLayer(layer, false);
+            }
+        }
+        updateRanks();
+        const count = settle();
+        if (count < bestCount) {
+            bestCount = count;
+            best = snapshot();
+        }
+    }
+
+    best.items.forEach((row, layer) => {
+        items[layer] = row;
+    });
+    bands.forEach((band, index) => {
+        band.members = best.members[index]!;
+        band.rank = best.ranks[index]!;
+    });
+}

package/src/protocol.ts

@@ -0,0 +1,135 @@
+import { z } from 'zod';
+import { DrawingColorSchema, DrawingStrokeStyleSchema } from '@adecore/drawing/protocol';
+
+/*
+ * A diagram is a directed graph with groups, written rather than drawn: the file says what is
+ * connected to what and the layout is computed from that. Colors are the drawing palette's names,
+ * so a diagram follows the theme the way a drawing does.
+ */
+export const DiagramShapeSchema = z.enum(['rect', 'round', 'pill', 'diamond', 'cylinder']);
+export type DiagramShape = z.infer<typeof DiagramShapeSchema>;
+
+export const DIAGRAM_SHAPES = DiagramShapeSchema.options;
+
+export const DiagramDirectionSchema = z.enum(['right', 'down']);
+export type DiagramDirection = z.infer<typeof DiagramDirectionSchema>;
+
+export const DiagramEdgeStyleSchema = DrawingStrokeStyleSchema;
+export type DiagramEdgeStyle = z.infer<typeof DiagramEdgeStyleSchema>;
+
+export const DiagramNodeSchema = z.object({
+    id: z.string().min(1),
+    label: z.string(),
+    sub: z.string().optional(),
+    // Absent reads as 'rect'.
+    shape: DiagramShapeSchema.optional(),
+    tone: DrawingColorSchema.optional(),
+    // Only on a node a person dragged; every other node goes where the layout puts it.
+    pos: z.tuple([z.number(), z.number()]).optional()
+});
+export type DiagramNode = z.infer<typeof DiagramNodeSchema>;
+
+export const DiagramGroupSchema = z.object({
+    id: z.string().min(1),
+    label: z.string(),
+    // Node ids, never group ids: a group is a box around nodes and does not nest.
+    wraps: z.array(z.string().min(1)),
+    tone: DrawingColorSchema.optional()
+});
+export type DiagramGroup = z.infer<typeof DiagramGroupSchema>;
+
+export const DiagramEdgeSchema = z.object({
+    from: z.string().min(1),
+    to: z.string().min(1),
+    label: z.string().optional(),
+    // Absent reads as 'solid'.
+    style: DiagramEdgeStyleSchema.optional(),
+    tone: DrawingColorSchema.optional()
+});
+export type DiagramEdge = z.infer<typeof DiagramEdgeSchema>;
+
+export const DiagramMetaSchema = z.object({
+    title: z.string(),
+    direction: DiagramDirectionSchema
+});
+export type DiagramMeta = z.infer<typeof DiagramMetaSchema>;
+
+export const DIAGRAM_VERSION = 1;
+
+// Edges spanning many layers make layout costs grow quickly, so validation caps graph size.
+export const DIAGRAM_LIMITS = {
+    nodes: 100,
+    edges: 120
+};
+
+export const DiagramContentSchema = z.object({
+    meta: DiagramMetaSchema,
+    // In file order, which is also the order inside a layer of the layout.
+    nodes: z.array(DiagramNodeSchema),
+    groups: z.array(DiagramGroupSchema),
+    edges: z.array(DiagramEdgeSchema)
+});
+export type DiagramContent = z.infer<typeof DiagramContentSchema>;
+
+export const DiagramDocumentSchema = DiagramContentSchema.extend({
+    version: z.literal(DIAGRAM_VERSION),
+    // Goes up by one on every write; a save that names an older rev is a conflict.
+    rev: z.number().int().nonnegative()
+});
+export type DiagramDocument = z.infer<typeof DiagramDocumentSchema>;
+
+export const EMPTY_DIAGRAM: DiagramDocument = { version: 1, rev: 0, meta: { title: '', direction: 'right' }, nodes: [], groups: [], edges: [] };
+
+/* One version so far, so reading is a parse. A file that is not a diagram at all reads as null. */
+export function migrateDiagram(value: unknown): DiagramDocument | null {
+    const parsed = DiagramDocumentSchema.safeParse(value);
+    return parsed.success ? parsed.data : null;
+}
+
+/*
+ * The first rule of the graph the content breaks, as a sentence that names the id, or null. The
+ * schema cannot say this, and an agent that wrote the file needs the id to repair it: a silent drop
+ * would leave it believing the edge is there.
+ */
+export function diagramProblemIn(content: Pick<DiagramContent, 'nodes' | 'groups' | 'edges'>): string | null {
+    if (content.nodes.length > DIAGRAM_LIMITS.nodes) {
+        return `A diagram holds at most ${DIAGRAM_LIMITS.nodes} nodes, and this one has ${content.nodes.length}`;
+    }
+    if (content.edges.length > DIAGRAM_LIMITS.edges) {
+        return `A diagram holds at most ${DIAGRAM_LIMITS.edges} edges, and this one has ${content.edges.length}`;
+    }
+    // Nodes and groups share one namespace, so an id always says which box it means.
+    const nodes = new Set<string>();
+    for (const node of content.nodes) {
+        if (nodes.has(node.id)) {
+            return `Two nodes share the id "${node.id}"`;
+        }
+        nodes.add(node.id);
+    }
+    const groups = new Set<string>();
+    const groupOf = new Map<string, string>();
+    for (const group of content.groups) {
+        if (nodes.has(group.id) || groups.has(group.id)) {
+            return `The group id "${group.id}" is already taken`;
+        }
+        groups.add(group.id);
+        for (const id of group.wraps) {
+            if (!nodes.has(id)) {
+                return `The group "${group.id}" wraps "${id}", which is not a node`;
+            }
+            const other = groupOf.get(id);
+            if (other !== undefined) {
+                return `The node "${id}" is in two groups, "${other}" and "${group.id}"`;
+            }
+            groupOf.set(id, group.id);
+        }
+    }
+    for (const edge of content.edges) {
+        for (const end of [edge.from, edge.to]) {
+            if (!nodes.has(end)) {
+                return `The edge from "${edge.from}" to "${edge.to}" names "${end}", which is not a node`;
+            }
+        }
+    }
+    return null;
+}

package/src/reading-order.ts

@@ -0,0 +1,26 @@
+import type { DiagramDocument, DiagramNode } from './protocol.ts';
+import { layersOf } from './layout.ts';
+
+function nameOf(node: DiagramNode | undefined, id: string): string {
+    return node && node.label.trim() !== '' ? node.label : id;
+}
+
+/*
+ * A diagram as lines an agent can read: every node layer by layer (file order inside a layer), then
+ * every edge as the two names it joins, then what each group holds. Unlike a drawing nothing has to
+ * be guessed, since the file already says what points at what.
+ */
+export function readingOrder(document: Pick<DiagramDocument, 'nodes' | 'groups' | 'edges'>): string[] {
+    const byId = new Map(document.nodes.map((node) => [node.id, node]));
+    const layers = layersOf(document.nodes, document.edges);
+    const nodes = document.nodes
+        .map((node, index) => ({ node, index, layer: layers.get(node.id) ?? 0 }))
+        .sort((left, right) => left.layer - right.layer || left.index - right.index)
+        .map(({ node }) => (node.sub ? `${nameOf(node, node.id)} (${node.sub})` : nameOf(node, node.id)));
+    const edges = document.edges.map((edge) => {
+        const line = `${nameOf(byId.get(edge.from), edge.from)} -> ${nameOf(byId.get(edge.to), edge.to)}`;
+        return edge.label ? `${line}: ${edge.label}` : line;
+    });
+    const groups = document.groups.map((group) => `${group.label || group.id} wraps: ${group.wraps.map((id) => nameOf(byId.get(id), id)).join(', ')}`);
+    return [...nodes, ...edges, ...groups];
+}

package/src/route.ts

@@ -0,0 +1,266 @@
+import type { Point, Rect } from './layout.ts';
+
+export const TRACK_GAP = 12;
+/* Space between the lane of labels and the first track. */
+const LANE_GAP = 12;
+/* Space between two labels side by side in a lane. */
+const LABEL_GAP = 8;
+/* How far a label keeps from the line it belongs to. */
+const LABEL_OFFSET = 4;
+export const MIN_CHANNEL = 64;
+/* Two horizontal lines closer than this read as one. */
+const COLLINEAR = 4;
+/* Two vertical ranges closer than this need tracks of their own. */
+const RANGE_CLEARANCE = 8;
+
+/* A hop through a channel: it leaves at `ya` and arrives at `yb`, both across the flow. */
+export interface ChannelHop {
+    hop: number;
+    ya: number;
+    yb: number;
+}
+
+export interface ChannelLabel {
+    edge: number;
+    /* The hop it belongs to, whose own line never counts against it. */
+    hop: number;
+    /* The line it sits beside. */
+    y: number;
+    along: number;
+    across: number;
+}
+
+export interface ChannelInput {
+    /* Where the channel begins along the flow, right after the widest box of its layer. */
+    start: number;
+    /* Room kept free at the start and the end, for a group's border and an arrowhead. */
+    clearBefore: number;
+    clearAfter: number;
+    hops: ChannelHop[];
+    labels: ChannelLabel[];
+    /* Stretches across the flow no label may cover, over the whole channel: group borders and group labels. */
+    obstacles: { y: number; h: number }[];
+}
+
+export interface ChannelResult {
+    width: number;
+    trackX: Map<number, number>;
+    labels: Map<number, Rect>;
+}
+
+function overlaps(left: Rect, right: Rect): boolean {
+    return left.x < right.x + right.w && right.x < left.x + left.w && left.y < right.y + right.h && right.y < left.y + left.h;
+}
+
+function inflate(rect: Rect, by: number): Rect {
+    return { x: rect.x - by, y: rect.y - by, w: rect.w + by * 2, h: rect.h + by * 2 };
+}
+
+/*
+ * How badly two orthogonal polylines get in each other's way: a crossing counts once, a stretch where
+ * they run on top of each other counts four times, since that is the one a reader cannot follow.
+ */
+export function conflictsOf(left: readonly Point[], right: readonly Point[]): number {
+    let total = 0;
+    for (let i = 1; i < left.length; i++) {
+        const a0 = left[i - 1]!;
+        const a1 = left[i]!;
+        for (let j = 1; j < right.length; j++) {
+            const b0 = right[j - 1]!;
+            const b1 = right[j]!;
+            const aFlat = a0.y === a1.y;
+            const bFlat = b0.y === b1.y;
+            if (aFlat !== bFlat) {
+                const [h0, h1, v0, v1] = aFlat ? [a0, a1, b0, b1] : [b0, b1, a0, a1];
+                if (v0.x > Math.min(h0.x, h1.x) && v0.x < Math.max(h0.x, h1.x) && h0.y > Math.min(v0.y, v1.y) && h0.y < Math.max(v0.y, v1.y)) {
+                    total += 1;
+                }
+                continue;
+            }
+            const [along0, along1, other0, other1, gap] = aFlat
+                ? [Math.min(a0.x, a1.x), Math.max(a0.x, a1.x), Math.min(b0.x, b1.x), Math.max(b0.x, b1.x), Math.abs(a0.y - b0.y)]
+                : [Math.min(a0.y, a1.y), Math.max(a0.y, a1.y), Math.min(b0.y, b1.y), Math.max(b0.y, b1.y), Math.abs(a0.x - b0.x)];
+            if (gap < COLLINEAR && Math.min(along1, other1) > Math.max(along0, other0)) {
+                total += 4;
+            }
+        }
+    }
+    return total;
+}
+
+/* A hop drawn on a track in a channel of unit tracks, only to compare two orders of the tracks. */
+function sketchOf(hop: ChannelHop, track: number): Point[] {
+    return [
+        { x: 0, y: hop.ya },
+        { x: track * TRACK_GAP, y: hop.ya },
+        { x: track * TRACK_GAP, y: hop.yb },
+        { x: TRACK_GAP * 3, y: hop.yb }
+    ];
+}
+
+/*
+ * The inside of one channel between two layers. Every hop that changes place across the flow gets a
+ * vertical track of its own where its range meets another's, in the order that crosses the fewest
+ * lines; labels go in a lane before the tracks, beside the line their hop leaves on, and the lane
+ * grows a column where two labels would otherwise cover each other.
+ */
+export function routeChannel(input: ChannelInput): ChannelResult {
+    const vertical = input.hops.filter((hop) => hop.ya !== hop.yb);
+    const count = vertical.length;
+    const near = (left: ChannelHop, right: ChannelHop): boolean =>
+        Math.min(Math.max(left.ya, left.yb), Math.max(right.ya, right.yb)) + RANGE_CLEARANCE >
+        Math.max(Math.min(left.ya, left.yb), Math.min(right.ya, right.yb));
+    // cost[i * count + j]: how much i and j conflict when i's track is left of j's.
+    const cost = new Array<number>(count * count).fill(0);
+    for (let i = 0; i < count; i++) {
+        for (let j = 0; j < count; j++) {
+            if (i !== j && near(vertical[i]!, vertical[j]!)) {
+                cost[i * count + j] = conflictsOf(sketchOf(vertical[i]!, 1), sketchOf(vertical[j]!, 2));
+            }
+        }
+    }
+    const score = vertical.map((_, i) => {
+        let sum = 0;
+        for (let j = 0; j < count; j++) {
+            sum += cost[i * count + j]! - cost[j * count + i]!;
+        }
+        return sum;
+    });
+    const order = vertical.map((_, i) => i).sort((left, right) => score[left]! - score[right]! || left - right);
+    for (let pass = 0; pass < count; pass++) {
+        let swapped = false;
+        for (let p = 0; p + 1 < count; p++) {
+            const left = order[p]!;
+            const right = order[p + 1]!;
+            if (cost[right * count + left]! < cost[left * count + right]!) {
+                order[p] = right;
+                order[p + 1] = left;
+                swapped = true;
+            }
+        }
+        if (!swapped) {
+            break;
+        }
+    }
+    const track = new Array<number>(count).fill(0);
+    let tracks = 0;
+    order.forEach((index, p) => {
+        let at = 0;
+        for (let q = 0; q < p; q++) {
+            const other = order[q]!;
+            if (near(vertical[other]!, vertical[index]!)) {
+                at = Math.max(at, track[other]! + 1);
+            }
+        }
+        track[index] = at;
+        tracks = Math.max(tracks, at + 1);
+    });
+
+    // Labels are placed in two frames before the width is known: the lane before the tracks, and the tracks with the lane after them.
+    const slotAlong = input.labels.reduce((widest, label) => Math.max(widest, label.along), 0);
+    const slotStep = slotAlong + LABEL_GAP;
+    const tracksSpan = Math.max(0, tracks - 1) * TRACK_GAP;
+    const afterStart = tracks > 0 ? tracksSpan + LANE_GAP : 0;
+    const trackOf = new Map<number, number>();
+    vertical.forEach((hop, index) => trackOf.set(hop.hop, track[index]! * TRACK_GAP));
+    type Zone = 'before' | 'middle';
+    const placed: { zone: Zone; rect: Rect }[] = [];
+    const chosen = new Map<number, { zone: Zone; rect: Rect }>();
+    let slotsBefore = input.labels.length > 0 ? 1 : 0;
+    let slotsAfter = 0;
+
+    const touches = (x0: number, x1: number, y0: number, y1: number, rect: Rect): boolean =>
+        x1 >= rect.x - 3 && x0 <= rect.x + rect.w + 3 && y1 >= rect.y - 3 && y0 <= rect.y + rect.h + 3;
+    const blocked = (zone: Zone, rect: Rect): boolean =>
+        placed.some((other) => other.zone === zone && overlaps(inflate(other.rect, 4), rect)) ||
+        input.obstacles.some((obstacle) => obstacle.y < rect.y + rect.h && rect.y < obstacle.y + obstacle.h);
+    const onLine = (zone: Zone, rect: Rect, label: ChannelLabel): boolean =>
+        input.hops.some((hop) => {
+            if (zone === 'before') {
+                return hop.hop !== label.hop && hop.ya > rect.y - 3 && hop.ya < rect.y + rect.h + 3;
+            }
+            const own = hop.hop === label.hop;
+            const at = trackOf.get(hop.hop);
+            if (at === undefined) {
+                return !own && touches(-Infinity, Infinity, hop.ya, hop.ya, rect);
+            }
+            return (
+                (!own && touches(-Infinity, at, hop.ya, hop.ya, rect)) ||
+                (!own && touches(at, at, Math.min(hop.ya, hop.yb), Math.max(hop.ya, hop.yb), rect)) ||
+                touches(at, Infinity, hop.yb, hop.yb, rect)
+            );
+        });
+    const inLane = (label: ChannelLabel, x: number, y: number, above: boolean): Rect => ({
+        x: x + Math.floor((slotAlong - label.along) / 2),
+        y: above ? y - LABEL_OFFSET - label.across : y + LABEL_OFFSET,
+        w: label.along,
+        h: label.across
+    });
+
+    for (const label of input.labels) {
+        const hop = input.hops.find((candidate) => candidate.hop === label.hop);
+        const before = (slot: number) => [true, false].map((above) => ({ zone: 'before' as Zone, rect: inLane(label, slot * slotStep, label.y, above) }));
+        const after = (slot: number) =>
+            hop ? [true, false].map((above) => ({ zone: 'middle' as Zone, rect: inLane(label, afterStart + slot * slotStep, hop.yb, above) })) : [];
+        const at = trackOf.get(label.hop);
+        const beside =
+            hop && at !== undefined
+                ? [
+                      {
+                          zone: 'middle' as Zone,
+                          rect: { x: at + LABEL_OFFSET, y: Math.round((hop.ya + hop.yb) / 2 - label.across / 2), w: label.along, h: label.across }
+                      }
+                  ]
+                : [];
+        const existing = [
+            ...Array.from({ length: slotsBefore }, (_, slot) => before(slot)).flat(),
+            ...beside,
+            ...Array.from({ length: slotsAfter }, (_, slot) => after(slot)).flat()
+        ];
+        const clear = (candidate: { zone: Zone; rect: Rect }): boolean =>
+            !blocked(candidate.zone, candidate.rect) && !onLine(candidate.zone, candidate.rect, label);
+        let choice = existing.find(clear);
+        if (!choice) {
+            choice = before(slotsBefore).find(clear);
+            if (choice) {
+                slotsBefore += 1;
+            }
+        }
+        if (!choice) {
+            choice = after(slotsAfter).find(clear);
+            if (choice) {
+                slotsAfter += 1;
+            }
+        }
+        // A place beside no line may not exist, since every line in a lane runs its whole width; a free place is enough.
+        choice ??= existing.find((candidate) => !blocked(candidate.zone, candidate.rect));
+        if (!choice) {
+            choice = before(slotsBefore)[0]!;
+            slotsBefore += 1;
+        }
+        placed.push(choice);
+        chosen.set(label.edge, choice);
+    }
+
+    // Only what was put in it: a channel whose labels all found room beside their tracks keeps no lane.
+    const laneWidth = Math.max(0, ...placed.filter((entry) => entry.zone === 'before').map((entry) => entry.rect.x + entry.rect.w));
+    const middleLabels = placed.filter((entry) => entry.zone === 'middle');
+    const hasMiddle = tracks > 0 || middleLabels.length > 0;
+    const middleWidth = Math.max(
+        tracksSpan,
+        slotsAfter > 0 ? afterStart + slotsAfter * slotStep - LABEL_GAP : 0,
+        ...middleLabels.map((entry) => entry.rect.x + entry.rect.w)
+    );
+    const laneGap = laneWidth > 0 && hasMiddle ? LANE_GAP : 0;
+    const needed = input.clearBefore + laneWidth + laneGap + (hasMiddle ? middleWidth : 0) + input.clearAfter;
+    const width = Math.max(MIN_CHANNEL, needed);
+    const laneStart = input.start + input.clearBefore;
+    const middleStart = laneStart + laneWidth + laneGap + Math.floor((width - needed) / 2);
+    const trackX = new Map<number, number>();
+    trackOf.forEach((x, hop) => trackX.set(hop, middleStart + x));
+    const labels = new Map<number, Rect>();
+    chosen.forEach((entry, edge) => {
+        labels.set(edge, { ...entry.rect, x: entry.rect.x + (entry.zone === 'before' ? laneStart : middleStart) });
+    });
+    return { width, trackX, labels };
+}