From c653fe95791ad8ed309fcd52a66d0a785903589f Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sat, 5 Aug 2023 00:55:19 -0700
Subject: [PATCH] Add a few node graph style improvements

Also add smoothing to node dragging
---
 .../src/components/panels/NodeGraph.svelte    | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/panels/NodeGraph.svelte b/frontend/src/components/panels/NodeGraph.svelte
index 199c586d..f68ca4d9 100644
--- a/frontend/src/components/panels/NodeGraph.svelte
+++ b/frontend/src/components/panels/NodeGraph.svelte
@@ -406,7 +406,17 @@
 			if (draggingNodes.roundX !== deltaX || draggingNodes.roundY !== deltaY) {
 				draggingNodes.roundX = deltaX;
 				draggingNodes.roundY = deltaY;
-				refreshLinks();
+
+				let stop = false;
+				const refresh = () => {
+					if (!stop) refreshLinks();
+					requestAnimationFrame(refresh);
+				};
+				refresh();
+				const DRAG_SMOOTHING_TIME = 0.1;
+				setTimeout(() => {
+					stop = true;
+				}, DRAG_SMOOTHING_TIME * 1000 + 10);
 			}
 		}
 	}
@@ -550,7 +560,7 @@
 			"--dot-radius": `${dotRadius}px`,
 		}}
 	>
-		<img src="https://files.keavon.com/-/MountainousDroopyBlueshark/flyover.jpg" />
+		<!-- <img src="https://files.keavon.com/-/MountainousDroopyBlueshark/flyover.jpg" /> -->
 		<div class="fade-artwork" />
 		<!-- Right click menu for adding nodes -->
 		{#if nodeListLocation}
@@ -902,9 +912,14 @@
 				.node {
 					position: absolute;
 					display: flex;
-					backdrop-filter: blur(8px) brightness(100% - 33%);
 					left: calc(var(--offset-left) * 24px);
 					top: calc(var(--offset-top) * 24px);
+					transition: top 0.1s cubic-bezier(0, 0, 0.2, 1), left 0.1s cubic-bezier(0, 0, 0.2, 1); // Update `DRAG_SMOOTHING_TIME` in the JS above
+					// TODO: Find a solution for this having no effect in Firefox due to a browser bug caused when the two ancestor
+					// elements, `.graph` and `.panel`, have the simultaneous pairing of `overflow: hidden` and `border-radius`.
+					// See: https://stackoverflow.com/questions/75137879/bug-with-backdrop-filter-in-firefox
+					backdrop-filter: blur(4px);
+					background: rgba(0, 0, 0, 0.33);
 
 					&::after {
 						content: "";
@@ -1038,10 +1053,12 @@
 
 						&::before,
 						svg:not(.port) {
+							pointer-events: none;
 							position: absolute;
 							margin: auto;
 							inset: 1px;
-							pointer-events: none;
+							width: 100%;
+							height: 100%;
 						}
 
 						.port {