From 0f96b0f3f0b21c0ef6e4097dfceeb28f9215e327 Mon Sep 17 00:00:00 2001 From: wente <329538422@qq.com> Date: 星期四, 13 六月 2024 09:00:06 +0800 Subject: [PATCH] svgEditor --- web/src/views/modules/taskReliability/RBD-edit-img.vue | 59 ++++++++++++++++++++++++++++++++--------------------------- 1 files changed, 32 insertions(+), 27 deletions(-) diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue index 7a07431..db3555c 100644 --- a/web/src/views/modules/taskReliability/RBD-edit-img.vue +++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue @@ -100,7 +100,7 @@ }, "size": { "width": 60, - "height": 60 + "height": 40 }, "attrs": { "text": { @@ -223,7 +223,7 @@ }, "size": { "width": 60, - "height": 60 + "height": 40 }, "attrs": { "text": { @@ -345,7 +345,7 @@ }, "size": { "width": 60, - "height": 60 + "height": 40 }, "attrs": { "text": { @@ -830,9 +830,10 @@ return new Shape.Edge({ attrs: { line: { + // sourceMarker: 'block', // 瀹炲績绠ご stroke: '#A2B1C3', strokeWidth: 2, - targetMarker: {fill: 'none'} + targetMarker: null } }, labels: [{ @@ -895,7 +896,7 @@ getDropNode: (node) => { const {width, height} = node.size() if (node.getData().type && node.getData().nodeType === 'dashedBox') { - return node.clone().size(60, 60) + return node.clone().size(60, 40) } if (node.getData().type && node.getData().type === 'imageNodes2') { return node.clone({keepId: true}) @@ -1056,6 +1057,10 @@ stencil.load(imageNodes, 'group1') stencil.load(imageNodes2, 'group2') + this.graph.bindKey(['meta+c', 'ctrl+up'], () => { + console.log('鎸変簡灏忛敭鐩樼殑UP閿�') + }) + this.graph.bindKey(['meta+c', 'ctrl+c'], () => { const cells = this.graph.getSelectedCells() if (cells.length) { @@ -1106,7 +1111,7 @@ }) this.graph.on('blank:click', ({cell}) => { - this.reset() + // this.reset() // this.type.value = "grid" this.type = 'grid' // this.id = cell.id @@ -1158,16 +1163,16 @@ }) //鍗曞嚮杈硅妭鐐� this.graph.on('edge:click', ({edge}) => { - this.reset() - edge.attr('line/stroke', 'orange') - edge.prop('labels/0', { - attrs: { - body: { - stroke: 'orange', - }, - }, - - }) + // this.reset() + // edge.attr('line/stroke', 'orange') + // edge.prop('labels/0', { + // attrs: { + // body: { + // stroke: 'orange', + // }, + // }, + // + // }) }) // 鍗曞嚮node鑺傜偣 this.graph.on('node:click', ({node}) => { @@ -1678,7 +1683,7 @@ height = 60 } else if (dragNodeType === 'dashedBox') { width = 60 - height = 60 + height = 40 } else if (dragNodeType === 'bridgeConnection') { width = 550 height = 175 @@ -1835,11 +1840,11 @@ const rightTopDashedBox = this.createDashedBox(x + 380, y) const leftConnectNode = this.createConnectNode(x, y + 87) - const alignCenterDashedBox = this.createDashedBox(x + 210, y + 87) + const alignCenterDashedBox = this.createDashedBox(x + 209, y + 87) const rightConnectNode = this.createBridgeNode(x + 530, y + 87) - const leftBottomDashedBox = this.createDashedBox(x + 50, y + 160) - const rightBottomDashedBox = this.createDashedBox(x + 370, y + 160) + const leftBottomDashedBox = this.createDashedBox(x + 40, y + 160) + const rightBottomDashedBox = this.createDashedBox(x + 380, y + 160) rightConnectNode.setData({startNodeId: leftConnectNode.id}) leftConnectNode.setData({endNodeId: rightConnectNode.id}) @@ -1859,39 +1864,39 @@ source: {cell: leftConnectNode, port: 'right1'}, target: {cell: leftTopDashedBox, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) this.graph.addEdge({ source: {cell: leftConnectNode, port: 'right1'}, target: {cell: leftBottomDashedBox, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) let edgeTop = this.graph.addEdge({ source: {cell: leftTopDashedBox, port: 'right1'}, target: {cell: rightTopDashedBox, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) let edgeBottom = this.graph.addEdge({ source: {cell: leftBottomDashedBox, port: 'right1'}, target: {cell: rightBottomDashedBox, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) this.graph.addEdge({ source: {cell: rightTopDashedBox, port: 'right1'}, target: {cell: rightConnectNode, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) this.graph.addEdge({ source: {cell: rightBottomDashedBox, port: 'right1'}, target: {cell: rightConnectNode, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) this.graph.addEdge({ @@ -1915,7 +1920,7 @@ shape: 'image', // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'), width: 60, - height: 60, + height: 40, id: dashId, data: { isSelfCreated: true, -- Gitblit v1.9.1