@rowsncolumns/spreadsheet 10.6.0 → 10.6.4

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

@@ -6,6 +6,8 @@ var grid_1 = require("@rowsncolumns/grid");
 var utils_1 = require("@rowsncolumns/utils");
 var react_1 = tslib_1.__importStar(require("react"));
 var react_konva_1 = require("react-konva");
+var cf_data_bar_1 = require("../../api/cf-data-bar");
+var cf_icons_1 = require("../../api/cf-icons");
 var config_1 = require("../../config");
 var helpers_1 = require("../../helpers");
 var themes_1 = require("../../themes");
@@ -16,19 +18,18 @@ var cell_error_1 = require("../cell-error");
 var cell_expand_1 = require("../cell-expand");
 var cell_filter_1 = require("../cell-filter");
 var cell_group_1 = require("../cell-group");
+var alignment_1 = require("./alignment");
 var cell_text_runs_1 = require("./cell-text-runs");
+var helpers_2 = require("./helpers");
 var line_height_1 = require("./line-height");
+var number_format_layout_1 = require("./number-format-layout");
 var rich_text_1 = require("./rich-text");
-var alignment_1 = require("./alignment");
-var helpers_2 = require("./helpers");
 var LOADING_VALUE = "Loading...";
 // CSS-equivalent scale for sup/sub baseline offset (matches browser default).
 var BASELINE_OFFSET_FONT_SCALE = 0.58;
-// Vertical inset of data-bar rect from cell edges (top/bottom).
-var CF_DATABAR_INSET_Y = 2;
 exports.Cell = (0, react_1.memo)(function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    var x = props.x, y = props.y, width = props.width, height = props.height, value = props.value, _p = props.padding, padding = _p === void 0 ? grid_1.CELL_TEXT_PADDING : _p, _q = props.scale, scale = _q === void 0 ? 1 : _q, _r = props.lineHeight, lineHeight = _r === void 0 ? 1.2 : _r, _s = props.lineHeightMode, lineHeightMode = _s === void 0 ? "fontMetrics" : _s, imageUrl = props.imageUrl, cellFormat = props.cellFormat, chipBackgroundColor = props.chipBackgroundColor, defaultColor = props.defaultColor, defaultBackgroundColor = props.defaultBackgroundColor, sheetId = props.sheetId, rowIndex = props.rowIndex, columnIndex = props.columnIndex, onRequestEdit = props.onRequestEdit, onArrowClick = props.onArrowClick, isChecked = props.isChecked, isInvalid = props.isInvalid, isError = props.isError, showCheckbox = props.showCheckbox, showArrow = props.showArrow, showFilter = props.showFilter, showChip = props.showChip, showNote = props.showNote, showComment = props.showComment, isFilterActive = props.isFilterActive, filterIconColor = props.filterIconColor, onFilterClick = props.onFilterClick, onCheckboxClick = props.onCheckboxClick, enableOverflow = props.enableOverflow, cellWidth = props.cellWidth, _textWidth = props.textWidth, theme = props.theme, showCalculatedColumnIcon = props.showCalculatedColumnIcon, isCalculatedColumn = props.isCalculatedColumn, expandable = props.expandable, expanded = props.expanded, columnSpans = props.columnSpans, overflowRight = props.overflowRight, showGridLines = props.showGridLines, structuredValue = props.structuredValue, sparklineGroupAxis = props.sparklineGroupAxis, defaultFontSizePoint = props.defaultFontSizePoint, sortOrder = props.sortOrder, textFormatRuns = props.textFormatRuns, StructuredResult = props.StructuredResult, _t = props.readonly, readonly = _t === void 0 ? false : _t, onExpandCollapse = props.onExpandCollapse, getDefaultHorizontalAlignment = props.getDefaultHorizontalAlignment;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var x = props.x, y = props.y, width = props.width, height = props.height, value = props.value, _m = props.padding, padding = _m === void 0 ? grid_1.CELL_TEXT_PADDING : _m, _o = props.scale, scale = _o === void 0 ? 1 : _o, _p = props.lineHeight, lineHeight = _p === void 0 ? 1.2 : _p, _q = props.lineHeightMode, lineHeightMode = _q === void 0 ? "fontMetrics" : _q, imageUrl = props.imageUrl, cellFormat = props.cellFormat, chipBackgroundColor = props.chipBackgroundColor, defaultColor = props.defaultColor, defaultBackgroundColor = props.defaultBackgroundColor, sheetId = props.sheetId, rowIndex = props.rowIndex, columnIndex = props.columnIndex, onRequestEdit = props.onRequestEdit, onArrowClick = props.onArrowClick, isChecked = props.isChecked, isInvalid = props.isInvalid, isError = props.isError, showCheckbox = props.showCheckbox, showArrow = props.showArrow, showFilter = props.showFilter, showChip = props.showChip, showNote = props.showNote, showComment = props.showComment, isFilterActive = props.isFilterActive, filterIconColor = props.filterIconColor, onFilterClick = props.onFilterClick, onCheckboxClick = props.onCheckboxClick, enableOverflow = props.enableOverflow, cellWidth = props.cellWidth, _textWidth = props.textWidth, theme = props.theme, showCalculatedColumnIcon = props.showCalculatedColumnIcon, isCalculatedColumn = props.isCalculatedColumn, expandable = props.expandable, expanded = props.expanded, columnSpans = props.columnSpans, overflowRight = props.overflowRight, overflowLeft = props.overflowLeft, _r = props.centerOnSpan, centerOnSpan = _r === void 0 ? false : _r, _s = props.arrowOutside, arrowOutside = _s === void 0 ? false : _s, showGridLines = props.showGridLines, structuredValue = props.structuredValue, sparklineGroupAxis = props.sparklineGroupAxis, defaultFontSizePoint = props.defaultFontSizePoint, sortOrder = props.sortOrder, textFormatRuns = props.textFormatRuns, numberFormatLayout = props.numberFormatLayout, StructuredResult = props.StructuredResult, _t = props.readonly, readonly = _t === void 0 ? false : _t, onExpandCollapse = props.onExpandCollapse, getDefaultHorizontalAlignment = props.getDefaultHorizontalAlignment;
     var _u = cellFormat !== null && cellFormat !== void 0 ? cellFormat : {}, textFormat = _u.textFormat, wrapStrategy = _u.wrapStrategy;
     // openpyxl's `relativeIndent` is an additive delta on top of `indent`.
     var indent = ((_a = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.indent) !== null && _a !== void 0 ? _a : 0) + ((_b = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.relativeIndent) !== null && _b !== void 0 ? _b : 0);
@@ -38,24 +39,37 @@ exports.Cell = (0, react_1.memo)(function (props) {
     // we cross-package-duplicate the sentinel so apps/spreadsheet doesn't
     // depend on spreadsheet-state.
     var isLoading = value === LOADING_VALUE;
+    // Format Cells → Alignment → Text direction: a right-to-left reading
+    // order starts General-aligned text at the right edge.
+    var readingOrder = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.readingOrder;
     var horizontalAlignment = isLoading
         ? "center"
-        : (_e = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.horizontalAlignment) !== null && _e !== void 0 ? _e : (getDefaultHorizontalAlignment(sheetId, rowIndex, columnIndex) ||
+        : (_e = cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.horizontalAlignment) !== null && _e !== void 0 ? _e : ((0, alignment_1.resolveReadingOrderAlignment)(readingOrder, getDefaultHorizontalAlignment(sheetId, rowIndex, columnIndex)) ||
             config_1.CELL_HORIZONTAL_ALIGNMENT);
-    var verticalAlignment = (cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.verticalAlignment) || config_1.CELL_VERTICAL_ALIGNMENT;
+    // Excel's vertical justify / distributed paint as top / middle for one
+    // line and spread wrapped lines over the cell height (below).
+    var cellVerticalAlignment = (cellFormat === null || cellFormat === void 0 ? void 0 : cellFormat.verticalAlignment) || config_1.CELL_VERTICAL_ALIGNMENT;
+    var verticalAlignment = (0, alignment_1.resolveCanvasVerticalAlign)(cellVerticalAlignment);
+    var isVerticalSpread = (0, alignment_1.verticalAlignmentImpliesWrap)(cellVerticalAlignment);
     // Excel-only modes (justify / distributed / fill / centerContinuous)
     // collapse onto what the canvas text node can paint.
     var canvasTextAlign = (0, alignment_1.resolveCanvasTextAlign)(horizontalAlignment);
     var isFillAlignment = horizontalAlignment === "fill";
     // Text format
-    var _v = textFormat !== null && textFormat !== void 0 ? textFormat : {}, colorObject = _v.color, bold = _v.bold, italic = _v.italic, strikethrough = _v.strikethrough, underline = _v.underline, baselineOffset = _v.baselineOffset;
+    var _v = textFormat !== null && textFormat !== void 0 ? textFormat : {}, colorObject = _v.color, bold = _v.bold, italic = _v.italic, strikethrough = _v.strikethrough, underline = _v.underline, underlineStyle = _v.underlineStyle, baselineOffset = _v.baselineOffset;
     var fontSizePt = (_f = textFormat === null || textFormat === void 0 ? void 0 : textFormat.fontSize) !== null && _f !== void 0 ? _f : defaultFontSizePoint;
     // Fall back to the theme's body font so the painter agrees with the
     // sizer (AutoSizerCanvas measures with theme.primaryFontFamily).
-    var fontFamily = (_g = textFormat === null || textFormat === void 0 ? void 0 : textFormat.fontFamily) !== null && _g !== void 0 ? _g : theme === null || theme === void 0 ? void 0 : theme.primaryFontFamily;
+    var fontFamily = (_g = (0, themes_1.resolveThemeFontFamily)(textFormat === null || textFormat === void 0 ? void 0 : textFormat.fontFamily, theme)) !== null && _g !== void 0 ? _g : theme === null || theme === void 0 ? void 0 : theme.primaryFontFamily;
     var color = (0, themes_1.getStringifiedColor)(colorObject, theme);
-    // Text decoration
-    var textDecoration = "".concat(underline ? "underline" : "", " ").concat(strikethrough ? "line-through" : "");
+    // Text decoration. Konva draws only a single underline; the double and
+    // accounting underlines (Format Cells → Font → Underline) are stroked by
+    // `underlineSceneFunc` below, where the text is one unrotated line.
+    var hasStyledUnderline = !!underline && !!underlineStyle && underlineStyle !== "single";
+    var textDecorationFor = function (konvaUnderline) {
+        return "".concat(konvaUnderline ? "underline" : "", " ").concat(strikethrough ? "line-through" : "");
+    };
+    var textDecoration = textDecorationFor(!!underline);
     /* Because of 1px + 0.5px (gridline width + spacing )*/
     var borderWidth = 1;
     var cellSpacingY = borderWidth;
@@ -75,9 +89,14 @@ exports.Cell = (0, react_1.memo)(function (props) {
         var e_1, _a;
         try {
             for (var columnSpans_1 = tslib_1.__values(columnSpans), columnSpans_1_1 = columnSpans_1.next(); !columnSpans_1_1.done; columnSpans_1_1 = columnSpans_1.next()) {
-                var _b = tslib_1.__read(columnSpans_1_1.value, 4), _1 = _b[0], columnOffset = _b[1], columnWidth = _b[2], cellBackground = _b[3];
+                var _b = tslib_1.__read(columnSpans_1_1.value, 4), spanColumnIndex = _b[0], columnOffset = _b[1], columnWidth = _b[2], cellBackground = _b[3];
                 context.beginPath();
-                var x_1 = columnOffset - shape.x() + (overflowRight ? columnWidth : 0) + 0.5;
+                // A column left of the cell hides the gridline on its right edge,
+                // one to the right the gridline on its left edge.
+                var x_1 = columnOffset -
+                    shape.x() +
+                    (spanColumnIndex < columnIndex ? columnWidth : 0) +
+                    0.5;
                 var strokeColor = cellBackground
                     ? (0, themes_1.getStringifiedColor)(cellBackground, theme)
                     : defaultBackgroundColor;
@@ -96,7 +115,7 @@ exports.Cell = (0, react_1.memo)(function (props) {
             }
             finally { if (e_1) throw e_1.error; }
         }
-    }, [defaultBackgroundColor, columnSpans, theme, overflowRight, scale]);
+    }, [defaultBackgroundColor, columnSpans, theme, columnIndex, scale]);
     // Show error tag
     var showError = isError || isInvalid;
     // Calculated
@@ -104,13 +123,26 @@ exports.Cell = (0, react_1.memo)(function (props) {
     // Alignment
     var isRightAligned = horizontalAlignment === "right";
     // Spacing
-    var indentSpacing = indent ? indent * config_1.INDENT_SPACING : 0;
+    var indentSpacing = indent ? indent * config_1.INDENT_SPACING * scale : 0;
     var iconSpacing = config_1.DEFAULT_CELL_SPACING;
     var showExpand = false;
     var leftSpacing = (0, helpers_2.getLeftSpacing)(isCalculatedCell, expandable, isRightAligned ? showExpand : false, iconSpacing, scale);
-    var rightSpacing = (0, helpers_2.getRightSpacing)(showFilter, showArrow, isRightAligned ? false : showExpand, iconSpacing, scale);
+    var rightSpacing = (0, helpers_2.getRightSpacing)(showFilter, showArrow && !arrowOutside, isRightAligned ? false : showExpand, iconSpacing, scale);
     // final cell width
     var finalCellWidth = cellWidth !== null && cellWidth !== void 0 ? cellWidth : 0;
+    // Centred overflow: the spill area is `[x - overflowLeft, x - overflowLeft
+    // + cellWidth]`. Centred text stays centred on its own cell (a blocked
+    // side clips it); Center Across Selection centres on the whole span.
+    var centredSpill = enableOverflow && overflowLeft !== undefined
+        ? (function () {
+            var spanLeft = x - overflowLeft;
+            if (centerOnSpan) {
+                return { spanLeft: spanLeft, boxLeft: spanLeft, boxWidth: finalCellWidth };
+            }
+            var reach = Math.max(overflowLeft, finalCellWidth - width - overflowLeft);
+            return { spanLeft: spanLeft, boxLeft: x - reach, boxWidth: width + 2 * reach };
+        })()
+        : undefined;
     // text
     var textWidth = _textWidth + indentSpacing;
     // Reserve room for the CF icon on the left side of the cell. Only adds
@@ -122,7 +154,11 @@ exports.Cell = (0, react_1.memo)(function (props) {
     // doesn't render past the cell's right edge when an iconSet is present.
     var finalTextWidth = (overflowRight
         ? Math.max(textWidth, width)
-        : (enableOverflow ? finalCellWidth : width) -
+        : (centredSpill
+            ? centredSpill.boxWidth
+            : enableOverflow
+                ? finalCellWidth
+                : width) -
             rightSpacing -
             leftSpacing -
             indentSpacing) - cfIconReserve;
@@ -131,8 +167,10 @@ exports.Cell = (0, react_1.memo)(function (props) {
         ? textWidth > width
             ? x - (textWidth - width)
             : x
-        : x +
-            (isRightAligned ? -indentSpacing - Math.floor((padding * scale) / 2) : 0);
+        : centredSpill
+            ? centredSpill.boxLeft
+            : x +
+                (isRightAligned ? -indentSpacing - Math.floor((padding * scale) / 2) : 0);
     // Text left padding
     var textLeftPadding = textX +
         leftSpacing +
@@ -146,7 +184,9 @@ exports.Cell = (0, react_1.memo)(function (props) {
         ? enableOverflow
             ? textX + (textWidth - finalCellWidth)
             : textX
-        : textX;
+        : centredSpill
+            ? centredSpill.spanLeft
+            : textX;
     var overflowWidth = finalCellWidth;
     // Clip
     var clipX = (enableOverflow ? overflowX : x) +
@@ -173,7 +213,9 @@ exports.Cell = (0, react_1.memo)(function (props) {
         : fontSize;
     // Wrap — disabled in stacked, shrink, or rotated modes. Justify /
     // distributed alignment wraps implicitly, as in Excel.
-    var wrapRequested = wrapStrategy === "wrap" || (0, alignment_1.alignmentImpliesWrap)(horizontalAlignment);
+    var wrapRequested = wrapStrategy === "wrap" ||
+        (0, alignment_1.alignmentImpliesWrap)(horizontalAlignment) ||
+        isVerticalSpread;
     var textWrapStrategy = isStackedVertical || shrinkEnabled || hasNumericRotation
         ? "none"
         : wrapRequested
@@ -193,7 +235,7 @@ exports.Cell = (0, react_1.memo)(function (props) {
     // the same numbers (#1141). Konva's `lineHeight` is a multiple of the
     // font size.
     var textLineMetrics = (0, line_height_1.getLineMetrics)({ fontFamily: fontFamily, fontSize: effectiveFontSize, bold: bold, italic: italic }, lineHeightMode, lineHeight, scale);
-    var textLineHeight = effectiveFontSize > 0
+    var baseTextLineHeight = effectiveFontSize > 0
         ? textLineMetrics.advance / effectiveFontSize
         : lineHeight;
     // The sizer fitted the row to Konva's text block exactly — one advance
@@ -201,6 +243,16 @@ exports.Cell = (0, react_1.memo)(function (props) {
     // by the padding on both sides, its padding box is the cell, and every
     // fitted line shows (#1182, #1199).
     var textNode = (0, grid_1.getTextNodeBounds)(y + cellSpacingY, height, padding);
+    // Vertical justify / distributed: spread the wrapped lines over the
+    // cell's inner height. The line count is estimated from the natural
+    // width against the wrap width (and any hard line breaks).
+    var wrapWidth = Math.max(1, finalTextWidth - 2 * padding);
+    var estimatedLineCount = shouldWrap
+        ? Math.max((displayValue !== null && displayValue !== void 0 ? displayValue : "").split("\n").length, Math.ceil(_textWidth / wrapWidth))
+        : 1;
+    var textLineHeight = isVerticalSpread
+        ? (0, alignment_1.getVerticalSpreadLineHeight)(estimatedLineCount, textNode.height - 2 * padding, effectiveFontSize, baseTextLineHeight)
+        : baseTextLineHeight;
     // For rotated text, anchor the rotation pivot to an alignment-aware
     // corner of the cell so the text stays inside instead of sliding off
     // (Konva otherwise rotates around the Text's top-left at x/y).
@@ -223,16 +275,36 @@ exports.Cell = (0, react_1.memo)(function (props) {
         })
         : undefined;
     var rotationDegrees = (_h = rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.rotation) !== null && _h !== void 0 ? _h : (0, alignment_1.getKonvaRotationDegrees)(textRotation);
-    // CF data-bar geometry. Painted behind the text Group so the cell value
-    // remains readable on top of the bar. We inset 2px vertically so the bar
-    // doesn't touch the borders.
-    var dataBarHeight = Math.max(0, height - 2 * CF_DATABAR_INSET_Y * scale);
-    var dataBarMaxWidth = Math.max(0, width - 2);
-    var dataBarFill = conditionalDataBar
-        ? Math.max(0, Math.min(1, conditionalDataBar.fillFraction))
-        : 0;
-    var dataBarWidth = dataBarMaxWidth * dataBarFill;
-    var dataBarFromRight = (conditionalDataBar === null || conditionalDataBar === void 0 ? void 0 : conditionalDataBar.direction) === "rightToLeft";
+    // CF data bar — painted behind the text Group so the cell value stays
+    // readable on top of the bar (`paintDataBar` owns the geometry).
+    var dataBarSceneFunc = (0, react_1.useCallback)(function (context, shape) {
+        var _a, _b;
+        if (!conditionalDataBar)
+            return;
+        var barStart = (_a = conditionalDataBar.barStart) !== null && _a !== void 0 ? _a : (conditionalDataBar.direction === "rightToLeft"
+            ? 1 - conditionalDataBar.fillFraction
+            : 0);
+        var barEnd = (_b = conditionalDataBar.barEnd) !== null && _b !== void 0 ? _b : barStart + Math.max(0, Math.min(1, conditionalDataBar.fillFraction));
+        (0, cf_data_bar_1.paintDataBar)(context, { width: shape.width(), height: shape.height(), scale: scale }, tslib_1.__assign(tslib_1.__assign({}, conditionalDataBar), { barStart: barStart, barEnd: barEnd }));
+    }, [conditionalDataBar, scale]);
+    // CF icon — Excel's vector icon at the cell's left edge, aligned with the
+    // cell's vertical alignment.
+    var cfIconShape = conditionalIcon
+        ? (0, cf_icons_1.getCfIcon)(conditionalIcon.iconSet, conditionalIcon.iconId)
+        : undefined;
+    var cfIconSceneFunc = (0, react_1.useCallback)(function (context, shape) {
+        if (!cfIconShape)
+            return;
+        var size = Math.min(config_1.CF_ICON_WIDTH * scale, shape.height() - 2 * scale);
+        if (size <= 0)
+            return;
+        var iconY = verticalAlignment === "top"
+            ? scale
+            : verticalAlignment === "middle"
+                ? (shape.height() - size) / 2
+                : shape.height() - size - 2 * scale;
+        (0, cf_icons_1.paintCfIcon)(context, cfIconShape, 2 * scale, iconY, size);
+    }, [cfIconShape, scale, verticalAlignment]);
     // Use the segment-based renderer only when per-segment formatting
     // exists AND none of the unsupported display modes are active.
     // Rotation, stacked-vertical, shrink-to-fit, and chips stay on the
@@ -249,10 +321,277 @@ exports.Cell = (0, react_1.memo)(function (props) {
         !isStackedVertical &&
         !hasNumericRotation &&
         (0, rich_text_1.hasRenderableRuns)(textFormatRuns !== null && textFormatRuns !== void 0 ? textFormatRuns : undefined);
+    // Double / accounting underlines on a single unrotated line (the default
+    // Text path); wrapped, rotated or rich-text cells keep Konva's single line.
+    var paintStyledUnderline = hasStyledUnderline &&
+        !useRichTextRunPath &&
+        !showChip &&
+        !shouldWrap &&
+        !isStackedVertical &&
+        !hasNumericRotation;
+    var textDirection = readingOrder === "rtl" ? "rtl" : readingOrder === "ltr" ? "ltr" : "inherit";
+    var underlineSceneFunc = (0, react_1.useCallback)(function (context) {
+        var e_2, _a;
+        if (!paintStyledUnderline || !underlineStyle)
+            return;
+        var advance = textLineMetrics.advance;
+        var innerLeft = textLeftPadding + padding;
+        var innerWidth = Math.max(0, finalTextWidth - 2 * padding);
+        var glyphWidth = Math.min(_textWidth, innerWidth);
+        var textStart = canvasTextAlign === "right"
+            ? innerLeft + innerWidth - glyphWidth
+            : canvasTextAlign === "center"
+                ? innerLeft + (innerWidth - glyphWidth) / 2
+                : innerLeft;
+        var innerTop = textNode.y + padding;
+        var innerHeight = textNode.height - 2 * padding;
+        var lineTop = effectiveVerticalAlignment === "top"
+            ? innerTop
+            : effectiveVerticalAlignment === "middle"
+                ? innerTop + (innerHeight - advance) / 2
+                : innerTop + innerHeight - advance;
+        var strokes = (0, alignment_1.getUnderlineStrokes)({
+            style: underlineStyle,
+            textX: textStart,
+            textWidth: glyphWidth,
+            cellX: x,
+            cellWidth: width,
+            baselineY: lineTop + advance / 2 + effectiveFontSize * 0.35,
+            fontSize: effectiveFontSize,
+            scale: scale,
+        });
+        context.beginPath();
+        try {
+            for (var strokes_1 = tslib_1.__values(strokes), strokes_1_1 = strokes_1.next(); !strokes_1_1.done; strokes_1_1 = strokes_1.next()) {
+                var _b = strokes_1_1.value, x1 = _b.x1, x2 = _b.x2, strokeY = _b.y;
+                var yy = Math.round(strokeY) + 0.5;
+                context.moveTo(x1, yy);
+                context.lineTo(x2, yy);
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (strokes_1_1 && !strokes_1_1.done && (_a = strokes_1.return)) _a.call(strokes_1);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        context.setAttr("strokeStyle", color !== null && color !== void 0 ? color : defaultColor);
+        context.setAttr("lineWidth", Math.max(1, scale));
+        context.stroke();
+    }, [
+        paintStyledUnderline,
+        underlineStyle,
+        textLineMetrics.advance,
+        textLeftPadding,
+        padding,
+        finalTextWidth,
+        _textWidth,
+        canvasTextAlign,
+        textNode.y,
+        textNode.height,
+        effectiveVerticalAlignment,
+        x,
+        width,
+        effectiveFontSize,
+        scale,
+        color,
+        defaultColor,
+    ]);
+    // Excel's `*x` fill and `_x` / `?` reserves (accounting `$` left, number
+    // right): one unrotated, unwrapped line whose parts are placed with
+    // measured glyph widths. Every other display mode keeps the plain string.
+    var paintNumberFormatLayout = !!numberFormatLayout &&
+        !useRichTextRunPath &&
+        !showChip &&
+        !shouldWrap &&
+        !isStackedVertical &&
+        !hasNumericRotation &&
+        !shrinkEnabled &&
+        !isFillAlignment &&
+        !enableOverflow &&
+        textDirection !== "rtl";
+    var numberFormatSceneFunc = (0, react_1.useCallback)(function (context, shape) {
+        var e_3, _a, e_4, _b;
+        var _c, _d, _e, _f, _g;
+        if (!numberFormatLayout)
+            return;
+        var ctx = context;
+        ctx.setAttr("font", "".concat(textStyle, " normal ").concat(effectiveFontSize, "px ").concat(fontFamily !== null && fontFamily !== void 0 ? fontFamily : "sans-serif"));
+        ctx.setAttr("textBaseline", "alphabetic");
+        ctx.setAttr("textAlign", "left");
+        ctx.setAttr("fillStyle", color !== null && color !== void 0 ? color : defaultColor);
+        var innerWidth = Math.max(0, shape.width() - 2 * padding);
+        var measure = function (text) { return ctx.measureText(text).width; };
+        var layout = (_c = (0, number_format_layout_1.layoutNumberFormatParts)({
+            parts: numberFormatLayout,
+            measure: measure,
+            availableWidth: innerWidth,
+            align: canvasTextAlign,
+        })) !== null && _c !== void 0 ? _c : {
+            // The fixed parts alone overflow the cell: paint the plain string
+            // aligned the way the text node would (the group clips it).
+            runs: [
+                {
+                    text: value !== null && value !== void 0 ? value : "",
+                    x: canvasTextAlign === "right"
+                        ? innerWidth - measure(value !== null && value !== void 0 ? value : "")
+                        : canvasTextAlign === "center"
+                            ? (innerWidth - measure(value !== null && value !== void 0 ? value : "")) / 2
+                            : 0,
+                    width: measure(value !== null && value !== void 0 ? value : ""),
+                },
+            ],
+            start: 0,
+            end: innerWidth,
+        };
+        // Konva's text baseline: the line box is `lineHeight × fontSize` tall,
+        // aligned in the node, glyphs centred on it by the font's M box.
+        var lineHeightPx = textLineHeight * effectiveFontSize;
+        var metrics = ctx.measureText("M");
+        var ascent = (_e = (_d = metrics.fontBoundingBoxAscent) !== null && _d !== void 0 ? _d : metrics.actualBoundingBoxAscent) !== null && _e !== void 0 ? _e : 0;
+        var descent = (_g = (_f = metrics.fontBoundingBoxDescent) !== null && _f !== void 0 ? _f : metrics.actualBoundingBoxDescent) !== null && _g !== void 0 ? _g : 0;
+        var alignY = effectiveVerticalAlignment === "top"
+            ? 0
+            : effectiveVerticalAlignment === "middle"
+                ? (shape.height() - lineHeightPx - 2 * padding) / 2
+                : shape.height() - lineHeightPx - 2 * padding;
+        var baselineY = padding + alignY + (ascent - descent) / 2 + lineHeightPx / 2;
+        try {
+            for (var _h = tslib_1.__values(layout.runs), _j = _h.next(); !_j.done; _j = _h.next()) {
+                var run = _j.value;
+                ctx.fillText(run.text, padding + run.x, baselineY);
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (_j && !_j.done && (_a = _h.return)) _a.call(_h);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+        if (!underline && !strikethrough)
+            return;
+        context.beginPath();
+        var textStart = padding + layout.start;
+        var textWidthPx = layout.end - layout.start;
+        if (underline) {
+            try {
+                for (var _k = tslib_1.__values((0, alignment_1.getUnderlineStrokes)({
+                    style: underlineStyle !== null && underlineStyle !== void 0 ? underlineStyle : "single",
+                    textX: textStart,
+                    textWidth: textWidthPx,
+                    cellX: x - shape.x(),
+                    cellWidth: width,
+                    baselineY: baselineY,
+                    fontSize: effectiveFontSize,
+                    scale: scale,
+                })), _l = _k.next(); !_l.done; _l = _k.next()) {
+                    var _m = _l.value, x1 = _m.x1, x2 = _m.x2, strokeY = _m.y;
+                    var yy = Math.round(strokeY) + 0.5;
+                    context.moveTo(x1, yy);
+                    context.lineTo(x2, yy);
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (_l && !_l.done && (_b = _k.return)) _b.call(_k);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+        }
+        if (strikethrough) {
+            var yy = Math.round(baselineY - effectiveFontSize * 0.3) + 0.5;
+            context.moveTo(textStart, yy);
+            context.lineTo(textStart + textWidthPx, yy);
+        }
+        ctx.setAttr("strokeStyle", color !== null && color !== void 0 ? color : defaultColor);
+        ctx.setAttr("lineWidth", Math.max(1, scale));
+        context.stroke();
+    }, [
+        numberFormatLayout,
+        textStyle,
+        effectiveFontSize,
+        fontFamily,
+        color,
+        defaultColor,
+        padding,
+        canvasTextAlign,
+        value,
+        textLineHeight,
+        effectiveVerticalAlignment,
+        underline,
+        strikethrough,
+        underlineStyle,
+        x,
+        width,
+        scale,
+    ]);
+    // Excel's horizontal `distributed`: wrapped lines spread edge to edge
+    // (the last one too), a lone word centred, the indent kept on both sides.
+    var paintDistributed = horizontalAlignment === "distributed" &&
+        !useRichTextRunPath &&
+        !showChip &&
+        !isStackedVertical &&
+        !hasNumericRotation &&
+        !shrinkEnabled;
+    var distributedSceneFunc = (0, react_1.useCallback)(function (context, shape) {
+        var _a, _b, _c, _d;
+        var ctx = context;
+        ctx.setAttr("font", "".concat(textStyle, " normal ").concat(effectiveFontSize, "px ").concat(fontFamily !== null && fontFamily !== void 0 ? fontFamily : "sans-serif"));
+        ctx.setAttr("textBaseline", "alphabetic");
+        ctx.setAttr("textAlign", "left");
+        ctx.setAttr("fillStyle", color !== null && color !== void 0 ? color : defaultColor);
+        var innerWidth = Math.max(0, shape.width() - 2 * padding - indentSpacing);
+        var lines = (0, alignment_1.layoutDistributedLines)(displayValue !== null && displayValue !== void 0 ? displayValue : "", innerWidth, function (text) { return ctx.measureText(text).width; });
+        var lineHeightPx = textLineHeight * effectiveFontSize;
+        var metrics = ctx.measureText("M");
+        var ascent = (_b = (_a = metrics.fontBoundingBoxAscent) !== null && _a !== void 0 ? _a : metrics.actualBoundingBoxAscent) !== null && _b !== void 0 ? _b : 0;
+        var descent = (_d = (_c = metrics.fontBoundingBoxDescent) !== null && _c !== void 0 ? _c : metrics.actualBoundingBoxDescent) !== null && _d !== void 0 ? _d : 0;
+        var blockHeight = lines.length * lineHeightPx;
+        var alignY = effectiveVerticalAlignment === "top"
+            ? 0
+            : effectiveVerticalAlignment === "middle"
+                ? (shape.height() - blockHeight - 2 * padding) / 2
+                : shape.height() - blockHeight - 2 * padding;
+        lines.forEach(function (words, lineIndex) {
+            var e_5, _a;
+            var baselineY = padding +
+                alignY +
+                lineIndex * lineHeightPx +
+                (ascent - descent) / 2 +
+                lineHeightPx / 2;
+            try {
+                for (var words_1 = 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;
+                    ctx.fillText(word.text, padding + word.x, baselineY);
+                }
+            }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            finally {
+                try {
+                    if (words_1_1 && !words_1_1.done && (_a = words_1.return)) _a.call(words_1);
+                }
+                finally { if (e_5) throw e_5.error; }
+            }
+        });
+    }, [
+        textStyle,
+        effectiveFontSize,
+        fontFamily,
+        color,
+        defaultColor,
+        padding,
+        indentSpacing,
+        displayValue,
+        textLineHeight,
+        effectiveVerticalAlignment,
+    ]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         enableOverflow && showGridLines ? (react_1.default.createElement(react_konva_1.Shape, { x: x, y: y, width: width, height: height, sceneFunc: overflowFillFunc, listening: false })) : null,
-        conditionalDataBar && dataBarWidth > 0 ? (react_1.default.createElement(react_konva_1.Rect, { x: dataBarFromRight ? x + width - 1 - dataBarWidth : x + 1, y: y + CF_DATABAR_INSET_Y * scale, width: dataBarWidth, height: dataBarHeight, fill: conditionalDataBar.color, stroke: conditionalDataBar.borderColor, strokeWidth: conditionalDataBar.borderColor ? 1 : 0, listening: false, perfectDrawEnabled: false })) : null,
-        conditionalIcon ? (react_1.default.createElement(react_konva_1.Text, { x: x + 2, y: y, width: config_1.CF_ICON_WIDTH * scale, height: height, text: conditionalIcon.glyph, fill: (_k = (_j = conditionalIcon.color) !== null && _j !== void 0 ? _j : color) !== null && _k !== void 0 ? _k : defaultColor, verticalAlign: "middle", align: "center", fontSize: fontSize, listening: false, perfectDrawEnabled: false })) : null,
+        conditionalDataBar ? (react_1.default.createElement(react_konva_1.Shape, { x: x, y: y, width: width, height: height, sceneFunc: dataBarSceneFunc, listening: false, perfectDrawEnabled: false })) : null,
+        conditionalIcon && cfIconShape ? (react_1.default.createElement(react_konva_1.Shape, { x: x, y: y, width: width, height: height, sceneFunc: cfIconSceneFunc, listening: false, perfectDrawEnabled: false })) : null,
         showCheckbox ? (react_1.default.createElement(cell_checkbox_1.CellCheckbox, { x: x, y: y, scale: scale, width: width, height: height, checked: isChecked, onChange: onCheckboxClick, rowIndex: props.rowIndex, columnIndex: props.columnIndex, verticalAlignment: verticalAlignment, horizontalAlignment: horizontalAlignment })) : showText ? (react_1.default.createElement(react_konva_1.Group, { clipY: y + borderWidth, clipHeight: height, clipX: clipX, clipWidth: clipWidth }, showChip ? (react_1.default.createElement(react_konva_1.Label, { width: width - config_1.CHIP_SPACING * scale, height: config_1.CHIP_HEIGHT * scale, x: textLeftPadding, y: (0, helpers_1.getChipVerticalPosition)(y, height, scale, verticalAlignment), offsetX: -config_1.CHIP_SPACING * scale, offsetY: -config_1.CHIP_SPACING * scale },
             react_1.default.createElement(react_konva_1.Tag, { height: config_1.CHIP_HEIGHT * scale, fill: chipBackgroundColor, cornerRadius: config_1.CHIP_RADIUS * scale, perfectDrawEnabled: false, hitStrokeWidth: 0 }),
             react_1.default.createElement(react_konva_1.Text, { text: displayValue, fill: color !== null && color !== void 0 ? color : defaultColor, verticalAlign: effectiveVerticalAlignment, align: canvasTextAlign, fontFamily: fontFamily, fontStyle: textStyle, fontSize: fontSize, textDecoration: textDecoration, padding: padding, lineHeight: 1, offsetY: -1, perfectDrawEnabled: false, wrap: "none" }))) : useRichTextRunPath ? (
@@ -272,8 +611,10 @@ exports.Cell = (0, react_1.memo)(function (props) {
             // sup/sub font scale itself (exactly once). Shrink-to-
             // fit never reaches this path, so `baseFontSize` equals
             // `effectiveFontSize` for every other cell.
-            baseFontSize: baseFontSize, baseBold: !!bold, baseItalic: !!italic, baseUnderline: !!underline, baseStrikethrough: !!strikethrough, baseBaselineOffset: baselineOffset !== null && baselineOffset !== void 0 ? baselineOffset : undefined, horizontalAlign: canvasTextAlign, verticalAlign: effectiveVerticalAlignment, lineHeight: lineHeight, lineHeightMode: lineHeightMode, scale: scale, wrap: shouldWrap, theme: theme })) : (react_1.default.createElement(react_konva_1.Text, { x: (_l = rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.x) !== null && _l !== void 0 ? _l : textLeftPadding, y: (_m = rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.y) !== null && _m !== void 0 ? _m : textNode.y, offsetX: rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.offsetX, offsetY: rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.offsetY, height: rotatedLayout ? approxTextHeight : textNode.height, width: (_o = rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.width) !== null && _o !== void 0 ? _o : finalTextWidth, text: displayValue, fill: color !== null && color !== void 0 ? color : defaultColor, verticalAlign: rotatedLayout ? "top" : effectiveVerticalAlignment, align: rotatedLayout ? "left" : canvasTextAlign, fontFamily: fontFamily, fontStyle: textStyle, fontSize: effectiveFontSize, textDecoration: textDecoration, padding: padding, wrap: textWrapStrategy, lineHeight: textLineHeight, rotation: rotationDegrees, hitStrokeWidth: 0, perfectDrawEnabled: false })))) : imageUrl ? (react_1.default.createElement(grid_1.Image, { x: x, y: y, spacing: 1, width: width, height: height, url: imageUrl, perfectDrawEnabled: false, horizontalAlignment: canvasTextAlign === "justify" ? "left" : canvasTextAlign, verticalAlignment: verticalAlignment })) : null,
-        showFilter ? (react_1.default.createElement(cell_filter_1.CellFilter, { scale: scale, isActive: isFilterActive, onClick: readonly ? undefined : onFilterClick, rowIndex: props.rowIndex, columnIndex: props.columnIndex, x: x, y: y, height: height, width: width, filterIconColor: filterIconColor, verticalAlignment: verticalAlignment, backgroundColor: defaultBackgroundColor, sortOrder: sortOrder })) : showArrow && !readonly ? (react_1.default.createElement(cell_arrow_1.CellArrow, { scale: scale, onClick: onArrowClick !== null && onArrowClick !== void 0 ? onArrowClick : onRequestEdit, rowIndex: rowIndex, columnIndex: columnIndex, x: x, y: y, height: height, width: width, verticalAlignment: verticalAlignment })) : null,
+            baseFontSize: baseFontSize, baseBold: !!bold, baseItalic: !!italic, baseUnderline: !!underline, baseStrikethrough: !!strikethrough, baseBaselineOffset: baselineOffset !== null && baselineOffset !== void 0 ? baselineOffset : undefined, horizontalAlign: canvasTextAlign, verticalAlign: effectiveVerticalAlignment, lineHeight: lineHeight, lineHeightMode: lineHeightMode, scale: scale, wrap: shouldWrap, theme: theme })) : paintDistributed ? (react_1.default.createElement(react_konva_1.Shape, { x: textLeftPadding, y: textNode.y, width: finalTextWidth, height: textNode.height, sceneFunc: distributedSceneFunc, listening: false, perfectDrawEnabled: false })) : paintNumberFormatLayout ? (react_1.default.createElement(react_konva_1.Shape, { x: textLeftPadding, y: textNode.y, width: finalTextWidth, height: textNode.height, sceneFunc: numberFormatSceneFunc, listening: false, perfectDrawEnabled: false })) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_konva_1.Text, { x: (_j = rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.x) !== null && _j !== void 0 ? _j : textLeftPadding, y: (_k = rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.y) !== null && _k !== void 0 ? _k : textNode.y, offsetX: rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.offsetX, offsetY: rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.offsetY, height: rotatedLayout ? approxTextHeight : textNode.height, width: (_l = rotatedLayout === null || rotatedLayout === void 0 ? void 0 : rotatedLayout.width) !== null && _l !== void 0 ? _l : finalTextWidth, text: displayValue, fill: color !== null && color !== void 0 ? color : defaultColor, verticalAlign: rotatedLayout ? "top" : effectiveVerticalAlignment, align: rotatedLayout ? "left" : canvasTextAlign, fontFamily: fontFamily, fontStyle: textStyle, fontSize: effectiveFontSize, textDecoration: paintStyledUnderline ? textDecorationFor(false) : textDecoration, padding: padding, wrap: textWrapStrategy, lineHeight: textLineHeight, rotation: rotationDegrees, direction: textDirection, hitStrokeWidth: 0, perfectDrawEnabled: false }),
+            paintStyledUnderline ? (react_1.default.createElement(react_konva_1.Shape, { sceneFunc: underlineSceneFunc, listening: false, perfectDrawEnabled: false })) : null)))) : imageUrl ? (react_1.default.createElement(grid_1.Image, { x: x, y: y, spacing: 1, width: width, height: height, url: imageUrl, perfectDrawEnabled: false, horizontalAlignment: canvasTextAlign === "justify" ? "left" : canvasTextAlign, verticalAlignment: verticalAlignment })) : null,
+        showFilter ? (react_1.default.createElement(cell_filter_1.CellFilter, { scale: scale, isActive: isFilterActive, onClick: readonly ? undefined : onFilterClick, rowIndex: props.rowIndex, columnIndex: props.columnIndex, x: x, y: y, height: height, width: width, filterIconColor: filterIconColor, verticalAlignment: verticalAlignment, backgroundColor: defaultBackgroundColor, sortOrder: sortOrder })) : showArrow && !readonly ? (react_1.default.createElement(cell_arrow_1.CellArrow, { scale: scale, onClick: onArrowClick !== null && onArrowClick !== void 0 ? onArrowClick : onRequestEdit, rowIndex: rowIndex, columnIndex: columnIndex, x: arrowOutside ? x + (config_1.ARROW_DOWN_WIDTH + 4) * scale : x, y: y, height: height, width: width, verticalAlignment: verticalAlignment })) : null,
         expandable ? (react_1.default.createElement(cell_group_1.CellGroup, { scale: scale, onClick: function (cell) {
                 onExpandCollapse === null || onExpandCollapse === void 0 ? void 0 : onExpandCollapse(cell, !expanded);
             }, rowIndex: rowIndex, columnIndex: columnIndex, x: x + indentSpacing, y: y, height: height, width: width, verticalAlignment: verticalAlignment, expanded: expanded, theme: theme })) : null,

package/dist/cjs/components/cell/number-format-layout.d.ts

@@ -0,0 +1,35 @@
+import { type NumberFormatLayoutPart } from "@rowsncolumns/utils";
+export type NumberFormatRun = {
+    text: string;
+    x: number;
+    width: number;
+};
+export type NumberFormatRunLayout = {
+    runs: NumberFormatRun[];
+    /** Left edge of the first painted glyph (or reserve). */
+    start: number;
+    /** Right edge of the last one. */
+    end: number;
+};
+/**
+ * Position the parts inside `availableWidth`. Parts before the (first) fill
+ * start at the left edge and parts after it end at the right edge, with the
+ * fill character repeated in between as many whole times as it fits —
+ * Excel's accounting format (`$` left, number right). Without a fill the
+ * block is aligned by `align`. Returns `undefined` when the fixed parts
+ * alone do not fit, so the caller keeps its plain-text paint.
+ */
+export declare const layoutNumberFormatParts: ({ parts, measure, availableWidth, align, }: {
+    parts: readonly NumberFormatLayoutPart[];
+    measure: (text: string) => number;
+    availableWidth: number;
+    align: "left" | "center" | "right" | "justify";
+}) => NumberFormatRunLayout | undefined;
+/**
+ * The layout parts for a cell, or `undefined` when the pattern has no
+ * width-aware token or when the parts would paint a different string than
+ * the cell's formatted value (another engine, locale or conditional number
+ * format produced it) — the plain string then stays authoritative.
+ */
+export declare const getCellNumberFormatLayout: (pattern: string | null | undefined, value: number | string | null | undefined, formattedValue: string | null | undefined, locale?: string) => NumberFormatLayoutPart[] | undefined;
+//# sourceMappingURL=number-format-layout.d.ts.map

package/dist/cjs/components/cell/number-format-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-format-layout.d.ts","sourceRoot":"","sources":["../../../../components/cell/number-format-layout.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,KAAK,sBAAsB,EAG5B,MAAM,qBAAqB,CAAC;AAE7B,MAAM,MAAM,eAAe,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzE,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,GAAI,4CAKrC;IACD,KAAK,EAAE,SAAS,sBAAsB,EAAE,CAAC;IACzC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;CAChD,KAAG,qBAAqB,GAAG,SA+D3B,CAAC;AAKF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,GACpC,SAAS,MAAM,GAAG,IAAI,GAAG,SAAS,EAClC,OAAO,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EACzC,gBAAgB,MAAM,GAAG,IAAI,GAAG,SAAS,EACzC,SAAS,MAAM,KACd,sBAAsB,EAAE,GAAG,SAa7B,CAAC"}