fix: merged cell bg not fully ender (#3671)

Co-authored-by: GitHub Actions <actions@github.com>

.github/workflows/playwright.yml

@@ -26,7 +26,7 @@ jobs:
               run: pnpm build:e2e
 
             - name: Run Playwright Tests
-              run: pnpm exec playwright test
+              run: pnpm exec playwright test --output=playwright-assets
 
             - name: 🚀 Deploy to Vercel
               uses: amondnet/vercel-action@v25

.gitignore

@@ -108,6 +108,7 @@ storybook-static
 # playwright
 /test-results/
 /playwright-report/
+/playwright-assets/
 /blob-report/
 /playwright/.cache/
 playwright-report.json

e2e/e2e.d.ts

@@ -3,8 +3,9 @@
 export interface IE2EControllerAPI {
     loadAndRelease(id: number, loadTimeout?: number, disposeTimeout?: number): Promise<void>;
     loadDefaultSheet(loadTimeout?: number): Promise<void>;
-    loadDefaultDoc(loadTimeout?: number,): Promise<void>;
-    loadDemoSheet(): Promise<void>;
+    loadDefaultDoc(loadTimeout?: number): Promise<void>;
+    loadDemoSheet(loadTimeout?: number): Promise<void>;
+    loadMergeCellSheet(loadTimeout?: number): Promise<void>;
     disposeUniver(): Promise<void>;
     disposeCurrSheetUnit(disposeTimeout?: number): Promise<void>;
 }

e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { expect, test } from '@playwright/test';
+import { chromium, expect, test } from '@playwright/test';
 import { generateSnapshotName } from '../const';
 
 test('diff default sheet content', async ({ page }) => {
@@ -26,6 +26,7 @@ test('diff default sheet content', async ({ page }) => {
 
     await expect(page).toHaveScreenshot(generateSnapshotName('default-sheet'), { maxDiffPixels: 5 });
 });
+const isCI = !!process.env.CI;
 
 test('diff demo sheet content', async ({ page }) => {
     let errored = false;
@@ -39,8 +40,95 @@ test('diff demo sheet content', async ({ page }) => {
     await page.waitForTimeout(2000);
 
     await page.evaluate(() => window.E2EControllerAPI.loadDemoSheet());
-    await page.waitForTimeout(5000);
+    await page.waitForTimeout(2000);
 
     await expect(page).toHaveScreenshot(generateSnapshotName('demo-sheet'), { maxDiffPixels: 5 });
+    await page.waitForTimeout(2000);
     expect(errored).toBeFalsy();
 });
+
+/**
+ * Aim for merged cells rendering.
+ */
+test('diff merged cells rendering', async () => {
+    const browser = await chromium.launch({
+        headless: !!isCI, // Set to false to see the browser window
+    });
+    const context = await browser.newContext({
+        viewport: { width: 1280, height: 1280 },
+        deviceScaleFactor: 2, // Set your desired DPR
+    });
+    const page = await context.newPage();
+    await page.goto('http://localhost:3000/sheets/');
+    await page.waitForTimeout(2000);
+
+    await page.evaluate(() => window.E2EControllerAPI.loadMergeCellSheet());
+    await page.waitForTimeout(5000);
+
+    await expect(page).toHaveScreenshot(generateSnapshotName('mergedCellsRendering'), { maxDiffPixels: 5 });
+
+    await page.waitForTimeout(2000);
+    await browser.close();
+});
+test('diff merged cells rendering after scrolling', async () => {
+    const browser = await chromium.launch({
+        headless: !!isCI, // Set to false to see the browser window in local
+    });
+    const context = await browser.newContext({
+        viewport: { width: 1280, height: 1280 },
+        deviceScaleFactor: 2, // Set your desired DPR
+    });
+    const page = await context.newPage();
+    await page.goto('http://localhost:3000/sheets/');
+    await page.waitForTimeout(2000);
+
+    await page.evaluate(() => window.E2EControllerAPI.loadMergeCellSheet());
+    await page.waitForTimeout(2000);
+
+    await page.evaluate(async () => {
+        const dispatchWheelEvent = (deltaX: number, deltaY: number, element: HTMLElement, interval: number = 30, lastFor: number = 1000) => {
+            // const canvasElements = document.querySelectorAll('canvas.univer-render-canvas') as unknown as HTMLElement[];
+            // const filteredCanvasElements = Array.from(canvasElements).filter((canvas) => canvas.offsetHeight > 500);
+
+            const dispatchSimulateWheelEvent = (element) => {
+                const event = new WheelEvent('wheel', {
+                    bubbles: true,
+                    cancelable: true,
+                    deltaY,
+                    deltaX,
+                    clientX: 580,
+                    clientY: 580,
+                });
+                element.dispatchEvent(event);
+            };
+
+            // mock wheel event.
+            let intervalID;
+            const continuousWheelSimulation = (element, interval) => {
+                intervalID = setInterval(function () {
+                    dispatchSimulateWheelEvent(element);
+                }, interval);
+            };
+
+            // start mock wheel event.
+            continuousWheelSimulation(element, interval);
+            return new Promise((resolve) => {
+                setTimeout(() => {
+                    clearInterval(intervalID);
+                    resolve(1);
+                }, lastFor);
+            });
+        };
+        const canvasElements = document.querySelectorAll('canvas.univer-render-canvas') as unknown as HTMLElement[];
+        const filteredCanvasElements = Array.from(canvasElements).filter((canvas) => canvas.offsetHeight > 500);
+        const element = filteredCanvasElements[0];
+        await dispatchWheelEvent(0, 100, element);
+        await dispatchWheelEvent(0, -100, element);
+    });
+    await page.waitForTimeout(2000);
+
+    await expect(page).toHaveScreenshot(generateSnapshotName('mergedCellsRenderingScrolling'), { maxDiffPixels: 5 });
+
+    await page.waitForTimeout(2000);
+    await browser.close();
+});

packages-experimental/debugger/src/controllers/e2e/e2e.controller.ts

@@ -28,7 +28,8 @@ const AWAIT_DISPOSING_TIMEOUT = 5000;
 export interface IE2EControllerAPI {
     loadAndRelease(id: number, loadTimeout?: number, disposeTimeout?: number): Promise<void>;
     loadDefaultSheet(loadTimeout?: number): Promise<void>;
-    loadDemoSheet(): Promise<void>;
+    loadDemoSheet(loadTimeout?: number): Promise<void>;
+    loadMergeCellSheet(loadTimeout?: number): Promise<void>;
     loadDefaultDoc(loadTimeout?: number,): Promise<void>;
     disposeUniver(): Promise<void>;
     disposeCurrSheetUnit(disposeTimeout?: number): Promise<void>;
@@ -64,6 +65,7 @@ export class E2EController extends Disposable {
             loadAndRelease: (id, loadTimeout, disposeTimeout) => this._loadAndRelease(id, loadTimeout, disposeTimeout),
             loadDefaultSheet: (loadTimeout) => this._loadDefaultSheet(loadTimeout),
             loadDemoSheet: () => this._loadDemoSheet(),
+            loadMergeCellSheet: () => this._loadMergeCellSheet(2000),
             disposeCurrSheetUnit: (disposeTimeout?: number) => this._diposeDefaultSheetUnit(disposeTimeout),
             loadDefaultDoc: (loadTimeout) => this._loadDefaultDoc(loadTimeout),
             disposeUniver: () => this._disposeUniver(),
@@ -92,6 +94,16 @@ export class E2EController extends Disposable {
         await awaitTime(AWAIT_LOADING_TIMEOUT);
     }
 
+    /**
+     * sheet-003 in default data
+     */
+    private async _loadMergeCellSheet(loadingTimeout: number = AWAIT_LOADING_TIMEOUT): Promise<void> {
+        const data = { ...DEFAULT_WORKBOOK_DATA_DEMO };
+        data.sheetOrder = ['sheet-0003'];
+        this._univerInstanceService.createUnit(UniverInstanceType.UNIVER_SHEET, data);
+        await awaitTime(loadingTimeout);
+    }
+
     private async _loadDefaultDoc(loadingTimeout: number = AWAIT_LOADING_TIMEOUT): Promise<void> {
         this._univerInstanceService.createUnit(UniverInstanceType.UNIVER_DOC, getDefaultDocData());
         await awaitTime(loadingTimeout);

packages/core/src/sheets/span-model.ts

@@ -163,6 +163,16 @@ export class SpanModel extends Disposable {
         return null;
     }
 
+    /**
+     * Return index of merge data if (row,col) is in merge range. -1 means not in merge range.
+     * @param row
+     * @param column
+     * @returns {number} index of merge range.
+     */
+    public getMergeDataIndex(row: number, column: number) {
+        return this._getMergeDataIndex(row, column);
+    }
+
     public isRowContainsMergedCell(row: number) {
         if (this._hasAll) {
             return true;

packages/core/src/sheets/workbook.ts

@@ -14,18 +14,18 @@
  * limitations under the License.
  */
 
-import { BehaviorSubject, Subject } from 'rxjs';
 import type { Observable } from 'rxjs';
+import type { Nullable } from '../shared';
 
+import type { IRangeType, IWorkbookData, IWorksheetData } from './typedef';
+import { BehaviorSubject, Subject } from 'rxjs';
 import { UnitModel, UniverInstanceType } from '../common/unit';
 import { ILogService } from '../services/log/log.service';
 import { Tools } from '../shared';
 import { BooleanNumber } from '../types/enum';
 import { getEmptySnapshot } from './empty-snapshot';
 import { Styles } from './styles';
 import { Worksheet } from './worksheet';
-import type { Nullable } from '../shared';
-import type { IRangeType, IWorkbookData, IWorksheetData } from './typedef';
 
 export function getWorksheetUID(workbook: Workbook, worksheet: Worksheet): string {
     return `${workbook.getUnitId()}|${worksheet.getSheetId()}`;

packages/core/src/sheets/worksheet.ts

@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
+import type { IObjectMatrixPrimitiveType, Nullable } from '../shared';
+import type { Styles } from './styles';
+import type { ICellData, ICellDataForSheetInterceptor, IFreeze, IRange, ISelectionCell, IWorksheetData } from './typedef';
 import { BuildTextUtils } from '../docs';
 import { ObjectMatrix, Tools } from '../shared';
 import { createRowColIter } from '../shared/row-col-iter';
@@ -24,9 +27,6 @@ import { RowManager } from './row-manager';
 import { mergeWorksheetSnapshotWithDefault } from './sheet-snapshot-utils';
 import { SpanModel } from './span-model';
 import { SheetViewModel } from './view-model';
-import type { IObjectMatrixPrimitiveType, Nullable } from '../shared';
-import type { Styles } from './styles';
-import type { ICellData, ICellDataForSheetInterceptor, IFreeze, IRange, ISelectionCell, IWorksheetData } from './typedef';
 
 /**
  * The model of a Worksheet.
@@ -249,7 +249,7 @@ export class Worksheet {
     }
 
     /**
-     *  Get the merged cell info list which has intersection with the given range.
+     * Get the merged cell info list which has intersection with the given range.
      * @param {number} startRow The start row index of the range
      * @param {number} startColumn The start column index of the range
      * @param {number} endRow The end row index of the range

packages/engine-render/src/components/extension.ts

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { Registry } from '@univerjs/core';
 import type { IDocumentRenderConfig, IRange, IScale, Nullable } from '@univerjs/core';
-
-import { getScale } from '../basics/tools';
 import type { BaseObject } from '../base-object';
-import type { Vector2 } from '../basics/vector2';
+
+import type { IBoundRectNoAngle, Vector2 } from '../basics/vector2';
 import type { UniverRenderingContext } from '../context';
+import { Registry } from '@univerjs/core';
+import { getScale } from '../basics/tools';
 
 export interface IExtensionConfig {
     originTranslate?: Vector2; // docs
@@ -35,6 +35,7 @@ export interface IDrawInfo {
     viewRanges: IRange[];
     viewportKey: string;
     checkOutOfViewBound?: boolean;
+    viewBound?: IBoundRectNoAngle;
 }
 export class ComponentExtension<T, U, V> {
     uKey: string = '';