chore: added dbl select custom event
mellbacon committed
May 21, 2023 at 14:29 UTC
2f3eed1466c41f354c09be0c077a3794f1454d3c
3 files changed
+21
-6
src/lib/FileTree/FileTreeList.svelte
+4
-4
@@ -128,9 +128,9 @@
128
{#if root}
129
{#each children as child}
130
{#if Array.isArray(child.children)}
131
- <svelte:self on:nodeselect isroot={root} {...child}></svelte:self>
131
+ <svelte:self on:nodeselect on:dblnodeselect isroot={root} {...child}></svelte:self>
132
{:else}
133
- <FileTreeNode on:nodeselect {...child} />
133
+ <FileTreeNode on:nodeselect on:dblnodeselect {...child} />
134
{/if}
135
{/each}
136
{:else}
@@ -151,9 +151,9 @@
151
<ul role="group" bind:this={refChildren} data-id={id} class="tree-children" on:dragover|preventDefault on:drop|stopPropagation={drop}>
152
{#each children as child (child.id) }
153
{#if Array.isArray(child.children)}
154
- <svelte:self on:nodeselect {...child}></svelte:self>
154
+ <svelte:self on:nodeselect on:dblnodeselect {...child}></svelte:self>
155
{:else}
156
- <FileTreeNode on:nodeselect {...child} />
156
+ <FileTreeNode on:nodeselect on:dblnodeselect {...child} />
157
{/if}
158
{/each}
159
</ul>
src/lib/FileTree/FileTreeNode.svelte
+16
-1
@@ -61,6 +61,18 @@
61
}
62
}
63
64
+ function handleDoubleSelect(node, event) {
65
+ for (let nodes of document.getElementsByClassName("tree-label")) {
66
+ nodes.classList.remove("selected")
67
+ }
68
+ if (event.target === refLabel) {
69
+ event.target.classList.add("selected")
70
+ }
71
+ if (!contextmenu) {
72
+ dispatch("dblnodeselect", {node});
73
+ }
74
+ }
75
+
76
$: if (refLabel) {
77
refLabel.style.marginLeft = `-${offset()}rem`;
78
refLabel.style.paddingLeft = `${offset()}rem`;
@@ -77,7 +89,10 @@
89
90
<li id={`filetree-node-${id}`} bind:this={ref} class="treenode" title={path}>
91
<!-- svelte-ignore a11y-click-events-have-key-events -->
80
- <div bind:this={refLabel} class="tree-label" class:selected on:click={(e) => {handleSelect(treenode, e)}} draggable={true} on:dragstart={dragstart} on:mouseup={(e) => {
92
+ <div bind:this={refLabel} class="tree-label" class:selected
93
+ on:click={(e) => {handleSelect(treenode, e)}}
94
+ on:dblclick={(e) => {handleDoubleSelect(treenode, e)}}
95
+ draggable={true} on:dragstart={dragstart} on:mouseup={(e) => {
96
if (e.button === 2) {
97
contextmenu = true;
98
handleSelect(treenode, e);
src/lib/FileTree/FileTreeView.svelte
+1
-1
@@ -32,7 +32,7 @@
32
</script>
33
34
<ul bind:this={ref} class="tree" role="tree" on:mouseup={handleMouseUp}>
35
- <FileTreeList on:nodeselect children={tree} root />
35
+ <FileTreeList on:nodeselect on:dblnodeselect children={tree} root />
36
</ul>
37
38
<style>