@rowsncolumns/spreadsheet 10.6.0 → 10.6.5

package/dist/cjs/components/cell/alignment.js

@@ -3,7 +3,7 @@
 // (scale font down when text overflows) and textRotation (numeric degrees
 // or stacked "vertical" layout).
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRotatedTextLayout = exports.stackTextVertically = exports.getKonvaRotationDegrees = exports.computeShrinkToFitFontSize = exports.fillCellText = exports.isFillAlignment = exports.alignmentImpliesWrap = exports.resolveCanvasTextAlign = void 0;
+exports.getScriptTextOffsetY = exports.getScriptBaselineShift = exports.SUBSCRIPT_DROP_EM = exports.SUPERSCRIPT_RISE_EM = exports.layoutDistributedLines = exports.getRotatedTextLayout = exports.stackTextVertically = exports.getKonvaRotationDegrees = exports.computeShrinkToFitFontSize = exports.fillCellText = exports.isFillAlignment = exports.getUnderlineStrokes = exports.resolveReadingOrderAlignment = exports.getVerticalSpreadLineHeight = exports.resolveCanvasVerticalAlign = exports.verticalAlignmentImpliesWrap = exports.alignmentImpliesWrap = exports.resolveCanvasTextAlign = void 0;
 var tslib_1 = require("tslib");
 /**
  * Map a cell's `horizontalAlignment` onto the canvas text alignment. Excel's
@@ -36,6 +36,74 @@ exports.resolveCanvasTextAlign = resolveCanvasTextAlign;
  */
 var utils_1 = require("@rowsncolumns/utils");
 Object.defineProperty(exports, "alignmentImpliesWrap", { enumerable: true, get: function () { return utils_1.alignmentImpliesWrap; } });
+Object.defineProperty(exports, "verticalAlignmentImpliesWrap", { enumerable: true, get: function () { return utils_1.verticalAlignmentImpliesWrap; } });
+/**
+ * Map a cell's `verticalAlignment` onto the canvas text node. Excel's
+ * vertical `justify` spreads wrapped lines from the top edge to the bottom
+ * one and `distributed` does the same with the free space split above and
+ * below — so a single line sits at the top (justify) or the middle
+ * (distributed). {@link getVerticalSpreadLineHeight} spreads the lines.
+ */
+var resolveCanvasVerticalAlign = function (align) {
+    switch (align) {
+        case "top":
+        case "justify":
+            return "top";
+        case "middle":
+        case "distributed":
+            return "middle";
+        default:
+            return "bottom";
+    }
+};
+exports.resolveCanvasVerticalAlign = resolveCanvasVerticalAlign;
+/**
+ * Line-height multiplier that spreads `lineCount` wrapped lines over
+ * `availableHeight` (Excel's vertical justify / distributed). Never tighter
+ * than the font's own `baseLineHeight`; one line keeps it.
+ */
+var getVerticalSpreadLineHeight = function (lineCount, availableHeight, fontSize, baseLineHeight) {
+    if (lineCount < 2 || fontSize <= 0)
+        return baseLineHeight;
+    var spread = availableHeight / (lineCount * fontSize);
+    return Math.max(baseLineHeight, spread);
+};
+exports.getVerticalSpreadLineHeight = getVerticalSpreadLineHeight;
+/**
+ * The default horizontal alignment of a cell with no explicit one, under
+ * its text direction (Format Cells → Alignment → Text direction). A
+ * right-to-left reading order starts text at the right edge, as Excel does;
+ * the value-driven default (numbers right) otherwise stands.
+ */
+var resolveReadingOrderAlignment = function (readingOrder, defaultAlignment) {
+    return readingOrder === "rtl" && (!defaultAlignment || defaultAlignment === "left")
+        ? "right"
+        : defaultAlignment;
+};
+exports.resolveReadingOrderAlignment = resolveReadingOrderAlignment;
+/**
+ * The strokes Excel draws for an underline type (Format Cells → Font →
+ * Underline). `single` / `double` run under the text; the accounting types
+ * run the width of the cell, lower, clear of the descenders. `baselineY` is
+ * the text baseline, `fontSize` in canvas pixels.
+ */
+var getUnderlineStrokes = function (_a) {
+    var style = _a.style, textX = _a.textX, textWidth = _a.textWidth, cellX = _a.cellX, cellWidth = _a.cellWidth, baselineY = _a.baselineY, fontSize = _a.fontSize, scale = _a.scale;
+    var gap = Math.max(2 * scale, Math.round(fontSize * 0.12));
+    var accounting = style === "singleAccounting" || style === "doubleAccounting";
+    var _b = tslib_1.__read(accounting
+        ? [cellX + scale, cellX + cellWidth - scale]
+        : [textX, textX + textWidth], 2), x1 = _b[0], x2 = _b[1];
+    var y = accounting
+        ? baselineY + Math.round(fontSize * 0.22)
+        : baselineY + Math.max(scale, Math.round(fontSize * 0.1));
+    var strokes = [{ x1: x1, x2: x2, y: y }];
+    if (style === "double" || style === "doubleAccounting") {
+        strokes.push({ x1: x1, x2: x2, y: y + gap });
+    }
+    return strokes;
+};
+exports.getUnderlineStrokes = getUnderlineStrokes;
 /**
  * Excel's `fill` alignment keeps the text inside the cell too: the value is
  * repeated to the cell edge and never spills into the neighbour.
@@ -190,3 +258,116 @@ var getRotatedTextLayout = function (_a) {
     };
 };
 exports.getRotatedTextLayout = getRotatedTextLayout;
+/**
+ * Excel's horizontal `distributed` alignment: the text wraps at word
+ * boundaries and every line — the last one too — spreads its words from the
+ * left edge to the right one; a line holding a single word is centred
+ * (Format Cells ▸ Alignment ▸ Horizontal ▸ Distributed (Indent)). Returns
+ * the words of each line with their x inside `width`.
+ */
+var layoutDistributedLines = function (text, width, measure) {
+    var e_1, _a;
+    var spaceWidth = measure(" ");
+    var lines = [];
+    var _loop_1 = function (paragraph) {
+        var e_2, _d;
+        var words = paragraph.split(/\s+/).filter(Boolean);
+        var line = [];
+        var lineWidth = 0;
+        var flush = function () {
+            if (!line.length) {
+                lines.push([]);
+                return;
+            }
+            var used = line.reduce(function (total, word) { return total + word.width; }, 0);
+            if (line.length === 1) {
+                lines.push([
+                    { text: line[0].text, x: Math.max(0, (width - used) / 2) },
+                ]);
+            }
+            else {
+                var gap_1 = Math.max(spaceWidth, (width - used) / (line.length - 1));
+                var cursor_1 = 0;
+                lines.push(line.map(function (word) {
+                    var placed = { text: word.text, x: cursor_1 };
+                    cursor_1 += word.width + gap_1;
+                    return placed;
+                }));
+            }
+            line = [];
+            lineWidth = 0;
+        };
+        try {
+            for (var words_1 = (e_2 = void 0, tslib_1.__values(words)), words_1_1 = words_1.next(); !words_1_1.done; words_1_1 = words_1.next()) {
+                var word = words_1_1.value;
+                var wordWidth = measure(word);
+                var next = line.length === 0 ? wordWidth : lineWidth + spaceWidth + wordWidth;
+                if (line.length > 0 && next > width)
+                    flush();
+                lineWidth = line.length === 0 ? wordWidth : lineWidth + spaceWidth + wordWidth;
+                line.push({ text: word, width: wordWidth });
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (words_1_1 && !words_1_1.done && (_d = words_1.return)) _d.call(words_1);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        flush();
+    };
+    try {
+        for (var _b = tslib_1.__values(text.split("\n")), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var paragraph = _c.value;
+            _loop_1(paragraph);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return lines;
+};
+exports.layoutDistributedLines = layoutDistributedLines;
+/**
+ * Excel's superscript sits on a baseline raised by a third of the line's
+ * font size, subscript on one dropped by about a seventh (Format Cells ▸
+ * Font ▸ Effects): a true baseline shift, not the glyphs pushed to the top
+ * or bottom of the cell.
+ */
+exports.SUPERSCRIPT_RISE_EM = 0.33;
+exports.SUBSCRIPT_DROP_EM = 0.14;
+/** Baseline shift (px, down positive) of a sup/sub run on a `lineFontSize` line. */
+var getScriptBaselineShift = function (baselineOffset, lineFontSize) {
+    return baselineOffset === "superscript"
+        ? -exports.SUPERSCRIPT_RISE_EM * lineFontSize
+        : baselineOffset === "subscript"
+            ? exports.SUBSCRIPT_DROP_EM * lineFontSize
+            : 0;
+};
+exports.getScriptBaselineShift = getScriptBaselineShift;
+/** Distance from a Konva line box's top to its alphabetic baseline, ≈. */
+var BASELINE_BELOW_CENTRE_EM = 0.35;
+/**
+ * Konva `offsetY` (up positive) for a cell whose whole text is superscript /
+ * subscript: the text node draws the smaller script font aligned like the
+ * cell, and this moves its baseline to where Excel puts it — the base
+ * font's baseline in that alignment, shifted by
+ * {@link getScriptBaselineShift}.
+ */
+var getScriptTextOffsetY = function (_a) {
+    var baselineOffset = _a.baselineOffset, verticalAlign = _a.verticalAlign, baseFontSize = _a.baseFontSize, scriptFontSize = _a.scriptFontSize, lineHeight = _a.lineHeight;
+    if (baselineOffset !== "superscript" && baselineOffset !== "subscript") {
+        return 0;
+    }
+    var boxDelta = ((baseFontSize - scriptFontSize) * lineHeight) / 2;
+    var centreDelta = BASELINE_BELOW_CENTRE_EM * (baseFontSize - scriptFontSize);
+    var alignDelta = verticalAlign === "top" ? boxDelta : verticalAlign === "bottom" ? -boxDelta : 0;
+    var down = alignDelta + centreDelta + (0, exports.getScriptBaselineShift)(baselineOffset, baseFontSize);
+    return -down;
+};
+exports.getScriptTextOffsetY = getScriptTextOffsetY;

package/dist/cjs/components/cell/cell-background.d.ts

@@ -1,6 +1,8 @@
 import type { RendererProps } from "@rowsncolumns/grid";
 import React from "react";
 import type { FillPattern, GradientFill } from "../../types";
+/** Excel's Automatic pattern colour: a pattern with no colour of its own. */
+export declare const AUTOMATIC_PATTERN_COLOR = "#000000";
 type CellBackgroundProps = RendererProps & {
     backgroundColor?: string;
     defaultBackgroundColor: string;
@@ -10,6 +12,22 @@ type CellBackgroundProps = RendererProps & {
     foregroundColor?: string;
     gradient?: GradientFill | null;
 };
+export type PathGradientRegion = {
+    /** Polygon to fill, in shape coordinates. */
+    points: [number, number][];
+    /** Gradient axis: inner stop at (x0, y0), outer stop at (x1, y1). */
+    axis: [number, number, number, number];
+};
+/**
+ * Excel's path gradient over the rectangle `[x0, y0]–[x1, y1]`: the core
+ * rectangle (inner stop colour) and four trapezoids cut along the
+ * core-to-corner diagonals, each a linear gradient from the core edge out
+ * to its cell edge — together, concentric rectangles of colour.
+ */
+export declare const getPathGradientRegions: (gradient: Pick<GradientFill, "left" | "right" | "top" | "bottom">, x0: number, y0: number, x1: number, y1: number) => {
+    core: [number, number, number, number];
+    regions: PathGradientRegion[];
+};
 export declare const CellBackground: ({ x, y, width, height, backgroundColor, defaultBackgroundColor, scale, showGridLines, isMergedCell, fillPattern, foregroundColor, gradient, }: CellBackgroundProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=cell-background.d.ts.map

package/dist/cjs/components/cell/cell-background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cell-background.d.ts","sourceRoot":"","sources":["../../../../components/cell/cell-background.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE7D,KAAK,mBAAmB,GAAG,aAAa,GAAG;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CAChC,CAAC;AAmFF,eAAO,MAAM,cAAc,GAAI,+IAa5B,mBAAmB,sBA2FrB,CAAC"}
+{"version":3,"file":"cell-background.d.ts","sourceRoot":"","sources":["../../../../components/cell/cell-background.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE7D,6EAA6E;AAC7E,eAAO,MAAM,uBAAuB,YAAY,CAAC;AAEjD,KAAK,mBAAmB,GAAG,aAAa,GAAG;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CAChC,CAAC;AAWF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,6CAA6C;IAC7C,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IAC3B,qEAAqE;IACrE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CACxC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GACjC,UAAU,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC,EACjE,IAAI,MAAM,EACV,IAAI,MAAM,EACV,IAAI,MAAM,EACV,IAAI,MAAM,KACT;IAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAAC,OAAO,EAAE,kBAAkB,EAAE,CAAA;CAoDzE,CAAC;AAkFF,eAAO,MAAM,cAAc,GAAI,+IAa5B,mBAAmB,sBAmGrB,CAAC"}

package/dist/cjs/components/cell/cell-background.js

@@ -1,40 +1,139 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CellBackground = void 0;
+exports.CellBackground = exports.getPathGradientRegions = exports.AUTOMATIC_PATTERN_COLOR = void 0;
 var tslib_1 = require("tslib");
 var utils_1 = require("@rowsncolumns/utils");
 var react_1 = tslib_1.__importDefault(require("react"));
 var react_konva_1 = require("react-konva");
 var fill_patterns_1 = require("../../api/fill-patterns");
-// Build a CanvasGradient matching the OOXML <gradientFill> spec.
-// linear: `degree` rotates the axis (0 = left→right, 90 = top→bottom,
-//   180 = right→left, 270 = bottom→top). Excel's axis runs through the
-//   cell's centroid at the given angle and the gradient spans the full
-//   cell along it.
-// path: rectangular radial — `left`/`right`/`top`/`bottom` (each 0..1)
-//   describe the inset of the inner stop's "core" rectangle. We
-//   approximate as a single radial gradient anchored at that core's
-//   center, with radius = distance to the farthest corner.
+/** Excel's Automatic pattern colour: a pattern with no colour of its own. */
+exports.AUTOMATIC_PATTERN_COLOR = "#000000";
+/**
+ * Excel's path gradient over the rectangle `[x0, y0]–[x1, y1]`: the core
+ * rectangle (inner stop colour) and four trapezoids cut along the
+ * core-to-corner diagonals, each a linear gradient from the core edge out
+ * to its cell edge — together, concentric rectangles of colour.
+ */
+var getPathGradientRegions = function (gradient, x0, y0, x1, y1) {
+    var _a, _b, _c, _d;
+    var width = x1 - x0;
+    var height = y1 - y0;
+    var cl = x0 + ((_a = gradient.left) !== null && _a !== void 0 ? _a : 0) * width;
+    var cr = x1 - ((_b = gradient.right) !== null && _b !== void 0 ? _b : 0) * width;
+    var ct = y0 + ((_c = gradient.top) !== null && _c !== void 0 ? _c : 0) * height;
+    var cb = y1 - ((_d = gradient.bottom) !== null && _d !== void 0 ? _d : 0) * height;
+    var coreLeft = Math.min(cl, cr);
+    var coreRight = Math.max(cl, cr);
+    var coreTop = Math.min(ct, cb);
+    var coreBottom = Math.max(ct, cb);
+    return {
+        core: [coreLeft, coreTop, coreRight, coreBottom],
+        regions: [
+            {
+                points: [
+                    [x0, y0],
+                    [x1, y0],
+                    [coreRight, coreTop],
+                    [coreLeft, coreTop],
+                ],
+                axis: [coreLeft, coreTop, coreLeft, y0],
+            },
+            {
+                points: [
+                    [x1, y0],
+                    [x1, y1],
+                    [coreRight, coreBottom],
+                    [coreRight, coreTop],
+                ],
+                axis: [coreRight, coreTop, x1, coreTop],
+            },
+            {
+                points: [
+                    [x1, y1],
+                    [x0, y1],
+                    [coreLeft, coreBottom],
+                    [coreRight, coreBottom],
+                ],
+                axis: [coreLeft, coreBottom, coreLeft, y1],
+            },
+            {
+                points: [
+                    [x0, y1],
+                    [x0, y0],
+                    [coreLeft, coreTop],
+                    [coreLeft, coreBottom],
+                ],
+                axis: [coreLeft, coreTop, x0, coreTop],
+            },
+        ],
+    };
+};
+exports.getPathGradientRegions = getPathGradientRegions;
+var addStops = function (canvasGrad, gradient) {
+    var e_1, _a;
+    try {
+        for (var _b = tslib_1.__values(gradient.stops), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var stop_1 = _c.value;
+            // Clamp position to [0,1] — Canvas API rejects out-of-range values.
+            var pos = Math.max(0, Math.min(1, stop_1.position));
+            try {
+                canvasGrad.addColorStop(pos, stop_1.color);
+            }
+            catch (_d) {
+                // Invalid color string — skip rather than blow up the render.
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+};
+var paintPathGradient = function (context, native, gradient, rect) {
+    var e_2, _a;
+    var _b = exports.getPathGradientRegions.apply(void 0, tslib_1.__spreadArray([gradient], tslib_1.__read(rect), false)), core = _b.core, regions = _b.regions;
+    var sorted = tslib_1.__spreadArray([], tslib_1.__read(gradient.stops), false).sort(function (a, b) { return a.position - b.position; });
+    context.setAttr("fillStyle", sorted[0].color);
+    context.fillRect(core[0], core[1], core[2] - core[0], core[3] - core[1]);
+    try {
+        for (var regions_1 = tslib_1.__values(regions), regions_1_1 = regions_1.next(); !regions_1_1.done; regions_1_1 = regions_1.next()) {
+            var region = regions_1_1.value;
+            var _c = tslib_1.__read(region.axis, 4), ax0 = _c[0], ay0 = _c[1], ax1 = _c[2], ay1 = _c[3];
+            if (ax0 === ax1 && ay0 === ay1)
+                continue;
+            var canvasGrad = native.createLinearGradient(ax0, ay0, ax1, ay1);
+            addStops(canvasGrad, gradient);
+            context.beginPath();
+            region.points.forEach(function (_a, index) {
+                var _b = tslib_1.__read(_a, 2), px = _b[0], py = _b[1];
+                return index ? context.lineTo(px, py) : context.moveTo(px, py);
+            });
+            context.closePath();
+            context.setAttr("fillStyle", canvasGrad);
+            context.fill();
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (regions_1_1 && !regions_1_1.done && (_a = regions_1.return)) _a.call(regions_1);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+};
 var buildCanvasGradient = function (native, gradient, width, height) {
-    var e_1, _a, e_2, _b;
-    var _c, _d, _e, _f, _g, _h;
-    if (!((_c = gradient.stops) === null || _c === void 0 ? void 0 : _c.length))
+    var e_3, _a;
+    var _b, _c;
+    if (!((_b = gradient.stops) === null || _b === void 0 ? void 0 : _b.length))
         return null;
     var canvasGrad;
-    if (gradient.type === "path") {
-        var left = (_d = gradient.left) !== null && _d !== void 0 ? _d : 0;
-        var right = (_e = gradient.right) !== null && _e !== void 0 ? _e : 0;
-        var top_1 = (_f = gradient.top) !== null && _f !== void 0 ? _f : 0;
-        var bottom = (_g = gradient.bottom) !== null && _g !== void 0 ? _g : 0;
-        var cx = ((left + (1 - right)) / 2) * width;
-        var cy = ((top_1 + (1 - bottom)) / 2) * height;
-        var farthestCorner = Math.max(Math.hypot(cx, cy), Math.hypot(width - cx, cy), Math.hypot(cx, height - cy), Math.hypot(width - cx, height - cy));
-        canvasGrad = native.createRadialGradient(cx, cy, 0, cx, cy, farthestCorner || 1);
-    }
-    else {
+    {
         // Linear. Map degrees → axis vector. Excel: degree=0 runs the
         // gradient from LEFT to RIGHT. degree increases clockwise.
-        var deg = ((((_h = gradient.degree) !== null && _h !== void 0 ? _h : 0) % 360) + 360) % 360;
+        var deg = ((((_c = gradient.degree) !== null && _c !== void 0 ? _c : 0) % 360) + 360) % 360;
         var rad = (deg * Math.PI) / 180;
         // Project the axis through the rect's center; the start/end points
         // are where that axis exits the bounding box (handled by computing
@@ -53,7 +152,7 @@ var buildCanvasGradient = function (native, gradient, width, height) {
         var maxProj = -Infinity;
         try {
             for (var corners_1 = tslib_1.__values(corners), corners_1_1 = corners_1.next(); !corners_1_1.done; corners_1_1 = corners_1.next()) {
-                var _j = tslib_1.__read(corners_1_1.value, 2), px = _j[0], py = _j[1];
+                var _d = tslib_1.__read(corners_1_1.value, 2), px = _d[0], py = _d[1];
                 var proj = (px - cx) * dx + (py - cy) * dy;
                 if (proj < minProj)
                     minProj = proj;
@@ -61,12 +160,12 @@ var buildCanvasGradient = function (native, gradient, width, height) {
                     maxProj = proj;
             }
         }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
         finally {
             try {
                 if (corners_1_1 && !corners_1_1.done && (_a = corners_1.return)) _a.call(corners_1);
             }
-            finally { if (e_1) throw e_1.error; }
+            finally { if (e_3) throw e_3.error; }
         }
         var x0 = cx + dx * minProj;
         var y0 = cy + dy * minProj;
@@ -74,26 +173,7 @@ var buildCanvasGradient = function (native, gradient, width, height) {
         var y1 = cy + dy * maxProj;
         canvasGrad = native.createLinearGradient(x0, y0, x1, y1);
     }
-    try {
-        for (var _k = tslib_1.__values(gradient.stops), _l = _k.next(); !_l.done; _l = _k.next()) {
-            var stop_1 = _l.value;
-            // Clamp position to [0,1] — Canvas API rejects out-of-range values.
-            var pos = Math.max(0, Math.min(1, stop_1.position));
-            try {
-                canvasGrad.addColorStop(pos, stop_1.color);
-            }
-            catch (_m) {
-                // Invalid color string — skip rather than blow up the render.
-            }
-        }
-    }
-    catch (e_2_1) { e_2 = { error: e_2_1 }; }
-    finally {
-        try {
-            if (_l && !_l.done && (_b = _k.return)) _b.call(_k);
-        }
-        finally { if (e_2) throw e_2.error; }
-    }
+    addStops(canvasGrad, gradient);
     return canvasGrad;
 };
 var CellBackground = function (_a) {
@@ -119,13 +199,17 @@ var CellBackground = function (_a) {
         // bgColor is ignored when pattern=solid). For "none" or absent, fall
         // back to the regular backgroundColor path.
         var useSolid = fillPattern === "solid" && foregroundColor;
-        var useTile = fillPattern &&
-            fillPattern !== "solid" &&
-            fillPattern !== "none" &&
-            foregroundColor;
+        var useTile = fillPattern && fillPattern !== "solid" && fillPattern !== "none";
         var useGradient = !!gradient && ((_c = (_b = gradient.stops) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0;
         var native = context._context;
-        if (useGradient && native) {
+        var fillRectArea = (isMergedCell || !showFaintBorder) && showGridLines
+            ? [1, 1, shape.width(), shape.height()]
+            : [0, 0, shape.width() + 1, shape.height() + 1];
+        var usePathGradient = useGradient && native && gradient.type === "path";
+        if (usePathGradient) {
+            paintPathGradient(context, native, gradient, fillRectArea);
+        }
+        else if (useGradient && native) {
             var canvasGrad = buildCanvasGradient(native, gradient, shape.width(), shape.height());
             if (canvasGrad) {
                 context.setAttr("fillStyle", canvasGrad);
@@ -138,7 +222,7 @@ var CellBackground = function (_a) {
             context.setAttr("fillStyle", foregroundColor);
         }
         else if (useTile) {
-            var tile = (0, fill_patterns_1.getPatternCanvas)(fillPattern, foregroundColor, backgroundColor);
+            var tile = (0, fill_patterns_1.getPatternCanvas)(fillPattern, foregroundColor !== null && foregroundColor !== void 0 ? foregroundColor : exports.AUTOMATIC_PATTERN_COLOR, backgroundColor);
             var ctxPattern = tile && (native === null || native === void 0 ? void 0 : native.createPattern(tile, "repeat"));
             if (ctxPattern) {
                 context.setAttr("fillStyle", ctxPattern);
@@ -150,11 +234,13 @@ var CellBackground = function (_a) {
         else {
             context.setAttr("fillStyle", finalBackgroundColor);
         }
-        if ((isMergedCell || !showFaintBorder) && showGridLines) {
-            context.fillRect(1, 1, shape.width() - 1, shape.height() - 1);
-        }
-        else {
-            context.fillRect(0, 0, shape.width() + 1, shape.height() + 1);
+        if (!usePathGradient) {
+            if ((isMergedCell || !showFaintBorder) && showGridLines) {
+                context.fillRect(1, 1, shape.width() - 1, shape.height() - 1);
+            }
+            else {
+                context.fillRect(0, 0, shape.width() + 1, shape.height() + 1);
+            }
         }
         if (showFaintBorder) {
             var lightColor = (0, utils_1.lightenColor)(-0.1, backgroundColor);

package/dist/cjs/components/cell/cell-backgrounds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cell-backgrounds.d.ts","sourceRoot":"","sources":["../../../../components/cell/cell-backgrounds.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGxD,OAAO,KAAkB,MAAM,OAAO,CAAC;AAkBvC,MAAM,WAAW,oBAAoB;IACnC,mGAAmG;IACnG,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,uFAAuF;IACvF,SAAS,EAAE,CACT,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC;IACnC,8FAA8F;IAC9F,YAAY,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IAC3E,sBAAsB,EAAE,MAAM,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,mFAO7B,oBAAoB,sBAiHtB,CAAC"}
+{"version":3,"file":"cell-backgrounds.d.ts","sourceRoot":"","sources":["../../../../components/cell/cell-backgrounds.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGxD,OAAO,KAAkB,MAAM,OAAO,CAAC;AAkBvC,MAAM,WAAW,oBAAoB;IACnC,mGAAmG;IACnG,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,uFAAuF;IACvF,SAAS,EAAE,CACT,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,KAChB,UAAU,GAAG,IAAI,GAAG,SAAS,CAAC;IACnC,8FAA8F;IAC9F,YAAY,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IAC3E,sBAAsB,EAAE,MAAM,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,GAAI,mFAO7B,oBAAoB,sBAqHtB,CAAC"}

package/dist/cjs/components/cell/cell-backgrounds.js

@@ -35,7 +35,11 @@ var CellBackgrounds = function (_a) {
                 var fillPattern = (_b = format === null || format === void 0 ? void 0 : format.fillPattern) !== null && _b !== void 0 ? _b : null;
                 var gradient = (_c = format === null || format === void 0 ? void 0 : format.gradient) !== null && _c !== void 0 ? _c : null;
                 var foregroundColor = resolveColor(format === null || format === void 0 ? void 0 : format.foregroundColor);
-                var hasPaintedPattern = fillPattern && fillPattern !== "none" ? !!foregroundColor : false;
+                // A pattern with no colour of its own paints in Excel's Automatic
+                // (black); a solid pattern needs its foreground.
+                var hasPaintedPattern = fillPattern === "solid"
+                    ? !!foregroundColor
+                    : !!fillPattern && fillPattern !== "none";
                 var hasGradient = !!gradient && ((_e = (_d = gradient.stops) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0) > 0;
                 var backgroundColor = resolveColor(format === null || format === void 0 ? void 0 : format.backgroundColor);
                 var isMergedCell = !!cell.isMergedCell;

package/dist/cjs/components/cell/cell-text-runs.d.ts

@@ -46,6 +46,13 @@ export type CellTextRunsProps = {
     wrap: boolean;
     /** Theme — used to resolve segment `color` objects to CSS strings. */
     theme: SpreadsheetTheme;
+    /**
+     * Multiplier for run font sizes given in points (zoom × shrink-to-fit),
+     * so a run's own size follows the cell's.
+     */
+    fontScale?: number;
+    /** Konva rotation (degrees, clockwise) of the whole block — rotated text. */
+    rotation?: number;
 };
 export type Resolved = {
     bold: boolean;
@@ -64,7 +71,7 @@ export type Resolved = {
  * merged style carries a `baselineOffset` (own or inherited from the
  * base) the sup/sub font scale is applied here, exactly once.
  */
-export declare const resolveSegmentStyle: (seg: RichTextSegment, base: Resolved, theme: SpreadsheetTheme) => Resolved;
+export declare const resolveSegmentStyle: (seg: RichTextSegment, base: Resolved, theme: SpreadsheetTheme, fontScale?: number) => Resolved;
 /** A segment paired with its fully-resolved paint style. */
 export type ResolvedSegment = {
     seg: RichTextSegment;
@@ -83,10 +90,10 @@ export declare const computeLineMetrics: (resolvedLines: ResolvedSegment[][], ba
 };
 /**
  * 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.
+ * its line box. Every run shares the line's alphabetic baseline (smaller
+ * runs shift down); superscript / subscript runs then move that baseline
+ * up / down by Excel's shift ({@link getScriptBaselineShift}). Exported
+ * for unit tests.
  */
 export declare const computeSegmentTop: (lineTop: number, lineFontSize: number, segFontSize: number, baselineOffset: "superscript" | "subscript" | undefined) => number;
 /**

package/dist/cjs/components/cell/cell-text-runs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cell-text-runs.d.ts","sourceRoot":"","sources":["../../../../components/cell/cell-text-runs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGzD,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAElE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACxB,MAAM,aAAa,CAAC;AAErB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,8DAA8D;IAC9D,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,sEAAsE;IACtE,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,aAAa,GAAG,WAAW,CAAC;IACjD,eAAe,EAAE,eAAe,CAAC;IACjC,aAAa,EAAE,aAAa,CAAC;IAC7B,+EAA+E;IAC/E,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,cAAc,CAAC;IAC/B,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,EAAE,OAAO,CAAC;IACd,sEAAsE;IACtE,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,aAAa,GAAG,WAAW,CAAC;CAC9C,CAAC;AAkCF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAC9B,KAAK,eAAe,EACpB,MAAM,QAAQ,EACd,OAAO,gBAAgB,KACtB,QA0BF,CAAC;AAKF,4DAA4D;AAC5D,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,eAAe,CAAC;IACrB,CAAC,EAAE,QAAQ,CAAC;CACb,CAAC;AAYF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAC7B,eAAe,eAAe,EAAE,EAAE,EAClC,MAAM,QAAQ,EACd,WAAW,CAAC,CAAC,EAAE,QAAQ,KAAK,MAAM,KACjC;IAAE,aAAa,EAAE,MAAM,EAAE,CAAC;IAAC,WAAW,EAAE,MAAM,EAAE,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CASvE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,GAC5B,SAAS,MAAM,EACf,cAAc,MAAM,EACpB,aAAa,MAAM,EACnB,gBAAgB,aAAa,GAAG,WAAW,GAAG,SAAS,KACtD,MAMF,CAAC;AAoHF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,oCAAsB,iBAAiB,uBA2P9D,CAAC"}
+{"version":3,"file":"cell-text-runs.d.ts","sourceRoot":"","sources":["../../../../components/cell/cell-text-runs.tsx"],"names":[],"mappings":"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"}