feat: add render mode #667

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,