Showing
1 changed file
with
44 additions
and
31 deletions
| ... | @@ -396,6 +396,12 @@ | ... | @@ -396,6 +396,12 @@ |
| 396 | <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">排序</span> | 396 | <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">排序</span> |
| 397 | </div> | 397 | </div> |
| 398 | </el-tooltip> | 398 | </el-tooltip> |
| 399 | + <el-tooltip content="图层居中"> | ||
| 400 | + <div class="vue-flow-editor-toolbar-item" @click="setMapCenter"> | ||
| 401 | + <i class="el-icon-rank" style=" margin-top: 4px;" /> | ||
| 402 | + <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">居中</span> | ||
| 403 | + </div> | ||
| 404 | + </el-tooltip> | ||
| 399 | <!-- <el-tooltip content="保存流程图数据"> | 405 | <!-- <el-tooltip content="保存流程图数据"> |
| 400 | <div class="vue-flow-editor-toolbar-item" @click="saveData"> | 406 | <div class="vue-flow-editor-toolbar-item" @click="saveData"> |
| 401 | <i class="el-icon-coin" style=" margin-top: 4px;" /> | 407 | <i class="el-icon-coin" style=" margin-top: 4px;" /> |
| ... | @@ -953,37 +959,6 @@ export default { | ... | @@ -953,37 +959,6 @@ export default { |
| 953 | // 内部刷新graph数据 | 959 | // 内部刷新graph数据 |
| 954 | nextTick(() => { | 960 | nextTick(() => { |
| 955 | editor.editorState.graph.read(flowData.value); | 961 | editor.editorState.graph.read(flowData.value); |
| 956 | - // TAG: 自动位移中心点位置 | ||
| 957 | - const point = { | ||
| 958 | - x: 600, | ||
| 959 | - y: 400 | ||
| 960 | - }; | ||
| 961 | - const width = editor.editorState.graph.get('width'); | ||
| 962 | - const height = editor.editorState.graph.get('height'); | ||
| 963 | - // 找到视口中心 | ||
| 964 | - const viewCenter = { | ||
| 965 | - x: width / 2, | ||
| 966 | - y: height / 2 | ||
| 967 | - }; | ||
| 968 | - const modelCenter = editor.editorState.graph.getPointByCanvas(viewCenter.x, viewCenter.y); | ||
| 969 | - const viewportMatrix = editor.editorState.graph.get('group').getMatrix(); | ||
| 970 | - // 画布平移的目标位置,最终目标是graph.translate(dx, dy); | ||
| 971 | - const dx = (modelCenter.x - point.x) * viewportMatrix[0]; | ||
| 972 | - const dy = (modelCenter.y - point.y) * viewportMatrix[4]; | ||
| 973 | - let lastX = 0; | ||
| 974 | - let lastY = 0; | ||
| 975 | - let newX = void 0; | ||
| 976 | - let newY = void 0; | ||
| 977 | - // 动画每次平移一点,直到目标位置 | ||
| 978 | - editor.editorState.graph.get('canvas').animate({ | ||
| 979 | - onFrame: function onFrame(ratio) { | ||
| 980 | - newX = dx * ratio; | ||
| 981 | - newY = dy * ratio; | ||
| 982 | - editor.editorState.graph.translate(newX - lastX, newY - lastY); | ||
| 983 | - lastX = newX; | ||
| 984 | - lastY = newY; | ||
| 985 | - } | ||
| 986 | - }, 100, 'easeCubic'); | ||
| 987 | }); | 962 | }); |
| 988 | } | 963 | } |
| 989 | 964 | ||
| ... | @@ -2358,6 +2333,43 @@ export default { | ... | @@ -2358,6 +2333,43 @@ export default { |
| 2358 | state.dialogSortVisible = true; | 2333 | state.dialogSortVisible = true; |
| 2359 | } | 2334 | } |
| 2360 | 2335 | ||
| 2336 | + /** | ||
| 2337 | + * 图层居中 | ||
| 2338 | + */ | ||
| 2339 | + const setMapCenter = () => { | ||
| 2340 | + // TAG: 自动位移中心点位置 | ||
| 2341 | + const point = { | ||
| 2342 | + x: 700, | ||
| 2343 | + y: 400 | ||
| 2344 | + }; | ||
| 2345 | + const width = editor.editorState.graph.get('width'); | ||
| 2346 | + const height = editor.editorState.graph.get('height'); | ||
| 2347 | + // 找到视口中心 | ||
| 2348 | + const viewCenter = { | ||
| 2349 | + x: width / 2, | ||
| 2350 | + y: height / 2 | ||
| 2351 | + }; | ||
| 2352 | + const modelCenter = editor.editorState.graph.getPointByCanvas(viewCenter.x, viewCenter.y); | ||
| 2353 | + const viewportMatrix = editor.editorState.graph.get('group').getMatrix(); | ||
| 2354 | + // 画布平移的目标位置,最终目标是graph.translate(dx, dy); | ||
| 2355 | + const dx = (modelCenter.x - point.x) * viewportMatrix[0]; | ||
| 2356 | + const dy = (modelCenter.y - point.y) * viewportMatrix[4]; | ||
| 2357 | + let lastX = 0; | ||
| 2358 | + let lastY = 0; | ||
| 2359 | + let newX = void 0; | ||
| 2360 | + let newY = void 0; | ||
| 2361 | + // 动画每次平移一点,直到目标位置 | ||
| 2362 | + editor.editorState.graph.get('canvas').animate({ | ||
| 2363 | + onFrame: function onFrame(ratio) { | ||
| 2364 | + newX = dx * ratio; | ||
| 2365 | + newY = dy * ratio; | ||
| 2366 | + editor.editorState.graph.translate(newX - lastX, newY - lastY); | ||
| 2367 | + lastX = newX; | ||
| 2368 | + lastY = newY; | ||
| 2369 | + } | ||
| 2370 | + }, 100, 'easeCubic'); | ||
| 2371 | + } | ||
| 2372 | + | ||
| 2361 | const confirmSort = async () => { | 2373 | const confirmSort = async () => { |
| 2362 | state.dialogSortVisible = false; | 2374 | state.dialogSortVisible = false; |
| 2363 | 2375 | ||
| ... | @@ -2684,6 +2696,7 @@ export default { | ... | @@ -2684,6 +2696,7 @@ export default { |
| 2684 | onConfirmUserView, | 2696 | onConfirmUserView, |
| 2685 | 2697 | ||
| 2686 | sortData, | 2698 | sortData, |
| 2699 | + setMapCenter, | ||
| 2687 | confirmSort, | 2700 | confirmSort, |
| 2688 | copyData, | 2701 | copyData, |
| 2689 | saveData, | 2702 | saveData, | ... | ... |
-
Please register or login to post a comment