@graphty/graph-io 0.3.48 → 0.3.50

package/src/styles/cyjs/defaults-table.ts

@@ -17,6 +17,7 @@ export const CYJS_PROPERTY_DEFAULTS: ReadonlyMap<string, string> = new Map([
     ["background-opacity", "1"],
     ["opacity", "1"],
     ["border-color", "rgb(0,0,0)"],
+    ["border-opacity", "1"],
     ["border-width", "0px"],
     ["border-style", "solid"],
     ["shape", "ellipse"],
@@ -32,6 +33,8 @@ export const CYJS_PROPERTY_DEFAULTS: ReadonlyMap<string, string> = new Map([
     ["display", "element"],
     ["text-valign", "top"],
     ["text-halign", "center"],
+    ["text-wrap", "none"],
+    ["text-max-width", "9999px"],
     ["line-color", "rgb(153,153,153)"],
     ["line-style", "solid"],
     ["target-arrow-shape", "none"],
@@ -60,6 +63,7 @@ export const CYJS_DEFAULT_STYLESHEET: readonly {
         selector: ":parent",
         style: {
             shape: "rectangle",
+            padding: "10px",
             "background-color": "rgb(238,238,238)",
             "border-color": "rgb(204,204,204)",
             "border-width": "1px",

package/src/styles/cyjs/emit.ts

@@ -17,6 +17,7 @@
  *   defaults as Cytoscape.js's own; they are not written again.
  */
 
+import { num6 } from "../canon/number.js";
 import { STYLE_ISSUE } from "../codes.js";
 import { StyleNotes } from "../notes.js";
 import { matches, refSource, resolveRules } from "../plan/resolve.js";
@@ -33,7 +34,13 @@ import type {
 } from "../types.js";
 import { STYLE_PROPERTIES } from "../vocabulary.js";
 import { evaluateCytoscapeJs } from "./cascade.js";
-import { CYJS_EDGE_PROPERTIES, CYJS_NODE_PROPERTIES, type CyjsPropertySpec, isFontFamily } from "./mappers.js";
+import {
+    CYJS_EDGE_PROPERTIES,
+    CYJS_NODE_PROPERTIES,
+    type CyjsPropertySpec,
+    isFontFamily,
+    neutralPointsToCyjs,
+} from "./mappers.js";
 import { parseCyjsSelector } from "./selector.js";
 
 /** One rule of a Cytoscape.js stylesheet. */
@@ -111,6 +118,7 @@ const SHAPES_TO_CYJS: ReadonlyMap<string, string> = new Map([
     ["parallelogram", "rhomboid"],
     ["star", "star"],
     ["vee", "vee"],
+    ["polygon", "polygon"],
 ]);
 const ARROWS_TO_CYJS: ReadonlyMap<string, string> = new Map([
     ["none", "none"],
@@ -121,6 +129,21 @@ const ARROWS_TO_CYJS: ReadonlyMap<string, string> = new Map([
     ["circle", "circle"],
     ["square", "square"],
 ]);
+/** Cytoscape.js's `line-fill` for each neutral gradient kind. */
+const LINE_FILLS: ReadonlyMap<string, string> = new Map([
+    ["none", "solid"],
+    ["linear", "linear-gradient"],
+    ["radial", "radial-gradient"],
+]);
+
+/** The Cytoscape.js property each neutral arrow is written to. */
+const ARROW_PROPERTY = {
+    sourceArrow: "source-arrow-shape",
+    targetArrow: "target-arrow-shape",
+    midSourceArrow: "mid-source-arrow-shape",
+    midTargetArrow: "mid-target-arrow-shape",
+} as const;
+
 /** The open arrows: their shape, drawn hollow. */
 const ARROWS_OPEN: ReadonlyMap<string, string> = new Map([
     ["triangle-open", "triangle"],
@@ -145,6 +168,8 @@ function toCyjs(target: StyleTarget, property: string, value: StyleValue): Writt
     switch (property) {
         case "visible":
             return exact({ display: value === false ? "none" : "element" });
+        case "shapePoints":
+            return pointsToCyjs(String(value));
         case "labelItalic":
             return exact({ "font-style": value === true ? "italic" : "normal" });
         case "curved":
@@ -152,6 +177,24 @@ function toCyjs(target: StyleTarget, property: string, value: StyleValue): Writt
             return exact({ "curve-style": value === true ? "unbundled-bezier" : "straight" });
         case "labelPosition":
             return labelPositionToCyjs(String(value));
+        case "fanSpacing":
+        case "labelWrapWidth":
+            return ifNumber(value, (v) => numberToCyjs(property, v));
+        case "gradientKind":
+            return gradientKindToCyjs(String(value));
+        case "gradientStops":
+            return exact({
+                "line-gradient-stop-positions": String(value)
+                    .trim()
+                    .split(/\s+/)
+                    .map((s) => `${num6(Number(s) * 100)}%`)
+                    .join(" "),
+            });
+        case "outerBorderOffset":
+            // drawn half its value out (see the reader)
+            return ifNumber(value, (v) => exact({ "outline-offset": num6(v * 2) }));
+        case "outerBorderStyle":
+            return outerBorderStyleToCyjs(String(value));
         case "shape":
             return enumToCyjs("shape", String(value), SHAPES_TO_CYJS, specs);
         case "borderStyle":
@@ -160,18 +203,118 @@ function toCyjs(target: StyleTarget, property: string, value: StyleValue): Writt
             return lineStyleToCyjs(String(value));
         case "sourceArrow":
         case "targetArrow":
-            return arrowToCyjs(
-                property === "sourceArrow" ? "source-arrow-shape" : "target-arrow-shape",
-                String(value),
-                specs,
-            );
+        case "midSourceArrow":
+        case "midTargetArrow":
+            return arrowToCyjs(ARROW_PROPERTY[property], String(value), specs);
         case "labelFont":
             return isFontFamily(String(value)) ? exact({ "font-family": String(value) }) : null;
+        // a label's box draws only at an opacity above 0, which is 0 unset
+        case "labelBackground":
+            return exact({ "text-background-color": String(value), "text-background-opacity": 1 });
+        // the outline is drawn as a stroke twice text-outline-width (see the reader)
+        case "labelOutlineColor":
+            return exact({ "text-outline-color": String(value) });
+        case "labelOutlineWidth":
+            return ifNumber(value, (v) => exact({ "text-outline-width": num6(v / 2) }));
+        case "labelPadding":
+            return ifNumber(value, (v) => exact({ "text-background-padding": v }));
+        // the line round a label's box draws only at an opacity above 0, which is 0 unset
+        case "labelBorderColor":
+            return exact({ "text-border-color": String(value), "text-border-opacity": 1 });
+        case "labelBorderWidth":
+            return ifNumber(value, (v) => exact({ "text-border-width": v, "text-border-opacity": 1 }));
+        default:
+            return groupToCyjs(property, value) ?? propertyToCyjs(property, value, specs);
+    }
+}
+
+/**
+ * A compound parent's sizing as Cytoscape.js properties: a bias share as the two sides' percentages.
+ * @param property - the neutral property
+ * @param value - the value
+ * @returns the properties, or null when the property is no group sizing
+ */
+function groupToCyjs(property: string, value: StyleValue): Written | null {
+    const percent = (v: number): string => `${num6(v * 100)}%`;
+    switch (property) {
+        case "groupPadding":
+            return ifNumber(value, (v) => exact({ padding: `${num6(v)}px` }));
+        case "groupPaddingRatio":
+            return ifNumber(value, (v) => exact({ padding: percent(v) }));
+        case "groupPaddingOf":
+            return exact({ "padding-relative-to": String(value) });
+        case "groupMinWidth":
+            return ifNumber(value, (v) => exact({ "min-width": `${num6(v)}px` }));
+        case "groupMinHeight":
+            return ifNumber(value, (v) => exact({ "min-height": `${num6(v)}px` }));
+        case "groupMinWidthBiasLeft":
+            return ifNumber(value, (v) =>
+                exact({ "min-width-bias-left": percent(v), "min-width-bias-right": percent(1 - v) }),
+            );
+        case "groupMinHeightBiasTop":
+            return ifNumber(value, (v) =>
+                exact({ "min-height-bias-top": percent(v), "min-height-bias-bottom": percent(1 - v) }),
+            );
+        case "groupIncludeLabels":
+            return exact({ "compound-sizing-wrt-labels": value === false ? "exclude" : "include" });
         default:
-            return propertyToCyjs(property, value, specs);
+            return null;
     }
 }
 
+/**
+ * A value written only when it is a number.
+ * @param value - the value
+ * @param write - writes the number
+ * @returns the written value, or null when it is not a number
+ */
+function ifNumber(value: StyleValue, write: (v: number) => Written | null): Written | null {
+    return typeof value === "number" ? write(value) : null;
+}
+
+/**
+ * A gradient kind as Cytoscape.js's `line-fill`.
+ * @param kind - the neutral kind
+ * @returns the written value, or null when Cytoscape.js has no such fill
+ */
+function gradientKindToCyjs(kind: string): Written | null {
+    const fill = LINE_FILLS.get(kind);
+    return fill === undefined ? null : exact({ "line-fill": fill });
+}
+
+/**
+ * An outline's style as Cytoscape.js's `outline-style`, read as a border style is.
+ * @param style - the neutral style
+ * @returns the written value, or null
+ */
+function outerBorderStyleToCyjs(style: string): Written | null {
+    const written = borderStyleToCyjs(style);
+    return written === null ? null : { ...written, props: { "outline-style": written.props["border-style"] } };
+}
+
+/**
+ * A polygon's corners as Cytoscape.js's `shape-polygon-points`.
+ * @param points - the neutral corners
+ * @returns the written value, or null when they are not pairs of numbers
+ */
+function pointsToCyjs(points: string): Written | null {
+    const written = neutralPointsToCyjs(points);
+    return written === null ? null : exact({ "shape-polygon-points": written });
+}
+
+/**
+ * A length property: the fan spacing (Cytoscape.js steps between neighbors, twice the distance from the middle line)
+ * or the label wrap width.
+ * @param property - `fanSpacing` or `labelWrapWidth`
+ * @param value - the length
+ * @returns the written value
+ */
+function numberToCyjs(property: "fanSpacing" | "labelWrapWidth", value: number): Written {
+    return property === "fanSpacing"
+        ? exact({ "control-point-step-size": num6(value * 2) })
+        : exact({ "text-wrap": "wrap", "text-max-width": value });
+}
+
 /**
  * Properties written exactly.
  * @param props - the properties
@@ -196,13 +339,12 @@ function near(props: Record<string, string | number>): Written {
  * @returns the written value
  */
 function labelPositionToCyjs(text: string): Written {
-    if (text === "inside-top") {
-        // Cytoscape.js has no inside alignment but center.
-        return near({ "text-valign": "top", "text-halign": "center" });
-    }
-    const v = ["top", "bottom"].find((x) => text.startsWith(x)) ?? "center";
-    const h = ["left", "right"].find((x) => text.endsWith(x)) ?? "center";
-    return exact({ "text-valign": v, "text-halign": h });
+    const inside = text.startsWith("inside-");
+    const side = inside ? text.slice("inside-".length) : text;
+    const v = ["top", "bottom"].find((x) => side.startsWith(x)) ?? "center";
+    const h = ["left", "right"].find((x) => side.endsWith(x)) ?? "center";
+    const of = (a: string): string => (inside && a !== "center" ? `${a}-inside` : a);
+    return exact({ "text-valign": of(v), "text-halign": of(h) });
 }
 
 /**
@@ -905,11 +1047,123 @@ function exactness(e: Emit, rules: readonly StyleRule[]): CytoscapePerElement<st
             const want = resolveRules(rules, target, property, src);
             addBypasses(rows, target, property, want, drawn[target].values[property]);
         }
+        const want = (p: string): readonly (StyleValue | null)[] => resolveRules(rules, target, p, src);
+        if (target === "node") {
+            labelSizedBypasses(rows, want, drawn.node.values);
+        }
+        labelOpacityBypasses(rows, want, drawn[target].values);
+        // each part with the property it is drawn only with: a label's box, line or outline only where it has one
+        const parts: (readonly [string, string, string, string | null])[] = [
+            ["labelBackgroundOpacity", "text-background-opacity", "opacity", "labelBackground"],
+            ["labelBorderOpacity", "text-border-opacity", "opacity", "labelBorderWidth"],
+            ["labelOutlineOpacity", "text-outline-opacity", "labelOpacity", "labelOutlineWidth"],
+        ];
+        if (target === "node") {
+            parts.push(
+                ["borderOpacity", "border-opacity", "opacity", null],
+                ["outerBorderOpacity", "outline-opacity", "opacity", null],
+            );
+        }
+        for (const part of parts) {
+            partOpacityBypasses(rows, want, drawn[target].values, part);
+        }
         out[target] = rows;
     }
     return out;
 }
 
+/**
+ * A label's opacity as Cytoscape.js's `text-opacity`, which it draws times the element's `opacity`, where what is
+ * drawn differs; an edge whose label is less faint than its line is written at the label's opacity with a fainter
+ * `line-opacity`.
+ * @param rows - the bypasses, changed in place
+ * @param want - the styles' values of a property
+ * @param got - what is drawn
+ */
+function labelOpacityBypasses(
+    rows: (Record<string, string | number> | null)[],
+    want: (property: string) => readonly (StyleValue | null)[],
+    got: Readonly<Partial<Record<string, readonly (StyleValue | null)[]>>>,
+): void {
+    const label = want("labelOpacity");
+    const whole = want("opacity");
+    const at = (v: StyleValue | null | undefined): number => (typeof v === "number" ? v : 1);
+    for (let i = 0; i < rows.length; i++) {
+        const [l, o] = [at(label[i]), at(whole[i])];
+        // a bypass of the opacity written above changes the label's too
+        const rewritten = rows[i]?.opacity !== undefined;
+        if ((l === at(got.labelOpacity?.[i]) && !rewritten) || Number.isNaN(o) || o <= 0) {
+            continue;
+        }
+        if (l === o && rewritten) {
+            continue;
+        }
+        if (l <= o) {
+            rows[i] = { ...rows[i], "text-opacity": num6(l / o) };
+        } else if (l > 0) {
+            // an edge's line fainter than its label: the element at the label's opacity, the line fainter still
+            rows[i] = { ...rows[i], opacity: num6(l), "line-opacity": num6(o / l), "text-opacity": 1 };
+        }
+    }
+}
+
+/**
+ * The opacity of one part of an element (a node's border or outline, a label's box, line or outline) as the
+ * Cytoscape.js property that carries it, which Cytoscape.js draws times the element's `opacity` (a label's outline
+ * times the words' opacity), where what is drawn differs.
+ * @param rows - the bypasses, changed in place
+ * @param want - the styles' values of a property
+ * @param got - what is drawn
+ * @param part - the neutral property, the Cytoscape.js property, the neutral property it is drawn times, and the one
+ * it is drawn only with (null: always)
+ */
+function partOpacityBypasses(
+    rows: (Record<string, string | number> | null)[],
+    want: (property: string) => readonly (StyleValue | null)[],
+    got: Readonly<Partial<Record<string, readonly (StyleValue | null)[]>>>,
+    part: readonly [string, string, string, string | null],
+): void {
+    const [property, name, by, drawnBy] = part;
+    const own = want(property);
+    const whole = want(by);
+    const shown = drawnBy === null ? null : want(drawnBy);
+    const at = (v: StyleValue | null | undefined): number => (typeof v === "number" ? v : 1);
+    for (let i = 0; i < rows.length; i++) {
+        if (shown !== null && shown[i] === null) {
+            continue;
+        }
+        const [r, o] = [at(own[i]), at(whole[i])];
+        const rewritten = rows[i]?.opacity !== undefined || rows[i]?.["text-opacity"] !== undefined;
+        if ((r === at(got[property]?.[i]) && !rewritten) || Number.isNaN(o) || o <= 0 || r > o) {
+            continue;
+        }
+        rows[i] = { ...rows[i], [name]: num6(r / o) };
+    }
+}
+
+/**
+ * A node sized to its label (`labelFit` `bounds`, the label's side 0) as Cytoscape.js's `width: label` or
+ * `height: label`, where what is drawn does not size it so already.
+ * @param rows - the bypasses, changed in place
+ * @param want - the styles' values of a property
+ * @param got - what is drawn
+ */
+function labelSizedBypasses(
+    rows: (Record<string, string | number> | null)[],
+    want: (property: string) => readonly (StyleValue | null)[],
+    got: Readonly<Partial<Record<string, readonly (StyleValue | null)[]>>>,
+): void {
+    const fit = want("labelFit");
+    for (const p of ["width", "height"]) {
+        const size = want(p);
+        for (let i = 0; i < rows.length; i++) {
+            if (fit[i] === "bounds" && size[i] === 0 && !(got.labelFit?.[i] === "bounds" && got[p]?.[i] === 0)) {
+                rows[i] = { ...rows[i], [p]: "label" };
+            }
+        }
+    }
+}
+
 /**
  * A bypass of one property for every element whose drawn value differs from the styles' and that Cytoscape.js can
  * hold exactly.