From 19234bdac1830c52ff0ac695b8620270093e5693 Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Thu, 14 Mar 2024 16:55:11 +0100
Subject: [PATCH] feat: add initial input prototypes

---
 frontend/src/lib/components/NodeInput.svelte  | 28 +++++++++++++++++++
 .../src/lib/components/NodeParameter.svelte   | 23 +++++++++++----
 .../src/lib/components/graph/GraphView.svelte |  1 -
 frontend/src/lib/elements/Checkbox.svelte     |  4 +--
 frontend/src/lib/elements/Float.story.svelte  | 17 +++++++++++
 frontend/src/lib/elements/Float.svelte        | 19 +++++++++++++
 .../src/lib/elements/Integer.story.svelte     | 17 +++++++++++
 frontend/src/lib/elements/Integer.svelte      |  9 ++++++
 frontend/src/lib/elements/Select.story.svelte | 17 +++++++++++
 frontend/src/lib/elements/Select.svelte       | 21 ++++++++++++++
 frontend/src/lib/graph-manager.ts             | 13 +++++++--
 frontend/src/lib/types/inputs.ts              |  8 +++++-
 frontend/src/routes/app.css                   |  6 ++--
 13 files changed, 168 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/lib/components/NodeInput.svelte
 create mode 100644 frontend/src/lib/elements/Float.story.svelte
 create mode 100644 frontend/src/lib/elements/Integer.story.svelte
 create mode 100644 frontend/src/lib/elements/Select.story.svelte

diff --git a/frontend/src/lib/components/NodeInput.svelte b/frontend/src/lib/components/NodeInput.svelte
new file mode 100644
index 0000000..60f6642
--- /dev/null
+++ b/frontend/src/lib/components/NodeInput.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import Checkbox from "$lib/elements/Checkbox.svelte";
+  import Float from "$lib/elements/Float.svelte";
+  import Integer from "$lib/elements/Integer.svelte";
+  import Select from "$lib/elements/Select.svelte";
+  import type { Node, NodeInput } from "$lib/types";
+
+  export let node: Node;
+  export let input: NodeInput;
+  export let id: string;
+
+  let value = node?.props?.[id] ?? input.value;
+
+  $: if (value) {
+    node.props = node.props || {};
+    node.props.value = value;
+  }
+</script>
+
+{#if input.type === "float"}
+  <Float bind:value />
+{:else if input.type === "integer"}
+  <Integer bind:value />
+{:else if input.type === "boolean"}
+  <Checkbox bind:value />
+{:else if input.type === "select"}
+  <Select options={input.options} bind:value />
+{/if}
diff --git a/frontend/src/lib/components/NodeParameter.svelte b/frontend/src/lib/components/NodeParameter.svelte
index 09c2288..2fa53d9 100644
--- a/frontend/src/lib/components/NodeParameter.svelte
+++ b/frontend/src/lib/components/NodeParameter.svelte
@@ -1,15 +1,22 @@
 <script lang="ts">
-  import type { NodeInput, Socket } from "$lib/types";
+  import type { NodeInput as NodeInputType, Socket } from "$lib/types";
   import type { Node } from "$lib/types";
   import { getContext } from "svelte";
   import { createNodePath } from "$lib/helpers";
   import { possibleSocketIds } from "./graph/stores";
+  import NodeInput from "./NodeInput.svelte";
+  import { getGraphManager } from "./graph/context";
 
   export let node: Node;
-  export let input: NodeInput;
+  export let input: NodeInputType;
   export let id: string;
   export let isLast = false;
 
+  const socketId = `${node.id}-${id}`;
+
+  const graph = getGraphManager();
+  const inputSockets = graph.inputSockets;
+
   const setDownSocket = getContext<(socket: Socket) => void>("setDownSocket");
   const getSocketPosition =
     getContext<(node: Node, index: string) => [number, number]>(
@@ -58,13 +65,12 @@
 
 <div
   class="wrapper"
-  class:disabled={$possibleSocketIds &&
-    !$possibleSocketIds.has(`${node.id}-${id}`)}
+  class:disabled={$possibleSocketIds && !$possibleSocketIds.has(socketId)}
 >
-  <div class="content">
+  <div class="content" class:disabled={$inputSockets.has(socketId)}>
     <label>{id}</label>
 
-    <div class="input">input</div>
+    <NodeInput {node} {input} {id} />
   </div>
 
   {#if node.tmp?.type?.inputs?.[id].internal !== true}
@@ -186,6 +192,11 @@
     /* fill: #161616; */
   }
 
+  .content.disabled {
+    opacity: 0.2;
+    pointer-events: none;
+  }
+
   .disabled svg path {
     d: var(--hover-path-disabled) !important;
     /* fill: #060606 !important; */
diff --git a/frontend/src/lib/components/graph/GraphView.svelte b/frontend/src/lib/components/graph/GraphView.svelte
index c8b248d..ce51eb8 100644
--- a/frontend/src/lib/components/graph/GraphView.svelte
+++ b/frontend/src/lib/components/graph/GraphView.svelte
@@ -40,7 +40,6 @@
   {@const pos = getEdgePosition(edge)}
   {@const [x1, y1, x2, y2] = pos}
   <Edge
-    color={$colors.backgroundColorLighter}
     from={{
       x: x1,
       y: y1,
diff --git a/frontend/src/lib/elements/Checkbox.svelte b/frontend/src/lib/elements/Checkbox.svelte
index 4f7e838..64f801c 100644
--- a/frontend/src/lib/elements/Checkbox.svelte
+++ b/frontend/src/lib/elements/Checkbox.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  export let checked: boolean;
+  export let value: boolean;
 </script>
 
-<input type="checkbox" bind:checked />
+<input type="checkbox" bind:checked={value} />
 
 <style>
   input[type="checkbox"] {
diff --git a/frontend/src/lib/elements/Float.story.svelte b/frontend/src/lib/elements/Float.story.svelte
new file mode 100644
index 0000000..f2ea7f6
--- /dev/null
+++ b/frontend/src/lib/elements/Float.story.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Hst } from "@histoire/plugin-svelte";
+  export let Hst: Hst;
+  import Float from "./Float.svelte";
+</script>
+
+<Hst.Story>
+  <div>
+    <Float value={0} min={0} max={6.9} />
+  </div>
+</Hst.Story>
+
+<style>
+  div {
+    padding: 1em;
+  }
+</style>
diff --git a/frontend/src/lib/elements/Float.svelte b/frontend/src/lib/elements/Float.svelte
index e69de29..8324334 100644
--- a/frontend/src/lib/elements/Float.svelte
+++ b/frontend/src/lib/elements/Float.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let value: number = 0;
+  export let min = 0;
+  export let max = 10;
+  export let step = 0.1;
+</script>
+
+<input type="number" bind:value {min} {max} {step} />
+
+<style>
+  input {
+    background: var(--background-color-lighter);
+    color: var(--text-color);
+    font-family: var(--font-family);
+    padding: 0.8em 1em;
+    border-radius: 5px;
+    border: none;
+  }
+</style>
diff --git a/frontend/src/lib/elements/Integer.story.svelte b/frontend/src/lib/elements/Integer.story.svelte
new file mode 100644
index 0000000..7128efb
--- /dev/null
+++ b/frontend/src/lib/elements/Integer.story.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Hst } from "@histoire/plugin-svelte";
+  export let Hst: Hst;
+  import Integer from "./Integer.svelte";
+</script>
+
+<Hst.Story>
+  <div>
+    <Integer value={5} min={0} max={42} />
+  </div>
+</Hst.Story>
+
+<style>
+  div {
+    padding: 1em;
+  }
+</style>
diff --git a/frontend/src/lib/elements/Integer.svelte b/frontend/src/lib/elements/Integer.svelte
index e69de29..da759b6 100644
--- a/frontend/src/lib/elements/Integer.svelte
+++ b/frontend/src/lib/elements/Integer.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let value: number = 0;
+  export let min = 0;
+  export let max = 10;
+  export let step = 1;
+</script>
+
+<input type="number" bind:value {min} {max} {step} />
+
diff --git a/frontend/src/lib/elements/Select.story.svelte b/frontend/src/lib/elements/Select.story.svelte
new file mode 100644
index 0000000..32c9f50
--- /dev/null
+++ b/frontend/src/lib/elements/Select.story.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Hst } from "@histoire/plugin-svelte";
+  export let Hst: Hst;
+  import Select from "./Select.svelte";
+</script>
+
+<Hst.Story>
+  <div>
+    <Select value={"banana"} options={["strawberry", "apple", "banana"]} />
+  </div>
+</Hst.Story>
+
+<style>
+  div {
+    padding: 1em;
+  }
+</style>
diff --git a/frontend/src/lib/elements/Select.svelte b/frontend/src/lib/elements/Select.svelte
index e69de29..3613fa7 100644
--- a/frontend/src/lib/elements/Select.svelte
+++ b/frontend/src/lib/elements/Select.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  export let options: string[] = [];
+  export let value: string = options[0];
+</script>
+
+<select bind:value>
+  {#each options as option}
+    <option value={option}>{option}</option>
+  {/each}
+</select>
+
+<style>
+  select {
+    background: var(--background-color-lighter);
+    color: var(--text-color);
+    font-family: var(--font-family);
+    padding: 0.8em 1em;
+    border-radius: 5px;
+    border: none;
+  }
+</style>
diff --git a/frontend/src/lib/graph-manager.ts b/frontend/src/lib/graph-manager.ts
index 3dc844c..1fa5ed8 100644
--- a/frontend/src/lib/graph-manager.ts
+++ b/frontend/src/lib/graph-manager.ts
@@ -6,7 +6,7 @@ const nodeTypes: NodeType[] = [
   {
     id: "input/float",
     inputs: {
-      "value": { type: "float" },
+      "value": { type: "float", value: 0.1 },
     },
     outputs: ["float"],
   },
@@ -14,8 +14,8 @@ const nodeTypes: NodeType[] = [
     id: "math",
     inputs: {
       "type": { type: "select", options: ["add", "subtract", "multiply", "divide"], internal: true },
-      "a": { type: "float" },
-      "b": { type: "float" },
+      "a": { type: "float", value: 0.2 },
+      "b": { type: "float", value: 0.2 },
     },
     outputs: ["float"],
   },
@@ -44,6 +44,8 @@ export class GraphManager {
   private _edges: Edge[] = [];
   edges: Writable<Edge[]> = writable([]);
 
+  inputSockets: Writable<Set<string>> = writable(new Set());
+
   history: HistoryManager = new HistoryManager(this);
 
   private constructor(private graph: Graph, private nodeRegistry: NodeRegistry = new NodeRegistry()) {
@@ -52,6 +54,11 @@ export class GraphManager {
     });
     this.edges.subscribe((edges) => {
       this._edges = edges;
+      const s = new Set<string>();
+      for (const edge of edges) {
+        s.add(`${edge[2].id}-${edge[3]}`);
+      }
+      this.inputSockets.set(s);
     });
   }
 
diff --git a/frontend/src/lib/types/inputs.ts b/frontend/src/lib/types/inputs.ts
index 31465ab..c1d80be 100644
--- a/frontend/src/lib/types/inputs.ts
+++ b/frontend/src/lib/types/inputs.ts
@@ -3,6 +3,7 @@ type NodeInputFloat = {
   value?: number;
   min?: number;
   max?: number;
+  step?: number;
 }
 
 type NodeInputInteger = {
@@ -12,6 +13,11 @@ type NodeInputInteger = {
   max?: number;
 }
 
+type NodeInputBoolean = {
+  type: "boolean";
+  value?: boolean;
+}
+
 type NodeInputSelect = {
   type: "select";
   value?: string;
@@ -22,4 +28,4 @@ type DefaultOptions = {
   internal?: boolean;
 }
 
-export type NodeInput = (NodeInputFloat | NodeInputInteger | NodeInputSelect) & DefaultOptions;
+export type NodeInput = (NodeInputBoolean | NodeInputFloat | NodeInputInteger | NodeInputSelect) & DefaultOptions;
diff --git a/frontend/src/routes/app.css b/frontend/src/routes/app.css
index d1123ae..e46dfb4 100644
--- a/frontend/src/routes/app.css
+++ b/frontend/src/routes/app.css
@@ -21,8 +21,8 @@
 }
 
 :root {
-  font-family: 'Fira Code', monospace;
-
+  --font-family: 'Fira Code', monospace;
+  font-family: var(--font-family);
 
   /* Spacing */
   --spacing-xs: 4px;
@@ -48,6 +48,8 @@ body {
   --background-color: #151515;
   --background-color-darker: #101010;
   --text-color: #aeaeae;
+
+  background-color: var(--background-color-darker);
 }
 
 body.theme-catppuccin {