| 1 | <script lang="ts"> |
| 2 | import FileTreeView from "./FileTree/FileTreeView.svelte"; |
| 3 | import ContextMenu from "./utility/ContextMenu.svelte"; |
| 4 | import { addEditorTab } from "./EditorTabList.svelte"; |
| 5 | import { openFolderDialog, pasteFile } from "./File"; |
| 6 | import { } from "@tauri-apps/api"; |
| 7 | import Button from "./utility/Button.svelte"; |
| 8 | import { commands } from "../config/commands"; |
| 9 | import { writeText } from "@tauri-apps/plugin-clipboard-manager"; |
| 10 | |
| 11 | let treeDom; |
| 12 | let contextmenu = false; |
| 13 | |
| 14 | let path = null; |
| 15 | let name = null; |
| 16 | |
| 17 | function handleClick(e) { |
| 18 | treeDom = e.detail.target; |
| 19 | path = $filetree[0].path; |
| 20 | name = $filetree[0].name; |
| 21 | contextmenu = e.detail.contextmenu; |
| 22 | } |
| 23 | function handleSelect(e) { |
| 24 | //console.log(e.detail.node) |
| 25 | } |
| 26 | function handleDblSelect(e) { |
| 27 | addEditorTab(e.detail.node.path, e.detail.node.name); |
| 28 | } |
| 29 | |
| 30 | let contextmenuitems = [ |
| 31 | {name: "Open in File Explorer", shortcut: "", action: async () => commands.openInExplorer.command(path)}, |
| 32 | {name: "New Folder...", shortcut: "", action: () => commands.createFolder.command(path)}, |
| 33 | {name: "New File...", shortcut: "", action: () => {commands.createFile.command(path)}}, |
| 34 | {name: "Copy", shortcut: "Ctrl + C", action: async () => {await writeText(path)}}, |
| 35 | {name: "Cut", disabled: true, shortcut: "Ctrl + X", action: () => {console.warn("Feature not implemented yet.")}}, |
| 36 | {name: "Paste", shortcut: "Ctrl + V", action: async () => {await pasteFile(path)}}, |
| 37 | {name: "Copy Filename", shortcut: "", action: async () => {await writeText(name)}}, |
| 38 | {name: "Rename...", shortcut: "F2", disabled: true, action: () => {console.warn("Feature not implemented yet.")}}, |
| 39 | {name: "Delete", disabled: true, shortcut: "Delete", action: () => {console.warn("Feature not implemented yet.")}} |
| 40 | ] |
| 41 | </script> |
| 42 | |
| 43 | <script lang="ts" context="module"> |
| 44 | import { writable } from "svelte/store"; |
| 45 | |
| 46 | export let filetree = writable([]); |
| 47 | </script> |
| 48 | |
| 49 | {#if $filetree.length === 0} |
| 50 | <div class="container"> |
| 51 | <span>No folder/workspace open</span> |
| 52 | <Button _class="toolbar-button" style="secondary" label="Open Folder" on:click={async () => {await openFolderDialog()}} /> |
| 53 | </div> |
| 54 | {:else} |
| 55 | <FileTreeView tree={$filetree} on:nodeselect={handleSelect} on:dblnodeselect={handleDblSelect} on:rightclick={handleClick} contextMenuEnabled canDrag></FileTreeView> |
| 56 | {/if} |
| 57 | |
| 58 | {#if treeDom && contextmenu} |
| 59 | <ContextMenu target={treeDom} items={contextmenuitems}></ContextMenu> |
| 60 | {/if} |
| 61 | |
| 62 | |
| 63 | <style lang="scss"> |
| 64 | :global(.toolbar-button) { |
| 65 | font-family: inherit; |
| 66 | text-align: center; |
| 67 | padding: 7px 30px; |
| 68 | margin-top: 10px; |
| 69 | margin-bottom: 5px; |
| 70 | display: inline-block; |
| 71 | cursor: pointer; |
| 72 | padding: 5px 25px; |
| 73 | font-size: 0.875rem; |
| 74 | border-radius: 2px; |
| 75 | &:focus { |
| 76 | outline-color: #2276b2; |
| 77 | } |
| 78 | } |
| 79 | |
| 80 | .container { |
| 81 | display:flex; |
| 82 | flex-direction:column; |
| 83 | align-items: center; |
| 84 | justify-content:center; |
| 85 | min-height: 70vh; |
| 86 | margin-top: 10px; |
| 87 | margin-bottom: 5px; |
| 88 | &>span { |
| 89 | margin-top: 10px; |
| 90 | margin-bottom: 5px; |
| 91 | text-align: center; |
| 92 | font-size: 0.875rem; |
| 93 | } |
| 94 | } |
| 95 | </style> |