fix: stems not displaying correctly

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

@@ -778,6 +778,10 @@
 
   let isDragging = false;
 
+  function handleMouseLeave() {
+    isDragging = false;
+  }
+
   function handleDrop(event: DragEvent) {
     event.preventDefault();
     isDragging = false;
@@ -865,17 +869,21 @@
   on:mouseup={handleMouseUp}
   on:dragenter={handleDragEnter}
   on:dragover={handlerDragOver}
+  on:dragexit={handleDragEnd}
   on:drop={handleDrop}
+  on:mouseleave={handleMouseLeave}
   on:keydown={keymap.handleKeyboardEvent}
   on:mousedown={handleMouseDown}
 >
   <input
     type="file"
     accept="application/wasm"
+    id="drop-zone"
     disabled={!isDragging}
     on:dragend={handleDragEnd}
     on:dragleave={handleDragEnd}
   />
+  <label for="drop-zone" />
 
   <Canvas shadows={false} renderMode="on-demand" colorManagementEnabled={false}>
     <Camera bind:camera position={cameraPosition} />
@@ -928,10 +936,28 @@
     z-index: 1;
     width: 100%;
     height: 100%;
-    background: red;
-    opacity: 0.5;
+    background: var(--layer-2);
+    opacity: 0;
   }
   input:disabled {
-    display: none;
+    opacity: 0;
+    pointer-events: none;
+  }
+  input:disabled + label {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  label {
+    position: absolute;
+    z-index: 1;
+    top: 10px;
+    left: 10px;
+    border-radius: 5px;
+    width: calc(100% - 20px);
+    height: calc(100% - 25px);
+    border: dashed 4px var(--layer-2);
+    background: var(--layer-1);
+    opacity: 0.5;
   }
 </style>

app/src/lib/result-viewer/Viewer.svelte

@@ -4,6 +4,7 @@
   import { BufferGeometry, Float32BufferAttribute, Vector3 } from "three";
   import { decodeFloat } from "@nodes/utils";
   import type { PerformanceStore } from "$lib/performance";
+  import { AppSettings } from "$lib/settings/app-settings";
 
   export let result: Int32Array;
 
@@ -107,9 +108,9 @@
     const amount = (encodedData.length - 1) / 4;
 
     for (let i = 0; i < amount; i++) {
-      const x = decodeFloat(encodedData[1 + i * 4 + 0]);
-      const y = decodeFloat(encodedData[1 + i * 4 + 1]);
-      const z = decodeFloat(encodedData[1 + i * 4 + 2]);
+      const x = decodeFloat(encodedData[2 + i * 4 + 0]);
+      const y = decodeFloat(encodedData[2 + i * 4 + 1]);
+      const z = decodeFloat(encodedData[2 + i * 4 + 2]);
       positions.push(new Vector3(x, y, z));
     }
 
@@ -127,16 +128,18 @@
     totalVertices = 0;
     totalFaces = 0;
 
-    a = performance.now();
-    lines = inputs
-      .map((input) => {
-        if (input[0] === 0) {
-          return createLineGeometryFromEncodedData(input);
-        }
-      })
-      .filter(Boolean) as Vector3[][];
-    b = performance.now();
-    perf?.addPoint("create-lines", b - a);
+    if ($AppSettings.showStemLines) {
+      a = performance.now();
+      lines = inputs
+        .map((input) => {
+          if (input[0] === 0) {
+            return createLineGeometryFromEncodedData(input);
+          }
+        })
+        .filter(Boolean) as Vector3[][];
+      b = performance.now();
+      perf?.addPoint("create-lines", b - a);
+    }
 
     a = performance.now();
     geometries = inputs