From a7da696e51d51594b0ef2d0cfd2a420a8541d2e8 Mon Sep 17 00:00:00 2001
From: Sam Lavigne <splavigne@gmail.com>
Date: Tue, 29 Aug 2023 13:44:47 -0400
Subject: [PATCH] update svelte flow and fix node draggable

---
 package-lock.json | 22 +++++++++++-----------
 package.json      |  2 +-
 src/Graph.svelte  | 13 ++++++++-----
 src/Node.svelte   |  8 ++++++--
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b246822..e71c05f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
       },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^2.4.2",
-        "@xyflow/svelte": "^0.0.12",
+        "@xyflow/svelte": "^0.0.17",
         "svelte": "^4.0.5",
         "uuid": "^9.0.0",
         "vite": "^4.4.5",
@@ -583,9 +583,9 @@
       }
     },
     "node_modules/@types/d3-array": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.6.tgz",
-      "integrity": "sha512-NHkizg870sKYQn45oZT5ItoHqcgRgJD7KAiWZp4Udc6YdrFH2W0tZ2vv4shRHP+SXHoJ1G8B4I1GWb5oQSGypA==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.7.tgz",
+      "integrity": "sha512-4/Q0FckQ8TBjsB0VdGFemJOG8BLXUB2KKlL0VmZ+eOYeOnTb/wDRQqYWpBmQ6IlvWkXwkYiot+n9Px2aTJ7zGQ==",
       "dev": true
     },
     "node_modules/@types/d3-axis": {
@@ -884,13 +884,13 @@
       }
     },
     "node_modules/@xyflow/svelte": {
-      "version": "0.0.12",
-      "resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.0.12.tgz",
-      "integrity": "sha512-BXwOauzjInjPBdJb1GaKVCYIxyznQKzuEltnPb3i3/EO9GJHx1xcD/c8aBUBBnAG7EWBKtuiyDGk/EBW8MEmsg==",
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.0.17.tgz",
+      "integrity": "sha512-aD5o21wQt8iKgRznMNJVODd/U40oOiaIJie1niTQ5Tj+/TPZTpyChoKiH/VOqrI4tJlczCh9360uZo7sX8bQyg==",
       "dev": true,
       "dependencies": {
         "@svelte-put/shortcut": "^3.0.0",
-        "@xyflow/system": "0.0.2",
+        "@xyflow/system": "0.0.4",
         "classcat": "^5.0.4"
       },
       "peerDependencies": {
@@ -898,9 +898,9 @@
       }
     },
     "node_modules/@xyflow/system": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.2.tgz",
-      "integrity": "sha512-xtDf35E4Bwmt9IutmhNLna/vMNN3uRA/kwYUYTAifnWSCUaKENBqMOX4xAGNljBJX1yjo7FNlMRgn347raN69Q==",
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.4.tgz",
+      "integrity": "sha512-tFFu0ZYVdjL/CQKtY9nDrcb02H5p7SlzvEj7EXnTkmpahNDfnSpaM/h5466DZylkwLzwsMaPs9u2pjPcyLI93g==",
       "dev": true,
       "dependencies": {
         "@types/d3": "^7.4.0",
diff --git a/package.json b/package.json
index aedf7a2..d25e87d 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.4.2",
-    "@xyflow/svelte": "^0.0.12",
+    "@xyflow/svelte": "^0.0.17",
     "svelte": "^4.0.5",
     "uuid": "^9.0.0",
     "vite": "^4.4.5",
diff --git a/src/Graph.svelte b/src/Graph.svelte
index d9e79c6..1beef29 100644
--- a/src/Graph.svelte
+++ b/src/Graph.svelte
@@ -7,6 +7,7 @@
     Background,
     BackgroundVariant,
   } from "@xyflow/svelte";
+	import '@xyflow/svelte/dist/style.css';
   import Node from "./Node.svelte";
   import FitComp from "./FitComp.svelte";
   import ButtonEdge from "./ButtonEdge.svelte";
@@ -46,12 +47,14 @@
     <div class="flow">
       <div style="height: 100%; width: 100%">
         <SvelteFlow
-          nodesConnectable={!auto}
-          panOnDrag={!auto}
-          edgesUpdatable={!auto}
+					nodesDraggable={!$auto}
+          nodesConnectable={!$auto}
+          panOnDrag={!$auto}
+          edgesUpdatable={!$auto}
           connectOnClick={true}
-          nodesFocusable={!auto}
-          edgesFocusable={!auto}
+          nodesFocusable={!$auto}
+          edgesFocusable={!$auto}
+					zoomOnScroll={!$auto}
           deleteKey={0}
           on:nodeclick={onClick}
           {nodeTypes}
diff --git a/src/Node.svelte b/src/Node.svelte
index eb9bc61..d7f182d 100644
--- a/src/Node.svelte
+++ b/src/Node.svelte
@@ -53,7 +53,7 @@
     position={Position.Left}
     id={inp + "_" + index}
     class="handle {inp}"
-    style="top: {index * 12 + 4}px; left: -8px;">{inp}</Handle
+    style="top: {index * 12 + 4}px; left: -13px;">{inp}</Handle
   >
 {/each}
 {#each data.outputs as out, index}
@@ -62,17 +62,20 @@
     id={out + "_" + index}
     position={Position.Right}
     class="handle {out}"
-    style="top: {index * 12 + 4}px; right: -18px; left: auto;">{out}</Handle
+    style="top: {index * 12 + 4}px; right: -13px; left: auto;">{out}</Handle
   >
 {/each}
 
 <style>
   :global(:root) {
+    --edge-stroke-default: var(--b1) !important;
+    --edge-stroke: var(--b1) !important;
     --edge-color: var(--b1) !important;
     --edge-color-selected: black;
   }
   :global(.svelte-flow__node) {
     box-shadow: 2px 2px 0px var(--b2);
+		background-color: #fff;
   }
   :global(.svelte-flow__node.selected) {
     outline: 1px solid var(--b1) !important;
@@ -85,6 +88,7 @@
     background-color: white !important;
     font-size: 10px;
     line-height: 6px;
+		text-align: center;
   }
   :global(.handle.a) {
     /* border: 1px solid var(--b2) !important; */