Skip to content

Tree helper improvements #465

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bendera merged 11 commits into from
Jul 19, 2025
Merged

Tree helper improvements #465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1f03ee8
Rewrite findPrevItem()
bendera Jul 15, 2025
27f48ed
Shorter timeout
bendera Jul 15, 2025
22e7d07
Add edge case to demo page
bendera Jul 15, 2025
8e8010e
Optimize the next item selection logic
bendera Jul 16, 2025
b0917b3
Polish the docs
bendera Jul 16, 2025
d299e9a
Optimize the initial render
bendera Jul 16, 2025
0bba2f9
Add custom styles demo
bendera Jul 16, 2025
13471a0
Add custom state
bendera Jul 16, 2025
52b83e5
Add missing #endregion
bendera Jul 17, 2025
fc102bb
Rename
bendera Jul 19, 2025
d48dfcb
Prettier fix
bendera Jul 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion dev/vscode-tree/basic-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,9 @@ <h1>Basic example</h1>
Tuition
<vscode-tree-item>Undergraduate</vscode-tree-item>
<vscode-tree-item>Graduate</vscode-tree-item>
<vscode-tree-item>Professional Schools</vscode-tree-item>
<vscode-tree-item branch open
>Professional Schools</vscode-tree-item
>
</vscode-tree-item>
<vscode-tree-item>Sign Up</vscode-tree-item>
<vscode-tree-item>Visit</vscode-tree-item>
Expand Down
103 changes: 103 additions & 0 deletions dev/vscode-tree/custom-styles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VSCode Elements</title>
<link
rel="stylesheet"
href="/node_modules/@vscode/codicons/dist/codicon.css"
id="vscode-codicon-stylesheet"
>
<script
type="module"
src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
></script>
<script type="module" src="/dist/main.js"></script>
<script>
const logEvents = (selector, eventType) => {
document.querySelector(selector).addEventListener(eventType, (ev) => {
console.log(ev);
});
};
</script>
<style>
vscode-tree {
--vscode-list-activeSelectionBackground: transparent;
--vscode-list-inactiveSelectionBackground: transparent;
--vscode-list-hoverBackground: transparent;
}

vscode-tree-item:state(active) > span {
font-weight: bold;
}

vscode-tree-item:hover > span {
opacity: 0.7;
}
</style>
</head>

<body>
<h1>Custom styles</h1>
<main>
<vscode-demo>
<vscode-tree indent-guides="none">
<vscode-tree-item><span>Home</span></vscode-tree-item>
<vscode-tree-item>
<span>About</span>
<vscode-tree-item><span>Overview</span></vscode-tree-item>
<vscode-tree-item><span>Administration</span></vscode-tree-item>
<vscode-tree-item>
<span>Facts</span>
<vscode-tree-item><span>History</span></vscode-tree-item>
<vscode-tree-item
><span>Current Statistics</span></vscode-tree-item
>
<vscode-tree-item><span>Awards</span></vscode-tree-item>
</vscode-tree-item>
<vscode-tree-item>
<span>Campus Tours</span>
<vscode-tree-item
><span>For Prospective Students</span></vscode-tree-item
>
<vscode-tree-item><span>For Alumni</span></vscode-tree-item>
<vscode-tree-item><span>For Visitors</span></vscode-tree-item>
</vscode-tree-item>
</vscode-tree-item>
<vscode-tree-item>
<span>Admissions</span>
<vscode-tree-item><span>Apply</span></vscode-tree-item>
<vscode-tree-item>
<span>Tuition</span>
<vscode-tree-item><span>Undergraduate</span></vscode-tree-item>
<vscode-tree-item><span>Graduate</span></vscode-tree-item>
<vscode-tree-item
><span>Professional Schools</span></vscode-tree-item
>
</vscode-tree-item>
<vscode-tree-item><span>Sign Up</span></vscode-tree-item>
<vscode-tree-item><span>Visit</span></vscode-tree-item>
<vscode-tree-item><span>Photo Tour</span></vscode-tree-item>
<vscode-tree-item><span>Connect</span></vscode-tree-item>
</vscode-tree-item>
<vscode-tree-item>
<span>Academics</span>
<vscode-tree-item
><span>Colleges &amp; Schools</span></vscode-tree-item
>
<vscode-tree-item><span>Programs of Study</span></vscode-tree-item>
<vscode-tree-item><span>Honors Programs</span></vscode-tree-item>
<vscode-tree-item><span>Online Courses</span></vscode-tree-item>
<vscode-tree-item><span>Course Explorer</span></vscode-tree-item>
<vscode-tree-item
><span>Register for Classes</span></vscode-tree-item
>
<vscode-tree-item><span>Academic Calendar</span></vscode-tree-item>
<vscode-tree-item><span>Transcripts</span></vscode-tree-item>
</vscode-tree-item>
</vscode-tree>
</vscode-demo>
</main>
</body>
</html>
4 changes: 4 additions & 0 deletions src/vscode-tree-item/vscode-tree-item.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ export class VscodeTreeItem extends VscElement {
//#region private variables

private _path: number[] = [];
private _internals: ElementInternals;

@state()
private _hasBranchIcon = false;
Expand Down Expand Up @@ -138,6 +139,7 @@ export class VscodeTreeItem extends VscElement {
constructor() {
super();

this._internals = this.attachInternals();
this.addEventListener('focus', this._handleComponentFocus);
}

Expand Down Expand Up @@ -194,13 +196,15 @@ export class VscodeTreeItem extends VscElement {
this._treeContextState.activeItem = this;
this._setHasActiveItemFlagOnParent(this, true);
this.tabIndex = 0;
this._internals.states.add('active');
} else {
if (this._treeContextState.activeItem === this) {
this._treeContextState.activeItem = null;
this._setHasActiveItemFlagOnParent(this, false);
}

this.tabIndex = -1;
this._internals.states.delete('active');
}
}

Expand Down
129 changes: 129 additions & 0 deletions src/vscode-tree/helpers.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
import {expect, fixture, html} from '@open-wc/testing';
import {findLastChildItem, findPrevItem} from './helpers';
import {VscodeTreeItem} from '../vscode-tree-item';
import '../vscode-tree-item/vscode-tree-item.js';
import {VscodeTree} from './vscode-tree';
import './vscode-tree.js';

describe('vscode-tree helpers', () => {
describe('findPrevItem()', () => {
it('returns null if does not have parent element', () => {
const el = document.createElement('vscode-tree-item');

expect(findPrevItem(el)).to.be.null;
});

it('returns null if item is not tree item', () => {
const el = document.createElement('span');

expect(findPrevItem(el as VscodeTreeItem)).to.be.null;
});

it('returns previous sibling', async () => {
const el = await fixture(html`
<vscode-tree>
<vscode-tree-item id="item1">1</vscode-tree-item>
<vscode-tree-item id="item2">2</vscode-tree-item>
</vscode-tree>
`);

const item1 = el.querySelector<VscodeTreeItem>('#item1')!;
const item2 = el.querySelector<VscodeTreeItem>('#item2')!;

expect(findPrevItem(item2)).to.eq(item1);
});

it('returns previous tree item', async () => {
const el = await fixture(html`
<vscode-tree>
<vscode-tree-item id="item1">1</vscode-tree-item>
<div>aaa</div>
<vscode-tree-item id="item2">2</vscode-tree-item>
</vscode-tree>
`);

const item1 = el.querySelector<VscodeTreeItem>('#item1')!;
const item2 = el.querySelector<VscodeTreeItem>('#item2')!;

expect(findPrevItem(item2)).to.eq(item1);
});

it('returns the previous closed branch', async () => {
const el = await fixture(html`
<vscode-tree>
<vscode-tree-item id="item1">
1
<vscode-tree-item>1.1</vscode-tree-item>
<vscode-tree-item>1.2</vscode-tree-item>
</vscode-tree-item>
<vscode-tree-item id="item2">2</vscode-tree-item>
</vscode-tree>
`);

const item1 = el.querySelector<VscodeTreeItem>('#item1')!;
const item2 = el.querySelector<VscodeTreeItem>('#item2')!;

expect(findPrevItem(item2)).to.eq(item1);
});

it('returns last children of the opened branch', async () => {
const el = await fixture<VscodeTree>(html`
<vscode-tree>
<vscode-tree-item id="item1" open>
1
<vscode-tree-item id="item1_1">1.1</vscode-tree-item>
<vscode-tree-item id="item1_2">1.2</vscode-tree-item>
</vscode-tree-item>
<vscode-tree-item id="item2">2</vscode-tree-item>
</vscode-tree>
`);

const item2 = el.querySelector<VscodeTreeItem>('#item2')!;
const item1_2 = el.querySelector<VscodeTreeItem>('#item1_2')!;

expect(findPrevItem(item2)).to.eq(item1_2);
});

it('returns last children of the nested opened branch', async () => {
const el = await fixture<VscodeTree>(html`
<vscode-tree>
<vscode-tree-item open>
1
<vscode-tree-item>1.1</vscode-tree-item>
<vscode-tree-item open>
1.2
<vscode-tree-item>1.2.1</vscode-tree-item>
<vscode-tree-item id="item1_2_2">1.2.2</vscode-tree-item>
</vscode-tree-item>
</vscode-tree-item>
<vscode-tree-item id="item2">2</vscode-tree-item>
</vscode-tree>
`);

const item2 = el.querySelector<VscodeTreeItem>('#item2')!;
const item1_2_2 = el.querySelector<VscodeTreeItem>('#item1_2_2')!;

expect(findPrevItem(item2)).to.eq(item1_2_2);
});
});

describe('findLastChildItem()', () => {
it('returns the last child item', async () => {
const el = await fixture(html`
<vscode-tree>
<vscode-tree-item id="item1" open>
1
<vscode-tree-item>1.1</vscode-tree-item>
<vscode-tree-item id="item1_2">1.2</vscode-tree-item>
</vscode-tree-item>
<vscode-tree-item>2</vscode-tree-item>
</vscode-tree>
`);

const item1 = el.querySelector<VscodeTreeItem>('#item1')!;
const item1_2 = el.querySelector<VscodeTreeItem>('#item1_2')!;

expect(findLastChildItem(item1)).to.eq(item1_2);
});
});
});
Loading