index.html

function renderKeywords() {
    const container = document.getElementById('target-container');
    const centerX = container.offsetWidth / 2;
    const centerY = container.offsetHeight / 2;
    const radius = Math.min(centerX, centerY) * 0.35;

    container.querySelectorAll('.label').forEach(e => e.remove());

    keywords.forEach((word, index) => {
        const labelWidth = word.text.length * 8 + 16;
        const labelHeight = 24;

        if (word.x === null || word.y === null) {
            const angleStep = (2 * Math.PI) / keywords.length;
            const angle = index * angleStep - Math.PI / 2;
            word.x = centerX + radius * Math.cos(angle) - labelWidth / 2;
            word.y = centerY + radius * Math.sin(angle) - labelHeight / 2;
        }

        const label = document.createElement('div');
        label.className = 'label draggable';
        label.style.left = `${word.x}px`;
        label.style.top = `${word.y}px`;
        label.textContent = word.text;
        label.dataset.index = index;

        label.addEventListener('mousedown', (e) => startDrag(e, label, index));
        label.addEventListener('touchstart', (e) => {
            const touch = e.touches[0];
            startDrag(touch, label, index);
        });

        if (index === selectedKeywordIndex) {
            label.classList.add('selected');
        }

        container.appendChild(label);
    });

    resizeCanvas();
}