From fd6cd17c0f7a095be934f9e1d1fd7c3e10cad433 Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期二, 21 五月 2024 08:45:39 +0800
Subject: [PATCH] svgEditor以及RBD画图拖动自动吸附在一条线上
---
web/public/modelImg/bridgeConnection.svg | 2
web/src/views/modules/taskReliability/RBD-edit-img.vue | 51 ++++++++++++++++---------
web/public/modelImg/switch.svg | 7 ++-
web/public/modelImg/parallel.svg | 2
web/public/modelImg/start.svg | 2
web/public/modelImg/vote.svg | 2
web/public/index.html | 6 +-
web/public/modelImg/end.svg | 2
8 files changed, 45 insertions(+), 29 deletions(-)
diff --git a/web/public/index.html b/web/public/index.html
index f903242..8930306 100644
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -219,8 +219,8 @@
window.SITE_CONFIG['dynamicMenuRoutesHasAdded'] = false; // 鍔ㄦ��(鑿滃崟)璺敱鏄惁宸茬粡娣诲姞鐨勭姸鎬佹爣绀猴紙鐢ㄤ簬鍒ゆ柇鏄惁闇�瑕侀噸鏂版媺鍙栨暟鎹苟杩涜鍔ㄦ�佹坊鍔犳搷浣滐級
// 鏈嶅姟鍦板潃
- window.SITE_CONFIG['apiURL'] = 'http://' + location.hostname + ':8050/test-project';
- window.SITE_CONFIG['apiURL2'] = 'http://' + location.hostname + ':8050/test-project';
+ window.SITE_CONFIG['apiURL'] = 'http://' + location.hostname + ':8066/test-project';
+ window.SITE_CONFIG['apiURL2'] = 'http://' + location.hostname + ':8066/test-project';
//window.SITE_CONFIG['apiURL2'] = 'http://'+location.hostname+':8066';
//window.SITE_CONFIG['apiURL'] = '<%= process.env.VUE_APP_API_URL %>';
@@ -228,7 +228,7 @@
// WebSocket鍦板潃
- window.SITE_CONFIG['socketURL'] = 'http://' + location.hostname + ':8050/test-project';
+ window.SITE_CONFIG['socketURL'] = 'http://' + location.hostname + ':8066/test-project';
//window.SITE_CONFIG['socketURL'] ='<%= process.env.VUE_APP_SOCKET_URL %>';
</script>
diff --git a/web/public/modelImg/bridgeConnection.svg b/web/public/modelImg/bridgeConnection.svg
index fb9b35c..2fa3c23 100644
--- a/web/public/modelImg/bridgeConnection.svg
+++ b/web/public/modelImg/bridgeConnection.svg
@@ -9,7 +9,7 @@
</defs>
<rect id="鐢绘澘 1" width="150.000000" height="150.000000" fill="#FFFFFF" fill-opacity="0"/>
<g clip-path="url(#clip18_6)">
- <circle id="妞渾 1" cx="75.000000" cy="75.000000" r="75.000000" fill="#C4C4C4" fill-opacity="0"/>
+ <circle id="妞渾 1" cx="75.000000" cy="75.000000" r="75.000000" fill="#FFFFFF" fill-opacity="1.000000"/>
<circle id="妞渾 1" cx="75.000000" cy="75.000000" r="72.500000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
<line id="鐩寸嚎 1" x1="25.000000" y1="112.500000" x2="125.000000" y2="112.500000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
<line id="鐩寸嚎 2" x1="127.000000" y1="115.000000" x2="127.000000" y2="35.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
diff --git a/web/public/modelImg/end.svg b/web/public/modelImg/end.svg
index 205a390..8911a0b 100644
--- a/web/public/modelImg/end.svg
+++ b/web/public/modelImg/end.svg
@@ -9,7 +9,7 @@
</defs>
<rect id="鐢绘澘 1" width="138.000000" height="81.000000" fill="#FFFFFF" fill-opacity="0"/>
<g clip-path="url(#clip9_10)">
- <rect id="鐭╁舰 1" rx="36.500000" width="138.000000" height="81.000000" fill="#C4C4C4" fill-opacity="0"/>
+ <rect id="鐭╁舰 1" rx="36.500000" width="138.000000" height="81.000000" fill="#FFFFFF" fill-opacity="1.000000"/>
<rect id="鐭╁舰 1" x="4.000000" y="4.000000" rx="36.500000" width="130.000000" height="73.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="8.000000"/>
<path id="end" d="M90.43 47.08C89.14 48.34 87.43 49.38 85.48 49.38C81.4 49.38 78.76 46.29 78.76 40.87C78.76 35.58 82.09 32.29 85.81 32.29C87.73 32.29 88.96 33.01 90.4 34.21L90.28 31.39L90.28 25.12L92.98 25.12L92.98 49L90.76 49L90.52 47.08L90.43 47.08ZM56.95 47.71C55.51 48.64 53.77 49.38 51.55 49.38C47.23 49.38 43.75 46.23 43.75 40.87C43.75 35.58 47.32 32.29 51.1 32.29C55.24 32.29 57.58 35.28 57.58 39.93C57.58 40.54 57.52 41.11 57.46 41.5L46.48 41.5C46.66 44.97 48.79 47.19 51.88 47.19C53.47 47.19 54.76 46.72 55.96 45.9L56.95 47.71ZM64.33 49L61.6 49L61.6 32.71L63.85 32.71L64.09 35.04L64.18 35.04C65.74 33.51 67.42 32.29 69.64 32.29C73.06 32.29 74.62 34.51 74.62 38.68L74.62 49L71.89 49L71.89 39.03C71.89 35.97 70.96 34.68 68.8 34.68C67.12 34.68 65.98 35.53 64.33 37.17L64.33 49ZM51.13 34.48C48.82 34.48 46.78 36.33 46.45 39.52L55.18 39.52C55.18 36.24 53.68 34.48 51.13 34.48ZM81.58 40.84C81.58 44.76 83.2 47.11 86.08 47.11C87.58 47.11 88.9 46.36 90.28 44.86L90.28 36.3C88.87 35.07 87.64 34.6 86.29 34.6C83.65 34.6 81.58 37.12 81.58 40.84Z" fill="#000000" fill-opacity="1.000000" fill-rule="evenodd"/>
</g>
diff --git a/web/public/modelImg/parallel.svg b/web/public/modelImg/parallel.svg
index feec674..947c757 100644
--- a/web/public/modelImg/parallel.svg
+++ b/web/public/modelImg/parallel.svg
@@ -9,7 +9,7 @@
</defs>
<rect id="鐢绘澘 1" width="150.000000" height="150.000000" fill="#FFFFFF" fill-opacity="0"/>
<g clip-path="url(#clip15_2)">
- <circle id="妞渾 1" cx="75.000000" cy="75.000000" r="75.000000" fill="#C4C4C4" fill-opacity="0"/>
+ <circle id="妞渾 1" cx="75.000000" cy="75.000000" r="75.000000" fill="#FFFFFF" fill-opacity="1.000000"/>
<circle id="妞渾 1" cx="75.000000" cy="75.000000" r="72.500000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
<line id="鐩寸嚎 1" x1="11.000000" y1="111.000000" x2="103.000000" y2="111.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
<line id="鐩寸嚎 2" x1="104.000000" y1="113.500000" x2="104.000000" y2="33.500000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
diff --git a/web/public/modelImg/start.svg b/web/public/modelImg/start.svg
index a43906e..c7dd95a 100644
--- a/web/public/modelImg/start.svg
+++ b/web/public/modelImg/start.svg
@@ -9,7 +9,7 @@
</defs>
<rect id="鐢绘澘 1" width="138.000000" height="81.000000" transform="translate(-0.008560 -0.982471)" fill="#FFFFFF" fill-opacity="0"/>
<g clip-path="url(#clip9_3)">
- <rect id="鐭╁舰 1" x="-0.008560" y="-0.982471" rx="36.500000" width="138.000000" height="81.000000" fill="#C4C4C4" fill-opacity="0"/>
+ <rect id="鐭╁舰 1" x="-0.008560" y="-0.982471" rx="36.500000" width="138.000000" height="81.000000" fill="#FFFFFF" fill-opacity="1.000000"/>
<rect id="鐭╁舰 1" x="3.991440" y="3.017529" rx="36.500000" width="130.000000" height="73.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="8.000000"/>
<path id="start" d="M61.34 47.8C60.41 48.1 59.32 48.4 58.33 48.4C54.86 48.4 53.68 46.21 53.68 42.97L53.68 33.94L51.26 33.94L51.26 31.87L53.81 31.72L54.14 27.13L56.42 27.13L56.42 31.72L60.82 31.72L60.82 33.94L56.42 33.94L56.42 43.03C56.42 45.04 57.05 46.18 58.94 46.18C59.51 46.18 60.25 45.97 60.8 45.76L61.34 47.8ZM100.49 47.8C99.56 48.1 98.47 48.4 97.48 48.4C94.01 48.4 92.83 46.21 92.83 42.97L92.83 33.94L90.41 33.94L90.41 31.87L92.96 31.72L93.29 27.13L95.57 27.13L95.57 31.72L99.97 31.72L99.97 33.94L95.57 33.94L95.57 43.03C95.57 45.04 96.2 46.18 98.09 46.18C98.66 46.18 99.4 45.97 99.95 45.76L100.49 47.8ZM50.02 43.57C50.02 46.21 47.93 48.4 44.08 48.4C41.78 48.4 39.56 47.44 38 46.15L39.34 44.35C40.76 45.49 42.23 46.27 44.18 46.27C46.34 46.27 47.39 45.13 47.39 43.72C47.39 42.04 45.47 41.33 43.67 40.63C41.39 39.79 38.9 38.68 38.9 35.92C38.9 33.34 41 31.31 44.54 31.31C46.54 31.31 48.32 32.14 49.58 33.13L48.26 34.9C47.14 34.06 46.01 33.46 44.57 33.46C42.49 33.46 41.53 34.54 41.53 35.8C41.53 37.36 43.22 37.93 45.05 38.62C47.42 39.52 50.02 40.48 50.02 43.57ZM72.95 46.06C71.39 47.35 69.55 48.4 67.55 48.4C64.82 48.4 62.78 46.72 62.78 43.78C62.78 40.24 65.86 38.47 72.8 37.69C72.8 35.59 72.1 33.58 69.44 33.58C67.55 33.58 65.83 34.46 64.54 35.32L63.47 33.43C64.97 32.47 67.28 31.31 69.88 31.31C73.85 31.31 75.52 33.97 75.52 37.99L75.52 48.01L73.28 48.01L73.03 46.06L72.95 46.06ZM83.45 48.01L80.72 48.01L80.72 31.72L82.97 31.72L83.21 34.69L83.3 34.69C84.44 32.62 86.09 31.31 87.92 31.31C88.64 31.31 89.15 31.39 89.65 31.66L89.15 34.06C88.61 33.85 88.22 33.79 87.56 33.79C86.2 33.79 84.53 34.76 83.45 37.54L83.45 48.01ZM65.45 43.6C65.45 45.46 66.71 46.21 68.32 46.21C69.91 46.21 71.21 45.46 72.8 44.05L72.8 39.49C67.31 40.15 65.45 41.5 65.45 43.6Z" fill="#000000" fill-opacity="1.000000" fill-rule="evenodd"/>
</g>
diff --git a/web/public/modelImg/switch.svg b/web/public/modelImg/switch.svg
index 4da813f..f5a9441 100644
--- a/web/public/modelImg/switch.svg
+++ b/web/public/modelImg/switch.svg
@@ -4,12 +4,12 @@
</desc>
<defs>
<clipPath id="clip9_15">
- <rect id="鐢绘澘 1" width="150.000000" height="150.000000" fill="white" fill-opacity="0"/>
+ <rect id="鐢绘澘 1" rx="-0.500000" width="149.000000" height="149.000000" transform="translate(0.500000 0.500000)" fill="white" fill-opacity="0"/>
</clipPath>
</defs>
- <rect id="鐢绘澘 1" width="150.000000" height="150.000000" fill="#FFFFFF" fill-opacity="0"/>
+ <rect id="鐢绘澘 1" rx="-0.500000" width="149.000000" height="149.000000" transform="translate(0.500000 0.500000)" fill="#FFFFFF" fill-opacity="0"/>
<g clip-path="url(#clip9_15)">
- <circle id="妞渾 1" cx="75.000000" cy="75.000000" r="75.000000" fill="#C4C4C4" fill-opacity="0"/>
+ <circle id="妞渾 1" cx="75.000000" cy="75.000000" r="75.000000" fill="#FFFFFF" fill-opacity="1.000000"/>
<circle id="妞渾 1" cx="75.000000" cy="75.000000" r="72.500000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
<line id="鐩寸嚎 3" x1="14.000000" y1="35.000000" x2="79.000000" y2="35.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
<line id="鐩寸嚎 4" x1="4.000000" y1="58.000000" x2="80.000000" y2="58.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
@@ -28,4 +28,5 @@
<circle id="妞渾 2" cx="84.000000" cy="85.000000" r="5.000000" fill="#C4C4C4" fill-opacity="0"/>
<circle id="妞渾 2" cx="84.000000" cy="85.000000" r="4.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="2.000000"/>
</g>
+ <rect id="鐢绘澘 1" rx="-0.500000" width="149.000000" height="149.000000" transform="translate(0.500000 0.500000)" stroke="#000000" stroke-opacity="0" stroke-width="1.000000"/>
</svg>
diff --git a/web/public/modelImg/vote.svg b/web/public/modelImg/vote.svg
index eb29f2b..5961a8c 100644
--- a/web/public/modelImg/vote.svg
+++ b/web/public/modelImg/vote.svg
@@ -9,7 +9,7 @@
</defs>
<rect id="鐢绘澘 1" width="150.000000" height="150.000000" fill="#FFFFFF" fill-opacity="0"/>
<g clip-path="url(#clip9_41)">
- <circle id="妞渾 1" cx="75.000000" cy="75.000000" r="75.000000" fill="#C4C4C4" fill-opacity="0"/>
+ <circle id="妞渾 1" cx="75.000000" cy="75.000000" r="75.000000" fill="#FFFFFF" fill-opacity="1.000000"/>
<circle id="妞渾 1" cx="75.000000" cy="75.000000" r="72.500000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
<line id="鐩寸嚎 1" x1="11.000000" y1="111.000000" x2="51.000000" y2="111.000000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
<line id="鐩寸嚎 2" x1="50.000000" y1="113.500000" x2="50.000000" y2="33.500000" stroke="#000000" stroke-opacity="1.000000" stroke-width="5.000000"/>
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index 2ce607b..07ec2d5 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -1161,12 +1161,14 @@
let dragNodeType = dragNode.getData().nodeType
let offHeight = 50
if (dragNodeType === 'node') {
- offHeight = 50
+ offHeight = 60
} else if (dragNodeType === 'bridgeConnection') {
- offHeight = 230
+ offHeight = 175
} else {
offHeight = 70
}
+ let centerX = 0, centerY = 0;
+
if (graphNodeType === 'dashedBox') { //铏氭
const edges = this.graph.getConnectedEdges(graphNode); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
@@ -1182,8 +1184,9 @@
endNode = this.graph.getCellById(endNodeId)
}
if (startNode && endNode) {
- let centerY = graphNode.position().y
- let result = this.addNodeAndConnect(graphNode, dragNode, dragNode.position().x - dragNode.size().width/2, centerY)
+ centerX = graphNode.position().x+graphNode.getBBox().width/2
+ centerY = graphNode.position().y+graphNode.getBBox().height/2
+ let result = this.addNodeAndConnect(graphNode, dragNode, centerX, centerY)
if (!result){
dragNode.remove()
this.$message({message: '娌℃湁瓒冲鐨勭┖闂存斁缃鑺傜偣锛岃鎵╁ぇ鍓╀綑绌洪棿', type: 'warning'})
@@ -1201,18 +1204,19 @@
let maxY = graphNode.position().y + graphNode.getBBox().height
const edges = this.graph.getConnectedEdges(graphNode); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
+ // 鑾峰彇杩炴帴绾跨殑璺緞鏁版嵁
let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
//閬嶅巻杩欎釜缁勫悎閲岄潰鎵�鏈夎妭鐐癸紝 淇敼minY锛宮axY
-
let pointXY = {minY: minY, maxY: maxY}
console.log(pointXY, 'old')
this.getYRange(inEdges, graphNodeStartNode, pointXY)
console.log(pointXY, 'new')
- let minX = graphNodeStartNode.position().x + graphNodeStartNode.getBBox().width
+ let minX = graphNodeStartNode.position().x + graphNode.getBBox().width+15
let maxX = graphNode.position().x
let centerX = minX + (maxX - minX) / 2
- let centerY = graphNodeY - pointXY.minY > pointXY.maxY - graphNodeY ? pointXY.maxY + 30 : pointXY.minY - offHeight - 30
+ let centerY = graphNodeY+ graphNode.getBBox().height/2 - pointXY.minY > pointXY.maxY - (graphNodeY+ graphNode.getBBox().height/2) ?
+ pointXY.maxY + offHeight/2 + 30 : pointXY.minY - offHeight/2 - 30
let result = this.addNodeAndConnect(null, dragNode, minX, centerY)
if (!result){
@@ -1234,8 +1238,11 @@
})
}
},
- addNodeAndConnect(targetNode, dragNode, leftX, centerY) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
- let width =100, height = 80, leftTopX = leftX , leftTopY = centerY
+ addNodeAndConnect(targetNode, dragNode, centerX, centerY) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
+ let width =100,
+ height = 80,
+ leftTopX = centerX ,
+ leftTopY = centerY
let dragNodeType = dragNode.getData().nodeType
if (dragNodeType === 'node') {
width =60
@@ -1245,36 +1252,45 @@
height = 60
} else if (dragNodeType === 'bridgeConnection') {
width =550
- height = 115
- leftTopX = leftX - width/2
- leftTopY = centerY - height/2
- // leftTopY = 240/2
+ height = 175
} else {
width =270
height = 60
}
-
+ leftTopX = centerX - width/2
+ leftTopY = centerY - height/2
if (!this.canPlace(targetNode,dragNode,{leftTopX, leftTopY, width, height})){
return false
}
if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
- dragNode.position(leftX, centerY)
+ dragNode.position(leftTopX, leftTopY)
return {newStartNode: dragNode, newEndNode: dragNode}
} else if (dragNodeType === 'bridgeConnection') {
return this.createBridgeConnection(leftTopX, leftTopY, dragNode)
} else {
- return this.createParallelBrach(leftTopX, leftTopY, dragNode)
+ return this.createParallelBrach(leftTopX, centerY, dragNode)
}
},
// 鐩镐氦鐨勮竟
addNodeAndInsertEdge(graphEdge, dragNode) {
+ const Source = graphEdge.getSourceCell()
+ const Target = graphEdge.getTargetCell()
+
+ let centerY = Source.position().y + Source.getBBox().height/2
+ if (Target.getData().nodeType === 'node'){
+ centerY = Target.position().y + Target.getBBox().height/2
+ }
+
+ console.log(Source,'Source 璧峰鐐逛俊鎭�')
+ console.log(Target,'Target 缁堟鐐逛俊鎭�')
+ console.log(Source.position().y,'璧峰鐐圭殑Y鍧愭爣')
+ console.log(Target.position().y,'缁堟鐐圭殑Y鍧愭爣')
let startNodeId = graphEdge.source.cell
let startNode = this.graph.getCellById(startNodeId)
let endNodeId = graphEdge.target.cell
let endNode = this.graph.getCellById(endNodeId)
if (startNode && endNode) {
- let centerY = dragNode.position().y
let isRight = true;
let startPort = 'right1'
let endPort = 'left1'
@@ -1304,7 +1320,6 @@
router: {name: 'manhattan'},
connector: {name: 'rounded'}
})
-
} else {
this.graph.addEdge({
source: {cell: startNode, port: startPort},
--
Gitblit v1.9.1