feat:add word count web worker

index.html

@@ -208,6 +208,7 @@
         </div>
         <span>可见页码：<span class="page-no-list">1</span></span>
         <span>页面：<span class="page-no">1</span>/<span class="page-size">1</span></span>
+        <span>字数：<span class="word-count">0</span></span>
       </div>
       <div class="editor-mode">编辑模式</div>
       <div>

src/editor/core/command/Command.ts

@@ -57,6 +57,7 @@ export class Command {
   private static print: Function
   private static getImage: Function
   private static getValue: Function
+  private static getWordCount: Function
   private static pageMode: Function
   private static pageScaleRecovery: Function
   private static pageScaleMinus: Function
@@ -112,6 +113,7 @@ export class Command {
     Command.print = adapt.print.bind(adapt)
     Command.getImage = adapt.getImage.bind(adapt)
     Command.getValue = adapt.getValue.bind(adapt)
+    Command.getWordCount = adapt.getWordCount.bind(adapt)
     Command.pageMode = adapt.pageMode.bind(adapt)
     Command.pageScaleRecovery = adapt.pageScaleRecovery.bind(adapt)
     Command.pageScaleMinus = adapt.pageScaleMinus.bind(adapt)
@@ -315,6 +317,10 @@ export class Command {
     return Command.getValue()
   }
 
+  public getWordCount(): Promise<number> {
+    return Command.getWordCount()
+  }
+
   // 页面模式、页面缩放
   public executePageMode(payload: PageMode) {
     return Command.pageMode(payload)

src/editor/core/command/CommandAdapt.ts

@@ -23,6 +23,7 @@ import { CanvasEvent } from '../event/CanvasEvent'
 import { HistoryManager } from '../history/HistoryManager'
 import { Position } from '../position/Position'
 import { RangeManager } from '../range/RangeManager'
+import { WorkerManager } from '../worker/WorkerManager'
 
 
 export class CommandAdapt {
@@ -37,6 +38,7 @@ export class CommandAdapt {
   private tableTool: TableTool
   private options: Required<IEditorOption>
   private control: Control
+  private workerManager: WorkerManager
 
   constructor(draw: Draw) {
     this.draw = draw
@@ -47,6 +49,7 @@ export class CommandAdapt {
     this.tableTool = draw.getTableTool()
     this.options = draw.getOptions()
     this.control = draw.getControl()
+    this.workerManager = draw.getWorkerManager()
   }
 
   public mode(payload: EditorMode) {
@@ -1243,6 +1246,10 @@ export class CommandAdapt {
     return this.draw.getValue()
   }
 
+  public getWordCount(): Promise<number> {
+    return this.workerManager.getWordCount()
+  }
+
   public pageMode(payload: PageMode) {
     this.draw.setPageMode(payload)
   }

src/editor/core/draw/Draw.ts

@@ -41,6 +41,7 @@ import { CheckboxParticle } from './particle/CheckboxParticle'
 import { DeepRequired } from '../../interface/Common'
 import { ControlComponent } from '../../dataset/enum/Control'
 import { formatElementList } from '../../utils/element'
+import { WorkerManager } from '../worker/WorkerManager'
 
 export class Draw {
 
@@ -79,6 +80,7 @@ export class Draw {
   private subscriptParticle: SubscriptParticle
   private checkboxParticle: CheckboxParticle
   private control: Control
+  private workerManager: WorkerManager
 
   private rowList: IRow[]
   private painterStyle: IElementStyle | null
@@ -138,6 +140,8 @@ export class Draw {
     const globalEvent = new GlobalEvent(this, this.canvasEvent)
     globalEvent.register()
 
+    this.workerManager = new WorkerManager(this)
+
     this.rowList = []
     this.painterStyle = null
     this.painterOptions = null
@@ -363,6 +367,10 @@ export class Draw {
     return this.control
   }
 
+  public getWorkerManager(): WorkerManager {
+    return this.workerManager
+  }
+
   public getRowCount(): number {
     return this.rowList.length
   }

src/editor/core/worker/WorkerManager.ts

@@ -0,0 +1,28 @@
+import { Draw } from '../draw/Draw'
+
+export class WorkerManager {
+
+  private draw: Draw
+  private wordCountWorker: Worker
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.wordCountWorker = new Worker(new URL('./works/wordCount.ts', import.meta.url))
+  }
+
+  public getWordCount(): Promise<number> {
+    return new Promise((resolve, reject) => {
+      this.wordCountWorker.onmessage = (evt) => {
+        resolve(evt.data)
+      }
+
+      this.wordCountWorker.onerror = (evt) => {
+        reject(evt)
+      }
+
+      const elementList = this.draw.getOriginalElementList()
+      this.wordCountWorker.postMessage(elementList)
+    })
+  }
+
+}

src/editor/core/worker/works/wordCount.ts

@@ -0,0 +1,7 @@
+import { IElement } from '../../../interface/Element'
+
+onmessage = (evt) => {
+  const elementList = <IElement[]>evt.data
+  // TODO:
+  postMessage(elementList.length)
+}

src/main.ts

@@ -754,6 +754,11 @@ window.onload = function () {
     activeMode.classList.add('active')
   }
 
+  instance.listener.contentChange = async function () {
+    const wordCount = await instance.command.getWordCount()
+    document.querySelector<HTMLSpanElement>('.word-count')!.innerText = `${wordCount || 0}`
+  }
+
   instance.listener.saved = function (payload) {
     console.log('elementList: ', payload)
   }