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) } }