add position to payload and update on dragging nodes

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 => ({

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;

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 = () => {