Support right click delete node, add source/sink empty check

Maxflow-Visualization · Aug 1, 2024 · 7fc7f41 · 7fc7f41
1 parent bba99c0
commit 7fc7f41
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -171,13 +171,17 @@ <h2>Selected Path(s)</h2>
           </div>
 
           <div id="mark-as-source-or-sink" style="display: none; width: 350px; margin: auto;">
-            <div class="col-md-4">
+            <div class="col-md-3">
               <button id="mark-as-source" class="btn btn-primary btn-sm">Mark as the Source</button>
             </div>
-            <div class="col-md-1"></div>
-            <div class="col-md-4">
+            <div class="col-md-2"></div>
+            <div class="col-md-3">
               <button id="mark-as-sink" class="btn btn-primary btn-sm">Mark as the Sink</button>
             </div>
+            <div class="col-md-1"></div>
+            <div class="col-md-1">
+              <button id="delete-node" class="btn btn-danger btn-sm">Delete</button>
+            </div>
           </div>
 
         </form>

diff --git a/js/app.js b/js/app.js
@@ -88,6 +88,20 @@ $(function () {
   var originalFlowNetwork = [];
   var showOriginalCapacitiesAndCurrentFlow = false;
 
+  var defaults = {
+    handleColor: "grey",
+    handleSize: 15,
+    handleLineWidth: 10,
+    handleNodes: "node",
+    toggleOffOnLeave: true,
+    edgeType: function (source, target) {
+      return hasEdge(source, target) ? null : 'flat';
+    },
+  }
+
+  // edge handles, which is used for creating edge interactively
+  cy.edgehandles(defaults);
+
   cy.panzoom({
     // ... options ...
   });
@@ -105,20 +119,6 @@ $(function () {
     return hasEdge;
   }
 
-  var defaults = {
-    handleColor: "grey",
-    handleSize: 15,
-    handleLineWidth: 10,
-    handleNodes: "node",
-    toggleOffOnLeave: true,
-    edgeType: function (source, target) {
-      return hasEdge(source, target) ? null : 'flat';
-    },
-  }
-
-  // edge handles, which is used for creating edge interactively
-  cy.edgehandles(defaults);
-
   // Check which mode are we in: modifying or practicing
   function allowModify() {
     return $("#state").text().includes("State: Graph Creation");
@@ -401,7 +401,7 @@ function cancelHighlightedElements() {
       allowModify() ||
       (state === UPDATE_RESIDUAL_GRAPH && cy.$(":selected").isEdge() && !cy.$(":selected").css("label").includes("/"))
     ) {
-      // Delete only if user is not updating capacity, I know this !"is not hidden" is really weird. However, jQuery (F*** it for wasting 1 hour of my time!)'s "is hidden"
+      // Delete only if user is not updating capacity, I know this !"is not hidden" is really weird. However, jQuery's "is hidden"
       // only checks for css attributes display and visibility whereas jQuery's hide does not change those attributes but rather caches them...
       if (e.key == "Delete" && !$("#mouse-update").is(":not(':hidden')")) {
         const inputElement = document.getElementById("label");
@@ -454,6 +454,17 @@ function cancelHighlightedElements() {
       source = source.substring(source.indexOf("=") + 1);
       sink = $("#sink").text();
       sink = sink.substring(sink.indexOf("=") + 1);
+
+      if (source === "")
+      {
+        alert("Please specify a source!");
+        return;
+      }
+      if (sink === "")
+      {
+        alert("Please specify a sink!");
+        return;
+      }
       if (source === sink) {
         alert("The source and the sink can not be the same node!");
         return;
@@ -462,6 +473,7 @@ function cancelHighlightedElements() {
 
       cy.edgehandles("disable");
 
+
       hideElementAndItsChildren(".buttons");
       state = states[index];
       showElementAndItsChildren(".ending-actions");
@@ -1179,6 +1191,22 @@ function cancelHighlightedElements() {
     document.getElementById("mark-as-source-or-sink").style.display = "none"
   });
 
+  $("#delete-node").on("click", function(event) {
+    event.preventDefault();
+    lastRightClickedNode.remove();
+    document.getElementById("mark-as-source-or-sink").style.display = "none";
+    // source = $("#source").text()
+    if (lastRightClickedNode.id() == source)
+    {
+      $("#source").text("Source=");
+    }
+    sink = $("#sink").text()
+    if (lastRightClickedNode.id() == sink)
+    {
+      $("#sink").text("Sink=");
+    }
+  });
+
   // Enter is the same as click
   $("#floatingText").on("keydown", function (event) {
     if (event.which === ENTER_KEY) {

diff --git a/js/file-layout-utils.js b/js/file-layout-utils.js
@@ -201,4 +201,5 @@ function resizeAndCenterAccordingToCurrentGraphBlock() {
   // resize and center nodes/edges/etc.
   cy.resize();
   cy.center();
+  cy.edgehandles("resize");
 }