fix: context is weird

leaphy-robotics · May 3, 2024 · 7c308e6 · 7c308e6
1 parent 4088651
commit 7c308e6
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 27 deletions.
diff --git a/src/lib/components/core/header/Header.svelte b/src/lib/components/core/header/Header.svelte
@@ -46,13 +46,11 @@ import Examples from "../popups/popups/Examples.svelte";
 import About from "../popups/popups/About.svelte";
 import UploadLog from "../popups/popups/UploadLog.svelte";
 import JSZip from "jszip";
-import Workspace from "$components/workspace/Workspace.svelte";
 import Select from "$components/ui/Select.svelte";
 import { robots } from "$domain/robots";
-import Advanced from "$components/workspace/advanced/Advanced.svelte";
 import Warning from "../popups/popups/Warning.svelte";
 import MicroPythonIO from "../../../micropython";
-import { get } from "svelte/store";
+import { get, type Writable } from "svelte/store";
 
 async function upload() {
 	popups.open({
@@ -236,89 +234,103 @@ function runPython() {
 }
 </script>
 
-{#snippet projectContext()}
-    <ContextItem icon={faFile} name={$_("NEW")} onclick={newProject} />
-    <ContextItem icon={faFolder} name={$_("OPEN")} onclick={openProject} />
+{#snippet projectContext(open: Writable<boolean>)}
+    <ContextItem icon={faFile} name={$_("NEW")} onclick={newProject} {open} />
+    <ContextItem icon={faFolder} name={$_("OPEN")} onclick={openProject} {open} />
     <ContextItem
         icon={faFloppyDisk}
         name={$_("SAVE")}
         onclick={saveProject}
         disabled={!$handle}
+        {open}
     />
     <ContextItem
         icon={faFloppyDisk}
         name={$_("SAVEAS")}
         onclick={saveProjectAs}
+        {open}
     />
     <ContextItem
         icon={faGraduationCap}
         name={$_("EXAMPLES")}
         onclick={examples}
+        {open}
     />
 {/snippet}
-{#snippet helpContext()}
+{#snippet helpContext(open: Writable<boolean>)}
     <ContextItem
         icon={faQuestionCircle}
         name={$_("HELP_FORUM")}
         onclick={discord}
+        {open}
     />
-    <ContextItem icon={faEnvelope} name={$_("EMAIL")} onclick={email} />
+    <ContextItem icon={faEnvelope} name={$_("EMAIL")} onclick={email} {open} />
 {/snippet}
-{#snippet moreContext()}
-    {#snippet languageContext()}
+{#snippet moreContext(open: Writable<boolean>)}
+    {#snippet languageContext(open: Writable<boolean>)}
         <ContextItem
             selected={$locale === "en"}
             name={"English"}
             onclick={() => setLocale("en")}
+            {open}
         />
         <ContextItem
             selected={$locale === "nl"}
             name={"Nederlands"}
             onclick={() => setLocale("nl")}
+            {open}
         />
     {/snippet}
-    {#snippet themeContext()}
+    {#snippet themeContext(open: Writable<boolean>)}
         <ContextItem
             selected={$theme === Theme.LIGHT}
             name={$_("LIGHT_THEME")}
             onclick={() => theme.set(Theme.LIGHT)}
+            {open}
         />
         <ContextItem
             selected={$theme === Theme.DARK}
             name={$_("DARK_THEME")}
             onclick={() => theme.set(Theme.DARK)}
+            {open}
         />
     {/snippet}
 
     <ContextItem
         icon={faQuestionCircle}
         name={$_("MORE_ABOUT")}
         onclick={about}
+        {open}
     />
     <ContextItem
         icon={faGlobe}
         name={$_("LANGUAGE")}
         context={languageContext}
+        {open}
     />
     <ContextItem
         icon={$theme === Theme.LIGHT ? faLightbulb : faMoon}
         name={$_("THEME")}
         context={themeContext}
+        {open}
     />
     <ContextItem
         icon={$audio ? faVolumeXmark : faVolumeHigh}
         name={$_($audio ? "SOUND_OFF" : "SOUND_ON")}
         onclick={() => audio.update((audio) => !audio)}
+        {open}
     />
     <ContextItem
         icon={faSquarePollHorizontal}
         name={$_("VIEW_LOG")}
         onclick={log}
+        {open}
     />
     <ContextItem
         icon={faDownload}
         name={$_("DOWNLOAD_DRIVERS")}
         onclick={drivers}
+        {open}
     />
 {/snippet}
 

diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
 import { onDestroy, onMount, setContext, type Snippet } from "svelte";
 import ContextMenu from "./ContextMenu.svelte";
-import { writable } from "svelte/store";
+import { writable, type Writable } from "svelte/store";
 import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import Fa from "svelte-fa";
 
 interface Props {
 	name?: string;
 	icon?: IconDefinition | string;
 	onclick?: () => void;
-	context?: Snippet;
+	context?: Snippet<[Writable<boolean>]>;
 	mode: "primary" | "secondary" | "outlined" | "accent";
 	bold?: boolean;
 }
@@ -24,16 +24,16 @@ const {
 
 let btn: HTMLButtonElement = $state();
 
-const open = setContext("open", writable(false));
+const open = writable(false);
 function onContext() {
 	if (!context) return;
 
-	open.update(() => true);
+	open.set(true);
 }
 </script>
 
 {#if $open}
-    <ContextMenu source={btn} content={context} />
+    <ContextMenu {open} source={btn} content={context} />
 {/if}
 
 <button

diff --git a/src/lib/components/ui/ContextItem.svelte b/src/lib/components/ui/ContextItem.svelte
@@ -12,27 +12,28 @@ interface Props {
 	icon?: IconDefinition;
 	name: string;
 	onclick?: () => void;
-	context?: Snippet;
+	context?: Snippet<[Writable<boolean>]>;
 	disabled?: boolean;
 	selected?: boolean;
+    open: Writable<boolean>
 }
-const {
+let {
 	icon,
 	name,
 	onclick,
 	context,
 	disabled = false,
 	selected = false,
+    open
 }: Props = $props();
 
 let element = $state<HTMLDivElement>();
 let contextShowing = $state(false);
 
-const open = getContext<Writable<boolean>>("open");
 function interact() {
 	if (!onclick) return;
 
-	open.update(() => false);
+	open.set(false);
 	onclick();
 }
 
@@ -58,7 +59,7 @@ onDestroy(() => {
 
 <tbody bind:this={element}>
     {#if contextShowing}
-        <ContextMenu anchor="right-start" source={element} content={context} />
+        <ContextMenu anchor="right-start" source={element} content={context} {open} />
     {/if}
 
     <tr

diff --git a/src/lib/components/ui/ContextMenu.svelte b/src/lib/components/ui/ContextMenu.svelte
@@ -5,20 +5,19 @@ import type { Writable } from "svelte/store";
 
 interface Props {
 	source: HTMLElement;
-	content: Snippet;
+	content: Snippet<[Writable<boolean>]>;
 	anchor?: Placement;
+    open: Writable<boolean>
 }
-const { source, content, anchor = "bottom-start" }: Props = $props();
-
-const open = getContext<Writable<boolean>>("open");
+let { source, content, anchor = "bottom-start", open }: Props = $props();
 
 let element: HTMLTableElement;
 let opening = true;
 function close(event: MouseEvent) {
 	if (opening) return (opening = false);
 	if (element.contains(event.target as HTMLElement)) return;
 
-	open.update(() => false);
+	open.set(false);
 }
 
 let position = $state<{ x: number; y: number }>();
@@ -42,7 +41,7 @@ onDestroy(() => {
     style:left={`${position?.x}px`}
     style:top={`${position?.y}px`}
 >
-    {@render content()}
+    {@render content(open)}
 </table>
 
 <style>