diff --git a/business-css/frontend/src/assets/del.png b/business-css/frontend/src/assets/del.png new file mode 100644 index 0000000..b902b42 Binary files /dev/null and b/business-css/frontend/src/assets/del.png differ diff --git a/business-css/frontend/src/components/antvg6/GraphCanvas.vue b/business-css/frontend/src/components/antvg6/GraphCanvas.vue deleted file mode 100644 index 200c4b9..0000000 --- a/business-css/frontend/src/components/antvg6/GraphCanvas.vue +++ /dev/null @@ -1,244 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/business-css/frontend/src/components/antvg6/LeftPanel.vue b/business-css/frontend/src/components/antvg6/LeftPanel.vue deleted file mode 100644 index ea26b44..0000000 --- a/business-css/frontend/src/components/antvg6/LeftPanel.vue +++ /dev/null @@ -1,101 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/business-css/frontend/src/components/antvg6/index.vue b/business-css/frontend/src/components/antvg6/index.vue deleted file mode 100644 index 3120d13..0000000 --- a/business-css/frontend/src/components/antvg6/index.vue +++ /dev/null @@ -1,412 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/business-css/frontend/src/components/antvx6/index.vue b/business-css/frontend/src/components/antvx6/index.vue index eb724ff..f2083cd 100644 --- a/business-css/frontend/src/components/antvx6/index.vue +++ b/business-css/frontend/src/components/antvx6/index.vue @@ -84,7 +84,7 @@ onMounted(() => { connector: { name: 'rounded', args: { - radius: 8, + radius: 1, }, }, anchor: 'center', @@ -109,6 +109,13 @@ onMounted(() => { }, }, zIndex: 0, + interactive: { + vertexMovable: true, + vertexAddable: true, + vertexDeletable: true, + arrowheadMovable: true, + edgeMovable: true, + }, }) }, validateConnection({ targetMagnet }) { @@ -126,7 +133,8 @@ onMounted(() => { }, }, }, - interacting: function (cellView) { + + interacting: function (cellView) { // 获取当前节点的模型 const cell = cellView.cell // 判断节点是否为 'rect' 形状 @@ -344,12 +352,12 @@ onMounted(() => { }else if(node.store.data.attrs.text.text == '扁平槽'){ deviceTypetype.value = 'FlatTank' - node.size(130, 80) + node.size(130, 60) const width = node.size().width node.attr('image/xlink:href', '/assets/22.png') node.attr('image/width', 130) - node.attr('image/height', 80) - node.attr('label/refY', 85) + node.attr('image/height', 60) + node.attr('label/refY', 65) node.attr('label/refX', width/2) node.attr('label/textAnchor', 'middle') @@ -357,10 +365,10 @@ onMounted(() => { }else if(node.store.data.attrs.text.text == '环形槽'){ deviceTypetype.value = 'AnnularTank' - node.size(110, 140) + node.size(90, 140) const width = node.size().width node.attr('image/xlink:href', '/assets/33.png') - node.attr('image/width', 105) + node.attr('image/width', 90) node.attr('image/height', 135) node.attr('label/refY', 140) node.attr('label/refX', width/2) @@ -369,10 +377,10 @@ onMounted(() => { }else if(node.store.data.attrs.text.text == '管束槽'){ deviceTypetype.value = 'TubeBundleTank' - node.size(110, 140) + node.size(80, 140) const width = node.size().width node.attr('image/xlink:href', '/assets/44.png') - node.attr('image/width', 105) + node.attr('image/width', 80) node.attr('image/height', 135) node.attr('label/refY', 140) node.attr('label/refX', width/2) @@ -392,20 +400,20 @@ onMounted(() => { }else if(node.store.data.attrs.text.text == '流化床'){ deviceTypetype.value = 'FluidizedBed' - node.size(80, 140) + node.size(60, 140) const width = node.size().width node.attr('image/xlink:href', '/assets/66.png') - node.attr('image/width', 80) + node.attr('image/width', 60) node.attr('image/height', 135) node.attr('label/refY', 140) node.attr('label/refX', width/2) node.attr('label/textAnchor', 'middle') }else if(node.store.data.attrs.text.text == '锥底环形槽'){ deviceTypetype.value = 'ACFTank' - node.size(80, 140) + node.size(40, 140) const width = node.size().width node.attr('image/xlink:href', '/assets/77.png') - node.attr('image/width', 80) + node.attr('image/width', 40) node.attr('image/height', 135) node.attr('label/refY', 140) node.attr('label/refX', width/2) @@ -424,7 +432,7 @@ onMounted(() => { }) graph.on('edge:selected', ({ edge }) => { - + let edgeTemp :any = edge edge.addTools({ name: 'button-remove', args: { @@ -433,8 +441,22 @@ onMounted(() => { offset: { x: 10, y: 10 }, }, }) - - + edge.addTools({ + name: 'vertices', // 指定使用 vertices 工具 + args: { + // 可选配置参数 + snapRadius: 20, // 移动时的吸附半径 + addable: true, // 是否允许单击边添加顶点 + removable: true, // 是否允许双击顶点删除 + attrs: { // 自定义顶点的样式(小圆点) + r: 6, + fill: edgeTemp.store.data.attrs.line.stroke, + }, + }, + }) + + + }); graph.on('edge:unselected', ({ edge }) => { edge.removeTools() @@ -525,6 +547,10 @@ graph.on('blank:mouseup', (e) => { console.log('鼠标松开事件', e) if (!startPoint) return + if(isBoundary.value == false){ + return + } + const endPoint = { x: e.x, y: e.y } if(Math.abs(endPoint.x - startPoint.x) <20 && Math.abs(endPoint.y - startPoint.y) <20){ @@ -601,7 +627,7 @@ graph.on('blank:mouseup', (e) => { position: 'top', attrs: { circle: { - r: 4, + r: 8, magnet: true, stroke: '#5F95FF', strokeWidth: 1, @@ -616,7 +642,7 @@ graph.on('blank:mouseup', (e) => { position: 'right', attrs: { circle: { - r: 4, + r: 8, magnet: true, stroke: '#5F95FF', strokeWidth: 1, @@ -631,7 +657,7 @@ graph.on('blank:mouseup', (e) => { position: 'bottom', attrs: { circle: { - r: 4, + r: 8, magnet: true, stroke: '#5F95FF', strokeWidth: 1, @@ -646,7 +672,7 @@ graph.on('blank:mouseup', (e) => { position: 'left', attrs: { circle: { - r: 4, + r: 8, magnet: true, stroke: '#5F95FF', strokeWidth: 1, @@ -1406,6 +1432,10 @@ function saveDesign() { // 保存设计 return null } } +const isBoundary = ref(false) +const boundaryClick = () => { + isBoundary.value = !isBoundary.value +}