feat: add path_geometry data

app/src/lib/settings/panels/ActiveNode.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import type { Node, NodeInput } from "@nodes/types";
+  import NestedSettings from "../NestedSettings.svelte";
+  import { writable } from "svelte/store";
+  import type { GraphManager } from "$lib/graph-interface/graph-manager";
+
+  function filterInputs(inputs: Record<string, NodeInput>) {
+    return Object.fromEntries(
+      Object.entries(inputs).filter(([key, value]) => {
+        return value.hidden === true;
+      }),
+    );
+  }
+
+  function createStore(
+    props: Node["props"],
+    inputs: Record<string, NodeInput>,
+  ) {
+    const store: Record<string, unknown> = {};
+    Object.keys(inputs).forEach((key) => {
+      if (props) {
+        //@ts-ignore
+        store[key] = props[key] || inputs[key].value;
+      }
+    });
+    return writable(store);
+  }
+
+  export let manager: GraphManager;
+
+  export let node: Node;
+  let nodeDefinition: Record<string, NodeInput> | undefined;
+  $: nodeDefinition = node?.tmp?.type
+    ? filterInputs(node.tmp.type.inputs)
+    : undefined;
+  $: store = node ? createStore(node.props, nodeDefinition) : undefined;
+
+  let lastPropsHash = "";
+  function updateNode() {
+    if (!node || !$store) return;
+    let needsUpdate = false;
+    Object.keys($store).forEach((_key: string) => {
+      node.props = node.props || {};
+      const key = _key as keyof typeof $store;
+      if (node && $store) {
+        needsUpdate = true;
+        node.props[key] = $store[key];
+      }
+    });
+    let propsHash = JSON.stringify(node.props);
+    if (propsHash === lastPropsHash) {
+      return;
+    }
+    lastPropsHash = propsHash;
+    // console.log(needsUpdate, node.props, $store);
+    if (needsUpdate) {
+      manager.execute();
+    }
+  }
+
+  $: if (store && $store) {
+    updateNode();
+  }
+</script>
+
+{#if node}
+  {#if nodeDefinition && store && Object.keys(nodeDefinition).length > 0}
+    <NestedSettings id="activeNodeSettings" settings={nodeDefinition} {store} />
+  {:else}
+    <p class="mx-4">Active Node has no Settings</p>
+  {/if}
+{:else}
+  <p class="mx-4">No active node</p>
+{/if}

app/src/lib/settings/panels/Keymap.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { createKeyMap } from "$lib/helpers/createKeyMap";
+  import { ShortCut } from "@nodes/ui";
+
+  export let keymap: ReturnType<typeof createKeyMap>;
+  const keys = keymap.keys;
+</script>
+
+<div class="wrapper">
+  <h3>Editor</h3>
+
+  <section>
+    {#each $keys as key}
+      {#if key.description}
+        <div class="command-wrapper">
+          <ShortCut {...key} />
+        </div>
+        <p>{key.description}</p>
+      {/if}
+    {/each}
+  </section>
+</div>
+
+<style>
+  .wrapper {
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+  }
+
+  section {
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    gap: 1em;
+  }
+
+  h3 {
+    margin: 0;
+  }
+
+  .command-wrapper {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+  }
+
+  p {
+    font-size: 0.9em;
+    margin: 0;
+    display: flex;
+    align-items: center;
+  }
+</style>