|
|
|
|
@ -2,10 +2,6 @@
|
|
|
|
|
const container = document.getElementById("container");
|
|
|
|
|
const editor = document.getElementById("editor");
|
|
|
|
|
|
|
|
|
|
const input = document.getElementById("input");
|
|
|
|
|
const insert = document.getElementById("insert");
|
|
|
|
|
const cancel = document.getElementById("cancel");
|
|
|
|
|
|
|
|
|
|
// List of labels
|
|
|
|
|
let labels = [];
|
|
|
|
|
let closing = false;
|
|
|
|
|
@ -25,7 +21,6 @@ let showEditor = false;
|
|
|
|
|
|
|
|
|
|
// Store the coordinates and trigger the function
|
|
|
|
|
container.addEventListener("mousedown", (e) => {
|
|
|
|
|
// Avoid inserting a new label if the user is clicking on a close button)
|
|
|
|
|
if (e.target.tagName !== "BUTTON") {
|
|
|
|
|
startX = e.x;
|
|
|
|
|
startY = e.y;
|
|
|
|
|
@ -94,25 +89,16 @@ function drawLabel() {
|
|
|
|
|
let height = maxY - minY;
|
|
|
|
|
|
|
|
|
|
if (width > minimumSizeX && height > minimumSizeY) {
|
|
|
|
|
new Promise(function (resolve, reject) {
|
|
|
|
|
// TODO: show the modal for text input then if insert and value --> resolve, if cancel --> reject
|
|
|
|
|
insert.addEventListener("click", (e) => {
|
|
|
|
|
if (input.value) {
|
|
|
|
|
resolve(input.value);
|
|
|
|
|
} else reject("no input");
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
});
|
|
|
|
|
}).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);
|
|
|
|
|
});
|
|
|
|
|
// 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, input) {
|
|
|
|
|
function createLabel(x, y, width, height, index) {
|
|
|
|
|
let label = document.createElement("div");
|
|
|
|
|
label.classList.add("label");
|
|
|
|
|
label.style.left = `${x}px`;
|
|
|
|
|
@ -138,13 +124,8 @@ function createLabel(x, y, width, height, index, input) {
|
|
|
|
|
close.addEventListener("click", (e) => {
|
|
|
|
|
label.remove();
|
|
|
|
|
});
|
|
|
|
|
label.appendChild(close);
|
|
|
|
|
|
|
|
|
|
// Add the text
|
|
|
|
|
let text = document.createElement("p");
|
|
|
|
|
text.classList.add("label--text");
|
|
|
|
|
text.innerHTML = input;
|
|
|
|
|
label.appendChild(text);
|
|
|
|
|
label.appendChild(close);
|
|
|
|
|
|
|
|
|
|
return label;
|
|
|
|
|
}
|
|
|
|
|
|