diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index e57765c..6b281ae 100644 --- a/src/editor/core/command/Command.ts +++ b/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 redo: Function + private static undo: Function + private static redo: Function + private static getDataURL: Function constructor(draw: Draw) { const historyManager = draw.getHistoryManager() - this.undo = historyManager.undo.bind(historyManager) - this.redo = historyManager.redo.bind(historyManager) + Command.undo = historyManager.undo.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()) } } \ No newline at end of file diff --git a/src/editor/core/event/CanvasEvent.ts b/src/editor/core/event/CanvasEvent.ts index 24ec3be..ded1818 100644 --- a/src/editor/core/event/CanvasEvent.ts +++ b/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" diff --git a/src/editor/utils/clipboard.ts b/src/editor/utils/clipboard.ts new file mode 100644 index 0000000..fa1d3dc --- /dev/null +++ b/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`)) +} \ No newline at end of file diff --git a/src/editor/utils/index.ts b/src/editor/utils/index.ts index 628760f..db4038c 100644 --- a/src/editor/utils/index.ts +++ b/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 diff --git a/src/editor/utils/print.ts b/src/editor/utils/print.ts new file mode 100644 index 0000000..76b9bad --- /dev/null +++ b/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() + }) +} \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index e6e486f..fd8d2b0 100644 --- a/src/main.ts +++ b/src/main.ts @@ -45,7 +45,7 @@ window.onload = function () { }) console.log('编辑器实例: ', instance) - // 事件注册 + // 撤销、重做、格式刷、清除格式 document.querySelector('.menu-item__undo')!.onclick = function () { console.log('undo') instance.command.executeUndo() @@ -55,4 +55,13 @@ window.onload = function () { instance.command.executeRedo() } + // 字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色 + + + // 搜索、打印 + document.querySelector('.menu-item__print')!.onclick = function () { + console.log('print') + instance.command.executePrint() + } + } \ No newline at end of file