feat:增加打印功能

src/editor/core/command/Command.ts

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

src/editor/core/event/CanvasEvent.ts

@@ -1,7 +1,7 @@
 import { ZERO } from "../../dataset/constant/Common"
 import { KeyMap } from "../../dataset/enum/Keymap"
 import { IElement } from "../../interface/Element"
-import { writeText } from "../../utils"
+import { writeText } from "../../utils/clipboard"
 import { Cursor } from "../cursor/Cursor"
 import { Draw } from "../draw/Draw"
 import { HistoryManager } from "../history/HistoryManager"

src/editor/utils/clipboard.ts

@@ -0,0 +1,6 @@
+import { ZERO } from "../dataset/constant/Common"
+
+export function writeText(text: string) {
+  if (!text) return
+  window.navigator.clipboard.writeText(text.replaceAll(ZERO, `\n`))
+}

src/editor/utils/index.ts

@@ -1,5 +1,3 @@
-import { ZERO } from "../dataset/constant/Common"
-
 export function debounce(func: Function, delay: number) {
   let timer: number
   return function (...args: any) {
@@ -11,11 +9,6 @@ export function debounce(func: Function, delay: number) {
   }
 }
 
-export function writeText(text: string) {
-  if (!text) return
-  window.navigator.clipboard.writeText(text.replaceAll(ZERO, `\n`))
-}
-
 export function deepClone(obj: any) {
   if (!obj || typeof obj !== 'object') {
     return obj

src/editor/utils/print.ts

@@ -0,0 +1,19 @@
+export function printImageBase64(base64: string) {
+  const iframe = document.createElement('iframe')
+  document.body.append(iframe)
+  const doc = iframe.contentWindow!.document
+  doc.open()
+  const image = doc.createElement('img')
+  image.style.width = '794px'
+  image.style.height = '1123px'
+  image.src = base64
+  const style = document.createElement('style')
+  const stylesheet = `*{margin:0;padding:0;}`
+  style.append(document.createTextNode(stylesheet))
+  setTimeout(() => {
+    doc.write(`${style.outerHTML}${image.outerHTML}`)
+    iframe.contentWindow?.print()
+    doc.close()
+    iframe.remove()
+  })
+}

src/main.ts

@@ -45,7 +45,7 @@ window.onload = function () {
   })
   console.log('编辑器实例: ', instance)
 
-  // 事件注册
+  // 撤销、重做、格式刷、清除格式
   document.querySelector<HTMLDivElement>('.menu-item__undo')!.onclick = function () {
     console.log('undo')
     instance.command.executeUndo()
@@ -55,4 +55,13 @@ window.onload = function () {
     instance.command.executeRedo()
   }
 
+  // 字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色
+
+
+  // 搜索、打印
+  document.querySelector<HTMLDivElement>('.menu-item__print')!.onclick = function () {
+    console.log('print')
+    instance.command.executePrint()
+  }
+
 }