Save state of panes

Chi-EEE · Mar 19, 2024 · 1b7e208 · 1b7e208
1 parent 22ab802
commit 1b7e208
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 10 deletions.
diff --git a/app/admin_panel/src/lib/CodeBox.svelte b/app/admin_panel/src/lib/CodeBox.svelte
@@ -8,7 +8,7 @@
     import { xml_schema } from "./CodeBox_Constants";
     import { node_hover } from "./CodeBox_Constants";
 
-    import { behaviour_tree_xml_code } from "../store/code_store";
+    import { behaviour_tree_xml_code } from "../store/home_store";
 
     /** @type {string} */
     let send_behaviour_tree_text = "Send Behaviour Tree";

diff --git a/app/admin_panel/src/routes/Home.svelte b/app/admin_panel/src/routes/Home.svelte
@@ -4,6 +4,12 @@
     import RaspberryPiConnectBanner from "../lib/RaspberryPiConnectBanner.svelte";
 
     import { websocket_server_connection_state } from "../store/websocket_store";
+    import {
+        main_pane_size_0_store,
+        main_pane_size_1_store,
+        side_pane_size_0_store,
+        side_pane_size_1_store,
+    } from "../store/home_store";
 
     import { Pane, Splitpanes } from "svelte-splitpanes";
 
@@ -12,16 +18,31 @@
 
     /** @type {number} */
     let stream_split_width = 0;
+
+    let main_pane_size_0 = $main_pane_size_0_store;
+    let main_pane_size_1 = $main_pane_size_1_store;
+    let side_pane_size_0 = $side_pane_size_0_store;
+    let side_pane_size_1 = $side_pane_size_1_store;
+
+    function onMainResize(event) {
+        main_pane_size_0_store.set(event.detail[0].size);
+        main_pane_size_1_store.set(event.detail[1].size);
+    }
+
+    function onSideResize(event) {
+        side_pane_size_0_store.set(event.detail[0].size);
+        side_pane_size_1_store.set(event.detail[1].size);
+    }
 </script>
 
 <main style="height: 92vh">
     {#if $websocket_server_connection_state === false}
         <RaspberryPiConnectBanner />
     {/if}
-    <Splitpanes style="height:100%;padding:1em;background-color:rgb(20,20,40)">
-        <Pane>
-            <Splitpanes horizontal={true}>
-                <Pane size={80} minSize={5}>
+    <Splitpanes style="height:100%;padding:1em;background-color:rgb(20,20,40)" on:resize={onSideResize}>
+        <Pane size={side_pane_size_0}>
+            <Splitpanes horizontal={true} on:resize={onMainResize}>
+                <Pane size={main_pane_size_0} minSize={5}>
                     <div
                         class="w-full h-full"
                         style="background-color:rgb(230,230,230)"
@@ -31,7 +52,7 @@
                         <!--  -->
                     </div>
                 </Pane>
-                <Pane size={20} minSize={7.5}>
+                <Pane size={main_pane_size_1} minSize={7.5}>
                     <div
                         class="w-full h-full"
                         style="background-color:rgb(230,230,230)"
@@ -41,7 +62,7 @@
                 </Pane>
             </Splitpanes>
         </Pane>
-        <Pane size={13} minSize={13} maxSize={80}>
+        <Pane size={side_pane_size_1} minSize={13} maxSize={80}>
             <BehaviourTreeHandler />
         </Pane>
     </Splitpanes>

diff --git a/app/admin_panel/src/store/code_store.js b/app/admin_panel/src/store/code_store.js
diff --git a/app/admin_panel/src/store/home_store.js b/app/admin_panel/src/store/home_store.js
@@ -0,0 +1,9 @@
+import { writable } from 'svelte/store';
+
+export const behaviour_tree_xml_code = writable("");
+
+export const main_pane_size_0_store = writable(80);
+export const main_pane_size_1_store = writable(20);
+
+export const side_pane_size_0_store = writable(87);
+export const side_pane_size_1_store = writable(13);