concrete-label/script.js

// Get the container to use as a canvas
const container = document.getElementById("container");
const editor = document.getElementById("editor");

// List of labels
let labels = [];
let closing = false;

// Start is where the mouse is pressed, End is where the mouse is released
let startX;
let startY;
let endX;
let endY;

// Minimum size for the label to be created
let minimumSizeX = 25;
let minimumSizeY = 25;

// Boolean for showing the editor during drawing
let showEditor = false;

// Store the coordinates and trigger the function
container.addEventListener("mousedown", (e) => {
	if (e.target.tagName !== "BUTTON") {
		startX = e.x;
		startY = e.y;

		// activate the editor
		showEditor = true;
		editor.classList.add("show-editor");
	}
});

container.addEventListener("mouseup", (e) => {
	if (e.target.tagName !== "BUTTON") {
		endX = e.x;
		endY = e.y;

		// disable the editor
		showEditor = false;
		editor.classList.remove("show-editor");
		editor.style.width = 0;
		editor.style.height = 0;

		// draw label
		drawLabel();
	}
});

// Edit the editor box using transform instead of left / top in order to be more efficient
// (but still with width and height ehm idk if this affects the performance a lot)
// (and it is something we must care of because this event is called like every frame that the mouse is dragged)
container.addEventListener("mousemove", (e) => {
	if (showEditor) {
		let minX = Math.min(startX, e.x);
		let minY = Math.min(startY, e.y);

		let maxX = Math.max(startX, e.x);
		let maxY = Math.max(startY, e.y);

		let width = maxX - minX;
		let height = maxY - minY;

		// Apply a different class when the sizes pass the minimum size
		// (i don't know if is good made like this)
		if (width > minimumSizeX && height > minimumSizeY) {
			editor.classList.add("can-draw");
		} else {
			editor.classList.remove("can-draw");
		}

		editor.style.transform = `translate(${minX}px, ${minY}px)`;
		editor.style.width = `${maxX - minX}px`;
		editor.style.height = `${maxY - minY}px`;
	}
});

// Check the mouse direction and create the Label
// The origin points of the label (because is positioned with top left) are always the lowest x and y values
// The width and height are the greater x and y values (because width and height cannot be negative)
function drawLabel() {
	let minX = Math.min(startX, endX);
	let minY = Math.min(startY, endY);

	let maxX = Math.max(startX, endX);
	let maxY = Math.max(startY, endY);

	let width = maxX - minX;
	let height = maxY - minY;

	if (width > minimumSizeX && height > minimumSizeY) {
		// Create a label and push it into the array of labels
		// The index is +1 because it is
		let label = createLabel(minX, minY, width, height, labels.length);
		labels.push(label);
		container.appendChild(label);
	}
}

// Create the label element
function createLabel(x, y, width, height, index) {
	let label = document.createElement("div");
	label.classList.add("label");
	label.style.left = `${x}px`;
	label.style.top = `${y}px`;
	label.style.width = `${width}px`;
	label.style.height = `${height}px`;

	// data attribute index maybe we will need it later maybe not
	// with the index number of the label
	label.setAttribute("data-index", index);

	// Insert the number in the label
	let labelNumber = document.createElement("p");
	labelNumber.classList.add("label--number");
	labelNumber.innerHTML = index + 1;
	label.appendChild(labelNumber);

	// Add a button for deleting the label
	// TODO: reactive numbering oh no
	let close = document.createElement("button");
	close.classList.add("label--close");
	close.innerHTML = "x";
	close.addEventListener("click", (e) => {
		label.remove();
	});

	label.appendChild(close);

	return label;
}