ganache/js/editor.js

let editorState = "";
let start = { x: 0, y: 0 };
let end = { x: 0, y: 0 };

let started = false;
let selectedSprite;

window.addEventListener("keydown", event => {
	switch (event.keyCode) {
		case 27:
			editorState = "";
			delete localStorage['selectedSprite'];
			break;
		case 87:
			if (event.shiftKey) {
				editorState = "wall";
			}
			break;
		case 84:
			if (event.shiftKey) {
				editorState = "tile";
				window.open(`spritesheet.html?path=${encodeURI(atlas.assetsPath)}&file=${encodeURI(atlas.xmlFilename)}`, "Spritesheet", `width=${atlas.spritesheetImage.width},height=${atlas.spritesheetImage.height}`);
			}
			break;
		case 82:
			if (event.shiftKey) {
				editorState = "decal";
				window.open(`spritesheet.html?path=${encodeURI(atlas.assetsPath)}&file=${encodeURI(atlas.xmlFilename)}`, "Spritesheet", `width=${atlas.spritesheetImage.width},height=${atlas.spritesheetImage.height}`);
			}
			break;
		case 46:
			deleteObject();
			break;
	}
});

window.addEventListener("mousedown", event => {
	started = true;
	switch (editorState) {
		case "wall":
			updateStart(event);
			break;
		case "tile":
			updateEnd(event);
			setTile(event);
			break;
	}
});

window.addEventListener("contextmenu", event => {
	event.preventDefault();
	switch (editorState) {
		case "tile":
			updateEnd(event);
			break;
	}
	return false;
});

window.addEventListener("mousemove", event => {
	switch (editorState) {
		case "wall":
			updateEnd(event);
			break;
		case "tile":
			updateEnd(event);
			break;
		case "decal":
			updateEnd(event);
			selectedSprite = JSON.parse(localStorage['selectedSprite']);
			break;
	}
});

window.addEventListener("mouseup", event => {
	started = false;
	switch (editorState) {
		case "wall":
			updateEnd(event)
			addWall(event);
			break;
		case "tile":
			if(!!localStorage['selectedSprite']) {
				setTile(event);
			}
			break;
		case "decal":
			updateEnd(event);
			if(!!localStorage['selectedSprite']) {
				placeDecal(event);
			}
			break;
	}
});

window.addEventListener('wheel', event => {
	switch (editorState) {
	}
});

function deleteObject() {
	switch (editorState) {
		case "wall":
			let wallsToDelete = [];
			roomData.walls.forEach(wall => {
				if (pointCollision(wall, end)) {
					wallsToDelete.push(wall);
					return;
				}
			});
			wallsToDelete.forEach(wallToDelete => {
				roomData.walls.splice(roomData.walls.indexOf(wallToDelete), 1);
			});
			ajaxPost(`${apidataurl}/room-${userData.coordinates.x},${userData.coordinates.y}`, roomData).then(result => {
				getRoom(userData.coordinates.x, userData.coordinates.y);
			});
			break;
		case "decal":
			let decalsToDelete = [];
			roomData.decals.forEach(decal => {
				if (pointCollision(decal, end)) {
					decalsToDelete.push(decal);
					return;
				}
			});
			decalsToDelete.forEach(decalToDelete => {
				roomData.decals.splice(roomData.decals.indexOf(decalToDelete), 1);
			});
			ajaxPost(`${apidataurl}/room-${userData.coordinates.x},${userData.coordinates.y}`, roomData).then(result => {
				getRoom(userData.coordinates.x, userData.coordinates.y);
			});
			break;
	}
}
function updateStart(event) {
	let canvasBounds = canvas.getBoundingClientRect();
	start = { x: (event.clientX - canvasBounds.x) / canvasBounds.width, y: (event.clientY - canvasBounds.y) / canvasBounds.height };
}

function updateEnd(event) {
	let canvasBounds = canvas.getBoundingClientRect();
	end = { x: (event.clientX - canvasBounds.x) / canvasBounds.width, y: (event.clientY - canvasBounds.y) / canvasBounds.height };
}

function getWallBounds(start, end) {
	let bounds = {
		x: 0,
		y: 0,
		width: 0,
		height: 0,
	};
	if (end.x > start.x) {
		bounds.x = start.x;
	} else {
		bounds.x = end.x;
	}

	if (end.y > start.y) {
		bounds.y = start.y;
	} else {
		bounds.y = end.y;
	}

	bounds.width = Math.abs(start.x - end.x);
	bounds.height = Math.abs(start.y - end.y);

	return bounds;
}

function addWall(event) {
	ajaxGet(`${apidataurl}/room-${userData.coordinates.x},${userData.coordinates.y}`).then(currentRoom => {
		let bounds = getWallBounds(start, end);
		let newWall = {
			x: bounds.x,
			y: bounds.y,
			width: bounds.width,
			height: bounds.height,
			color: "black"
		};

		if (newWall.width == 0 || newWall.height == 0) {
			return;
		}
		currentRoom.walls.push(newWall);
		roomData.walls = currentRoom.walls;
		ajaxPost(`${apidataurl}/room-${userData.coordinates.x},${userData.coordinates.y}`, currentRoom).then(result => {
			getRoom(userData.coordinates.x, userData.coordinates.y);
		});
	});
}

function setTile(event) {
	let canvasBounds = canvas.getBoundingClientRect();
	let trueTile = {
		x: Math.floor((event.clientX - canvasBounds.x) / 126) * 126,
		y: Math.floor((event.clientY - canvasBounds.y) / 126) * 126,
		width: 126,
		height: 126
	}
	let x = trueTile.x / 126;
	let y = trueTile.y / 126;
	let tileIndex = 8 * y + x;

	try {
		let selectedSprite = JSON.parse(localStorage['selectedSprite']);	
		roomData.tiles[tileIndex] = selectedSprite.name;
		ajaxPost(`${apidataurl}/room-${userData.coordinates.x},${userData.coordinates.y}`, roomData);
	} catch (e) {
		console.error(e);
	}
}

function placeDecal(event) {
	let newDecal = {
		"spriteName": selectedSprite.name,
		"x": end.x - ((selectedSprite.width / canvas.width) / 2),
		"y": end.y - ((selectedSprite.height / canvas.height) / 2),
		"width": selectedSprite.width / canvas.width,
		"height": selectedSprite.height / canvas.height
	  };
	  roomData.decals.push(newDecal);
	  try {
		ajaxPost(`${apidataurl}/room-${userData.coordinates.x},${userData.coordinates.y}`, roomData);
	} catch (e) {
		console.error(e);
	}
}

function drawEditor(context) {

	document.body.style.cursor = "auto";
	if (editorState != "") {
		document.body.style.cursor = "crosshair";
		context.font = "14px Arial";
		context.textAlign = "center";
		context.fillStyle = "#000000";
		context.fillText("Editor mode:" + editorState.toLocaleUpperCase(), 504, 20);
	}

	switch (editorState) {
		case "wall":
			if (!started) {
				roomData.walls.forEach(wall => {
					if (pointCollision(wall, end)) {
						context.beginPath();
						context.strokeStyle = "red";
						context.fillStyle = "rgba(255, 150, 150, 0.2)";
						context.rect(wall.x * canvas.width, wall.y * canvas.height, wall.width * canvas.width, wall.height * canvas.height);
						context.fill();
						context.stroke();
					} else {
						context.beginPath();
						context.strokeStyle = wall.color ?? "red";
						context.rect(wall.x * canvas.width, wall.y * canvas.height, wall.width * canvas.width, wall.height * canvas.height);
						context.stroke();

						context.strokeStyle = "#000000";
						context.beginPath();
						context.rect(userData.position.x * canvas.width, userData.position.y * canvas.height, userData.size.width * canvas.width, userData.size.height * canvas.height);
						context.stroke();
					}
				});
				return;
			}
			context.fillStyle = "rgba(150, 255, 150, 0.2)";
			context.strokeStyle = "rgba(50, 255, 50, 1)";
			let bounds = getWallBounds(start, end);
			context.beginPath();
			context.rect(bounds.x * canvas.width, bounds.y * canvas.height, bounds.width * canvas.width, bounds.height * canvas.height);
			context.fill();
			context.stroke();
			break;
		case "tile":
			context.fillStyle = "rgba(150, 255, 150, 0.2)";
			context.strokeStyle = "rgba(50, 255, 50, 1)";
			let trueTile = {
				x: Math.floor(end.x * canvas.width / 126) * 126,
				y: Math.floor(end.y * canvas.height / 126) * 126,
				width: 126,
				height: 126
			}

			context.beginPath();
			context.rect(trueTile.x, trueTile.y, trueTile.width, trueTile.height);
			context.fill();
			context.stroke();
			break;
		case "decal":
			if(!!selectedSprite) {
				let centerPos = { x: (end.x * canvas.width), y: (end.y * canvas.height)};
				atlas.drawCentered(context, selectedSprite.name, centerPos);
			}
			break;
	}
}