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

@@ -396,6 +396,12 @@
             <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">排序</span>
           </div>
         </el-tooltip>
+        <el-tooltip content="图层居中">
+          <div class="vue-flow-editor-toolbar-item" @click="setMapCenter">
+            <i class="el-icon-rank" style=" margin-top: 4px;" />
+            <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">居中</span>
+          </div>
+        </el-tooltip>
         <!-- <el-tooltip content="保存流程图数据">
           <div class="vue-flow-editor-toolbar-item" @click="saveData">
             <i class="el-icon-coin" style=" margin-top: 4px;" />
@@ -953,37 +959,6 @@ export default {
           // 内部刷新graph数据
           nextTick(() => {
             editor.editorState.graph.read(flowData.value);
-            // TAG: 自动位移中心点位置
-            const point = {
-              x: 600,
-              y: 400
-            };
-            const width = editor.editorState.graph.get('width');
-            const height = editor.editorState.graph.get('height');
-            // 找到视口中心
-            const viewCenter = {
-              x: width / 2,
-              y: height / 2
-            };
-            const modelCenter = editor.editorState.graph.getPointByCanvas(viewCenter.x, viewCenter.y);
-            const viewportMatrix = editor.editorState.graph.get('group').getMatrix();
-            // 画布平移的目标位置，最终目标是graph.translate(dx, dy);
-            const dx = (modelCenter.x - point.x) * viewportMatrix[0];
-            const dy = (modelCenter.y - point.y) * viewportMatrix[4];
-            let lastX = 0;
-            let lastY = 0;
-            let newX = void 0;
-            let newY = void 0;
-            // 动画每次平移一点，直到目标位置
-            editor.editorState.graph.get('canvas').animate({
-              onFrame: function onFrame(ratio) {
-                newX = dx * ratio;
-                newY = dy * ratio;
-                editor.editorState.graph.translate(newX - lastX, newY - lastY);
-                lastX = newX;
-                lastY = newY;
-              }
-            }, 100, 'easeCubic');
           });
         }
 
@@ -2358,6 +2333,43 @@ export default {
       state.dialogSortVisible = true;
     }
 
+    /**
+     * 图层居中
+     */
+    const setMapCenter = () => {
+      // TAG: 自动位移中心点位置
+      const point = {
+        x: 700,
+        y: 400
+      };
+      const width = editor.editorState.graph.get('width');
+      const height = editor.editorState.graph.get('height');
+      // 找到视口中心
+      const viewCenter = {
+        x: width / 2,
+        y: height / 2
+      };
+      const modelCenter = editor.editorState.graph.getPointByCanvas(viewCenter.x, viewCenter.y);
+      const viewportMatrix = editor.editorState.graph.get('group').getMatrix();
+      // 画布平移的目标位置，最终目标是graph.translate(dx, dy);
+      const dx = (modelCenter.x - point.x) * viewportMatrix[0];
+      const dy = (modelCenter.y - point.y) * viewportMatrix[4];
+      let lastX = 0;
+      let lastY = 0;
+      let newX = void 0;
+      let newY = void 0;
+      // 动画每次平移一点，直到目标位置
+      editor.editorState.graph.get('canvas').animate({
+        onFrame: function onFrame(ratio) {
+          newX = dx * ratio;
+          newY = dy * ratio;
+          editor.editorState.graph.translate(newX - lastX, newY - lastY);
+          lastX = newX;
+          lastY = newY;
+        }
+      }, 100, 'easeCubic');
+    }
+
     const confirmSort = async () => {
       state.dialogSortVisible = false;
 
@@ -2684,6 +2696,7 @@ export default {
       onConfirmUserView,
 
       sortData,
+      setMapCenter,
       confirmSort,
       copyData,
       saveData,