Add ability to preserve tab states

Nahara-OSS · Oct 4, 2024 · 5f8f182 · 5f8f182
1 parent 515b18e
commit 5f8f182
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 11 deletions.
diff --git a/nahara-motion-ui/src/App.svelte b/nahara-motion-ui/src/App.svelte
@@ -1,16 +1,26 @@
 <script lang="ts">
-    import Button from "./ui/input/Button.svelte";
     import MediaBar from "./ui/bar/MediaBar.svelte";
     import TopBar from "./ui/bar/TopBar.svelte";
     import MenuHost from "./ui/menu/MenuHost.svelte";
     import OutlinerPane from "./ui/outliner/OutlinerPane.svelte";
-    import PaneHost, { SplitDirection, type PaneLayout } from "./ui/pane/PaneHost.svelte";
+    import PaneHost, { SplitDirection, type PaneLayout, type TabState } from "./ui/pane/PaneHost.svelte";
     import PropertiesPane from "./ui/properties/PropertiesPane.svelte";
     import TimelinePane from "./ui/timeline/TimelinePane.svelte";
     import ViewportPane from "./ui/viewport/ViewportPane.svelte";
     import PopupHost from "./ui/popup/PopupHost.svelte";
     import AnimationGraphPane from "./ui/graph/AnimationGraphPane.svelte";
+    import EmptyPane from "./ui/pane/EmptyPane.svelte";
 
+    let states: Record<string, TabState> = {
+        "default-files": { type: "files", state: {} },
+        "default-project": { type: "project", state: {} },
+        "default-outliner": { type: "outliner", state: {} },
+        "default-timeline": { type: "timeline", state: {} },
+        "default-animationGraph": { type: "animationGraph", state: {} },
+        "default-properties": { type: "properties", state: {} },
+        "default-modifiers": { type: "modifiers", state: {} },
+        "default-viewport": { type: "viewport", state: {} }
+    };
     let layout: PaneLayout = {
         type: "split",
         direction: SplitDirection.LeftToRight,
@@ -19,20 +29,20 @@
             type: "split",
             direction: SplitDirection.BottomToTop,
             firstSize: 500,
-            first: { type: "tab", tabs: ["files", "project"], selected: "files" },
-            second: { type: "tab", tabs: ["outliner"], selected: "outliner" }
+            first: { type: "tab", tabs: ["default-files", "default-project"], selected: "default-files" },
+            second: { type: "tab", tabs: ["default-outliner"], selected: "default-outliner" }
         },
         second: {
             type: "split",
             direction: SplitDirection.BottomToTop,
             firstSize: 300,
-            first: { type: "tab", tabs: ["timeline", "animationGraph"], selected: "timeline" },
+            first: { type: "tab", tabs: ["default-timeline", "default-animationGraph"], selected: "default-timeline" },
             second: {
                 type: "split",
                 direction: SplitDirection.RightToLeft,
                 firstSize: 300,
-                first: { type: "tab", tabs: ["properties", "modifiers"], selected: "properties" },
-                second: { type: "tab", tabs: ["viewport"], selected: "viewport" }
+                first: { type: "tab", tabs: ["default-properties", "default-modifiers"], selected: "default-properties" },
+                second: { type: "tab", tabs: ["default-viewport"], selected: "default-viewport" }
             }
         }
     };
@@ -41,13 +51,13 @@
 <div class="app">
     <div class="content">
         <TopBar />
-        <PaneHost {layout} component={type => {
+        <PaneHost {layout} {states} component={type => {
             if (type == "properties") return PropertiesPane;
             if (type == "timeline") return TimelinePane;
             if (type == "outliner") return OutlinerPane;
             if (type == "viewport") return ViewportPane;
             if (type == "animationGraph") return AnimationGraphPane;
-            return Button;
+            return EmptyPane;
         }} on:layoutupdate={e => layout = e.detail} />
         <MediaBar />
     </div>

diff --git a/nahara-motion-ui/src/ui/outliner/OutlinerPane.svelte b/nahara-motion-ui/src/ui/outliner/OutlinerPane.svelte
@@ -5,6 +5,7 @@
     import * as motion from "@nahara/motion";
     import Outliner from "./Outliner.svelte";
 
+    export let state: any;
     const currentScene = app.currentSceneStore;
     const selection = app.currentSelectionStore;
 

diff --git a/nahara-motion-ui/src/ui/pane/EmptyPane.svelte b/nahara-motion-ui/src/ui/pane/EmptyPane.svelte
@@ -0,0 +1,3 @@
+<script lang="ts">
+    export let state: any;
+</script>
diff --git a/nahara-motion-ui/src/ui/pane/PaneHost.svelte b/nahara-motion-ui/src/ui/pane/PaneHost.svelte
@@ -7,9 +7,14 @@ Pane host is a component that includes the panes and layout management.
         type: T;
     }
 
+    export interface TabState {
+        type: string;
+        state: any;
+    }
+
     export interface TabLayout extends IBaseLayout<"tab"> {
         /**
-         * An array of IDs that maps to component.
+         * An array of IDs that maps state ID whose type maps to component.
          */
         tabs: string[];
         selected: string;
@@ -66,6 +71,7 @@ Pane host is a component that includes the panes and layout management.
         tabs: [],
         selected: ""
     };
+    export let states: Record<string, TabState> = {};
     export let component: (name: string) => { new(...args: any[]): SvelteComponent };
     export let tabNames: (id: string) => string = id => id;
     export let dividerSize = 8;
@@ -372,7 +378,9 @@ Pane host is a component that includes the panes and layout management.
             })}
             on:paneclose={e => paneNuke(tabLayout)}
         >
-            <svelte:component this={component(tabLayout.selected)} />
+            {#if tabLayout.selected}
+                <svelte:component this={component(states[tabLayout.selected].type)} state={states[tabLayout.selected].state} />
+            {/if}
         </TabbedPane>
     {/each}
     {#each splitLayouts as splitLayout}

diff --git a/nahara-motion-ui/src/ui/properties/PropertiesPane.svelte b/nahara-motion-ui/src/ui/properties/PropertiesPane.svelte
@@ -5,6 +5,7 @@
     import Dropdown from "../input/Dropdown.svelte";
     import { openMenuAt } from "../menu/MenuHost.svelte";
 
+    export let state: any;
     const currentScene = app.currentSceneStore;
     const currentSelection = app.currentSelectionStore;
     const seekhead = app.currentSeekheadStore;

diff --git a/nahara-motion-ui/src/ui/timeline/TimelinePane.svelte b/nahara-motion-ui/src/ui/timeline/TimelinePane.svelte
@@ -5,6 +5,7 @@
     import { app } from "../../appglobal";
     import { snapping } from "../../snapping";
 
+    export let state: any;
     let labelWidth = 200;
     let zoom = 100; // 100 CSS pixels per second
     let scroll = 0;

diff --git a/nahara-motion-ui/src/ui/viewport/ViewportPane.svelte b/nahara-motion-ui/src/ui/viewport/ViewportPane.svelte
@@ -8,6 +8,7 @@
     import { openPopupAt } from "../popup/PopupHost.svelte";
     import ColorPickerPopup from "../popup/ColorPickerPopup.svelte";
 
+    export let state: any;
     let canvas: HTMLCanvasElement;
     let ctx: CanvasRenderingContext2D;
     $: {