feat: add shortcut viewer

app/src/lib/graph-interface/edges/Edge.svelte

@@ -20,7 +20,7 @@
 <script lang="ts">
   import { T } from "@threlte/core";
   import { MeshLineMaterial } from "@threlte/extras";
-  import { BufferGeometry, MeshBasicMaterial, Vector3 } from "three";
+  import { BufferGeometry, Color, MeshBasicMaterial, Vector3 } from "three";
   import { CubicBezierCurve } from "three/src/extras/curves/CubicBezierCurve.js";
   import { Vector2 } from "three/src/math/Vector2.js";
   import { createEdgeGeometry } from "./createEdgeGeometry.js";
@@ -74,6 +74,13 @@
   $: if (from || to) {
     update();
   }
+
+  const lineColor = new Color($colors.outline);
+
+  $: if ($colors.outline) {
+    lineColor.copyLinearToSRGB($colors.outline);
+    console.log("lineColor", lineColor);
+  }
 </script>
 
 <T.Mesh
@@ -83,7 +90,7 @@
   rotation.x={-Math.PI / 2}
   material={circleMaterial}
 >
-  <T.CircleGeometry args={[0.3, 16]} />
+  <T.CircleGeometry args={[0.5, 16]} />
 </T.Mesh>
 
 <T.Mesh
@@ -93,11 +100,16 @@
   rotation.x={-Math.PI / 2}
   material={circleMaterial}
 >
-  <T.CircleGeometry args={[0.3, 16]} />
+  <T.CircleGeometry args={[0.5, 16]} />
 </T.Mesh>
 
 {#if geometry}
   <T.Mesh position.x={from.x} position.z={from.y} position.y={0.1} {geometry}>
-    <MeshLineMaterial width={3} attenuate={false} color={$colors.outline} />
+    <MeshLineMaterial
+      width={3}
+      attenuate={false}
+      color={lineColor}
+      toneMapped={false}
+    />
   </T.Mesh>
 {/if}

app/src/lib/graph-interface/graph/Graph.svelte

@@ -1,16 +1,10 @@
 <script lang="ts">
   import { animate, lerp, snapToGrid } from "../helpers/index.js";
-  import {
-    LinearSRGBColorSpace,
-    LinearToneMapping,
-    NoToneMapping,
-    SRGBColorSpace,
-  } from "three";
   import { Canvas } from "@threlte/core";
   import type { OrthographicCamera } from "three";
   import Background from "../background/Background.svelte";
   import type { GraphManager } from "../graph-manager.js";
-  import { onMount, setContext } from "svelte";
+  import { getContext, onMount, setContext } from "svelte";
   import Camera from "../Camera.svelte";
   import GraphView from "./GraphView.svelte";
   import type { Node, Node as NodeType, Socket } from "@nodes/types";
@@ -23,10 +17,15 @@
     possibleSocketIds,
     selectedNodes,
   } from "./stores.js";
+  import { createKeyMap } from "../../helpers/createKeyMap";
   import BoxSelection from "../BoxSelection.svelte";
   import AddMenu from "../AddMenu.svelte";
 
   export let graph: GraphManager;
+
+  let keymap =
+    getContext<ReturnType<typeof createKeyMap>>("keymap") || createKeyMap([]);
+
   setContext("graphManager", graph);
   const status = graph.status;
   const nodes = graph.nodes;
@@ -78,19 +77,6 @@
     localStorage.setItem("cameraPosition", JSON.stringify(cameraPosition));
   }
 
-  export let debug = {};
-  $: debug = {
-    activeNodeId: $activeNodeId,
-    activeSocket: $activeSocket
-      ? `${$activeSocket?.node.id}-${$activeSocket?.index}`
-      : null,
-    hoveredSocket: $hoveredSocket
-      ? `${$hoveredSocket?.node.id}-${$hoveredSocket?.index}`
-      : null,
-    selectedNodes: [...($selectedNodes?.values() || [])],
-    cameraPosition,
-  };
-
   function updateNodePosition(node: NodeType) {
     if (node?.tmp?.ref) {
       if (node.tmp["x"] !== undefined && node.tmp["y"] !== undefined) {
@@ -518,30 +504,61 @@
     $selectedNodes = new Set(newNodes.map((n) => n.id));
   }
 
-  function handleKeyDown(event: KeyboardEvent) {
-    const bodyIsFocused = document?.activeElement?.nodeName !== "INPUT";
+  const isBodyFocused = () => document?.activeElement?.nodeName !== "INPUT";
 
-    if (event.key === "l") {
+  keymap.addShortcut({
+    key: "l",
+    description: "Select linked nodes",
+    callback: () => {
       const activeNode = graph.getNode($activeNodeId);
       if (activeNode) {
         const nodes = graph.getLinkedNodes(activeNode);
         $selectedNodes = new Set(nodes.map((n) => n.id));
       }
       console.log(activeNode);
-    }
+    },
+  });
 
-    if (event.key === "Escape") {
+  keymap.addShortcut({
+    key: "c",
+    ctrl: true,
+    description: "Copy active nodes",
+    callback: copyNodes,
+  });
+
+  keymap.addShortcut({
+    key: "v",
+    ctrl: true,
+    description: "Paste nodes",
+    callback: pasteNodes,
+  });
+
+  keymap.addShortcut({
+    key: "Escape",
+    description: "Deselect nodes",
+    callback: () => {
       $activeNodeId = -1;
       $selectedNodes?.clear();
       $selectedNodes = $selectedNodes;
       (document.activeElement as HTMLElement)?.blur();
-    }
+    },
+  });
 
-    if (event.key === "A" && event.shiftKey) {
+  keymap.addShortcut({
+    key: "A",
+    shift: true,
+    description: "Add new Node",
+    callback: () => {
       addMenuPosition = [mousePosition[0], mousePosition[1]];
-    }
+    },
+  });
+
+  keymap.addShortcut({
+    key: ".",
+    description: "Center camera",
+    callback: () => {
+      if (!isBodyFocused()) return;
 
-    if (event.key === "." && bodyIsFocused) {
       const average = [0, 0];
       for (const node of $nodes.values()) {
         average[0] += node.position[0];
@@ -564,40 +581,50 @@
         );
         if (mouseDown) return false;
       });
-    }
+    },
+  });
 
-    if (event.key === "a" && event.ctrlKey && bodyIsFocused) {
+  keymap.addShortcut({
+    key: "a",
+    ctrl: true,
+    description: "Select all nodes",
+    callback: () => {
+      if (!isBodyFocused()) return;
       $selectedNodes = new Set($nodes.keys());
-    }
+    },
+  });
 
-    if (event.key === "c" && event.ctrlKey) {
-      copyNodes();
-    }
-
-    if (event.key === "v" && event.ctrlKey) {
-      pasteNodes();
-    }
-
-    if (event.key === "z" && event.ctrlKey) {
+  keymap.addShortcut({
+    key: "z",
+    ctrl: true,
+    description: "Undo",
+    callback: () => {
+      if (!isBodyFocused()) return;
       graph.undo();
       for (const node of $nodes.values()) {
         updateNodePosition(node);
       }
-    }
+    },
+  });
 
-    if (event.key === "y" && event.ctrlKey) {
+  keymap.addShortcut({
+    key: "y",
+    ctrl: true,
+    description: "Redo",
+    callback: () => {
+      if (!isBodyFocused()) return;
       graph.redo();
       for (const node of $nodes.values()) {
         updateNodePosition(node);
       }
-    }
+    },
+  });
 
-    if (
-      (event.key === "Delete" ||
-        event.key === "Backspace" ||
-        event.key === "x") &&
-      bodyIsFocused
-    ) {
+  keymap.addShortcut({
+    key: ["Delete", "Backspace", "x"],
+    description: "Delete selected nodes",
+    callback: (event) => {
+      if (!isBodyFocused()) return;
       graph.startUndoGroup();
       if ($activeNodeId !== -1) {
         const node = graph.getNode($activeNodeId);
@@ -617,8 +644,8 @@
         $selectedNodes = $selectedNodes;
       }
       graph.saveUndoGroup();
-    }
-  }
+    },
+  });
 
   function handleMouseUp(event: MouseEvent) {
     const activeNode = graph.getNode($activeNodeId);
@@ -752,7 +779,7 @@
   tabindex="0"
   bind:clientWidth={width}
   bind:clientHeight={height}
-  on:keydown={handleKeyDown}
+  on:keydown={keymap.handleKeyboardEvent}
   on:mousedown={handleMouseDown}
 >
   <Canvas shadows={false} renderMode="on-demand" colorManagementEnabled={false}>

app/src/lib/graph-interface/graph/stores.ts

@@ -24,6 +24,8 @@ if ("getComputedStyle" in globalThis) {
 
   const body = document.body;
 
+  let lastStyle = "";
+
   function updateColors() {
 
     const style = getComputedStyle(body);
@@ -35,6 +37,11 @@ if ("getComputedStyle" in globalThis) {
     const active = style.getPropertyValue("--active");
     const selected = style.getPropertyValue("--selected");
 
+    const newStyle = `${layer0}${layer1}${layer2}${layer3}${outline}${active}${selected}`;
+
+    if (newStyle === lastStyle) return;
+    lastStyle = newStyle;
+
     colors.update(col => {
       col.layer0.setStyle(layer0);
       col.layer0.convertLinearToSRGB();

app/src/lib/graph-interface/node/NodeHeader.svelte

@@ -26,8 +26,8 @@
   const aspectRatio = 0.25;
 
   const path = createNodePath({
-    depth: 4,
-    height: 24,
+    depth: 7,
+    height: 40,
     y: 50,
     cornerTop,
     rightBump,
@@ -42,8 +42,8 @@
     aspectRatio,
   });
   const pathHover = createNodePath({
-    depth: 5,
-    height: 30,
+    depth: 9,
+    height: 50,
     y: 50,
     cornerTop,
     rightBump,

app/src/lib/graph-interface/node/NodeParameter.svelte

@@ -46,8 +46,8 @@
   const aspectRatio = 0.5;
 
   const path = createNodePath({
-    depth: 4,
-    height: 12,
+    depth: 7,
+    height: 20,
     y: 51,
     cornerBottom,
     leftBump,
@@ -62,8 +62,8 @@
     aspectRatio,
   });
   const pathHover = createNodePath({
-    depth: 6,
-    height: 18,
+    depth: 8,
+    height: 25,
     y: 50.5,
     cornerBottom,
     leftBump,