@graphty/graph-io 0.3.47 → 0.3.48

package/src/styles/canon/enums.ts

@@ -135,6 +135,7 @@ const POSITIONS: Aliases = {
     "top-right": ["top-right", "north-east", "northeast"],
     "bottom-left": ["bottom-left", "south-west", "southwest"],
     "bottom-right": ["bottom-right", "south-east", "southeast"],
+    "inside-top": ["inside-top"],
 };
 
 /** vis-network draws these spellings differently from the common reading. */

package/src/styles/cyjs/cascade.ts

@@ -1733,6 +1733,8 @@ const CYJS_EDGE_ONLY: ReadonlySet<string> = new Set([
     "source-arrow-shape",
     "target-arrow-color",
     "source-arrow-color",
+    "target-arrow-fill",
+    "source-arrow-fill",
     "curve-style",
     "arrow-scale",
     "source-label",
@@ -1897,6 +1899,75 @@ function combineParts(
         }
         values.visible = col;
     }
+    if (kind === "edge") {
+        hollowArrows("target", words.get("_targetArrowFill"), values, notes);
+        hollowArrows("source", words.get("_sourceArrowFill"), values, notes);
+    }
+}
+
+/**
+ * An entry's arrows drawn open where the same entry sets them hollow. A fill set by another entry is left to the
+ * per-element values the rules are checked against.
+ * @param setting - the entry's constants; changed in place
+ * @param parts - every property of the entry
+ */
+function openArrows(setting: Map<string, StyleValue>, parts: readonly EntryProperty[]): void {
+    for (const end of ["target", "source"]) {
+        // a later duplicate of a property replaces the earlier one
+        let fill: CyjsParsed | undefined;
+        for (const p of parts) {
+            if (p.spec.property === `_${end}ArrowFill`) {
+                fill = p.parsed;
+            }
+        }
+        const shape = setting.get(`${end}Arrow`);
+        const open = shape === undefined ? undefined : OPEN_ARROWS.get(shape);
+        if (fill?.kind === "word" && fill.value === "hollow" && open !== undefined) {
+            setting.set(`${end}Arrow`, open);
+        }
+    }
+}
+
+/** The arrows the vocabulary has an open shape for, by their filled shape. */
+const OPEN_ARROWS: ReadonlyMap<StyleValue, StyleValue> = new Map([
+    ["triangle", "triangle-open"],
+    ["circle", "circle-open"],
+    ["diamond", "diamond-open"],
+]);
+
+/**
+ * Combines an end's arrow shape with its fill: a hollow arrow is the open shape. A hollow arrow the vocabulary has no
+ * open shape for keeps its filled shape and is noted.
+ * @param end - the edge end
+ * @param fill - the fill per element, or undefined when no rule sets it
+ * @param values - the values; changed in place
+ * @param notes - where problems are noted
+ */
+function hollowArrows(
+    end: "source" | "target",
+    fill: readonly (string | null)[] | undefined,
+    values: Record<string, (StyleValue | null)[]>,
+    notes: StyleNotes,
+): void {
+    const shapes = values[`${end}Arrow`] as (StyleValue | null)[] | undefined;
+    if (fill === undefined || shapes === undefined) {
+        return;
+    }
+    for (let i = 0; i < shapes.length; i++) {
+        const shape = shapes[i];
+        if (fill[i] !== "hollow" || shape === null || shape === "none") {
+            continue;
+        }
+        const open = OPEN_ARROWS.get(shape);
+        if (open === undefined) {
+            notes.add(STYLE_ISSUE.NOT_CARRIED, "edge", `${end}-arrow-fill`, {
+                sample: `hollow ${String(shape)}`,
+                element: i,
+            });
+        } else {
+            shapes[i] = open;
+        }
+    }
 }
 
 /**
@@ -1973,7 +2044,7 @@ function buildRules(
         if (props.length === 0 || a.list.length === 0) {
             continue;
         }
-        drafts.push(draftOf(ctx, a.entry, a.list, props));
+        drafts.push(draftOf(ctx, a.entry, a.list, props, a.props));
     }
     const rules = collapse(ctx, drafts);
     return { rules, columns, rawColumns: [...raw] };
@@ -2020,9 +2091,16 @@ interface Draft {
  * @param entry - the entry
  * @param list - the matched core elements
  * @param props - the carried properties
+ * @param parts - every property of the entry, the combined parts too: a hollow fill makes the entry's own arrow open
  * @returns the draft
  */
-function draftOf(ctx: RuleContext, entry: Entry, list: readonly number[], props: readonly EntryProperty[]): Draft {
+function draftOf(
+    ctx: RuleContext,
+    entry: Entry,
+    list: readonly number[],
+    props: readonly EntryProperty[],
+    parts: readonly EntryProperty[],
+): Draft {
     const setting = new Map<string, StyleValue>();
     const mapping = new Map<string, Mapping>();
     let flattened = false;
@@ -2053,6 +2131,7 @@ function draftOf(ctx: RuleContext, entry: Entry, list: readonly number[], props:
             mapping.set(p.spec.property, mapperMapping(ctx, entry, list, p));
         }
     }
+    openArrows(setting, parts);
     const set = Object.fromEntries(setting);
     const map = Object.fromEntries(mapping);
     const hasMap = mapping.size > 0;

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

@@ -36,6 +36,8 @@ export const CYJS_PROPERTY_DEFAULTS: ReadonlyMap<string, string> = new Map([
     ["line-style", "solid"],
     ["target-arrow-shape", "none"],
     ["source-arrow-shape", "none"],
+    ["target-arrow-fill", "filled"],
+    ["source-arrow-fill", "filled"],
     ["target-arrow-color", "rgb(153,153,153)"],
     ["source-arrow-color", "rgb(153,153,153)"],
     ["curve-style", "haystack"],

package/src/styles/cyjs/emit.ts

@@ -121,10 +121,13 @@ const ARROWS_TO_CYJS: ReadonlyMap<string, string> = new Map([
     ["circle", "circle"],
     ["square", "square"],
 ]);
-const ARROWS_NEAREST: ReadonlyMap<string, string> = new Map([
+/** The open arrows: their shape, drawn hollow. */
+const ARROWS_OPEN: ReadonlyMap<string, string> = new Map([
     ["triangle-open", "triangle"],
     ["diamond-open", "diamond"],
     ["circle-open", "circle"],
+]);
+const ARROWS_NEAREST: ReadonlyMap<string, string> = new Map([
     ["half", "triangle"],
     ["inverted", "triangle"],
     ["crow", "vee"],
@@ -193,6 +196,10 @@ 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 });
@@ -221,19 +228,23 @@ function enumToCyjs(
 }
 
 /**
- * An arrow, or the nearest arrow Cytoscape.js has.
- * @param name - the Cytoscape.js property
+ * An arrow, or the nearest arrow Cytoscape.js has, with its fill: an open arrow is its shape drawn hollow, and every
+ * other arrow is written filled, so a hollow fill an earlier rule set does not carry over to it.
+ * @param name - the Cytoscape.js shape property
  * @param value - the neutral arrow
  * @param specs - the target's properties
  * @returns the written value, or null when Cytoscape.js has none near
  */
 function arrowToCyjs(name: string, value: string, specs: ReadonlyMap<string, CyjsPropertySpec>): Written | null {
-    const own = enumToCyjs(name, value, ARROWS_TO_CYJS, specs);
-    if (own !== null) {
-        return own;
+    const fill = name.replace("-shape", "-fill");
+    const open = ARROWS_OPEN.get(value);
+    if (open !== undefined) {
+        return exact({ [name]: open, [fill]: "hollow" });
     }
+    const own = enumToCyjs(name, value, ARROWS_TO_CYJS, specs);
     const nearest = ARROWS_NEAREST.get(value);
-    return nearest === undefined ? null : near({ [name]: nearest });
+    const w = own ?? (nearest === undefined ? null : near({ [name]: nearest }));
+    return w === null || value === "none" ? w : { ...w, props: { ...w.props, [fill]: "filled" } };
 }
 
 /**

package/src/styles/cyjs/mappers.ts

@@ -28,7 +28,10 @@ export type CyjsValueType =
 
 /** One property graph-io carries: the neutral property it sets (or a part it combines) and how it is parsed. */
 export interface CyjsPropertySpec {
-    /** The neutral property, or `_valign`, `_halign`, `_visibility`, `_display` for the parts combined afterward. */
+    /**
+     * The neutral property, or `_valign`, `_halign`, `_visibility`, `_display`, `_sourceArrowFill`, `_targetArrowFill`
+     * for the parts combined afterward.
+     */
     readonly property: string;
     /** The value type. */
     readonly type: CyjsValueType;
@@ -171,6 +174,8 @@ export const CYJS_EDGE_PROPERTIES: ReadonlyMap<string, CyjsPropertySpec> = new M
     ["source-arrow-shape", { property: "sourceArrow", type: "enum", enums: ARROWS }],
     ["target-arrow-color", { property: "targetArrowColor", type: "color" }],
     ["source-arrow-color", { property: "sourceArrowColor", type: "color" }],
+    ["target-arrow-fill", { property: "_targetArrowFill", type: "enum", enums: ["filled", "hollow"] }],
+    ["source-arrow-fill", { property: "_sourceArrowFill", type: "enum", enums: ["filled", "hollow"] }],
     ["curve-style", { property: "curved", type: "enum", enums: CURVES }],
     ["arrow-scale", { property: "arrowSize", type: "positive" }],
     ["source-label", { property: "sourceLabel", type: "text" }],

package/src/styles/cytoscape/emit.ts

@@ -23,7 +23,7 @@ import type {
     StyleValue,
 } from "../types.js";
 import { STYLE_PROPERTIES } from "../vocabulary.js";
-import { JAVA_FONTS } from "./lexicon.js";
+import { JAVA_FONTS, vpStep } from "./lexicon.js";
 import {
     type CytoscapeContinuousPoint,
     type CytoscapeMapping,
@@ -220,6 +220,7 @@ const DESKTOP_POSITIONS = {
     "top-right": "NE,SW,c,0.00,0.00",
     "bottom-left": "SW,NE,c,0.00,0.00",
     "bottom-right": "SE,NW,c,0.00,0.00",
+    "inside-top": "N,N,c,0.00,0.00",
 };
 const CX2_ANCHORS: Readonly<Record<string, readonly [string, string]>> = {
     center: ["center", "center"],
@@ -235,6 +236,21 @@ const CX2_ANCHORS: Readonly<Record<string, readonly [string, string]>> = {
 
 const desktopNumber: Write = String;
 const cx2Number: Write = (v) => v;
+
+/**
+ * A writer for a visual property Cytoscape holds as a whole number (a font size): the value is written as it is, and
+ * a fraction is noted, since Cytoscape draws it rounded.
+ * @param write - the dialect's number writer
+ * @returns the writer
+ */
+function whole(write: Write): Write {
+    return (v, approx) => {
+        if (typeof v === "number" && !Number.isInteger(v)) {
+            approx();
+        }
+        return write(v, approx);
+    };
+}
 const textOut: Write = String;
 const desktopBool: Write = (v) => String(v === true);
 const opacity255: Write = (v, approx) => {
@@ -265,7 +281,7 @@ const WRITERS: Readonly<Record<CytoscapeDialect, Readonly<Record<StyleTarget, Re
             ["height", { vp: "NODE_HEIGHT", write: desktopNumber }],
             ["label", { vp: "NODE_LABEL", write: textOut }],
             ["labelColor", { vp: "NODE_LABEL_COLOR", write: colorOut }],
-            ["labelSize", { vp: "NODE_LABEL_FONT_SIZE", write: desktopNumber }],
+            ["labelSize", { vp: "NODE_LABEL_FONT_SIZE", write: whole(desktopNumber) }],
             ["labelPosition", { vp: "NODE_LABEL_POSITION", write: enumOut(DESKTOP_POSITIONS, {}, false) }],
             ["tooltip", { vp: "NODE_TOOLTIP", write: textOut }],
             ["visible", { vp: "NODE_VISIBLE", write: desktopBool }],
@@ -300,7 +316,7 @@ const WRITERS: Readonly<Record<CytoscapeDialect, Readonly<Record<StyleTarget, Re
             ["curved", { vp: "EDGE_CURVED", write: desktopBool }],
             ["label", { vp: "EDGE_LABEL", write: textOut }],
             ["labelColor", { vp: "EDGE_LABEL_COLOR", write: colorOut }],
-            ["labelSize", { vp: "EDGE_LABEL_FONT_SIZE", write: desktopNumber }],
+            ["labelSize", { vp: "EDGE_LABEL_FONT_SIZE", write: whole(desktopNumber) }],
             ["tooltip", { vp: "EDGE_TOOLTIP", write: textOut }],
             ["visible", { vp: "EDGE_VISIBLE", write: desktopBool }],
         ]),
@@ -329,7 +345,7 @@ const WRITERS: Readonly<Record<CytoscapeDialect, Readonly<Record<StyleTarget, Re
             ["height", { vp: "NODE_HEIGHT", write: cx2Number }],
             ["label", { vp: "NODE_LABEL", write: textOut }],
             ["labelColor", { vp: "NODE_LABEL_COLOR", write: colorOut }],
-            ["labelSize", { vp: "NODE_LABEL_FONT_SIZE", write: cx2Number }],
+            ["labelSize", { vp: "NODE_LABEL_FONT_SIZE", write: whole(cx2Number) }],
             ["labelPosition", { vp: "NODE_LABEL_POSITION", write: cx2Position }],
             ["visible", { vp: "NODE_VISIBILITY", write: (v) => (v === true ? "element" : "none") }],
         ]),
@@ -363,18 +379,23 @@ const WRITERS: Readonly<Record<CytoscapeDialect, Readonly<Record<StyleTarget, Re
             ["curved", { vp: "EDGE_CURVED", write: (v) => v === true }],
             ["label", { vp: "EDGE_LABEL", write: textOut }],
             ["labelColor", { vp: "EDGE_LABEL_COLOR", write: colorOut }],
-            ["labelSize", { vp: "EDGE_LABEL_FONT_SIZE", write: cx2Number }],
+            ["labelSize", { vp: "EDGE_LABEL_FONT_SIZE", write: whole(cx2Number) }],
             ["visible", { vp: "EDGE_VISIBILITY", write: (v) => (v === true ? "element" : "none") }],
         ]),
     },
 };
 
 /**
- * CX2's label position object.
+ * CX2's label position object; `inside-top`, which CX2's anchors cannot tell from `top`, is written as `top`.
  * @param v - a canonical position
+ * @param approx - records the approximation
  * @returns the object
  */
-function cx2Position(v: StyleValue): unknown {
+function cx2Position(v: StyleValue, approx: () => void): unknown {
+    if (v === "inside-top") {
+        approx();
+        v = "top";
+    }
     const [h, vert] = Object.hasOwn(CX2_ANCHORS, String(v)) ? CX2_ANCHORS[String(v)] : ["center", "center"];
     return {
         HORIZONTAL_ALIGN: "center",
@@ -701,16 +722,49 @@ function addBypasses(
             continue;
         }
         const drawn = resolveRules(modelRules, target, p, e.src);
+        const step = drawnStep(model.map.get(p), w.vp, STYLE_PROPERTIES[target].get(p));
+        let rounded = 0;
         for (let i = 0; i < e.n; i++) {
             const v = want[i];
             if (v !== null && v !== drawn[i]) {
                 bypasses[i] ??= new Map();
                 bypasses[i]?.set(w.vp, w.write(v, e.approx(p)));
+            } else if (offStep(v, step)) {
+                rounded++;
             }
         }
+        if (rounded > 0) {
+            e.notes.add(STYLE_ISSUE.APPROXIMATED, target, p, { count: rounded });
+        }
     }
 }
 
+/**
+ * The step Cytoscape rounds the values of a written mapping to: a continuous mapping, or a passthrough written as
+ * one, on a visual property that holds whole numbers (a font size, a 0..255 transparency) is drawn rounded, unless
+ * the mapping already rounds to it. A passthrough written as a table writes its values through the property's writer,
+ * which notes them itself.
+ * @param m - the mapping written, if any
+ * @param vp - the visual property it sets
+ * @param kind - the kind of value the property holds
+ * @returns the step, or undefined when Cytoscape draws the mapping's values as they are
+ */
+function drawnStep(m: Mapping | undefined, vp: string, kind: string | undefined): number | undefined {
+    const ramp = m?.kind === "continuous" && m.step === undefined;
+    const passthrough = m?.kind === "passthrough" && PASSTHROUGH_SAFE.has(kind ?? "");
+    return ramp || passthrough ? vpStep(vp) : undefined;
+}
+
+/**
+ * Whether a value is not a multiple of a step, so Cytoscape draws it rounded.
+ * @param v - the value
+ * @param step - the step, or undefined for none
+ * @returns true when the value changes on rounding
+ */
+function offStep(v: StyleValue | null | undefined, step: number | undefined): boolean {
+    return step !== undefined && typeof v === "number" && num6(Math.round(v / step) * step) !== v;
+}
+
 /**
  * The defaults and mappings of one target: rules over every element, bottom to top. A constant over every element
  * hides everything beneath it; of two mappings of one property only the topmost is kept. Every rule that cannot be

package/src/styles/cytoscape/lexicon.ts

@@ -39,6 +39,11 @@ const opacity255: CytoscapeValueParser = (raw, site) => {
 // CX2's 0..1 opacity.
 const opacity01: CytoscapeValueParser = (raw, site) => canonOpacity(raw, "css", site);
 const length: CytoscapeValueParser = (raw, site) => canonNumber(raw, site);
+// Cytoscape desktop holds a font size as a whole number, so every value read for one is drawn rounded.
+const fontSize: CytoscapeValueParser = (raw, site) => {
+    const v = canonNumber(raw, site);
+    return v === null ? null : Math.round(v);
+};
 const text: CytoscapeValueParser = (raw, site) => canonText(raw, site);
 const bool: CytoscapeValueParser = (raw, site) => canonBoolean(raw, site);
 
@@ -397,7 +402,7 @@ export const CYTOSCAPE_LEXICON: Readonly<
         ["height", [["NODE_HEIGHT", length]]],
         ["label", [["NODE_LABEL", text]]],
         ["labelColor", [["NODE_LABEL_COLOR", color]]],
-        ["labelSize", [["NODE_LABEL_FONT_SIZE", length]]],
+        ["labelSize", [["NODE_LABEL_FONT_SIZE", fontSize]]],
         ["labelFont", [["NODE_LABEL_FONT_FACE", fontFamily]]],
         ["labelWeight", [["NODE_LABEL_FONT_FACE", fontWeight]]],
         ["labelItalic", [["NODE_LABEL_FONT_FACE", fontItalic]]],
@@ -455,7 +460,7 @@ export const CYTOSCAPE_LEXICON: Readonly<
         ["curved", [["EDGE_CURVED", bool]]],
         ["label", [["EDGE_LABEL", text]]],
         ["labelColor", [["EDGE_LABEL_COLOR", color]]],
-        ["labelSize", [["EDGE_LABEL_FONT_SIZE", length]]],
+        ["labelSize", [["EDGE_LABEL_FONT_SIZE", fontSize]]],
         ["labelFont", [["EDGE_LABEL_FONT_FACE", fontFamily]]],
         ["labelWeight", [["EDGE_LABEL_FONT_FACE", fontWeight]]],
         ["labelItalic", [["EDGE_LABEL_FONT_FACE", fontItalic]]],
@@ -656,3 +661,24 @@ export function normalizeVisualProperties(target: StyleTarget, raw: unknown, not
     }
     return out;
 }
+
+/**
+ * The step a continuous mapping's value is rounded to for the integer visual properties Cytoscape desktop rounds an
+ * interpolated value of (cytoscape-api BasicVisualLexicon: the font sizes and the 0..255 transparencies; the latter
+ * read as opacities, so 1/255).
+ */
+const INTEGER_VP_STEPS: ReadonlyMap<string, number> = new Map([
+    ["NODE_LABEL_FONT_SIZE", 1],
+    ["EDGE_LABEL_FONT_SIZE", 1],
+    ["NODE_TRANSPARENCY", 1 / 255],
+    ["EDGE_TRANSPARENCY", 1 / 255],
+]);
+
+/**
+ * The step Cytoscape rounds an interpolated value of a visual property to.
+ * @param vp - the visual property
+ * @returns the step, or undefined for a property that holds fractions
+ */
+export function vpStep(vp: string): number | undefined {
+    return INTEGER_VP_STEPS.get(vp);
+}

package/src/styles/cytoscape/resolve.ts

@@ -28,6 +28,7 @@ import {
     isUncarriedVp,
     NODE_SIZE_VP,
     sizeParser,
+    vpStep,
 } from "./lexicon.js";
 import {
     type CytoscapeContinuousPoint,
@@ -152,7 +153,13 @@ export function chooseVps(
 export type ParsedMapping =
     | { readonly kind: "passthrough"; readonly column: string }
     | { readonly kind: "discrete"; readonly column: string; readonly table: readonly (readonly [Scalar, StyleValue])[] }
-    | { readonly kind: "continuous"; readonly column: string; readonly points: readonly ContinuousPoint[] };
+    | {
+          readonly kind: "continuous";
+          readonly column: string;
+          readonly points: readonly ContinuousPoint[];
+          /** The step Cytoscape rounds a value to, for an integer visual property. */
+          readonly step?: number;
+      };
 
 /**
  * Reads a mapping's raw values with a property's parser: table entries and points whose values do not parse are
@@ -160,9 +167,15 @@ export type ParsedMapping =
  * @param m - the mapping
  * @param parse - the property's parser
  * @param site - where problems are noted
+ * @param vp - the visual property it sets, whose type decides whether an interpolated value is rounded
  * @returns the mapping with canonical values
  */
-export function parseMapping(m: CytoscapeMapping, parse: CytoscapeValueParser, site: CanonSite): ParsedMapping {
+export function parseMapping(
+    m: CytoscapeMapping,
+    parse: CytoscapeValueParser,
+    site: CanonSite,
+    vp: string,
+): ParsedMapping {
     switch (m.kind) {
         case "passthrough":
             return { kind: "passthrough", column: m.column };
@@ -176,8 +189,11 @@ export function parseMapping(m: CytoscapeMapping, parse: CytoscapeValueParser, s
             }
             return { kind: "discrete", column: m.column, table };
         }
-        default:
-            return { kind: "continuous", column: m.column, points: parsePoints(m.points, parse, site) };
+        default: {
+            const step = vpStep(vp);
+            const points = parsePoints(m.points, parse, site);
+            return { kind: "continuous", column: m.column, points, ...(step === undefined ? {} : { step }) };
+        }
     }
 }
 
@@ -240,7 +256,7 @@ function evalMapping(
             return j < 0 ? null : m.table[j][1];
         }
         default:
-            return evalContinuous(m.points, numberOf(value));
+            return evalContinuous(m.points, numberOf(value), m.step);
     }
 }
 
@@ -296,7 +312,7 @@ function resolver(
         if (m === undefined) {
             const entries = raw.kind === "discrete" ? raw.table.length : 0;
             budget?.spend(target, 1 + entries + (raw.kind === "continuous" ? raw.points.length : 0));
-            m = parseMapping(raw, parse, ruleSite(property));
+            m = parseMapping(raw, parse, ruleSite(property), vp);
             parsed.set(key, m);
         }
         return m;

package/src/styles/cytoscape/translate.ts

@@ -9,7 +9,7 @@ import { StyleNotes } from "../notes.js";
 import { canonicalFor } from "../plan/resolve.js";
 import type { ColumnRef, Mapping, StyleColumn, StyleRule, StyleTarget, StyleValue, StyleWorkBudget } from "../types.js";
 import { type CytoscapeValueParser, NODE_SIZE_VP, sizeParser } from "./lexicon.js";
-import type { CytoscapeMapping, CytoscapeStyle } from "./mappings.js";
+import type { CytoscapeStyle } from "./mappings.js";
 import {
     bendParser,
     chooseVps,
@@ -86,8 +86,12 @@ export function cytoscapeRules(
     const columns = new Map<string, StyleColumn>();
     const byColumn = new Map<string, MappingRule>();
     const reading: MappingRead = { target, refOf, elements, columns, notes, budget: options.budget };
-    const add = (props: readonly string[], raw: CytoscapeMapping, parse: CytoscapeValueParser): void => {
-        const parsed = parseMapping(raw, parse, site(props[0]));
+    const add = (props: readonly string[], vp: string, parse: CytoscapeValueParser): void => {
+        const raw = s.mappings.get(vp);
+        if (raw === undefined) {
+            return;
+        }
+        const parsed = parseMapping(raw, parse, site(props[0]), vp);
         const mapping = neutralMapping(parsed, props[0], parse, reading);
         const key = `${raw.kind}\u0000${raw.column}`;
         let rule = byColumn.get(key);
@@ -100,14 +104,10 @@ export function cytoscapeRules(
         }
     };
     for (const [prop, [vp, parse]] of chosen) {
-        const raw = s.mappings.get(vp);
-        if (raw !== undefined) {
-            add(matched && prop === "color" ? ["color", "sourceArrowColor", "targetArrowColor"] : [prop], raw, parse);
-        }
+        add(matched && prop === "color" ? ["color", "sourceArrowColor", "targetArrowColor"] : [prop], vp, parse);
     }
-    const size = locked ? s.mappings.get(NODE_SIZE_VP) : undefined;
-    if (size !== undefined) {
-        add(["width", "height"], size, sizeParser);
+    if (locked) {
+        add(["width", "height"], NODE_SIZE_VP, sizeParser);
     }
 
     const rules: StyleRule[] = [];
@@ -201,7 +201,7 @@ function neutralMapping(
         return { kind: "discrete", by, table: m.table };
     }
     if (m.kind === "continuous") {
-        return { kind: "continuous", by, points: m.points };
+        return { kind: "continuous", by, points: m.points, ...(m.step === undefined ? {} : { step: m.step }) };
     }
     const plain = "style" in by ? styleCell : canonicalFor(target, property);
     const n = elements.count;