hookehuyr

fix 居中功能作为toolbar上面的功能

...@@ -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,
......