From 1d203c687cc54feabc6e4dc2f32d3eef365ba774 Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Fri, 19 Apr 2024 22:00:43 +0200
Subject: [PATCH] refactor: how the keymap gets to the viewer

---
 app/src/lib/graph-interface/edges/Edge.svelte |  1 -
 .../lib/graph-interface/graph/Wrapper.svelte  |  6 ++++-
 app/src/lib/settings/Keymap.svelte            |  4 ++--
 app/src/lib/settings/NodeStore.svelte         |  0
 app/src/lib/settings/Settings.svelte          |  6 +++--
 app/src/routes/+page.svelte                   | 24 ++++++++++++-------
 6 files changed, 26 insertions(+), 15 deletions(-)
 create mode 100644 app/src/lib/settings/NodeStore.svelte

diff --git a/app/src/lib/graph-interface/edges/Edge.svelte b/app/src/lib/graph-interface/edges/Edge.svelte
index 5b80f6c..ef2ad7b 100644
--- a/app/src/lib/graph-interface/edges/Edge.svelte
+++ b/app/src/lib/graph-interface/edges/Edge.svelte
@@ -79,7 +79,6 @@
 
   $: if ($colors.outline) {
     lineColor.copyLinearToSRGB($colors.outline);
-    console.log("lineColor", lineColor);
   }
 </script>
 
diff --git a/app/src/lib/graph-interface/graph/Wrapper.svelte b/app/src/lib/graph-interface/graph/Wrapper.svelte
index 3808663..27d3380 100644
--- a/app/src/lib/graph-interface/graph/Wrapper.svelte
+++ b/app/src/lib/graph-interface/graph/Wrapper.svelte
@@ -2,9 +2,10 @@
   import type { Graph, NodeRegistry } from "@nodes/types";
   import GraphEl from "./Graph.svelte";
   import { GraphManager } from "../graph-manager.js";
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, setContext } from "svelte";
   import type { Writable } from "svelte/store";
   import { debounce } from "$lib/helpers";
+  import { createKeyMap } from "$lib/helpers/createKeyMap";
 
   export let registry: NodeRegistry;
   export let graph: Graph;
@@ -14,6 +15,9 @@
 
   export const status = manager.status;
 
+  export const keymap = createKeyMap([]);
+  setContext("keymap", keymap);
+
   const updateSettings = debounce((s) => {
     manager.setSettings(s);
   }, 200);
diff --git a/app/src/lib/settings/Keymap.svelte b/app/src/lib/settings/Keymap.svelte
index 6d97018..eb1e6de 100644
--- a/app/src/lib/settings/Keymap.svelte
+++ b/app/src/lib/settings/Keymap.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import type { createKeyMap } from "$lib/helpers/createKeyMap";
-  import { getContext } from "svelte";
 
-  const { keys } = getContext<ReturnType<typeof createKeyMap>>("keymap");
+  export let keymap: ReturnType<typeof createKeyMap>;
+  const keys = keymap.keys;
 </script>
 
 <div class="wrapper">
diff --git a/app/src/lib/settings/NodeStore.svelte b/app/src/lib/settings/NodeStore.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/app/src/lib/settings/Settings.svelte b/app/src/lib/settings/Settings.svelte
index d5ce1d9..22d217d 100644
--- a/app/src/lib/settings/Settings.svelte
+++ b/app/src/lib/settings/Settings.svelte
@@ -21,7 +21,9 @@
     false,
   );
   $: keys = panels
-    ? (Object.keys(panels) as unknown as (keyof typeof panels)[])
+    ? (Object.keys(panels) as unknown as (keyof typeof panels)[]).filter(
+        (key) => !!panels[key]?.id,
+      )
     : [];
 
   function setActivePanel(panel: keyof typeof panels | false) {
@@ -83,7 +85,7 @@
         {#if panels[$activePanel]?.component}
           <svelte:component
             this={panels[$activePanel].component}
-            {...panels[$activePanel]}
+            {...panels[$activePanel]?.props}
           />
         {:else}
           <div class="flex flex-col">
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 0772a06..8956baa 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -10,8 +10,7 @@
   import { AppSettings, AppSettingTypes } from "$lib/settings/app-settings";
   import { get, writable, type Writable } from "svelte/store";
   import Keymap from "$lib/settings/Keymap.svelte";
-  import { createKeyMap } from "$lib/helpers/createKeyMap";
-  import { setContext } from "svelte";
+  import type { createKeyMap } from "$lib/helpers/createKeyMap";
 
   const nodeRegistry = new RemoteNodeRegistry("http://localhost:3001");
   const runtimeExecutor = new MemoryRuntimeExecutor(nodeRegistry);
@@ -24,6 +23,8 @@
 
   let managerStatus: Writable<"loading" | "error" | "idle">;
 
+  let keymap: ReturnType<typeof createKeyMap>;
+
   function handleResult(event: CustomEvent<Graph>) {
     res = runtimeExecutor.execute(event.detail, get(settings?.graph?.settings));
   }
@@ -32,10 +33,6 @@
     localStorage.setItem("graph", JSON.stringify(event.detail));
   }
 
-  const keyMap = createKeyMap([]);
-
-  setContext("keymap", keyMap);
-
   let settings: Record<string, any> = {
     general: {
       id: "general",
@@ -43,13 +40,21 @@
       settings: AppSettings,
       definition: AppSettingTypes,
     },
+    shortcuts: {},
     graph: {},
-    shortcuts: {
+  };
+
+  $: if (keymap) {
+    settings.shortcuts = {
       id: "shortcuts",
       icon: "i-tabler-keyboard",
+      props: { keymap },
       component: Keymap,
-    },
-  };
+    };
+
+    settings = settings;
+    console.log({ settings });
+  }
 
   function handleSettings(
     ev: CustomEvent<{
@@ -88,6 +93,7 @@
         <GraphInterface
           registry={nodeRegistry}
           {graph}
+          bind:keymap
           bind:status={managerStatus}
           settings={settings?.graph?.settings}
           on:settings={handleSettings}