Filetree rewrite
mellobacon committed
Nov 25, 2022 at 03:48 UTC
573ba92645ce4ff2b526685d61136b167b467ab8
4 files changed
+24
-9
src/components/FileTree/Tree.svelte
+9
-1
@@ -6,8 +6,13 @@
6
import { onMount } from "svelte";
7
import { filetree, workspacename } from "./scripts/TreeStore";
8
import { data, workspace } from "./scripts/TreeData";
9
+ import { addFileTab } from "../Content/Editor/scripts/Tab";
10
let treeview = null;
11
let tree = $filetree;
12
+
13
+ async function openTab(event) {
14
+ await addFileTab(event.detail.path);
15
+ }
16
onMount(() => {
17
tree = $filetree;
18
filetree.subscribe(t => tree = t);
@@ -17,9 +22,11 @@
22
</script>
23
24
<div id="explorer-toolbar">
25
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
26
<div class="toolbar-button" on:click={treeview?.collapseAll}>
27
<ArrowUp />
28
</div>
29
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
30
<div class="toolbar-button" on:click={ async() => {if (tree.length > 0) await updateTree();}}>
31
<WatsonHealthRotate_360 />
32
</div>
@@ -30,6 +37,7 @@
37
<div class="text-form">
38
You have not yet opened a folder.
39
</div>
40
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
41
<div class="toolbar-button-mx" on:click ={async() => {
42
let treedata = await data();
43
if (treedata === undefined) return;
@@ -40,7 +48,7 @@
48
</div>
49
{/if}
50
43
-<TreeView bind:this={treeview} size="compact" hideLabel children={tree}></TreeView>
51
+<TreeView dblclick bind:this={treeview} size="compact" hideLabel children={tree} on:select={openTab}></TreeView>
52
53
54
<style>
src/components/FileTree/TreeView.svelte
+3
-1
@@ -44,6 +44,8 @@
44
/** Set to `true` to visually hide the label text */
45
export let hideLabel = false;
46
47
+ export let dblclick = false;
48
+
49
/**
50
* Programmatically expand all nodes
51
* @type {() => void}
@@ -159,5 +161,5 @@
161
aria-multiselectable={selectedIds.length > 1 || undefined}
162
on:keydown
163
>
162
- <TreeViewNodeList root {children} />
164
+ <TreeViewNodeList root {dblclick} {children} />
165
</ul>
src/components/FileTree/TreeViewNode.svelte
+6
-3
@@ -32,6 +32,7 @@
32
export let id = "";
33
export let name = "";
34
export let disabled = false;
35
+ export let dblclick = false;
36
export let path = "";
37
38
/**
@@ -86,11 +87,13 @@
87
class:bx--tree-node--disabled={disabled}
88
class:bx--tree-node--with-icon={icon}
89
on:click|stopPropagation={() => {
89
- if (disabled) return;
90
+ selectNode(node);
91
+ if (disabled || dblclick) return;
92
clickNode(node);
93
}}
92
- on:dblclick={async () => {
93
- await addFileTab(path);
94
+ on:dblclick|stopPropagation={() => {
95
+ if (disabled || !dblclick) return;
96
+ clickNode(node);
97
}}
98
on:keydown={(e) => {
99
if (
src/components/FileTree/TreeViewNodeList.svelte
+6
-4
@@ -13,6 +13,7 @@
13
export let id = "";
14
export let name = "";
15
export let disabled = false;
16
+ export let dblclick = false;
17
export let path = "";
18
19
/**
@@ -70,9 +71,9 @@
71
{#if root}
72
{#each children as child (child.id)}
73
{#if Array.isArray(child.children)}
73
- <svelte:self {...child} />
74
+ <svelte:self {dblclick} {...child} />
75
{:else}
75
- <TreeViewNode leaf {...child} />
76
+ <TreeViewNode leaf {dblclick} {...child} />
77
{/if}
78
{/each}
79
{:else}
@@ -117,6 +118,7 @@
118
focusNode(node);
119
}}
120
>
121
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
122
<div class:bx--tree-node__label={true} bind:this={refLabel}
123
on:click={() => {
124
if (disabled) return;
@@ -139,9 +141,9 @@
141
<ul role="group" class:bx--tree-node__children={true}>
142
{#each children as child (child.id)}
143
{#if Array.isArray(child.children)}
142
- <svelte:self {...child} />
144
+ <svelte:self {dblclick} {...child} />
145
{:else}
144
- <TreeViewNode leaf {...child} />
146
+ <TreeViewNode leaf {dblclick} {...child} />
147
{/if}
148
{/each}
149
</ul>