From cce51d3b9c25a034fe7f8a1b54d5abd7d01fcf05 Mon Sep 17 00:00:00 2001
From: Luca Conte <main@lugico.de>
Date: Mon, 17 Feb 2025 15:14:10 +0100
Subject: [PATCH] add help tab and some usability quirk

---
 controllers/input-controller.js |  5 +++++
 index.html                      | 12 ++++++++++++
 menu.css                        |  7 +++++++
 3 files changed, 24 insertions(+)

diff --git a/controllers/input-controller.js b/controllers/input-controller.js
index 6ca094b..8749569 100644
--- a/controllers/input-controller.js
+++ b/controllers/input-controller.js
@@ -32,9 +32,13 @@ document.addEventListener("mousedown", (e) => {
 				break;
 			}
 		}
+		if (e.target == document.getElementById("playground")) {
+			ConnectionController.unselect();
+		}
 	}
 	if (e.button == 1 || e.button == 2) {
 		draggingCamera = true;
+		document.body.style.cursor = "grabbing";
 		e.preventDefault();
 	}
 });
@@ -50,6 +54,7 @@ document.addEventListener("mouseup", (e) => {
 	}
 	if (e.button == 1 || e.button == 2) {
 		draggingCamera = false;
+		document.body.style.cursor = "";
 	}
 });
 
diff --git a/index.html b/index.html
index 271fd16..72789b3 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,7 @@
 				<span class="menuBarItem">File</span>
 				<span class="menuBarItem">Presets</span>
 				<span class="menuBarItem">Elements</span>
+				<span class="menuBarItem">Help</span>
 			</div>
 			<div id="menuContent">
 				<div id="menuContentFile" class="menuContentBox">
@@ -65,6 +66,17 @@
 						</div>
 					</div>
 				</div>
+				<div id="menuContentHelp" class="menuContentBox">
+					<p>
+						<strong>Controls:</strong>
+					</p>
+					<ul>
+						<li><strong>Click</strong> to connect elements</li>
+						<li><strong>Drag the top of a box</strong> to move it</li>
+						<li><strong>Scroll</strong> to zoom</li>
+						<li><strong>Right- / Middle-Click</strong> to move the view</li>
+					</ul>
+				</div>
 			</div>
 		</div>
 		<div id="playground"></div>
diff --git a/menu.css b/menu.css
index e863850..4a597df 100644
--- a/menu.css
+++ b/menu.css
@@ -126,3 +126,10 @@
 	overflow-y: auto;
 	gap: 10px;
 }
+
+strong {
+	font-weight: 700;
+}
+ul {
+	margin-left: 20px;
+}
\ No newline at end of file