2018-06-23 22:09:45 +00:00
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Tree</title>
|
|
|
|
|
<style>
|
|
|
|
|
#container {
|
|
|
|
|
width: 400;
|
|
|
|
|
height: 600;
|
|
|
|
|
border: 1px solid black;
|
|
|
|
|
}
|
2018-06-24 21:20:32 +00:00
|
|
|
|
|
|
|
|
.monaco-scrollable-element>.scrollbar>.slider {
|
|
|
|
|
background: rgba(100, 100, 100, .4);
|
|
|
|
|
}
|
2018-08-10 21:15:27 +00:00
|
|
|
|
|
|
|
|
.tl-contents {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
2018-06-23 22:09:45 +00:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2018-09-26 20:16:35 +00:00
|
|
|
<input type="text" id="filter" />
|
2018-09-26 20:56:54 +00:00
|
|
|
<button id="collapseall">Collapse All</button>
|
2018-06-23 22:09:45 +00:00
|
|
|
<div id="container"></div>
|
|
|
|
|
|
2018-06-24 21:20:32 +00:00
|
|
|
<script src="/static/vs/loader.js"></script>
|
2018-06-23 22:09:45 +00:00
|
|
|
<script>
|
2018-09-26 20:56:54 +00:00
|
|
|
function perf(name, fn) {
|
|
|
|
|
performance.mark('before ' + name);
|
|
|
|
|
const start = performance.now();
|
|
|
|
|
fn();
|
|
|
|
|
console.log(name + ' took', performance.now() - start);
|
|
|
|
|
performance.mark('after ' + name);
|
|
|
|
|
}
|
|
|
|
|
|
2018-06-24 21:20:32 +00:00
|
|
|
require.config({ baseUrl: '/static' });
|
2018-06-23 22:09:45 +00:00
|
|
|
|
2018-10-03 12:04:29 +00:00
|
|
|
require(['vs/base/browser/ui/tree/indexTree', 'vs/base/browser/ui/tree/tree', 'vs/base/common/iterator'], ({ IndexTree }, { TreeVisibility }, { iter }) => {
|
2018-06-23 22:09:45 +00:00
|
|
|
const delegate = {
|
|
|
|
|
getHeight() { return 22; },
|
|
|
|
|
getTemplateId() { return 'template'; }
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const renderer = {
|
|
|
|
|
templateId: 'template',
|
|
|
|
|
renderTemplate(container) { return container; },
|
|
|
|
|
renderElement(element, index, container) {
|
|
|
|
|
container.textContent = element;
|
|
|
|
|
},
|
|
|
|
|
disposeTemplate() { }
|
|
|
|
|
};
|
|
|
|
|
|
2018-10-02 10:42:16 +00:00
|
|
|
const treeFilter = new class {
|
|
|
|
|
constructor() {
|
|
|
|
|
this.pattern = null;
|
|
|
|
|
let timeout;
|
|
|
|
|
filter.oninput = () => {
|
|
|
|
|
clearTimeout(timeout);
|
|
|
|
|
timeout = setTimeout(() => this.updatePattern(), 300);
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
updatePattern() {
|
|
|
|
|
if (!filter.value) {
|
2018-09-26 20:16:35 +00:00
|
|
|
this.pattern = null;
|
2018-10-02 10:42:16 +00:00
|
|
|
} else {
|
|
|
|
|
this.pattern = new RegExp(filter.value, 'i');
|
2018-09-26 20:16:35 +00:00
|
|
|
}
|
|
|
|
|
|
2018-10-02 10:42:16 +00:00
|
|
|
perf('refilter', () => tree.refilter());
|
|
|
|
|
}
|
|
|
|
|
filter(el) {
|
2018-10-03 12:04:29 +00:00
|
|
|
return (this.pattern ? this.pattern.test(el) : true) ? TreeVisibility.Visible : TreeVisibility.Recurse;
|
2018-09-26 20:16:35 +00:00
|
|
|
}
|
2018-10-02 10:42:16 +00:00
|
|
|
};
|
|
|
|
|
|
2018-10-03 12:04:29 +00:00
|
|
|
const tree = new IndexTree(container, delegate, [renderer], { filter: treeFilter });
|
2018-06-24 21:20:32 +00:00
|
|
|
|
2018-09-21 13:43:02 +00:00
|
|
|
function setModel(model) {
|
|
|
|
|
performance.mark('before splice');
|
|
|
|
|
const start = performance.now();
|
2018-09-26 20:56:54 +00:00
|
|
|
;
|
2018-09-21 13:43:02 +00:00
|
|
|
console.log('splice took', performance.now() - start);
|
|
|
|
|
performance.mark('after splice');
|
|
|
|
|
}
|
2018-06-24 21:20:32 +00:00
|
|
|
|
2018-09-21 13:43:02 +00:00
|
|
|
switch (location.search) {
|
|
|
|
|
case '?problems': {
|
|
|
|
|
const files = [];
|
|
|
|
|
for (let i = 0; i < 10000; i++) {
|
|
|
|
|
const errors = [];
|
2018-06-24 21:20:32 +00:00
|
|
|
|
2018-09-21 13:43:02 +00:00
|
|
|
for (let j = 1; j <= (i % 5) + 1; j++) {
|
|
|
|
|
errors.push({ element: `error #${j}` });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
files.push({ element: `file #${i}`, children: errors });
|
|
|
|
|
}
|
2018-09-26 20:56:54 +00:00
|
|
|
|
|
|
|
|
perf('splice', () => tree.splice([0], 0, files));
|
2018-09-21 13:43:02 +00:00
|
|
|
break;
|
2018-06-24 21:20:32 +00:00
|
|
|
}
|
2018-09-21 13:43:02 +00:00
|
|
|
default:
|
|
|
|
|
const xhr = new XMLHttpRequest();
|
|
|
|
|
xhr.open('GET', '/api/ls?path=');
|
|
|
|
|
xhr.send();
|
|
|
|
|
xhr.onreadystatechange = function () {
|
|
|
|
|
if (this.readyState == 4 && this.status == 200) {
|
2018-09-26 20:56:54 +00:00
|
|
|
perf('splice', () => tree.splice([0], 0, [JSON.parse(this.responseText)]));
|
2018-10-02 10:42:16 +00:00
|
|
|
treeFilter.updatePattern();
|
2018-09-21 13:43:02 +00:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}
|
2018-09-26 20:56:54 +00:00
|
|
|
|
2018-10-02 15:46:49 +00:00
|
|
|
collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());
|
2018-06-23 22:09:45 +00:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
