Squashed 'lib/vscode/' content from commit e5a624b788
git-subtree-dir: lib/vscode git-subtree-split: e5a624b788d92b8d34d1392e4c4d9789406efe8f
This commit is contained in:
Joe Previte
403
test/ui/tree/public/index.html
Normal file
403
test/ui/tree/public/index.html
Normal file
@ -0,0 +1,403 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Tree</title>
|
||||
<style>
|
||||
#container {
|
||||
width: 400;
|
||||
height: 600;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.monaco-scrollable-element>.scrollbar>.slider {
|
||||
background: rgba(100, 100, 100, .4);
|
||||
}
|
||||
|
||||
.tl-contents {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.monaco-list-row:hover:not(.selected):not(.focused) {
|
||||
background: gainsboro !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<input type="text" id="filter" />
|
||||
<button id="expandall">Expand All</button>
|
||||
<button id="collapseall">Collapse All</button>
|
||||
<button id="renderwidth">Render Width</button>
|
||||
<button id="refresh">Refresh</button>
|
||||
<div id="container"></div>
|
||||
|
||||
<script src="/static/vs/loader.js"></script>
|
||||
<script>
|
||||
function perf(name, fn) {
|
||||
performance.mark('before ' + name);
|
||||
const start = performance.now();
|
||||
fn();
|
||||
console.log(name + ' took', performance.now() - start);
|
||||
performance.mark('after ' + name);
|
||||
}
|
||||
|
||||
require.config({ baseUrl: '/static' });
|
||||
|
||||
require(['vs/base/browser/ui/tree/indexTree', 'vs/base/browser/ui/tree/objectTree', 'vs/base/browser/ui/tree/asyncDataTree', 'vs/base/browser/ui/tree/dataTree', 'vs/base/browser/ui/tree/tree', 'vs/base/common/iterator'], ({ IndexTree }, { CompressibleObjectTree }, { AsyncDataTree }, { DataTree }, { TreeVisibility }, { iter }) => {
|
||||
function createIndexTree(opts) {
|
||||
opts = opts || {};
|
||||
|
||||
const delegate = {
|
||||
getHeight() { return 22; },
|
||||
getTemplateId() { return 'template'; },
|
||||
hasDynamicHeight() { return true; }
|
||||
};
|
||||
|
||||
const renderer = {
|
||||
templateId: 'template',
|
||||
renderTemplate(container) { return container; },
|
||||
renderElement(element, index, container) {
|
||||
if (opts.supportDynamicHeights) {
|
||||
let v = [];
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
v.push(element.element);
|
||||
}
|
||||
container.innerHTML = v.join('<br />');
|
||||
} else {
|
||||
container.innerHTML = element.element;
|
||||
}
|
||||
},
|
||||
disposeElement() { },
|
||||
disposeTemplate() { }
|
||||
};
|
||||
|
||||
const treeFilter = new class {
|
||||
constructor() {
|
||||
this.pattern = null;
|
||||
let timeout;
|
||||
filter.oninput = () => {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => this.updatePattern(), 300);
|
||||
};
|
||||
}
|
||||
updatePattern() {
|
||||
if (!filter.value) {
|
||||
this.pattern = null;
|
||||
} else {
|
||||
this.pattern = new RegExp(filter.value, 'i');
|
||||
}
|
||||
|
||||
perf('refilter', () => tree.refilter());
|
||||
}
|
||||
filter(el) {
|
||||
return (this.pattern ? this.pattern.test(el) : true) ? TreeVisibility.Visible : TreeVisibility.Recurse;
|
||||
}
|
||||
};
|
||||
|
||||
const tree = new IndexTree('test', container, delegate, [renderer], null, { ...opts, filter: treeFilter, setRowLineHeight: false });
|
||||
|
||||
return { tree, treeFilter };
|
||||
}
|
||||
|
||||
function createCompressedObjectTree(opts) {
|
||||
opts = opts || {};
|
||||
|
||||
const delegate = {
|
||||
getHeight() { return 22; },
|
||||
getTemplateId() { return 'template'; },
|
||||
hasDynamicHeight() { return true; }
|
||||
};
|
||||
|
||||
const renderer = {
|
||||
templateId: 'template',
|
||||
renderTemplate(container) { return container; },
|
||||
renderElement(element, index, container) {
|
||||
container.innerHTML = element.element.name;
|
||||
},
|
||||
renderCompressedElements(node, index, container, height) {
|
||||
container.innerHTML = `🙈 ${node.element.elements.map(el => el.name).join('/')}`;
|
||||
},
|
||||
disposeElement() { },
|
||||
disposeTemplate() { }
|
||||
};
|
||||
|
||||
const treeFilter = new class {
|
||||
constructor() {
|
||||
this.pattern = null;
|
||||
let timeout;
|
||||
filter.oninput = () => {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => this.updatePattern(), 300);
|
||||
};
|
||||
}
|
||||
updatePattern() {
|
||||
if (!filter.value) {
|
||||
this.pattern = null;
|
||||
} else {
|
||||
this.pattern = new RegExp(filter.value, 'i');
|
||||
}
|
||||
|
||||
perf('refilter', () => tree.refilter());
|
||||
}
|
||||
filter(el) {
|
||||
return (this.pattern ? this.pattern.test(el) : true) ? TreeVisibility.Visible : TreeVisibility.Recurse;
|
||||
}
|
||||
};
|
||||
|
||||
const tree = new CompressibleObjectTree('test', container, delegate, [renderer], { ...opts, filter: treeFilter, setRowLineHeight: false, collapseByDefault: true, setRowLineHeight: true });
|
||||
|
||||
return { tree, treeFilter };
|
||||
}
|
||||
|
||||
function createAsyncDataTree() {
|
||||
const delegate = {
|
||||
getHeight() { return 22; },
|
||||
getTemplateId() { return 'template'; }
|
||||
};
|
||||
|
||||
const renderer = {
|
||||
templateId: 'template',
|
||||
renderTemplate(container) { return container; },
|
||||
renderElement(node, index, container) { container.textContent = node.element.element.name; },
|
||||
disposeElement() { },
|
||||
disposeTemplate() { }
|
||||
};
|
||||
|
||||
const treeFilter = new class {
|
||||
constructor() {
|
||||
this.pattern = null;
|
||||
let timeout;
|
||||
filter.oninput = () => {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => this.updatePattern(), 300);
|
||||
};
|
||||
}
|
||||
|
||||
updatePattern() {
|
||||
if (!filter.value) {
|
||||
this.pattern = null;
|
||||
} else {
|
||||
this.pattern = new RegExp(filter.value, 'i');
|
||||
}
|
||||
|
||||
perf('refilter', () => tree.refilter());
|
||||
}
|
||||
filter(el) {
|
||||
return (this.pattern ? this.pattern.test(el.name) : true) ? TreeVisibility.Visible : TreeVisibility.Recurse;
|
||||
}
|
||||
};
|
||||
|
||||
const sorter = new class {
|
||||
compare(a, b) {
|
||||
if (a.collapsible === b.collapsible) {
|
||||
return a.name < b.name ? -1 : 1;
|
||||
}
|
||||
|
||||
return a.collapsible ? -1 : 1;
|
||||
}
|
||||
};
|
||||
|
||||
const dataSource = new class {
|
||||
hasChildren(element) {
|
||||
return element === null || element.element.type === 'dir';
|
||||
}
|
||||
getChildren(element) {
|
||||
return new Promise((c, e) => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', element ? `/api/readdir?path=${element.element.path}` : '/api/readdir');
|
||||
xhr.send();
|
||||
xhr.onreadystatechange = function () {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
const els = JSON.parse(this.responseText).map(element => ({
|
||||
element,
|
||||
collapsible: element.type === 'dir'
|
||||
}));
|
||||
|
||||
c(els);
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const identityProvider = {
|
||||
getId(node) {
|
||||
return node.element.path;
|
||||
}
|
||||
};
|
||||
|
||||
const tree = new AsyncDataTree('test', container, delegate, [renderer], dataSource, { filter: treeFilter, sorter, identityProvider });
|
||||
|
||||
return { tree, treeFilter };
|
||||
}
|
||||
|
||||
function createDataTree() {
|
||||
const delegate = {
|
||||
getHeight() { return 22; },
|
||||
getTemplateId() { return 'template'; }
|
||||
};
|
||||
|
||||
const renderer = {
|
||||
templateId: 'template',
|
||||
renderTemplate(container) { return container; },
|
||||
renderElement(node, index, container) { container.textContent = node.element.name; },
|
||||
disposeElement() { },
|
||||
disposeTemplate() { }
|
||||
};
|
||||
|
||||
const treeFilter = new class {
|
||||
constructor() {
|
||||
this.pattern = null;
|
||||
let timeout;
|
||||
filter.oninput = () => {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => this.updatePattern(), 300);
|
||||
};
|
||||
}
|
||||
|
||||
updatePattern() {
|
||||
if (!filter.value) {
|
||||
this.pattern = null;
|
||||
} else {
|
||||
this.pattern = new RegExp(filter.value, 'i');
|
||||
}
|
||||
|
||||
perf('refilter', () => tree.refilter());
|
||||
}
|
||||
filter(el) {
|
||||
return (this.pattern ? this.pattern.test(el.name) : true) ? TreeVisibility.Visible : TreeVisibility.Recurse;
|
||||
}
|
||||
};
|
||||
|
||||
const dataSource = new class {
|
||||
getChildren(element) {
|
||||
return element.children || [];
|
||||
}
|
||||
};
|
||||
|
||||
const identityProvider = {
|
||||
getId(node) {
|
||||
return node.name;
|
||||
}
|
||||
};
|
||||
|
||||
const tree = new DataTree('test', container, delegate, [renderer], dataSource, { filter: treeFilter, identityProvider });
|
||||
|
||||
tree.setInput({
|
||||
children: [
|
||||
{ name: 'A', children: [{ name: 'AA' }, { name: 'AB' }] },
|
||||
{ name: 'B', children: [{ name: 'BA', children: [{ name: 'BAA' }] }, { name: 'BB' }] },
|
||||
{ name: 'C' }
|
||||
]
|
||||
});
|
||||
|
||||
return { tree, treeFilter };
|
||||
}
|
||||
|
||||
switch (location.search) {
|
||||
case '?problems': {
|
||||
const { tree, treeFilter } = createIndexTree();
|
||||
|
||||
expandall.onclick = () => perf('expand all', () => tree.expandAll());
|
||||
collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());
|
||||
renderwidth.onclick = () => perf('renderwidth', () => tree.layoutWidth(Math.random()));
|
||||
|
||||
const files = [];
|
||||
for (let i = 0; i < 100000; i++) {
|
||||
const errors = [];
|
||||
|
||||
for (let j = 1; j <= 3; j++) {
|
||||
errors.push({ element: `error #${j} ` });
|
||||
}
|
||||
|
||||
files.push({ element: `file #${i}`, children: errors });
|
||||
}
|
||||
|
||||
perf('splice', () => tree.splice([0], 0, files));
|
||||
break;
|
||||
}
|
||||
case '?data': {
|
||||
const { tree, treeFilter } = createAsyncDataTree();
|
||||
|
||||
expandall.onclick = () => perf('expand all', () => tree.expandAll());
|
||||
collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());
|
||||
renderwidth.onclick = () => perf('renderwidth', () => tree.layoutWidth(Math.random()));
|
||||
refresh.onclick = () => perf('refresh', () => tree.updateChildren());
|
||||
|
||||
tree.setInput(null);
|
||||
|
||||
break;
|
||||
}
|
||||
case '?objectdata': {
|
||||
const { tree, treeFilter } = createDataTree();
|
||||
|
||||
expandall.onclick = () => perf('expand all', () => tree.expandAll());
|
||||
collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());
|
||||
renderwidth.onclick = () => perf('renderwidth', () => tree.layoutWidth(Math.random()));
|
||||
refresh.onclick = () => perf('refresh', () => tree.updateChildren());
|
||||
|
||||
break;
|
||||
}
|
||||
case '?compressed': {
|
||||
const { tree, treeFilter } = createCompressedObjectTree();
|
||||
|
||||
expandall.onclick = () => perf('expand all', () => tree.expandAll());
|
||||
collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', '/compressed.json');
|
||||
xhr.send();
|
||||
xhr.onreadystatechange = function () {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
tree.setChildren(null, JSON.parse(this.responseText));
|
||||
}
|
||||
};
|
||||
|
||||
break;
|
||||
}
|
||||
case '?height': {
|
||||
const { tree, treeFilter } = createIndexTree({ supportDynamicHeights: true });
|
||||
|
||||
expandall.onclick = () => perf('expand all', () => tree.expandAll());
|
||||
collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());
|
||||
renderwidth.onclick = () => perf('renderwidth', () => tree.layoutWidth(Math.random()));
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', '/api/ls?path=');
|
||||
xhr.send();
|
||||
xhr.onreadystatechange = function () {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
perf('splice', () => tree.splice([0], 0, [JSON.parse(this.responseText)]));
|
||||
treeFilter.updatePattern();
|
||||
}
|
||||
};
|
||||
|
||||
// container.
|
||||
|
||||
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
const { tree, treeFilter } = createIndexTree();
|
||||
|
||||
expandall.onclick = () => perf('expand all', () => tree.expandAll());
|
||||
collapseall.onclick = () => perf('collapse all', () => tree.collapseAll());
|
||||
renderwidth.onclick = () => perf('renderwidth', () => tree.layoutWidth(Math.random()));
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', '/api/ls?path=');
|
||||
xhr.send();
|
||||
xhr.onreadystatechange = function () {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
perf('splice', () => tree.splice([0], 0, [JSON.parse(this.responseText)]));
|
||||
treeFilter.updatePattern();
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user