feat: don't move graph on right click drag

app/src/lib/graph-interface/graph-state.svelte.ts

@@ -58,7 +58,9 @@ export class GraphState {
 
   wrapper = $state<HTMLDivElement>(null!);
   rect: DOMRect = $derived(
-    (this.wrapper && this.width && this.height) ? this.wrapper.getBoundingClientRect() : new DOMRect(0, 0, 0, 0)
+    (this.wrapper && this.width && this.height)
+      ? this.wrapper.getBoundingClientRect()
+      : new DOMRect(0, 0, 0, 0)
   );
 
   camera = $state<OrthographicCamera>(null!);
@@ -333,4 +335,8 @@ export class GraphState {
       && node.position[1] < this.cameraBounds[3]
     );
   }
+
+  openNodePalette() {
+    this.addMenuPosition = [this.mousePosition[0], this.mousePosition[1]];
+  }
 }

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

@@ -1,23 +1,23 @@
 <script lang="ts">
-  import type { Edge, NodeInstance } from "@nodarium/types";
+  import type { Edge, NodeInstance } from '@nodarium/types';
-  import { createKeyMap } from "../../helpers/createKeyMap";
+  import { Canvas } from '@threlte/core';
-  import AddMenu from "../components/AddMenu.svelte";
+  import { HTML } from '@threlte/extras';
-  import Background from "../background/Background.svelte";
+  import { createKeyMap } from '../../helpers/createKeyMap';
-  import BoxSelection from "../components/BoxSelection.svelte";
+  import Background from '../background/Background.svelte';
-  import EdgeEl from "../edges/Edge.svelte";
+  import AddMenu from '../components/AddMenu.svelte';
-  import NodeEl from "../node/Node.svelte";
+  import BoxSelection from '../components/BoxSelection.svelte';
-  import Camera from "../components/Camera.svelte";
+  import Camera from '../components/Camera.svelte';
-  import { Canvas } from "@threlte/core";
+  import HelpView from '../components/HelpView.svelte';
-  import HelpView from "../components/HelpView.svelte";
+  import Debug from '../debug/Debug.svelte';
-  import { getGraphManager, getGraphState } from "../graph-state.svelte";
+  import EdgeEl from '../edges/Edge.svelte';
-  import { HTML } from "@threlte/extras";
+  import { getGraphManager, getGraphState } from '../graph-state.svelte';
-  import { maxZoom, minZoom } from "./constants";
+  import NodeEl from '../node/Node.svelte';
-  import Debug from "../debug/Debug.svelte";
+  import { maxZoom, minZoom } from './constants';
-  import { FileDropEventManager } from "./drop.events";
+  import { FileDropEventManager } from './drop.events';
-  import { MouseEventManager } from "./mouse.events";
+  import { MouseEventManager } from './mouse.events';
 
   const {
-    keymap,
+    keymap
   }: {
     keymap: ReturnType<typeof createKeyMap>;
   } = $props();
@@ -45,19 +45,18 @@
     const newNode = graph.createNode({
       type: node.type,
       position: node.position,
-      props: node.props,
+      props: node.props
     });
     if (!newNode) return;
 
     if (graphState.activeSocket) {
-      if (typeof graphState.activeSocket.index === "number") {
+      if (typeof graphState.activeSocket.index === 'number') {
-        const socketType =
+        const socketType = graphState.activeSocket.node.state?.type?.outputs?.[
-          graphState.activeSocket.node.state?.type?.outputs?.[
           graphState.activeSocket.index
         ];
 
         const input = Object.entries(newNode?.state?.type?.inputs || {}).find(
-          (inp) => inp[1].type === socketType,
+          (inp) => inp[1].type === socketType
         );
 
         if (input) {
@@ -65,12 +64,11 @@
             graphState.activeSocket.node,
             graphState.activeSocket.index,
             newNode,
-            input[0],
+            input[0]
           );
         }
       } else {
-        const socketType =
+        const socketType = graphState.activeSocket.node.state?.type?.inputs?.[
-          graphState.activeSocket.node.state?.type?.inputs?.[
           graphState.activeSocket.index
         ];
 
@@ -85,7 +83,7 @@
             newNode,
             output.indexOf(output),
             graphState.activeSocket.node,
-            graphState.activeSocket.index,
+            graphState.activeSocket.index
           );
         }
       }
@@ -97,15 +95,15 @@
 </script>
 
 <svelte:window
-  onmousemove={(ev) => mouseEvents.handleMouseMove(ev)}
+  onmousemove={(ev) => mouseEvents.handleWindowMouseMove(ev)}
-  onmouseup={(ev) => mouseEvents.handleMouseUp(ev)}
+  onmouseup={(ev) => mouseEvents.handleWindowMouseUp(ev)}
 />
 
 <div
   onwheel={(ev) => mouseEvents.handleMouseScroll(ev)}
   bind:this={graphState.wrapper}
   class="graph-wrapper"
-  style="height: 100%;"
+  style="height: 100%"
   class:is-panning={graphState.isPanning}
   class:is-hovering={graphState.hoveredNodeId !== -1}
   aria-label="Graph"
@@ -115,6 +113,7 @@
   bind:clientHeight={graphState.height}
   onkeydown={(ev) => keymap.handleKeyboardEvent(ev)}
   onmousedown={(ev) => mouseEvents.handleMouseDown(ev)}
+  oncontextmenu={(ev) => mouseEvents.handleContextMenu(ev)}
   {...fileDropEvents.getEventListenerProps()}
 >
   <input
@@ -147,20 +146,18 @@
       <BoxSelection
         cameraPosition={graphState.cameraPosition}
         p1={{
-          x:
+          x: graphState.cameraPosition[0]
-            graphState.cameraPosition[0] +
+            + (graphState.mouseDown[0] - graphState.width / 2)
-            (graphState.mouseDown[0] - graphState.width / 2) /
+              / graphState.cameraPosition[2],
-              graphState.cameraPosition[2],
+          y: graphState.cameraPosition[1]
-          y:
+            + (graphState.mouseDown[1] - graphState.height / 2)
-            graphState.cameraPosition[1] +
+              / graphState.cameraPosition[2]
-            (graphState.mouseDown[1] - graphState.height / 2) /
-              graphState.cameraPosition[2],
         }}
         p2={{ x: graphState.mousePosition[0], y: graphState.mousePosition[1] }}
       />
     {/if}
 
-    {#if graph.status === "idle"}
+    {#if graph.status === 'idle'}
       {#if graphState.addMenuPosition}
         <AddMenu onnode={handleNodeCreation} />
       {/if}
@@ -207,9 +204,9 @@
           {/each}
         </div>
       </HTML>
-    {:else if graph.status === "loading"}
+    {:else if graph.status === 'loading'}
       <span>Loading</span>
-    {:else if graph.status === "error"}
+    {:else if graph.status === 'error'}
       <span>Error</span>
     {/if}
   </Canvas>

app/src/lib/graph-interface/graph/mouse.events.ts

@@ -1,7 +1,7 @@
 import { animate, lerp } from '$lib/helpers';
 import { type NodeInstance } from '@nodarium/types';
 import type { GraphManager } from '../graph-manager.svelte';
-import type { GraphState } from '../graph-state.svelte';
+import { type GraphState } from '../graph-state.svelte';
 import { snapToGrid as snapPointToGrid } from '../helpers';
 import { maxZoom, minZoom, zoomSpeed } from './constants';
 import { EdgeInteractionManager } from './edge.events';
@@ -16,7 +16,7 @@ export class MouseEventManager {
     this.edgeInteractionManager = new EdgeInteractionManager(graph, state);
   }
 
-  handleMouseUp(event: MouseEvent) {
+  handleWindowMouseUp(event: MouseEvent) {
     this.edgeInteractionManager.handleMouseUp();
     this.state.isPanning = false;
     if (!this.state.mouseDown) return;
@@ -151,7 +151,19 @@ export class MouseEventManager {
     this.state.addMenuPosition = null;
   }
 
+  handleContextMenu(event: MouseEvent) {
+    if (!this.state.addMenuPosition) {
+      event.preventDefault();
+      this.state.openNodePalette();
+    }
+  }
+
   handleMouseDown(event: MouseEvent) {
+    // Right click
+    if (event.button === 2) {
+      return;
+    }
+
     if (this.state.mouseDown) return;
     this.state.edgeEndPosition = null;
 
@@ -229,7 +241,7 @@ export class MouseEventManager {
     this.state.edgeEndPosition = null;
   }
 
-  handleMouseMove(event: MouseEvent) {
+  handleWindowMouseMove(event: MouseEvent) {
     let mx = event.clientX - this.state.rect.x;
     let my = event.clientY - this.state.rect.y;
 

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

@@ -59,9 +59,7 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
     key: 'A',
     shift: true,
     description: 'Add new Node',
-    callback: () => {
+    callback: () => graphState.openNodePalette()
-      graphState.addMenuPosition = [graphState.mousePosition[0], graphState.mousePosition[1]];
-    }
   });
 
   keymap.addShortcut({