From 3004899e2a3ae74140777aa0dba7be759dc34610 Mon Sep 17 00:00:00 2001
From: Stephanie Gredell <s.raide@gmail.com>
Date: Sun, 8 Jun 2025 14:58:31 -0700
Subject: [PATCH] Move connection click logic to connection.js

---
 static/app.js        | 22 ----------------------
 static/connection.js | 22 +++++++++++++++++++++-
 static/modal.js      | 37 +++++++++++++++++++++++++++++++++++++
 static/node.js       |  3 ++-
 4 files changed, 60 insertions(+), 24 deletions(-)
 create mode 100644 static/modal.js

diff --git a/static/app.js b/static/app.js
index fb45c5f..702d8e8 100644
--- a/static/app.js
+++ b/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;
diff --git a/static/connection.js b/static/connection.js
index a398e43..8914bc1 100644
--- a/static/connection.js
+++ b/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;
+        }
+    }
 }
diff --git a/static/modal.js b/static/modal.js
new file mode 100644
index 0000000..f03e9cb
--- /dev/null
+++ b/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;
+}
+
diff --git a/static/node.js b/static/node.js
index 810166d..9ec188d 100644
--- a/static/node.js
+++ b/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();