add help tab and some usability quirk

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 = "";
 	}
 });
 

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>

menu.css

@@ -126,3 +126,10 @@
 	overflow-y: auto;
 	gap: 10px;
 }
+
+strong {
+	font-weight: 700;
+}
+ul {
+	margin-left: 20px;
+}