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/CanvasManager.ts b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts index 4c1d16c..c8076a5 100644 --- a/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts +++ b/src/components/Canvas/DepthCanvas/manager/CanvasManager.ts @@ -22,6 +22,12 @@ fabric.Object.prototype.toObject = function () { arr.push(...v) } }) + if (this.fill?.source === null) { + let image = new Image() + image.crossOrigin = 'anonymous' + image.src = this.info?.fill?.source + this.fill.source = image + } const object = this.toObject_(arr) if (object.info) { let lock = !!object.info.lock 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) => { diff --git a/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue b/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue index bddef15..e62eb63 100644 --- a/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue +++ b/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue @@ -122,7 +122,7 @@ { immediate: true } ) const menus = ref([ - { label: 'Copy', tip: 'Ctrl+C', on: () => emit('copy-node', clickTaskId.value) }, + { label: 'Copy', tip: 'Ctrl+C', on: () => emit('copy-node') }, { label: 'Delete', tip: 'Del', @@ -228,6 +228,7 @@ ...options, } depthCanvasWorkbench(workbenchData) + depthCanvasClose() }, onClose:depthCanvasClose } diff --git a/src/components/Canvas/FlowCanvas/flow-canvas.vue b/src/components/Canvas/FlowCanvas/flow-canvas.vue index 15972e8..cdbe86b 100644 --- a/src/components/Canvas/FlowCanvas/flow-canvas.vue +++ b/src/components/Canvas/FlowCanvas/flow-canvas.vue @@ -38,7 +38,7 @@ :data="node.data.data" v-bind="node.data" @delete-node="deleteNode(node.id)" - @copy-node="copyNode($event, node.id)" + @copy-node="copyNode(node.id)" @update-data="(v) => (node.data.data = v)" @bring-to-font="bringToFont(node.id)" @send-to-back="sendToBack(node.id)" @@ -179,8 +179,8 @@ nodeManager.deleteNode(id) } /** 复制节点 */ - const copyNode = (clickTaskId, id) => { - nodeManager.copyNodeById(clickTaskId, id) + const copyNode = (id) => { + nodeManager.copyNodeById(id) } /** 节点zIndex设置最大 */ const bringToFont = (id) => { diff --git a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts index 50b202c..d975bb3 100644 --- a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts +++ b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts @@ -139,10 +139,9 @@ export class NodeManager { return this.createNode(options_) } - copyNodeById(clickTaskId:string, id: string) { + copyNodeById(id: string) { const node = this.stateManager.getNodeById(id) let copyNode = JSON.parse(JSON.stringify(node)) - copyNode.data.data.imageProcessTasks = copyNode.data.data.imageProcessTasks.filter((item:any)=>item.taskId == clickTaskId) const flowNode = this.stateManager.flowManager.getNodeById(id) if (!node) return console.warn(`${id}找不到对应节点`) if (node.data?.disableCopy) return console.warn(`${id}节点已禁用复制`) @@ -156,6 +155,9 @@ export class NodeManager { } delete node_.data?.superiorID delete node_.data?.disableDelete + node_.data.data.imageProcessTasks.forEach((item) => { + item.canvasId = null + }) this.stateManager.addNode(node_) } dispose() {}