@graphty/graph-io 0.3.48 → 0.3.49

package/src/styles/annotations.ts

@@ -33,12 +33,21 @@ export interface AnnotationBase {
     readonly z: number;
 }
 
+/**
+ * How far an annotation is turned about its box's center, in degrees, clockwise as seen on screen (0: not turned).
+ * Shapes, texts and pictures carry it; Cytoscape saves it as `rotation`.
+ */
+interface RotatedAnnotation {
+    /** The turn in degrees, clockwise on screen. */
+    readonly rotation: number;
+}
+
 /**
  * A filled, outlined shape.
  * @category Styles
  */
-export interface ShapeAnnotation extends AnnotationBase {
-    /** Which kind of annotation this is: always "shape". */
+export interface ShapeAnnotation extends AnnotationBase, RotatedAnnotation {
+    /** What the annotation is: always `"shape"` for a shape. */
     readonly kind: "shape";
     /** The box's center. */
     readonly center: AnnotationPoint;
@@ -64,8 +73,8 @@ export interface ShapeAnnotation extends AnnotationBase {
  * A line of text.
  * @category Styles
  */
-export interface TextAnnotation extends AnnotationBase {
-    /** Which kind of annotation this is: always "text". */
+export interface TextAnnotation extends AnnotationBase, RotatedAnnotation {
+    /** What the annotation is: always `"text"` for a line of text. */
     readonly kind: "text";
     /** The text. */
     readonly text: string;
@@ -92,7 +101,7 @@ export interface TextAnnotation extends AnnotationBase {
  * @category Styles
  */
 export interface ArrowAnnotation extends AnnotationBase {
-    /** Which kind of annotation this is: always "arrow". */
+    /** What the annotation is: always `"arrow"` for an arrow. */
     readonly kind: "arrow";
     /** Where the line starts. */
     readonly from: AnnotationPoint;
@@ -112,6 +121,46 @@ export interface ArrowAnnotation extends AnnotationBase {
     readonly sourceSize: number;
     /** The end's arrowhead size as a factor of the normal size. */
     readonly targetSize: number;
+    /** The arrowhead color at the start. */
+    readonly sourceColor: StyleColor;
+    /** The arrowhead color at the end. */
+    readonly targetColor: StyleColor;
+    /**
+     * How long the start's arrowhead is along the line, in the units of the points, size included; absent, the
+     * drawing program's own length for the line's width.
+     */
+    readonly sourceHeadLength?: number;
+    /** How wide the start's arrowhead is across the line, as `sourceHeadLength` says. */
+    readonly sourceHeadWidth?: number;
+    /** How long the end's arrowhead is along the line, as `sourceHeadLength` says. */
+    readonly targetHeadLength?: number;
+    /** How wide the end's arrowhead is across the line, as `sourceHeadLength` says. */
+    readonly targetHeadWidth?: number;
+}
+
+/**
+ * A picture placed in a box, which `readImageAnnotations()` reads.
+ * @category Styles
+ */
+export interface ImageAnnotation extends AnnotationBase, RotatedAnnotation {
+    /** What the annotation is: always `"image"` for a picture. */
+    readonly kind: "image";
+    /** The box's center. */
+    readonly center: AnnotationPoint;
+    /** The box's width; the picture is stretched to it. */
+    readonly width: number;
+    /** The box's height. */
+    readonly height: number;
+    /** Where the picture is, as the file names it. */
+    readonly url: string;
+    /** The picture's opacity, 0..1. */
+    readonly opacity: number;
+    /** The outline's color. */
+    readonly borderColor: StyleColor;
+    /** The outline's opacity, 0..1 (0 draws none). */
+    readonly borderOpacity: number;
+    /** The outline's width (0 draws none). */
+    readonly borderWidth: number;
 }
 
 /**
@@ -151,11 +200,13 @@ const SHAPES: ReadonlyMap<string, StyleNodeShape> = new Map<string, StyleNodeSha
     ["parallelogram", "parallelogram"],
     ["star5", "star"],
     ["star6", "star"],
+    ["v", "vee"],
 ]);
 
 /**
- * Cytoscape's annotation arrowheads, by the position in its `ArrowType` list (older sessions) and by name (newer
- * ones), lowercase.
+ * Cytoscape's annotation arrowheads, by the number it saves (the declaration order of ding's
+ * `ArrowAnnotationImpl.ArrowType` in 3.10: Circle, Closed Arrow, Concave Arrow, Diamond, Open Arrow, No Arrow,
+ * X Arrow, Triangular Head, T-Shape) and by its display name, lowercase.
  */
 const ARROW_ORDER: readonly StyleArrowShape[] = [
     "circle",
@@ -164,13 +215,18 @@ const ARROW_ORDER: readonly StyleArrowShape[] = [
     "diamond",
     "triangle-open",
     "none",
-    "tee",
-    "triangle",
-    "triangle",
+    "other:x",
     "triangle",
     "tee",
-    "other:x",
 ];
+/**
+ * How long along its line each of Cytoscape's annotation arrowheads is drawn at size 1, by its `ArrowType` position,
+ * every one 10 wide whatever the line's width (measured on Cytoscape 3.10.5's SVG of `specimen-images-charts-p6`):
+ * the Closed, Concave, Diamond and Open Arrows 17, the Circle and the X 10, the Triangular Head 5, the T a bar across.
+ */
+const ARROW_LENGTHS: readonly number[] = [10, 17, 17, 17, 17, 0, 10, 5, 0];
+/** How wide across its line every Cytoscape annotation arrowhead is at size 1. */
+const ARROW_WIDTH = 10;
 const ARROW_NAMES: ReadonlyMap<string, StyleArrowShape> = new Map<string, StyleArrowShape>([
     ["circle", "circle"],
     ["closed arrow", "triangle"],
@@ -181,7 +237,10 @@ const ARROW_NAMES: ReadonlyMap<string, StyleArrowShape> = new Map<string, StyleA
     ["pipe", "tee"],
     ["triangle", "triangle"],
     ["t", "tee"],
+    ["t-shape", "tee"],
+    ["triangular head", "triangle"],
     ["x", "other:x"],
+    ["x arrow", "other:x"],
 ]);
 
 /**
@@ -209,6 +268,49 @@ export function readAnnotations(snapshot: GraphSnapshot): FileAnnotations {
     return { annotations, skipped: [...skipped] };
 }
 
+/**
+ * The pictures a graph's annotations place, from the column Cytoscape desktop keeps them in: the annotations
+ * `readAnnotations()` lists as skipped `ImageAnnotation`s.
+ * @param snapshot - the graph
+ * @returns the pictures, in the file's order; none when the graph has none
+ * @category Styles
+ */
+export function readImageAnnotations(snapshot: GraphSnapshot): ImageAnnotation[] {
+    const { graph } = snapshot;
+    const cell = graph.has(CYTOSCAPE_ANNOTATIONS_COLUMN) ? graph.value(CYTOSCAPE_ANNOTATIONS_COLUMN, 0) : null;
+    return cellStrings(cell).flatMap((entry, i) => {
+        const f = parseEntry(entry);
+        const url = f.get("URL") ?? "";
+        if ((f.get("type") ?? "").replace(TYPE_PREFIX, "") !== "ImageAnnotation" || url === "") {
+            return [];
+        }
+        const zoom = positive(f.get("zoom")) ?? 1;
+        const x = num(f.get("x")) ?? 0;
+        const y = num(f.get("y")) ?? 0;
+        const width = (positive(f.get("width")) ?? 0) / zoom;
+        const height = (positive(f.get("height")) ?? 0) / zoom;
+        const border = javaColor(f.get("edgeColor")) ?? { color: "#000000", alpha: 1 };
+        const opacity = num(f.get("opacity"));
+        return [
+            {
+                id: f.get("uuid") ?? String(i),
+                layer: f.get("canvas") === "background" ? "background" : "foreground",
+                z: num(f.get("z")) ?? 0,
+                kind: "image",
+                rotation: num(f.get("rotation")) ?? 0,
+                center: { x: x + width / 2, y: -(y + height / 2) },
+                width,
+                height,
+                url,
+                opacity: opacity === null ? 1 : Math.min(1, Math.max(0, opacity)),
+                borderColor: border.color,
+                borderOpacity: border.alpha * percent(f.get("edgeOpacity")),
+                borderWidth: (num(f.get("edgeThickness")) ?? 0) / zoom,
+            },
+        ];
+    });
+}
+
 /**
  * A cell's strings: a list cell's items, or the lines of a text cell.
  * @param cell - the cell
@@ -292,6 +394,7 @@ function shapeOf(f: ReadonlyMap<string, string>, base: AnnotationBase, zoom: num
     return {
         ...base,
         kind: "shape",
+        rotation: num(f.get("rotation")) ?? 0,
         center: { x: x + width / 2, y: -(y + height / 2) },
         width,
         height,
@@ -326,6 +429,7 @@ function textOf(
     return {
         ...base,
         kind: "text",
+        rotation: num(f.get("rotation")) ?? 0,
         text: f.get("text") ?? "",
         at,
         anchor,
@@ -340,9 +444,11 @@ function textOf(
 
 /**
  * An arrow annotation. Cytoscape keeps its start as the annotation it leaves (`sourceAnnotation`) and its end as a
- * point, a node's center at save time (`targetNode`) or another annotation, and saves the arrow's top-left corner
- * as `x`, `y`: the start wherever the end lies right of and below it, which is taken for the start, else the center
- * of the annotation it leaves.
+ * point (`targetPoint`), a node's center at save time (`targetNode`) or another annotation (`targetAnnotation`). It
+ * draws the line from the middle of the side of the source annotation's box that faces the end, to the end point or
+ * the middle of the facing side of the target annotation's box, at half the saved `lineThickness` and never under
+ * 1 (measured on Cytoscape 3.10.5's SVG of `specimen-images-charts-p6` and of the tutorial session). A source with
+ * no saved size (a text annotation) leaves from the arrow's saved `x`, `y` corner.
  * @param f - its fields
  * @param base - its id, layer and order
  * @param zoom - the zoom its line width was saved at
@@ -355,17 +461,26 @@ function arrowOf(
     zoom: number,
     byId: ReadonlyMap<string, ReadonlyMap<string, string>>,
 ): ArrowAnnotation[] | null {
-    const target = f.get("targetAnnotation");
-    const to = point(f.get("targetPoint")) ?? point(f.get("targetNode")) ?? centerOf(byId.get(target ?? ""), zoom);
-    if (to === null) {
+    const sourceBox = boxOf(byId.get(f.get("sourceAnnotation") ?? ""), zoom);
+    const targetBox = boxOf(byId.get(f.get("targetAnnotation") ?? ""), zoom);
+    const toPoint = point(f.get("targetPoint")) ?? point(f.get("targetNode"));
+    const corner = { x: num(f.get("x")) ?? 0, y: num(f.get("y")) ?? 0 };
+    const sourceCenter = sourceBox === null ? corner : centerOfBox(sourceBox);
+    const aim = toPoint ?? (targetBox === null ? null : centerOfBox(targetBox));
+    if (aim === null) {
         return null;
     }
-    const corner = { x: num(f.get("x")) ?? 0, y: num(f.get("y")) ?? 0 };
-    const source = centerOf(byId.get(f.get("sourceAnnotation") ?? ""), zoom) ?? corner;
-    // ponytail: the start is exact only when the end lies right of and below it; elsewhere the center of the
-    // annotation it leaves, as Cytoscape stores no other start. Clip to that annotation's box if it matters.
-    const from = { x: to.x > corner.x ? corner.x : source.x, y: to.y > corner.y ? corner.y : source.y };
+    // a source with no saved size (a text) leaves from the arrow's saved top-left corner where the end lies right of
+    // and below it, else from the source's corner: the file keeps no other trace of where the text was drawn
+    const from =
+        sourceBox !== null && sourceBox.width > 0 && sourceBox.height > 0
+            ? facing(sourceBox, aim)
+            : { x: aim.x > corner.x ? corner.x : sourceCenter.x, y: aim.y > corner.y ? corner.y : sourceCenter.y };
+    // ponytail: a node end stops at its center; Cytoscape stops at the node's box, which needs the node's size
+    const to = toPoint ?? facing(targetBox ?? { x: aim.x, y: aim.y, width: 0, height: 0 }, sourceCenter);
     const color = javaColor(f.get("lineColor")) ?? { color: "#000000", alpha: 1 };
+    const sourceColor = javaColor(f.get("sourceColor"))?.color ?? color.color;
+    const targetColor = javaColor(f.get("targetColor"))?.color ?? color.color;
     return [
         {
             ...base,
@@ -374,22 +489,55 @@ function arrowOf(
             to: { x: to.x, y: -to.y },
             color: color.color,
             opacity: color.alpha * percent(f.get("lineOpacity")),
-            width: (positive(f.get("lineThickness")) ?? 1) / zoom,
+            width: Math.max(1, (positive(f.get("lineThickness")) ?? 1) / zoom / 2),
             sourceArrow: arrowShape(f.get("sourceType")),
             targetArrow: arrowShape(f.get("targetType")),
             sourceSize: positive(f.get("sourceSize")) ?? 1,
             targetSize: positive(f.get("targetSize")) ?? 1,
+            sourceColor,
+            targetColor,
+            ...heads("source", f.get("sourceType"), positive(f.get("sourceSize")) ?? 1),
+            ...heads("target", f.get("targetType"), positive(f.get("targetSize")) ?? 1),
         },
     ];
 }
 
 /**
- * An annotation's center, y down as the file writes it: a shape's box center, a text's corner.
+ * The length and width Cytoscape draws one end's arrowhead at: its type's length and 10 across, times its size.
+ * @param end - which end
+ * @param type - the end's saved `ArrowType`, a position or a name
+ * @param size - the end's saved size
+ * @returns the end's head length and width, none for an end without a head
+ */
+function heads(
+    end: "source" | "target",
+    type: string | undefined,
+    size: number,
+): Partial<Pick<ArrowAnnotation, "sourceHeadLength" | "sourceHeadWidth" | "targetHeadLength" | "targetHeadWidth">> {
+    const shape = arrowShape(type);
+    if (shape === "none") {
+        return {};
+    }
+    const k = num(type) ?? ARROW_ORDER.indexOf(shape);
+    const length = ARROW_LENGTHS[k] ?? ARROW_LENGTHS[1];
+    return { [`${end}HeadLength`]: length * size, [`${end}HeadWidth`]: ARROW_WIDTH * size };
+}
+
+/** An annotation's box as the file writes it: top-left corner, y down. */
+interface FileBox {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+
+/**
+ * An annotation's box, y down as the file writes it.
  * @param f - its fields, or undefined
  * @param zoom - the zoom the arrow was saved at
- * @returns the point, or null
+ * @returns the box, or null
  */
-function centerOf(f: ReadonlyMap<string, string> | undefined, zoom: number): AnnotationPoint | null {
+function boxOf(f: ReadonlyMap<string, string> | undefined, zoom: number): FileBox | null {
     if (f === undefined) {
         return null;
     }
@@ -398,7 +546,33 @@ function centerOf(f: ReadonlyMap<string, string> | undefined, zoom: number): Ann
     if (x === null || y === null) {
         return null;
     }
-    return { x: x + (positive(f.get("width")) ?? 0) / zoom / 2, y: y + (positive(f.get("height")) ?? 0) / zoom / 2 };
+    return { x, y, width: (positive(f.get("width")) ?? 0) / zoom, height: (positive(f.get("height")) ?? 0) / zoom };
+}
+
+/**
+ * A box's center.
+ * @param b - the box
+ * @returns the center
+ */
+function centerOfBox(b: FileBox): AnnotationPoint {
+    return { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+}
+
+/**
+ * The middle of the side of a box that faces a point: a left or right side when the point lies more across than
+ * along, against the box's own proportions, else the top or bottom.
+ * @param b - the box
+ * @param p - the point
+ * @returns the side's middle
+ */
+function facing(b: FileBox, p: AnnotationPoint): AnnotationPoint {
+    const c = centerOfBox(b);
+    const dx = p.x - c.x;
+    const dy = p.y - c.y;
+    if (Math.abs(dx) * b.height >= Math.abs(dy) * b.width) {
+        return { x: c.x + Math.sign(dx) * (b.width / 2), y: c.y };
+    }
+    return { x: c.x, y: c.y + Math.sign(dy) * (b.height / 2) };
 }
 
 /**

package/src/styles/canon/bends.ts

@@ -82,3 +82,140 @@ export function bendsToPoints(source: BendPoint, target: BendPoint, value: strin
     }
     return out.length === 0 ? null : out;
 }
+
+/**
+ * The points a piecewise cubic Bezier curve passes through, sampled evenly in its parameter: the first control point,
+ * then `steps` points along each segment, its last control point included. The input is `3n + 1` control points
+ * (a Graphviz spline, a cubic path), each segment sharing its first point with the one before.
+ * @param controls - the control points
+ * @param steps - how many points each segment is sampled at
+ * @returns the points, or null when the count is not `3n + 1` for some n >= 1
+ * @category Styles
+ */
+export function flattenCubic(controls: readonly BendPoint[], steps = 8): BendPoint[] | null {
+    if (controls.length < 4 || (controls.length - 1) % 3 !== 0) {
+        return null;
+    }
+    const out: BendPoint[] = [controls[0]];
+    for (let s = 0; s + 3 < controls.length; s += 3) {
+        const [p0, p1, p2, p3] = controls.slice(s, s + 4);
+        for (let k = 1; k <= steps; k++) {
+            const t = k / steps;
+            const u = 1 - t;
+            const w = [u * u * u, 3 * u * u * t, 3 * u * t * t, t * t * t];
+            out.push([
+                w[0] * p0[0] + w[1] * p1[0] + w[2] * p2[0] + w[3] * p3[0],
+                w[0] * p0[1] + w[1] * p1[1] + w[2] * p2[1] + w[3] * p3[1],
+            ]);
+        }
+    }
+    return out;
+}
+
+/**
+ * Points placed on and around one node, each relative to its center as fractions of its half width and half height,
+ * y up: `"1,0"` is the middle of its right side, `"0,1"` the middle of its top. The value of an edge end's port
+ * (`sourcePort`, `targetPort`) and of a self-loop's `bends`, which have no line between two centers to be relative
+ * to. Relative to the node's size, so a drawing that draws the node larger keeps the point on the same spot.
+ * @param center - the node's center
+ * @param size - its width and height
+ * @param points - the points
+ * @param yDown - true when the file's y axis points down (the value is always y up)
+ * @returns the value, or null with no points, a size that is not positive, or a coordinate that is not finite
+ * @category Styles
+ */
+export function canonNodeOffsets(
+    center: BendPoint,
+    size: BendPoint,
+    points: readonly BendPoint[],
+    yDown: boolean,
+): string | null {
+    const [hw, hh] = [size[0] / 2, size[1] / 2];
+    if (points.length === 0 || Number.isNaN(hw + hh) || hw <= 0 || hh <= 0) {
+        return null;
+    }
+    const flip = yDown ? -1 : 1;
+    const out: string[] = [];
+    for (const [px, py] of points) {
+        const x = (px - center[0]) / hw;
+        const y = ((py - center[1]) * flip) / hh;
+        if (!Number.isFinite(x) || !Number.isFinite(y)) {
+            return null;
+        }
+        out.push(`${fraction(x)},${fraction(y)}`);
+    }
+    return out.join(" ");
+}
+
+/**
+ * The points a node-relative value places around a node: the inverse of {@link canonNodeOffsets}.
+ * @param center - the node's center
+ * @param size - its width and height
+ * @param value - the value
+ * @param yDown - true when the points are wanted in a y-down file's coordinates
+ * @returns the points, or null when the value is not `x,y` pairs or a coordinate is not finite
+ * @category Styles
+ */
+export function nodeOffsetsToPoints(
+    center: BendPoint,
+    size: BendPoint,
+    value: string,
+    yDown: boolean,
+): BendPoint[] | null {
+    const flip = yDown ? -1 : 1;
+    const out: BendPoint[] = [];
+    for (const pair of value.trim().split(/\s+/)) {
+        const [a, b, extra] = pair.split(",").map(Number);
+        const x = center[0] + (a * size[0]) / 2;
+        const y = center[1] + (b * size[1] * flip) / 2;
+        if (extra !== undefined || !Number.isFinite(x) || !Number.isFinite(y)) {
+            return null;
+        }
+        out.push([x, y]);
+    }
+    return out.length === 0 ? null : out;
+}
+
+/**
+ * The points a quadratic spline passes through, as yEd draws a quad curve edge: its first and last control points are
+ * the ends, every control point between them pulls the curve without lying on it, and the curve runs from the middle
+ * of the leg before such a point to the middle of the leg after it (from the end itself on the first and last legs).
+ * `straightness` (0..1) keeps that share of every leg straight, so each curved piece covers only the part of its two
+ * legs nearest its control point: 0 is the smooth spline, 1 the control polygon.
+ * @param controls - the control points, ends included
+ * @param straightness - how straight the legs stay, 0..1
+ * @param steps - how many points each curved piece is sampled at
+ * @returns the points, ends included; the controls themselves with fewer than three
+ * @category Styles
+ */
+export function flattenQuadSpline(controls: readonly BendPoint[], straightness: number, steps = 8): BendPoint[] {
+    if (controls.length < 3) {
+        return [...controls];
+    }
+    const s = Math.min(1, Math.max(0, Number.isFinite(straightness) ? straightness : 0));
+    const lerp = (a: BendPoint, b: BendPoint, t: number): BendPoint => [
+        a[0] + (b[0] - a[0]) * t,
+        a[1] + (b[1] - a[1]) * t,
+    ];
+    const last = controls.length - 1;
+    const out: BendPoint[] = [controls[0]];
+    for (let i = 1; i < last; i++) {
+        const c = controls[i];
+        // the joins either side: the middle of each leg, or the end itself on the first and last
+        const before = i === 1 ? controls[0] : lerp(controls[i - 1], c, 0.5);
+        const after = i === last - 1 ? controls[last] : lerp(c, controls[i + 1], 0.5);
+        const from = lerp(c, before, 1 - s);
+        const to = lerp(c, after, 1 - s);
+        for (let k = 0; k <= steps; k++) {
+            const t = k / steps;
+            const u = 1 - t;
+            out.push([
+                u * u * from[0] + 2 * u * t * c[0] + t * t * to[0],
+                u * u * from[1] + 2 * u * t * c[1] + t * t * to[1],
+            ]);
+        }
+    }
+    out.push(controls[last]);
+    // a piece that starts where the one before ends (straightness 0) repeats the join
+    return out.filter((p, k) => k === 0 || p[0] !== out[k - 1][0] || p[1] !== out[k - 1][1]);
+}

package/src/styles/canon/color-tables.ts

@@ -169,11 +169,19 @@ export const X11_COLORS: ReadonlyMap<string, string> = table(
         "tomato3=cd4f39 tomato4=8b3626 turquoise=40e0d0 turquoise1=00f5ff turquoise2=00e5ee turquoise3=00c5cd " +
         "turquoise4=00868b violet=ee82ee violetred=d02090 violetred1=ff3e96 violetred2=ee3a8c violetred3=cd3278 " +
         "violetred4=8b2252 wheat=f5deb3 wheat1=ffe7ba wheat2=eed8ae wheat3=cdba96 wheat4=8b7e66 white=ffffff " +
+        // added in later Graphviz releases (measured on 14.1.2): the web and X11 spellings of the five clashing names
+        "webgray=808080 webgreen=008000 webgrey=808080 webmaroon=800000 webpurple=800080 x11gray=bebebe " +
+        "x11green=00ff00 x11grey=bebebe x11maroon=b03060 x11purple=a020f0 " +
         "whitesmoke=f5f5f5 yellow=ffff00 yellow1=ffff00 yellow2=eeee00 yellow3=cdcd00 yellow4=8b8b00 " +
         "yellowgreen=9acd32",
 );
 
-/** dvips names, case as Pajek spells them. */
+/**
+ * dvips names, case as Pajek spells them, and the ten Pajek adds (from LightYellow on: Pajek 6.02 manual, figure 19,
+ * with the CMYK values of the color dictionary in Pajek's own EPS export). LightOrange is the one its SVG export draws
+ * otherwise: #ffd9bc, Pajek's default vertex fill, not the EPS dictionary's #ffccb3 (`pajek-specimen-node-fills-borders-p2`
+ * `ic-lightorange`, `pajek-graphstream-b`: 18 vertices).
+ */
 export const DVIPS_COLORS: ReadonlyMap<string, string> = table(
     "GreenYellow=d9ff4f Yellow=ffff00 Goldenrod=ffe629 Dandelion=ffb529 Apricot=ffad7a Peach=ff804d " +
         "Melon=ff8a80 YellowOrange=ff9400 Orange=ff6321 BurntOrange=ff7d00 Bittersweet=c20300 RedOrange=ff3b21 " +
@@ -187,10 +195,8 @@ export const DVIPS_COLORS: ReadonlyMap<string, string> = table(
         "JungleGreen=03ff7a SeaGreen=4fff80 Green=00ff00 ForestGreen=00e000 PineGreen=00bf29 LimeGreen=80ff00 " +
         "YellowGreen=8fff42 SpringGreen=bdff3d OliveGreen=009900 RawSienna=8c0000 Sepia=4d0000 Brown=660000 " +
         "Tan=db9470 Gray=808080 Black=000000 White=ffffff " +
-        // Pajek's own names, not in dvips: the RGB fill of each swatch in the Pajek 6.02 manual, Figure 19, p. 105
-        // (http://mrvar.fdv.uni-lj.si/pajek/pajekman.pdf); Pajek's SVG export draws LightCyan as rgb(204,255,255) too.
         "LightYellow=ffff99 LightCyan=ccffff LightMagenta=ffccff LightPurple=ccccff LightGreen=ccffb3 " +
-        "LightOrange=ffccb3 Canary=ffff7f LFadedGreen=e6ffcc Pink=ffd9f3 LSkyBlue=d9f3ff",
+        "LightOrange=ffd9bc Canary=ffff80 LFadedGreen=e6ffcc Pink=ffd9f2 LSkyBlue=d9f2ff",
 );
 
 /** Java's `java.awt.Color` constants, lowercase, with and without the underscore. */

package/src/styles/canon/color.ts

@@ -405,6 +405,76 @@ function cssColor(text: string): { hex: StyleColor; alpha: number } | null {
     return hexColor(text, false) ?? cssFunction(text);
 }
 
+/**
+ * sigma.js's `rgb()` / `rgba()` reader (sigma/utils parseColor, the regex
+ * `^\s*rgba?\s*\(\s*(\d*)\s*,\s*(\d*)\s*,\s*(\d*)(?:\s*,\s*(.*)?)?\)\s*$`), read without backtracking: integer
+ * channels, no space before the `)` unless an alpha follows, the alpha on one line.
+ * @param text - the value
+ * @returns the three channels' digits and the alpha's text (empty when none), or null
+ */
+function sigmaRgba(text: string): [string, string, string, string] | null {
+    const t = text.trim();
+    const head = /^rgba?\s*\(/.exec(t);
+    if (head === null || !t.endsWith(")")) {
+        return null;
+    }
+    const parts = t.slice(head[0].length, -1).split(",");
+    if (parts.length < 3) {
+        return null;
+    }
+    const alpha = parts.slice(3).join(",").trimStart();
+    // the third channel runs up to the `)` when no alpha follows it
+    const third = parts.length > 3 ? parts[2].trim() : parts[2].trimStart();
+    const channels = [parts[0].trim(), parts[1].trim(), third];
+    if (!channels.every((c) => /^\d*$/.test(c)) || /[\n\r\u2028\u2029]/.test(alpha)) {
+        return null;
+    }
+    return [channels[0], channels[1], channels[2], alpha];
+}
+
+/**
+ * A color as sigma.js 4.0.1 reads it (sigma/utils parseColor), untrimmed: `transparent`, the 148 HTML color names in
+ * any case, `#rgb`, `#rrggbb` and `#rrggbbaa` (any other length is read two digits a channel, so `#f80c` is
+ * `#f80c00`), and `rgb()` / `rgba()` with integer channels. Anything else, the empty string included, is black.
+ * @param text - the value as the file has it
+ * @returns the color and its alpha, and whether sigma read it as a color (else it is black, or garbled)
+ */
+function sigmaColor(text: string): { color: StyleColor; alpha: number; read: boolean } {
+    const lower = text.toLowerCase();
+    if (lower === "transparent") {
+        return { color: "#000000", alpha: 0, read: true };
+    }
+    const named = CSS_COLORS.get(lower);
+    if (named !== undefined) {
+        return sigmaColor(named);
+    }
+    let rgb = [0, 0, 0];
+    let a = 1;
+    let read = false;
+    if (text.startsWith("#")) {
+        read = /^#(?:[\da-f]{3}|[\da-f]{6}|[\da-f]{8})$/i.test(text);
+        const at = text.length === 4 ? [1, 1, 2, 2, 3, 3] : [1, 2, 3, 4, 5, 6];
+        // parseInt reads a leading run of hex digits; NaN (no digit) is stored as 0
+        rgb = [0, 2, 4].map((k) => Number.parseInt(text.charAt(at[k]) + text.charAt(at[k + 1]), 16) || 0);
+        if (text.length === 9) {
+            a = Number.parseInt(text.slice(7, 9), 16) / 255;
+        }
+    } else {
+        const m = sigmaRgba(text);
+        if (m !== null) {
+            read = true;
+            rgb = [Number(m[0]), Number(m[1]), Number(m[2])];
+            if (m[3]) {
+                a = Number(m[3]);
+            }
+        }
+    }
+    // sigma packs each channel into a byte (ponytail: a channel over 255 wraps here; sigma lets it spill into the
+    // next channel)
+    const [r, g, b] = rgb.map((v) => v & 255);
+    return { color: rgbHex(r, g, b), alpha: ((a * 255) & 255) / 255, read };
+}
+
 /** One of Pajek's decimal color channels in `RGB(1,0.8,0)`: 0..1, no spaces (Pajek 6.02 manual p. 76). */
 const PAJEK_CHANNEL = /^(?:\d+(?:\.\d*)?|\.\d+)$/;
 
@@ -478,9 +548,11 @@ function channels(raw: object): { hex: StyleColor; alpha: number } | null {
 /**
  * A canonical color in the file's dialect, or null with a note.
  *
- * - CSS (`css`, `vis`, `graphology`, `cytoscape-js`, `graphty` and any dialect not listed): `#rgb`, `#rgba`,
+ * - CSS (`css`, `vis`, `cytoscape-js`, `graphty` and any dialect not listed): `#rgb`, `#rgba`,
  *   `#rrggbb`, `#rrggbbaa`, `rgb()`, `rgba()`, `hsl()`, `hsla()`, CSS names and `transparent`, resolved as
  *   graphty-element resolves them (out-of-range channels are gamut mapped).
+ * - `graphology`: sigma.js's own parser (see `sigmaColor`); a string it cannot read is BLACK, with a note, because
+ *   that is what sigma draws, and a value that is not a string is null (sigma throws on it).
  * - `graphviz`: Graphviz's own rules (see `graphvizColor`); an unknown color is BLACK, with a note, because that is
  *   what Graphviz draws. `x11`: the same names, and an unknown one is null.
  * - `java`, `gephi`, `cytoscape`: the `java.awt.Color` names first, then CSS; a `java` integer is an RGB value.
@@ -511,6 +583,12 @@ export function canonColor(
         const v = raw >>> 0;
         return { color: rgbHex((v >>> 16) & 255, (v >>> 8) & 255, v & 255), alpha: 1 };
     }
+    if (dialect === "graphology" && typeof raw === "string" && raw.trim() === "") {
+        // sigma draws a blank color black, where every other reader has no color
+        spendAt(site, 1);
+        noteAt(site, STYLE_ISSUE.BAD_VALUE, raw);
+        return { color: "#000000", alpha: 1 };
+    }
     const text = scalarText(raw, site);
     if (text === null) {
         return null;
@@ -518,6 +596,9 @@ export function canonColor(
     if (dialect === "graphviz" || dialect === "x11") {
         return graphvizCanon(text, dialect === "x11" ? "x11" : "graphviz", site, options);
     }
+    if (dialect === "graphology") {
+        return graphologyColor(raw, text, site);
+    }
     const c = textColor(text.trim(), dialect);
     if (c === null) {
         noteAt(site, STYLE_ISSUE.BAD_VALUE, text);
@@ -526,6 +607,26 @@ export function canonColor(
     return { color: c.hex, alpha: c.alpha };
 }
 
+/**
+ * A graphology color as sigma.js draws it; a value that is not a string is no color, as sigma throws drawing it.
+ * @param raw - the file's value
+ * @param text - the value as text
+ * @param site - where it was read
+ * @returns the color and its alpha, or null
+ */
+function graphologyColor(raw: unknown, text: string, site: CanonSite): CanonColor | null {
+    if (typeof raw !== "string") {
+        // sigma throws while drawing a color that is not a string
+        noteAt(site, STYLE_ISSUE.BAD_VALUE, text);
+        return null;
+    }
+    const c = sigmaColor(text);
+    if (!c.read) {
+        noteAt(site, STYLE_ISSUE.BAD_VALUE, text);
+    }
+    return { color: c.color, alpha: c.alpha };
+}
+
 /**
  * A color given as an object: only GEXF and Gephi write one, as channels.
  * @param raw - the object
@@ -557,10 +658,11 @@ function graphvizCanon(
     site: CanonSite,
     options: CanonColorOptions,
 ): CanonColor | null {
-    const g = graphvizColor(text, dialect === "x11" ? null : (options.scheme ?? null), options.use ?? "line");
+    const x11 = dialect === "x11";
+    const g = graphvizColor(text, x11 ? null : (options.scheme ?? null), options.use ?? "line", !x11);
     if (g.unknown) {
         noteAt(site, STYLE_ISSUE.BAD_VALUE, text);
-        if (dialect === "x11") {
+        if (x11) {
             return null;
         }
     }