feat: don't move graph on right click drag

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>