form input

script.js

@@ -2,7 +2,7 @@
 const container = document.getElementById("container");
 const editor = document.getElementById("editor");
 
-const textForm = document.getElementById("text-form");
+const textForm = document.getElementsByClassName("text-input")[0];
 const input = document.getElementById("input");
 const insert = document.getElementById("insert");
 const cancel = document.getElementById("cancel");
@@ -96,12 +96,18 @@ function drawLabel() {
 
 	if (width > minimumSizeX && height > minimumSizeY) {
 		// Create a label and push it into the array of labels
+		let temporaryLabel = createLabel(minX, minY, width, height, labels.length);
+		temporaryLabel.classList.add("temporary");
+		temporaryLabel.id = "temporary-label";
+		container.appendChild(temporaryLabel);
 
 		new Promise(function (resolve, reject) {
 			// TODO: show the modal for text input in overlay
-			// TODO: temp editor freeze before the label is created
+
 			// then if the user click insert and there is a value in the input-- > resolve the promise and return the text input to create the label,
 			// if the user click cancel-- > reject the promise and don't create the label
+			textForm.classList.add("visible");
+
 			input.focus();
 
 			// Insert button
@@ -116,6 +122,7 @@ function drawLabel() {
 			cancel.addEventListener("click", (e) => {
 				e.preventDefault();
 				reject("no input");
+				textForm.classList.remove("visible");
 			});
 		}).then(() => {
 			// Create the label
@@ -127,12 +134,15 @@ function drawLabel() {
 			text.innerHTML = input.value;
 			label.appendChild(text);
 
-			// labels.push(label);
+			labels.push(label);
 			container.appendChild(label);
 
 			// Reset the modal
 			input.value = "";
 			input.blur();
+			let tempLabel = document.getElementById("temporary-label");
+			container.removeChild(tempLabel);
+			textForm.classList.remove("visible");
 		});
 	}
 }

style.css

@@ -36,6 +36,17 @@ body {
 	overflow: hidden;
 }
 
+.label.temporary {
+	background: none;
+	border: 1px dashed tomato;
+	box-shadow: none;
+}
+
+.label.temporary .label--number,
+.label.temporary .label--close {
+	display: none;
+}
+
 .label--number {
 	display: inline-block;
 	margin: 0;
@@ -72,11 +83,21 @@ body {
 }
 
 .text-input {
+	display: none;
+	position: absolute;
+	z-index: 200;
 	width: 100%;
 	height: 100vh;
-	display: flex;
+	/* display: flex; */
+
 	justify-content: center;
 	align-items: center;
+
+	background-color: rgba(250, 93, 65, 0.9);
+}
+
+.text-input.visible {
+	display: flex;
 }
 
 .modal {