feat: added drag node toggle for filetree component
Signed-off-by: mellobacon <mellodev@outlook.com>
mellobacon committed
Nov 5, 2023 at 16:44 UTC
234631cf7d9dee5dc3b8bdbe5d17762628141c75
4 files changed
+11
-9
src/lib/FileTree.svelte
+1
-1
@@ -59,7 +59,7 @@
59
<button class="toolbar-button" on:click={async () => {await openFolder()}}>Open Folder</button>
60
</div>
61
{:else}
62
- <FileTreeView tree={$filetree} on:nodeselect={handleSelect} on:dblnodeselect={handleDblSelect} on:rightclick={handleClick} contextMenuEnabled></FileTreeView>
62
+ <FileTreeView tree={$filetree} on:nodeselect={handleSelect} on:dblnodeselect={handleDblSelect} on:rightclick={handleClick} contextMenuEnabled canDrag></FileTreeView>
63
{/if}
64
65
{#if treeDom && contextmenu}
src/lib/FileTree/FileTreeList.svelte
+6
-5
@@ -27,6 +27,7 @@
27
export let contextMenuEnabled;
28
export let iconsEnabled;
29
export let isExpanded;
30
+ export let canDrag = false;
31
32
let expanded = _expansionState[name] || false;
33
let ref = null;
@@ -172,15 +173,15 @@
173
{#if root}
174
{#each children as child}
175
{#if Array.isArray(child.children)}
175
- <svelte:self on:nodeselect on:dblnodeselect isroot={root} {...child} {contextMenuEnabled} {iconsEnabled} {isExpanded}></svelte:self>
176
+ <svelte:self {canDrag} on:nodeselect on:dblnodeselect isroot={root} {...child} {contextMenuEnabled} {iconsEnabled} {isExpanded}></svelte:self>
177
{:else}
177
- <FileTreeNode on:nodeselect on:dblnodeselect {...child} {contextMenuEnabled} {iconsEnabled}/>
178
+ <FileTreeNode {canDrag} on:nodeselect on:dblnodeselect {...child} {contextMenuEnabled} {iconsEnabled}/>
179
{/if}
180
{/each}
181
{:else}
182
<li id={`filetree-node-${id}`} bind:this={ref} class="treenode" class:root={isroot} on:dragenter|stopPropagation={dragenter} on:dragleave|stopPropagation={dragleave} on:dragend|stopPropagation={dragleave} title={path}>
183
<!-- svelte-ignore a11y-click-events-have-key-events -->
183
- <div bind:this={refLabel} data-id={id} class:selected class="tree-label" data-nodetype="directory" on:click={toggleExpansion} on:dragover|preventDefault on:drop|stopPropagation={drop} draggable={isroot === false} on:dragstart={dragstart} on:mouseup={(e) => {
184
+ <div bind:this={refLabel} data-id={id} class:selected class="tree-label" data-nodetype="directory" on:click={toggleExpansion} on:dragover|preventDefault on:drop|stopPropagation={drop} draggable={isroot === false && canDrag} on:dragstart={dragstart} on:mouseup={(e) => {
185
if (e.button === 2 && contextMenuEnabled) {
186
contextmenu = true;
187
}
@@ -195,9 +196,9 @@
196
<ul role="group" bind:this={refChildren} data-id={id} class="tree-children" on:dragover|preventDefault on:drop|stopPropagation={drop}>
197
{#each children as child (child.id) }
198
{#if Array.isArray(child.children)}
198
- <svelte:self on:nodeselect on:dblnodeselect {...child} {contextMenuEnabled} {iconsEnabled} {isExpanded}></svelte:self>
199
+ <svelte:self {canDrag} on:nodeselect on:dblnodeselect {...child} {contextMenuEnabled} {iconsEnabled} {isExpanded}></svelte:self>
200
{:else}
200
- <FileTreeNode on:nodeselect on:dblnodeselect {...child} {contextMenuEnabled} {iconsEnabled} />
201
+ <FileTreeNode {canDrag} on:nodeselect on:dblnodeselect {...child} {contextMenuEnabled} {iconsEnabled} />
202
{/if}
203
{/each}
204
</ul>
src/lib/FileTree/FileTreeNode.svelte
+2
-1
@@ -28,6 +28,7 @@
28
export let path;
29
export let contextMenuEnabled;
30
export let iconsEnabled;
31
+ export let canDrag = false;
32
33
let selected = false;
34
@@ -99,7 +100,7 @@
100
<div bind:this={refLabel} class="tree-label" class:selected
101
on:click={(e) => {handleSelect(treenode, e)}}
102
on:dblclick={(e) => {handleDoubleSelect(treenode, e)}}
102
- draggable={true} on:dragstart={dragstart} on:mouseup={(e) => {
103
+ draggable={canDrag} on:dragstart={dragstart} on:mouseup={(e) => {
104
if (e.button === 2 && contextMenuEnabled) {
105
contextmenu = true;
106
handleSelect(treenode, e);
src/lib/FileTree/FileTreeView.svelte
+2
-2
@@ -6,13 +6,13 @@
6
7
<script lang="ts">
8
import { createEventDispatcher, onMount } from "svelte";
9
-
9
import FileTreeList from "./FileTreeList.svelte";
10
11
export let tree;
12
export let contextMenuEnabled = false;
13
export let isExpanded = false;
14
export let iconsEnabled = true;
15
+ export let canDrag = false;
16
17
let ref;
18
let dispatch = createEventDispatcher();
@@ -35,7 +35,7 @@
35
</script>
36
37
<ul bind:this={ref} class="tree" role="tree" on:mouseup={handleMouseUp}>
38
- <FileTreeList {isExpanded} on:nodeselect on:dblnodeselect children={tree} root {contextMenuEnabled} {iconsEnabled} />
38
+ <FileTreeList {canDrag} {isExpanded} on:nodeselect on:dblnodeselect children={tree} root {contextMenuEnabled} {iconsEnabled} />
39
</ul>
40
41
<style>