Merge pull request #645 from ethereum/triggerEventFromTreeView

Trigger click on node and click on leaf from Treeview

remix-debugger/src/ui/TreeView.js

@@ -25,13 +25,24 @@ var css = csjs`
     width: 10px;
   }
 `
+
+var remixLib = require('remix-lib')
+var EventManager = remixLib.EventManager
+
+/**
+ * TreeView
+ *  - extendable by specifying custom `extractData` and `formatSelf` function
+ *  - trigger `nodeClick` and `leafClick`
+ */
 class TreeView {
 
   constructor (opts) {
+    this.event = new EventManager()
     this.extractData = opts.extractData || this.extractDataDefault
     this.formatSelf = opts.formatSelf || this.formatSelfDefault
     this.view = null
     this.nodeIsExpanded = {}
+    this.nodes = {}
   }
 
   render (json) {
@@ -51,7 +62,7 @@ class TreeView {
   renderObject (item, parent, key, expand, keyPath) {
     var data = this.extractData(item, parent, key)
     var children = (data.children || []).map((child, index) => {
-      return this.renderObject(child.value, data, child.key, expand, keyPath + ',' + child.key)
+      return this.renderObject(child.value, data, child.key, expand, keyPath + '/' + child.key)
     })
     return this.formatData(key, data, children, expand, keyPath)
   }
@@ -64,23 +75,36 @@ class TreeView {
   }
 
   formatData (key, data, children, expand, keyPath) {
-    var label = yo`<div class="${css.label_tv}"><div class="fa fa-caret-right" class="${css.caret_tv}"></div><span>${this.formatSelf(key, data)}</span></div>`
-    var renderedChildren = ''
-    if (children.length) {
-      renderedChildren = yo`<ul class="${css.ul_tv}">${children}</ul>`
-      renderedChildren.style.display = this.nodeIsExpanded[keyPath] !== undefined ? (this.nodeIsExpanded[keyPath] ? 'block' : 'none') : (expand ? 'block' : 'none')
-      label.firstElementChild.className = renderedChildren.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down'
-      var self = this
+    var self = this
+    var li = yo`<li class=${css.li_tv}></li>`
+    var caret = yo`<div class="fa fa-caret-right" class=${css.caret_tv}></div>`
+    var label = yo`
+      <div class=${css.label_tv}>
+        ${caret}
+        <span>${self.formatSelf(key, data, li)}</span>
+      </div>`
+    li.appendChild(label)
+    if (data.children) {
+      var isExpanded = self.nodeIsExpanded[keyPath]
+      var list = yo`<ul class=${css.ul_tv}>${children}</ul>`
+      this.nodes[keyPath] = list
+      list.style.display = isExpanded !== undefined ? (isExpanded ? 'block' : 'none') : (expand ? 'block' : 'none')
+      caret.className = list.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down'
       label.onclick = function () {
-        this.firstElementChild.className = this.firstElementChild.className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right'
-        var list = this.parentElement.querySelector('ul')
+        caret.className = caret.className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right'
         list.style.display = list.style.display === 'none' ? 'block' : 'none'
         self.nodeIsExpanded[keyPath] = list.style.display === 'block'
+        self.event.trigger('nodeClick', [keyPath, list])
       }
+      li.appendChild(list)
     } else {
-      label.firstElementChild.style.visibility = 'hidden'
+      caret.style.visibility = 'hidden'
     }
-    return yo`<li class="${css.li_tv}">${label}${renderedChildren}</li>`
+    return li
+  }
+
+  nodeAt (path) {
+    return this.nodes[path]
   }
 
   formatSelfDefault (key, data) {
@@ -94,14 +118,20 @@ class TreeView {
         return {key: index, value: item}
       })
       ret.self = 'Array'
+      ret.isNode = true
+      ret.isLeaf = false
     } else if (item instanceof Object) {
       ret.children = Object.keys(item).map((key) => {
         return {key: key, value: item[key]}
       })
       ret.self = 'Object'
+      ret.isNode = true
+      ret.isLeaf = false
     } else {
       ret.self = item
       ret.children = []
+      ret.isNode = false
+      ret.isLeaf = true
     }
     return ret
   }