Added UI button for cancelling linking slots

Sankeyfactory · Aug 21, 2024 · d2ab94d · d2ab94d
1 parent 70ecfa2
commit d2ab94d
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -25,13 +25,13 @@
                 <p id="ratio-display">Zoom: 1.0x</p>
             </div>
             <div class="row">
-                <div class="button" id="create-node">
+                <div class="button" id="cancel-linking" title="Cancel connecting machines">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                         <path
-                            d="M440-440H240q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h200v-200q0-17 11.5-28.5T480-760q17 0 28.5 11.5T520-720v200h200q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H520v200q0 17-11.5 28.5T480-200q-17 0-28.5-11.5T440-240v-200Z" />
+                            d="m625-449-71-71h46q17 0 28.5 11.5T640-480q0 10-4 18t-11 13ZM820-84q-11 11-28 11t-28-11L84-764q-11-11-11-28t11-28q11-11 28-11t28 11l680 680q11 11 11 28t-11 28ZM280-280q-83 0-141.5-58.5T80-480q0-69 42-123t108-71l74 74h-24q-50 0-85 35t-35 85q0 50 35 85t85 35h120q17 0 28.5 11.5T440-320q0 17-11.5 28.5T400-280H280Zm80-160q-17 0-28.5-11.5T320-480q0-17 11.5-28.5T360-520h25l79 80H360Zm380 112q-9-14-6.5-30t16.5-25q23-17 36.5-42t13.5-55q0-50-35-85t-85-35H560q-17 0-28.5-11.5T520-640q0-17 11.5-28.5T560-680h120q83 0 141.5 58.5T880-480q0 49-22.5 91.5T795-318q-14 9-30 6.5T740-328Z" />
                     </svg>
                 </div>
-                <div class="button" id="lock-viewport">
+                <div class="button" id="lock-viewport" title="Lock canvas">
                     <svg class="unlocked" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                         <path
                             d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h360v-80q0-50-35-85t-85-35q-42 0-73.5 25.5T364-751q-4 14-16.5 22.5T320-720q-17 0-28.5-11t-8.5-26q14-69 69-116t128-47q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM240-160v-400 400Z" />
@@ -41,6 +41,12 @@
                             d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm240-200q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80Z" />
                     </svg>
                 </div>
+                <div class="button" id="create-node" title="Create node">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+                        <path
+                            d="M440-440H240q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h200v-200q0-17 11.5-28.5T480-760q17 0 28.5 11.5T520-720v200h200q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H520v200q0 17-11.5 28.5T480-200q-17 0-28.5-11.5T440-240v-200Z" />
+                    </svg>
+                </div>
             </div>
         </div>
     </div>

diff --git a/src/MouseHandler.ts b/src/MouseHandler.ts
@@ -104,11 +104,16 @@ export class MouseHandler
 
     public cancelConnectingSlots()
     {
-        this.firstConnectingSlot = undefined;
-        this.slotConnectingLine?.remove();
-        this.slotConnectingLine = undefined;
-        this.slotConnectingCurve = undefined;
-        this.mouseStatus = MouseHandler.MouseStatus.Free;
+        if (this.mouseStatus == MouseHandler.MouseStatus.ConnectingInputSlot
+            || this.mouseStatus == MouseHandler.MouseStatus.ConnectingOutputSlot
+        )
+        {
+            this.firstConnectingSlot = undefined;
+            this.slotConnectingLine?.remove();
+            this.slotConnectingLine = undefined;
+            this.slotConnectingCurve = undefined;
+            this.mouseStatus = MouseHandler.MouseStatus.Free;
+        }
     }
 
     public inputSlotClicked(event: MouseEvent, targetSlot: SankeySlotMissing)

diff --git a/src/main.ts b/src/main.ts
@@ -76,6 +76,11 @@ async function main()
         openNodeCreation();
     };
 
+    (document.querySelector("div.button#cancel-linking") as HTMLDivElement).onclick = () =>
+    {
+        MouseHandler.getInstance().cancelConnectingSlots();
+    };
+
     let lockButton = document.querySelector("div.button#lock-viewport") as HTMLDivElement;
     let unlockedIcon = document.querySelector("div.button#lock-viewport>svg.unlocked") as SVGElement;
     let lockedIcon = document.querySelector("div.button#lock-viewport>svg.locked") as SVGElement;