[FIX] grid_renderer_store: keep wrapping width with explicit align

Since PR#8004 ([FIX] Dynamic pivot: header alignment), width-aware
formatting is disabled on explicitly aligned cells to preserve the pivot
header alignment fix.

The renderer was reusing that same width to split wrapped content, so
cells with `wrapping: "wrap"` and an explicit horizontal alignment were
still getting the correct row height, but their text was rendered as a
single clipped line.

This commit separates the formatting width from the wrapping width:
- keep `formatWidth` disabled for explicitly aligned cells
- always use the real cell width to split wrapped text

closes #8216

Task: 6032407
X-original-commit: c39fdd0
Signed-off-by: Rémi Rahir (rar) <rar@odoo.com>
Signed-off-by: Dhrutik Patel (dhrp) <dhrp@odoo.com>

Author: dhrp-odoo

packages/o-spreadsheet-engine/src/plugins/ui_feature/ui_sheet.ts

@@ -162,12 +162,14 @@ export class SheetUIPlugin extends UIPlugin {
    */
   getCellMultiLineText(
     position: CellPosition,
-    args: { wrapText: boolean; maxWidth: number }
+    // Keep the stable getter signature additive for compatibility.
+    // 19.3+ can use a dedicated wrapping width argument instead.
+    args: { wrapText: boolean; maxWidth: number; formatWidth?: number }
   ): string[] {
     const style = this.getters.getCellStyle(position);
     const text = this.getters.getCellText(position, {
       showFormula: this.getters.shouldShowFormulas(),
-      availableWidth: args.maxWidth,
+      availableWidth: args.formatWidth,
     });
     return splitTextToWidth(this.ctx, text, style, args.wrapText ? args.maxWidth : undefined);
   }

src/stores/grid_renderer_store.ts

@@ -742,9 +742,13 @@ export class GridRenderer extends SpreadsheetStore {
     /** Content */
     const wrapping = style.wrapping || "overflow";
     const wrapText = wrapping === "wrap" && !showFormula;
-    // we want to give priority to the style, so if there is one we don't fill with white spaces
-    const maxWidth = style.align ? 0 : width - 2 * MIN_CELL_TEXT_MARGIN;
-    const multiLineText = this.getters.getCellMultiLineText(position, { maxWidth, wrapText });
+    const maxWidth = width - 2 * MIN_CELL_TEXT_MARGIN;
+    const formatWidth = style.align ? 0 : maxWidth;
+    const multiLineText = this.getters.getCellMultiLineText(position, {
+      maxWidth,
+      formatWidth,
+      wrapText,
+    });
     const noRotatationStyle = { ...style, align: "left" as const, rotation: 0 };
     const textWidth =
       Math.max(...multiLineText.map((line) => this.getters.getTextWidth(line, noRotatationStyle))) +

tests/renderer/renderer_store.test.ts

@@ -1976,6 +1976,23 @@ describe("renderer", () => {
       expect(renderedTexts.slice(0, 4)).toEqual(splittedText);
     });
 
+    test.each<Align>(["left", "center", "right"])(
+      "Wrapped text is displayed over multiple lines with %s align",
+      (align) => {
+        const overFlowingContent = "ThisIsAVeryVeryLongText";
+        setCellContent(model, "A1", overFlowingContent);
+        setFormatting(model, "A1", { wrapping: "wrap", align });
+        resizeColumns(model, ["A"], 14);
+
+        // Split length = 14 - 2*MIN_CELL_TEXT_MARGIN = 6 letters (1 letter = 1px in the tests)
+        const splittedText = ["ThisIs", "AVeryV", "eryLon", "gText"];
+
+        drawGridRenderer(ctx);
+
+        expect(renderedTexts.slice(0, 4)).toEqual(splittedText);
+      }
+    );
+
     test("Wrapped text try to not split words in multiple lines if the word is small enough", () => {
       const overFlowingContent = "W Word2 W3 WordThatIsTooLong";
       setCellContent(model, "A1", overFlowingContent);