chore: better code

dream-num · Oct 9, 2024 · d174ae0 · d174ae0
1 parent ef659b4
commit d174ae0
Show file tree

Hide file tree

Showing 9 changed files with 156 additions and 148 deletions.
diff --git a/e2e/perf/scroll.spec.ts b/e2e/perf/scroll.spec.ts
@@ -133,6 +133,7 @@ async function measureFPS(page: Page, testDuration = 5, deltaX: number, deltaY:
 }
 
 const createTest = (title: string, sheetData: IJsonObject, minFpsValue: number, deltaX = 0, deltaY = 0) => {
+    // Default Size Of browser: 1280x720 pixels. And default DPR is 1.
     test(title, async ({ page }) => {
         let port = 3000;
         if (!isCI) {

diff --git a/eslint.config.js b/eslint.config.js
@@ -25,6 +25,9 @@ export default antfu({
         html: true,
     },
     rules: baseRules,
+    ignores: [
+        'mockdata/**/*.json',
+    ],
 }, {
     files: ['**/*.ts', '**/*.tsx'],
     ignores: [

diff --git a/packages/engine-render/src/basics/draw.ts b/packages/engine-render/src/basics/draw.ts
@@ -15,11 +15,11 @@
  */
 
 import type { IPosition } from '@univerjs/core';
-import { BorderStyleTypes } from '@univerjs/core';
-
 import type { UniverRenderingContext } from '../context';
-import { BORDER_TYPE, ORIENTATION_TYPE } from './const';
+
 import type { IDocumentSkeletonLine } from './i-document-skeleton-cached';
+import { BorderStyleTypes } from '@univerjs/core';
+import { BORDER_TYPE as BORDER_LTRB, ORIENTATION_TYPE } from './const';
 import { createCanvasElement } from './tools';
 import { Vector2 } from './vector2';
 
@@ -61,28 +61,28 @@ export function getDevicePixelRatio(): number {
  * @param lineWidthBuffer Solving the problem of mitered corners in the drawing of borders thicker than 2 pixels, caused by the line segments being centered.
  * @param position border draw position
  */
-export function drawLineByBorderType(ctx: UniverRenderingContext, type: BORDER_TYPE, lineWidthBuffer: number, position: IPosition) {
+export function drawLineByBorderType(ctx: UniverRenderingContext, type: BORDER_LTRB, lineWidthBuffer: number, position: IPosition) {
     let drawStartX = 0;
     let drawStartY = 0;
     let drawEndX = 0;
     let drawEndY = 0;
     const { startX, startY, endX, endY } = position;
-    if (type === BORDER_TYPE.TOP) {
+    if (type === BORDER_LTRB.TOP) {
         drawStartX = startX - lineWidthBuffer;
         drawStartY = startY;
         drawEndX = endX + lineWidthBuffer;
         drawEndY = startY;
-    } else if (type === BORDER_TYPE.BOTTOM) {
+    } else if (type === BORDER_LTRB.BOTTOM) {
         drawStartX = startX - lineWidthBuffer;
         drawStartY = endY;
         drawEndX = endX - lineWidthBuffer;
         drawEndY = endY;
-    } else if (type === BORDER_TYPE.LEFT) {
+    } else if (type === BORDER_LTRB.LEFT) {
         drawStartX = startX;
         drawStartY = startY - lineWidthBuffer;
         drawEndX = startX;
         drawEndY = endY + lineWidthBuffer;
-    } else if (type === BORDER_TYPE.RIGHT) {
+    } else if (type === BORDER_LTRB.RIGHT) {
         drawStartX = endX;
         drawStartY = startY - lineWidthBuffer;
         drawEndX = endX;
@@ -97,42 +97,49 @@ export function drawLineByBorderType(ctx: UniverRenderingContext, type: BORDER_T
     ctx.stroke();
 }
 
-export function drawDiagonalLineByBorderType(ctx: UniverRenderingContext, type: BORDER_TYPE, position: IPosition) {
+export function drawDiagonalLineByBorderType(ctx: UniverRenderingContext, type: BORDER_LTRB, position: IPosition) {
     let drawStartX = 0;
     let drawStartY = 0;
     let drawEndX = 0;
     let drawEndY = 0;
     const { startX, startY, endX, endY } = position;
-    if (type === BORDER_TYPE.TL_BR) {
-        drawStartX = startX;
-        drawStartY = startY;
-        drawEndX = endX;
-        drawEndY = endY;
-    } else if (type === BORDER_TYPE.TL_BC) {
-        drawStartX = startX;
-        drawStartY = startY;
-        drawEndX = (startX + endX) / 2;
-        drawEndY = endY;
-    } else if (type === BORDER_TYPE.TL_MR) {
-        drawStartX = startX;
-        drawStartY = startY;
-        drawEndX = endX;
-        drawEndY = (startY + endY) / 2;
-    } else if (type === BORDER_TYPE.BL_TR) {
-        drawStartX = startX;
-        drawStartY = endY;
-        drawEndX = endX;
-        drawEndY = startY;
-    } else if (type === BORDER_TYPE.ML_TR) {
-        drawStartX = startX;
-        drawStartY = (startY + endY) / 2;
-        drawEndX = endX;
-        drawEndY = startY;
-    } else if (type === BORDER_TYPE.BC_TR) {
-        drawStartX = (startX + endX) / 2;
-        drawStartY = endY;
-        drawEndX = endX;
-        drawEndY = startY;
+    switch (type) {
+        case BORDER_LTRB.TL_BR:
+            drawStartX = startX;
+            drawStartY = startY;
+            drawEndX = endX;
+            drawEndY = endY;
+            break;
+        case BORDER_LTRB.TL_BC:
+            drawStartX = startX;
+            drawStartY = startY;
+            drawEndX = (startX + endX) / 2;
+            drawEndY = endY;
+            break;
+        case BORDER_LTRB.TL_MR:
+            drawStartX = startX;
+            drawStartY = startY;
+            drawEndX = endX;
+            drawEndY = (startY + endY) / 2;
+            break;
+        case BORDER_LTRB.BL_TR:
+            drawStartX = startX;
+            drawStartY = endY;
+            drawEndX = endX;
+            drawEndY = startY;
+            break;
+        case BORDER_LTRB.ML_TR:
+            drawStartX = startX;
+            drawStartY = (startY + endY) / 2;
+            drawEndX = endX;
+            drawEndY = startY;
+            break;
+        case BORDER_LTRB.BC_TR:
+            drawStartX = (startX + endX) / 2;
+            drawStartY = endY;
+            drawEndX = endX;
+            drawEndY = startY;
+            break;
     }
 
     // ctx.clearRect(drawStartX - 1, drawStartY - 1, drawEndX - drawStartX + 2, drawEndY - drawStartY + 2);
@@ -143,32 +150,37 @@ export function drawDiagonalLineByBorderType(ctx: UniverRenderingContext, type:
     ctx.stroke();
 }
 
-export function clearLineByBorderType(ctx: UniverRenderingContext, type: BORDER_TYPE, position: IPosition) {
+export function clearLineByBorderType(ctx: UniverRenderingContext, type: BORDER_LTRB, position: IPosition) {
     let drawStartX = 0;
     let drawStartY = 0;
     let drawEndX = 0;
     let drawEndY = 0;
     const { startX, startY, endX, endY } = position;
-    if (type === BORDER_TYPE.TOP) {
-        drawStartX = startX;
-        drawStartY = startY;
-        drawEndX = endX;
-        drawEndY = startY;
-    } else if (type === BORDER_TYPE.BOTTOM) {
-        drawStartX = startX;
-        drawStartY = endY;
-        drawEndX = endX;
-        drawEndY = endY;
-    } else if (type === BORDER_TYPE.LEFT) {
-        drawStartX = startX;
-        drawStartY = startY;
-        drawEndX = startX;
-        drawEndY = endY;
-    } else if (type === BORDER_TYPE.RIGHT) {
-        drawStartX = endX;
-        drawStartY = startY;
-        drawEndX = endX;
-        drawEndY = endY;
+    switch (type) {
+        case BORDER_LTRB.TOP:
+            drawStartX = startX;
+            drawStartY = startY;
+            drawEndX = endX;
+            drawEndY = startY;
+            break;
+        case BORDER_LTRB.BOTTOM:
+            drawStartX = startX;
+            drawStartY = endY;
+            drawEndX = endX;
+            drawEndY = endY;
+            break;
+        case BORDER_LTRB.LEFT:
+            drawStartX = startX;
+            drawStartY = startY;
+            drawEndX = startX;
+            drawEndY = endY;
+            break;
+        case BORDER_LTRB.RIGHT:
+            drawStartX = endX;
+            drawStartY = startY;
+            drawEndX = endX;
+            drawEndY = endY;
+            break;
     }
 
     // ctx.beginPath();
@@ -252,7 +264,7 @@ export function getRotateOrientation(angle: number) {
 }
 
 // rotate calculate logic https://www.processon.com/view/link/630df928f346fb0714c9c4ec
-// eslint-disable-next-line max-lines-per-function
+// eslint-disable-next-line max-lines-per-function, complexity
 export function getRotateOffsetAndFarthestHypotenuse(
     lines: IDocumentSkeletonLine[],
     rectWidth: number,
@@ -388,8 +400,7 @@ export function getRotateOffsetAndFarthestHypotenuse(
 
 /**
  * Align the resolution, an alignment needs to be done in special cases where the resolution is 1.5, 1.25, etc.
- * @param pixelRatio devicePixelRatio
- * @returns
+ * @returns {left: number, top: number} offset
  */
 export function getTranslateInSpreadContextWithPixelRatio() {
     const offset = 0.5 - getLineOffset();

diff --git a/packages/engine-render/src/components/docs/document.ts b/packages/engine-render/src/components/docs/document.ts
@@ -14,11 +14,19 @@
  * limitations under the License.
  */
 
-import { CellValueType, HorizontalAlign, VerticalAlign, WrapStrategy } from '@univerjs/core';
+import type { IDocumentRenderConfig, IScale, Nullable } from '@univerjs/core';
 
+import type { IDocumentSkeletonGlyph, IDocumentSkeletonLine, IDocumentSkeletonPage, IDocumentSkeletonTable } from '../../basics/i-document-skeleton-cached';
+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 { IDocumentsConfig, IPageMarginLayout } from './doc-component';
+import type { DocumentSkeleton } from './layout/doc-skeleton';
+import { CellValueType, HorizontalAlign, VerticalAlign, WrapStrategy } from '@univerjs/core';
 import { Subject } from 'rxjs';
-import type { IDocumentRenderConfig, IScale, Nullable } from '@univerjs/core';
-import { BORDER_TYPE, drawLineByBorderType } from '../../basics';
+import { BORDER_TYPE as BORDER_LTRB, drawLineByBorderType } from '../../basics';
 import { calculateRectRotate, getRotateOffsetAndFarthestHypotenuse } from '../../basics/draw';
 import { LineType } from '../../basics/i-document-skeleton-cached';
 import { VERTICAL_ROTATE_ANGLE } from '../../basics/text-rotation';
@@ -28,14 +36,6 @@ import { DocumentsSpanAndLineExtensionRegistry } from '../extension';
 import { DocComponent } from './doc-component';
 import { DOCS_EXTENSION_TYPE } from './doc-extension';
 import { Liquid } from './liquid';
-import type { IDocumentSkeletonGlyph, IDocumentSkeletonLine, IDocumentSkeletonPage, IDocumentSkeletonTable } from '../../basics/i-document-skeleton-cached';
-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 { IDocumentsConfig, IPageMarginLayout } from './doc-component';
-import type { DocumentSkeleton } from './layout/doc-skeleton';
 import './extensions';
 
 export interface IPageRenderConfig {
@@ -723,28 +723,28 @@ export class Documents extends DocComponent {
         x += marginLeft;
         y += marginTop;
 
-        drawLineByBorderType(ctx, BORDER_TYPE.LEFT, 0, {
+        drawLineByBorderType(ctx, BORDER_LTRB.LEFT, 0, {
             startX: x,
             startY: y,
             endX: x + pageWidth,
             endY: y + pageHeight,
         });
 
-        drawLineByBorderType(ctx, BORDER_TYPE.TOP, 0, {
+        drawLineByBorderType(ctx, BORDER_LTRB.TOP, 0, {
             startX: x,
             startY: y,
             endX: x + pageWidth,
             endY: y + pageHeight,
         });
 
-        drawLineByBorderType(ctx, BORDER_TYPE.RIGHT, 0, {
+        drawLineByBorderType(ctx, BORDER_LTRB.RIGHT, 0, {
             startX: x,
             startY: y,
             endX: x + pageWidth,
             endY: y + pageHeight,
         });
 
-        drawLineByBorderType(ctx, BORDER_TYPE.BOTTOM, 0, {
+        drawLineByBorderType(ctx, BORDER_LTRB.BOTTOM, 0, {
             startX: x,
             startY: y,
             endX: x + pageWidth,

diff --git a/packages/engine-render/src/components/docs/extensions/border.ts b/packages/engine-render/src/components/docs/extensions/border.ts
@@ -15,13 +15,13 @@
  */
 
 import type { BorderStyleTypes, IBorderData, IBorderStyleData, IScale, Nullable } from '@univerjs/core';
-import { getColorStyle } from '@univerjs/core';
+import type { IDocumentSkeletonGlyph } from '../../../basics/i-document-skeleton-cached';
 
-import { BORDER_TYPE, COLOR_BLACK_RGB, FIX_ONE_PIXEL_BLUR_OFFSET } from '../../../basics/const';
+import type { UniverRenderingContext } from '../../../context';
+import { getColorStyle } from '@univerjs/core';
+import { BORDER_TYPE as BORDER_LTRB, COLOR_BLACK_RGB, FIX_ONE_PIXEL_BLUR_OFFSET } from '../../../basics/const';
 import { drawLineByBorderType, getLineWidth, setLineType } from '../../../basics/draw';
-import type { IDocumentSkeletonGlyph } from '../../../basics/i-document-skeleton-cached';
 import { Vector2 } from '../../../basics/vector2';
-import type { UniverRenderingContext } from '../../../context';
 import { DocumentsSpanAndLineExtensionRegistry } from '../../extension';
 import { docExtension } from '../doc-extension';
 
@@ -85,7 +85,7 @@ export class Border extends docExtension {
                 this._preBorderColor = color;
             }
 
-            drawLineByBorderType(ctx, type as BORDER_TYPE, (lineWidth - 1) / 2 / precisionScale, {
+            drawLineByBorderType(ctx, type as BORDER_LTRB, (lineWidth - 1) / 2 / precisionScale, {
                 startX: spanStartPoint.x,
                 startY: spanStartPoint.y,
                 endX: spanStartPoint.x + spanWidth,
@@ -103,11 +103,11 @@ export class Border extends docExtension {
 
     private _createBorderCache(borderData: IBorderData) {
         const { t, b, l, r } = borderData;
-        const borderCache = new Map<BORDER_TYPE, Nullable<IBorderStyleData>>();
-        t && borderCache.set(BORDER_TYPE.TOP, t);
-        b && borderCache.set(BORDER_TYPE.BOTTOM, b);
-        l && borderCache.set(BORDER_TYPE.LEFT, l);
-        r && borderCache.set(BORDER_TYPE.RIGHT, r);
+        const borderCache = new Map<BORDER_LTRB, Nullable<IBorderStyleData>>();
+        t && borderCache.set(BORDER_LTRB.TOP, t);
+        b && borderCache.set(BORDER_LTRB.BOTTOM, b);
+        l && borderCache.set(BORDER_LTRB.LEFT, l);
+        r && borderCache.set(BORDER_LTRB.RIGHT, r);
         return borderCache;
     }
 }