diff --git a/index.html b/index.html index a8739e6..6890d86 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@
-
+ diff --git a/script.js b/script.js index ddd2d90..e7c14a6 100644 --- a/script.js +++ b/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; }