diff --git a/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue b/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue index a9622f7..d6b8ec3 100644 --- a/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue +++ b/src/components/Canvas/DepthCanvas/components/depth-header-tools.vue @@ -183,11 +183,8 @@ if (!activeLayerId.value) return layerManager.deleteLayerById(activeLayerId.value) } - const onWorkbench = async () => { - exportCanvasToImage(canvasManager.canvas).then((url) => { - const { canvas, images } = canvasManager.getCanvasDisUrlJSON() - emit('workbench', { url, canvas, images }) - }) + const onWorkbench = () => { + emit('workbench') } diff --git a/src/components/Canvas/DepthCanvas/depth-canvas.vue b/src/components/Canvas/DepthCanvas/depth-canvas.vue index aa85dd5..8bccf98 100644 --- a/src/components/Canvas/DepthCanvas/depth-canvas.vue +++ b/src/components/Canvas/DepthCanvas/depth-canvas.vue @@ -8,7 +8,7 @@ - + ({}) } }) + const onWorkbench = async () => { + exportCanvasToImage(canvasManager.canvas).then((url) => { + const { canvas, images } = canvasManager.getCanvasDisUrlJSON() + emit('workbench', { url, canvas, images }) + }) + } // 准备就绪 const isReady = ref(false) @@ -78,7 +84,7 @@ provide('toolManager', toolManager) //键盘事件管理器 - const keyEventManager = new KeyEventManager({ stateManager }) + const keyEventManager = new KeyEventManager({ stateManager, onWorkbench }) stateManager.setManager({ keyEventManager }) provide('keyEventManager', keyEventManager) diff --git a/src/components/Canvas/DepthCanvas/manager/events/KeyEventManager.ts b/src/components/Canvas/DepthCanvas/manager/events/KeyEventManager.ts index 6511043..8f4e5db 100644 --- a/src/components/Canvas/DepthCanvas/manager/events/KeyEventManager.ts +++ b/src/components/Canvas/DepthCanvas/manager/events/KeyEventManager.ts @@ -1,7 +1,9 @@ export class KeyEventManager { stateManager: any + onWorkbench: any constructor(options) { this.stateManager = options.stateManager; + this.onWorkbench = options.onWorkbench; this._handleKeyDown = this.handleKeyDown.bind(this) } onMounted() { } @@ -9,6 +11,7 @@ export class KeyEventManager { /** 处理键盘事件 */ _handleKeyDown: any handleKeyDown(event: any) { + event.preventDefault() const activeID = this.stateManager.layerManager.activeID.value const ctrl = event.ctrlKey ? 'ctrl-' : ""; const shift = event.shiftKey ? 'shift-' : ""; @@ -18,6 +21,7 @@ export class KeyEventManager { { key: "ctrl-c", handler: () => this.stateManager.layerManager.copyLayerById(activeID) }, { key: "delete", handler: () => this.stateManager.layerManager.deleteLayerById(activeID) }, { key: "ctrl-z", handler: () => this.stateManager.undoState() }, + { key: "ctrl-s", handler: () => this.onWorkbench() }, { key: "ctrl-shift-z", handler: () => this.stateManager.redoState() }, ] list.forEach((v: any) => {