fix component tree navigation (fix #283)

Author: yyx990803

src/devtools/views/components/ComponentTree.vue

@@ -9,6 +9,7 @@
     <div slot="scroll" class="tree">
       <component-instance
         v-for="instance in instances"
+        ref="instances"
         :key="instance.id"
         :instance="instance"
         :depth="0">
@@ -25,6 +26,7 @@ import ComponentInstance from './ComponentInstance.vue'
 import keyNavMixin from '../../mixins/key-nav'
 
 export default {
+  mixins: [keyNavMixin],
   components: {
     ScrollPane,
     ActionHeader,
@@ -33,11 +35,11 @@ export default {
   props: {
     instances: Array
   },
-  mixins: [keyNavMixin],
   methods: {
     filterInstances (e) {
       bridge.send('filter-instances', e.target.value)
     },
+
     onKeyNav (dir) {
       // somewhat hacky key navigation, but it works!
       const currentEl = this.$el.querySelector('.instance.selected')
@@ -54,43 +56,38 @@ export default {
         }
       } else if (dir === 'right') {
         if (current.expanded && current.$children.length) {
-          current = findByOffset(current, 1)
+          current = this.findByOffset(current, 1)
           current.select()
         } else {
           current.expand()
         }
       } else if (dir === 'up') {
-        current = findByOffset(current, -1)
+        current = this.findByOffset(current, -1)
         current.select()
       } else {
-        current = findByOffset(current, 1)
+        current = this.findByOffset(current, 1)
         current.select()
       }
+    },
+
+    findByOffset (current, offset) {
+      const all = getAllInstances(this.$refs.instances)
+      const index = all.indexOf(current) + offset
+      if (index < 0) {
+        return all[0]
+      } else if (index >= all.length) {
+        return all[all.length - 1]
+      } else {
+        return all[index]
+      }
     }
   }
 }
 
-function getAllInstances () {
-  const nodes = [...document.querySelectorAll('.instance')]
-  return nodes.map(n => n.__vue__)
-}
-
-function findByOffset (current, offset) {
-  const all = getAllInstances()
-  let currentIndex = -1
-  all.forEach((el, index) => {
-    if (current === el) {
-      currentIndex = index
-    }
-  })
-  offset = currentIndex + offset
-  if (offset < 0) {
-    return all[0]
-  } else if (offset >= all.length) {
-    return all[all.length - 1]
-  } else {
-    return all[offset]
-  }
+function getAllInstances (list) {
+  return Array.prototype.concat.apply([], list.map(instance => {
+    return [instance, ...getAllInstances(instance.$children)]
+  }))
 }
 </script>