Merge pull request #679 from ethereum/fixStyling

TreeView API update
pull/1/head
yann300 7 years ago committed by GitHub
commit 4bb1dc5651
  1. 77
      remix-debugger/src/ui/TreeView.js

@ -20,7 +20,6 @@ var css = csjs`
-webkit-padding-start: 0px; -webkit-padding-start: 0px;
} }
.caret_tv { .caret_tv {
margin-top: 3px;
width: 10px; width: 10px;
} }
.label_tv { .label_tv {
@ -44,12 +43,10 @@ class TreeView {
this.extractData = opts.extractData || this.extractDataDefault this.extractData = opts.extractData || this.extractDataDefault
this.formatSelf = opts.formatSelf || this.formatSelfDefault this.formatSelf = opts.formatSelf || this.formatSelfDefault
this.view = null this.view = null
this.nodeIsExpanded = {}
this.nodes = {}
} }
render (json) { render (json, expand) {
var view = this.renderProperties(json, false) var view = this.renderProperties(json, expand)
if (!this.view) { if (!this.view) {
this.view = view this.view = view
} }
@ -70,44 +67,84 @@ class TreeView {
return this.formatData(key, data, children, expand, keyPath) return this.formatData(key, data, children, expand, keyPath)
} }
renderProperties (json, expand) { renderProperties (json, expand, key) {
key = key || ''
var children = Object.keys(json).map((innerkey) => { var children = Object.keys(json).map((innerkey) => {
return this.renderObject(json[innerkey], json, innerkey, expand, innerkey) return this.renderObject(json[innerkey], json, innerkey, expand, innerkey)
}) })
return yo`<ul class="${css.ul_tv}">${children}</ul>` return yo`<ul key=${key} class="${css.ul_tv}">${children}</ul>`
} }
formatData (key, data, children, expand, keyPath) { formatData (key, data, children, expand, keyPath) {
var self = this var self = this
var li = yo`<li class=${css.li_tv}></li>` var li = yo`<li key=${key} class=${css.li_tv}></li>`
var caret = yo`<div class="fa fa-caret-right ${css.caret_tv}"></div>` var caret = yo`<div class="fa fa-caret-right caret ${css.caret_tv}"></div>`
var label = yo` var label = yo`
<div class=${css.label_tv}> <div key=${key} class=${css.label_tv}>
${caret} ${caret}
<span>${self.formatSelf(key, data, li)}</span> <span>${self.formatSelf(key, data, li)}</span>
</div>` </div>`
li.appendChild(label) li.appendChild(label)
if (data.children) { if (data.children) {
var isExpanded = self.nodeIsExpanded[keyPath] var list = yo`<ul key=${key} class=${css.ul_tv}>${children}</ul>`
var list = yo`<ul class=${css.ul_tv}>${children}</ul>` list.style.display = 'none'
this.nodes[keyPath] = list caret.className = list.style.display === 'none' ? `fa fa-caret-right caret ${css.caret_tv}` : `fa fa-caret-down caret ${css.caret_tv}`
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 () { label.onclick = function () {
caret.className = caret.className === 'fa fa-caret-right' ? 'fa fa-caret-down' : 'fa fa-caret-right' self.expand(keyPath)
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) li.appendChild(list)
} else { } else {
caret.style.visibility = 'hidden' caret.style.visibility = 'hidden'
label.onclick = function () {
self.event.trigger('leafClick', [key, data, label])
}
} }
return li return li
} }
isExpanded (path) {
var current = this.nodeAt(path)
if (current) {
return current.style.display !== 'none'
}
return false
}
expand (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')
}
}
itemAt (path) {
return this.view.querySelector(`li[key="${path}"]`)
}
labelAt (path) {
return this.view.querySelector(`div[key="${path}"]`)
}
nodeAt (path) { nodeAt (path) {
return this.nodes[path] return this.view.querySelector(`ul[key="${path}"]`)
}
updateNodeFromJSON (path, jsonTree, expand) {
var newTree = this.renderProperties(jsonTree, expand, path)
var current = this.nodeAt(path)
if (current && current.parentElement) {
current.parentElement.replaceChild(newTree, current)
}
} }
formatSelfDefault (key, data) { formatSelfDefault (key, data) {

Loading…
Cancel
Save