zooming-ish

README.md

@@ -4,7 +4,8 @@ Modular data conversion tools (for developers)
 
 ## TODO:
 
-- [ ] zooming
+- [X] zooming
+- [ ] fix zooming font size
 - [ ] controls explanation
 - [ ] typed values
 - [ ] implicit type conversion

controllers/input-controller.js

@@ -57,6 +57,8 @@ document.addEventListener("mousemove", (e) => {
 	Mouse.updatePosition(e.clientX, e.clientY);
 
 	let delta = Mouse.getDelta();
+	delta.x *= 1/Camera.zoom;
+	delta.y *= 1/Camera.zoom;
 
 	if (draggingBox != null) {
 		draggingBox.x += delta.x;
@@ -66,18 +68,24 @@ document.addEventListener("mousemove", (e) => {
 	}
 
 	if (draggingCamera) {
-		Camera.x -= delta.x;
+		Camera.movePosition(-delta.x, -delta.y);
-		Camera.y -= delta.y;
-
-		Box.updateAllPositions();
-
-		document.getElementById("canvas").style.backgroundPosition = (-Camera.x) + "px " + (-Camera.y) + "px";
-
 		e.preventDefault();
-
 	}
 });
 
+document.addEventListener("wheel", (e) => {
+	let lastZoom = Camera.zoom;
+	Camera.zoom = Math.min(1, Math.max(0.25, Camera.zoom - e.deltaY / 2000));
+
+	document.body.style.setProperty("--zoom", Camera.zoom);
+
+	Camera.movePosition(
+		(Mouse.position.x / lastZoom - Mouse.position.x / Camera.zoom),
+		(Mouse.position.y / lastZoom - Mouse.position.y / Camera.zoom),
+	);
+	
+});
+
 function isPointInRect(px, py, rx, ry, rw, rh) {
 	return px >= rx && px <= rx + rw && py >= ry && py <= ry + rh;
 }

elements/Camera.js

@@ -1,4 +1,17 @@
 class Camera {
 	static x = 0;
 	static y = 0;
+	static zoom = 1;
+
+	static setPosition(x, y) {
+		this.x = x;
+		this.y = y;
+		Box.updateAllPositions();
+
+		document.getElementById("canvas").style.backgroundPosition = (-Camera.x) + "px " + (-Camera.y) + "px";
+	}
+
+	static movePosition(x, y) {
+		this.setPosition(this.x + x, this.y + y);
+	}
 }

style.css

@@ -27,6 +27,7 @@ body {
 	flex-direction: column;
 	align-items: stretch;
 	justify-content: flex-start;
+	--zoom: 1;
 }
 
 #canvas {
@@ -38,6 +39,7 @@ body {
 	background-image: url("icons/background.svg");
 	background-size: 80px 80px;
 	z-index: 0;
+	zoom: var(--zoom);
 }
 
 #playground {
@@ -48,6 +50,8 @@ body {
 	width: 100%;
 	height: 100%;
 	overflow: none;
+	zoom: var(--zoom);
+	font-size: calc(1em * var(--zoom));
 }
 
 
@@ -110,6 +114,7 @@ input, textarea, select, button {
 	background-color: #25252577;
 	padding: 5px;
 	border: 1px solid #111;
+	font-size: inherit;
 }
 
 button:hover, select:hover {