feat: properly arrange inputs when previweing a connection

src/typescript/arcs.ts

@@ -173,7 +173,7 @@ const emptySpaces = <T extends IArc>(arcs: T[]): IArc[] => {
 
     return [
       {
-        arc: arcs[0].arc.reverse() as Vec2Like
+        arc: [arcs[0].arc[1], arcs[0].arc[0]] as Vec2Like
       }
     ]
   }
@@ -271,12 +271,12 @@ export const placeInputs = <T extends { output: NodeId | null }>(
   const connectedOverlapping = connected.map((input): T & IArc => {
     const other = getData(input.output!)
     const relative = sub2(null, other, position)
-    const angle = Math.atan2(relative[0], -relative[1])
+    const angle = Math.atan2(-relative[0], relative[1])
 
-    return {
+    return normalize({
       ...input,
       arc: [angle - maxHalfArcLength, angle + maxHalfArcLength]
-    }
+    })
   })
 
   let connectedLayered = solveOverlaps(connectedOverlapping)

src/typescript/render.ts

@@ -28,11 +28,11 @@ import {
 } from "./constants"
 import { TAU } from "@thi.ng/math"
 import { Type, IHiccupShape } from "@thi.ng/geom-api"
-import { withAttribs, Line, closestPoint } from "@thi.ng/geom"
+import { withAttribs, closestPoint } from "@thi.ng/geom"
 import { isPressed, MouseButtons } from "./mouse"
 import { DCons } from "@thi.ng/dcons"
 import { getMouseTarget, MouseTargetKind, MouseTarget } from "./target"
-import { refreshInputArcs, refreshInputArcsImpl } from "./sync"
+import { refreshInputArcsImpl } from "./sync"
 
 // Used in the Default purescript implementation of GeomCache
 export const emptyGeometryCache: GeometryCache = {
@@ -90,6 +90,8 @@ const updateConnectionPreview = (cache: GeometryCache, mouse: Vec) => {
       mouse
     })
 
+    cache.connection.node.inputOverwrites = {}
+
     cache.connectionPreview.attribs!.stroke = cache.connection.geom.attribs!.stroke
     cache.connectionPreview.points[0] = closestPoint(
       cache.connection.geom,
@@ -286,14 +288,20 @@ const createConnection = (
   input: IHasNode & { index: number }
 ) => {}
 
-const selectInput = (cache: GeometryCache, input: InputPartialConnection) => {
+const selectInput = (
+  cache: GeometryCache,
+  input: InputPartialConnection,
+  mouse: Vec
+) => {
   if (cache.connection._type === PartialKind.Output) {
     createConnection(cache, cache.connection, input)
   } else {
     cache.connection = {
       ...input,
       _type: PartialKind.Input
     }
+
+    updateConnectionPreview(cache, mouse)
   }
 }
 
@@ -315,8 +323,23 @@ export const onMouseDown = (ctx: CanvasRenderingContext2D) => (
     selectNode(cache, target.node, target.id)
   }
 
+  if (target._type === MouseTargetKind.Nothing) {
+    if (
+      cache.connection._type === PartialKind.Input &&
+      cache.connection.node.lastState
+    ) {
+      refreshInputArcsImpl(
+        cache,
+        cache.connection.id,
+        cache.connection.node.lastState
+      )
+    }
+
+    cache.connection._type = PartialKind.Nothing
+  }
+
   if (target._type === MouseTargetKind.NodeInput) {
-    selectInput(cache, target)
+    selectInput(cache, target, mousePosition)
   }
 
   if (

src/typescript/sync.ts

@@ -52,7 +52,8 @@ export const refreshInputArcsImpl = (
     (id) => positionOverwrites[id] ?? cache.nodes.get(id)?.position ?? [0, 0],
     inputs.map((output, index) => ({
       output: node.inputOverwrites[index] ?? output,
-      color: colorMap.inputs[index]
+      color: colorMap.inputs[index],
+      geom: node.inputs[index] as g.Arc
     })),
     node.position as Vec2Like
   )
@@ -62,10 +63,9 @@ export const refreshInputArcsImpl = (
   }
 
   for (let i = 0; i < arcs.length; i++) {
-    for (let j = 0; j < arcs[i].length; j++) {
-      const arc = arcs[i][j]
-
-      const geom = node.inputs[i * arcs.length + j] as g.Arc
+    const layer = arcs[i]
+    for (const arc of layer) {
+      const geom = arc.geom
       const radius = i * inputLayerOffset + nodeRadius
 
       geom.r = [radius, radius]

src/typescript/target.ts

@@ -76,7 +76,8 @@ export const getMouseTarget = (
             index,
             node,
             id,
-            closest: closestPoint(input, mousePosition)!
+            closest: closestPoint(input, mousePosition)!,
+            geom: input
           }))
         : []
     )
@@ -91,7 +92,7 @@ export const getMouseTarget = (
       node: closestInput.node,
       id: closestInput.id,
       index: closestInput.index,
-      geom: closestInput.node.inputs[closestInput.index] as g.Arc
+      geom: closestInput.geom as g.Arc
     }
   }