feat: add render mode #667

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;}

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;}

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>

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)

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'
+}

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,

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

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,