feature: added context menu to overall tree
right click on the blank space of the tree refers to the root node in the context menu
mellbacon committed
May 17, 2023 at 14:09 UTC
a393e3c1f543a3027a6c4315809897627f9a3c73
3 files changed
+52
-3
src/lib/FileTree.svelte
+27
-1
@@ -1,6 +1,28 @@
1
<script lang="ts">
2
import FileTreeView from "./FileTree/FileTreeView.svelte";
3
+ import ContextMenu from "./utility/ContextMenu.svelte";
4
+ let treeDom;
5
+ let contextmenu = false;
6
7
+ function handleClick(e) {
8
+ treeDom = e.detail.target;
9
+ console.log($filetree[0]);
10
+ contextmenu = e.detail.contextmenu;
11
+ }
12
+ function handleSelect(e) {
13
+ console.log(e.detail.node);
14
+ }
15
+
16
+ let contextmenuitems = [
17
+ {name: "Open in File Explorer", shortcut: "", action: () => {console.log("click")}},
18
+ {name: "Copy", shortcut: "Ctrl + C", action: () => {console.log("click")}},
19
+ {name: "Cut", shortcut: "Ctrl + X", action: () => {console.log("click")}},
20
+ {name: "Paste", shortcut: "Ctrl + X", disabled: true, action: () => {console.log("click")}},
21
+ {name: "Copy Filename", shortcut: "", action: () => {console.log("click")}},
22
+ {name: "Copy Absolute Path", shortcut: "", action: () => {console.log("click")}},
23
+ {name: "Rename...", shortcut: "F2", disabled: true, action: () => {console.log("click")}},
24
+ {name: "Delete", shortcut: "Delete", action: () => {console.log("click")}}
25
+ ]
26
</script>
27
28
<script lang="ts" context="module">
@@ -32,8 +54,12 @@
54
<button class="toolbar-button">Open Folder</button>
55
</div>
56
{:else}
35
-<FileTreeView tree={$filetree} on:nodeselect={(e) => {console.log(e.detail.node)}}></FileTreeView>
57
+ <FileTreeView tree={$filetree} on:nodeselect={handleSelect} on:rightclick={handleClick}></FileTreeView>
58
{/if}
59
+{#if treeDom && contextmenu}
60
+ <ContextMenu target={treeDom} items={contextmenuitems}></ContextMenu>
61
+{/if}
62
+
63
64
<style lang="scss">
65
.toolbar-button {
src/lib/FileTree/FileTreeView.svelte
+24
-2
@@ -5,12 +5,33 @@
5
</script>
6
7
<script lang="ts">
8
- import FileTreeList from "./FileTreeList.svelte";
8
+ import { createEventDispatcher } from "svelte";
9
10
+ import FileTreeList from "./FileTreeList.svelte";
11
+
12
export let tree;
13
+
14
+ let ref;
15
+ let dispatch = createEventDispatcher();
16
+
17
+ let contextmenu = false;
18
+ function handleMouseUp(e) {
19
+ let x = null;
20
+ if (e.button === 2) {
21
+ if (e.target === ref) {
22
+ x = ref;
23
+ contextmenu = true;
24
+ }
25
+ else {
26
+ x = null;
27
+ contextmenu = false;
28
+ }
29
+ dispatch("rightclick", {target: x, contextmenu: contextmenu});
30
+ }
31
+ }
32
</script>
33
13
-<ul class="tree" role="tree">
34
+<ul bind:this={ref} class="tree" role="tree" on:mouseup={handleMouseUp}>
35
<FileTreeList on:nodeselect children={tree} root />
36
</ul>
37
@@ -23,5 +44,6 @@
44
.tree {
45
width: 100%;
46
padding: 10px 0;
47
+ height: -webkit-fill-available;
48
}
49
</style>
src/lib/SidebarView.svelte
+1
@@ -19,6 +19,7 @@
19
#tool-view {
20
width: 100%;
21
overflow-y: auto;
22
+ height: 100%;
23
&::-webkit-scrollbar {
24
width: 12px;
25
}