@graphty/graph-io 0.3.48 → 0.3.50

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;
         }
     }

package/src/styles/canon/enums.ts

@@ -1,7 +1,7 @@
 /**
  * Canonical enumeration values: each dialect's spellings matched against an alias table without regard to case,
  * spaces or underscores. An unknown value of an open enumeration (shapes, border and line styles, arrows) is kept as
- * `other:<raw>` and noted; an unknown value of a closed one (weights, positions) gives no value and is noted.
+ * `other:<raw>` and noted; an unknown value of a closed one (weights, positions, label fits) gives no value and is noted.
  */
 
 import { STYLE_ISSUE } from "../codes.js";
@@ -12,7 +12,17 @@ import { type CanonSite, noteAt, scalarText } from "./site.js";
  * The enumerations a style value can belong to.
  * @category Styles
  */
-export type StyleEnumKind = "shape" | "borderStyle" | "lineStyle" | "arrow" | "weight" | "position";
+export type StyleEnumKind =
+    | "shape"
+    | "borderStyle"
+    | "borderPosition"
+    | "lineStyle"
+    | "arrow"
+    | "arrowSide"
+    | "weight"
+    | "position"
+    | "labelFit"
+    | "textAlign";
 
 type Aliases = Readonly<Record<string, readonly string[]>>;
 
@@ -55,16 +65,34 @@ const SHAPES: Aliases = {
         "roundedrectangle",
         "round-rect",
         "mrecord",
-        "cut-rectangle",
         "round-tag",
         "bottom-round-rectangle",
+        "bottomroundrectangle",
     ],
     triangle: ["triangle", "invtriangle", "round-triangle", "tag"],
     diamond: ["diamond", "rhombus", "mdiamond", "round-diamond"],
     pentagon: ["pentagon", "round-pentagon"],
-    hexagon: ["hexagon", "hexagon2", "round-hexagon", "concave-hexagon", "septagon", "heptagon", "round-heptagon"],
-    octagon: ["octagon", "doubleoctagon", "tripleoctagon", "round-octagon", "octagon2"],
-    parallelogram: ["parallelogram", "parallelogram2", "rhomboid", "fat-arrow", "fatarrow"],
+    hexagon: [
+        "hexagon",
+        "hexagon2",
+        "round-hexagon",
+        "concave-hexagon",
+        "concavehexagon",
+        "septagon",
+        "heptagon",
+        "round-heptagon",
+    ],
+    // a cut rectangle is a rectangle with its four corners cut off: eight sides
+    octagon: [
+        "octagon",
+        "doubleoctagon",
+        "tripleoctagon",
+        "round-octagon",
+        "octagon2",
+        "cut-rectangle",
+        "cutrectangle",
+    ],
+    parallelogram: ["parallelogram", "parallelogram2", "rhomboid", "right-rhomboid", "fat-arrow", "fatarrow"],
     trapezoid: ["trapezoid", "trapezoid2", "invtrapezoid", "trapezium", "round-trapezoid"],
     star: ["star", "star5", "star6", "star8", "polygon"],
     vee: ["vee", "v"],
@@ -136,6 +164,35 @@ const POSITIONS: Aliases = {
     "bottom-left": ["bottom-left", "south-west", "southwest"],
     "bottom-right": ["bottom-right", "south-east", "southeast"],
     "inside-top": ["inside-top"],
+    "inside-bottom": ["inside-bottom"],
+    "inside-left": ["inside-left"],
+    "inside-right": ["inside-right"],
+    "inside-top-left": ["inside-top-left"],
+    "inside-top-right": ["inside-top-right"],
+    "inside-bottom-left": ["inside-bottom-left"],
+    "inside-bottom-right": ["inside-bottom-right"],
+};
+
+const BORDER_POSITIONS: Aliases = {
+    inside: ["inside"],
+    center: ["center", "centre", "middle"],
+    outside: ["outside"],
+};
+
+const ARROW_SIDES: Aliases = {
+    left: ["left"],
+    right: ["right"],
+};
+
+const TEXT_ALIGNS: Aliases = {
+    left: ["left", "start"],
+    center: ["center", "centre", "middle"],
+    right: ["right", "end"],
+};
+
+const LABEL_FITS: Aliases = {
+    inside: ["inside"],
+    bounds: ["bounds"],
 };
 
 /** vis-network draws these spellings differently from the common reading. */
@@ -146,11 +203,49 @@ const VIS: Partial<Record<StyleEnumKind, Aliases>> = {
         triangle: ["triangledown"],
         none: ["text"],
     },
-    arrow: { inverted: ["inv-triangle"], square: ["box"] },
+    // curve and inv_curve: an arc at the end, bulging toward the node and away from it
+    arrow: { inverted: ["inv-triangle"], square: ["box"], "other:curve": ["curve"], "other:inv-curve": ["inv-curve"] },
+};
+
+/**
+ * Cytoscape.js's compound arrows (https://js.cytoscape.org/#style/edge-arrow): a triangle with a bar behind it, with a
+ * thin bar across the line behind it, a dot with a triangle behind it and its short chevron each keep their own name;
+ * its triangle-backcurve is a triangle whose back is hollowed out, which is how a vee is drawn.
+ */
+const CYJS: Partial<Record<StyleEnumKind, Aliases>> = {
+    arrow: {
+        "other:triangle-tee": ["triangle-tee"],
+        "other:triangle-cross": ["triangle-cross"],
+        "other:circle-triangle": ["circle-triangle"],
+        // a vee two thirds as long as its triangle (0.2 of the arrow width against 0.3)
+        "other:chevron": ["chevron"],
+        vee: ["triangle-backcurve"],
+    },
+};
+
+/**
+ * Graphviz's curve and icurve (lib/common/arrows.c arrow_type_curve): a stem to the tip with an arc across it, bulging
+ * toward the tip and, inverted, away from it -- vis-network's curve and inv_curve.
+ */
+const GRAPHVIZ: Partial<Record<StyleEnumKind, Aliases>> = {
+    arrow: { "other:curve": ["curve"], "other:inv-curve": ["icurve"] },
+};
+
+/**
+ * yEd's (yFiles for Java's) STANDARD arrow is "a triangle with impressed bottom side", a notched arrow; its DELTA is the
+ * plain triangle (https://docs.yworks.com/yfiles/doc/api/y/view/Arrow.html).
+ */
+const YED: Partial<Record<StyleEnumKind, Aliases>> = {
+    arrow: { vee: ["standard"] },
 };
 
 /** Per-dialect overrides; a dialect not listed reads the common table alone. */
-const OVERRIDES: ReadonlyMap<string, Partial<Record<StyleEnumKind, Aliases>>> = new Map([["vis", VIS]]);
+const OVERRIDES: ReadonlyMap<string, Partial<Record<StyleEnumKind, Aliases>>> = new Map([
+    ["vis", VIS],
+    ["graphviz", GRAPHVIZ],
+    ["cytoscape-js", CYJS],
+    ["yed", YED],
+]);
 
 const OPEN: ReadonlySet<StyleEnumKind> = new Set<StyleEnumKind>(["shape", "borderStyle", "lineStyle", "arrow"]);
 
@@ -174,8 +269,12 @@ const COMMON: ReadonlyMap<StyleEnumKind, ReadonlyMap<string, string>> = new Map(
     ["borderStyle", lookup(BORDER_STYLES)],
     ["lineStyle", lookup(LINE_STYLES)],
     ["arrow", lookup(ARROWS)],
+    ["arrowSide", lookup(ARROW_SIDES)],
     ["weight", lookup(WEIGHTS)],
     ["position", lookup(POSITIONS)],
+    ["labelFit", lookup(LABEL_FITS)],
+    ["borderPosition", lookup(BORDER_POSITIONS)],
+    ["textAlign", lookup(TEXT_ALIGNS)],
 ]);
 
 const DIALECT: ReadonlyMap<string, ReadonlyMap<StyleEnumKind, ReadonlyMap<string, string>>> = new Map(

package/src/styles/canon/graphviz.ts

@@ -12,6 +12,13 @@
  *   scheme knows no names at all.
  * - `transparent`, `none` and `invis` are `#fffffe` with alpha 0, whatever the scheme.
  * - An unknown color is drawn BLACK.
+ * - A bare name SVG knows (`gray`, `purple`, `green`, `maroon`, `crimson` ...), not in a `/scheme/` and with no
+ *   leading blanks, is drawn as the SVG color, whatever the scheme: Graphviz's SVG output writes such a name as it is
+ *   (`fill="gray"`, gvrender_resolve_color) and every SVG reader draws it as CSS does, so `gray` is #808080 there,
+ *   not X11's #c0c0c0. The SVG drawing is the one we read Graphviz by.
+ * - An outline or font color list whose first entry is such a name is written whole (`stroke="red:blue"`: Graphviz
+ *   resolves the first entry in place and puts the `:` back), which no SVG reader can draw: an outline is not drawn
+ *   and a text is black, SVG's own default.
  * - A color list (`red:blue`, `red;0.3:blue`): an outline or a font color draws the text before the first `:` as one
  *   color, so `red:blue` is red and `red;0.3:blue` is black (`red;0.3` is not a color). A fill draws a gradient and
  *   an edge draws one line per color; both start with the first entry's color, its `;fraction` dropped. A value
@@ -24,7 +31,7 @@ import { BREWER_SCHEMES, CSS_COLORS, X11_COLORS } from "./color-tables.js";
  * How Graphviz draws a color value, which decides how a color list is read.
  * @category Styles
  */
-export type GraphvizColorUse = "line" | "fill" | "edge";
+export type GraphvizColorUse = "line" | "text" | "fill" | "edge";
 
 /**
  * A resolved Graphviz color, with how it was read.
@@ -159,30 +166,84 @@ function schemeColor(name: string, scheme: string): string | undefined {
     return colors !== undefined && index >= 1 ? colors[index - 1] : undefined;
 }
 
+/**
+ * A color list whose first color is a bare SVG name, as Graphviz's SVG output draws it for a pen: no outline, black
+ * text.
+ * @param use - `line` or `text`
+ * @returns the color
+ */
+function svgPenList(use: GraphvizColorUse): GraphvizColor {
+    return use === "line"
+        ? { hex: "#fffffe", alpha: 0, unknown: false, list: null }
+        : { hex: "#000000", alpha: 1, unknown: false, list: null };
+}
+
+/**
+ * A color list entry without its `;fraction`.
+ * @param text - the entry
+ * @returns the color part
+ */
+function beforeSemicolon(text: string): string {
+    const semi = text.indexOf(";");
+    return semi >= 0 ? text.slice(0, semi) : text;
+}
+
+/**
+ * One Graphviz color, read from its scheme (X11 when none), a bare SVG name first when `svgNames` says so.
+ * @param raw - the whole value
+ * @param text - the color, without the list after it
+ * @param scheme - the object's `colorscheme`, or null
+ * @param svgNames - whether a bare SVG name is drawn as SVG's color
+ * @returns the color, or null when it is unknown
+ */
+function resolveColorText(
+    raw: string,
+    text: string,
+    scheme: string | null,
+    svgNames: boolean,
+): { hex: string; alpha: number } | null {
+    const svgName = svgNames && raw.startsWith(text) ? CSS_COLORS.get(text.toLowerCase()) : undefined;
+    if (svgName !== undefined) {
+        return { hex: svgName, alpha: 1 };
+    }
+    if (text === "") {
+        return null;
+    }
+    const sc = scheme === null || scheme.trim() === "" ? "x11" : scheme.toLowerCase();
+    return resolveOne(text, sc);
+}
+
 /**
  * Resolves a Graphviz color value the way Graphviz draws it for a use; an unknown color is black.
  * @param raw - the value, at most 256 characters
  * @param scheme - the object's `colorscheme`, or null
- * @param use - an outline or font color (`line`), a fill, or an edge's line color
+ * @param use - an outline color (`line`), a font color (`text`), a fill, or an edge's line color
+ * @param svgNames - whether a bare SVG name is drawn as SVG's color, as Graphviz's SVG output draws it (false: as
+ * every other Graphviz output draws it)
  * @returns the color and how it was read
  * @category Styles
  */
-export function graphvizColor(raw: string, scheme: string | null, use: GraphvizColorUse): GraphvizColor {
+export function graphvizColor(
+    raw: string,
+    scheme: string | null,
+    use: GraphvizColorUse,
+    svgNames = true,
+): GraphvizColor {
     let text = raw.replace(/^[ \t\r\n]+/, "");
     let list: GraphvizColor["list"] = null;
     const colon = text.indexOf(":");
+    const pen = use === "line" || use === "text";
     if (colon >= 0) {
         text = text.slice(0, colon);
-        if (use !== "line") {
-            const semi = text.indexOf(";");
-            if (semi >= 0) {
-                text = text.slice(0, semi);
-            }
+        if (svgNames && pen && raw.startsWith(text) && CSS_COLORS.has(text.toLowerCase())) {
+            return svgPenList(use);
+        }
+        if (!pen) {
+            text = beforeSemicolon(text);
             list = use === "fill" ? "gradient" : "lines";
         }
     }
-    const sc = scheme === null || scheme.trim() === "" ? "x11" : scheme.toLowerCase();
-    const resolved = text === "" ? null : resolveOne(text, sc);
+    const resolved = resolveColorText(raw, text, scheme, svgNames);
     return resolved === null
         ? { hex: "#000000", alpha: 1, unknown: true, list }
         : { hex: resolved.hex, alpha: resolved.alpha, unknown: false, list };

package/src/styles/canon/number.ts

@@ -82,6 +82,25 @@ export function canonNumber(raw: unknown, site: CanonSite, factor = 1): number |
     return num6(scaled);
 }
 
+/**
+ * A signed number (an offset): any finite value within the largest a style number may be, either way.
+ * @param raw - the file's value
+ * @param site - where it was read
+ * @returns the canonical number, or null (noted)
+ * @category Styles
+ */
+export function canonSigned(raw: unknown, site: CanonSite): number | null {
+    const value = finite(raw, site);
+    if (value === null) {
+        return null;
+    }
+    if (Math.abs(value) > MAX_STYLE_NUMBER) {
+        noteAt(site, STYLE_ISSUE.BAD_VALUE, typeof raw === "string" ? raw : String(raw));
+        return null;
+    }
+    return num6(value);
+}
+
 /**
  * An opacity from 0 to 1. Cytoscape desktop states opacities from 0 to 255 and is divided by 255; every other
  * dialect states 0 to 1. A value outside the dialect's range is null with a `W_STYLE_BAD_VALUE` note.