From cdd3966dd5b5d7e6a611c01fed8ddd4cae5171bf Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Mon, 5 Feb 2024 21:02:03 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A9=20Makes=20topbar=20setting=20remov?=
 =?UTF-8?q?e=20canvas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/components/Model/ModelView.svelte |  6 +++++-
 app/src/components/Topbar.svelte          | 22 ++++++++++++++++------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/src/components/Model/ModelView.svelte b/app/src/components/Model/ModelView.svelte
index 82706dd..c1d276a 100644
--- a/app/src/components/Model/ModelView.svelte
+++ b/app/src/components/Model/ModelView.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { onMount } from 'svelte';
+import { onDestroy, onMount } from 'svelte';
 import { CanvasTexture, CircleGeometry, Mesh, MeshBasicMaterial} from 'three';
 import { dataBuffer, servoBuffer, socket, angles, log, mpu } from '../../lib/socket'
 import { lerp } from '../../lib/utils';
@@ -63,6 +63,10 @@ onMount(async () => {
     })
 });
 
+onDestroy(() => {
+    canvas.remove()
+})
+
 const cacheModelFiles = async () => {
     let data = await fetch("/stl.zip").then(data => data.arrayBuffer())
     
diff --git a/app/src/components/Topbar.svelte b/app/src/components/Topbar.svelte
index 770e911..6549402 100644
--- a/app/src/components/Topbar.svelte
+++ b/app/src/components/Topbar.svelte
@@ -1,24 +1,34 @@
 <script lang="ts">
 	import { isConnected, dataBuffer, status } from '../lib/socket';
-	import { Icon, Bars3, Power, Battery100, Signal, SignalSlash } from 'svelte-hero-icons';
+	import { Icon, Bars3, XMark, Power, Battery100, Signal, SignalSlash } from 'svelte-hero-icons';
 	import { emulateModel } from '../lib/store';
-    import { Link } from 'svelte-routing'
+    import { Link, useLocation } from 'svelte-routing'
 
     const views = ["Virtual environment", "Robot camera"]
     const modes = ["Drive", "Choreography"]
 
+    const location = useLocation()
+
 	let selected_view = views[0];
 	let selected_modes = modes[0];
+    let settingOpen = window.location.pathname.includes('/settings')
 
     $: emulateModel.set(selected_view === views[0])
+    $: settingOpen = $location.pathname.includes('/settings')
 </script>
 
 
 <div class="topbar absolute left-0 top-0 w-full z-10 flex justify-between bg-zinc-800">
-    <div class="flex gap-2 py-2">
-        <Link to="/settings">
-            <Icon src={Bars3} size="32" />
-        </Link>
+    <div class="flex gap-2 p-2">
+        {#if settingOpen}
+            <Link to="/">
+                <Icon src={XMark} size="32" /> 
+            </Link>
+        {:else}    
+            <Link to="/settings">
+                <Icon src={Bars3} size="32" />
+            </Link>
+        {/if}
         <select bind:value={selected_modes} class="rounded-md outline outline-2 text-zinc-200 outline-zinc-600 bg-zinc-800">
             {#each modes as mode}
             <option>{mode}</option>