@graphty/graph-io 0.3.48 → 0.3.49

package/src/styles/cytoscape/resolve.ts

@@ -5,7 +5,10 @@
  * of elements plus the size of the style, and spends from the extraction's one budget.
  */
 
-import type { CanonSite } from "../canon/site.js";
+import type { GraphSnapshot } from "@graphty/graph-format";
+
+import { num6 } from "../canon/number.js";
+import { type CanonSite, noteAt } from "../canon/site.js";
 import { STYLE_ISSUE } from "../codes.js";
 import { toolDefaults } from "../defaults.js";
 import { StyleNotes } from "../notes.js";
@@ -21,12 +24,22 @@ import type {
     StyleWorkBudget,
 } from "../types.js";
 import { isStyleValue } from "../vocabulary.js";
+import { readCytoscapeCharts } from "./charts.js";
 import {
+    arrowGap,
+    arrowProportion,
+    arrowSizeParser,
     colorParser,
     CYTOSCAPE_LEXICON,
+    cytoscapeLabelBase,
+    cytoscapeLabelMove,
+    type CytoscapeLabelPlace,
+    cytoscapeLabelPlace,
     type CytoscapeValueParser,
+    halfBack,
     isUncarriedVp,
     NODE_SIZE_VP,
+    opacityParser,
     sizeParser,
     vpStep,
 } from "./lexicon.js";
@@ -60,6 +73,27 @@ export interface CytoscapeElements {
     value(column: string, i: number): unknown;
     /** Each element's bypasses, by element index. */
     readonly bypasses?: readonly CytoscapeBypass[];
+    /**
+     * Edges only: each edge's source and target node index, in the order Cytoscape created the edges. With them,
+     * the edges Cytoscape desktop fans apart (parallel edges without bends) are marked curved; with `nodeSize` too
+     * (each node's larger drawn side, by node index, as `fanNodeSizes()` reads it), they are given the `fanSpacing`
+     * desktop spaces them by. With `nodeBox` (each node's width, height and border width, by node index), each
+     * self-loop without bends is given the two handles desktop draws it round.
+     */
+    readonly ends?: {
+        readonly source: ArrayLike<number>;
+        readonly target: ArrayLike<number>;
+        readonly nodeSize?: ArrayLike<number | null>;
+        readonly nodeBox?: ArrayLike<readonly [width: number, height: number, border: number] | null>;
+        /** Each node's center on screen, x right and y down, by node index: what an edge's label is placed by. */
+        readonly nodeAt?: ArrayLike<readonly [x: number, y: number] | null>;
+        /**
+         * The order Cytoscape desktop creates the file's nodes and edges in, when it is not the file's (its CX reader
+         * creates them in hash order): each element's rank, lower first, by index. With it, `nodeAt` and `nodeSize`,
+         * each fanned edge is given desktop's own anchor as its bend, so it bows to the side desktop draws it on.
+         */
+        readonly created?: { readonly node: ArrayLike<number>; readonly edge: ArrayLike<number> };
+    };
 }
 
 /**
@@ -77,11 +111,101 @@ export interface CytoscapeResolveOptions {
      * element the style says nothing about is null. Defaults to null.
      */
     readonly defaults?: StyleTool | null;
+    /** `resolveCytoscapeBypasses()` only: the edges' ends, as `CytoscapeElements.ends`. */
+    readonly ends?: CytoscapeElements["ends"];
+    /**
+     * `resolveCytoscapeBypasses()` only: an element's value of an attribute column, as `CytoscapeElements.value`,
+     * for what is drawn from the element's data (a chart's values); without it no element has any.
+     */
+    readonly value?: CytoscapeElements["value"];
+}
+
+/** How closely desktop stacks the edges it fans, 0..1: its anchors are twice this times the node size apart. */
+const EDGE_STACKING_DENSITY_VP = "EDGE_STACKING_DENSITY";
+/** How desktop draws parallel edges: AUTO_BEND (the default) fans them, HAYSTACK draws them straight. */
+const EDGE_STACKING_VP = "EDGE_STACKING";
+/** Whether an edge's label is turned along its line. */
+const AUTOROTATE_VP = "EDGE_LABEL_AUTOROTATE";
+
+/**
+ * A map without one key.
+ * @param m - the map
+ * @param key - the key left out
+ * @returns a copy without it
+ */
+function withoutKey(m: ReadonlyMap<string, unknown>, key: string): ReadonlyMap<string, unknown> {
+    return new Map([...m].filter(([k]) => k !== key));
+}
+/** Desktop's `EDGE_STACKING_DENSITY` default. */
+const EDGE_STACKING_DENSITY_DEFAULT = 0.5;
+
+/**
+ * A graph's edge ends for `CytoscapeElements.ends`, with each node's larger side from the nodes' resolved `width`
+ * and `height`: what desktop spaces the edges it fans between two nodes by.
+ * @param snapshot - the graph
+ * @param nodes - the nodes' values per property
+ * @returns the ends
+ */
+export function edgeEnds(
+    snapshot: GraphSnapshot,
+    nodes: Partial<Record<string, StyleColumn>>,
+): NonNullable<CytoscapeElements["ends"]> {
+    const nodeSize = Array.from({ length: snapshot.nodeCount }, (_, i) => {
+        const sides = [nodes.width?.[i], nodes.height?.[i]].filter((v): v is number => typeof v === "number");
+        return sides.length === 0 ? null : Math.max(...sides);
+    });
+    const nodeBox = Array.from({ length: snapshot.nodeCount }, (_, i) => {
+        const [w, h, b] = [nodes.width?.[i], nodes.height?.[i], nodes.borderWidth?.[i]];
+        return typeof w === "number" && typeof h === "number" ? ([w, h, typeof b === "number" ? b : 0] as const) : null;
+    });
+    const position = snapshot.nodes.byRole("position");
+    // stored y up unless the column says otherwise; the label places are worked out y down, as Cytoscape draws
+    const down = (position?.meta.extra as { yAxis?: string } | undefined)?.yAxis === "down";
+    const nodeAt = Array.from({ length: snapshot.nodeCount }, (_, i) => {
+        const v = position?.isSet(i) === true ? (position.value(i) as ArrayLike<number>) : null;
+        return v === null ? null : ([v[0], down ? v[1] : -v[1]] as const);
+    });
+    const { src, dst } = snapshot.edgeList();
+    return { source: src, target: dst, nodeSize, nodeBox, nodeAt };
 }
 
 /** Locked node sizes with no `NODE_SIZE` anywhere draw at Cytoscape's lexicon default. */
 const NODE_SIZE_FALLBACK = 50;
 
+/**
+ * The visual property whose bypass each one takes when an element does not bypass it itself: Cytoscape desktop locks
+ * a bypassed parent's children too, so a session's `NODE_PAINT` bypass paints the fill and the border, a `NODE_SIZE`
+ * bypass sizes the node whatever `nodeSizeLocked` says, and an `EDGE_PAINT` or `EDGE_UNSELECTED_PAINT` bypass paints
+ * the line and its arrows (Cytoscape 3.10.5's SVG of the session specimen sheets `node-fills-borders`,
+ * `node-sizes-opacity` and `edges-lines`).
+ */
+const LOCK_PARENT: ReadonlyMap<string, string> = new Map([
+    ["NODE_FILL_COLOR", "NODE_PAINT"],
+    ["NODE_BORDER_PAINT", "NODE_PAINT"],
+    ["NODE_WIDTH", "NODE_SIZE"],
+    ["NODE_HEIGHT", "NODE_SIZE"],
+    ["EDGE_UNSELECTED_PAINT", "EDGE_PAINT"],
+    ["EDGE_STROKE_UNSELECTED_PAINT", "EDGE_UNSELECTED_PAINT"],
+    ["EDGE_SOURCE_ARROW_UNSELECTED_PAINT", "EDGE_UNSELECTED_PAINT"],
+    ["EDGE_TARGET_ARROW_UNSELECTED_PAINT", "EDGE_UNSELECTED_PAINT"],
+]);
+
+/**
+ * An element's bypass of a visual property: its own, else the nearest bypassed parent's (`LOCK_PARENT`).
+ * @param b - the element's bypasses
+ * @param vp - the visual property
+ * @returns the bypass value, or undefined
+ */
+function lockedValue(b: NonNullable<CytoscapeBypass>, vp: string): unknown {
+    for (let p: string | undefined = vp; p !== undefined; p = LOCK_PARENT.get(p)) {
+        const v = b.get(p);
+        if (v !== undefined && v !== null) {
+            return v;
+        }
+    }
+    return undefined;
+}
+
 /** A visual property and the parser that reads it for one neutral property. */
 type VpChoice = readonly [vp: string, parse: CytoscapeValueParser];
 
@@ -108,6 +232,12 @@ export function vpUsage(
             bypassed.add(to);
         }
     }
+    // a bypassed parent bypasses its children (LOCK_PARENT lists a parent's own entry before its children's)
+    for (const [child, parent] of LOCK_PARENT) {
+        if (bypassed.has(parent)) {
+            bypassed.add(child);
+        }
+    }
     const used = new Set([...style.defaults.keys(), ...style.mappings.keys(), ...bypassed]);
     return { used, bypassed };
 }
@@ -137,7 +267,8 @@ export function chooseVps(
         chosen.delete("height");
     }
     if (target === "edge" && style.dependencies.get("arrowColorMatchesEdge") === true) {
-        if (used.has("EDGE_UNSELECTED_PAINT")) {
+        // the line is EDGE_UNSELECTED_PAINT's, not the stroke's, even where the style sets only the stroke
+        if (used.has("EDGE_UNSELECTED_PAINT") || used.has("EDGE_STROKE_UNSELECTED_PAINT")) {
             chosen.set("color", ["EDGE_UNSELECTED_PAINT", colorParser]);
         }
         chosen.delete("sourceArrowColor");
@@ -299,7 +430,7 @@ function resolver(
                 return b.get(from);
             }
         }
-        return undefined;
+        return lockedValue(b, vp);
     };
     // a mapping parsed once per visual property and neutral property
     const mappingOf = (vp: string, parse: CytoscapeValueParser, property: string): ParsedMapping | undefined => {
@@ -337,7 +468,7 @@ function resolver(
 /**
  * Every element's value per neutral property under a Cytoscape style, the way Cytoscape draws it: per visual
  * property a bypass, else the mapping's value, else the default; `nodeSizeLocked` and `arrowColorMatchesEdge`
- * applied. `EDGE_CURVED` only rounds an edge's bends, so an edge without bends is `curved: false`. Visual properties
+ * applied (under `nodeSizeLocked` a node's own `NODE_WIDTH` or `NODE_HEIGHT` bypass still sets that dimension). `EDGE_CURVED` only rounds an edge's bends, so an edge without bends is `curved: false` unless desktop fans it out of a bundle of parallel edges (given `elements.ends`). Visual properties
  * no neutral property carries are noted as `W_STYLE_NOT_CARRIED`.
  * @param target - nodes or edges
  * @param style - the style
@@ -357,7 +488,7 @@ export function resolveCytoscape(
     const n = elements.count;
     const { used, bypassed } = vpUsage(s, elements.bypasses ?? []);
     const chosen = chooseVps(target, s, used);
-    const { one } = resolver(target, s, elements, notes, options.budget);
+    const { one, bypass } = resolver(target, s, elements, notes, options.budget);
     const out: Partial<Record<string, StyleColumn>> = {};
     const column = (vp: string, parse: CytoscapeValueParser, property: string): (StyleValue | null)[] => {
         options.budget?.spend(target, n);
@@ -371,31 +502,581 @@ export function resolveCytoscape(
         out[prop] = column(vp, parse, prop);
     }
     if (target === "node" && s.dependencies.get("nodeSizeLocked") === true) {
+        // a node's own width or height still wins over the locked size: Cytoscape draws it
         const size = column(NODE_SIZE_VP, sizeParser, "width").map((v) => v ?? NODE_SIZE_FALLBACK);
-        out.width = size;
-        out.height = size.slice();
+        const own = (vp: string, property: string): StyleColumn =>
+            size.map((v, i) => {
+                const b = bypass(i, vp);
+                const parsed =
+                    b === undefined || b === null ? null : sizeParser(b, { notes, target, property, element: i });
+                return parsed ?? v;
+            });
+        out.width = own("NODE_WIDTH", "width");
+        out.height = own("NODE_HEIGHT", "height");
+    }
+    labelDress(target, out, one, n, elements.ends);
+    if (target === "node") {
+        squashHexagons(out);
+        // the value as written: a chart is text, or an object in CX2; a size a number or its text
+        const raw: CytoscapeValueParser = (v) => {
+            if (typeof v === "string" || typeof v === "number") {
+                return String(v);
+            }
+            return typeof v === "object" && v !== null ? JSON.stringify(v) : null;
+        };
+        readCytoscapeCharts(
+            out,
+            n,
+            (slot, i) => {
+                const v = one(slot, raw, "pieColors", i);
+                return typeof v === "string" && v.startsWith("{") ? (JSON.parse(v) as unknown) : v;
+            },
+            (column, i) => elements.value(column, i),
+            s.dependencies.get("nodeCustomGraphicsSizeSync") !== false,
+        );
+    }
+    if (
+        target === "edge" &&
+        s.dependencies.get("arrowColorMatchesEdge") === true &&
+        !used.has("EDGE_UNSELECTED_PAINT") &&
+        used.has("EDGE_STROKE_UNSELECTED_PAINT")
+    ) {
+        // the dependency draws the line and the arrows in EDGE_UNSELECTED_PAINT, Cytoscape's own when the style has
+        // none: the stroke's default and its mapping are not drawn, only an element's own bypass of the stroke (below;
+        // Cytoscape 3.10.5 on specimen-mappings-bypass draws a passthrough of the stroke #404040, as its XGMML says)
+        const paint = (toolDefaults("cytoscape-fallbacks")?.edge.color?.value ?? null) as StyleValue | null;
+        out.color = Array.from({ length: n }, (_, i) => one("EDGE_UNSELECTED_PAINT", colorParser, "color", i) ?? paint);
     }
     if (target === "edge" && s.dependencies.get("arrowColorMatchesEdge") === true && out.color !== undefined) {
-        out.sourceArrowColor = out.color.slice();
-        out.targetArrowColor = out.color.slice();
+        // CX2's EDGE_LINE_COLOR bypass is the stroke's alone (its writer spells a desktop EDGE_UNSELECTED_PAINT
+        // bypass out as the line and both arrow colors): the arrows keep the style's line color (Cytoscape 3.10.5's
+        // SVG of the CX2 specimen-mappings-bypass, bypass-over-edge-passthrough, draws its arrow #505050)
+        const lineVp = chosen.get("color")?.[0];
+        const unbypassed = resolver(target, s, { ...elements, bypasses: [] }, notes, options.budget).one;
+        const arrows =
+            lineVp === "EDGE_LINE_COLOR"
+                ? Array.from({ length: n }, (_, i) => unbypassed(lineVp, colorParser, "color", i))
+                : out.color;
+        out.sourceArrowColor = arrows.slice();
+        out.targetArrowColor = arrows.slice();
+        // the dependency sets the line and the arrows from EDGE_UNSELECTED_PAINT; an element's own bypass of one of
+        // them still wins for that one (Cytoscape draws a bypassed EDGE_STROKE_UNSELECTED_PAINT line in its color)
+        const own: readonly [string, string][] = [
+            ["color", "EDGE_STROKE_UNSELECTED_PAINT"],
+            ["sourceArrowColor", "EDGE_SOURCE_ARROW_UNSELECTED_PAINT"],
+            ["targetArrowColor", "EDGE_TARGET_ARROW_UNSELECTED_PAINT"],
+            ["sourceArrowColor", "EDGE_SOURCE_ARROW_COLOR"],
+            ["targetArrowColor", "EDGE_TARGET_ARROW_COLOR"],
+        ];
+        for (const [prop, vp] of own) {
+            out[prop] = (out[prop] ?? []).map((v, i) => {
+                const b = bypass(i, vp);
+                const site = { notes, target, property: prop, element: i };
+                return (b === undefined || b === null ? null : colorParser(b, site)) ?? v;
+            });
+        }
     }
     noteUncarried(target, s, used, bypassed, notes);
-    fillToolDefaults(target, out, n, options.defaults ?? null);
     if (target === "edge") {
-        straightenBendless(out, one);
+        const bends = column(EDGE_BEND_VP, bendsParser, "bends");
+        if (bends.some((v) => v !== null)) {
+            out.bends = bends;
+        }
+        // before the tool's defaults: an edge the style leaves unset is curved as Cytoscape's EDGE_CURVED default is
+        const curvedAsSet = out.curved?.slice();
+        straightenBendless(out, one, n, elements.ends);
+        loopHandles(out, one, curvedAsSet, elements.ends);
+        arrowProportions(out, column);
     }
+    fillToolDefaults(target, out, n, options.defaults ?? null);
     return out;
 }
 
 /**
- * Marks straight every curved edge without bends: `EDGE_CURVED` only rounds the bends an edge has.
+ * A visual property's value as written, a CX2 object as its JSON.
+ * @param v - the value
+ * @returns its text, or null
+ */
+const rawText: CytoscapeValueParser = (v) => {
+    if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
+        return String(v);
+    }
+    return typeof v === "object" && v !== null ? JSON.stringify(v) : null;
+};
+
+/**
+ * Reads what Cytoscape draws of each element's label beyond its words, font and color: the box behind it (drawn only
+ * with a `*_LABEL_BACKGROUND_SHAPE` other than NONE, the default, in its color and transparency), where it is placed
+ * (`*_LABEL_POSITION` read whole: which point of the label's box is pinned to which point of the node, or of the
+ * edge's line, and the offset) and how its lines are justified. Each column is kept only where some element needs it;
+ * an edge's place is kept whenever it has one, since Cytoscape centers an edge's label on its line.
+ * @param target - nodes or edges
+ * @param out - the values per property, changed in place
+ * @param one - reads one visual property of one element
+ * @param n - the element count
+ * @param ends - the edges' ends and their nodes' centers, when known
+ */
+function labelDress(
+    target: StyleTarget,
+    out: Partial<Record<string, StyleColumn>>,
+    one: Resolver["one"],
+    n: number,
+    ends: CytoscapeElements["ends"],
+): void {
+    const vp = (name: string): string => `${target === "node" ? "NODE" : "EDGE"}_LABEL_${name}`;
+    const columns: Record<string, (StyleValue | null)[]> = {};
+    const put = (property: string, i: number, v: StyleValue | null): void => {
+        let column = columns[property];
+        if (column === undefined) {
+            column = new Array<StyleValue | null>(n).fill(null);
+            columns[property] = column;
+        }
+        column[i] = v;
+    };
+    for (let i = 0; i < n; i++) {
+        labelBox(vp, one, i, put);
+        // read whole, quietly (the lexicon's reading of the same value notes a bad one), under a name of its own: a
+        // mapping is parsed once per visual property and neutral property
+        const placed = one(vp("POSITION"), rawText, "labelPlace", i);
+        const raw = typeof placed === "string" && placed.startsWith("{") ? (JSON.parse(placed) as unknown) : placed;
+        const place = cytoscapeLabelPlace(raw, { notes: new StyleNotes(), target, property: "labelPosition" });
+        if (place !== null) {
+            placeLabel(target, place, i, out, put, ends);
+        }
+        if (target === "edge") {
+            autorotate(one, i, out, n, ends);
+        }
+    }
+    const kept = (property: string, v: StyleValue | null): boolean =>
+        v !== null && v !== 0 && (v !== "center" || (property === "labelPosition" && target === "edge"));
+    for (const [property, values] of Object.entries(columns)) {
+        if (values.some((v) => kept(property, v))) {
+            out[property] = values;
+        }
+    }
+}
+
+/**
+ * The box Cytoscape draws behind one label, when its shape is not NONE: its color (`#B6B6B6` unset, the lexicon's
+ * default), its opacity, and for ROUND_RECTANGLE its corners, rounded an eighth of the box's height: 1.455 on the
+ * 11.64-tall box of a 10 px label (xgmml-specimen-labels.svg, label-background-shape-round-rectangle), so 0.1455 of the
+ * label's size. ponytail: one line's height; a box of several lines is rounded as one line's.
+ * @param vp - names a label visual property of the target
+ * @param one - reads one visual property of one element
+ * @param i - the element
+ * @param put - sets one element's value of a property
+ */
+function labelBox(
+    vp: (name: string) => string,
+    one: Resolver["one"],
+    i: number,
+    put: (property: string, i: number, v: StyleValue | null) => void,
+): void {
+    const shape = one(vp("BACKGROUND_SHAPE"), rawText, "labelBackgroundShape", i);
+    if (typeof shape !== "string" || shape.trim().toUpperCase() === "NONE") {
+        return;
+    }
+    put("labelBackground", i, one(vp("BACKGROUND_COLOR"), colorParser, "labelBackground", i) ?? "#b6b6b6");
+    const [t, o] = [vp("BACKGROUND_TRANSPARENCY"), vp("BACKGROUND_OPACITY")];
+    const opacity =
+        one(t, opacityParser(t), "labelBackgroundOpacity", i) ?? one(o, opacityParser(o), "labelBackgroundOpacity", i);
+    put("labelBackgroundOpacity", i, opacity ?? 1);
+    // CX2 spells it round-rectangle
+    if (shape.trim().toUpperCase().replace("-", "_") === "ROUND_RECTANGLE") {
+        const size = one(vp("FONT_SIZE"), sizeParser, "labelSize", i);
+        // desktop's default label sizes: 12 on a node, 10 on an edge
+        const defaultSize = vp("FONT_SIZE").startsWith("EDGE") ? 10 : 12;
+        put("labelCornerRadius", i, num6(LABEL_CORNER_PER_SIZE * (typeof size === "number" ? size : defaultSize)));
+    }
+}
+
+/** How far Cytoscape rounds a ROUND_RECTANGLE label box's corners, as a fraction of the label's font size. */
+const LABEL_CORNER_PER_SIZE = 0.1455;
+
+/**
+ * Where one label is placed, from its Cytoscape label position: its neutral `labelPosition`, offsets, shifts and
+ * line justification. A node's label is pinned against the node's box. An edge's is pinned to a point of its drawn
+ * line, the middle unless the anchor's horizontal letter names an end (W the source's, E the target's; its vertical
+ * letter changes nothing, measured on Cytoscape 3.10.5's SVG), from the line's middle, where it is centered.
+ * @param target - nodes or edges
+ * @param place - the label position
+ * @param i - the element
+ * @param out - the values per property (the node sizes are read)
+ * @param put - sets one element's value of a property
+ * @param ends - the edges' ends and their nodes' centers, when known
+ */
+function placeLabel(
+    target: StyleTarget,
+    place: CytoscapeLabelPlace,
+    i: number,
+    out: Partial<Record<string, StyleColumn>>,
+    put: (property: string, i: number, v: StyleValue | null) => void,
+    ends: CytoscapeElements["ends"],
+): void {
+    let move: ReturnType<typeof cytoscapeLabelMove>;
+    if (target === "node") {
+        const [w, h] = [out.width?.[i], out.height?.[i]];
+        move = cytoscapeLabelMove(place, typeof w === "number" ? w : 0, typeof h === "number" ? h : 0);
+        put("labelPosition", i, cytoscapeLabelBase(place));
+    } else {
+        const [ax, ay] = lineEnd(ends, i, place.node[0]);
+        move = {
+            offset: [ax + place.offset[0], ay + place.offset[1]],
+            shift: [halfBack(place.label[0]), halfBack(place.label[1])],
+        };
+        put("labelPosition", i, "center");
+    }
+    put("labelOffsetX", i, num6(move.offset[0]));
+    put("labelOffsetY", i, num6(move.offset[1]));
+    put("labelShiftX", i, move.shift[0]);
+    put("labelShiftY", i, move.shift[1]);
+    put("labelTextAlign", i, place.justify);
+}
+
+/**
+ * Turns an edge's label along its line under `EDGE_LABEL_AUTOROTATE`, as Cytoscape draws it: the line's angle from
+ * its source's center to its target's (kept between -90 and 90 so the words read left to right), plus its
+ * `EDGE_LABEL_ROTATION`.
+ * ponytail: the angle is the file's node places at import; a layout that moves the nodes leaves it as it was, until
+ * the neutral styles can say "along the line"
+ * @param one - reads one visual property of one element
+ * @param e - the edge
+ * @param out - the values per property, changed in place
+ * @param n - the edge count
+ * @param ends - the edges' ends and their nodes' centers
+ */
+function autorotate(
+    one: Resolver["one"],
+    e: number,
+    out: Partial<Record<string, StyleColumn>>,
+    n: number,
+    ends: CytoscapeElements["ends"],
+): void {
+    const on = one(AUTOROTATE_VP, rawText, "labelRotation", e);
+    const [si, ti] = [ends?.source[e], ends?.target[e]];
+    const [s, t] = [si === undefined ? null : ends?.nodeAt?.[si], ti === undefined ? null : ends?.nodeAt?.[ti]];
+    if (String(on).toLowerCase() !== "true" || !s || !t || (s[0] === t[0] && s[1] === t[1])) {
+        return;
+    }
+    const a = (Math.atan2(t[1] - s[1], t[0] - s[0]) * 180) / Math.PI;
+    let upright = a;
+    if (a > 90) {
+        upright = a - 180;
+    } else if (a <= -90) {
+        upright = a + 180;
+    }
+    out.labelRotation ??= new Array<StyleValue | null>(n).fill(null);
+    const column = out.labelRotation as (StyleValue | null)[];
+    const own = column[e];
+    column[e] = num6((((upright + (typeof own === "number" ? own : 0)) % 360) + 360) % 360);
+}
+
+/**
+ * How far from the middle of an edge's drawn line one of its ends is, on screen (y down): the line between its two
+ * nodes' centers, cut where it meets each node's ellipse; 0 for the middle, or where the centers are not known.
+ * @param ends - the edges' ends, their nodes' centers and boxes
+ * @param e - the edge
+ * @param side - -1 for the source's end, 1 for the target's, 0 for the middle
+ * @returns the offset from the line's middle
+ */
+function lineEnd(ends: CytoscapeElements["ends"], e: number, side: number): readonly [number, number] {
+    const [si, ti] = [ends?.source[e], ends?.target[e]];
+    const [s, t] = [si === undefined ? null : ends?.nodeAt?.[si], ti === undefined ? null : ends?.nodeAt?.[ti]];
+    if (side === 0 || s === null || s === undefined || t === null || t === undefined) {
+        return [0, 0];
+    }
+    const length = Math.hypot(t[0] - s[0], t[1] - s[1]);
+    if (length === 0) {
+        return [0, 0];
+    }
+    const [ux, uy] = [(t[0] - s[0]) / length, (t[1] - s[1]) / length];
+    // where the line leaves a node's ellipse, along it from the center
+    const reach = (node: number | undefined): number => {
+        const box = node === undefined ? null : ends?.nodeBox?.[node];
+        if (box === null || box === undefined) {
+            return 0;
+        }
+        const [a, b] = [box[0] / 2, box[1] / 2];
+        return a === 0 || b === 0 ? 0 : (a * b) / Math.hypot(b * ux, a * uy);
+    };
+    const from = reach(si);
+    const to = length - reach(ti);
+    // the drawn line's middle and the end asked for, both measured along the line from the source's center
+    const along = (side < 0 ? from : to) - (from + to) / 2;
+    return [ux * along, uy * along];
+}
+
+/** How tall a regular hexagon is for its width. */
+const HEXAGON_ASPECT = Math.sqrt(3) / 2;
+
+/**
+ * Gives every hexagon node the height Cytoscape desktop draws it at. Its HEXAGON is a regular hexagon squashed to
+ * the node's box rather than one filling it: the corners reach the box's sides, the flat top and bottom only
+ * `sqrt(3) / 2` of the way up and down, so a 40 x 40 node with a border of 1 is a 39 x 33.8 path (its border is
+ * inside its size, `borderPosition` inside). The neutral hexagon fills its box, so the node is that much shorter.
+ * @param out - the node values per property, changed in place
+ */
+function squashHexagons(out: Partial<Record<string, StyleColumn>>): void {
+    const { shape, height } = out;
+    if (shape === undefined || height === undefined || !shape.includes("hexagon")) {
+        return;
+    }
+    const border = out.borderWidth;
+    out.height = height.map((h, i) => {
+        if (shape[i] !== "hexagon" || typeof h !== "number") {
+            return h;
+        }
+        const b = border?.[i];
+        const w = typeof b === "number" ? Math.min(b, h) : 0;
+        return (h - w) * HEXAGON_ASPECT + w;
+    });
+}
+
+/**
+ * What Cytoscape draws of each end's arrow beyond its shape and the one neutral `arrowSize`: the source end's own
+ * size where it differs from the target's (an unset size is Cytoscape's 6), and the length and width of the short and
+ * crossed arrows against their neutral shape's, and how far off its node each arrow stands. Each is kept only where
+ * some edge needs it.
+ * @param out - the values per property, changed in place
+ * @param column - reads one visual property of every element
+ */
+function arrowProportions(
+    out: Partial<Record<string, StyleColumn>>,
+    column: (vp: string, parse: CytoscapeValueParser, property: string) => (StyleValue | null)[],
+): void {
+    const size = out.arrowSize;
+    const own = column("EDGE_SOURCE_ARROW_SIZE", arrowSizeParser, "sourceArrowSize").map((v) => v ?? 1);
+    if (own.some((v, i) => v !== (size?.[i] ?? 1))) {
+        out.sourceArrowSize = own;
+    }
+    for (const [prop, vp, side] of [
+        ["sourceArrowLength", "EDGE_SOURCE_ARROW_SHAPE", "length"],
+        ["targetArrowLength", "EDGE_TARGET_ARROW_SHAPE", "length"],
+        ["sourceArrowWidth", "EDGE_SOURCE_ARROW_SHAPE", "width"],
+        ["targetArrowWidth", "EDGE_TARGET_ARROW_SHAPE", "width"],
+    ] as const) {
+        const values = column(vp, arrowProportion(side), prop).map((v) => (v === 1 ? null : v));
+        if (values.some((v) => v !== null)) {
+            out[prop] = values;
+        }
+    }
+    // the arrows desktop draws standing off their node (T, the half circles, HALF_TOP, the squares)
+    for (const [prop, vp] of [
+        ["sourceArrowGap", "EDGE_SOURCE_ARROW_SHAPE"],
+        ["targetArrowGap", "EDGE_TARGET_ARROW_SHAPE"],
+    ] as const) {
+        const values = column(vp, arrowGap, prop).map((v) => (v === 0 ? null : v));
+        if (values.some((v) => v !== null)) {
+            out[prop] = values;
+        }
+    }
+}
+
+/**
+ * Marks straight every curved edge without bends, except where Cytoscape desktop fans it: `EDGE_CURVED` only
+ * rounds the bends an edge has, and the bends Cytoscape adds itself. Among the edges joining the same two nodes
+ * (either way round, not loops), it draws the last it created straight and bends each earlier one without bends
+ * of its own round an anchor beside the line (`DEdgeDetails.getAnchors`, `EDGE_STACKING` `AUTO_BEND`, the default;
+ * it walks the pair's edges newest first, measured on Cytoscape 3.10.5's SVG of edges joining two nodes both ways)
+ * -- unless the last has bends, when every anchor falls on the line. Its anchors are the larger side of the two
+ * nodes times twice `EDGE_STACKING_DENSITY` apart, so the curves' middles half that: each fanned edge's
+ * `fanSpacing`, when the node sizes are known. A fanned edge is drawn curved even under `EDGE_CURVED` false, and an
+ * edge whose `EDGE_STACKING` is HAYSTACK is neither fanned nor counted: desktop draws it straight (both measured on
+ * Cytoscape 3.10.5's SVG of the edges-lines specimen sheet).
+ * @param out - the values per property, changed in place
+ * @param one - reads one visual property of one element
+ * @param n - the edge count
+ * @param ends - each edge's source and target node index, in creation order, when known
+ */
+function straightenBendless(
+    out: Partial<Record<string, StyleColumn>>,
+    one: Resolver["one"],
+    n: number,
+    ends: CytoscapeElements["ends"],
+): void {
+    // an edge the style leaves unset takes EDGE_CURVED's default, true
+    const curved = out.curved ?? new Array<StyleValue | null>(n).fill(null);
+    const bent = (i: number): boolean => one(EDGE_BEND_VP, bendParser, "curved", i) === true;
+    const haystack = (i: number): boolean =>
+        String(one(EDGE_STACKING_VP, rawText, "fanned", i) ?? "").toUpperCase() === "HAYSTACK";
+    // each fanned edge's place in its pair's walk (1 for the first fanned)
+    const place = ends === undefined ? new Map<number, number>() : fanPlaces(ends, curved.length, bent, haystack);
+    const fanned = new Set(place.keys());
+    const rounds = (i: number): boolean => fanned.has(i) || bent(i);
+    const rounded = curved.map((c, i) => {
+        if (c === null) {
+            return rounds(i) ? true : null;
+        }
+        return c === true || fanned.has(i) ? rounds(i) : c;
+    });
+    if (out.curved !== undefined || rounded.includes(true)) {
+        out.curved = rounded;
+    }
+    if (ends?.nodeSize === undefined || fanned.size === 0) {
+        return;
+    }
+    const { source, target, nodeSize } = ends;
+    out.fanSpacing = curved.map((_, i) => {
+        const size = Math.max(nodeSize[source[i]] ?? Number.NaN, nodeSize[target[i]] ?? Number.NaN);
+        if (out.curved?.[i] !== true || !fanned.has(i) || bent(i) || !Number.isFinite(size)) {
+            return null;
+        }
+        const read = one(EDGE_STACKING_DENSITY_VP, sizeParser, "fanSpacing", i);
+        const density = Math.min(1, typeof read === "number" ? read : EDGE_STACKING_DENSITY_DEFAULT);
+        return size * density;
+    });
+    fanAnchors(out, ends, place);
+}
+
+/**
+ * The edges desktop fans, each with its place in its node pair's walk (1 for the first fanned). Desktop walks a node
+ * pair's edges newest first (its adjacency lists take each new edge at the head); the first it meets is drawn
+ * straight, and each later one fanned unless that first one has bends. Loops and haystack edges are left out.
+ * @param ends - each edge's source and target node index, and the order they were created in
+ * @param count - the edge count
+ * @param bent - whether an edge has bends of its own
+ * @param haystack - whether an edge is a haystack edge
+ * @returns each fanned edge's place, in walk order
+ */
+function fanPlaces(
+    ends: NonNullable<CytoscapeElements["ends"]>,
+    count: number,
+    bent: (i: number) => boolean,
+    haystack: (i: number) => boolean,
+): Map<number, number> {
+    const place = new Map<number, number>();
+    const first = new Map<string, { f: number; k: number }>();
+    for (const i of newestFirst(count, ends.created?.edge)) {
+        const [s, t] = [ends.source[i], ends.target[i]];
+        if (s === t || haystack(i)) {
+            continue;
+        }
+        const key = `${Math.min(s, t)},${Math.max(s, t)}`;
+        const f = first.get(key);
+        if (f === undefined) {
+            first.set(key, { f: i, k: 0 });
+        } else if (!bent(f.f)) {
+            f.k++;
+            place.set(i, f.k);
+        }
+    }
+    return place;
+}
+
+/**
+ * The edges newest first: by the order they were created in when it is known, else last index first.
+ * @param count - the edge count
+ * @param created - each edge's place in the creation order, when known
+ * @returns the edge indices in that order
+ */
+function newestFirst(count: number, created: ArrayLike<number> | undefined): number[] {
+    const walk = Array.from({ length: count }, (_, i) => i);
+    walk.sort(created === undefined ? (a, b) => b - a : (a, b) => created[b] - created[a]);
+    return walk;
+}
+
+/**
+ * Gives each fanned edge its place in desktop's fan as a bend, when the order desktop created the nodes in is known:
+ * the fan's side is then desktop's, not graphty's. Desktop measures each pair's fan from the node whose view it made
+ * first, and it makes views newest node first (`DEdgeDetails.getAnchors`: the pair's lower view SUID is its source;
+ * `SimpleNetwork.getNodeList` lists the newest node first); the `k`-th fanned edge bows `ceil(k / 2)` fan spacings
+ * off the middle of the line, to the right of the fan's direction (y down) for odd `k`, to the left for even. The
+ * bend is the control point of a quadratic Bezier whose middle lies there, twice as far off.
+ * @param out - the values per property, with `fanSpacing` set; changed in place
+ * @param ends - the edges' ends, their nodes' centers and creation order
+ * @param place - each fanned edge's place in its pair's walk, from 1
+ */
+function fanAnchors(
+    out: Partial<Record<string, StyleColumn>>,
+    ends: NonNullable<CytoscapeElements["ends"]>,
+    place: ReadonlyMap<number, number>,
+): void {
+    const { created, nodeAt, source, target } = ends;
+    const spacing = out.fanSpacing?.slice();
+    if (created === undefined || nodeAt === undefined || spacing === undefined) {
+        return;
+    }
+    const bends = out.bends?.slice() ?? new Array<StyleValue | null>(source.length).fill(null);
+    const bendCurve = out.bendCurve?.slice() ?? new Array<StyleValue | null>(source.length).fill(null);
+    let changed = false;
+    for (const [i, k] of place) {
+        const [s, t] = [source[i], target[i]];
+        const [ps, pt, f] = [nodeAt[s], nodeAt[t], spacing[i]];
+        if (ps === null || ps === undefined || pt === null || pt === undefined || typeof f !== "number") {
+            continue;
+        }
+        const len = Math.hypot(pt[0] - ps[0], pt[1] - ps[1]);
+        if (len === 0) {
+            continue;
+        }
+        // the fan's direction: from the node desktop made a view of first, the one created last
+        const sign = created.node[s] > created.node[t] ? 1 : -1;
+        const [nx, ny] = [(sign * (pt[0] - ps[0])) / len, (sign * (pt[1] - ps[1])) / len];
+        const offset = Math.ceil(k / 2) * (k % 2 === 0 ? 1 : -1) * 2 * f;
+        const [vx, vy] = [offset * ny, -offset * nx];
+        // to the left of source -> target, y up, as a fraction of the length
+        const across = (vx * (pt[1] - ps[1]) - vy * (pt[0] - ps[0])) / (len * len);
+        bends[i] = `0.5,${String(Math.round(across * 1e6) / 1e6 || 0)}`;
+        bendCurve[i] = "bezier";
+        spacing[i] = null;
+        changed = true;
+    }
+    if (changed) {
+        out.bends = bends;
+        out.bendCurve = bendCurve;
+        out.fanSpacing = spacing;
+    }
+}
+
+/**
+ * Gives each self-loop without bends of its own the two handles Cytoscape desktop draws it round
+ * (`DEdgeDetails.getAnchors`): one left of the node's center and one above it, each `(i + 3) / 2` of the node's
+ * size times twice `EDGE_STACKING_DENSITY` away, where the size is the larger side of the node with its border
+ * (its extents in desktop's spatial index) and `i` counts the node's earlier loops without bends, newest first as
+ * desktop walks them. A loop is curved through them unless `EDGE_CURVED` says false. Measured on Cytoscape
+ * 3.10.5's SVG of the edges-lines specimen sheet (within 0.3 px of its loops).
  * @param out - the values per property, changed in place
  * @param one - reads one visual property of one element
+ * @param curvedAsSet - each edge's `curved` as the style set it, before bendless edges were straightened
+ * @param ends - each edge's source and target node index, in creation order, and each node's box, when known
  */
-function straightenBendless(out: Partial<Record<string, StyleColumn>>, one: Resolver["one"]): void {
-    const { curved } = out;
-    if (curved !== undefined) {
-        out.curved = curved.map((c, i) => (c === true ? one(EDGE_BEND_VP, bendParser, "curved", i) === true : c));
+function loopHandles(
+    out: Partial<Record<string, StyleColumn>>,
+    one: Resolver["one"],
+    curvedAsSet: readonly (StyleValue | null)[] | undefined,
+    ends: CytoscapeElements["ends"],
+): void {
+    const box = ends?.nodeBox;
+    if (ends === undefined || box === undefined) {
+        return;
+    }
+    const bends = out.bends?.slice() ?? new Array<StyleValue | null>(ends.source.length).fill(null);
+    const curved = out.curved?.slice() ?? new Array<StyleValue | null>(ends.source.length).fill(null);
+    const earlier = new Map<number, number>();
+    const fraction = (v: number): string => String(Math.round(v * 1e4) / 1e4 || 0);
+    let changed = false;
+    for (let i = ends.source.length - 1; i >= 0; i--) {
+        const node = ends.source[i];
+        const b = box[node];
+        if (node !== ends.target[i] || bends[i] !== null) {
+            continue;
+        }
+        const rank = earlier.get(node) ?? 0;
+        earlier.set(node, rank + 1);
+        if (b === null || b === undefined || b[0] <= 0 || b[1] <= 0) {
+            continue;
+        }
+        const read = one(EDGE_STACKING_DENSITY_VP, sizeParser, "fanSpacing", i);
+        const density = Math.min(1, typeof read === "number" ? read : EDGE_STACKING_DENSITY_DEFAULT);
+        const reach = (((rank + 3) * (Math.max(b[0], b[1]) + b[2])) / 2) * 2 * density;
+        // as `x,y` fractions of the node's half width and half height, y up: left of the center, then above it
+        bends[i] = `${fraction(-reach / (b[0] / 2))},0 0,${fraction(reach / (b[1] / 2))}`;
+        curved[i] = curvedAsSet?.[i] !== false;
+        changed = true;
+    }
+    if (changed) {
+        out.bends = bends;
+        out.curved = curved;
     }
 }
 
@@ -415,6 +1096,41 @@ export const bendParser: CytoscapeValueParser = (raw) => {
     return Array.isArray(raw) ? raw.length > 0 : raw !== null && raw !== undefined && typeof raw === "object";
 };
 
+/**
+ * An `EDGE_BEND` value as the neutral `bends`: Cytoscape keeps each handle as `cos,sin,ratio`, the handle at the
+ * source center plus `ratio` times the source-to-target vector turned by the angle (y down), handles separated by
+ * `|`. Relative to the same line, y up, that is `ratio * cos` along it and `-ratio * sin` across it.
+ * @param input - the value: an `EDGE_BEND` text, or CX2's `EDGE_CONTROL_POINTS` objects
+ * @param site - where it was read
+ * @returns the bends, or null for an edge without handles or a value that is not handles
+ */
+const bendsParser: CytoscapeValueParser = (input, site) => {
+    // CX2's EDGE_CONTROL_POINTS: one object per handle, whose `sin` Cytoscape fills with EDGE_BEND's first number and
+    // `cos` with its second (it reads them back the same way: specimen-edges-lines bend-one-handle bends)
+    const raw = Array.isArray(input)
+        ? input
+              .map((h: unknown) => {
+                  const o = (h ?? {}) as Record<string, unknown>;
+                  return `${Number(o.sin)},${Number(o.cos)},${Number(o.ratio)}`;
+              })
+              .join("|")
+        : input;
+    if (typeof raw !== "string" || !bendParser(raw, site)) {
+        return null;
+    }
+    const points: string[] = [];
+    for (const handle of raw.trim().split("|")) {
+        const [c, sin, ratio] = handle.split(",").map((t) => Number(t.trim()));
+        if (![c, sin, ratio].every((v) => Number.isFinite(v))) {
+            noteAt(site, STYLE_ISSUE.BAD_VALUE, raw.slice(0, 64));
+            return null;
+        }
+        const fraction = (v: number): string => String(Math.round(v * 1e4) / 1e4 || 0);
+        points.push(`${fraction(ratio * c)},${fraction(-ratio * sin)}`);
+    }
+    return points.join(" ");
+};
+
 /** Default values that mean "nothing drawn": a VP left at one of these is not worth a note. */
 const INERT_DEFAULT = /NullCustomGraphics|^255$|^0(?:\.0+)?$|^$|^C,C,c,0\.00,0\.00$|^false$/;
 
@@ -510,7 +1226,15 @@ export function resolveCytoscapeBypasses(
 ): Partial<Record<string, StyleColumn>> {
     const notes = options.notes ?? new StyleNotes();
     const style = emptyCytoscapeStyle();
-    const elements: CytoscapeElements = { count: maps.length, value: () => null, bypasses: maps };
+    const elements: CytoscapeElements = {
+        count: maps.length,
+        value: options.value ?? (() => null),
+        // Cytoscape 3.10.5 draws an XGMML edge's EDGE_LABEL_AUTOROTATE true level, where it turns the same edge read
+        // from CX, CX2 or a session along its line (the label-autorotate-true edge of the edge-labels and
+        // mappings-bypass-p13 sheets in its SVG): its XGMML reader does not apply it, so neither does graph-io
+        bypasses: maps.map((m) => (m?.has(AUTOROTATE_VP) === true ? withoutKey(m, AUTOROTATE_VP) : m)),
+        ends: options.ends,
+    };
     const out = resolveCytoscape(target, style, elements, { notes, budget: options.budget });
     if (target === "node" && out.width === undefined) {
         const size = maps.map((m) => {