From affd1911552a73a2b63a13f2c423121637830b99 Mon Sep 17 00:00:00 2001
From: Hufe921 <huangyunfeihufe@hotmail.com>
Date: Thu, 4 Jul 2024 21:52:46 +0800
Subject: [PATCH] feat: add render mode #667

---
 docs/en/guide/option.md                       |  1 +
 docs/guide/option.md                          |  1 +
 index.html                                    |  9 ++++-----
 src/editor/core/draw/particle/TextParticle.ts | 11 ++++++++++-
 src/editor/dataset/enum/Editor.ts             |  5 +++++
 src/editor/index.ts                           |  4 +++-
 src/editor/interface/Editor.ts                |  2 ++
 src/editor/utils/option.ts                    |  2 ++
 8 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/docs/en/guide/option.md b/docs/en/guide/option.md
index ff76b45..1b27863 100644
--- a/docs/en/guide/option.md
+++ b/docs/en/guide/option.md
@@ -43,6 +43,7 @@ interface IEditorOption {
   marginIndicatorColor?: string // The margin indicator color. default: #BABABA
   margins?: IMargin // Page margins. default: [100, 120, 100, 120]
   pageMode?: PageMode // Paper mode: Linkage, Pagination. default: Pagination
+  renderMode?: RenderMode // Render mode: speed(multi words combination rendering), compatibility(word by word rendering:avoid environmental differences such as browse,fonts...). default: speed
   defaultHyperlinkColor?: string // Default hyperlink color. default: #0000FF
   table?: ITableOption // table configuration {tdPadding?:IPadding; defaultTrMinHeight?:number; defaultColMinWidth?:number}
   header?: IHeader // Header information.{top?:number; maxHeightRadio?:MaxHeightRatio;}
diff --git a/docs/guide/option.md b/docs/guide/option.md
index 3ec3abb..b3158e7 100644
--- a/docs/guide/option.md
+++ b/docs/guide/option.md
@@ -43,6 +43,7 @@ interface IEditorOption {
   marginIndicatorColor?: string // 页边距指示器颜色。默认：#BABABA
   margins?: IMargin // 页面边距。默认：[100, 120, 100, 120]
   pageMode?: PageMode // 纸张模式：连页、分页。默认：分页
+  renderMode?: RenderMode // 渲染模式：极速（多个字组合渲染）、兼容（逐字渲染：避免浏览器字体等环境差异）。默认：极速
   defaultHyperlinkColor?: string // 默认超链接颜色。默认：#0000FF
   table?: ITableOption // 表格配置。{tdPadding?:IPadding; defaultTrMinHeight?:number; defaultColMinWidth?:number}
   header?: IHeader // 页眉信息。{top?:number; maxHeightRadio?:MaxHeightRatio;}
diff --git a/index.html b/index.html
index 1b4fbad..e3d64ce 100644
--- a/index.html
+++ b/index.html
@@ -32,11 +32,10 @@
           <div class="options">
             <ul>
               <li data-family="Microsoft YaHei" style="font-family:'Microsoft YaHei';">微软雅黑</li>
-              <li data-family="宋体" style="font-family:'宋体';">宋体</li>
-              <li data-family="黑体" style="font-family:'黑体';">黑体</li>
-              <li data-family="仿宋" style="font-family:'仿宋';">仿宋</li>
-              <li data-family="楷体" style="font-family:'楷体';">楷体</li>
-              <li data-family="等线" style="font-family:'等线';">等线</li>
+              <li data-family="华文宋体" style="font-family:'华文宋体';">华文宋体</li>
+              <li data-family="华文黑体" style="font-family:'华文黑体';">华文黑体</li>
+              <li data-family="华文仿宋" style="font-family:'华文仿宋';">华文仿宋</li>
+              <li data-family="华文楷体" style="font-family:'华文楷体';">华文楷体</li>
               <li data-family="华文琥珀" style="font-family:'华文琥珀';">华文琥珀</li>
               <li data-family="华文楷体" style="font-family:'华文楷体';">华文楷体</li>
               <li data-family="华文隶书" style="font-family:'华文隶书';">华文隶书</li>
diff --git a/src/editor/core/draw/particle/TextParticle.ts b/src/editor/core/draw/particle/TextParticle.ts
index b538861..ec4cfc9 100644
--- a/src/editor/core/draw/particle/TextParticle.ts
+++ b/src/editor/core/draw/particle/TextParticle.ts
@@ -1,4 +1,4 @@
-import { ElementType, IEditorOption, IElement } from '../../..'
+import { ElementType, IEditorOption, IElement, RenderMode } from '../../..'
 import {
   PUNCTUATION_LIST,
   METRICS_BASIS_TEXT
@@ -124,6 +124,15 @@ export class TextParticle {
     y: number
   ) {
     this.ctx = ctx
+    // 兼容模式立即绘制
+    if (this.options.renderMode === RenderMode.COMPATIBILITY) {
+      this._setCurXY(x, y)
+      this.text = element.value
+      this.curStyle = element.style
+      this.curColor = element.color
+      this.complete()
+      return
+    }
     // 主动完成的重设起始点
     if (!this.text) {
       this._setCurXY(x, y)
diff --git a/src/editor/dataset/enum/Editor.ts b/src/editor/dataset/enum/Editor.ts
index 94960a5..c19757a 100644
--- a/src/editor/dataset/enum/Editor.ts
+++ b/src/editor/dataset/enum/Editor.ts
@@ -42,3 +42,8 @@ export enum WordBreak {
   BREAK_ALL = 'break-all',
   BREAK_WORD = 'break-word'
 }
+
+export enum RenderMode {
+  SPEED = 'speed',
+  COMPATIBILITY = 'compatibility'
+}
diff --git a/src/editor/index.ts b/src/editor/index.ts
index 1559544..d8dd3c0 100644
--- a/src/editor/index.ts
+++ b/src/editor/index.ts
@@ -21,7 +21,8 @@ import {
   EditorMode,
   PageMode,
   PaperDirection,
-  WordBreak
+  WordBreak,
+  RenderMode
 } from './dataset/enum/Editor'
 import { EDITOR_COMPONENT } from './dataset/constant/Editor'
 import { IWatermark } from './interface/Watermark'
@@ -150,6 +151,7 @@ export {
   ControlType,
   EditorComponent,
   PageMode,
+  RenderMode,
   ImageDisplay,
   Command,
   KeyMap,
diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts
index e05f7c2..ca1495b 100644
--- a/src/editor/interface/Editor.ts
+++ b/src/editor/interface/Editor.ts
@@ -3,6 +3,7 @@ import {
   EditorMode,
   PageMode,
   PaperDirection,
+  RenderMode,
   WordBreak
 } from '../dataset/enum/Editor'
 import { IBackgroundOption } from './Background'
@@ -60,6 +61,7 @@ export interface IEditorOption {
   marginIndicatorColor?: string
   margins?: IMargin
   pageMode?: PageMode
+  renderMode?: RenderMode
   defaultHyperlinkColor?: string
   paperDirection?: PaperDirection
   inactiveAlpha?: number
diff --git a/src/editor/utils/option.ts b/src/editor/utils/option.ts
index 65a944c..0121a20 100644
--- a/src/editor/utils/option.ts
+++ b/src/editor/utils/option.ts
@@ -39,6 +39,7 @@ import {
   EditorMode,
   PageMode,
   PaperDirection,
+  RenderMode,
   WordBreak
 } from '../dataset/enum/Editor'
 
@@ -144,6 +145,7 @@ export function mergeOption(
     marginIndicatorColor: '#BABABA',
     margins: [100, 120, 100, 120],
     pageMode: PageMode.PAGING,
+    renderMode: RenderMode.SPEED,
     defaultHyperlinkColor: '#0000FF',
     paperDirection: PaperDirection.VERTICAL,
     inactiveAlpha: 0.6,