Merge pull request #88 from mellobacon/master

Alpha v0.2

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "nucleus"
-version = "0.1.1"
+version = "0.2.0"
 description = "A Tauri App"
 authors = ["mellobacon"]
 license = ""

src/lib/File.ts

@@ -12,37 +12,87 @@ export async function openFile() {
 }
 
 export const workspaceName = writable("Untitled Workspace");
+export const dirToLoad =  writable("");
+export const dirLoadFail = writable(false);
 export async function openFolder() {
+    dirLoadFail.set(false);
     let directory = await dialog.open({directory: true}) as string;
     if (!directory) return;
-
+    dirToLoad.set(directory.split(path.sep).pop());
     // if file path is not in the configured scope already, add it
     // TODO: should configure this so it doesnt access restricted paths based on user permissions
     await invoke("attempt_file_access", {app_handle: window, p: directory});
 
     const directoryName = await updateTree(directory);
-    workspaceName.set(directoryName);
-
+    if (!directoryName) {
+        return;
+    }
     // load file watcher
     await watch(
         directory,
-        async () => {
-            await updateTree(directory);
+        () => {
+            updateTree(directory);
         },
         { recursive: true }
     )
+
+    workspaceName.set(directoryName);
 }
 
+export const treeLoading = writable(false);
+let progressTimeout = null;
+let loadInterval = null;
 async function updateTree(directory) {
-    let tree: any = await fs.readDir(directory, {recursive: true});
-    if (!tree) {
+    let loadTime = 0;
+
+    clearTimeout(progressTimeout);
+    clearInterval(loadInterval);
+    treeLoading.set(true);
+    loadInterval = setInterval(() => {loadTime++}, 1000)
+    let tree;
+    try {
+        tree = await fs.readDir(directory, {recursive: true});
+    } catch (error) {
+        console.error(error);
+    }
+    if (!tree || tree === undefined) {
         console.error("Cannot load directory");
-        return;
+
+        clearInterval(loadInterval);
+
+        dirLoadFail.set(true);
+        dirToLoad.set("Cannot load directory");
+
+        progressTimeout = setTimeout(() => {
+            treeLoading.set(false);
+        }, 5000)
+        return null;
+    }
+    if (loadTime > 100) {
+        console.error(`Directory load time was too long. Aborting...`);
+        console.warn(`Cancelled load after ${loadTime} seconds`);
+        clearInterval(loadInterval);
+
+        dirLoadFail.set(true);
+        dirToLoad.set("Error: Directory load timeout.");
+
+        progressTimeout = setTimeout(() => {
+            treeLoading.set(false);
+        }, 5000)
+        return null;
     }
-    let directoryName = directory.split(path.sep).pop();
+    let directoryName = get(dirToLoad);
     tree = [{id: -1, name: directoryName, path: directory, children: buildTree(sortTree(tree))}];
     filetree.set(tree);
+    clearInterval(loadInterval);
+    if (loadTime < 45) {
+        console.log(`Directory load time: ${loadTime < 1 ? "less than 1" : loadTime}s`);
+    }
+    else {
+        console.warn(`Directory load time: ${loadTime < 1 ? "less than 1" : loadTime}s`);
+    }
     id = 0;
+    treeLoading.set(false);
     return directoryName;
 }
 

src/lib/FileTree/FileTreeList.svelte

@@ -14,6 +14,7 @@
     import { clipboard } from "@tauri-apps/api";
     import { openInputModal, openRenameModal } from "../../App.svelte";
     import { path as p } from "@tauri-apps/api";
+    import { onMount } from "svelte";
 
     export let root = false;
     export let isroot = false;
@@ -24,8 +25,9 @@
     export let children = [];
     export let contextMenuEnabled;
     export let iconsEnabled;
+    export let isExpanded;
 
-    export let expanded = _expansionState[name] || false;
+    let expanded = _expansionState[name] || false;
     let ref = null;
     let refLabel = null;
     let refChildren = null;
@@ -59,6 +61,11 @@
         {name: "Delete", disabled: isroot, shortcut: "Delete", action:  async () => {await moveToTrash(path)}}
     ]
 
+    onMount(() => {
+        if (isExpanded) {
+            expanded = _expansionState[name] = !expanded;
+        }
+    })
     function findNode(nodeid, tree = null) {
         if (!tree) {
             tree = $filetree;
@@ -162,7 +169,7 @@
 {#if root}
     {#each children as child}
         {#if Array.isArray(child.children)}
-            <svelte:self on:nodeselect on:dblnodeselect isroot={root} {...child} {contextMenuEnabled} {expanded} {iconsEnabled}></svelte:self>
+            <svelte:self on:nodeselect on:dblnodeselect isroot={root} {...child} {contextMenuEnabled} {iconsEnabled} {isExpanded}></svelte:self>
         {:else}
             <FileTreeNode on:nodeselect on:dblnodeselect {...child} {contextMenuEnabled} {iconsEnabled}/>
         {/if}
@@ -185,7 +192,7 @@
             <ul role="group" bind:this={refChildren} data-id={id} class="tree-children" on:dragover|preventDefault on:drop|stopPropagation={drop}>
                 {#each children as child (child.id) }
                     {#if Array.isArray(child.children)}
-                        <svelte:self on:nodeselect on:dblnodeselect {...child} {contextMenuEnabled} {expanded} {iconsEnabled}></svelte:self>
+                        <svelte:self on:nodeselect on:dblnodeselect {...child} {contextMenuEnabled} {iconsEnabled} {isExpanded}></svelte:self>
                     {:else}
                         <FileTreeNode on:nodeselect on:dblnodeselect {...child} {contextMenuEnabled} {iconsEnabled} />
                     {/if}

src/lib/FileTree/FileTreeView.svelte

@@ -5,13 +5,13 @@
 </script>
 
 <script lang="ts">
-    import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
 
     import FileTreeList from "./FileTreeList.svelte";
     
     export let tree;
     export let contextMenuEnabled = false;
-    export let expanded = false;
+    export let isExpanded = false;
     export let iconsEnabled = true;
 
     let ref;
@@ -35,7 +35,7 @@
 </script>
 
 <ul bind:this={ref} class="tree" role="tree" on:mouseup={handleMouseUp}>
-    <FileTreeList {expanded} on:nodeselect on:dblnodeselect children={tree} root {contextMenuEnabled} {iconsEnabled} />
+    <FileTreeList {isExpanded} on:nodeselect on:dblnodeselect children={tree} root {contextMenuEnabled} {iconsEnabled} />
 </ul>
 
 <style>

src/lib/Settings.svelte

@@ -40,7 +40,7 @@
 
 <div class="settings-container" class:hidden>
     <div class="settings-directory">
-        <FileTreeView expanded={true} iconsEnabled={false} tree={[
+        <FileTreeView isExpanded iconsEnabled={false} tree={[
             {id: 0, path: "", name: "General", children: [
                 {id: 1, path: "", name: "Theme"},
                 {id: 2, path: "", name: "Editor", children: [

src/lib/SidebarView.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import { treeLoading, dirToLoad, dirLoadFail } from "./File";
+    import ProgressBar from "./utility/ProgressBar.svelte";
+
     export let content = null;
 </script>
 <div id="sidebarview">
@@ -7,6 +10,11 @@
             <svelte:component this={content}></svelte:component>
         </div>
     {/if}
+    {#if $treeLoading}
+        <div class="loading-container">
+            <ProgressBar label="{$dirToLoad}..." fail={$dirLoadFail}></ProgressBar>
+        </div>
+    {/if}
 </div>
 
 <style lang="scss">
@@ -15,6 +23,15 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+        .loading-container {
+            width: 100%;
+            height: 15%;
+            justify-self: end;
+            background-color: #171717;
+            border-top: #414040 1px solid;
+            border-left: #414040 1px solid;
+            border-bottom: #414040 1px solid;
+        }
     }
 	#tool-view {
         width: 100%;

src/lib/utility/ProgressBar.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    export let label = "Loading...";
+    export let fail = false;
+</script>
+
+<div class="progress-bar-container">
+    <div class="progress-bar" id="progress-bar" class:fail></div>
+    <label class="label" for="progress-bar">{label}</label>
+</div>
+
+<style lang="scss">
+    .progress-bar-container {
+        padding: 0 20px;
+        margin: 5px 0;
+    }
+    .progress-bar {
+        width: 100%;
+        height: 0.5rem;
+        background-color: #f4f4f4;
+        position: relative;
+        &.fail {
+            background-color: #da1e28;
+            &::after {
+                display: none;
+                background-size: 0% 100% !important;
+                animation: none !important;
+            }
+        }
+        &::after {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            animation-duration: 1.0s;
+            animation-iteration-count: infinite;
+            animation-name: progress-bar;
+            animation-timing-function: linear;
+            background-image: linear-gradient(90deg,#0f62fe 12.5%,transparent 12.5%);
+            background-position-x: 0%;
+            background-size: 300% 100%;
+            content: "";
+        }
+    }
+    .label {
+        width: 100%;
+        text-align: center;
+        font-size: 0.9rem;
+    }
+    @keyframes progress-bar {
+        0% {
+            background-position-x: 25%
+        }
+
+        80%,
+        100% {
+            background-position-x: -105%
+        }
+    }
+</style>