update 思维导图

src/components/MindMap.vue

@@ -89,7 +89,8 @@ export default {
   },
   data () {
     return {
-      data: {}
+      data: {},
+      graph: null
     }
   },
   watch: {
@@ -186,12 +187,12 @@ export default {
             x: 0,
             y: 0,
             width: this.nodeWidth + this.expendCollapseIconR + NODE_ICON_MARGIN,
-            height: this.nodeHeight,
+            height: this.nodeHeight
           })
           return nodeContainer
         }
       }, 'single-shape')
-      const graph = new G6.TreeGraph({
+      this.graph = new G6.TreeGraph({
         container: this.domId,
         modes: {
           default: [{
@@ -236,9 +237,43 @@ export default {
       G6.Util.traverseTree(this.data, (item) => {
         item.id = item[this.mapDataKeyField]
       })
-      graph.data(this.data)
-      graph.render()
-      graph.fitView()
+      this.graph.data(this.data)
+      this.graph.render()
+      this.graph.fitView()
+    },
+    searchNode (nodeId) {
+      const item = this.graph.findById(nodeId)
+      const matrix = item.get('group').getMatrix()
+      const point = {
+        x: matrix[6],
+        y: matrix[7]
+      }
+      const width = this.graph.get('width')
+      const height = this.graph.get('height')
+      // 找到视口中心
+      var viewCenter = {
+        x: width / 2,
+        y: height / 2
+      }
+      var modelCenter = this.graph.getPointByCanvas(viewCenter.x, viewCenter.y)
+      var viewportMatrix = this.graph.get('group').getMatrix()
+      // 画布平移的目标位置，最终目标是graph.translate(dx, dy);
+      var dx = (modelCenter.x - point.x) * viewportMatrix[0]
+      var dy = (modelCenter.y - point.y) * viewportMatrix[4]
+      var lastX = 0
+      var lastY = 0
+      var newX = void 0
+      var newY = void 0
+      // 动画每次平移一点，直到目标位置
+      this.graph.get('canvas').animate({
+        onFrame: (ratio) => {
+          newX = dx * ratio
+          newY = dy * ratio
+          this.graph.translate(newX - lastX, newY - lastY)
+          lastX = newX
+          lastY = newY
+        }
+      }, 300, 'easeCubic')
     }
   }
 }