promises wip

index.html

@@ -12,7 +12,7 @@
 		<div id="container">
 			<div id="editor"></div>
 
-			<form class="text-input">
+			<form id="text-input" class="text-input">
 				<input id="input" type="text" />
 				<button id="insert" type="submit">Insert</button>
 				<button id="cancel">x</button>

script.js

@@ -2,6 +2,7 @@
 const container = document.getElementById("container");
 const editor = document.getElementById("editor");
 
+const textForm = document.getElementById("text-form");
 const input = document.getElementById("input");
 const insert = document.getElementById("insert");
 const cancel = document.getElementById("cancel");
@@ -94,23 +95,38 @@ function drawLabel() {
 	let height = maxY - minY;
 
 	if (width > minimumSizeX && height > minimumSizeY) {
+		// Create a label and push it into the array of labels
+		let label = createLabel(minX, minY, width, height, labels.length);
+
 		let userInput = 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
+
+			input.focus();
+
+			// TODO: after the first promise it breaks??
 			insert.addEventListener("click", (e) => {
+				e.preventDefault();
 				if (input.value) {
 					resolve(input.value);
-				} else reject("no input");
-				e.preventDefault();
+				} else {
+					reject("no input");
+				}
+				input.value = "";
 			});
 		}).then((textInput) => {
-			// Create a label and push it into the array of labels
-			let label = createLabel(minX, minY, width, height, labels.length, textInput);
-			labels.push(label);
-			container.appendChild(label);
+			// Add the text input to the label
+			let text = document.createElement("p");
+			text.classList.add("label--text");
+			text.innerHTML = textInput;
+			label.appendChild(text);
 		});
+
+		labels.push(label);
+		container.appendChild(label);
+		input.value = "";
 	}
 }
 
@@ -143,11 +159,5 @@ function createLabel(x, y, width, height, index, input) {
 	});
 	label.appendChild(close);
 
-	// Add the text
-	let text = document.createElement("p");
-	text.classList.add("label--text");
-	text.innerHTML = input;
-	label.appendChild(text);
-
 	return label;
 }