Move connection click logic to connection.js

static/app.js

@@ -140,28 +140,6 @@ export class CanvasApp {
         });
     }
 
-    handleConnectionClick(nodeObj) {
-        if (!this.connectionStart) {
-            this.connectionStart = nodeObj;
-            nodeObj.group.classList.add('selected');
-        } else if (this.connectionStart === nodeObj) {
-            this.connectionStart.group.classList.remove('selected');
-            this.connectionStart = null;
-        } else {
-            const defaultLabel = 'Read traffic';
-            const label = prompt('Enter connection label:', defaultLabel);
-            const protocol = prompt('Protocol (e.g. HTTP, gRPC, Kafka:', 'HTTP')
-            if (label && protocol) {
-                const conn = new Connection(this.connectionStart, nodeObj, label, protocol, this);
-                conn.protocol = protocol;
-                conn.protocolText.textContent = protocol;
-                this.connections.push(conn);
-            }
-            this.connectionStart.group.classList.remove('selected');
-            this.connectionStart = null;
-        }
-    }
-
     showPropsPanel(nodeObj) {
         this.activeNode = nodeObj;
         const panel = this.nodePropsPanel;

static/connection.js

@@ -22,7 +22,7 @@ export class Connection {
         });
         this.text.textContent = label;
         this.protocolText = createSVGElement('text', {
-            'text-ancor': 'middle',
+            'text-anchor': 'middle',
             'font-size': 10,
             fill: '#888'
         });
@@ -113,4 +113,24 @@ export class Connection {
         this.line.setAttribute('stroke', '#333');
         this.line.setAttribute('stroke-width', 2);
     }
+
+    static handleClick(nodeObj, app) {
+        if (!app.connectionStart) {
+            app.connectionStart = nodeObj;
+            nodeObj.group.classList.add('selected');
+        } else if (app.connectionStart === nodeObj) {
+            app.connectionStart.group.classList.remove('selected');
+            app.connectionStart = null;
+        } else {
+            const defaultLabel = 'Read traffic';
+            const label = prompt('Enter connection label:', defaultLabel);
+            const protocol = prompt('Protocol (e.g. HTTP, gRPC, Kafka):', 'HTTP');
+            if (label && protocol) {
+                const conn = new Connection(app.connectionStart, nodeObj, label, protocol, app);
+                app.connections.push(conn);
+            }
+            app.connectionStart.group.classList.remove('selected');
+            app.connectionStart = null;
+        }
+    }
 }

static/modal.js

@@ -0,0 +1,37 @@
+let currentEditingConnection = null;
+
+export function showConnectionModal(connection, onSave) {
+    const modal = document.getElementById('connection-modal');
+    const labelInput = document.getElementById('connection-label');
+    const protocolInput = document.getElementById('connection-protocol');
+    const saveBtn = document.getElementById('modal-save');
+    const cancelBtn = document.getElementById('modal-cancel');
+    const closeBtn = document.getElementById('modal-close');
+
+    currentEditingConnection = connection;
+
+    labelInput.value = connection.label || '';
+    protocolInput.value = connection.protocol || '';
+
+    modal.style.display = 'flex';
+    labelInput.focus();
+
+    const close = () => {
+        modal.style.display = 'none';
+        currentEditingConnection = null;
+    };
+
+    saveBtn.onclick = () => {
+        connection.label = labelInput.value.trim();
+        connection.protocol = protocolInput.value.trim();
+        connection.text.textContent = connection.label;
+        connection.protocolText.textContent = connection.protocol;
+        connection.updatePosition();
+        if (onSave) onSave(connection);
+        close();
+    };
+
+    cancelBtn.onclick = close;
+    closeBtn.onclick = close;
+}
+

static/node.js

@@ -1,3 +1,4 @@
+import { Connection } from './connection.js';
 import { generateNodeId, createSVGElement } from './utils.js';
 
 export class ComponentNode {
@@ -42,7 +43,7 @@ export class ComponentNode {
         this.group.addEventListener('click', (e) => {
             e.stopPropagation();
             if (app.arrowMode) {
-                app.handleConnectionClick(this);
+                Connection.handleClick(this, app);
             } else {
                 app.clearSelection();
                 this.select();