fix(doc): inline format optimization in render (#486)

* fix: background render * fix: use content height to calculate underline positon * refactor: optimization of render of text selection when start offset is equal to end offset * refactor: add Chinese mock doc data * fix: optimization of render position of subscript
dream-num · Nov 20, 2023 · a6d8853 · a6d8853
1 parent f117337
commit a6d8853
Show file tree

Hide file tree

Showing 17 changed files with 1,339 additions and 558 deletions.
diff --git a/examples/univer-doc-ts/src/main.tsx b/examples/univer-doc-ts/src/main.tsx
@@ -1,7 +1,7 @@
 import { DocPlugin } from '@univerjs/base-docs';
 import { RenderEngine } from '@univerjs/base-render';
 import { UIPlugin } from '@univerjs/base-ui';
-import { DEFAULT_DOCUMENT_DATA_EN } from '@univerjs/common-plugin-data';
+import { DEFAULT_DOCUMENT_DATA_CN } from '@univerjs/common-plugin-data';
 import { ImagePlugin } from '@univerjs/common-plugin-image';
 import { LocaleType, Univer } from '@univerjs/core';
 import { defaultTheme } from '@univerjs/design';
@@ -37,7 +37,7 @@ univer.registerPlugin(DocUIPlugin, {
 
 univer.registerPlugin(ImagePlugin);
 
-univer.createUniverDoc(DEFAULT_DOCUMENT_DATA_EN);
+univer.createUniverDoc(DEFAULT_DOCUMENT_DATA_CN);
 
 // use for console test
 declare global {

diff --git a/packages/base-docs/src/controllers/page-render.controller.ts b/packages/base-docs/src/controllers/page-render.controller.ts
@@ -58,9 +58,11 @@ export class PageRenderController extends Disposable {
                 if ([DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY].includes(unitId)) {
                     return;
                 }
+                // Draw page borders
                 const { page, pageLeft, pageTop, ctx } = config;
-                const { width, height, marginBottom, marginLeft, marginRight, marginTop } = page;
+                const { width, height } = page;
                 ctx.save();
+                // eslint-disable-next-line no-magic-numbers
                 ctx.translate(pageLeft - 0.5, pageTop - 0.5);
                 Rect.drawWith(ctx, {
                     width: pageSize?.width || width,

diff --git a/packages/base-render/src/basics/font-cache.ts b/packages/base-render/src/basics/font-cache.ts
@@ -117,14 +117,18 @@ export class FontCache {
         if (this._fontDataMap.size === 0) {
             return getDefaultBaselineOffset(fontSize);
         }
+
         const fontFamilyList = fontFamily.split(',');
+
         for (let ff of fontFamilyList) {
             ff = ff.replace(/'/g, '');
             const fontData = this._fontDataMap.get(ff);
             if (!fontData) {
                 continue;
             }
+
             const { subscriptSizeRatio, subscriptOffset, superscriptSizeRatio, superscriptOffset } = fontData;
+
             return {
                 sbr: subscriptSizeRatio,
                 sbo: subscriptOffset * fontSize,
@@ -161,13 +165,15 @@ export class FontCache {
         const { fontString, fontSize, fontFamily } = fontStyle;
 
         let bBox = this._getBoundingBoxByFont(fontFamily, fontSize);
+
         if (!bBox) {
             // if (content === DataStreamTreeTokenType.PARAGRAPH) {
             //     content = '0';
             // }
             const measureText = this.getMeasureText(content, fontString);
             bBox = this._calculateBoundingBoxByMeasureText(measureText, fontSize);
         }
+
         return bBox;
     }
 
@@ -309,6 +315,7 @@ export class FontCache {
             actualBoundingBoxAscent,
             actualBoundingBoxDescent,
         } = textCache;
+
         return {
             width,
             ba: fontBoundingBoxAscent,

diff --git a/packages/base-render/src/basics/tools.ts b/packages/base-render/src/basics/tools.ts
@@ -488,6 +488,7 @@ export function pxToInch(px: number) {
 
 export function getScale(parentScale: IScale) {
     const { scaleX = 1, scaleY = 1 } = parentScale;
+
     return Math.max(scaleX, scaleY);
 }
 

diff --git a/packages/base-render/src/components/docs/block/paragraph/paragraph.ts b/packages/base-render/src/components/docs/block/paragraph/paragraph.ts
@@ -213,7 +213,7 @@ export function dealWidthParagraph(
             i = newCharIndex;
             newSpanGroup = spanGroup;
         } else {
-            const span = createSkeletonWordSpan(char, fontCreateConfig); // measureText收敛到create中执行
+            const span = createSkeletonWordSpan(char, fontCreateConfig); // measureText 收敛到 create 中执行
             newSpanGroup.push(span);
         }
 

diff --git a/packages/base-render/src/components/docs/common/convert-cursor.ts b/packages/base-render/src/components/docs/common/convert-cursor.ts
@@ -135,7 +135,7 @@ export function getOneTextSelectionRange(rangeList: ITextRange[]): Nullable<ITex
 }
 
 export class NodePositionConvertToCursor {
-    private _Liquid = new Liquid();
+    private _liquid = new Liquid();
 
     private _documentOffsetConfig: Nullable<IDocumentOffsetConfig>;
 
@@ -166,28 +166,30 @@ export class NodePositionConvertToCursor {
     }
 
     getRangePointData(startOrigin: Nullable<INodePosition>, endOrigin: Nullable<INodePosition>) {
-        const pointGroup: IPoint[][] = [];
+        const borderBoxPointGroup: IPoint[][] = [];
+        const contentBoxPointGroup: IPoint[][] = [];
 
         const cursorList: ITextRange[] = [];
 
         if (startOrigin == null || endOrigin == null) {
             return {
-                pointGroup,
+                borderBoxPointGroup,
+                contentBoxPointGroup,
                 cursorList,
             };
         }
 
         const { start, end } = compareNodePosition(startOrigin, endOrigin);
 
-        // eslint-disable-next-line max-lines-per-function
         this._selectionIterator(start!, end!, (start_sp, end_sp, isFirst, isLast, divide, line) => {
-            const { lineHeight } = line;
+            const { lineHeight, marginTop, paddingTop, contentHeight } = line;
 
             const { spanGroup, st } = divide;
 
-            const { x: startX, y: startY } = this._Liquid;
+            const { x: startX, y: startY } = this._liquid;
 
-            let position: IPosition;
+            let borderBoxPosition: IPosition;
+            let contentBoxPosition: IPosition;
 
             const firstSpan = spanGroup[start_sp];
             const lastSpan = spanGroup[end_sp];
@@ -215,12 +217,19 @@ export class NodePositionConvertToCursor {
             if (start_sp === 0 && end_sp === spanGroup.length - 1) {
                 endOffset -= hasList ? 1 : 0;
 
-                position = {
+                borderBoxPosition = {
                     startX: startX + firstSpanLeft + (isCurrentList ? firstSpanWidth : 0),
                     startY,
                     endX: startX + lastSpanLeft + lastSpanWidth,
                     endY: startY + lineHeight,
                 };
+
+                contentBoxPosition = {
+                    startX: startX + firstSpanLeft + (isCurrentList ? firstSpanWidth : 0),
+                    startY: startY + marginTop,
+                    endX: startX + lastSpanLeft + lastSpanWidth,
+                    endY: startY + marginTop + contentHeight,
+                };
             } else {
                 const isStartBackFin = isStartBack && !isCurrentList;
 
@@ -234,20 +243,28 @@ export class NodePositionConvertToCursor {
 
                 endOffset -= hasList && !isCurrentList ? 1 : 0;
 
-                position = {
+                borderBoxPosition = {
                     startX: startX + firstSpanLeft + (isStartBackFin ? 0 : firstSpanWidth),
                     startY,
                     endX: startX + lastSpanLeft + (isEndBack ? 0 : lastSpanWidth),
                     endY: startY + lineHeight,
                 };
 
+                contentBoxPosition = {
+                    startX: startX + firstSpanLeft + (isStartBackFin ? 0 : firstSpanWidth),
+                    startY: startY + marginTop,
+                    endX: startX + lastSpanLeft + (isEndBack ? 0 : lastSpanWidth),
+                    endY: startY + marginTop + contentHeight,
+                };
+
                 // for (let sp = start_sp; sp <= end_sp; sp++) {
                 //     const span = spanGroup[sp];
                 //     const { width: spanWidth, left: spanLeft } = span;
                 // }
             }
 
-            pointGroup.push(this._pushToPoints(position));
+            borderBoxPointGroup.push(this._pushToPoints(borderBoxPosition));
+            contentBoxPointGroup.push(this._pushToPoints(contentBoxPosition));
 
             cursorList.push({
                 startOffset: isStartBack ? startOffset : startOffset + 1,
@@ -257,7 +274,8 @@ export class NodePositionConvertToCursor {
         });
 
         return {
-            pointGroup,
+            borderBoxPointGroup,
+            contentBoxPointGroup,
             cursorList,
         };
     }
@@ -372,6 +390,7 @@ export class NodePositionConvertToCursor {
     private _pushToPoints(position: IPosition) {
         const { startX, startY, endX, endY } = position;
         const points: Array<{ x: number; y: number }> = [];
+
         points.push({
             x: startX,
             y: startY,
@@ -391,14 +410,15 @@ export class NodePositionConvertToCursor {
             x: startX,
             y: endY,
         });
+
         points.push({
             x: startX,
             y: startY,
         });
+
         return points;
     }
 
-    // eslint-disable-next-line max-lines-per-function
     private _selectionIterator(
         startPosition: INodePosition,
         endPosition: INodePosition,
@@ -419,7 +439,7 @@ export class NodePositionConvertToCursor {
             return [];
         }
 
-        this._Liquid.reset();
+        this._liquid.reset();
 
         const skeletonData = skeleton.getSkeletonData();
 
@@ -443,7 +463,7 @@ export class NodePositionConvertToCursor {
 
         for (let p = 0; p <= pageIndex - 1; p++) {
             const page = pages[p];
-            this._Liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
+            this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
         }
 
         for (let p = pageIndex; p <= endPageIndex; p++) {
@@ -457,8 +477,8 @@ export class NodePositionConvertToCursor {
                 sections.length - 1,
                 p
             );
-            this._Liquid.translateSave();
-            this._Liquid.translatePagePadding(page);
+            this._liquid.translateSave();
+            this._liquid.translatePagePadding(page);
 
             for (let s = start_s; s <= end_s; s++) {
                 const section = sections[s];
@@ -471,7 +491,7 @@ export class NodePositionConvertToCursor {
                     s
                 );
 
-                this._Liquid.translateSection(section);
+                this._liquid.translateSection(section);
 
                 for (let c = start_c; c <= end_c; c++) {
                     const column = columns[c];
@@ -484,7 +504,7 @@ export class NodePositionConvertToCursor {
                         c
                     );
 
-                    this._Liquid.translateColumn(column);
+                    this._liquid.translateColumn(column);
 
                     for (let l = start_l; l <= end_l; l++) {
                         const line = lines[l];
@@ -496,16 +516,16 @@ export class NodePositionConvertToCursor {
                             divides.length - 1,
                             l
                         );
-                        this._Liquid.translateSave();
-                        this._Liquid.translateLine(line);
+                        this._liquid.translateSave();
+                        this._liquid.translateLine(line);
 
                         for (let d = start_d; d <= end_d; d++) {
                             const divide = divides[d];
 
                             // console.log('div', divides, divide, startPosition, endPosition, start_d, end_d, d);
 
-                            this._Liquid.translateSave();
-                            this._Liquid.translateDivide(divide);
+                            this._liquid.translateSave();
+                            this._liquid.translateDivide(divide);
 
                             const spanGroup = divide.spanGroup;
 
@@ -531,16 +551,16 @@ export class NodePositionConvertToCursor {
 
                             func && func(start_sp, end_sp, isFirst, isLast, divide, line, column, section, page);
 
-                            this._Liquid.translateRestore();
+                            this._liquid.translateRestore();
                         }
 
-                        this._Liquid.translateRestore();
+                        this._liquid.translateRestore();
                     }
                 }
             }
 
-            this._Liquid.translateRestore();
-            this._Liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
+            this._liquid.translateRestore();
+            this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
         }
     }
 }