diff --git a/remix-debugger/src/ui/TreeView.js b/remix-debugger/src/ui/TreeView.js
index a2aa788727..d2133c69ba 100644
--- a/remix-debugger/src/ui/TreeView.js
+++ b/remix-debugger/src/ui/TreeView.js
@@ -43,9 +43,6 @@ class TreeView {
this.extractData = opts.extractData || this.extractDataDefault
this.formatSelf = opts.formatSelf || this.formatSelfDefault
this.view = null
- this.nodes = {}
- this.labels = {}
- this.carets = {}
}
render (json, expand) {
@@ -70,36 +67,37 @@ class TreeView {
return this.formatData(key, data, children, expand, keyPath)
}
- renderProperties (json, expand) {
+ renderProperties (json, expand, key) {
+ key = key || ''
var children = Object.keys(json).map((innerkey) => {
return this.renderObject(json[innerkey], json, innerkey, expand, innerkey)
})
- return yo`
`
+ return yo``
}
formatData (key, data, children, expand, keyPath) {
var self = this
var li = yo``
- var caret = yo``
+ var caret = yo``
var label = yo`
-
+
${caret}
${self.formatSelf(key, data, li)}
`
li.appendChild(label)
if (data.children) {
- var list = yo`
`
- this.nodes[keyPath] = list
- this.labels[keyPath] = label
- this.carets[keyPath] = caret
+ var list = yo`
`
list.style.display = 'none'
- caret.className = list.style.display === 'none' ? 'fa fa-caret-right' : 'fa fa-caret-down'
+ caret.className = list.style.display === 'none' ? `fa fa-caret-right caret ${css.caret_tv}` : `fa fa-caret-down caret ${css.caret_tv}`
label.onclick = function () {
self.expand(keyPath)
}
li.appendChild(list)
} else {
caret.style.visibility = 'hidden'
+ label.onclick = function () {
+ self.event.trigger('leafClick', [key, data, label])
+ }
}
return li
}
@@ -113,25 +111,35 @@ class TreeView {
}
expand (path) {
- if (this.labels[path]) {
- this.carets[path].className = this.carets[path].className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right'
- this.nodes[path].style.display = this.nodes[path].style.display === 'none' ? 'block' : 'none'
- this.event.trigger('nodeClick', [path, this.nodes[path]])
+ var caret = this.caretAt(path)
+ var node = this.nodeAt(path)
+ if (node) {
+ node.style.display = node.style.display === 'none' ? 'block' : 'none'
+ caret.className = node.style.display === 'none' ? `fa fa-caret-right caret ${css.caret_tv}` : `fa fa-caret-down caret ${css.caret_tv}`
+ this.event.trigger('nodeClick', [path, node])
+ }
+ }
+
+ caretAt (path) {
+ var label = this.labelAt(path)
+ if (label) {
+ return label.querySelector('.caret')
}
}
+ labelAt (path) {
+ return this.view.querySelector(`div[key="${path}"]`)
+ }
+
nodeAt (path) {
- return this.nodes[path]
+ return this.view.querySelector(`ul[key="${path}"]`)
}
- updateNode (path, newNode) {
+ updateNodeFromJSON (path, jsonTree, expand) {
+ var newTree = this.renderProperties(jsonTree, expand, path)
var current = this.nodeAt(path)
- if (current) {
- var parent = current.parentNode
- if (parent) {
- parent.replaceChild(newNode, current)
- this.nodes[path] = newNode
- }
+ if (current && current.parentElement) {
+ current.parentElement.replaceChild(newTree, current)
}
}