|
|
|
@ -2,6 +2,10 @@
|
|
|
|
|
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;
|
|
|
|
@ -21,6 +25,7 @@ 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;
|
|
|
|
@ -89,16 +94,25 @@ function drawLabel() {
|
|
|
|
|
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);
|
|
|
|
|
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 the label element
|
|
|
|
|
function createLabel(x, y, width, height, index) {
|
|
|
|
|
function createLabel(x, y, width, height, index, input) {
|
|
|
|
|
let label = document.createElement("div");
|
|
|
|
|
label.classList.add("label");
|
|
|
|
|
label.style.left = `${x}px`;
|
|
|
|
@ -124,8 +138,13 @@ function createLabel(x, y, width, height, index) {
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
|
|
return label;
|
|
|
|
|
}
|
|
|
|
|