@grafloria/element 0.3.17 → 0.3.19

package/src/libs/renderer/src/svg/text-block.js

@@ -0,0 +1,171 @@
+"use strict";
+// text-block.ts
+// Link-agnostic text-block engine (wrap / multi-line / ellipsis / shape-fit).
+//
+// This is the shared core that BOTH node labels (SVGRenderer.renderNode) and
+// link labels (LabelRenderer) render through. It was factored out of
+// LabelRenderer's renderText / renderWrappedText / wrapText so a single
+// implementation owns line-breaking, vertical alignment and truncation.
+//
+// WIDTH APPROXIMATION (documented, intentional):
+//   We have no DOM/canvas measureText in the framework-agnostic layer, so text
+//   width is estimated as `text.length * fontSize * 0.6` — the average glyph is
+//   ~0.6em. This over/under-estimates for very narrow ('l', 'i') or very wide
+//   ('W', 'M') runs, but it is stable, cheap and good enough to (a) pick line
+//   breaks and (b) decide when a label overflows its shape's inner rect. The
+//   per-node <clipPath> (sized to the exact inner rect) is the hard backstop
+//   that guarantees text never visibly escapes the silhouette, so the estimate
+//   only needs to be approximately right.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.estimateTextWidth = estimateTextWidth;
+exports.wrapText = wrapText;
+exports.renderTextBlock = renderTextBlock;
+const DEFAULT_FONT_SIZE = 12;
+const DEFAULT_LINE_HEIGHT = 1.2;
+const ELLIPSIS = '…'; // …
+/** Average-glyph width estimate. See the module header for the rationale. */
+function estimateTextWidth(text, fontSize) {
+    return text.length * fontSize * 0.6;
+}
+/**
+ * Break `text` into display lines: split on hard '\n', then greedily word-wrap
+ * each paragraph to `maxWidth`. A single word wider than maxWidth breaks at its
+ * HYPHENS first ("predefined-process" → "predefined-" + "process" — a hyphen is
+ * a legitimate break point; a centred clip eats BOTH ends of the word and reads
+ * as gibberish, which is exactly what the screenshot audit caught). A word with
+ * no hyphen is kept whole (clipped, not broken) — the historical LabelRenderer
+ * behavior for genuinely unbreakable runs.
+ */
+function wrapText(text, maxWidth, fontSize) {
+    const wrap = typeof maxWidth === 'number' && isFinite(maxWidth) && maxWidth > 0;
+    const lines = [];
+    for (const paragraph of text.split('\n')) {
+        if (!wrap) {
+            lines.push(paragraph);
+            continue;
+        }
+        const words = paragraph
+            .split(/\s+/)
+            .filter((w) => w.length > 0)
+            .flatMap((w) => breakOversizedWord(w, maxWidth, fontSize));
+        if (words.length === 0) {
+            lines.push('');
+            continue;
+        }
+        let current = '';
+        for (const word of words) {
+            const test = current ? `${current} ${word}` : word;
+            if (estimateTextWidth(test, fontSize) > maxWidth && current) {
+                lines.push(current);
+                current = word;
+            }
+            else {
+                current = test;
+            }
+        }
+        if (current)
+            lines.push(current);
+    }
+    return lines.length > 0 ? lines : [text];
+}
+/**
+ * Split a word that cannot fit `maxWidth` at its hyphens, greedily packing
+ * hyphen-terminated segments back together so we break as few times as
+ * possible. Fitting words — and unbreakable oversized ones — pass through
+ * unchanged. The greedy line-packer above treats the returned pieces as
+ * ordinary words; a piece already ends in '-', so no artificial hyphen is
+ * introduced.
+ */
+function breakOversizedWord(word, maxWidth, fontSize) {
+    if (estimateTextWidth(word, fontSize) <= maxWidth || !word.includes('-'))
+        return [word];
+    // "a-b-c" → ["a-", "b-", "c"], then greedily merge while they fit.
+    const segments = word.split(/(?<=-)/);
+    const pieces = [];
+    let current = '';
+    for (const seg of segments) {
+        const test = current + seg;
+        if (current && estimateTextWidth(test, fontSize) > maxWidth) {
+            pieces.push(current);
+            current = seg;
+        }
+        else {
+            current = test;
+        }
+    }
+    if (current)
+        pieces.push(current);
+    return pieces;
+}
+/**
+ * Apply a maxLines cap: keep the first `maxLines` lines and fold the overflow
+ * into a trailing ellipsis on the last kept line, trimming characters so the
+ * ellipsized line still fits `maxWidth`.
+ */
+function truncateLines(lines, maxLines, maxWidth, fontSize) {
+    var _a;
+    if (!maxLines || maxLines < 1 || lines.length <= maxLines)
+        return lines;
+    const kept = lines.slice(0, maxLines);
+    let last = (_a = kept[maxLines - 1]) !== null && _a !== void 0 ? _a : '';
+    const fits = (s) => !(typeof maxWidth === 'number' && isFinite(maxWidth) && maxWidth > 0) ||
+        estimateTextWidth(s + ELLIPSIS, fontSize) <= maxWidth;
+    while (last.length > 0 && !fits(last)) {
+        last = last.slice(0, -1).replace(/\s+$/, '');
+    }
+    kept[maxLines - 1] = last + ELLIPSIS;
+    return kept;
+}
+function baselineOffset(valign, lineCount, lineHeightPx) {
+    const totalHeight = lineCount * lineHeightPx;
+    if (valign === 'middle')
+        return -totalHeight / 2 + lineHeightPx / 2;
+    if (valign === 'bottom')
+        return -totalHeight + lineHeightPx;
+    return 0; // top: first line baseline sits ~one line below y
+}
+function mapDominantBaseline(valign) {
+    if (valign === 'top')
+        return 'hanging';
+    if (valign === 'bottom')
+        return 'baseline';
+    return 'middle';
+}
+/**
+ * Render a text block as a single <text> VNode.
+ *
+ * - one line  → a <text> carrying `textContent` (+ dominant-baseline for
+ *   vertical centering), preserving the historical single-line output.
+ * - many lines → a <text> with one <tspan> per line, vertically aligned via
+ *   per-line `dy` (first line offset by {@link baselineOffset}).
+ */
+function renderTextBlock(opts) {
+    var _a, _b, _c, _d;
+    const fontSize = (_a = opts.fontSize) !== null && _a !== void 0 ? _a : DEFAULT_FONT_SIZE;
+    const align = (_b = opts.align) !== null && _b !== void 0 ? _b : 'middle';
+    const valign = (_c = opts.valign) !== null && _c !== void 0 ? _c : 'middle';
+    const lineHeightPx = fontSize * ((_d = opts.lineHeight) !== null && _d !== void 0 ? _d : DEFAULT_LINE_HEIGHT);
+    const emitFontSize = opts.emitFontSize !== false;
+    const wrapped = wrapText(opts.text, opts.maxWidth, fontSize);
+    const lines = truncateLines(wrapped, opts.maxLines, opts.maxWidth, fontSize);
+    const baseProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ x: opts.x, y: opts.y, textAnchor: align }, (emitFontSize ? { fontSize } : {})), (opts.fontFamily ? { fontFamily: opts.fontFamily } : {})), (opts.fontWeight !== undefined ? { fontWeight: opts.fontWeight } : {})), (opts.color ? { fill: opts.color } : {})), (opts.className ? { className: opts.className } : {})), (opts.clipId ? { clipPath: `url(#${opts.clipId})` } : {})), (opts.nonInteractive ? { pointerEvents: 'none' } : {}));
+    // Single line: keep the compact textContent form (matches legacy output).
+    if (lines.length === 1) {
+        return {
+            type: 'text',
+            props: Object.assign(Object.assign({}, baseProps), { textContent: lines[0], dominantBaseline: mapDominantBaseline(valign) }),
+        };
+    }
+    // Multi-line: one tspan per line, offset from the anchor by dy.
+    const first = baselineOffset(valign, lines.length, lineHeightPx);
+    const tspans = lines.map((line, i) => ({
+        type: 'tspan',
+        props: {
+            x: opts.x,
+            dy: i === 0 ? first : lineHeightPx,
+            textContent: line,
+        },
+    }));
+    return { type: 'text', props: baseProps, children: tspans };
+}
+//# sourceMappingURL=text-block.js.map

package/src/libs/renderer/src/svg/text-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-block.js","sourceRoot":"","sources":["../../../../../../renderer/src/svg/text-block.ts"],"names":[],"mappings":"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"}

package/src/libs/renderer/src/themes/color-mode.d.ts

@@ -0,0 +1,81 @@
+import type { Theme } from '../types/theme.types';
+/** The prop. `'system'` follows the OS and re-themes when it changes. */
+export type ColorMode = 'light' | 'dark' | 'system';
+/**
+ * The themes a renderer can switch BETWEEN. `light`/`dark` are required (they
+ * are what `colorMode` selects); the high-contrast pair is optional and only
+ * consulted when the user has actually asked for contrast.
+ */
+export interface ThemeSet {
+    light: Theme;
+    dark: Theme;
+    highContrastLight?: Theme;
+    highContrastDark?: Theme;
+}
+/** The OS-level preferences that decide which theme wins. */
+export interface ColorPreferences {
+    /** `prefers-color-scheme: dark` */
+    prefersDark: boolean;
+    /** `prefers-contrast: more` */
+    prefersContrast: boolean;
+    /** `forced-colors: active` — Windows High Contrast and friends. */
+    forcedColors: boolean;
+}
+export declare const MEDIA_PREFERS_DARK = "(prefers-color-scheme: dark)";
+export declare const MEDIA_PREFERS_CONTRAST = "(prefers-contrast: more)";
+export declare const MEDIA_FORCED_COLORS = "(forced-colors: active)";
+/**
+ * THE resolution rule, as one pure function.
+ *
+ *   1. `colorMode` picks the light/dark AXIS ('system' → the OS's answer).
+ *   2. An explicit contrast preference (`prefers-contrast: more`, or a forced-
+ *      colors mode) then upgrades that axis to the high-contrast theme, when the
+ *      caller supplied one. It is an UPGRADE, not a replacement: a user in dark
+ *      mode who wants more contrast gets high-contrast DARK, not a light flash.
+ *
+ * Note `forced-colors` ALSO gets a pure-CSS treatment (the variable block emits a
+ * system-colour override under `@media (forced-colors: active)`), because the OS
+ * palette must win even for a host that never passed a high-contrast theme. The
+ * two are complementary: this picks the best THEME we have; that guarantees the
+ * floor.
+ */
+export declare function resolveThemeFromPrefs(mode: ColorMode, prefs: ColorPreferences, themes: ThemeSet): Theme;
+/** Read the three OS preferences right now. */
+export declare function readColorPreferences(): ColorPreferences;
+/**
+ * Watches the OS preferences and calls back with the theme that should now be
+ * active. Owns its listeners; `dispose()` removes every one of them.
+ *
+ * It subscribes to the contrast/forced-colors queries even in explicit
+ * light/dark mode — those are ACCESSIBILITY preferences, and a user who turns on
+ * high contrast must be honoured whether or not the host let them choose a
+ * colour scheme.
+ */
+export declare class ColorModeController {
+    private mode;
+    private themes;
+    private readonly onTheme;
+    /** [query, listener] pairs, so dispose() can undo exactly what it did. */
+    private subscriptions;
+    /** Last theme handed to the callback — so a no-op change stays a no-op. */
+    private current?;
+    constructor(mode: ColorMode, themes: ThemeSet, onTheme: (theme: Theme) => void);
+    /** The theme the current mode + OS preferences resolve to. */
+    resolve(): Theme;
+    /** The mode this controller is following. */
+    getMode(): ColorMode;
+    /** Switch modes. Emits immediately if the resolved theme actually changed. */
+    setMode(mode: ColorMode): void;
+    /** Swap the theme SET (e.g. the host shipped its own light/dark pair). */
+    setThemes(themes: ThemeSet): void;
+    /**
+     * Push the current resolution to the callback. Deduped by identity: an OS
+     * change that does not change the ANSWER (contrast toggled while a host
+     * supplied no high-contrast theme) must not trigger a re-theme.
+     */
+    emit(): void;
+    /** Prime `current` without calling back — the renderer already has this theme. */
+    prime(theme: Theme): void;
+    dispose(): void;
+    private subscribe;
+}

package/src/libs/renderer/src/themes/color-mode.js

@@ -0,0 +1,158 @@
+"use strict";
+// colorMode — 'light' | 'dark' | 'system', with live OS auto-detection.
+//
+// Styling & theming, Card "colorMode with system auto-detection and hot-swap".
+//
+// We shipped a LIGHT theme and a DARK theme and no way to choose between them at
+// runtime: the caller had to know which one the OS wanted, pass it in, and watch
+// `prefers-color-scheme` itself. React Flow has had a `colorMode` prop (including
+// `'system'`) for years; GoJS's ThemeManager the same.
+//
+// WHAT THIS OWNS. The media queries and NOTHING else — it is a pure, DOM-only
+// subscription that reports "given the OS right now, which theme should be
+// active?". Applying that theme is the renderer's job (see
+// `SVGRenderer.applyThemeVariables`), which is what keeps this file testable and
+// framework-free.
+//
+// ACCESSIBILITY IS PART OF THE RESOLUTION, not a separate switch (Card
+// "design-token bridge + accessibility-aware theming"): a user who has asked for
+// more contrast, or who is in a forced-colors mode, must get the HIGH-CONTRAST
+// theme regardless of the colorMode the host requested — the a11y preference
+// outranks the aesthetic one. That decision lives in `resolveThemeFromPrefs`
+// below, so it is one pure function, unit-testable without a browser.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorModeController = exports.MEDIA_FORCED_COLORS = exports.MEDIA_PREFERS_CONTRAST = exports.MEDIA_PREFERS_DARK = void 0;
+exports.resolveThemeFromPrefs = resolveThemeFromPrefs;
+exports.readColorPreferences = readColorPreferences;
+exports.MEDIA_PREFERS_DARK = '(prefers-color-scheme: dark)';
+exports.MEDIA_PREFERS_CONTRAST = '(prefers-contrast: more)';
+exports.MEDIA_FORCED_COLORS = '(forced-colors: active)';
+/**
+ * THE resolution rule, as one pure function.
+ *
+ *   1. `colorMode` picks the light/dark AXIS ('system' → the OS's answer).
+ *   2. An explicit contrast preference (`prefers-contrast: more`, or a forced-
+ *      colors mode) then upgrades that axis to the high-contrast theme, when the
+ *      caller supplied one. It is an UPGRADE, not a replacement: a user in dark
+ *      mode who wants more contrast gets high-contrast DARK, not a light flash.
+ *
+ * Note `forced-colors` ALSO gets a pure-CSS treatment (the variable block emits a
+ * system-colour override under `@media (forced-colors: active)`), because the OS
+ * palette must win even for a host that never passed a high-contrast theme. The
+ * two are complementary: this picks the best THEME we have; that guarantees the
+ * floor.
+ */
+function resolveThemeFromPrefs(mode, prefs, themes) {
+    const dark = mode === 'system' ? prefs.prefersDark : mode === 'dark';
+    const wantsContrast = prefs.prefersContrast || prefs.forcedColors;
+    if (wantsContrast) {
+        const hc = dark ? themes.highContrastDark : themes.highContrastLight;
+        if (hc)
+            return hc;
+    }
+    return dark ? themes.dark : themes.light;
+}
+/** No `window` (SSR, Node tests): assume the plain light-mode defaults. */
+const NO_PREFS = { prefersDark: false, prefersContrast: false, forcedColors: false };
+function canQuery() {
+    return typeof window !== 'undefined' && typeof window.matchMedia === 'function';
+}
+/** Read the three OS preferences right now. */
+function readColorPreferences() {
+    var _a, _b, _c;
+    if (!canQuery())
+        return Object.assign({}, NO_PREFS);
+    return {
+        prefersDark: !!((_a = window.matchMedia(exports.MEDIA_PREFERS_DARK)) === null || _a === void 0 ? void 0 : _a.matches),
+        prefersContrast: !!((_b = window.matchMedia(exports.MEDIA_PREFERS_CONTRAST)) === null || _b === void 0 ? void 0 : _b.matches),
+        forcedColors: !!((_c = window.matchMedia(exports.MEDIA_FORCED_COLORS)) === null || _c === void 0 ? void 0 : _c.matches),
+    };
+}
+/**
+ * Watches the OS preferences and calls back with the theme that should now be
+ * active. Owns its listeners; `dispose()` removes every one of them.
+ *
+ * It subscribes to the contrast/forced-colors queries even in explicit
+ * light/dark mode — those are ACCESSIBILITY preferences, and a user who turns on
+ * high contrast must be honoured whether or not the host let them choose a
+ * colour scheme.
+ */
+class ColorModeController {
+    constructor(mode, themes, onTheme) {
+        /** [query, listener] pairs, so dispose() can undo exactly what it did. */
+        this.subscriptions = [];
+        this.mode = mode;
+        this.themes = themes;
+        this.onTheme = onTheme;
+        this.subscribe();
+    }
+    /** The theme the current mode + OS preferences resolve to. */
+    resolve() {
+        return resolveThemeFromPrefs(this.mode, readColorPreferences(), this.themes);
+    }
+    /** The mode this controller is following. */
+    getMode() {
+        return this.mode;
+    }
+    /** Switch modes. Emits immediately if the resolved theme actually changed. */
+    setMode(mode) {
+        this.mode = mode;
+        this.emit();
+    }
+    /** Swap the theme SET (e.g. the host shipped its own light/dark pair). */
+    setThemes(themes) {
+        this.themes = themes;
+        this.emit();
+    }
+    /**
+     * Push the current resolution to the callback. Deduped by identity: an OS
+     * change that does not change the ANSWER (contrast toggled while a host
+     * supplied no high-contrast theme) must not trigger a re-theme.
+     */
+    emit() {
+        const next = this.resolve();
+        if (next === this.current)
+            return;
+        this.current = next;
+        this.onTheme(next);
+    }
+    /** Prime `current` without calling back — the renderer already has this theme. */
+    prime(theme) {
+        this.current = theme;
+    }
+    dispose() {
+        for (const [query, listener] of this.subscriptions) {
+            // Safari < 14 only has the deprecated form; both are guarded because a
+            // jsdom MediaQueryList stub may implement neither.
+            if (typeof query.removeEventListener === 'function') {
+                query.removeEventListener('change', listener);
+            }
+            else if (typeof query.removeListener === 'function') {
+                query.removeListener(listener);
+            }
+        }
+        this.subscriptions = [];
+    }
+    subscribe() {
+        if (!canQuery())
+            return;
+        for (const media of [exports.MEDIA_PREFERS_DARK, exports.MEDIA_PREFERS_CONTRAST, exports.MEDIA_FORCED_COLORS]) {
+            const query = window.matchMedia(media);
+            if (!query)
+                continue;
+            const listener = () => this.emit();
+            if (typeof query.addEventListener === 'function') {
+                query.addEventListener('change', listener);
+            }
+            else if (typeof query.addListener === 'function') {
+                query.addListener(listener);
+            }
+            else {
+                continue; // unusable stub — nothing to unsubscribe later either
+            }
+            this.subscriptions.push([query, listener]);
+        }
+    }
+}
+exports.ColorModeController = ColorModeController;
+//# sourceMappingURL=color-mode.js.map

package/src/libs/renderer/src/themes/color-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-mode.js","sourceRoot":"","sources":["../../../../../../renderer/src/themes/color-mode.ts"],"names":[],"mappings":"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"}

package/src/libs/renderer/src/themes/contrast.d.ts

@@ -0,0 +1,67 @@
+/** WCAG 2.x conformance thresholds. */
+export declare const WCAG: {
+    /** Normal-size text, AA. */
+    readonly AA_TEXT: 4.5;
+    /** Large text (>=18pt, or >=14pt bold), AA. */
+    readonly AA_LARGE: 3;
+    /** Non-text UI: borders, focus rings, graphical objects (WCAG 1.4.11). */
+    readonly AA_NON_TEXT: 3;
+    /** Normal-size text, AAA. */
+    readonly AAA_TEXT: 7;
+    /** Large text, AAA. */
+    readonly AAA_LARGE: 4.5;
+};
+/** sRGB channels, 0-255. */
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/** HSL — the space the light↔dark flip has to happen in (see below). */
+export interface Hsl {
+    /** 0-360 */
+    h: number;
+    /** 0-1 */
+    s: number;
+    /** 0-1 */
+    l: number;
+}
+/**
+ * Parse the colour forms a theme can actually hold: `#rgb`, `#rgba`, `#rrggbb`,
+ * `#rrggbbaa`, `rgb()/rgba()`.
+ *
+ * `undefined` for anything else — a CSS system colour (`CanvasText`), a
+ * `var(--x)`, a gradient spec. Callers must SKIP those rather than pretend a
+ * ratio: a contrast claim about a value we cannot see is worse than no claim.
+ */
+export declare function parseColor(value: string): Rgb | undefined;
+/** `{r:255,g:0,b:0}` → `#ff0000`. */
+export declare function toHex({ r, g, b }: Rgb): string;
+/** WCAG relative luminance (0 = black, 1 = white). */
+export declare function relativeLuminance(color: Rgb): number;
+/**
+ * Contrast ratio between two colours, 1…21. `undefined` when either colour is
+ * not one we can parse (see {@link parseColor}).
+ */
+export declare function contrastRatio(a: string, b: string): number | undefined;
+/** Does this pair clear a threshold? Unparseable colours are NOT a pass. */
+export declare function meetsContrast(a: string, b: string, minimum: number): boolean;
+export declare function rgbToHsl({ r, g, b }: Rgb): Hsl;
+export declare function hslToRgb({ h, s, l }: Hsl): Rgb;
+/** HSL lightness of a colour, 0-1. Undefined for unparseable input. */
+export declare function lightnessOf(hex: string): number | undefined;
+/** Same hue and saturation, new lightness. The primitive the dark-flip is built on. */
+export declare function withLightness(hex: string, lightness: number): string;
+/**
+ * Push `foreground` away from `background` until it clears `minimum`.
+ *
+ * Walks in whichever direction the background is NOT (a light background darkens
+ * the foreground, a dark one lightens it) in fixed steps, and takes the first
+ * step that passes. Black/white are the endpoints, so on any real background
+ * this terminates with a passing colour — that is why the derived themes can be
+ * ASSERTED to conform rather than eyeballed.
+ *
+ * Returns the input untouched when it already passes, or when either colour is
+ * unparseable (nothing sensible to do — the audit will report it).
+ */
+export declare function ensureContrast(foreground: string, background: string, minimum: number): string;