fix: reduce set font and limit fillText out of viewbounds (#4800)

Author: lumixraku

e2e/perf/scroll.spec.ts

@@ -21,6 +21,7 @@ import { sheetData as emptySheetData } from '../__testing__/emptysheet';
 import { sheetData as freezeData } from '../__testing__/freezesheet';
 import { sheetData as mergeCellData } from '../__testing__/mergecell';
 import { sheetData as overflowData } from '../__testing__/overflow';
+import { reportToPosthog } from '../utils/report-performance';
 
 export interface IFPSData {
     fpsData: number[];
@@ -39,7 +40,7 @@ interface IFPSResult {
     maxFrameTimes: number[];
 }
 
-const isCI = !!process.env.CI;
+// const isCI = !!process.env.CI;
 /**
  * measure FPS of scrolling time.
  * @param page Page from playwright
@@ -132,7 +133,7 @@ async function measureFPS(page: Page, testDuration = 5, deltaX: number, deltaY:
     return fpsCounterPromise as Promise<IFPSResult>;
 }
 
-const createTest = (title: string, sheetData: IJsonObject, minFpsValue: number, deltaX = 0, deltaY = 0) => {
+const createTest = (title: string, telemetryName: string, sheetData: IJsonObject, minFpsValue: number, deltaX = 0, deltaY = 0) => {
     // Default Size Of browser: 1280x720 pixels. And default DPR is 1.
     test(title, async ({ page }) => {
         await page.goto('http://localhost:3000/sheets/');
@@ -154,6 +155,8 @@ const createTest = (title: string, sheetData: IJsonObject, minFpsValue: number,
                 console.log('FPS', resultOfFPS.fps);
                 console.log('medianFrameTime', resultOfFPS.medianFrameTime);
                 console.log('max10FrameTimes', resultOfFPS.maxFrameTimes);
+
+                await reportToPosthog(telemetryName, resultOfFPS);
                 expect(resultOfFPS.fps).toBeGreaterThan(minFpsValue);
             });
         } catch (error) {
@@ -165,7 +168,7 @@ const createTest = (title: string, sheetData: IJsonObject, minFpsValue: number,
     });
 };
 
-createTest('sheet scroll empty', emptySheetData, 50, 10, 100);
-createTest('sheet scroll after freeze', freezeData, 10, 10, 100);
-createTest('sheet scroll in a lots of merge cell', mergeCellData, 10, 10, 50);
-createTest('sheet X scroll in a lots of overflow', overflowData, 10, 50, 5);
+createTest('sheet scroll empty', 'perf.sheet.scroll.empty', emptySheetData, 50, 10, 100);
+createTest('sheet scroll after freeze', 'perf.sheet.scroll.freeze', freezeData, 10, 10, 100);
+createTest('sheet scroll in a lots of merge cell', 'perf.sheet.scroll.mergeCell', mergeCellData, 10, 10, 50);
+createTest('sheet X scroll in a lots of overflow', 'perf.sheet.scroll.overflow', overflowData, 10, 50, 5);

package.json

@@ -25,7 +25,7 @@
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",
-        "dev": "turbo dev:demo",
+        "dev": "turbo dev:demo  -- --host 0.0.0.0",
         "dev:libs": "pnpm --filter univer-examples dev:demo-libs",
         "dev:e2e": "pnpm --filter univer-examples dev:e2e",
         "lint:types": "turbo lint:types",

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

@@ -15,6 +15,7 @@
  */
 
 import { awaitTime, Disposable, ICommandService, IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
+
 import { DEFAULT_WORKBOOK_DATA_DEMO, DEFAULT_WORKBOOK_DATA_DEMO_DEFAULT_STYLE } from '@univerjs/mockdata';
 import { DisposeUniverCommand } from '../../commands/commands/unit.command';
 import { getDefaultDocData } from './data/default-doc';

packages/core/src/sheets/sheet-skeleton.ts

@@ -97,7 +97,7 @@ export class SheetSkeleton extends Skeleton {
         this._isRowStylePrecedeColumnStyle = this._configService.getConfig(IS_ROW_STYLE_PRECEDE_COLUMN_STYLE) ?? false;
     }
 
-    _resetCache() {
+    resetCache() {
         //
     }
 
@@ -447,12 +447,16 @@ export class SheetSkeleton extends Skeleton {
      * @param bounds
      */
     calculate(): Nullable<SheetSkeleton> {
-        this._resetCache();
+        this.resetCache();
         this._updateLayout();
 
         return this;
     }
 
+    resetRangeCache(_ranges: IRange[]): void {
+        // ...
+    }
+
     private _dynamicallyUpdateRowHeaderWidth(rowHeader: {
         width: number;
     }): number {

packages/engine-render/src/components/docs/doc-component.ts

@@ -82,7 +82,7 @@ export abstract class DocComponent extends RenderComponent<
         }
     }
 
-    override render(mainCtx: UniverRenderingContext, bounds?: IViewportInfo) {
+    override render(mainCtx: UniverRenderingContext, bounds?: Partial<IViewportInfo>) {
         if (!this.visible) {
             this.makeDirty(false);
             return this;
@@ -146,5 +146,5 @@ export abstract class DocComponent extends RenderComponent<
         return false;
     }
 
-    protected abstract _draw(ctx: UniverRenderingContext, bounds?: IViewportInfo): void;
+    protected abstract _draw(ctx: UniverRenderingContext, bounds?: Partial<IViewportInfo>): void;
 }

packages/engine-render/src/components/docs/document.ts

@@ -21,7 +21,7 @@ import type { Transform } from '../../basics/transform';
 import type { IBoundRectNoAngle, IViewportInfo } from '../../basics/vector2';
 import type { UniverRenderingContext } from '../../context';
 import type { Scene } from '../../scene';
-import type { ComponentExtension, IExtensionConfig } from '../extension';
+import type { ComponentExtension, IDrawInfo, IExtensionConfig } from '../extension';
 import type { IDocumentsConfig, IPageMarginLayout } from './doc-component';
 import type { DocumentSkeleton } from './layout/doc-skeleton';
 import { CellValueType, HorizontalAlign, VerticalAlign, WrapStrategy } from '@univerjs/core';
@@ -432,7 +432,9 @@ export class Documents extends DocComponent {
 
                                     for (const extension of glyphExtensionsExcludeBackground) {
                                         extension.extensionOffset = extensionOffset;
-                                        extension.draw(ctx, parentScale, glyph);
+                                        extension.draw(ctx, parentScale, glyph, [], {
+                                            viewBound: bounds?.viewBound,
+                                        } as IDrawInfo);
                                     }
                                 }
 

packages/engine-render/src/components/docs/extensions/font-and-base-line.ts

@@ -15,8 +15,10 @@
  */
 
 import type { IScale } from '@univerjs/core';
+import type { IBoundRectNoAngle } from '../../../basics';
 import type { IDocumentSkeletonGlyph } from '../../../basics/i-document-skeleton-cached';
 import type { UniverRenderingContext } from '../../../context';
+import type { IDrawInfo } from '../../extension';
 import { BaselineOffset, getColorStyle } from '@univerjs/core';
 import { GlyphType, hasCJK } from '../../../basics';
 import { COLOR_BLACK_RGB } from '../../../basics/const';
@@ -29,14 +31,31 @@ const UNIQUE_KEY = 'DefaultDocsFontAndBaseLineExtension';
 
 const DOC_EXTENSION_Z_INDEX = 20;
 
+/**
+ * Singleton
+ */
 export class FontAndBaseLine extends docExtension {
     override uKey = UNIQUE_KEY;
 
     override Z_INDEX = DOC_EXTENSION_Z_INDEX;
 
     private _preFontColor = '';
 
-    override draw(ctx: UniverRenderingContext, parentScale: IScale, glyph: IDocumentSkeletonGlyph) {
+    /**
+     * ctx.font = val;  then ctx.font is not exactly the same as val
+     * that is because canvas would normalize the font string, remove default value and convert pt to px.
+     * so we need a map to store actual value and set value
+     */
+    actualFontMap: Record<string, string> = {};
+
+    constructor() {
+        super();
+    }
+
+    // invoked by document.ts
+    override draw(ctx: UniverRenderingContext, _parentScale: IScale, glyph: IDocumentSkeletonGlyph, _?: IBoundRectNoAngle, more?: IDrawInfo) {
+        // _parentScale: IScale, _skeleton: T, _diffBounds?: V, _more?: IDrawInfo
+
         const line = glyph.parent?.parent;
         if (!line) {
             return;
@@ -46,6 +65,15 @@ export class FontAndBaseLine extends docExtension {
 
         const { spanPointWithFont = Vector2.create(0, 0) } = this.extensionOffset;
 
+        if (more) {
+            if (more.viewBound) {
+                // ctx.fillText('', x, y), the 'y' is the baseline of a character, not the left top of the character
+                if (spanPointWithFont.x > more.viewBound.right || spanPointWithFont.y - glyph.bBox.aba > more.viewBound.bottom) {
+                    return;
+                }
+            }
+        }
+
         if (content == null) {
             return;
         }
@@ -55,8 +83,12 @@ export class FontAndBaseLine extends docExtension {
             return;
         }
 
-        if (ctx.font !== fontStyle?.fontString) {
-            ctx.font = fontStyle?.fontString || '';
+        const fontStringPxStr = fontStyle?.fontString || '';
+        if (fontStringPxStr) {
+            if (ctx.font !== this.actualFontMap[fontStringPxStr]) {
+                ctx.font = fontStringPxStr;
+                this.actualFontMap[fontStringPxStr] = ctx.font;
+            }
         }
 
         const { cl: colorStyle, va: baselineOffset } = textStyle;
@@ -71,7 +103,6 @@ export class FontAndBaseLine extends docExtension {
         } else if (baselineOffset === BaselineOffset.SUBSCRIPT) {
             spanPointWithFont.y += bBox.sbo;
         }
-
         this._fillText(ctx, glyph, spanPointWithFont);
     }
 

packages/engine-render/src/components/docs/layout/shaping-engine/font-cache.ts

@@ -218,8 +218,12 @@ export class FontCache {
         }, fontStyle);
     }
 
-    // 获取有值单元格文本大小
-    // let measureTextCache = {}, measureTextCacheTimeOut = null;
+    /**
+     * Measure text on another canvas.
+     * @param content
+     * @param fontString
+     * @returns IMeasureTextCache
+     */
     static getMeasureText(content: string, fontString: string): IMeasureTextCache {
         if (!this._context) {
             const canvas = document.createElement('canvas');
@@ -242,7 +246,6 @@ export class FontCache {
         if (mtc != null) {
             return mtc;
         }
-
         ctx.font = fontString;
 
         const textMetrics = ctx.measureText(content);

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

@@ -56,7 +56,7 @@ export class ComponentExtension<T, U, V> {
         return this.Z_INDEX;
     }
 
-    draw(ctx: UniverRenderingContext, parentScale: IScale, skeleton: T, diffBounds?: V, more?: IDrawInfo) {
+    draw(_ctx: UniverRenderingContext, _parentScale: IScale, _skeleton: T, _diff?: V, _more?: IDrawInfo) {
         /* abstract */
     }