From dcde94c7a8a4ff80b69a7900beb07d618d1fc3c7 Mon Sep 17 00:00:00 2001
From: wisplite <jonasargrill@gmail.com>
Date: Tue, 9 Sep 2025 09:47:12 -0500
Subject: [PATCH] Add cancel button to markNeighbor walkthrough mode (it can
 take forever on large networks)

---
 index.html     |  1 +
 script.js      | 40 +++++++++++++++++++++++++++++++++++++++-
 style-dark.css |  6 ++++++
 style.css      |  6 ++++++
 4 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index bf1c3f0..b905071 100644
--- a/index.html
+++ b/index.html
@@ -64,6 +64,7 @@
                     <input type="checkbox" id="quickPlace" class="simToggle">
                     <label for="quickPlace">Quick Place</label>
                 </div>
+                <button id="cancelMarkNeighbor">Cancel</button>
             </div>
             <div id="centerColumn" style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70%; height: 100%; margin: 0 auto;">
                 <div id="simContainer"></div>
diff --git a/script.js b/script.js
index 8464928..1bb1ae6 100644
--- a/script.js
+++ b/script.js
@@ -6,6 +6,10 @@ var MAX_CONNECTIONS = 6;
 var warningModalShown = false;
 var displayWarningWhenDone = false;
 var stillRouting = false;
+var markNeighborInterval = null;
+// Track all active intervals for marking neighbors, and a cancel flag
+var markNeighborIntervals = new Set();
+var cancelMarkNeighborRequested = false;
 
 function smoothColorTransition(color1, color2, min, max, current) {
     // Clamp current between min and max
@@ -311,6 +315,9 @@ async function routePacket(currentNode, goalNode, packetInfo, first=false) {
 }
 
 const markNeighborsAsFailed = (nodeId, from, packetId, visited = new Set()) => {
+    if (cancelMarkNeighborRequested) {
+        return;
+    }
     if (visited.has(nodeId)) {
         return;
     }
@@ -318,10 +325,22 @@ const markNeighborsAsFailed = (nodeId, from, packetId, visited = new Set()) => {
 
     if (warningModalShown) {
         // enable walkthrough mode to prevent browser from freezing
+        if (markNeighborIntervals.size === 0) {
+            cancelMarkNeighborRequested = false;
+        }
+        document.getElementById('cancelMarkNeighbor').style.display = 'block';
         const neighborsSnapshot = (nodeTable[nodeId]?.connections?.slice()) || [];
         const neighborsLength = neighborsSnapshot.length;
         let currentIdx = 0;
         const intervalId = setInterval(() => {
+            if (cancelMarkNeighborRequested) {
+                clearInterval(intervalId);
+                markNeighborIntervals.delete(intervalId);
+                if (markNeighborIntervals.size === 0) {
+                    document.getElementById('cancelMarkNeighbor').style.display = 'none';
+                }
+                return;
+            }
             if (currentIdx < neighborsLength) {
                 const neighbor = neighborsSnapshot[currentIdx];
                 if (!visited.has(neighbor) && 
@@ -335,8 +354,13 @@ const markNeighborsAsFailed = (nodeId, from, packetId, visited = new Set()) => {
                 currentIdx++;
             } else {
                 clearInterval(intervalId);
+                markNeighborIntervals.delete(intervalId);
+                if (markNeighborIntervals.size === 0) {
+                    document.getElementById('cancelMarkNeighbor').style.display = 'none';
+                }
             }
-        }, 10);
+        }, 1);
+        markNeighborIntervals.add(intervalId);
         return;
     }
 
@@ -905,8 +929,22 @@ window.onload = function() {
     consoleContainer.appendChild(consoleOutput);
 
     document.getElementById('simContainer').appendChild(openConsoleButton);
+
+    // Ensure cancel button is hidden on load
+    document.getElementById('cancelMarkNeighbor').style.display = 'none';
 }
 
+document.getElementById('cancelMarkNeighbor').addEventListener('click', function() {
+    consoleLog('Cancelling mark neighbor...');
+    cancelMarkNeighborRequested = true;
+    // Clear any tracked intervals
+    for (let id of Array.from(markNeighborIntervals)) {
+        clearInterval(id);
+        markNeighborIntervals.delete(id);
+    }
+    document.getElementById('cancelMarkNeighbor').style.display = 'none';
+});
+
 function consoleLog(message) {
     const consoleOutput = document.getElementById('consoleOutput');
     consoleOutput.innerHTML = `${message}`;
diff --git a/style-dark.css b/style-dark.css
index 80dca4f..40bc577 100644
--- a/style-dark.css
+++ b/style-dark.css
@@ -301,4 +301,10 @@ input[type="checkbox"], input[type="radio"] {
     height: 50%;
     background-color: #000000;
     color: #e0e0e0;
+}
+
+#cancelMarkNeighbor {
+    width: 100%;
+    margin-top: 10px;
+    display: none;
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index 3b17058..e480d77 100644
--- a/style.css
+++ b/style.css
@@ -203,4 +203,10 @@ html, body {
     height: 50%;
     background-color: #ffffff;
     color: #000000;
+}
+
+#cancelMarkNeighbor {
+    width: 100%;
+    margin-top: 10px;
+    display: none;
 }
\ No newline at end of file