@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/components/cell/cell-text-runs.js

@@ -0,0 +1,379 @@
+import React, { useCallback } from "react";
+import { Shape } from "react-konva";
+import { getStringifiedColor } from "../../themes";
+import { buildRichTextSegments, segmentsToLines, segmentToAtoms, } from "./rich-text";
+const BASELINE_OFFSET_FONT_SCALE = 0.58;
+/**
+ * Canvas `ctx.font` takes CSS font shorthand — a family name that needs
+ * quoting (leading digit, slash, etc.) makes the whole assignment
+ * silently no-op, leaving the PREVIOUS segment's font active. Quote
+ * anything that isn't a single safe identifier; generic families
+ * (sans-serif, serif, …) must stay unquoted to keep their generic
+ * meaning.
+ */
+const toCssFontFamily = (family) => family
+    .split(",")
+    .map((part) => {
+    const trimmed = part.trim().replace(/^["']|["']$/g, "");
+    if (!trimmed)
+        return "";
+    return /^[a-zA-Z][a-zA-Z0-9-]*$/.test(trimmed)
+        ? trimmed
+        : `"${trimmed.replace(/"/g, "")}"`;
+})
+    .filter(Boolean)
+    .join(", ");
+const buildFontString = (r) => {
+    const style = r.italic ? "italic" : "normal";
+    const weight = r.bold ? "bold" : "normal";
+    const family = r.fontFamily
+        ? `${toCssFontFamily(r.fontFamily)}, sans-serif`
+        : "sans-serif";
+    return `${style} ${weight} ${r.fontSize}px ${family}`;
+};
+/**
+ * Merge one segment's format overrides onto the resolved base style.
+ * Exported for unit tests; the sceneFunc below is the only runtime
+ * caller. `base.fontSize` is the un-scaled pixel size — when the
+ * merged style carries a `baselineOffset` (own or inherited from the
+ * base) the sup/sub font scale is applied here, exactly once.
+ */
+export const resolveSegmentStyle = (seg, base, theme) => {
+    const f = seg.format;
+    const baselineOffset = f.baselineOffset ?? base.baselineOffset;
+    const fontSize = typeof f.fontSize === "number"
+        ? (f.fontSize / pointFromPx(base.fontSize)) * base.fontSize
+        : base.fontSize;
+    return {
+        bold: f.bold ?? base.bold,
+        italic: f.italic ?? base.italic,
+        underline: f.underline ?? base.underline,
+        strikethrough: f.strikethrough ?? base.strikethrough,
+        color: f.color != null
+            ? getStringifiedColor(f.color, theme) || base.color
+            : base.color,
+        fontFamily: f.fontFamily ?? base.fontFamily,
+        // f.fontSize is in points to mirror the editor's TextFormat type,
+        // but at this paint layer everything is in pixels — scale ratio is
+        // applied by the caller via baseFontSize. For per-segment override
+        // we keep the relative point→px ratio from the cell base.
+        fontSize: baselineOffset
+            ? fontSize * BASELINE_OFFSET_FONT_SCALE
+            : fontSize,
+        baselineOffset,
+    };
+};
+/** Inverse of pointToPixel — used only when computing a per-segment scale. */
+const pointFromPx = (px) => px / 1.3333;
+/**
+ * Fraction of the em box above the alphabetic baseline for typical
+ * Latin fonts. Used to baseline-align mixed-size runs on one line:
+ * with `textBaseline="top"`, a run's baseline sits ~`fontSize * 0.8`
+ * below its draw y, so smaller runs shift down by
+ * `(lineFontSize - runFontSize) * 0.8` to share the line's baseline —
+ * matching how Excel lays out mixed-size rich text.
+ */
+const ALPHABETIC_BASELINE_RATIO = 0.8;
+/**
+ * Per-line box metrics for a resolved rich-text block. Exported for
+ * unit tests; the sceneFunc below is the only runtime caller.
+ */
+export const computeLineMetrics = (resolvedLines, baseFontSize, lineHeight) => {
+    const lineFontSizes = resolvedLines.map((rl) => rl.length ? Math.max(...rl.map(({ r }) => r.fontSize)) : baseFontSize);
+    const lineHeights = lineFontSizes.map((fs) => fs * lineHeight);
+    const totalHeight = lineHeights.reduce((a, b) => a + b, 0);
+    return { lineFontSizes, lineHeights, totalHeight };
+};
+/**
+ * Vertical draw position (textBaseline="top") for one segment within
+ * its line box. Normal runs share the line's alphabetic baseline
+ * (smaller runs shift down), superscript hugs the line top, subscript
+ * hugs the line bottom. All three reduce to `lineTop` when the run's
+ * size equals the line's. Exported for unit tests.
+ */
+export const computeSegmentTop = (lineTop, lineFontSize, segFontSize, baselineOffset) => {
+    if (baselineOffset === "superscript")
+        return lineTop;
+    if (baselineOffset === "subscript") {
+        return lineTop + (lineFontSize - segFontSize);
+    }
+    return lineTop + (lineFontSize - segFontSize) * ALPHABETIC_BASELINE_RATIO;
+};
+/**
+ * Sum of advance widths of a single line of resolved segments, using
+ * the supplied context's `measureText`. Mutates ctx font as it walks
+ * but the caller is expected to reset it after.
+ */
+const measureLineWidth = (ctx, lineSegments) => {
+    let total = 0;
+    for (const { seg, r } of lineSegments) {
+        ctx.setAttr("font", buildFontString(r));
+        total += ctx.measureText(seg.text).width;
+    }
+    return total;
+};
+/**
+ * Word-wrap one input line into multiple render lines, given the
+ * available width and a measurer that respects per-atom font. Each
+ * input line's atoms are walked greedy-left-to-right; when adding
+ * the next non-whitespace atom would exceed `maxWidth` we flush the
+ * accumulated atoms as a render line.
+ *
+ * Trailing whitespace is dropped before flushing so wrapped lines
+ * don't carry visible "tails" on the right. Lines that consist of a
+ * single oversized word (longer than `maxWidth` on its own) are kept
+ * intact — the renderer will clip them, matching Konva's behaviour.
+ */
+const wrapAtomsForWidth = (atoms, maxWidth, measure) => {
+    if (atoms.length === 0)
+        return [[]];
+    if (maxWidth <= 0)
+        return [atoms];
+    const result = [];
+    let line = [];
+    let lineWidth = 0;
+    const flushLine = () => {
+        // Strip trailing whitespace atoms from the line we're about to
+        // commit — they'd render past the wrap column otherwise.
+        while (line.length && line[line.length - 1].isWhitespace) {
+            line.pop();
+        }
+        result.push(line);
+        line = [];
+        lineWidth = 0;
+    };
+    for (const atom of atoms) {
+        const atomWidth = measure(atom);
+        if (lineWidth + atomWidth <= maxWidth) {
+            line.push(atom);
+            lineWidth += atomWidth;
+            continue;
+        }
+        if (atom.isWhitespace) {
+            // Whitespace that doesn't fit becomes the implicit line break.
+            flushLine();
+            continue;
+        }
+        if (line.length === 0) {
+            // Atom alone exceeds width — keep it on its own line; the
+            // renderer's right-edge clip will hide the overflow.
+            result.push([atom]);
+            lineWidth = 0;
+            continue;
+        }
+        flushLine();
+        line.push(atom);
+        lineWidth = atomWidth;
+    }
+    if (line.length)
+        result.push(line);
+    if (result.length === 0)
+        result.push([]);
+    return result;
+};
+/**
+ * Re-collapse a wrapped atom list back into render-segments. Adjacent
+ * atoms sharing the same format reference get merged so paint touches
+ * `measureText` and `fillText` once per contiguous style run, not
+ * once per word.
+ */
+const atomsToSegments = (atoms) => {
+    if (atoms.length === 0)
+        return [];
+    const out = [];
+    let current = {
+        text: atoms[0].text,
+        format: atoms[0].format,
+    };
+    for (let i = 1; i < atoms.length; i++) {
+        const atom = atoms[i];
+        if (atom.format === current.format) {
+            current = { text: current.text + atom.text, format: current.format };
+        }
+        else {
+            out.push(current);
+            current = { text: atom.text, format: atom.format };
+        }
+    }
+    out.push(current);
+    return out;
+};
+/**
+ * Custom Konva renderer for `TextFormatRun[]`. Konva's built-in `Text`
+ * only supports a single style per node, so we fall back to a raw
+ * `Shape` with a sceneFunc that paints each segment with its own
+ * font / fill / decoration.
+ *
+ * Constraints (callers must honour):
+ *  - No text wrap. The cell falls back to the single-style `Text`
+ *    when `wrapStrategy === "wrap"` so wrap semantics stay correct.
+ *  - No rotation / stacked / shrink-to-fit. Same fallback rule.
+ *  - Mention runs render as their inline label only (no chrome).
+ */
+export const CellTextRuns = React.memo((props) => {
+    const { x, y, width, height, padding, value, runs, baseColor, baseFontFamily, baseFontSize, baseBold, baseItalic, baseUnderline, baseStrikethrough, baseBaselineOffset, horizontalAlign, verticalAlign, lineHeight, wrap, theme, } = props;
+    const sceneFunc = useCallback((context, _shape) => {
+        const baseResolved = {
+            bold: baseBold,
+            italic: baseItalic,
+            underline: baseUnderline,
+            strikethrough: baseStrikethrough,
+            color: baseColor ?? "#000000",
+            fontFamily: baseFontFamily ?? "sans-serif",
+            fontSize: baseFontSize,
+            baselineOffset: baseBaselineOffset,
+        };
+        const segments = buildRichTextSegments(value, runs);
+        const inputLines = segmentsToLines(segments);
+        const innerTop = padding;
+        const innerBottom = height - padding;
+        const innerHeight = Math.max(0, innerBottom - innerTop);
+        const innerLeftPre = padding;
+        const innerRightPre = width - padding;
+        const innerWidthPre = Math.max(0, innerRightPre - innerLeftPre);
+        // Atom-measurer used by the wrap algorithm. Mutates ctx.font as
+        // it walks; the per-segment paint loop below sets it again per
+        // segment so the mutation here is safe.
+        const measureAtom = (atom) => {
+            const r = resolveSegmentStyle({ text: atom.text, format: atom.format }, baseResolved, theme);
+            context.setAttr("font", buildFontString(r));
+            return context.measureText(atom.text).width;
+        };
+        // Expand each \n-bounded input line into one or more render
+        // lines. When `wrap` is on, long lines get split on whitespace
+        // boundaries; otherwise each input line maps 1:1 to a render
+        // line and may visually clip at the right edge.
+        const lines = [];
+        for (const inputLine of inputLines) {
+            if (inputLine.length === 0) {
+                lines.push([]);
+                continue;
+            }
+            if (!wrap) {
+                lines.push(inputLine);
+                continue;
+            }
+            const atoms = [];
+            for (const seg of inputLine) {
+                for (const atom of segmentToAtoms(seg))
+                    atoms.push(atom);
+            }
+            const wrapped = wrapAtomsForWidth(atoms, innerWidthPre, measureAtom);
+            for (const wrappedLine of wrapped) {
+                lines.push(atomsToSegments(wrappedLine));
+            }
+        }
+        // We use textBaseline="top" so y values are the visual top of
+        // each line. Konva's Text positions text by line-box height
+        // (fontSize * lineHeight) and aligns the *box* — not the
+        // alphabetic baseline — within the cell. Matching that math
+        // exactly is what keeps rich-text cells visually flush with
+        // their plain-text neighbours.
+        //
+        // Each line's box is sized by its largest resolved run — Excel
+        // grows a mixed-size line to its tallest glyph — mirroring the
+        // sizer's `measureRichTextDimensions`. When every run matches
+        // the base font size this reduces to `baseFontSize * lineHeight`
+        // per line, i.e. exactly Konva Text's single-style layout.
+        const resolvedLines = lines.map((lineSegments) => lineSegments.map((seg) => ({
+            seg,
+            r: resolveSegmentStyle(seg, baseResolved, theme),
+        })));
+        const { lineFontSizes, lineHeights, totalHeight: totalH } = computeLineMetrics(resolvedLines, baseFontSize, lineHeight);
+        let topY;
+        if (verticalAlign === "top") {
+            topY = innerTop;
+        }
+        else if (verticalAlign === "bottom") {
+            topY = innerBottom - totalH;
+        }
+        else {
+            // middle
+            topY = innerTop + (innerHeight - totalH) / 2;
+        }
+        const innerLeft = innerLeftPre;
+        const innerRight = innerRightPre;
+        const innerWidth = innerWidthPre;
+        context.setAttr("textBaseline", "top");
+        let lineOffsetY = 0;
+        for (let i = 0; i < resolvedLines.length; i++) {
+            const lineSegments = resolvedLines[i];
+            const lineFontSize = lineFontSizes[i];
+            const lineH = lineHeights[i];
+            const lineOffset = lineOffsetY;
+            lineOffsetY += lineH;
+            if (lineSegments.length === 0)
+                continue;
+            // Measure line first so we can do horizontal alignment +
+            // simple clipping at the right edge.
+            const lineWidth = measureLineWidth(context, lineSegments);
+            let startX;
+            if (horizontalAlign === "right") {
+                startX = innerRight - Math.min(lineWidth, innerWidth);
+            }
+            else if (horizontalAlign === "center") {
+                startX =
+                    innerLeft + (innerWidth - Math.min(lineWidth, innerWidth)) / 2;
+            }
+            else {
+                startX = innerLeft;
+            }
+            let cursorX = startX;
+            // Konva centers the glyph baseline inside the line-box: the
+            // box is `lineH` tall, the glyphs are ~`fontSize` tall, so
+            // there's a (lineH - fontSize)/2 sliver above and below. Shift
+            // our top-anchored draw down by that sliver so the glyph
+            // centerline lands where Konva's would.
+            const lineTop = topY + lineOffset + (lineH - lineFontSize) / 2;
+            for (const { seg, r } of lineSegments) {
+                const font = buildFontString(r);
+                context.setAttr("font", font);
+                context.setAttr("fillStyle", r.color);
+                const segWidth = context.measureText(seg.text).width;
+                const segmentTop = computeSegmentTop(lineTop, lineFontSize, r.fontSize, r.baselineOffset);
+                // textBaseline="top" → glyphs paint downward from lineTop.
+                context.fillText(seg.text, cursorX, segmentTop);
+                // Underline / strikethrough are drawn manually because canvas
+                // 2D has no native textDecoration. Positions are relative to
+                // the line-top using approximate font-metric ratios.
+                const decorationThickness = Math.max(1, Math.floor(r.fontSize / 14));
+                if (r.underline) {
+                    const underlineY = segmentTop + r.fontSize * 0.95;
+                    context.fillRect(cursorX, underlineY, segWidth, decorationThickness);
+                }
+                if (r.strikethrough) {
+                    const strikeY = segmentTop + r.fontSize * 0.5;
+                    context.fillRect(cursorX, strikeY, segWidth, decorationThickness);
+                }
+                cursorX += segWidth;
+                // Clip at right edge — once we run past `innerRight`, the
+                // remaining segments would only paint outside the cell. The
+                // Konva Shape's bounding rect already clips, but skipping
+                // saves measure + paint cost on long values.
+                if (cursorX > innerRight)
+                    break;
+            }
+        }
+    }, [
+        value,
+        runs,
+        baseColor,
+        baseFontFamily,
+        baseFontSize,
+        baseBold,
+        baseItalic,
+        baseUnderline,
+        baseStrikethrough,
+        baseBaselineOffset,
+        horizontalAlign,
+        verticalAlign,
+        lineHeight,
+        wrap,
+        width,
+        height,
+        padding,
+        theme,
+    ]);
+    return (React.createElement(Shape, { x: x, y: y, width: width, height: height, sceneFunc: sceneFunc, listening: false, perfectDrawEnabled: false }));
+});
+CellTextRuns.displayName = "CellTextRuns";

package/dist/esm/components/cell/helpers.d.ts

@@ -0,0 +1,3 @@
+export declare const getLeftSpacing: (isCalculatedCell: boolean | undefined, expandable: boolean | undefined, showExpand: boolean | undefined, iconSpacing?: number, scale?: number) => number;
+export declare const getRightSpacing: (showFilter: boolean | undefined | null, showArrow: boolean | undefined | null, showExpand: boolean | undefined | null, iconSpacing?: number, scale?: number) => number;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/esm/components/cell/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../components/cell/helpers.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,cAAc,GACzB,kBAAkB,OAAO,GAAG,SAAS,EACrC,YAAY,OAAO,GAAG,SAAS,EAC/B,YAAY,OAAO,GAAG,SAAS,EAC/B,cAAa,MAAU,EACvB,QAAO,MAAU,WAOlB,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,YAAY,OAAO,GAAG,SAAS,GAAG,IAAI,EACtC,WAAW,OAAO,GAAG,SAAS,GAAG,IAAI,EACrC,YAAY,OAAO,GAAG,SAAS,GAAG,IAAI,EACtC,cAAa,MAAU,EACvB,QAAO,MAAU,WAOlB,CAAC"}

package/dist/esm/components/cell/helpers.js

@@ -0,0 +1,11 @@
+import { ARROW_DOWN_WIDTH, CALCULATED_ICON_WIDTH, EXPAND_COLLAPSE_ICON_WIDTH, FILTER_ICON_WIDTH, } from "../../config";
+export const getLeftSpacing = (isCalculatedCell, expandable, showExpand, iconSpacing = 0, scale = 1) => {
+    return ((isCalculatedCell ? (CALCULATED_ICON_WIDTH + iconSpacing) * scale : 0) +
+        (expandable ? (EXPAND_COLLAPSE_ICON_WIDTH + iconSpacing) * scale : 0) +
+        (showExpand ? (ARROW_DOWN_WIDTH + iconSpacing) * scale : 0));
+};
+export const getRightSpacing = (showFilter, showArrow, showExpand, iconSpacing = 0, scale = 1) => {
+    return ((showFilter ? (FILTER_ICON_WIDTH + iconSpacing) * scale : 0) +
+        (showArrow ? (ARROW_DOWN_WIDTH + iconSpacing) * scale : 0) +
+        (showExpand ? (ARROW_DOWN_WIDTH + iconSpacing) * scale : 0));
+};

package/dist/esm/components/cell/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { CellProps } from "./typings";
+export declare const Cell: React.MemoExoticComponent<(props: CellProps) => React.JSX.Element>;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/cell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAwCjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAU3C,eAAO,MAAM,IAAI,oCAAgB,SAAS,uBAsmBxC,CAAC"}