feat(doc): refactor of text shaping and support kerning (#1785)

* feat: support kerning * feat: refactor text shaping and support kerning * feat: findBestMatchFont * refactor: rename function name * feat: adjust bounding box * feat: add check local fonts permission * fix: remove debug codes * fix: kerning adjustment * fix: kerning adjustment * fix: handle emoji * test: add test case of prepareParagraphBody * test: add test case of prepareTextChunks * fix: lint error * fix: lint error * chore: fix types * chore: remove unused exports * fix: lint error * fix: lint error * fix: test ci * fix: test ci error * refactor: add types of opentype.js * refactor: add glyphs cache * refactor: rebase dev * refactor: update lock file * fix: lint error * fix: type lint error * fix: temporarily disable using opentype for shaping --------- Co-authored-by: 白熱 <sonne@asaki.me>
dream-num · Apr 13, 2024 · e7f1036 · e7f1036
1 parent f80ed5d
commit e7f1036
Show file tree

Hide file tree

Showing 23 changed files with 992 additions and 125 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -23,12 +23,14 @@
         "customd",
         "Datas",
         "DATEFMTLISG",
+        "demi",
         "dppx",
         "Dushusir",
         "endindex",
         "esbuild",
         "evented",
         "execa",
+        "EXTRALIGHT",
         "FONTFACE",
         "fract",
         "gainsboro",
@@ -53,6 +55,8 @@
         "kcode",
         "keyof",
         "Lerp",
+        "letterform",
+        "liga",
         "linebreak",
         "linebreaker",
         "linebreaking",
@@ -64,6 +68,8 @@
         "mengshukeji",
         "Neue",
         "numfmt",
+        "opencollective",
+        "opentype",
         "Overlines",
         "Pacifico",
         "Plass",

diff --git a/examples/src/data/docs/default-document.data-simple.ts b/examples/src/data/docs/default-document.data-simple.ts
@@ -20,7 +20,7 @@ import { BooleanNumber } from '@univerjs/core';
 export const DEFAULT_DOCUMENT_DATA_SIMPLE: IDocumentData = {
     id: 'default-document-id',
     body: {
-        dataStream: '荷塘月色\r作者：朱自清\r\n',
+        dataStream: '荷塘𠮷\r作者：朱自清 👨‍👩‍👧‍👦 Today Office\r\n',
         textRuns: [
             {
                 st: 0,
@@ -36,10 +36,10 @@ export const DEFAULT_DOCUMENT_DATA_SIMPLE: IDocumentData = {
             },
             {
                 st: 5,
-                ed: 11,
+                ed: 36,
                 ts: {
                     fs: 18,
-                    ff: 'Microsoft YaHei',
+                    ff: 'Times New Roman',
                     cl: {
                         rgb: 'rgb(30, 30, 30)',
                     },
@@ -57,7 +57,7 @@ export const DEFAULT_DOCUMENT_DATA_SIMPLE: IDocumentData = {
                 },
             },
             {
-                startIndex: 11,
+                startIndex: 36,
                 paragraphStyle: {
                     spaceAbove: 10,
                     lineSpacing: 2,
@@ -67,7 +67,7 @@ export const DEFAULT_DOCUMENT_DATA_SIMPLE: IDocumentData = {
         ],
         sectionBreaks: [
             {
-                startIndex: 12,
+                startIndex: 37,
                 // columnProperties: [
                 //     {
                 //         width: 250,

diff --git a/examples/src/docs/main.ts b/examples/src/docs/main.ts
@@ -23,8 +23,11 @@ import { UniverRenderEnginePlugin } from '@univerjs/engine-render';
 import { UniverUIPlugin } from '@univerjs/ui';
 
 import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
-import { DEFAULT_DOCUMENT_DATA_CN } from '../data';
+
+import { DEFAULT_DOCUMENT_DATA_SIMPLE } from '../data';
+
 import { DebuggerPlugin } from '../plugins/debugger';
+
 import { locales } from './locales';
 
 // package info
@@ -61,7 +64,7 @@ univer.registerPlugin(UniverDocsUIPlugin, {
     },
 });
 
-univer.createUniverDoc(DEFAULT_DOCUMENT_DATA_CN);
+univer.createUniverDoc(DEFAULT_DOCUMENT_DATA_SIMPLE);
 
 // use for console test
 declare global {

diff --git a/packages/engine-render/package.json b/packages/engine-render/package.json
@@ -69,9 +69,10 @@
     },
     "dependencies": {
         "cjk-regex": "^3.1.0",
-        "linebreak": "^1.1.0"
+        "opentype.js": "^1.3.4"
     },
     "devDependencies": {
+        "@types/opentype.js": "^1.3.8",
         "@univerjs/core": "workspace:*",
         "@univerjs/shared": "workspace:*",
         "@wendellhu/redi": "^0.13.0",

diff --git a/packages/engine-render/src/basics/const.ts b/packages/engine-render/src/basics/const.ts
@@ -77,8 +77,6 @@ export const DEFAULT_SKELETON_FOOTER = {
     marginBottom: 20,
 };
 
-export const DEFAULT_MEASURE_TEXT = '0';
-
 export const DEFAULT_OFFSET_SPACING = 1;
 
 export const DEFAULT_DOCUMENT_FONTSIZE = 14;

diff --git a/packages/engine-render/src/basics/index.ts b/packages/engine-render/src/basics/index.ts
@@ -18,7 +18,7 @@ export * from './cell-data';
 export * from './const';
 export * from './document-node-tools';
 export * from './draw';
-export * from './font-cache';
+export * from '../components/docs/layout/shaping-engine/font-cache';
 export * from './i-document-skeleton-cached';
 export * from './i-events';
 export * from './interfaces';

diff --git a/packages/engine-render/src/basics/interfaces.ts b/packages/engine-render/src/basics/interfaces.ts
@@ -88,14 +88,6 @@ export interface IFontLocale {
     defaultFontSize: number;
 }
 
-export interface IMeasureTextCache {
-    fontBoundingBoxAscent: number;
-    fontBoundingBoxDescent: number;
-    actualBoundingBoxAscent: number;
-    actualBoundingBoxDescent: number;
-    width: number;
-}
-
 export interface IDocsConfig extends IReferenceSource, IDocumentLayout {
     localeService: LocaleService;
     documentTextStyle?: ITextStyle;

diff --git a/packages/engine-render/src/basics/tools.ts b/packages/engine-render/src/basics/tools.ts
@@ -27,8 +27,8 @@ import type {
 import { BaselineOffset, FontStyleType, Tools } from '@univerjs/core';
 import * as cjk from 'cjk-regex';
 
+import { FontCache } from '../components/docs/layout/shaping-engine/font-cache';
 import { DEFAULT_FONTFACE_PLANE } from './const';
-import { FontCache } from './font-cache';
 import type { IBoundRectNoAngle } from './vector2';
 
 const DEG180 = 180;

diff --git a/packages/engine-render/src/components/docs/layout/block/paragraph/bullet.ts b/packages/engine-render/src/components/docs/layout/block/paragraph/bullet.ts
@@ -16,7 +16,7 @@
 
 import type { IBullet, ILists, INestingLevel, ITextStyle, LocaleService, Nullable } from '@univerjs/core';
 
-import { FontCache } from '../../../../../basics/font-cache';
+import { FontCache } from '../../shaping-engine/font-cache';
 import type { IDocumentSkeletonBullet } from '../../../../../basics/i-document-skeleton-cached';
 import { getFontStyleString } from '../../../../../basics/tools';
 import { getBulletOrderedSymbol } from './bullet-ruler';

diff --git a/packages/engine-render/src/components/docs/layout/block/paragraph/linebreaking.ts b/packages/engine-render/src/components/docs/layout/block/paragraph/linebreaking.ts
@@ -24,8 +24,8 @@ import { getLastNotFullColumnInfo } from '../../tools';
 import type { DataStreamTreeNode } from '../../../view-model/data-stream-tree-node';
 import type { DocumentViewModel } from '../../../view-model/document-view-model';
 import type { IParagraphConfig, ISectionBreakConfig } from '../../../../../basics/interfaces';
-import { layoutParagraph } from './layout-ruler';
 import type { IShapedText } from './shaping';
+import { layoutParagraph } from './layout-ruler';
 import { dealWidthInlineDrawing } from './inline-drawing';
 import { dealWithBullet } from './bullet';