chore: Add id for main canvas

dream-num · Oct 11, 2024 · 8987b65 · 8987b65
1 parent 71d2513
commit 8987b65
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 11 deletions.
diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts
@@ -24,7 +24,18 @@ test('diff default sheet content', async ({ page }) => {
     await page.evaluate(() => window.E2EControllerAPI.loadDefaultSheet());
     await page.waitForTimeout(5000);
 
-    await expect(page).toHaveScreenshot(generateSnapshotName('default-sheet'), { maxDiffPixels: 5 });
+    // await expect(page).toHaveScreenshot(generateSnapshotName('default-sheet'), { maxDiffPixels: 5 });
+    const filename = generateSnapshotName('default-sheet');
+    // ignore DOM part when comparison
+    const screenshot = await page.screenshot({
+        clip: {
+            x: 0,
+            y: 92,
+            width: 1280,
+            height: 592, // 720 - 92(header) - 36(bottom)
+        },
+    });
+    await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
 });
 const isCI = !!process.env.CI;
 
@@ -42,7 +53,19 @@ test('diff demo sheet content', async ({ page }) => {
     await page.evaluate(() => window.E2EControllerAPI.loadDemoSheet());
     await page.waitForTimeout(2000);
 
-    await expect(page).toHaveScreenshot(generateSnapshotName('demo-sheet'), { maxDiffPixels: 5 });
+    // await expect(page).toHaveScreenshot(generateSnapshotName('demo-sheet'), { maxDiffPixels: 5 });
+
+    const filename = generateSnapshotName('demo-sheet');
+    // ignore DOM part when comparison
+    const screenshot = await page.screenshot({
+        clip: {
+            x: 0,
+            y: 92,
+            width: 1280,
+            height: 592, // 720 - 92(header) - 36(bottom)
+        },
+    });
+    await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
     await page.waitForTimeout(2000);
     expect(errored).toBeFalsy();
 });
@@ -63,9 +86,12 @@ test('diff merged cells rendering', async () => {
     await page.waitForTimeout(2000);
 
     await page.evaluate(() => window.E2EControllerAPI.loadMergeCellSheet());
-    await page.waitForTimeout(5000);
+    await page.waitForTimeout(2000);
 
-    await expect(page).toHaveScreenshot(generateSnapshotName('mergedCellsRendering'), { maxDiffPixels: 5 });
+    // await expect(page).toHaveScreenshot(generateSnapshotName('mergedCellsRendering'), { maxDiffPixels: 5 });
+    const filename = generateSnapshotName('mergedCellsRendering');
+    const screenshot = await page.locator('#univer-sheet-main-canvas').screenshot();
+    await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
 
     await page.waitForTimeout(2000);
     await browser.close();
@@ -127,7 +153,17 @@ test('diff merged cells rendering after scrolling', async () => {
     });
     await page.waitForTimeout(2000);
 
-    await expect(page).toHaveScreenshot(generateSnapshotName('mergedCellsRenderingScrolling'), { maxDiffPixels: 5 });
+    // await expect(page).toHaveScreenshot(generateSnapshotName('mergedCellsRenderingScrolling'), { maxDiffPixels: 5 });
+    const filename = generateSnapshotName('mergedCellsRenderingScrolling');
+    const screenshot = await page.screenshot({
+        clip: {
+            x: 0,
+            y: 92,
+            width: 1280,
+            height: 1152,
+        },
+    });
+    await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
 
     await page.waitForTimeout(2000);
     await browser.close();

diff --git a/...ts-visual-comparison.spec.ts-snapshots/mergedCellsRendering-chromium-darwin.png b/...ts-visual-comparison.spec.ts-snapshots/mergedCellsRendering-chromium-darwin.png
diff --git a/...-comparison.spec.ts-snapshots/mergedCellsRenderingScrolling-chromium-darwin.png b/...-comparison.spec.ts-snapshots/mergedCellsRenderingScrolling-chromium-darwin.png
diff --git a/packages/engine-render/src/canvas.ts b/packages/engine-render/src/canvas.ts
@@ -40,6 +40,7 @@ interface ICanvasProps {
     height?: number;
     pixelRatio?: number;
     mode?: CanvasRenderMode;
+    id?: string;
 }
 
 /**
@@ -126,6 +127,10 @@ export class Canvas {
         return this._height;
     }
 
+    setId(id: string) {
+        this._canvasEle!.id = id;
+    }
+
     setSize(width?: number, height?: number, pixelRatioParam?: number) {
         // this.setWidth(width || 0);
         // this.setHeight(height || 0);

diff --git a/packages/engine-render/src/engine.ts b/packages/engine-render/src/engine.ts
@@ -133,6 +133,8 @@ export class Engine extends ThinEngine<Scene> {
 
     private _previousHeight = -1000;
 
+    private _unitId: string = ''; // unitId
+
     constructor(elemWidth: number = 1, elemHeight: number = 1, pixelRatio?: number, mode?: CanvasRenderMode) {
         super();
         this._canvas = new Canvas({

diff --git a/packages/engine-render/src/render-manager/render-manager.service.ts b/packages/engine-render/src/render-manager/render-manager.service.ts
@@ -14,18 +14,18 @@
  * limitations under the License.
  */
 
-import { createIdentifier, Disposable, Inject, Injector, IUniverInstanceService, remove, toDisposable, UniverInstanceType } from '@univerjs/core';
-import { BehaviorSubject, Subject } from 'rxjs';
 import type { Dependency, DependencyIdentifier, IDisposable, Nullable, UnitModel, UnitType } from '@univerjs/core';
 import type { Observable } from 'rxjs';
-
-import { Engine } from '../engine';
-import { Scene } from '../scene';
-import { type IRender, RenderUnit } from './render-unit';
 import type { BaseObject } from '../base-object';
 import type { DocComponent } from '../components/docs/doc-component';
+
 import type { SheetComponent } from '../components/sheets/sheet-component';
 import type { Slide } from '../components/slides/slide';
+import { createIdentifier, Disposable, Inject, Injector, IUniverInstanceService, remove, toDisposable, UniverInstanceType } from '@univerjs/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { Engine } from '../engine';
+import { Scene } from '../scene';
+import { type IRender, RenderUnit } from './render-unit';
 
 export type RenderComponentType = SheetComponent | DocComponent | Slide | BaseObject;
 

diff --git a/packages/sheets-ui/src/services/sheets-render.service.ts b/packages/sheets-ui/src/services/sheets-render.service.ts
@@ -83,6 +83,11 @@ export class SheetsRenderService extends RxDisposable {
 
     private _createRenderer(workbook: Workbook): void {
         const unitId = workbook.getUnitId();
+        this._renderManagerService.created$.subscribe((renderer) => {
+            if (renderer.unitId === unitId) {
+                renderer.engine.getCanvas().setId('univer-sheet-main-canvas');
+            }
+        });
         this._renderManagerService.createRender(unitId);
 
         // NOTE@wzhudev: maybe not in univer mode