feat: add set scrolling & get scrollInfo & better freeze API for faca…

…de (#4290) Co-authored-by: GitHub Actions <actions@github.com>
dream-num · Dec 17, 2024 · 1bd1325 · 1bd1325
1 parent fb9bfcd
commit 1bd1325
Show file tree

Hide file tree

Showing 28 changed files with 668 additions and 364 deletions.
diff --git a/.github/workflows/update-snapshots-manually.yml b/.github/workflows/update-snapshots-manually.yml
@@ -5,7 +5,7 @@ on:
     workflow_dispatch:
 
 jobs:
-    udpate-snapshots:
+    update-snapshots:
         runs-on: ubuntu-latest
         env:
             GH_TOKEN: ${{ github.token }}

diff --git a/e2e/visual-comparison/sheets/sheets-scroll.spec.ts b/e2e/visual-comparison/sheets/sheets-scroll.spec.ts
@@ -0,0 +1,106 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { chromium, expect, test } from '@playwright/test';
+import { generateSnapshotName } from '../const';
+
+const SHEET_MAIN_CANVAS_ID = '#univer-sheet-main-canvas_workbook-01';
+const isCI = !!process.env.CI;
+
+test('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(1000);
+
+    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(1000);
+
+    const filename = generateSnapshotName('mergedCellsRenderingScrolling');
+    const screenshot = await page.locator(SHEET_MAIN_CANVAS_ID).screenshot();
+    await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
+});
+
+test('rendering after scrolling by API', 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.evaluate(async () => {
+        const activeSheet = window.univerAPI.getActiveWorkbook().getActiveSheet();
+        activeSheet.scrollToCell(2, 4);
+    });
+    await page.waitForTimeout(1000);
+    const filename = generateSnapshotName('renderingAfterScrollByAPI');
+    const screenshot = await page.locator(SHEET_MAIN_CANVAS_ID).screenshot();
+    await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
+});
diff --git a/...ts-scroll.spec.ts-snapshots/mergedCellsRenderingScrolling-ci-chromium-linux.png b/...ts-scroll.spec.ts-snapshots/mergedCellsRenderingScrolling-ci-chromium-linux.png
diff --git a/...sheets-scroll.spec.ts-snapshots/renderingAfterScrollByAPI-ci-chromium-linux.png b/...sheets-scroll.spec.ts-snapshots/renderingAfterScrollByAPI-ci-chromium-linux.png
diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts
@@ -22,7 +22,7 @@ const isCI = !!process.env.CI;
 
 test('diff default sheet toolbar', async () => {
     const browser = await chromium.launch({
-        headless: !!isCI, // Set to false to see the browser window
+        headless: isCI, // Set to false to see the browser window
     });
     const context = await browser.newContext({
         viewport: { width: 1280, height: 720 },
@@ -33,7 +33,7 @@ test('diff default sheet toolbar', async () => {
     await page.waitForTimeout(2000);
 
     await page.evaluate(() => window.E2EControllerAPI.loadDefaultSheet());
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     const filename = generateSnapshotName('default-sheet-fullpage');
     const screenshot = await page.screenshot({
@@ -51,7 +51,7 @@ test('diff default sheet content', async ({ page }) => {
     await page.waitForTimeout(2000);
 
     await page.evaluate(() => window.E2EControllerAPI.loadDefaultSheet());
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     const filename = generateSnapshotName('default-sheet');
     const screenshot = await page.locator('#univer-sheet-main-canvas_test').screenshot();
@@ -70,7 +70,7 @@ test('diff demo sheet content', async ({ page }) => {
     await page.waitForTimeout(2000);
 
     await page.evaluate(() => window.E2EControllerAPI.loadDemoSheet());
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     const filename = generateSnapshotName('demo-sheet');
     const screenshot = await page.locator(SHEET_MAIN_CANVAS_ID).screenshot();
@@ -94,73 +94,12 @@ test('diff merged cells rendering', async () => {
     await page.waitForTimeout(2000);
 
     await page.evaluate(() => window.E2EControllerAPI.loadMergeCellSheet());
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     const filename = generateSnapshotName('mergedCellsRendering');
     const screenshot = await page.locator(SHEET_MAIN_CANVAS_ID).screenshot();
     await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
 });
-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);
-
-    const filename = generateSnapshotName('mergedCellsRenderingScrolling');
-    const screenshot = await page.locator(SHEET_MAIN_CANVAS_ID).screenshot();
-    await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
-});
 
 /**
  * Aim for default sheet style.
@@ -178,7 +117,7 @@ test('diff sheet default style rendering', async () => {
     await page.waitForTimeout(2000);
 
     await page.evaluate(() => window.E2EControllerAPI.loadDefaultStyleSheet());
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     const filename = generateSnapshotName('defaultstyle');
     const screenshot = await page.locator(SHEET_MAIN_CANVAS_ID).screenshot();
@@ -198,7 +137,7 @@ test('diff facade sheet hooks', async () => {
     await page.waitForTimeout(2000);
 
     await page.evaluate(() => window.E2EControllerAPI.loadDefaultStyleSheet());
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     await page.evaluate(() => window.univerAPI.getSheetHooks().onCellRender([{
         drawWith: (ctx, info) => {

diff --git a/packages/core/src/common/interceptor.ts b/packages/core/src/common/interceptor.ts
@@ -33,6 +33,11 @@ export interface IInterceptor<M, C> {
 }
 
 export interface ICellInterceptor<M, C> extends IInterceptor<M, C> {
+    /**
+     * The effect of the interceptor handler.
+     * If the effect is 'Style', the worksheet@getCellValueOnly will bypass this interceptor.
+     * If the effect is 'Value', the worksheet@getStyleOnly will bypass this interceptor.
+     */
     effect?: InterceptorEffectEnum;
 }
 

diff --git a/packages/engine-render/src/basics/tools.ts b/packages/engine-render/src/basics/tools.ts
@@ -538,6 +538,8 @@ export function getCellWithCoordByIndexCore(
     columnWidthAccumulation: number[],
     mergeDataInfo: ICellInfo
 ): ICellWithCoord {
+    row = Tools.clamp(row, 0, rowHeightAccumulation.length - 1);
+    column = Tools.clamp(column, 0, columnWidthAccumulation.length - 1);
     // eslint-disable-next-line prefer-const
     let { startY, endY, startX, endX } = getCellPositionByIndex(
         row,
@@ -561,7 +563,6 @@ export function getCellWithCoordByIndexCore(
     };
 
     const rowAccumulationCount = rowHeightAccumulation.length - 1;
-
     const columnAccumulationCount = columnWidthAccumulation.length - 1;
 
     if (isMerged && startRow !== -1 && startColumn !== -1) {

diff --git a/packages/engine-render/src/components/sheets/index.ts b/packages/engine-render/src/components/sheets/index.ts
@@ -15,6 +15,7 @@
  */
 
 export * from './column-header';
+export * from './constants';
 export * from './extensions';
 export * from './interfaces';
 export * from './row-header';