Concrete Label

commit 5d6490eac30ea40dd12150d3a2435f551f96faf3 Author: lzzfnc Date: Tue Nov 2 01:23:47 2021 +0100 labels init diff --git a/index.html b/index.html new file mode 100644 index 0000000..5f29e10 --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + + + + Concrete Label + + +

+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..1acc288 --- /dev/null +++ b/script.js @@ -0,0 +1,131 @@ +// 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; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..8122fe8 --- /dev/null +++ b/style.css @@ -0,0 +1,61 @@ +html, +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; +} + +#container { + width: 100%; + height: 100vh; + background-color: #fcc; +} + +#editor { + position: absolute; + display: none; + border: 1px solid white; + opacity: 0.5; + width: 0; + height: 0; + z-index: 100; +} + +#editor.can-draw { + opacity: 1; +} + +#editor.show-editor { + display: block; +} + +.label { + position: absolute; + background-color: tomato; + box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2); +} + +.label--number { + display: inline-block; + margin: 0; + padding: 0 4px; + + user-select: none; + + background-color: white; +} + +.label--close { + position: absolute; + right: 0; + + border: none; + + padding: 0 4px; + + font-size: 1rem; + + background: none; + color: white; + + cursor: pointer; +}