Die Führungslinie verläuft durch Elemente ⇐ HTML

[Anonymous]

Ich versuche, eine App zu erstellen, in der Sie für jedes Wort eine Erklärung festlegen können. So sieht es jetzt aus
Das große Problem ist, dass die Führungslinie durch meinen Text verläuft und MiddleAnchor auf dem Rasterpfad nicht funktioniert.
Ich möchte den Rasterpfad beibehalten und ihn nicht in etwas anderes ändern.
Nachfolgend werde ich HTML und JS löschen

Code: Select all

const form = document.querySelector('form');
const input = document.getElementById('search');
const wordcontainer = document.getElementById('words-container');
const descriptioncontainer = document.getElementById('description-container');

form.addEventListener('submit', (event) => {
event.preventDefault();

const value = input.value.trim();
wordcontainer.innerHTML = "";
descriptioncontainer.innerHTML = "";

if (value) {
const words = value.split(/\s+/);
const half = Math.ceil(words.length / 2);

words.forEach((word, index) => {
const isFirstHalf = index < half;
createWordElement(word, index, isFirstHalf);
});
}
});

function createWordElement(text, index, isFirstHalf) {
const h1 = document.createElement('h1');
h1.textContent = text;
h1.id = 'word-output-' + index;
h1.style.margin = "10px";
h1.style.position = "relative";
wordcontainer.appendChild(h1);

const h4 = document.createElement('h4');
h4.textContent = "LOREM IPSUM";
h4.id = "description-" + index;
h4.style.padding = "10px 5px";
h4.style.border = "1px solid #ccc";
h4.style.borderRadius = "4px";
h4.style.position = "relative"
h4.style.left = "50%"
descriptioncontainer.appendChild(h4);

setTimeout(() => {
const options = {
path: "grid",
startSocket: "bottom",
endSocket: isFirstHalf ? "left" : "right",
size: 2,
color: "black",
startSocketGravity: 0.1,
endSocketGravity: 30 * index,
endPlug: "behind"

};

new LeaderLine(
document.getElementById('word-output-' + index),
document.getElementById('description-' + index),
options
);
}, 50);
}

Code: Select all

Page Title