From 8533cf3ca88f903c0be7ac30d990527ffaebe064 Mon Sep 17 00:00:00 2001
From: Stephanie Gredell <s.raide@gmail.com>
Date: Sun, 8 Jun 2025 00:30:50 -0700
Subject: [PATCH] add position to payload and update on dragging nodes

---
 static/app.js        | 13 +++++++++----
 static/connection.js |  3 +--
 static/node.js       |  9 ++++-----
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/static/app.js b/static/app.js
index a9479ea..13b80dc 100644
--- a/static/app.js
+++ b/static/app.js
@@ -74,7 +74,10 @@ export class CanvasApp {
             const svgP = pt.matrixTransform(this.canvas.getScreenCTM().inverse());
             const x = svgP.x - this.componentSize.width / 2;
             const y = svgP.y - this.componentSize.height / 2;
-            new ComponentNode(type, x, y, this);
+            const node = new ComponentNode(type, x, y, this);
+            node.x = x;
+            node.y = y;
+            this.placedComponents.push(node)
             if (this.placeholderText) {
                 this.placeholderText.remove();
                 this.placeholderText = null;
@@ -220,9 +223,11 @@ export class CanvasApp {
         const nodes = this.placedComponents.map(n => ({
             id: n.id,
             type: n.type,
-            x: n.x,
-            y: n.y,
-            props: n.props
+            props: n.props,
+            position: {
+                x: n.x,
+                y: n.y
+            }
         }));
 
         const connections = this.connections.map(c => ({
diff --git a/static/connection.js b/static/connection.js
index 42dcd2a..de8c8ce 100644
--- a/static/connection.js
+++ b/static/connection.js
@@ -11,7 +11,7 @@ export class Connection {
             stroke: '#ccc', 'stroke-width': 2, 'marker-end': 'url(#arrowhead)'
         });
         this.hitbox = createSVGElement('circle', {
-            r: 8,
+            r: 12,
             fill: 'transparent',
             cursor: 'pointer',
         });
@@ -82,7 +82,6 @@ export class Connection {
     }
 
     toggleDirection() {
-        console.log('toggle direction')
         const order = ['forward', 'backward', 'bidirectional'];
         const currentIndex = order.indexOf(this.direction);
         const nextIndex = (currentIndex + 1) % order.length;
diff --git a/static/node.js b/static/node.js
index f63055e..88a7b7a 100644
--- a/static/node.js
+++ b/static/node.js
@@ -74,11 +74,10 @@ export class ComponentNode {
 
             this.group.setAttribute('transform', `translate(${newX}, ${newY})`);
 
-            this.app.connections.forEach(conn => {
-                if (conn.start === this || conn.end === this) {
-                    conn.updatePosition();
-                }
-            });
+            this.x = newX;
+            this.y = newY;
+
+            this.app.updateConnectionFor(this);
         };
 
         const onMouseUp = () => {