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