Don't show slots connecting cancelling while not connecting

Sankeyfactory · Aug 31, 2024 · ed66484 · ed66484
1 parent 87e006a
commit ed66484
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -44,12 +44,12 @@
                 <p id="ratio-display">Zoom: 1.0x</p>
             </div>
             <div class="row">
+                <div class="button hidden" id="cancel-linking" title="Cancel connecting nodes">
+                    <svg class="unlink_icon-placeholder"></svg>
+                </div>
                 <div class="button" id="open-help" title="Help">
                     <svg class="question-mark_icon-placeholder"></svg>
                 </div>
-                <div class="button" id="cancel-linking" title="Cancel connecting nodes">
-                    <svg class="unlink_icon-placeholder"></svg>
-                </div>
                 <div class="button toggle off" id="grid-toggle" title="Toggle grid">
                     <svg class="off grid_icon-placeholder"></svg>
                     <svg class="on disable-grid_icon-placeholder"></svg>
@@ -473,6 +473,10 @@ <h2 class="title">Help <span class="background">&nbsp;&nbsp;&nbsp;&nbsp;(⩾﹏
 
     <div id="canvas-context-menu-container" class="context-menu-container hidden">
         <div class="context-menu">
+            <div class="option hidden" id="cancel-linking-option">
+                <svg class="unlink_icon-placeholder"></svg>
+                <div class="text">Cancel connecting nodes</div>
+            </div>
             <div class="option" id="create-node-option">
                 <svg class="plus_icon-placeholder"></svg>
                 <div class="text">Create node</div>
@@ -497,10 +501,6 @@ <h2 class="title">Help <span class="background">&nbsp;&nbsp;&nbsp;&nbsp;(⩾﹏
                     <div class="text">Enable grid</div>
                 </div>
             </div>
-            <div class="option" id="cancel-linking-option">
-                <svg class="unlink_icon-placeholder"></svg>
-                <div class="text">Cancel connecting nodes</div>
-            </div>
             <div class="option" id="show-help-option">
                 <svg class="question-mark_icon-placeholder"></svg>
                 <div class="text">Show help</div>

diff --git a/src/MouseHandler.ts b/src/MouseHandler.ts
@@ -96,6 +96,9 @@ export class MouseHandler
             this.slotConnectingCurve = undefined;
             this.mouseStatus = MouseHandler.MouseStatus.Free;
             Settings.instance.connectingResource = undefined;
+
+            document.querySelector(".controls #cancel-linking")!.classList.add("hidden");
+            document.querySelector("#canvas-context-menu-container #cancel-linking-option")!.classList.add("hidden");
         }
     }
 
@@ -231,6 +234,9 @@ export class MouseHandler
         this.slotConnectingLine.setAttribute("d", path);
 
         this.viewport.appendChild(this.slotConnectingLine);
+
+        document.querySelector(".controls #cancel-linking")!.classList.remove("hidden");
+        document.querySelector("#canvas-context-menu-container #cancel-linking-option")!.classList.remove("hidden");
     }
 
     public startDraggingNode(node: SankeyNode, position: Point)