DataTools3/input-controller.js

let draggingBox = null;
let draggingCamera = false;
let lastMousePos = {x: 0, y: 0};

class Mouse {
	static position = {x: 0, y: 0};
	static lastPosition = {x: 0, y: 0};

	static updatePosition(x, y) {
		this.lastPosition = this.position;
		this.position = {x: x, y: y};
	}

	static getDelta() {
		return {x : this.position.x - this.lastPosition.x, y : this.position.y - this.lastPosition.y};
	}
}

document.addEventListener("mousedown", (e) => {
	Mouse.updatePosition(e.clientX, e.clientY);

	if (e.button == 0) {
		if (e.target.classList.contains("boxDeleteButton")) return;
		for (let box of Box.instances) {
			let topBarRect = box.element.getElementsByClassName("boxTopBar")[0].getBoundingClientRect();
			box.element.classList.remove("dragging");

			if (isPointInRect(Mouse.position.x, Mouse.position.y, topBarRect.x, topBarRect.y, topBarRect.width, topBarRect.height)) {
				draggingBox = box;
				box.element.classList.add("dragging");
				e.preventDefault();
				break;
			}
		}
	}
	if (e.button == 1 || e.button == 2) {
		draggingCamera = true;
		e.preventDefault();
	}
});

document.addEventListener("mouseup", (e) => {
	if (e.button == 0 && draggingBox != null) {
		draggingBox.element.classList.remove("dragging");
		draggingBox = null;
	}
	if (e.button == 1 || e.button == 2) {
		draggingCamera = false;
	}
});

document.addEventListener("mousemove", (e) => {
	Mouse.updatePosition(e.clientX, e.clientY);

	let delta = Mouse.getDelta();

	if (draggingBox != null) {
		draggingBox.x += delta.x;
		draggingBox.y += delta.y;
		draggingBox.updatePosition();
		e.preventDefault();
	}

	if (draggingCamera) {
		Camera.x -= delta.x;
		Camera.y -= delta.y;

		Box.updateAllPositions();

		document.getElementById("canvas").style.backgroundPosition = (-Camera.x) + "px " + (-Camera.y) + "px";

		e.preventDefault();

	}
});

function isPointInRect(px, py, rx, ry, rw, rh) {
	return px >= rx && px <= rx + rw && py >= ry && py <= ry + rh;
}