feat: highlight possible sockets when dragging edge

Closes #14

app/src/lib/graph-interface/graph/mouse.events.ts

@@ -265,7 +265,7 @@ export class MouseEventManager {
         }
       }
 
-      if (_socket && smallestDist < 0.9) {
+      if (_socket && smallestDist < 1.5) {
         this.state.mousePosition = _socket.position;
         this.state.hoveredSocket = _socket;
       } else {

app/src/lib/graph-interface/node/NodeHeader.svelte

@@ -35,8 +35,8 @@
   );
   const pathHover = $derived(
     createNodePath({
-      depth: 8.5,
+      depth: 7,
-      height: 50,
+      height: 40,
       y: 49,
       cornerTop,
       rightBump,
@@ -113,6 +113,9 @@
     stroke: var(--stroke);
     stroke-width: var(--stroke-width);
     d: var(--path);
+
+    stroke-linejoin: round;
+    shape-rendering: geometricPrecision;
   }
 
   .content {

app/src/lib/graph-interface/node/NodeParameter.svelte

@@ -39,16 +39,6 @@
   const aspectRatio = 0.5;
 
   const path = $derived(
-    createNodePath({
-      depth: 7,
-      height: 20,
-      y: 50.5,
-      cornerBottom,
-      leftBump,
-      aspectRatio
-    })
-  );
-  const pathDisabled = $derived(
     createNodePath({
       depth: 6,
       height: 18,
@@ -60,8 +50,8 @@
   );
   const pathHover = $derived(
     createNodePath({
-      depth: 8,
+      depth: 7,
-      height: 25,
+      height: 20,
       y: 50.5,
       cornerBottom,
       leftBump,
@@ -74,7 +64,7 @@
   class="wrapper"
   data-node-type={node.type}
   data-node-input={id}
-  class:disabled={!graphState?.possibleSocketIds.has(socketId)}
+  class:possible-socket={graphState?.possibleSocketIds.has(socketId)}
 >
   {#key id && graphId}
     <div class="content" class:disabled={graph?.inputSockets?.has(socketId)}>
@@ -91,10 +81,9 @@
     </div>
 
     {#if node?.state?.type?.inputs?.[id]?.internal !== true}
-      <div data-node-socket class="large target"></div>
       <div
         data-node-socket
-        class="small target"
+        class="target"
         onmousedown={handleMouseDown}
         role="button"
         tabindex="0"
@@ -112,7 +101,6 @@
     style={`
       --path: path("${path}");
       --hover-path: path("${pathHover}");
-      --hover-path-disabled: path("${pathDisabled}");
     `}
   >
     <path vector-effect="non-scaling-stroke"></path>
@@ -128,28 +116,22 @@
   }
 
   .target {
+    width: 30px;
+    height: 30px;
     position: absolute;
     border-radius: 50%;
     top: 50%;
     transform: translateY(-50%) translateX(-50%);
-    /* background: red; */
-    /* opacity: 0.1; */
   }
 
-  .small.target {
+  .possible-socket .target {
-    width: 30px;
+    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
-    height: 30px;
+    background-color: rgba(255, 255, 255, 0.2);
+    z-index: -10;
   }
 
-  .large.target {
+  .target:hover ~ svg path{
-    width: 60px;
+    d: var(--hover-path);
-    height: 60px;
-    cursor: unset;
-    pointer-events: none;
-  }
-
-  :global(.hovering-sockets) .large.target {
-    pointer-events: all;
   }
 
   .content {
@@ -179,19 +161,16 @@
     stroke: var(--stroke);
     stroke-width: var(--stroke-width);
     d: var(--path);
-  }
 
-  :global {
+    stroke-linejoin: round;
-    .hovering-sockets .large:hover ~ svg path {
+    shape-rendering: geometricPrecision;
-      d: var(--hover-path);
-    }
   }
 
   .content.disabled {
     opacity: 0.2;
   }
 
-  .disabled svg path {
+  .possible-socket svg path {
-    d: var(--hover-path-disabled) !important;
+     d: var(--hover-path);
   }
 </style>