@rowsncolumns/spreadsheet 10.6.0 → 10.6.5

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

@@ -2,30 +2,102 @@ import { isSameColor, lightenColor, normalizeColor } from "@rowsncolumns/utils";
 import React from "react";
 import { Shape } from "react-konva";
 import { getPatternCanvas } from "../../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. */
+export const 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.
+ */
+export const getPathGradientRegions = (gradient, x0, y0, x1, y1) => {
+    const width = x1 - x0;
+    const height = y1 - y0;
+    const cl = x0 + (gradient.left ?? 0) * width;
+    const cr = x1 - (gradient.right ?? 0) * width;
+    const ct = y0 + (gradient.top ?? 0) * height;
+    const cb = y1 - (gradient.bottom ?? 0) * height;
+    const coreLeft = Math.min(cl, cr);
+    const coreRight = Math.max(cl, cr);
+    const coreTop = Math.min(ct, cb);
+    const 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],
+            },
+        ],
+    };
+};
+const addStops = (canvasGrad, gradient) => {
+    for (const stop of gradient.stops) {
+        // Clamp position to [0,1] — Canvas API rejects out-of-range values.
+        const pos = Math.max(0, Math.min(1, stop.position));
+        try {
+            canvasGrad.addColorStop(pos, stop.color);
+        }
+        catch {
+            // Invalid color string — skip rather than blow up the render.
+        }
+    }
+};
+const paintPathGradient = (context, native, gradient, rect) => {
+    const { core, regions } = getPathGradientRegions(gradient, ...rect);
+    const sorted = [...gradient.stops].sort((a, b) => a.position - b.position);
+    context.setAttr("fillStyle", sorted[0].color);
+    context.fillRect(core[0], core[1], core[2] - core[0], core[3] - core[1]);
+    for (const region of regions) {
+        const [ax0, ay0, ax1, ay1] = region.axis;
+        if (ax0 === ax1 && ay0 === ay1)
+            continue;
+        const canvasGrad = native.createLinearGradient(ax0, ay0, ax1, ay1);
+        addStops(canvasGrad, gradient);
+        context.beginPath();
+        region.points.forEach(([px, py], index) => index ? context.lineTo(px, py) : context.moveTo(px, py));
+        context.closePath();
+        context.setAttr("fillStyle", canvasGrad);
+        context.fill();
+    }
+};
 const buildCanvasGradient = (native, gradient, width, height) => {
     if (!gradient.stops?.length)
         return null;
     let canvasGrad;
-    if (gradient.type === "path") {
-        const left = gradient.left ?? 0;
-        const right = gradient.right ?? 0;
-        const top = gradient.top ?? 0;
-        const bottom = gradient.bottom ?? 0;
-        const cx = ((left + (1 - right)) / 2) * width;
-        const cy = ((top + (1 - bottom)) / 2) * height;
-        const 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.
         const deg = (((gradient.degree ?? 0) % 360) + 360) % 360;
@@ -58,16 +130,7 @@ const buildCanvasGradient = (native, gradient, width, height) => {
         const y1 = cy + dy * maxProj;
         canvasGrad = native.createLinearGradient(x0, y0, x1, y1);
     }
-    for (const stop of gradient.stops) {
-        // Clamp position to [0,1] — Canvas API rejects out-of-range values.
-        const pos = Math.max(0, Math.min(1, stop.position));
-        try {
-            canvasGrad.addColorStop(pos, stop.color);
-        }
-        catch {
-            // Invalid color string — skip rather than blow up the render.
-        }
-    }
+    addStops(canvasGrad, gradient);
     return canvasGrad;
 };
 export const CellBackground = ({ x, y, width, height, backgroundColor, defaultBackgroundColor, scale, showGridLines, isMergedCell, fillPattern, foregroundColor, gradient, }) => {
@@ -91,13 +154,17 @@ export const CellBackground = ({ x, y, width, height, backgroundColor, defaultBa
         // bgColor is ignored when pattern=solid). For "none" or absent, fall
         // back to the regular backgroundColor path.
         const useSolid = fillPattern === "solid" && foregroundColor;
-        const useTile = fillPattern &&
-            fillPattern !== "solid" &&
-            fillPattern !== "none" &&
-            foregroundColor;
+        const useTile = fillPattern && fillPattern !== "solid" && fillPattern !== "none";
         const useGradient = !!gradient && (gradient.stops?.length ?? 0) > 0;
         const native = context._context;
-        if (useGradient && native) {
+        const fillRectArea = (isMergedCell || !showFaintBorder) && showGridLines
+            ? [1, 1, shape.width(), shape.height()]
+            : [0, 0, shape.width() + 1, shape.height() + 1];
+        const usePathGradient = useGradient && native && gradient.type === "path";
+        if (usePathGradient) {
+            paintPathGradient(context, native, gradient, fillRectArea);
+        }
+        else if (useGradient && native) {
             const canvasGrad = buildCanvasGradient(native, gradient, shape.width(), shape.height());
             if (canvasGrad) {
                 context.setAttr("fillStyle", canvasGrad);
@@ -110,7 +177,7 @@ export const CellBackground = ({ x, y, width, height, backgroundColor, defaultBa
             context.setAttr("fillStyle", foregroundColor);
         }
         else if (useTile) {
-            const tile = getPatternCanvas(fillPattern, foregroundColor, backgroundColor);
+            const tile = getPatternCanvas(fillPattern, foregroundColor ?? AUTOMATIC_PATTERN_COLOR, backgroundColor);
             const ctxPattern = tile && native?.createPattern(tile, "repeat");
             if (ctxPattern) {
                 context.setAttr("fillStyle", ctxPattern);
@@ -122,11 +189,13 @@ export const CellBackground = ({ x, y, width, height, backgroundColor, defaultBa
         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) {
             const lightColor = lightenColor(-0.1, backgroundColor);

package/dist/esm/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/esm/components/cell/cell-backgrounds.js

@@ -26,7 +26,11 @@ export const CellBackgrounds = ({ cells, getFormat, resolveColor, defaultBackgro
             const fillPattern = format?.fillPattern ?? null;
             const gradient = format?.gradient ?? null;
             const foregroundColor = resolveColor(format?.foregroundColor);
-            const 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.
+            const hasPaintedPattern = fillPattern === "solid"
+                ? !!foregroundColor
+                : !!fillPattern && fillPattern !== "none";
             const hasGradient = !!gradient && (gradient.stops?.length ?? 0) > 0;
             const backgroundColor = resolveColor(format?.backgroundColor);
             const isMergedCell = !!cell.isMergedCell;

package/dist/esm/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/esm/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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"}

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

@@ -1,6 +1,7 @@
 import React, { useCallback } from "react";
 import { Shape } from "react-konva";
-import { getStringifiedColor } from "../../themes";
+import { getStringifiedColor, resolveThemeFontFamily } from "../../themes";
+import { getScriptBaselineShift } from "./alignment";
 import { getLineAdvance } from "./line-height";
 import { buildRichTextSegments, segmentsToLines, segmentToAtoms, } from "./rich-text";
 const BASELINE_OFFSET_FONT_SCALE = 0.58;
@@ -39,12 +40,10 @@ const buildFontString = (r) => {
  * 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) => {
+export const resolveSegmentStyle = (seg, base, theme, fontScale = 1) => {
     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;
+    const fontSize = typeof f.fontSize === "number" ? f.fontSize * PT_TO_PX * fontScale : base.fontSize;
     return {
         bold: f.bold ?? base.bold,
         italic: f.italic ?? base.italic,
@@ -53,7 +52,7 @@ export const resolveSegmentStyle = (seg, base, theme) => {
         color: f.color != null
             ? getStringifiedColor(f.color, theme) || base.color
             : base.color,
-        fontFamily: f.fontFamily ?? base.fontFamily,
+        fontFamily: resolveThemeFontFamily(f.fontFamily, theme) ?? 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
@@ -64,8 +63,8 @@ export const resolveSegmentStyle = (seg, base, theme) => {
         baselineOffset,
     };
 };
-/** Inverse of pointToPixel — used only when computing a per-segment scale. */
-const pointFromPx = (px) => px / 1.3333;
+/** CSS pixels per point (96 / 72), as `pointToPixel`. */
+const PT_TO_PX = 96 / 72;
 /**
  * Fraction of the em box above the alphabetic baseline for typical
  * Latin fonts. Used to baseline-align mixed-size runs on one line:
@@ -89,19 +88,14 @@ export const computeLineMetrics = (resolvedLines, base, advanceOf) => {
 };
 /**
  * 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 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;
-};
+export const computeSegmentTop = (lineTop, lineFontSize, segFontSize, baselineOffset) => lineTop +
+    (lineFontSize - segFontSize) * ALPHABETIC_BASELINE_RATIO +
+    getScriptBaselineShift(baselineOffset, lineFontSize);
 /**
  * Sum of advance widths of a single line of resolved segments, using
  * the supplied context's `measureText`. Mutates ctx font as it walks
@@ -214,7 +208,7 @@ const atomsToSegments = (atoms) => {
  *  - 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, lineHeightMode, scale, wrap, theme, } = props;
+    const { x, y, width, height, padding, value, runs, baseColor, baseFontFamily, baseFontSize, baseBold, baseItalic, baseUnderline, baseStrikethrough, baseBaselineOffset, horizontalAlign, verticalAlign, lineHeight, lineHeightMode, scale, wrap, theme, fontScale = 1, rotation, } = props;
     const sceneFunc = useCallback((context, _shape) => {
         const baseResolved = {
             bold: baseBold,
@@ -238,7 +232,7 @@ export const CellTextRuns = React.memo((props) => {
         // 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);
+            const r = resolveSegmentStyle({ text: atom.text, format: atom.format }, baseResolved, theme, fontScale);
             context.setAttr("font", buildFontString(r));
             return context.measureText(atom.text).width;
         };
@@ -280,7 +274,7 @@ export const CellTextRuns = React.memo((props) => {
         // layout: the run font's `getLineAdvance` per line.
         const resolvedLines = lines.map((lineSegments) => lineSegments.map((seg) => ({
             seg,
-            r: resolveSegmentStyle(seg, baseResolved, theme),
+            r: resolveSegmentStyle(seg, baseResolved, theme, fontScale),
         })));
         const { lineFontSizes, lineHeights, totalHeight: totalH } = computeLineMetrics(resolvedLines, baseResolved, (r) => getLineAdvance(r, lineHeightMode, lineHeight, scale));
         let topY;
@@ -378,7 +372,8 @@ export const CellTextRuns = React.memo((props) => {
         height,
         padding,
         theme,
+        fontScale,
     ]);
-    return (React.createElement(Shape, { x: x, y: y, width: width, height: height, sceneFunc: sceneFunc, listening: false, perfectDrawEnabled: false }));
+    return (React.createElement(Shape, { x: x, y: y, width: width, height: height, rotation: rotation, sceneFunc: sceneFunc, listening: false, perfectDrawEnabled: false }));
 });
 CellTextRuns.displayName = "CellTextRuns";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAA4B,MAAM,OAAO,CAAC;AA4CjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAU3C,eAAO,MAAM,IAAI,oCAAgB,SAAS,uBA0oBxC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/cell/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAuDjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAO3C,eAAO,MAAM,IAAI,oCAAgB,SAAS,uBAoiCxC,CAAC"}