From 3e019e4e218134bd1eafd678e35cb503f5822d80 Mon Sep 17 00:00:00 2001
From: Felix Hungenberg <30648730+shiftgeist@users.noreply.github.com>
Date: Thu, 22 Jan 2026 23:26:26 +0100
Subject: [PATCH] feat: don't move graph on right click drag

---
 .../lib/graph-interface/graph-state.svelte.ts | 22 +++--
 .../lib/graph-interface/graph/Graph.svelte    | 85 +++++++++----------
 .../lib/graph-interface/graph/mouse.events.ts | 24 ++++--
 app/src/lib/graph-interface/keymaps.ts        |  4 +-
 4 files changed, 74 insertions(+), 61 deletions(-)

diff --git a/app/src/lib/graph-interface/graph-state.svelte.ts b/app/src/lib/graph-interface/graph-state.svelte.ts
index c75d4f7..aaf1f7c 100644
--- a/app/src/lib/graph-interface/graph-state.svelte.ts
+++ b/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!);
@@ -187,13 +189,13 @@ export class GraphState {
     }
     const height = 5
       + 10
-      * Object.keys(node.inputs).filter(
-        (p) =>
-          p !== 'seed'
-          && node?.inputs
-          && !('setting' in node?.inputs?.[p])
-          && node.inputs[p].hidden !== true
-      ).length;
+        * Object.keys(node.inputs).filter(
+          (p) =>
+            p !== 'seed'
+            && node?.inputs
+            && !('setting' in node?.inputs?.[p])
+            && node.inputs[p].hidden !== true
+        ).length;
     this.nodeHeightCache[nodeTypeId] = height;
     return height;
   }
@@ -333,4 +335,8 @@ export class GraphState {
       && node.position[1] < this.cameraBounds[3]
     );
   }
+
+  openNodePalette() {
+    this.addMenuPosition = [this.mousePosition[0], this.mousePosition[1]];
+  }
 }
diff --git a/app/src/lib/graph-interface/graph/Graph.svelte b/app/src/lib/graph-interface/graph/Graph.svelte
index 052af80..d0dbd5f 100644
--- a/app/src/lib/graph-interface/graph/Graph.svelte
+++ b/app/src/lib/graph-interface/graph/Graph.svelte
@@ -1,23 +1,23 @@
 <script lang="ts">
-  import type { Edge, NodeInstance } from "@nodarium/types";
-  import { createKeyMap } from "../../helpers/createKeyMap";
-  import AddMenu from "../components/AddMenu.svelte";
-  import Background from "../background/Background.svelte";
-  import BoxSelection from "../components/BoxSelection.svelte";
-  import EdgeEl from "../edges/Edge.svelte";
-  import NodeEl from "../node/Node.svelte";
-  import Camera from "../components/Camera.svelte";
-  import { Canvas } from "@threlte/core";
-  import HelpView from "../components/HelpView.svelte";
-  import { getGraphManager, getGraphState } from "../graph-state.svelte";
-  import { HTML } from "@threlte/extras";
-  import { maxZoom, minZoom } from "./constants";
-  import Debug from "../debug/Debug.svelte";
-  import { FileDropEventManager } from "./drop.events";
-  import { MouseEventManager } from "./mouse.events";
+  import type { Edge, NodeInstance } from '@nodarium/types';
+  import { Canvas } from '@threlte/core';
+  import { HTML } from '@threlte/extras';
+  import { createKeyMap } from '../../helpers/createKeyMap';
+  import Background from '../background/Background.svelte';
+  import AddMenu from '../components/AddMenu.svelte';
+  import BoxSelection from '../components/BoxSelection.svelte';
+  import Camera from '../components/Camera.svelte';
+  import HelpView from '../components/HelpView.svelte';
+  import Debug from '../debug/Debug.svelte';
+  import EdgeEl from '../edges/Edge.svelte';
+  import { getGraphManager, getGraphState } from '../graph-state.svelte';
+  import NodeEl from '../node/Node.svelte';
+  import { maxZoom, minZoom } from './constants';
+  import { FileDropEventManager } from './drop.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") {
-        const socketType =
-          graphState.activeSocket.node.state?.type?.outputs?.[
-            graphState.activeSocket.index
-          ];
+      if (typeof graphState.activeSocket.index === 'number') {
+        const socketType = 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,14 +64,13 @@
             graphState.activeSocket.node,
             graphState.activeSocket.index,
             newNode,
-            input[0],
+            input[0]
           );
         }
       } else {
-        const socketType =
-          graphState.activeSocket.node.state?.type?.inputs?.[
-            graphState.activeSocket.index
-          ];
+        const socketType = graphState.activeSocket.node.state?.type?.inputs?.[
+          graphState.activeSocket.index
+        ];
 
         const output = newNode.state?.type?.outputs?.find((out) => {
           if (socketType?.type === out) return true;
@@ -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)}
-  onmouseup={(ev) => mouseEvents.handleMouseUp(ev)}
+  onmousemove={(ev) => mouseEvents.handleWindowMouseMove(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:
-            graphState.cameraPosition[0] +
-            (graphState.mouseDown[0] - graphState.width / 2) /
-              graphState.cameraPosition[2],
-          y:
-            graphState.cameraPosition[1] +
-            (graphState.mouseDown[1] - graphState.height / 2) /
-              graphState.cameraPosition[2],
+          x: graphState.cameraPosition[0]
+            + (graphState.mouseDown[0] - graphState.width / 2)
+              / graphState.cameraPosition[2],
+          y: graphState.cameraPosition[1]
+            + (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>
diff --git a/app/src/lib/graph-interface/graph/mouse.events.ts b/app/src/lib/graph-interface/graph/mouse.events.ts
index c856a77..c70d36f 100644
--- a/app/src/lib/graph-interface/graph/mouse.events.ts
+++ b/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;
 
@@ -245,7 +257,7 @@ export class MouseEventManager {
       for (const socket of this.state.possibleSockets) {
         const dist = Math.sqrt(
           (socket.position[0] - this.state.mousePosition[0]) ** 2
-          + (socket.position[1] - this.state.mousePosition[1]) ** 2
+            + (socket.position[1] - this.state.mousePosition[1]) ** 2
         );
         if (dist < smallestDist) {
           smallestDist = dist;
@@ -377,9 +389,9 @@ export class MouseEventManager {
     // Update camera position and zoom level
     this.state.cameraPosition[0] = this.state.mousePosition[0]
       - (this.state.mousePosition[0] - this.state.cameraPosition[0])
-      / zoomRatio;
+        / zoomRatio;
     this.state.cameraPosition[1] = this.state.mousePosition[1]
       - (this.state.mousePosition[1] - this.state.cameraPosition[1])
-      / zoomRatio, this.state.cameraPosition[2] = newZoom;
+        / zoomRatio, this.state.cameraPosition[2] = newZoom;
   }
 }
diff --git a/app/src/lib/graph-interface/keymaps.ts b/app/src/lib/graph-interface/keymaps.ts
index 9fd9b54..44d98f4 100644
--- a/app/src/lib/graph-interface/keymaps.ts
+++ b/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: () => {
-      graphState.addMenuPosition = [graphState.mousePosition[0], graphState.mousePosition[1]];
-    }
+    callback: () => graphState.openNodePalette()
   });
 
   keymap.addShortcut({