|
<!DOCTYPE html> |
|
<html lang="fr"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Étoile de Mots Interactive Pro</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
.target-container { |
|
position: relative; |
|
width: 100%; |
|
aspect-ratio: 1/1; |
|
border-radius: 50%; |
|
overflow: visible; |
|
touch-action: none; |
|
background: radial-gradient(circle, #f8fafc 0%, #e2e8f0 100%); |
|
} |
|
|
|
.circle { |
|
position: absolute; |
|
border-radius: 50%; |
|
z-index: 1; |
|
opacity: 0.7; |
|
transition: all 0.5s ease; |
|
} |
|
|
|
.circle1 { background-color: #fecaca; width: 8%; height: 8%; top: 46%; left: 46%; } |
|
.circle2 { background-color: #fed7aa; width: 20%; height: 20%; top: 40%; left: 40%; } |
|
.circle3 { background-color: #fef08a; width: 35%; height: 35%; top: 32.5%; left: 32.5%; } |
|
.circle4 { background-color: #bbf7d0; width: 55%; height: 55%; top: 22.5%; left: 22.5%; } |
|
.circle5 { background-color: #bfdbfe; width: 75%; height: 75%; top: 12.5%; left: 12.5%; } |
|
|
|
.label { |
|
position: absolute; |
|
font-weight: 500; |
|
font-size: 0.85rem; |
|
color: #1e293b; |
|
cursor: move; |
|
user-select: none; |
|
white-space: nowrap; |
|
z-index: 7; |
|
padding: 0.35rem 0.7rem; |
|
background-color: rgba(255, 255, 255, 0.9); |
|
border-radius: 1rem; |
|
transition: all 0.2s ease; |
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
border: 1px solid rgba(0,0,0,0.05); |
|
} |
|
|
|
.label:hover { |
|
transform: scale(1.05); |
|
box-shadow: 0 4px 6px rgba(0,0,0,0.15); |
|
z-index: 10; |
|
} |
|
|
|
.label.selected { |
|
background-color: #3b82f6; |
|
color: white; |
|
transform: scale(1.1); |
|
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3); |
|
z-index: 10; |
|
} |
|
|
|
.label.dragging { |
|
box-shadow: 0 0 15px rgba(0,0,0,0.2); |
|
z-index: 20; |
|
opacity: 0.9; |
|
} |
|
|
|
#canvas { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
z-index: 6; |
|
pointer-events: none; |
|
} |
|
|
|
.note-input { |
|
resize: none; |
|
font-size: 0.9rem; |
|
text-align: center; |
|
background-color: transparent; |
|
border: none; |
|
outline: none; |
|
padding: 0.5rem; |
|
border-radius: 0.5rem; |
|
background-color: rgba(255,255,255,0.7); |
|
} |
|
|
|
.note-input::placeholder { |
|
color: #94a3b8; |
|
font-style: italic; |
|
} |
|
|
|
.action-btn { |
|
transition: all 0.2s ease; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
gap: 0.5rem; |
|
} |
|
|
|
.action-btn:hover { |
|
transform: translateY(-1px); |
|
} |
|
|
|
.action-btn:active { |
|
transform: translateY(1px); |
|
} |
|
|
|
.context-menu { |
|
position: absolute; |
|
background: white; |
|
border-radius: 0.5rem; |
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15); |
|
z-index: 100; |
|
min-width: 180px; |
|
overflow: hidden; |
|
display: none; |
|
} |
|
|
|
.context-menu-item { |
|
padding: 0.5rem 1rem; |
|
cursor: pointer; |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
font-size: 0.85rem; |
|
} |
|
|
|
.context-menu-item:hover { |
|
background-color: #f1f5f9; |
|
} |
|
|
|
.style-editor { |
|
background: white; |
|
border-radius: 0.75rem; |
|
box-shadow: 0 4px 16px rgba(0,0,0,0.1); |
|
padding: 1rem; |
|
margin-top: 1rem; |
|
} |
|
|
|
.style-option { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
margin-bottom: 0.75rem; |
|
} |
|
|
|
.color-option { |
|
width: 24px; |
|
height: 24px; |
|
border-radius: 50%; |
|
cursor: pointer; |
|
border: 2px solid transparent; |
|
} |
|
|
|
.color-option.selected { |
|
border-color: #1e293b; |
|
} |
|
|
|
.color-palette { |
|
display: flex; |
|
gap: 0.5rem; |
|
flex-wrap: wrap; |
|
} |
|
|
|
.edit-modal { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background-color: rgba(0,0,0,0.5); |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
z-index: 1000; |
|
display: none; |
|
} |
|
|
|
.edit-modal-content { |
|
background: white; |
|
border-radius: 0.75rem; |
|
padding: 1.5rem; |
|
width: 90%; |
|
max-width: 400px; |
|
} |
|
|
|
.grid-lines { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
z-index: 2; |
|
pointer-events: none; |
|
background-image: |
|
linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px), |
|
linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px); |
|
background-size: 20px 20px; |
|
} |
|
|
|
.snap-point { |
|
position: absolute; |
|
width: 6px; |
|
height: 6px; |
|
background-color: rgba(59, 130, 246, 0.5); |
|
border-radius: 50%; |
|
z-index: 3; |
|
pointer-events: none; |
|
} |
|
|
|
.pulse { |
|
animation: pulse 2s infinite; |
|
} |
|
|
|
@keyframes pulse { |
|
0% { transform: scale(1); opacity: 0.7; } |
|
50% { transform: scale(1.02); opacity: 0.9; } |
|
100% { transform: scale(1); opacity: 0.7; } |
|
} |
|
|
|
.layer-selector { |
|
position: absolute; |
|
top: 10px; |
|
right: 10px; |
|
z-index: 50; |
|
background: white; |
|
padding: 0.5rem; |
|
border-radius: 0.5rem; |
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
|
} |
|
|
|
.theme-group { |
|
position: absolute; |
|
top: 10px; |
|
left: 10px; |
|
z-index: 50; |
|
background: white; |
|
padding: 0.5rem; |
|
border-radius: 0.5rem; |
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
|
} |
|
|
|
@media (max-width: 640px) { |
|
.label { |
|
font-size: 0.75rem; |
|
padding: 0.25rem 0.5rem; |
|
} |
|
|
|
.note-input { |
|
font-size: 0.8rem; |
|
} |
|
|
|
.action-btn { |
|
padding: 0.5rem; |
|
font-size: 0.8rem; |
|
} |
|
|
|
.context-menu { |
|
min-width: 160px; |
|
} |
|
|
|
.mobile-hidden { |
|
display: none; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen flex flex-col items-center justify-center p-4"> |
|
<div class="w-full max-w-2xl bg-white rounded-xl shadow-lg p-6 space-y-6"> |
|
<div class="flex justify-between items-center"> |
|
<h1 class="text-2xl font-bold text-center text-gray-800"> |
|
<i class="fas fa-star text-yellow-400 mr-2"></i>Étoile de Mots Pro |
|
</h1> |
|
<div class="flex gap-2"> |
|
<button onclick="exportToPNG()" class="action-btn bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600"> |
|
<i class="fas fa-download"></i> |
|
<span class="mobile-hidden">Exporter</span> |
|
</button> |
|
<button onclick="resetKeywords()" class="action-btn bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600"> |
|
<i class="fas fa-redo"></i> |
|
<span class="mobile-hidden">Réinit.</span> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
<div class="flex gap-2"> |
|
<button onclick="exportToJSON()" class="action-btn bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600"> |
|
<i class="fas fa-save"></i> |
|
<span class="mobile-hidden">Sauvegarder</span> |
|
</button> |
|
<button onclick="importFromJSON()" class="action-btn bg-purple-500 text-white px-4 py-2 rounded-lg hover:bg-purple-600"> |
|
<i class="fas fa-folder-open"></i> |
|
<span class="mobile-hidden">Charger</span> |
|
</button> |
|
<button onclick="toggleGrid()" id="gridToggle" class="action-btn bg-yellow-500 text-white px-4 py-2 rounded-lg hover:bg-yellow-600"> |
|
<i class="fas fa-th"></i> |
|
<span class="mobile-hidden">Grille</span> |
|
</button> |
|
<button onclick="toggleSnap()" id="snapToggle" class="action-btn bg-pink-500 text-white px-4 py-2 rounded-lg hover:bg-pink-600"> |
|
<i class="fas fa-magnet"></i> |
|
<span class="mobile-hidden">Magnétisme</span> |
|
</button> |
|
</div> |
|
|
|
<textarea id="userNotes" class="note-input w-full" |
|
placeholder="Titre, notes ou objectifs... ✍️" rows="2"></textarea> |
|
|
|
<div class="target-container shadow-inner" id="target-container"> |
|
<div class="grid-lines" id="gridLines" style="display: none;"></div> |
|
<canvas id="canvas"></canvas> |
|
<div class="circle circle5 pulse"></div> |
|
<div class="circle circle4 pulse"></div> |
|
<div class="circle circle3 pulse"></div> |
|
<div class="circle circle2 pulse"></div> |
|
<div class="circle circle1 pulse"></div> |
|
|
|
<div class="layer-selector"> |
|
<select id="layerSelect" class="border rounded p-1 text-sm" onchange="changeLayer()"> |
|
<option value="0">Couche 1</option> |
|
<option value="1">Couche 2</option> |
|
<option value="2">Couche 3</option> |
|
</select> |
|
</div> |
|
|
|
<div class="theme-group"> |
|
<select id="themeSelect" class="border rounded p-1 text-sm" onchange="groupByTheme()"> |
|
<option value="">Tous les thèmes</option> |
|
<option value="1">Thème 1</option> |
|
<option value="2">Thème 2</option> |
|
<option value="3">Thème 3</option> |
|
</select> |
|
</div> |
|
</div> |
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 gap-3"> |
|
<input type="text" id="newKeyword" placeholder="Nouveau mot" |
|
class="col-span-2 sm:col-span-1 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
|
<button onclick="addKeyword()" class="action-btn bg-green-500 text-white py-2 rounded-lg hover:bg-green-600"> |
|
<i class="fas fa-plus"></i> |
|
<span>Ajouter</span> |
|
</button> |
|
|
|
<select id="fontSelect" class="border rounded p-2"> |
|
<option value="'Segoe UI', Roboto, sans-serif">Sans-serif</option> |
|
<option value="Georgia, 'Times New Roman', serif">Serif</option> |
|
<option value="'Comic Sans MS', cursive">Manuscrite</option> |
|
</select> |
|
</div> |
|
|
|
<div class="context-menu" id="contextMenu"> |
|
<div class="context-menu-item" onclick="showEditModal()"> |
|
<i class="fas fa-edit text-blue-500"></i> Modifier |
|
</div> |
|
<div class="context-menu-item" onclick="deleteSelectedKeyword()"> |
|
<i class="fas fa-trash text-red-500"></i> Supprimer |
|
</div> |
|
<div class="context-menu-item" onclick="showStyleEditor()"> |
|
<i class="fas fa-paint-brush text-purple-500"></i> Style |
|
</div> |
|
<div class="context-menu-item" onclick="addIconToKeyword()"> |
|
<i class="fas fa-icons text-yellow-500"></i> Ajouter icône |
|
</div> |
|
<div class="context-menu-item" onclick="deselectKeyword()"> |
|
<i class="fas fa-times-circle text-gray-500"></i> Désélectionner |
|
</div> |
|
</div> |
|
|
|
<div class="edit-modal" id="editModal"> |
|
<div class="edit-modal-content"> |
|
<h3 class="font-bold text-lg mb-4">Modifier le mot</h3> |
|
<input type="text" id="editKeywordInput" class="w-full p-2 border rounded mb-4"> |
|
<div class="flex justify-end gap-2"> |
|
<button onclick="closeEditModal()" class="px-4 py-2 rounded-lg border">Annuler</button> |
|
<button onclick="updateKeyword()" class="px-4 py-2 rounded-lg bg-blue-500 text-white">Enregistrer</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="style-editor" id="styleEditor" style="display: none;"> |
|
<h3 class="font-medium text-gray-700 mb-3">Style du mot sélectionné</h3> |
|
|
|
<div class="style-option"> |
|
<span>Couleur du texte:</span> |
|
<input type="color" id="textColor" value="#1e293b" class="w-8 h-8"> |
|
</div> |
|
|
|
<div class="style-option"> |
|
<span>Couleur de fond:</span> |
|
<input type="color" id="bgColor" value="#ffffff" class="w-8 h-8"> |
|
</div> |
|
|
|
<div class="style-option"> |
|
<span>Taille de police:</span> |
|
<select id="fontSize" class="border rounded p-1"> |
|
<option value="0.75rem">Petit</option> |
|
<option value="0.85rem" selected>Moyen</option> |
|
<option value="1rem">Grand</option> |
|
<option value="1.2rem">Très grand</option> |
|
</select> |
|
</div> |
|
|
|
<div class="style-option"> |
|
<span>Style de police:</span> |
|
<select id="fontWeight" class="border rounded p-1"> |
|
<option value="400">Normal</option> |
|
<option value="500" selected>Medium</option> |
|
<option value="600">Gras</option> |
|
<option value="700">Très gras</option> |
|
</select> |
|
</div> |
|
|
|
<div class="style-option"> |
|
<span>Thème:</span> |
|
<select id="keywordTheme" class="border rounded p-1"> |
|
<option value="0">Aucun</option> |
|
<option value="1">Thème 1</option> |
|
<option value="2">Thème 2</option> |
|
<option value="3">Thème 3</option> |
|
</select> |
|
</div> |
|
|
|
<div class="mt-4"> |
|
<span class="block mb-2">Style des liens:</span> |
|
<div class="color-palette"> |
|
<div class="color-option bg-blue-500 selected" data-color="#3b82f6" onclick="selectLineColor(this)"></div> |
|
<div class="color-option bg-red-500" data-color="#ef4444" onclick="selectLineColor(this)"></div> |
|
<div class="color-option bg-green-500" data-color="#10b981" onclick="selectLineColor(this)"></div> |
|
<div class="color-option bg-purple-500" data-color="#8b5cf6" onclick="selectLineColor(this)"></div> |
|
<div class="color-option bg-pink-500" data-color="#ec4899" onclick="selectLineColor(this)"></div> |
|
<div class="color-option bg-gray-900" data-color="#111827" onclick="selectLineColor(this)"></div> |
|
</div> |
|
|
|
<div class="mt-3"> |
|
<span class="block mb-1">Épaisseur:</span> |
|
<input type="range" id="lineWidth" min="1" max="5" value="1" class="w-full"> |
|
</div> |
|
|
|
<div class="mt-3"> |
|
<span class="block mb-1">Style:</span> |
|
<select id="lineStyle" class="border rounded p-1 w-full"> |
|
<option value="solid">Continue</option> |
|
<option value="dashed">Pointillés</option> |
|
<option value="dotted">Pointillés fins</option> |
|
</select> |
|
</div> |
|
</div> |
|
|
|
<button onclick="applyStyles()" class="mt-4 w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600"> |
|
Appliquer |
|
</button> |
|
</div> |
|
|
|
<div class="edit-modal" id="iconModal" style="display: none;"> |
|
<div class="edit-modal-content"> |
|
<h3 class="font-bold text-lg mb-4">Ajouter une icône</h3> |
|
<div class="grid grid-cols-4 gap-2 mb-4"> |
|
<div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-heart')"> |
|
<i class="fas fa-heart text-red-500 text-xl"></i> |
|
</div> |
|
<div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-lightbulb')"> |
|
<i class="fas fa-lightbulb text-yellow-500 text-xl"></i> |
|
</div> |
|
<div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-flag')"> |
|
<i class="fas fa-flag text-blue-500 text-xl"></i> |
|
</div> |
|
<div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-star')"> |
|
<i class="fas fa-star text-purple-500 text-xl"></i> |
|
</div> |
|
<div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-check')"> |
|
<i class="fas fa-check text-green-500 text-xl"></i> |
|
</div> |
|
<div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-exclamation')"> |
|
<i class="fas fa-exclamation text-orange-500 text-xl"></i> |
|
</div> |
|
<div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-question')"> |
|
<i class="fas fa-question text-indigo-500 text-xl"></i> |
|
</div> |
|
<div class="icon-option p-2 text-center rounded hover:bg-gray-100 cursor-pointer" onclick="selectIcon('fa-bolt')"> |
|
<i class="fas fa-bolt text-yellow-500 text-xl"></i> |
|
</div> |
|
</div> |
|
<div class="flex justify-end gap-2"> |
|
<button onclick="closeIconModal()" class="px-4 py-2 rounded-lg border">Annuler</button> |
|
<button onclick="applyIcon()" class="px-4 py-2 rounded-lg bg-blue-500 text-white">Appliquer</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
let keywords = [ |
|
{ text: "Identification", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 1, icon: "" }, |
|
{ text: "Gestion", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 1, icon: "" }, |
|
{ text: "Adaptation", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 2, icon: "" }, |
|
{ text: "Autonomie", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 2, icon: "" }, |
|
{ text: "Connaissance", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 3, icon: "" }, |
|
{ text: "Prévention", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 3, icon: "" }, |
|
{ text: "Équilibre", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 1, icon: "" }, |
|
{ text: "Stratégies", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 2, icon: "" }, |
|
{ text: "Motivation", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 3, icon: "" }, |
|
{ text: "Recours", x: null, y: null, color: "#1e293b", bgColor: "#ffffff", fontSize: "0.85rem", fontWeight: "500", theme: 1, icon: "" } |
|
]; |
|
|
|
let layers = [ |
|
JSON.parse(JSON.stringify(keywords)), |
|
JSON.parse(JSON.stringify(keywords)), |
|
JSON.parse(JSON.stringify(keywords)) |
|
]; |
|
|
|
let selectedKeywordIndex = null; |
|
let isDragging = false; |
|
let dragStartX, dragStartY; |
|
let draggedLabel = null; |
|
let draggedIndex = null; |
|
let lineColor = "#3b82f6"; |
|
let lineWidth = 1; |
|
let lineStyle = "solid"; |
|
let currentLayer = 0; |
|
let gridEnabled = false; |
|
let snapEnabled = false; |
|
let selectedIcon = ""; |
|
let selectedFont = "'Segoe UI', Roboto, sans-serif"; |
|
|
|
const canvas = document.getElementById('canvas'); |
|
const ctx = canvas.getContext('2d'); |
|
const contextMenu = document.getElementById('contextMenu'); |
|
const editModal = document.getElementById('editModal'); |
|
const iconModal = document.getElementById('iconModal'); |
|
|
|
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()); |
|
|
|
|
|
const themeFilter = document.getElementById('themeSelect').value; |
|
|
|
|
|
keywords.forEach((word, index) => { |
|
|
|
if (themeFilter && word.theme != themeFilter) return; |
|
|
|
const label = document.createElement('div'); |
|
label.className = 'label draggable'; |
|
|
|
|
|
if (word.icon) { |
|
label.innerHTML = `<i class="fas ${word.icon} mr-1"></i>${word.text}`; |
|
} else { |
|
label.textContent = word.text; |
|
} |
|
|
|
label.dataset.index = index; |
|
|
|
|
|
label.style.color = word.color; |
|
label.style.backgroundColor = word.bgColor; |
|
label.style.fontSize = word.fontSize; |
|
label.style.fontWeight = word.fontWeight; |
|
label.style.fontFamily = selectedFont; |
|
|
|
|
|
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) - label.offsetWidth / 2; |
|
word.y = centerY + radius * Math.sin(angle) - label.offsetHeight / 2; |
|
} |
|
|
|
label.style.left = `${word.x}px`; |
|
label.style.top = `${word.y}px`; |
|
|
|
label.addEventListener('mousedown', (e) => { |
|
startDrag(e, label, index); |
|
}); |
|
|
|
label.addEventListener('contextmenu', (e) => { |
|
e.preventDefault(); |
|
showContextMenu(e, index); |
|
}); |
|
|
|
label.addEventListener('touchstart', (e) => { |
|
e.preventDefault(); |
|
const touch = e.touches[0]; |
|
const mouseEvent = new MouseEvent('mousedown', { |
|
clientX: touch.clientX, |
|
clientY: touch.clientY |
|
}); |
|
label.dispatchEvent(mouseEvent); |
|
}, { passive: false }); |
|
|
|
if (index === selectedKeywordIndex) { |
|
label.classList.add('selected'); |
|
} |
|
|
|
container.appendChild(label); |
|
}); |
|
|
|
|
|
setTimeout(() => { |
|
updateLabelPositions(); |
|
resizeCanvas(); |
|
createSnapPoints(); |
|
}, 0); |
|
} |
|
|
|
function updateLabelPositions() { |
|
const container = document.getElementById('target-container'); |
|
const labels = container.querySelectorAll('.label'); |
|
|
|
labels.forEach((label, index) => { |
|
if (keywords[index].x === null || keywords[index].y === null) { |
|
const rect = label.getBoundingClientRect(); |
|
const containerRect = container.getBoundingClientRect(); |
|
|
|
keywords[index].x = rect.left - containerRect.left; |
|
keywords[index].y = rect.top - containerRect.top; |
|
} |
|
}); |
|
} |
|
|
|
function startDrag(e, label, index) { |
|
|
|
if (e.button === 2) return; |
|
|
|
|
|
if (selectedKeywordIndex === index) { |
|
return; |
|
} |
|
|
|
isDragging = true; |
|
draggedLabel = label; |
|
draggedIndex = index; |
|
label.classList.add('dragging'); |
|
|
|
const rect = label.getBoundingClientRect(); |
|
dragStartX = e.clientX - rect.left; |
|
dragStartY = e.clientY - rect.top; |
|
|
|
|
|
selectKeyword(index); |
|
|
|
document.addEventListener('mousemove', drag); |
|
document.addEventListener('mouseup', stopDrag); |
|
document.addEventListener('touchmove', touchDrag, { passive: false }); |
|
document.addEventListener('touchend', stopDrag); |
|
|
|
e.preventDefault(); |
|
} |
|
|
|
function drag(e) { |
|
if (!isDragging || !draggedLabel) return; |
|
|
|
const container = document.getElementById('target-container'); |
|
const containerRect = container.getBoundingClientRect(); |
|
|
|
|
|
let newX = e.clientX - containerRect.left - dragStartX; |
|
let newY = e.clientY - containerRect.top - dragStartY; |
|
|
|
|
|
if (snapEnabled) { |
|
const snapPoints = document.querySelectorAll('.snap-point'); |
|
let minDist = Infinity; |
|
let bestSnap = {x: newX, y: newY}; |
|
|
|
snapPoints.forEach(point => { |
|
const pointX = parseFloat(point.style.left); |
|
const pointY = parseFloat(point.style.top); |
|
const dist = Math.sqrt(Math.pow(newX - pointX, 2) + Math.pow(newY - pointY, 2)); |
|
|
|
if (dist < 30 && dist < minDist) { |
|
minDist = dist; |
|
bestSnap = {x: pointX, y: pointY}; |
|
} |
|
}); |
|
|
|
if (minDist < 30) { |
|
newX = bestSnap.x; |
|
newY = bestSnap.y; |
|
} |
|
} |
|
|
|
|
|
newX = Math.max(0, Math.min(newX, container.offsetWidth - draggedLabel.offsetWidth)); |
|
newY = Math.max(0, Math.min(newY, container.offsetHeight - draggedLabel.offsetHeight)); |
|
|
|
draggedLabel.style.left = `${newX}px`; |
|
draggedLabel.style.top = `${newY}px`; |
|
|
|
|
|
keywords[draggedIndex].x = newX; |
|
keywords[draggedIndex].y = newY; |
|
|
|
drawLines(); |
|
} |
|
|
|
function touchDrag(e) { |
|
if (!isDragging || !draggedLabel) return; |
|
|
|
const touch = e.touches[0]; |
|
const mouseEvent = new MouseEvent('mousemove', { |
|
clientX: touch.clientX, |
|
clientY: touch.clientY |
|
}); |
|
drag(mouseEvent); |
|
} |
|
|
|
function stopDrag() { |
|
if (draggedLabel) { |
|
draggedLabel.classList.remove('dragging'); |
|
} |
|
|
|
isDragging = false; |
|
draggedLabel = null; |
|
draggedIndex = null; |
|
|
|
document.removeEventListener('mousemove', drag); |
|
document.removeEventListener('mouseup', stopDrag); |
|
document.removeEventListener('touchmove', touchDrag); |
|
document.removeEventListener('touchend', stopDrag); |
|
} |
|
|
|
function selectKeyword(index) { |
|
selectedKeywordIndex = index; |
|
|
|
|
|
document.querySelectorAll('.label').forEach(label => { |
|
label.classList.remove('selected'); |
|
}); |
|
|
|
const selectedLabel = document.querySelector(`.label[data-index='${index}']`); |
|
if (selectedLabel) { |
|
selectedLabel.classList.add('selected'); |
|
} |
|
|
|
|
|
document.getElementById('styleEditor').style.display = 'none'; |
|
} |
|
|
|
function deselectKeyword() { |
|
selectedKeywordIndex = null; |
|
|
|
|
|
document.querySelectorAll('.label').forEach(label => { |
|
label.classList.remove('selected'); |
|
}); |
|
|
|
|
|
contextMenu.style.display = 'none'; |
|
document.getElementById('styleEditor').style.display = 'none'; |
|
} |
|
|
|
function resizeCanvas() { |
|
const container = document.getElementById('target-container'); |
|
canvas.width = container.offsetWidth; |
|
canvas.height = container.offsetHeight; |
|
drawLines(); |
|
} |
|
|
|
function drawLines() { |
|
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
|
|
if (keywords.length < 2) return; |
|
|
|
ctx.beginPath(); |
|
ctx.strokeStyle = lineColor; |
|
ctx.lineWidth = lineWidth; |
|
|
|
|
|
if (lineStyle === "dashed") { |
|
ctx.setLineDash([5, 3]); |
|
} else if (lineStyle === "dotted") { |
|
ctx.setLineDash([2, 2]); |
|
} else { |
|
ctx.setLineDash([]); |
|
} |
|
|
|
const labels = document.querySelectorAll('.label'); |
|
const positions = []; |
|
|
|
labels.forEach(label => { |
|
const index = parseInt(label.dataset.index); |
|
if (!isNaN(index) && index >= 0 && index < keywords.length) { |
|
const rect = label.getBoundingClientRect(); |
|
const containerRect = canvas.getBoundingClientRect(); |
|
|
|
positions.push({ |
|
x: rect.left - containerRect.left + rect.width / 2, |
|
y: rect.top - containerRect.top + rect.height / 2 |
|
}); |
|
} |
|
}); |
|
|
|
|
|
for (let i = 0; i < positions.length; i++) { |
|
const next = positions[(i + 1) % positions.length]; |
|
ctx.moveTo(positions[i].x, positions[i].y); |
|
ctx.lineTo(next.x, next.y); |
|
} |
|
|
|
ctx.stroke(); |
|
} |
|
|
|
function addKeyword() { |
|
const input = document.getElementById('newKeyword'); |
|
const text = input.value.trim(); |
|
|
|
if (text) { |
|
keywords.push({ |
|
text: text, |
|
x: null, |
|
y: null, |
|
color: "#1e293b", |
|
bgColor: "#ffffff", |
|
fontSize: "0.85rem", |
|
fontWeight: "500", |
|
theme: 0, |
|
icon: "" |
|
}); |
|
input.value = ''; |
|
renderKeywords(); |
|
} |
|
} |
|
|
|
function deleteSelectedKeyword() { |
|
if (selectedKeywordIndex === null) return; |
|
|
|
if (confirm("Supprimer ce mot?")) { |
|
keywords.splice(selectedKeywordIndex, 1); |
|
deselectKeyword(); |
|
renderKeywords(); |
|
} |
|
|
|
contextMenu.style.display = 'none'; |
|
} |
|
|
|
function resetKeywords() { |
|
if (confirm("Réinitialiser tous les mots à leur position par défaut?")) { |
|
keywords.forEach(word => { |
|
word.x = null; |
|
word.y = null; |
|
}); |
|
deselectKeyword(); |
|
renderKeywords(); |
|
} |
|
} |
|
|
|
function showContextMenu(e, index) { |
|
e.preventDefault(); |
|
selectKeyword(index); |
|
|
|
contextMenu.style.display = 'block'; |
|
contextMenu.style.left = `${e.clientX}px`; |
|
contextMenu.style.top = `${e.clientY}px`; |
|
|
|
|
|
setTimeout(() => { |
|
document.addEventListener('click', closeContextMenu); |
|
}, 10); |
|
} |
|
|
|
function closeContextMenu() { |
|
contextMenu.style.display = 'none'; |
|
document.removeEventListener('click', closeContextMenu); |
|
} |
|
|
|
function showEditModal() { |
|
if (selectedKeywordIndex === null) return; |
|
|
|
const keyword = keywords[selectedKeywordIndex]; |
|
document.getElementById('editKeywordInput').value = keyword.text; |
|
editModal.style.display = 'flex'; |
|
contextMenu.style.display = 'none'; |
|
} |
|
|
|
function closeEditModal() { |
|
editModal.style.display = 'none'; |
|
} |
|
|
|
function updateKeyword() { |
|
if (selectedKeywordIndex === null) return; |
|
|
|
const newText = document.getElementById('editKeywordInput').value.trim(); |
|
if (newText) { |
|
keywords[selectedKeywordIndex].text = newText; |
|
renderKeywords(); |
|
selectKeyword(selectedKeywordIndex); |
|
} |
|
closeEditModal(); |
|
} |
|
|
|
function showStyleEditor() { |
|
if (selectedKeywordIndex === null) return; |
|
|
|
const editor = document.getElementById('styleEditor'); |
|
const keyword = keywords[selectedKeywordIndex]; |
|
|
|
|
|
document.getElementById('textColor').value = keyword.color; |
|
document.getElementById('bgColor').value = keyword.bgColor; |
|
document.getElementById('fontSize').value = keyword.fontSize; |
|
document.getElementById('fontWeight').value = keyword.fontWeight; |
|
document.getElementById('keywordTheme').value = keyword.theme; |
|
|
|
editor.style.display = 'block'; |
|
contextMenu.style.display = 'none'; |
|
} |
|
|
|
function selectLineColor(element) { |
|
document.querySelectorAll('.color-option').forEach(opt => { |
|
opt.classList.remove('selected'); |
|
}); |
|
element.classList.add('selected'); |
|
lineColor = element.dataset.color; |
|
drawLines(); |
|
} |
|
|
|
function applyStyles() { |
|
if (selectedKeywordIndex === null) return; |
|
|
|
const keyword = keywords[selectedKeywordIndex]; |
|
|
|
|
|
keyword.color = document.getElementById('textColor').value; |
|
keyword.bgColor = document.getElementById('bgColor').value; |
|
keyword.fontSize = document.getElementById('fontSize').value; |
|
keyword.fontWeight = document.getElementById('fontWeight').value; |
|
keyword.theme = document.getElementById('keywordTheme').value; |
|
|
|
|
|
lineWidth = document.getElementById('lineWidth').value; |
|
lineStyle = document.getElementById('lineStyle').value; |
|
|
|
renderKeywords(); |
|
document.getElementById('styleEditor').style.display = 'none'; |
|
} |
|
|
|
function toggleGrid() { |
|
gridEnabled = !gridEnabled; |
|
document.getElementById('gridLines').style.display = gridEnabled ? 'block' : 'none'; |
|
document.getElementById('gridToggle').classList.toggle('bg-gray-500', !gridEnabled); |
|
document.getElementById('gridToggle').classList.toggle('bg-yellow-500', gridEnabled); |
|
} |
|
|
|
function toggleSnap() { |
|
snapEnabled = !snapEnabled; |
|
document.getElementById('snapToggle').classList.toggle('bg-gray-500', !snapEnabled); |
|
document.getElementById('snapToggle').classList.toggle('bg-pink-500', snapEnabled); |
|
|
|
if (snapEnabled) { |
|
createSnapPoints(); |
|
} else { |
|
document.querySelectorAll('.snap-point').forEach(point => point.remove()); |
|
} |
|
} |
|
|
|
function createSnapPoints() { |
|
|
|
document.querySelectorAll('.snap-point').forEach(point => point.remove()); |
|
|
|
const container = document.getElementById('target-container'); |
|
const centerX = container.offsetWidth / 2; |
|
const centerY = container.offsetHeight / 2; |
|
const radius = Math.min(centerX, centerY) * 0.8; |
|
|
|
|
|
for (let i = 0; i < 12; i++) { |
|
const angle = (i * Math.PI * 2) / 12; |
|
const x = centerX + radius * Math.cos(angle); |
|
const y = centerY + radius * Math.sin(angle); |
|
|
|
const snapPoint = document.createElement('div'); |
|
snapPoint.className = 'snap-point'; |
|
snapPoint.style.left = `${x}px`; |
|
snapPoint.style.top = `${y}px`; |
|
container.appendChild(snapPoint); |
|
} |
|
|
|
|
|
for (let i = 0; i < 5; i++) { |
|
const snapPoint = document.createElement('div'); |
|
snapPoint.className = 'snap-point'; |
|
snapPoint.style.left = `${centerX + (i-2) * 20}px`; |
|
snapPoint.style.top = `${centerY}px`; |
|
container.appendChild(snapPoint); |
|
|
|
if (i !== 2) { |
|
const snapPointVert = document.createElement('div'); |
|
snapPointVert.className = 'snap-point'; |
|
snapPointVert.style.left = `${centerX}px`; |
|
snapPointVert.style.top = `${centerY + (i-2) * 20}px`; |
|
container.appendChild(snapPointVert); |
|
} |
|
} |
|
} |
|
|
|
function changeLayer() { |
|
currentLayer = parseInt(document.getElementById('layerSelect').value); |
|
keywords = JSON.parse(JSON.stringify(layers[currentLayer])); |
|
renderKeywords(); |
|
} |
|
|
|
function groupByTheme() { |
|
renderKeywords(); |
|
} |
|
|
|
function addIconToKeyword() { |
|
if (selectedKeywordIndex === null) return; |
|
|
|
iconModal.style.display = 'flex'; |
|
contextMenu.style.display = 'none'; |
|
} |
|
|
|
function closeIconModal() { |
|
iconModal.style.display = 'none'; |
|
} |
|
|
|
function selectIcon(icon) { |
|
selectedIcon = icon; |
|
document.querySelectorAll('.icon-option').forEach(opt => { |
|
opt.classList.remove('bg-blue-100'); |
|
}); |
|
event.currentTarget.classList.add('bg-blue-100'); |
|
} |
|
|
|
function applyIcon() { |
|
if (selectedKeywordIndex === null || !selectedIcon) return; |
|
|
|
keywords[selectedKeywordIndex].icon = selectedIcon; |
|
renderKeywords(); |
|
closeIconModal(); |
|
} |
|
|
|
function exportToPNG() { |
|
const container = document.getElementById('target-container'); |
|
const canvas = document.createElement('canvas'); |
|
canvas.width = container.offsetWidth; |
|
canvas.height = container.offsetHeight; |
|
const ctx = canvas.getContext('2d'); |
|
|
|
|
|
ctx.fillStyle = '#ffffff'; |
|
ctx.fillRect(0, 0, canvas.width, canvas.height); |
|
|
|
|
|
const circles = container.querySelectorAll('.circle'); |
|
circles.forEach(circle => { |
|
const rect = circle.getBoundingClientRect(); |
|
const containerRect = container.getBoundingClientRect(); |
|
|
|
const x = rect.left - containerRect.left + rect.width / 2; |
|
const y = rect.top - containerRect.top + rect.height / 2; |
|
const radius = rect.width / 2; |
|
|
|
ctx.fillStyle = window.getComputedStyle(circle).backgroundColor; |
|
ctx.beginPath(); |
|
ctx.arc(x, y, radius, 0, Math.PI * 2); |
|
ctx.fill(); |
|
}); |
|
|
|
|
|
if (keywords.length >= 2) { |
|
ctx.beginPath(); |
|
ctx.strokeStyle = lineColor; |
|
ctx.lineWidth = lineWidth; |
|
|
|
if (lineStyle === "dashed") { |
|
ctx.setLineDash([5, 3]); |
|
} else if (lineStyle === "dotted") { |
|
ctx.setLineDash([2, 2]); |
|
} else { |
|
ctx.setLineDash([]); |
|
} |
|
|
|
const labels = container.querySelectorAll('.label'); |
|
const positions = []; |
|
|
|
labels.forEach(label => { |
|
const rect = label.getBoundingClientRect(); |
|
const containerRect = container.getBoundingClientRect(); |
|
|
|
positions.push({ |
|
x: rect.left - containerRect.left + rect.width / 2, |
|
y: rect.top - containerRect.top + rect.height / 2 |
|
}); |
|
}); |
|
|
|
for (let i = 0; i < positions.length; i++) { |
|
const next = positions[(i + 1) % positions.length]; |
|
ctx.moveTo(positions[i].x, positions[i].y); |
|
ctx.lineTo(next.x, next.y); |
|
} |
|
|
|
ctx.stroke(); |
|
} |
|
|
|
|
|
const labels = container.querySelectorAll('.label'); |
|
labels.forEach(label => { |
|
const rect = label.getBoundingClientRect(); |
|
const containerRect = container.getBoundingClientRect(); |
|
|
|
const x = rect.left - containerRect.left; |
|
const y = rect.top - containerRect.top; |
|
const width = rect.width; |
|
const height = rect.height; |
|
|
|
|
|
ctx.fillStyle = window.getComputedStyle(label).backgroundColor; |
|
ctx.beginPath(); |
|
ctx.roundRect(x, y, width, height, 16); |
|
ctx.fill(); |
|
|
|
|
|
ctx.fillStyle = window.getComputedStyle(label).color; |
|
ctx.font = `${window.getComputedStyle(label).fontWeight} ${window.getComputedStyle(label).fontSize} ${window.getComputedStyle(label).fontFamily}`; |
|
ctx.textAlign = 'center'; |
|
ctx.textBaseline = 'middle'; |
|
ctx.fillText(label.textContent, x + width/2, y + height/2); |
|
}); |
|
|
|
|
|
const notes = document.getElementById('userNotes').value; |
|
if (notes.trim()) { |
|
ctx.fillStyle = '#1e293b'; |
|
ctx.font = '500 1rem sans-serif'; |
|
ctx.textAlign = 'center'; |
|
ctx.textBaseline = 'top'; |
|
|
|
const lines = notes.split('\n'); |
|
const startY = 20; |
|
|
|
lines.forEach((line, i) => { |
|
ctx.fillText(line, canvas.width/2, startY + i*20); |
|
}); |
|
} |
|
|
|
|
|
const link = document.createElement('a'); |
|
link.download = 'etoile-de-mots.png'; |
|
link.href = canvas.toDataURL('image/png'); |
|
link.click(); |
|
} |
|
|
|
function exportToJSON() { |
|
const data = { |
|
keywords: keywords, |
|
notes: document.getElementById('userNotes').value, |
|
lineColor: lineColor, |
|
lineWidth: lineWidth, |
|
lineStyle: lineStyle |
|
}; |
|
|
|
const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'}); |
|
const url = URL.createObjectURL(blob); |
|
|
|
const link = document.createElement('a'); |
|
link.download = 'etoile-de-mots.json'; |
|
link.href = url; |
|
link.click(); |
|
|
|
setTimeout(() => URL.revokeObjectURL(url), 100); |
|
} |
|
|
|
function importFromJSON() { |
|
const input = document.createElement('input'); |
|
input.type = 'file'; |
|
input.accept = '.json'; |
|
|
|
input.onchange = e => { |
|
const file = e.target.files[0]; |
|
const reader = new FileReader(); |
|
|
|
reader.onload = event => { |
|
try { |
|
const data = JSON.parse(event.target.result); |
|
|
|
if (data.keywords) { |
|
keywords = data.keywords; |
|
layers[currentLayer] = JSON.parse(JSON.stringify(keywords)); |
|
|
|
if (data.notes) { |
|
document.getElementById('userNotes').value = data.notes; |
|
} |
|
|
|
if (data.lineColor) lineColor = data.lineColor; |
|
if (data.lineWidth) lineWidth = data.lineWidth; |
|
if (data.lineStyle) lineStyle = data.lineStyle; |
|
|
|
renderKeywords(); |
|
} |
|
} catch (error) { |
|
alert("Erreur lors du chargement du fichier: " + error.message); |
|
} |
|
}; |
|
|
|
reader.readAsText(file); |
|
}; |
|
|
|
input.click(); |
|
} |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
renderKeywords(); |
|
|
|
|
|
let resizeTimer; |
|
window.addEventListener('resize', () => { |
|
clearTimeout(resizeTimer); |
|
resizeTimer = setTimeout(() => { |
|
renderKeywords(); |
|
}, 200); |
|
}); |
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
if (!contextMenu.contains(e.target) && contextMenu.style.display === 'block') { |
|
contextMenu.style.display = 'none'; |
|
} |
|
|
|
if (!document.getElementById('styleEditor').contains(e.target) && |
|
document.getElementById('styleEditor').style.display === 'block') { |
|
document.getElementById('styleEditor').style.display = 'none'; |
|
} |
|
|
|
if (editModal.style.display === 'flex' && !editModal.querySelector('.edit-modal-content').contains(e.target)) { |
|
closeEditModal(); |
|
} |
|
|
|
if (iconModal.style.display === 'flex' && !iconModal.querySelector('.edit-modal-content').contains(e.target)) { |
|
closeIconModal(); |
|
} |
|
}); |
|
|
|
|
|
document.addEventListener('keydown', (e) => { |
|
if (selectedKeywordIndex === null) return; |
|
|
|
const step = 5; |
|
const keyword = keywords[selectedKeywordIndex]; |
|
|
|
switch(e.key) { |
|
case 'ArrowUp': |
|
keyword.y -= step; |
|
e.preventDefault(); |
|
break; |
|
case 'ArrowDown': |
|
keyword.y += step; |
|
e.preventDefault(); |
|
break; |
|
case 'ArrowLeft': |
|
keyword.x -= step; |
|
e.preventDefault(); |
|
break; |
|
case 'ArrowRight': |
|
keyword.x += step; |
|
e.preventDefault(); |
|
break; |
|
case 'Delete': |
|
deleteSelectedKeyword(); |
|
e.preventDefault(); |
|
break; |
|
case 'Escape': |
|
deselectKeyword(); |
|
e.preventDefault(); |
|
break; |
|
} |
|
|
|
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) { |
|
renderKeywords(); |
|
} |
|
}); |
|
|
|
|
|
document.getElementById('fontSelect').addEventListener('change', (e) => { |
|
selectedFont = e.target.value; |
|
renderKeywords(); |
|
}); |
|
}); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=PierreH/star" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
