feat:增加命令适配层

src/editor/core/command/Command.ts

@@ -1,17 +1,17 @@
-import { printImageBase64 } from "../../utils/print"
+import { CommandAdapt } from "./CommandAdapt"
-import { Draw } from "../draw/Draw"
 
 export class Command {
 
   private static undo: Function
   private static redo: Function
-  private static getDataURL: Function
+  private static format: Function
+  private static print: Function
 
-  constructor(draw: Draw) {
+  constructor(adapt: CommandAdapt) {
-    const historyManager = draw.getHistoryManager()
+    Command.undo = adapt.undo.bind(adapt)
-    Command.undo = historyManager.undo.bind(historyManager)
+    Command.redo = adapt.redo.bind(adapt)
-    Command.redo = historyManager.redo.bind(historyManager)
+    Command.print = adapt.print.bind(adapt)
-    Command.getDataURL = draw.getDataURL.bind(draw)
+    Command.format = adapt.format.bind(adapt)
   }
 
   // 撤销、重做、格式刷、清除格式
@@ -23,11 +23,15 @@ export class Command {
     return Command.redo()
   }
 
+  public executeFormat() {
+    return Command.format()
+  }
+
   // 字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色
 
   // 搜索、打印
   public executePrint() {
-    return printImageBase64(Command.getDataURL())
+    return Command.print()
   }
 
 }

src/editor/core/command/CommandAdapt.ts

@@ -0,0 +1,46 @@
+import { printImageBase64 } from "../../utils/print"
+import { Draw } from "../draw/Draw"
+import { HistoryManager } from "../history/HistoryManager"
+import { RangeManager } from "../range/RangeManager"
+
+export class CommandAdapt {
+
+  private draw: Draw
+  private range: RangeManager
+  private historyManager: HistoryManager
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.range = draw.getRange()
+    this.historyManager = draw.getHistoryManager()
+  }
+
+  public undo() {
+    return this.historyManager.undo()
+  }
+
+  public redo() {
+    return this.historyManager.redo()
+  }
+
+  public format() {
+    const { startIndex, endIndex } = this.range.getRange()
+    if (startIndex === endIndex) return
+    const elementList = this.draw.getElementList()
+    elementList.slice(startIndex, endIndex)
+      .forEach(el => {
+        el.font = ''
+        el.color = ''
+        el.bold = false
+        el.italic = false
+        el.underline = false
+        el.strikeout = false
+      })
+    this.draw.render({ isSetCursor: false })
+  }
+
+  public print() {
+    return printImageBase64(this.draw.getDataURL())
+  }
+
+}

src/editor/index.ts

@@ -4,6 +4,7 @@ import { IEditorOption } from './interface/Editor'
 import { IElement } from './interface/Element'
 import { Draw } from './core/draw/Draw'
 import { Command } from './core/command/Command'
+import { CommandAdapt } from './core/command/CommandAdapt'
 
 export default class Editor {
 
@@ -41,7 +42,7 @@ export default class Editor {
     const draw = new Draw(canvas, ctx, editorOptions, elementList)
     draw.render()
     // 对外命令
-    this.command = new Command(draw)
+    this.command = new Command(new CommandAdapt(draw))
   }
 
 }

src/main.ts

@@ -54,6 +54,10 @@ window.onload = function () {
     console.log('redo')
     instance.command.executeRedo()
   }
+  document.querySelector<HTMLDivElement>('.menu-item__format')!.onclick = function () {
+    console.log('format')
+    instance.command.executeFormat()
+  }
 
   // 字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色