Phase -1 (suite) : découpe l'éditeur de screen_edit.html en modules JS
Même chantier que le commit précédent (moteur de jeu, play.html) — templates/screen_edit.html était un unique fichier HTML+CSS+JS de 3312 lignes, tout l'éditeur (arborescence, panneaux flottants, canevas, formulaire de propriétés, éditeur de flow à nœuds, blocs de logique, timeline d'animation) vivant dans UN SEUL <script>. Ce fichier est plus imbriqué que play.html : de nombreux appels s'exécutent au niveau racine du script (pas seulement des déclarations de fonctions), et JavaScript hoiste les déclarations `function` sur TOUT le script — un appel au niveau racine peut donc référencer une fonction déclarée PLUS LOIN dans le même fichier. Découper naïvement casserait cet ordre implicite. Un audit dédié (analyse ligne par ligne de chaque appel racine + son graphe d'appel transitif) a identifié 3 références "en avance" réelles, toutes regroupées dans la même zone (initBuilderPanel()/toggleActionFields() → bindAspectButtons/ toggleElementPropertyValue/onDataDefinitionChange) — le découpage respecte cette contrainte : chaque fichier est une TRANCHE SÉQUENTIELLE de l'original (jamais une réorganisation), et cette zone spécifique reste un seul fichier (panel-init.js) pour que le hoisting continue de fonctionner exactement comme avant. 5 fichiers sous static/js/screen_edit/ : - tree-panels.js — arborescence, menu contextuel, panneaux flottants gauche/droite, galerie d'icônes, modale de suppression/choix d'icône, glisser-déposer du canevas, panneau de propriétés (autosave). - panel-init.js — (ré)initialisation du panneau central après chaque changement de sélection, filtres de répéteur/donnée liée, condition de visibilité, champs d'action du formulaire de nœud. - flow-editor.js — éditeur de flow à nœuds (rendu du graphe, formulaire d'ajout de nœud, blocs de logique — currentBlockNodes/Edges). - tabs-and-blocks.js — onglets du centre, panneaux flottants génériques (drag/resize/plein écran), modale d'un bloc de logique. - animation-timeline.js — timeline d'animation (clips Animate.css/ personnalisés). Toutes les données injectées par Jinja (GAME_SLUG, SCREEN_ID, DEFINITIONS_DATA, FLOW_NODES_INITIAL, ELEMENTS_LABELS, CUSTOM_EVENTS_MAP, ANIM_CLIPS...) sont posées UNE FOIS par un petit <script> inline resté dans le template, avant les <script src> — même patron que static/js/play/. Le seul bout de logique resté inline est la toute petite IIFE d'ouverture initiale (?tab=/?block=), qui dépend directement de request.args et doit s'exécuter après que tous les fichiers soient chargés. tests/conftest.py : screen_edit_js_bundle() (même principe que play_js_bundle(), Phase -1 précédente) — 4 tests qui vérifiaient la présence de telle fonction/chaîne dans le HTML de l'éditeur (le JS y était inline) sont mis à jour pour chercher dans ce bundle. Un des deux échecs révélait un test déjà fragile (assert "Ligne cliquée" in html vérifiait en réalité le TEXTE SOURCE d'un <script> inline, jamais du HTML réellement rendu — ce texte ne peut plus s'y trouver une fois la fonction qui le construit dynamiquement déplacée dans un fichier externe) : corrigé pour vérifier le bundle JS + la disponibilité de la route séparément. Vérifié : 215 tests passent, syntaxe JS validée sur les 5 nouveaux fichiers (node --check) et sur les <script> inline restants (rendus via le client de test). Test manuel recommandé (édition complète d'une scène : arborescence, propriétés, glisser-déposer, logique de flow, blocs, timeline) avant de considérer ce découpage définitivement sans risque — comme pour play.html, ce fichier n'a pas de harnais de test DOM automatisé. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
dbada333d5
commit
fe807ba51e
@@ -0,0 +1,316 @@
|
||||
// ---------- Timeline d'animation : piste par élément, clips Animate.css ou
|
||||
// personnalisés (images-clés), glissés/redimensionnés à la souris sur un
|
||||
// axe du temps en secondes depuis l'affichage de l'écran. Même principe de
|
||||
// panneau rétractable/redimensionnable que "Logique de la scène"
|
||||
// ci-dessus, positionné juste en dessous. ----------
|
||||
|
||||
// ANIM_CLIPS/ANIMATE_CSS_LABELS/GAME_SLUG : voir le petit <script> inline
|
||||
// en tête de screen_edit.html (données Jinja).
|
||||
var ANIM_SCREEN_ID = SCREEN_ID;
|
||||
var ANIM_PX_PER_SEC = 60;
|
||||
var animCurrentClipId = null;
|
||||
|
||||
function animUrl(path) { return "/game/" + GAME_SLUG + path; }
|
||||
|
||||
function animClipLabel(clip) {
|
||||
if (clip.kind === 'custom') return '🎨 Personnalisée';
|
||||
return '🎞️ ' + (ANIMATE_CSS_LABELS[clip.animate_name] || clip.animate_name);
|
||||
}
|
||||
|
||||
function renderAnimTimeline() {
|
||||
var lanesWrap = document.getElementById('animTracks');
|
||||
var ticksWrap = document.getElementById('animRuler');
|
||||
if (!lanesWrap || !ticksWrap) return;
|
||||
lanesWrap.innerHTML = '';
|
||||
ticksWrap.innerHTML = '';
|
||||
|
||||
var maxTime = ANIM_CLIPS.reduce(function(m, c) { return Math.max(m, (c.start_time || 0) + (c.duration || 1)); }, 5);
|
||||
var totalSeconds = Math.ceil(maxTime) + 2;
|
||||
var totalWidth = totalSeconds * ANIM_PX_PER_SEC;
|
||||
|
||||
var spacer = document.createElement('div');
|
||||
spacer.className = 'animRulerSpacer';
|
||||
ticksWrap.appendChild(spacer);
|
||||
var ticksLane = document.createElement('div');
|
||||
ticksLane.className = 'animRulerTicksWrap';
|
||||
ticksLane.style.width = totalWidth + 'px';
|
||||
for (var s = 0; s <= totalSeconds; s++) {
|
||||
var tick = document.createElement('div');
|
||||
tick.className = 'animRulerTick';
|
||||
tick.style.left = (s * ANIM_PX_PER_SEC) + 'px';
|
||||
tick.textContent = s + 's';
|
||||
ticksLane.appendChild(tick);
|
||||
}
|
||||
ticksWrap.appendChild(ticksLane);
|
||||
|
||||
var elementIds = [];
|
||||
ANIM_CLIPS.forEach(function(c) { if (elementIds.indexOf(c.element_id) === -1) elementIds.push(c.element_id); });
|
||||
|
||||
if (!elementIds.length) {
|
||||
var empty = document.createElement('p');
|
||||
empty.className = 'hint';
|
||||
empty.style.padding = '10px 0';
|
||||
empty.textContent = "Aucun clip pour l'instant — choisis un élément ci-dessus et clique « Ajouter un clip ».";
|
||||
lanesWrap.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
elementIds.forEach(function(elId) {
|
||||
var track = document.createElement('div');
|
||||
track.className = 'animTrack';
|
||||
|
||||
var label = document.createElement('div');
|
||||
label.className = 'animTrackLabel';
|
||||
label.textContent = ELEMENTS_LABELS[elId] || ('elt-' + elId);
|
||||
track.appendChild(label);
|
||||
|
||||
var lane = document.createElement('div');
|
||||
lane.className = 'animTrackLane';
|
||||
lane.style.width = totalWidth + 'px';
|
||||
|
||||
ANIM_CLIPS.filter(function(c) { return c.element_id === elId; }).forEach(function(clip) {
|
||||
var block = document.createElement('div');
|
||||
block.className = 'animClip';
|
||||
block.style.left = ((clip.start_time || 0) * ANIM_PX_PER_SEC) + 'px';
|
||||
block.style.width = Math.max(24, (clip.duration || 1) * ANIM_PX_PER_SEC) + 'px';
|
||||
block.textContent = animClipLabel(clip);
|
||||
block.dataset.clipId = clip.id;
|
||||
block.addEventListener('mousedown', function(e) { onAnimClipMouseDown(e, clip.id); });
|
||||
var handle = document.createElement('div');
|
||||
handle.className = 'animClipResizeHandle';
|
||||
handle.addEventListener('mousedown', function(e) { onAnimClipResizeMouseDown(e, clip.id); });
|
||||
block.appendChild(handle);
|
||||
lane.appendChild(block);
|
||||
});
|
||||
|
||||
track.appendChild(lane);
|
||||
lanesWrap.appendChild(track);
|
||||
});
|
||||
}
|
||||
|
||||
function onAnimClipMouseDown(e, clipId) {
|
||||
if (e.target.classList.contains('animClipResizeHandle')) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var clip = ANIM_CLIPS.find(function(c) { return c.id === clipId; });
|
||||
var block = document.querySelector('.animClip[data-clip-id="' + clipId + '"]');
|
||||
var startX = e.clientX;
|
||||
var startLeft = parseFloat(block.style.left);
|
||||
var moved = false;
|
||||
function onMove(ev) {
|
||||
var dx = ev.clientX - startX;
|
||||
if (Math.abs(dx) > 3) moved = true;
|
||||
block.style.left = Math.max(0, startLeft + dx) + 'px';
|
||||
}
|
||||
function onUp() {
|
||||
document.removeEventListener('mousemove', onMove);
|
||||
document.removeEventListener('mouseup', onUp);
|
||||
if (moved) {
|
||||
var newStart = Math.round((parseFloat(block.style.left) / ANIM_PX_PER_SEC) * 10) / 10;
|
||||
clip.start_time = newStart;
|
||||
updateAnimClip(clipId, { start_time: newStart });
|
||||
} else {
|
||||
openAnimClipForm(clip);
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousemove', onMove);
|
||||
document.addEventListener('mouseup', onUp);
|
||||
}
|
||||
|
||||
function onAnimClipResizeMouseDown(e, clipId) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var clip = ANIM_CLIPS.find(function(c) { return c.id === clipId; });
|
||||
var block = document.querySelector('.animClip[data-clip-id="' + clipId + '"]');
|
||||
var startX = e.clientX;
|
||||
var startWidth = parseFloat(block.style.width);
|
||||
function onMove(ev) {
|
||||
var dx = ev.clientX - startX;
|
||||
block.style.width = Math.max(10, startWidth + dx) + 'px';
|
||||
}
|
||||
function onUp() {
|
||||
document.removeEventListener('mousemove', onMove);
|
||||
document.removeEventListener('mouseup', onUp);
|
||||
var newDuration = Math.round((parseFloat(block.style.width) / ANIM_PX_PER_SEC) * 10) / 10;
|
||||
clip.duration = newDuration;
|
||||
updateAnimClip(clipId, { duration: newDuration });
|
||||
}
|
||||
document.addEventListener('mousemove', onMove);
|
||||
document.addEventListener('mouseup', onUp);
|
||||
}
|
||||
|
||||
function updateAnimClip(clipId, fields) {
|
||||
return fetch(animUrl('/animations/clips/' + clipId + '/update'), {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(fields)
|
||||
}).then(function(r) { return r.json(); }).then(function(updated) {
|
||||
var idx = ANIM_CLIPS.findIndex(function(c) { return c.id === updated.id; });
|
||||
if (idx > -1) ANIM_CLIPS[idx] = updated;
|
||||
return updated;
|
||||
});
|
||||
}
|
||||
|
||||
function addAnimTrack() {
|
||||
var elId = parseInt(document.getElementById('anim-new-track-element').value, 10);
|
||||
fetch(animUrl('/screens/' + ANIM_SCREEN_ID + '/animations/clips/add'), {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ element_id: elId, kind: 'animate_css', animate_name: 'fadeIn', start_time: 0, duration: 1 }),
|
||||
}).then(function(r) { return r.json(); }).then(function(clip) {
|
||||
ANIM_CLIPS.push(clip);
|
||||
renderAnimTimeline();
|
||||
openAnimClipForm(clip);
|
||||
});
|
||||
}
|
||||
|
||||
function toggleAnimClipKind() {
|
||||
var kind = document.getElementById('anim-clip-kind').value;
|
||||
document.getElementById('anim-clip-animate-css-fields').style.display = kind === 'animate_css' ? 'block' : 'none';
|
||||
document.getElementById('anim-clip-custom-fields').style.display = kind === 'custom' ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function addAnimKeyframeRow(percent, cssText) {
|
||||
var wrap = document.getElementById('anim-clip-keyframes');
|
||||
var row = document.createElement('div');
|
||||
row.className = 'fieldRow animKeyframeRow';
|
||||
var percentInput = document.createElement('input');
|
||||
percentInput.type = 'number'; percentInput.min = '0'; percentInput.max = '100'; percentInput.step = '1';
|
||||
percentInput.className = 'anim-kf-percent'; percentInput.style.flex = '0 0 70px';
|
||||
percentInput.value = percent != null ? percent : 0;
|
||||
var cssInput = document.createElement('textarea');
|
||||
cssInput.className = 'anim-kf-css'; cssInput.style.flex = '1'; cssInput.rows = 2;
|
||||
cssInput.placeholder = 'ex. opacity: 0; transform: scale(0.5);';
|
||||
cssInput.value = cssText || '';
|
||||
var removeBtn = document.createElement('button');
|
||||
removeBtn.type = 'button'; removeBtn.className = 'smallBtn danger';
|
||||
removeBtn.textContent = '✕';
|
||||
removeBtn.onclick = function() { row.remove(); };
|
||||
row.appendChild(percentInput);
|
||||
row.appendChild(cssInput);
|
||||
row.appendChild(removeBtn);
|
||||
wrap.appendChild(row);
|
||||
}
|
||||
|
||||
function collectAnimKeyframes() {
|
||||
var rows = document.querySelectorAll('#anim-clip-keyframes .animKeyframeRow');
|
||||
var keyframes = [];
|
||||
rows.forEach(function(row) {
|
||||
var percent = parseFloat(row.querySelector('.anim-kf-percent').value) || 0;
|
||||
var cssText = row.querySelector('.anim-kf-css').value;
|
||||
var props = {};
|
||||
cssText.split(';').forEach(function(decl) {
|
||||
var parts = decl.split(':');
|
||||
if (parts.length === 2) {
|
||||
var prop = parts[0].trim(), val = parts[1].trim();
|
||||
if (prop && val) props[prop] = val;
|
||||
}
|
||||
});
|
||||
keyframes.push({ percent: percent, props: props });
|
||||
});
|
||||
return keyframes;
|
||||
}
|
||||
|
||||
function openAnimClipForm(clip) {
|
||||
animCurrentClipId = clip.id;
|
||||
document.getElementById('animClipForm').style.display = 'block';
|
||||
document.getElementById('animClipFormTitle').textContent = 'Clip — ' + (ELEMENTS_LABELS[clip.element_id] || ('elt-' + clip.element_id));
|
||||
document.getElementById('anim-clip-kind').value = clip.kind || 'animate_css';
|
||||
document.getElementById('anim-clip-animate-name').value = clip.animate_name || 'fadeIn';
|
||||
document.getElementById('anim-clip-start').value = clip.start_time || 0;
|
||||
document.getElementById('anim-clip-duration').value = clip.duration || 1;
|
||||
document.getElementById('anim-clip-delay').value = clip.delay || 0;
|
||||
document.getElementById('anim-clip-easing').value = clip.easing || 'ease';
|
||||
document.getElementById('anim-clip-iteration').value = clip.iteration_count || '1';
|
||||
document.getElementById('anim-clip-keyframes').innerHTML = '';
|
||||
var keyframes = [];
|
||||
if (clip.custom_keyframes) {
|
||||
try { keyframes = JSON.parse(clip.custom_keyframes); } catch (e) { /* ignore */ }
|
||||
}
|
||||
if (!keyframes.length) keyframes = [{ percent: 0, props: { opacity: '0' } }, { percent: 100, props: { opacity: '1' } }];
|
||||
keyframes.forEach(function(k) {
|
||||
var cssText = Object.keys(k.props || {}).map(function(p) { return p + ': ' + k.props[p] + ';'; }).join(' ');
|
||||
addAnimKeyframeRow(k.percent, cssText);
|
||||
});
|
||||
toggleAnimClipKind();
|
||||
document.querySelectorAll('.animClip').forEach(function(b) {
|
||||
b.classList.toggle('selected', parseInt(b.dataset.clipId, 10) === clip.id);
|
||||
});
|
||||
}
|
||||
|
||||
function closeAnimClipForm() {
|
||||
animCurrentClipId = null;
|
||||
document.getElementById('animClipForm').style.display = 'none';
|
||||
document.querySelectorAll('.animClip').forEach(function(b) { b.classList.remove('selected'); });
|
||||
}
|
||||
|
||||
function saveAnimClipForm() {
|
||||
if (!animCurrentClipId) return Promise.resolve();
|
||||
var kind = document.getElementById('anim-clip-kind').value;
|
||||
var fields = {
|
||||
kind: kind,
|
||||
animate_name: document.getElementById('anim-clip-animate-name').value,
|
||||
start_time: parseFloat(document.getElementById('anim-clip-start').value) || 0,
|
||||
duration: parseFloat(document.getElementById('anim-clip-duration').value) || 1,
|
||||
delay: parseFloat(document.getElementById('anim-clip-delay').value) || 0,
|
||||
easing: document.getElementById('anim-clip-easing').value,
|
||||
iteration_count: document.getElementById('anim-clip-iteration').value,
|
||||
};
|
||||
if (kind === 'custom') fields.custom_keyframes = collectAnimKeyframes();
|
||||
return updateAnimClip(animCurrentClipId, fields).then(function() { renderAnimTimeline(); });
|
||||
}
|
||||
|
||||
function deleteAnimClipForm() {
|
||||
if (!animCurrentClipId) return;
|
||||
if (!confirm('Supprimer ce clip ?')) return;
|
||||
var id = animCurrentClipId;
|
||||
fetch(animUrl('/animations/clips/' + id + '/delete'), { method: 'POST' }).then(function() {
|
||||
ANIM_CLIPS = ANIM_CLIPS.filter(function(c) { return c.id !== id; });
|
||||
closeAnimClipForm();
|
||||
renderAnimTimeline();
|
||||
});
|
||||
}
|
||||
|
||||
function previewAnimClip() {
|
||||
if (!animCurrentClipId) return;
|
||||
saveAnimClipForm().then(function() {
|
||||
var clip = ANIM_CLIPS.find(function(c) { return c.id === animCurrentClipId; });
|
||||
if (!clip) return;
|
||||
var target = document.querySelector('#canvas [data-anim-target="' + clip.element_id + '"]');
|
||||
if (!target) return;
|
||||
var duration = clip.duration || 1, delay = clip.delay || 0;
|
||||
var iterationCount = clip.iteration_count || '1';
|
||||
if (clip.kind === 'custom') {
|
||||
var keyframes = [];
|
||||
try { keyframes = JSON.parse(clip.custom_keyframes || '[]'); } catch (e) { /* ignore */ }
|
||||
var steps = keyframes.map(function(k) {
|
||||
var props = Object.keys(k.props || {}).map(function(p) { return p + ':' + k.props[p] + ';'; }).join(' ');
|
||||
return k.percent + '% { ' + props + ' }';
|
||||
}).join(' ');
|
||||
var styleTag = document.getElementById('animEditorPreviewStyle');
|
||||
if (!styleTag) {
|
||||
styleTag = document.createElement('style');
|
||||
styleTag.id = 'animEditorPreviewStyle';
|
||||
document.head.appendChild(styleTag);
|
||||
}
|
||||
styleTag.textContent = '@keyframes animEditorPreview { ' + steps + ' }';
|
||||
target.style.animation = 'animEditorPreview ' + duration + 's ' + (clip.easing || 'ease') + ' ' + delay + 's ' + iterationCount;
|
||||
target.addEventListener('animationend', function handler() {
|
||||
target.style.animation = '';
|
||||
target.removeEventListener('animationend', handler);
|
||||
});
|
||||
} else {
|
||||
var animClass = 'animate__' + clip.animate_name;
|
||||
target.style.setProperty('--animate-duration', duration + 's');
|
||||
target.style.setProperty('--animate-delay', delay + 's');
|
||||
target.style.animationIterationCount = iterationCount;
|
||||
target.classList.add('animate__animated', animClass);
|
||||
target.addEventListener('animationend', function handler() {
|
||||
target.classList.remove('animate__animated', animClass);
|
||||
target.removeEventListener('animationend', handler);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Panneau timeline absent sur un écran-modèle (élément de jeu), comme le
|
||||
// panneau de logique — voir le commentaire Jinja au-dessus de .builderTabs.
|
||||
var HAS_ANIM_PANEL = !!document.getElementById('animTabPanel');
|
||||
if (HAS_ANIM_PANEL) { renderAnimTimeline(); }
|
||||
@@ -0,0 +1,616 @@
|
||||
// ---------- Logique de la scène : éditeur de flow à nœuds ----------
|
||||
//
|
||||
// FLOW_NODES_INITIAL/FLOW_EDGES_INITIAL/FLOW_BLOCKS/ELEMENTS_LABELS/
|
||||
// SCREENS_MAP/*_LABELS_MAP/CUSTOM_EVENTS_MAP/GAME_SLUG/SCREEN_ID sont
|
||||
// posés par le petit <script> inline en tête de screen_edit.html (données
|
||||
// Jinja) — voir static/js/play/ pour le même patron déjà en place côté
|
||||
// moteur de jeu.
|
||||
var FLOW_SCREEN_ID = SCREEN_ID;
|
||||
// Blocs de logique (voir screens/flow/blocks/) : ALL_FLOW porte TOUS les
|
||||
// nœuds/arêtes de cet écran, tous blocs confondus (chargement inchangé) ;
|
||||
// un seul bloc est ouvert à la fois (modale unique, à la Unity) — pas
|
||||
// besoin d'une seconde copie filtrée à tenir synchronisée, currentBlockNodes()/
|
||||
// currentBlockEdges() recalculent la vue du bloc ouvert à chaque rendu.
|
||||
var ALL_FLOW = {
|
||||
nodes: FLOW_NODES_INITIAL,
|
||||
edges: FLOW_EDGES_INITIAL,
|
||||
};
|
||||
var CURRENT_BLOCK_ID = null;
|
||||
|
||||
function currentBlockNodes() {
|
||||
return ALL_FLOW.nodes.filter(function(n) { return n.block_id === CURRENT_BLOCK_ID; });
|
||||
}
|
||||
function currentBlockEdges() {
|
||||
var ids = {};
|
||||
currentBlockNodes().forEach(function(n) { ids[n.id] = true; });
|
||||
return ALL_FLOW.edges.filter(function(e) { return ids[e.from_node_id] && ids[e.to_node_id]; });
|
||||
}
|
||||
|
||||
var flowPendingPort = null; // {nodeId, port} en attente de connexion
|
||||
|
||||
function flowUrl(path) { return "/game/" + GAME_SLUG + path; }
|
||||
|
||||
function nodeLabel(node) {
|
||||
if (node.node_type === 'trigger') {
|
||||
if (node.trigger_event === 'affichage') return '🖥️ ' + TRIGGER_LABELS_MAP['affichage'];
|
||||
if (node.trigger_event === 'evenement') {
|
||||
var listenedEvent = CUSTOM_EVENTS_MAP[node.trigger_custom_event_id];
|
||||
return '📣 Sur « ' + (listenedEvent ? listenedEvent.name : '?') + ' »';
|
||||
}
|
||||
return '🖱️ ' + (TRIGGER_LABELS_MAP[node.trigger_event] || 'Au clic') + ' sur ' +
|
||||
(ELEMENTS_LABELS[node.trigger_element_id] || '?');
|
||||
}
|
||||
if (node.node_type === 'condition') {
|
||||
var clauseSubject = function(c, field, variable) {
|
||||
return (c.source ?? c.cond_source) === 'variable' ? ('🔧 ' + (variable || c.cond_variable || '?')) : (field || c.cond_field || '?');
|
||||
};
|
||||
var mainSubject = clauseSubject(node, node.cond_field, node.cond_variable);
|
||||
var mainClause = '❓ SI ' + mainSubject + ' ' + (CONDITION_OPERATOR_LABELS_MAP[node.cond_operator] || node.cond_operator) + ' ' + (node.cond_value || '');
|
||||
if (node.cond_clauses) {
|
||||
// 2.4 — plusieurs clauses combinées : on affiche chaque champ/variable
|
||||
// testé, relié par le connecteur ET/OU choisi, plutôt qu'une seule clause.
|
||||
try {
|
||||
var clauses = JSON.parse(node.cond_clauses);
|
||||
var combLabel = node.cond_combinator === 'ou' ? ' OU ' : ' ET ';
|
||||
return '❓ SI ' + clauses.map(function(c) {
|
||||
return clauseSubject(c, c.field, c.variable) + ' ' + (CONDITION_OPERATOR_LABELS_MAP[c.operator] || c.operator) + ' ' + (c.value || '');
|
||||
}).join(combLabel);
|
||||
} catch (e) { /* JSON invalide : on retombe sur la clause historique */ }
|
||||
}
|
||||
return mainClause;
|
||||
}
|
||||
// action
|
||||
var base = '⚡ ' + (ACTION_TYPE_LABELS_MAP[node.action_type] || node.action_type);
|
||||
if (node.action_type === 'aller_a') {
|
||||
base += ' → ' + (SCREENS_MAP[node.target_screen_id] || '?');
|
||||
} else if (node.action_type === 'ouvrir_ligne') {
|
||||
base += ' → ' + (SCREENS_MAP[node.target_screen_id] || '?') + ' (ligne cliquée)';
|
||||
} else if (node.action_type === 'activer_onglet') {
|
||||
base += ' → ' + (ELEMENTS_LABELS[node.target_element_id] || '?') + ' (masque ses frères)';
|
||||
} else if (node.action_type === 'modifier_element') {
|
||||
base += ' → ' + (ELEMENTS_LABELS[node.target_element_id] || '?') + ' : ' + (ELEMENT_PROPERTY_LABELS_MAP[node.element_property] || node.element_property);
|
||||
if (node.element_property === 'visibilite') {
|
||||
base += ' = ' + (ELEMENT_VISIBILITY_LABELS_MAP[node.element_value] || node.element_value);
|
||||
} else if (node.element_property === 'surbrillance') {
|
||||
base += ' = ' + (ELEMENT_SURBRILLANCE_LABELS_MAP[node.element_value] || node.element_value);
|
||||
} else if (node.element_property === 'desactive') {
|
||||
base += ' = ' + (ELEMENT_DESACTIVE_LABELS_MAP[node.element_value] || node.element_value);
|
||||
} else if (node.element_value && node.element_value.indexOf('||') !== -1) {
|
||||
var vparts = node.element_value.split('||');
|
||||
base += ' = ' + vparts[0] + ' ↔ ' + vparts[1] + ' (va-et-vient)';
|
||||
} else {
|
||||
base += ' = ' + node.element_value;
|
||||
}
|
||||
} else if (node.action_type === 'modifier_donnee') {
|
||||
base += ' → ' + (node.target_field || '?') + ' : ' + (DATA_OPERATION_LABELS_MAP[node.data_operation] || node.data_operation);
|
||||
if (node.data_value) base += ' ' + node.data_value;
|
||||
} else if (node.action_type === 'modifier_variable') {
|
||||
base += ' → ' + (node.target_variable || '?') + ' : ' + (DATA_OPERATION_LABELS_MAP[node.data_operation] || node.data_operation);
|
||||
if (node.data_value) base += ' ' + node.data_value;
|
||||
} else if (node.action_type === 'attendre') {
|
||||
base += ' (' + (node.data_value || '0') + ' s)';
|
||||
} else if (node.action_type === 'declencher_evenement') {
|
||||
// Notification pure : rien d'autre à afficher que le nom de
|
||||
// l'événement (voir screens/custom_events/) — aucun élément/ligne
|
||||
// n'est jamais transmis au déclenchement.
|
||||
var dispatchedEvent = CUSTOM_EVENTS_MAP[node.target_custom_event_id];
|
||||
base += ' « ' + (dispatchedEvent ? dispatchedEvent.name : '?') + ' »';
|
||||
}
|
||||
return base;
|
||||
}
|
||||
|
||||
function renderFlow() {
|
||||
var canvas = document.getElementById('flowCanvas');
|
||||
var svg = document.getElementById('flowEdges');
|
||||
canvas.innerHTML = '';
|
||||
svg.innerHTML = '';
|
||||
|
||||
currentBlockNodes().forEach(function(node) {
|
||||
var div = document.createElement('div');
|
||||
div.className = 'flowNode flowNode-' + node.node_type;
|
||||
div.style.left = node.x + 'px';
|
||||
div.style.top = node.y + 'px';
|
||||
div.dataset.nodeId = node.id;
|
||||
|
||||
var del = document.createElement('button');
|
||||
del.className = 'flowNodeDelete';
|
||||
del.type = 'button';
|
||||
del.textContent = '✕';
|
||||
del.onclick = function(ev) { ev.stopPropagation(); deleteFlowNode(node.id); };
|
||||
div.appendChild(del);
|
||||
|
||||
var body = document.createElement('div');
|
||||
body.className = 'flowNodeBody';
|
||||
body.textContent = nodeLabel(node);
|
||||
div.appendChild(body);
|
||||
|
||||
if (node.node_type !== 'trigger') {
|
||||
var inPort = document.createElement('div');
|
||||
inPort.className = 'flowPort flowPortIn';
|
||||
inPort.onclick = function(ev) { ev.stopPropagation(); onPortClick(node.id, 'in', null); };
|
||||
div.appendChild(inPort);
|
||||
}
|
||||
if (node.node_type === 'condition') {
|
||||
var outTrue = document.createElement('div');
|
||||
outTrue.className = 'flowPort flowPortOut flowPortTrue';
|
||||
outTrue.title = 'Vrai';
|
||||
outTrue.onclick = function(ev) { ev.stopPropagation(); onPortClick(node.id, 'out', 'vrai'); };
|
||||
div.appendChild(outTrue);
|
||||
var outFalse = document.createElement('div');
|
||||
outFalse.className = 'flowPort flowPortOut flowPortFalse';
|
||||
outFalse.title = 'Faux';
|
||||
outFalse.onclick = function(ev) { ev.stopPropagation(); onPortClick(node.id, 'out', 'faux'); };
|
||||
div.appendChild(outFalse);
|
||||
} else {
|
||||
var outPort = document.createElement('div');
|
||||
outPort.className = 'flowPort flowPortOut';
|
||||
outPort.onclick = function(ev) { ev.stopPropagation(); onPortClick(node.id, 'out', 'out'); };
|
||||
div.appendChild(outPort);
|
||||
}
|
||||
|
||||
div.addEventListener('mousedown', function(e) { onFlowNodeMouseDown(e, node.id); });
|
||||
canvas.appendChild(div);
|
||||
});
|
||||
|
||||
// Redessine les fils après que les nœuds soient dans le DOM (pour lire leur position réelle).
|
||||
requestAnimationFrame(drawFlowEdges);
|
||||
}
|
||||
|
||||
function portPosition(nodeId, side, sub) {
|
||||
var div = document.querySelector('.flowNode[data-node-id="' + nodeId + '"]');
|
||||
if (!div) return null;
|
||||
var wrap = document.querySelector('.flowCanvasWrap');
|
||||
var wrapRect = wrap.getBoundingClientRect();
|
||||
var selector = side === 'in' ? '.flowPortIn' : (sub === 'vrai' ? '.flowPortTrue' : (sub === 'faux' ? '.flowPortFalse' : '.flowPortOut'));
|
||||
var port = div.querySelector(selector);
|
||||
if (!port) return null;
|
||||
var r = port.getBoundingClientRect();
|
||||
return { x: r.left + r.width / 2 - wrapRect.left + wrap.scrollLeft, y: r.top + r.height / 2 - wrapRect.top + wrap.scrollTop };
|
||||
}
|
||||
|
||||
function drawFlowEdges() {
|
||||
var svg = document.getElementById('flowEdges');
|
||||
svg.innerHTML = '';
|
||||
currentBlockEdges().forEach(function(edge) {
|
||||
var from = portPosition(edge.from_node_id, 'out', edge.from_port);
|
||||
var to = portPosition(edge.to_node_id, 'in', null);
|
||||
if (!from || !to) return;
|
||||
var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||
line.setAttribute('x1', from.x); line.setAttribute('y1', from.y);
|
||||
line.setAttribute('x2', to.x); line.setAttribute('y2', to.y);
|
||||
line.setAttribute('class', 'flowEdgeLine' + (edge.from_port === 'faux' ? ' flowEdgeFalse' : (edge.from_port === 'vrai' ? ' flowEdgeTrue' : '')));
|
||||
line.style.pointerEvents = 'stroke';
|
||||
line.addEventListener('click', function() { deleteFlowEdge(edge.id); });
|
||||
svg.appendChild(line);
|
||||
});
|
||||
}
|
||||
|
||||
function onPortClick(nodeId, side, port) {
|
||||
if (side === 'out') {
|
||||
flowPendingPort = { nodeId: nodeId, port: port };
|
||||
return;
|
||||
}
|
||||
// side === 'in'
|
||||
if (!flowPendingPort) return;
|
||||
if (flowPendingPort.nodeId === nodeId) { flowPendingPort = null; return; }
|
||||
fetch(flowUrl('/screens/' + FLOW_SCREEN_ID + '/flow/edges/add'), {
|
||||
method: 'POST', headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ from_node_id: flowPendingPort.nodeId, from_port: flowPendingPort.port, to_node_id: nodeId })
|
||||
}).then(function(r){ return r.json(); }).then(function(edge){
|
||||
ALL_FLOW.edges.push({ id: edge.id, screen_id: FLOW_SCREEN_ID, from_node_id: flowPendingPort.nodeId, from_port: flowPendingPort.port, to_node_id: nodeId });
|
||||
flowPendingPort = null;
|
||||
drawFlowEdges();
|
||||
});
|
||||
}
|
||||
|
||||
function deleteFlowEdge(edgeId) {
|
||||
fetch(flowUrl('/flow/edges/' + edgeId + '/delete'), { method: 'POST' }).then(function(){
|
||||
ALL_FLOW.edges = ALL_FLOW.edges.filter(function(e){ return e.id !== edgeId; });
|
||||
drawFlowEdges();
|
||||
});
|
||||
}
|
||||
|
||||
function deleteFlowNode(nodeId) {
|
||||
fetch(flowUrl('/flow/nodes/' + nodeId + '/delete'), { method: 'POST' }).then(function(){
|
||||
ALL_FLOW.nodes = ALL_FLOW.nodes.filter(function(n){ return n.id !== nodeId; });
|
||||
ALL_FLOW.edges = ALL_FLOW.edges.filter(function(e){ return e.from_node_id !== nodeId && e.to_node_id !== nodeId; });
|
||||
renderFlow();
|
||||
});
|
||||
}
|
||||
|
||||
function onFlowNodeMouseDown(e, nodeId) {
|
||||
if (e.target.classList.contains('flowPort') || e.target.classList.contains('flowNodeDelete')) return;
|
||||
e.preventDefault();
|
||||
var node = ALL_FLOW.nodes.find(function(n){ return n.id === nodeId; });
|
||||
var div = document.querySelector('.flowNode[data-node-id="' + nodeId + '"]');
|
||||
var startX = e.clientX, startY = e.clientY;
|
||||
var startLeft = node.x, startTop = node.y;
|
||||
function onMove(ev) {
|
||||
var dx = ev.clientX - startX, dy = ev.clientY - startY;
|
||||
node.x = Math.max(0, startLeft + dx);
|
||||
node.y = Math.max(0, startTop + dy);
|
||||
div.style.left = node.x + 'px';
|
||||
div.style.top = node.y + 'px';
|
||||
drawFlowEdges();
|
||||
}
|
||||
function onUp() {
|
||||
document.removeEventListener('mousemove', onMove);
|
||||
document.removeEventListener('mouseup', onUp);
|
||||
fetch(flowUrl('/flow/nodes/' + nodeId + '/move'), {
|
||||
method: 'POST', headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ x: node.x, y: node.y })
|
||||
});
|
||||
}
|
||||
document.addEventListener('mousemove', onMove);
|
||||
document.addEventListener('mouseup', onUp);
|
||||
}
|
||||
|
||||
// ---------- Formulaire d'ajout de nœud ----------
|
||||
|
||||
var currentNodeFormType = null;
|
||||
|
||||
function openNodeForm(type) {
|
||||
currentNodeFormType = type;
|
||||
document.getElementById('nodeForm').style.display = 'block';
|
||||
document.getElementById('nodeFormTitle').textContent =
|
||||
type === 'trigger' ? 'Nouveau déclencheur' : (type === 'condition' ? 'Nouvelle condition' : 'Nouvelle action');
|
||||
document.getElementById('nodeFormTrigger').style.display = type === 'trigger' ? 'block' : 'none';
|
||||
document.getElementById('nodeFormCondition').style.display = type === 'condition' ? 'block' : 'none';
|
||||
document.getElementById('nodeFormAction').style.display = type === 'action' ? 'block' : 'none';
|
||||
if (type === 'trigger') toggleFlowTriggerFields();
|
||||
if (type === 'condition') {
|
||||
document.getElementById('nf-cond-source').value = 'objet';
|
||||
onFlowConditionSourceChange();
|
||||
onFlowDefinitionChange('cond');
|
||||
flowConditionExtraClauses = [];
|
||||
renderFlowConditionClauses();
|
||||
}
|
||||
if (type === 'action') {
|
||||
document.getElementById('nf-action-element-toggle').checked = false;
|
||||
toggleFlowActionFields();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleFlowTriggerFields() {
|
||||
var eventVal = document.getElementById('nf-trigger-event').value;
|
||||
var isAffichage = eventVal === 'affichage';
|
||||
// "Sur un événement personnalisé" ne concerne ni un élément précis ni
|
||||
// l'écran entier : c'est un scan global (voir dispatchGameEvent() dans
|
||||
// play.html), le seul réglage propre à ce nœud est QUEL événement.
|
||||
var isCustomEvent = eventVal === 'evenement';
|
||||
document.getElementById('nf-trigger-element-row').style.display = (isAffichage || isCustomEvent) ? 'none' : 'block';
|
||||
document.getElementById('nf-trigger-repeater-hint').style.display = (isAffichage || isCustomEvent) ? 'none' : 'block';
|
||||
document.getElementById('nf-trigger-affichage-hint').style.display = isAffichage ? 'block' : 'none';
|
||||
document.getElementById('nf-trigger-event-row').style.display = isCustomEvent ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function closeNodeForm() {
|
||||
document.getElementById('nodeForm').style.display = 'none';
|
||||
currentNodeFormType = null;
|
||||
}
|
||||
|
||||
// CLICKED_ROW_ID (-1, voir screens/flow/constants.py) : "la ligne de
|
||||
// Répéteur sur laquelle on vient de cliquer" — pour un déclencheur "Au
|
||||
// clic" posé sur un Répéteur, chaque ligne exécute le MÊME graphe et la
|
||||
// ligne cliquée n'est jamais connue à l'avance ; choisir une ligne fixe
|
||||
// dans l'éditeur n'a donc pas de sens pour ce cas. Résolue au moment de
|
||||
// l'exécution (window.lastClickedRowId, voir play.html), pas à la
|
||||
// création du nœud — proposée en tête de TOUTE liste "Ligne concernée",
|
||||
// avant les lignes réelles de l'objet.
|
||||
var FLOW_CLICKED_ROW_ID = -1;
|
||||
|
||||
function _flowRowOptionsHtml(info) {
|
||||
var options = '<option value="' + FLOW_CLICKED_ROW_ID + '">🖱️ Ligne cliquée (Répéteur)</option>';
|
||||
options += info.rows.length
|
||||
? info.rows.map(function(r){ return '<option value="' + r.id + '">' + r.label + '</option>'; }).join('')
|
||||
: '<option value="" disabled>Aucune donnée dans cet objet</option>';
|
||||
return options;
|
||||
}
|
||||
|
||||
function onFlowDefinitionChange(prefix) {
|
||||
var defSel = document.getElementById(prefix === 'cond' ? 'nf-cond-definition' : 'nf-action-data-definition');
|
||||
if (!defSel) return;
|
||||
var info = DEFINITIONS_DATA[defSel.value] || { rows: [], fields: [] };
|
||||
var rowSel = document.getElementById(prefix === 'cond' ? 'nf-cond-row' : 'nf-action-data-row');
|
||||
var fieldSel = document.getElementById(prefix === 'cond' ? 'nf-cond-field' : 'nf-action-data-field');
|
||||
rowSel.innerHTML = _flowRowOptionsHtml(info);
|
||||
fieldSel.innerHTML = info.fields.length
|
||||
? info.fields.map(function(f){ return '<option value="' + f.name + '" data-type="' + f.type + '">' + f.name + ' (' + f.type + ')</option>'; }).join('')
|
||||
: '<option value="">Aucun champ simple</option>';
|
||||
}
|
||||
|
||||
function onFlowFieldChange() {
|
||||
// Pas d'action nécessaire ici pour l'instant : le type du champ est relu
|
||||
// directement sur l'option sélectionnée au moment de la création du nœud.
|
||||
}
|
||||
|
||||
// Bascule la clause PRINCIPALE d'un nœud Condition entre "Champ d'un
|
||||
// objet" (historique) et "Variable globale" — voir ensure_flow_schema.py
|
||||
// (cond_source) et evaluateConditionClause() dans play.html. Même bascule
|
||||
// pour une clause SUPPLÉMENTAIRE : voir onFlowClauseSourceChange() plus
|
||||
// bas, sur le même principe mais scopée par index.
|
||||
function onFlowConditionSourceChange() {
|
||||
var isVariable = document.getElementById('nf-cond-source').value === 'variable';
|
||||
document.getElementById('nf-cond-objet-fields').style.display = isVariable ? 'none' : 'block';
|
||||
document.getElementById('nf-cond-variable-fields').style.display = isVariable ? 'block' : 'none';
|
||||
var hint = document.getElementById('nf-cond-no-objet-hint');
|
||||
if (hint) hint.style.display = isVariable ? 'none' : 'block';
|
||||
}
|
||||
|
||||
// ---------- 2.4 — clauses supplémentaires (ET/OU) d'un nœud Condition ----------
|
||||
// Chaque clause supplémentaire réutilise EXACTEMENT le même modèle que la
|
||||
// clause principale (nf-cond-definition/row/field/operator/value) mais dans
|
||||
// une ligne indépendante, numérotée par index dans flowConditionExtraClauses.
|
||||
var flowConditionExtraClauses = [];
|
||||
|
||||
function addFlowConditionClause() {
|
||||
var firstDefSel = document.getElementById('nf-cond-definition');
|
||||
var defaultDefId = firstDefSel && firstDefSel.value ? firstDefSel.value : '';
|
||||
flowConditionExtraClauses.push({
|
||||
source: 'objet', definition_id: defaultDefId, row_id: '', field: '', field_type: '',
|
||||
variable: '', variable_chemin: '', operator: 'egal', value: '',
|
||||
});
|
||||
renderFlowConditionClauses();
|
||||
}
|
||||
|
||||
function removeFlowConditionClause(idx) {
|
||||
flowConditionExtraClauses.splice(idx, 1);
|
||||
renderFlowConditionClauses();
|
||||
}
|
||||
|
||||
// Bascule une clause SUPPLÉMENTAIRE (indexée) entre "Champ d'un objet" et
|
||||
// "Variable globale" — même principe que onFlowConditionSourceChange() pour
|
||||
// la clause principale, scopé par index plutôt que par id fixe.
|
||||
function onFlowClauseSourceChange(idx) {
|
||||
var sel = document.getElementById('nf-cond-extra-source-' + idx);
|
||||
if (!sel) return;
|
||||
flowConditionExtraClauses[idx].source = sel.value;
|
||||
var isVariable = sel.value === 'variable';
|
||||
var objetFields = document.getElementById('nf-cond-extra-objet-fields-' + idx);
|
||||
var varFields = document.getElementById('nf-cond-extra-variable-fields-' + idx);
|
||||
if (objetFields) objetFields.style.display = isVariable ? 'none' : 'block';
|
||||
if (varFields) varFields.style.display = isVariable ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function renderFlowConditionClauses() {
|
||||
var wrap = document.getElementById('nf-cond-extra-clauses');
|
||||
var combinatorRow = document.getElementById('nf-cond-combinator-row');
|
||||
if (!wrap || !combinatorRow) return;
|
||||
combinatorRow.style.display = flowConditionExtraClauses.length ? 'block' : 'none';
|
||||
var defOptionsHtml = document.getElementById('nf-cond-definition') ? document.getElementById('nf-cond-definition').innerHTML : '';
|
||||
wrap.innerHTML = flowConditionExtraClauses.map(function(clause, idx) {
|
||||
var isVariable = clause.source === 'variable';
|
||||
return '' +
|
||||
'<div class="flowConditionClauseRow" style="border-top:1px dashed var(--border); margin-top:8px; padding-top:8px;">' +
|
||||
'<label>Source<select id="nf-cond-extra-source-' + idx + '" onchange="onFlowClauseSourceChange(' + idx + ')">' +
|
||||
'<option value="objet"' + (isVariable ? '' : ' selected') + '>Champ d\'un objet</option>' +
|
||||
'<option value="variable"' + (isVariable ? ' selected' : '') + '>Variable globale</option>' +
|
||||
'</select></label>' +
|
||||
'<div id="nf-cond-extra-objet-fields-' + idx + '" style="display:' + (isVariable ? 'none' : 'block') + ';">' +
|
||||
'<label>Objet<select id="nf-cond-extra-definition-' + idx + '" onchange="onFlowClauseDefinitionChange(' + idx + ')">' + defOptionsHtml + '</select></label>' +
|
||||
'<label>Ligne concernée<select id="nf-cond-extra-row-' + idx + '" onchange="flowConditionExtraClauses[' + idx + '].row_id = this.value"></select></label>' +
|
||||
'<label>Champ<select id="nf-cond-extra-field-' + idx + '" onchange="onFlowClauseFieldChange(' + idx + ')"></select></label>' +
|
||||
'</div>' +
|
||||
'<div id="nf-cond-extra-variable-fields-' + idx + '" style="display:' + (isVariable ? 'block' : 'none') + ';">' +
|
||||
'<label>Variable<select id="nf-cond-extra-variable-' + idx + '" onchange="flowConditionExtraClauses[' + idx + '].variable = this.value">' +
|
||||
'<option value="">(sélectionner une variable)</option>' + GLOBAL_VARIABLES_OPTIONS_HTML +
|
||||
'</select></label>' +
|
||||
'<label>Chemin (optionnel)<input type="text" id="nf-cond-extra-variable-chemin-' + idx + '" placeholder="ex. .nom ou [0].valeur" value="' + (clause.variable_chemin || '').replace(/"/g, '"') + '" onchange="flowConditionExtraClauses[' + idx + '].variable_chemin = this.value"></label>' +
|
||||
'</div>' +
|
||||
'<label>Condition<select id="nf-cond-extra-operator-' + idx + '" onchange="flowConditionExtraClauses[' + idx + '].operator = this.value">' +
|
||||
CONDITION_OPERATORS_HTML +
|
||||
'</select></label>' +
|
||||
'<label>Valeur de comparaison<input type="text" id="nf-cond-extra-value-' + idx + '" placeholder="ex. 1, vrai, 10..." value="' + (clause.value || '').replace(/"/g, '"') + '" onchange="flowConditionExtraClauses[' + idx + '].value = this.value"></label>' +
|
||||
'<button type="button" class="smallBtn button is-small" onclick="removeFlowConditionClause(' + idx + ')">Retirer cette condition</button>' +
|
||||
'</div>';
|
||||
}).join('');
|
||||
flowConditionExtraClauses.forEach(function(clause, idx) {
|
||||
var defSel = document.getElementById('nf-cond-extra-definition-' + idx);
|
||||
if (defSel && clause.definition_id) defSel.value = clause.definition_id;
|
||||
onFlowClauseDefinitionChange(idx);
|
||||
var opSel = document.getElementById('nf-cond-extra-operator-' + idx);
|
||||
if (opSel) opSel.value = clause.operator || 'egal';
|
||||
var varSel = document.getElementById('nf-cond-extra-variable-' + idx);
|
||||
if (varSel && clause.variable) varSel.value = clause.variable;
|
||||
});
|
||||
}
|
||||
|
||||
function onFlowClauseDefinitionChange(idx) {
|
||||
var defSel = document.getElementById('nf-cond-extra-definition-' + idx);
|
||||
var rowSel = document.getElementById('nf-cond-extra-row-' + idx);
|
||||
var fieldSel = document.getElementById('nf-cond-extra-field-' + idx);
|
||||
if (!defSel || !rowSel || !fieldSel) return;
|
||||
flowConditionExtraClauses[idx].definition_id = defSel.value;
|
||||
var info = DEFINITIONS_DATA[defSel.value] || { rows: [], fields: [] };
|
||||
rowSel.innerHTML = _flowRowOptionsHtml(info);
|
||||
fieldSel.innerHTML = info.fields.length
|
||||
? info.fields.map(function(f){ return '<option value="' + f.name + '" data-type="' + f.type + '">' + f.name + ' (' + f.type + ')</option>'; }).join('')
|
||||
: '<option value="">Aucun champ simple</option>';
|
||||
flowConditionExtraClauses[idx].row_id = rowSel.value;
|
||||
onFlowClauseFieldChange(idx);
|
||||
}
|
||||
|
||||
function onFlowClauseFieldChange(idx) {
|
||||
var fieldSel = document.getElementById('nf-cond-extra-field-' + idx);
|
||||
if (!fieldSel) return;
|
||||
var opt = fieldSel.options[fieldSel.selectedIndex];
|
||||
flowConditionExtraClauses[idx].field = fieldSel.value;
|
||||
flowConditionExtraClauses[idx].field_type = opt ? opt.dataset.type : '';
|
||||
}
|
||||
|
||||
function toggleFlowActionFields() {
|
||||
var typeSel = document.getElementById('nf-action-type');
|
||||
var screenSel = document.getElementById('nf-action-target-screen');
|
||||
var elementFields = document.getElementById('nf-action-element-fields');
|
||||
var dataFields = document.getElementById('nf-action-data-fields');
|
||||
var variableFields = document.getElementById('nf-action-variable-fields');
|
||||
var waitFields = document.getElementById('nf-action-wait-fields');
|
||||
var eventFields = document.getElementById('nf-action-event-fields');
|
||||
var isOnglet = typeSel.value === 'activer_onglet';
|
||||
screenSel.style.display = (typeSel.value === 'aller_a' || typeSel.value === 'ouvrir_ligne') ? 'block' : 'none';
|
||||
elementFields.style.display = (typeSel.value === 'modifier_element' || isOnglet) ? 'block' : 'none';
|
||||
dataFields.style.display = typeSel.value === 'modifier_donnee' ? 'block' : 'none';
|
||||
variableFields.style.display = typeSel.value === 'modifier_variable' ? 'block' : 'none';
|
||||
waitFields.style.display = typeSel.value === 'attendre' ? 'block' : 'none';
|
||||
if (eventFields) eventFields.style.display = typeSel.value === 'declencher_evenement' ? 'block' : 'none';
|
||||
document.getElementById('nf-action-onglet-hint').style.display = isOnglet ? 'block' : 'none';
|
||||
document.getElementById('nf-action-element-property-wrap').style.display = isOnglet ? 'none' : 'block';
|
||||
if (typeSel.value === 'modifier_element') toggleFlowElementPropertyValue();
|
||||
if (typeSel.value === 'modifier_donnee') onFlowDefinitionChange('action');
|
||||
}
|
||||
|
||||
function toggleFlowElementPropertyValue() {
|
||||
var propSel = document.getElementById('nf-action-element-property');
|
||||
var visSel = document.getElementById('nf-action-element-value-visibility');
|
||||
var surbrillanceSel = document.getElementById('nf-action-element-value-surbrillance');
|
||||
var desactiveSel = document.getElementById('nf-action-element-value-desactive');
|
||||
var colorInp = document.getElementById('nf-action-element-value-color');
|
||||
var numInp = document.getElementById('nf-action-element-value-number');
|
||||
var textInp = document.getElementById('nf-action-element-value-text');
|
||||
var toggleRow = document.getElementById('nf-action-element-toggle-row');
|
||||
[visSel, surbrillanceSel, desactiveSel, colorInp, numInp, textInp].forEach(function(el){ el.style.display = 'none'; });
|
||||
if (propSel.value === 'visibilite') {
|
||||
visSel.style.display = 'block';
|
||||
toggleRow.style.display = 'none';
|
||||
document.getElementById('nf-action-element-toggle').checked = false;
|
||||
} else if (propSel.value === 'surbrillance') {
|
||||
surbrillanceSel.style.display = 'block';
|
||||
toggleRow.style.display = 'none';
|
||||
document.getElementById('nf-action-element-toggle').checked = false;
|
||||
} else if (propSel.value === 'desactive') {
|
||||
desactiveSel.style.display = 'block';
|
||||
toggleRow.style.display = 'none';
|
||||
document.getElementById('nf-action-element-toggle').checked = false;
|
||||
} else if (propSel.value === 'contenu') {
|
||||
textInp.style.display = 'block';
|
||||
toggleRow.style.display = 'none';
|
||||
document.getElementById('nf-action-element-toggle').checked = false;
|
||||
} else if (propSel.value === 'bg_color' || propSel.value === 'border_color') {
|
||||
colorInp.style.display = 'block';
|
||||
toggleRow.style.display = 'flex';
|
||||
} else {
|
||||
numInp.style.display = 'block';
|
||||
toggleRow.style.display = 'flex';
|
||||
}
|
||||
toggleFlowElementToggleMode();
|
||||
}
|
||||
|
||||
function toggleFlowElementToggleMode() {
|
||||
var propSel = document.getElementById('nf-action-element-property');
|
||||
var checked = document.getElementById('nf-action-element-toggle').checked;
|
||||
var wrap = document.getElementById('nf-action-element-value2-wrap');
|
||||
var colorInp2 = document.getElementById('nf-action-element-value2-color');
|
||||
var numInp2 = document.getElementById('nf-action-element-value2-number');
|
||||
var isColor = propSel.value === 'bg_color' || propSel.value === 'border_color';
|
||||
wrap.style.display = checked ? 'block' : 'none';
|
||||
colorInp2.style.display = (checked && isColor) ? 'block' : 'none';
|
||||
numInp2.style.display = (checked && !isColor) ? 'block' : 'none';
|
||||
}
|
||||
|
||||
function submitNodeForm() {
|
||||
var payload = { node_type: currentNodeFormType, x: 20, y: 20 + currentBlockNodes().length * 10, block_id: CURRENT_BLOCK_ID };
|
||||
|
||||
if (currentNodeFormType === 'trigger') {
|
||||
payload.trigger_event = document.getElementById('nf-trigger-event').value;
|
||||
if (payload.trigger_event === 'evenement') {
|
||||
payload.trigger_custom_event_id = parseInt(document.getElementById('nf-trigger-custom-event').value, 10);
|
||||
} else if (payload.trigger_event !== 'affichage') {
|
||||
payload.trigger_element_id = parseInt(document.getElementById('nf-trigger-element').value, 10);
|
||||
}
|
||||
} else if (currentNodeFormType === 'condition') {
|
||||
var condSource = document.getElementById('nf-cond-source').value;
|
||||
payload.cond_source = condSource;
|
||||
payload.cond_operator = document.getElementById('nf-cond-operator').value;
|
||||
payload.cond_value = document.getElementById('nf-cond-value').value;
|
||||
if (condSource === 'variable') {
|
||||
payload.cond_variable = document.getElementById('nf-cond-variable').value;
|
||||
payload.cond_variable_chemin = document.getElementById('nf-cond-variable-chemin').value;
|
||||
} else {
|
||||
var fieldSel = document.getElementById('nf-cond-field');
|
||||
var fieldOpt = fieldSel.options[fieldSel.selectedIndex];
|
||||
payload.cond_definition_id = parseInt(document.getElementById('nf-cond-definition').value, 10);
|
||||
payload.cond_row_id = parseInt(document.getElementById('nf-cond-row').value, 10) || null;
|
||||
payload.cond_field = fieldSel.value;
|
||||
payload.cond_field_type = fieldOpt ? fieldOpt.dataset.type : '';
|
||||
}
|
||||
if (flowConditionExtraClauses.length) {
|
||||
// 2.4 — clauses combinées : la clause "historique" ci-dessus devient
|
||||
// la première clause de la liste, suivie des clauses supplémentaires.
|
||||
var mainClause = condSource === 'variable'
|
||||
? { source: 'variable', variable: payload.cond_variable, variable_chemin: payload.cond_variable_chemin,
|
||||
operator: payload.cond_operator, value: payload.cond_value }
|
||||
: { source: 'objet', definition_id: payload.cond_definition_id, row_id: payload.cond_row_id,
|
||||
field: payload.cond_field, field_type: payload.cond_field_type,
|
||||
operator: payload.cond_operator, value: payload.cond_value };
|
||||
var allClauses = [mainClause].concat(flowConditionExtraClauses.map(function(c) {
|
||||
return c.source === 'variable'
|
||||
? { source: 'variable', variable: c.variable, variable_chemin: c.variable_chemin, operator: c.operator, value: c.value }
|
||||
: { source: 'objet', definition_id: parseInt(c.definition_id, 10), row_id: parseInt(c.row_id, 10) || null,
|
||||
field: c.field, field_type: c.field_type, operator: c.operator, value: c.value };
|
||||
}));
|
||||
payload.cond_clauses = JSON.stringify(allClauses);
|
||||
payload.cond_combinator = document.getElementById('nf-cond-combinator').value;
|
||||
}
|
||||
} else if (currentNodeFormType === 'action') {
|
||||
var actionType = document.getElementById('nf-action-type').value;
|
||||
payload.action_type = actionType;
|
||||
if (actionType === 'aller_a' || actionType === 'ouvrir_ligne') {
|
||||
payload.target_screen_id = parseInt(document.getElementById('nf-action-target-screen').value, 10);
|
||||
} else if (actionType === 'activer_onglet') {
|
||||
payload.target_element_id = parseInt(document.getElementById('nf-action-target-element').value, 10);
|
||||
} else if (actionType === 'modifier_element') {
|
||||
payload.target_element_id = parseInt(document.getElementById('nf-action-target-element').value, 10);
|
||||
var prop = document.getElementById('nf-action-element-property').value;
|
||||
payload.element_property = prop;
|
||||
var isColorProp = prop === 'bg_color' || prop === 'border_color';
|
||||
var toggleOn = prop !== 'visibilite' && prop !== 'surbrillance' && prop !== 'desactive' && document.getElementById('nf-action-element-toggle').checked;
|
||||
if (prop === 'visibilite') {
|
||||
payload.element_value = document.getElementById('nf-action-element-value-visibility').value;
|
||||
} else if (prop === 'surbrillance') {
|
||||
payload.element_value = document.getElementById('nf-action-element-value-surbrillance').value;
|
||||
} else if (prop === 'desactive') {
|
||||
payload.element_value = document.getElementById('nf-action-element-value-desactive').value;
|
||||
} else if (prop === 'contenu') {
|
||||
payload.element_value = document.getElementById('nf-action-element-value-text').value;
|
||||
} else {
|
||||
var v1 = isColorProp
|
||||
? document.getElementById('nf-action-element-value-color').value
|
||||
: document.getElementById('nf-action-element-value-number').value;
|
||||
if (toggleOn) {
|
||||
var v2 = isColorProp
|
||||
? document.getElementById('nf-action-element-value2-color').value
|
||||
: document.getElementById('nf-action-element-value2-number').value;
|
||||
payload.element_value = v1 + '||' + v2;
|
||||
} else {
|
||||
payload.element_value = v1;
|
||||
}
|
||||
}
|
||||
} else if (actionType === 'modifier_donnee') {
|
||||
payload.target_definition_id = parseInt(document.getElementById('nf-action-data-definition').value, 10);
|
||||
payload.target_row_id = parseInt(document.getElementById('nf-action-data-row').value, 10) || null;
|
||||
payload.target_field = document.getElementById('nf-action-data-field').value;
|
||||
payload.data_operation = document.getElementById('nf-action-data-operation').value;
|
||||
payload.data_value = document.getElementById('nf-action-data-value').value;
|
||||
} else if (actionType === 'modifier_variable') {
|
||||
payload.target_variable = document.getElementById('nf-action-variable-name').value;
|
||||
payload.data_operation = document.getElementById('nf-action-variable-operation').value;
|
||||
payload.data_value = document.getElementById('nf-action-variable-value').value;
|
||||
} else if (actionType === 'attendre') {
|
||||
payload.data_value = document.getElementById('nf-action-wait-seconds').value;
|
||||
} else if (actionType === 'declencher_evenement') {
|
||||
// Notification pure : aucun élément/ligne à transmettre (voir
|
||||
// screens/custom_events/) — c'est à l'écouteur de décider quoi
|
||||
// faire, avec ses propres réglages habituels.
|
||||
payload.target_custom_event_id = parseInt(document.getElementById('nf-action-custom-event').value, 10);
|
||||
}
|
||||
}
|
||||
|
||||
fetch(flowUrl('/screens/' + FLOW_SCREEN_ID + '/flow/nodes/add'), {
|
||||
method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload)
|
||||
}).then(function(r){ return r.json(); }).then(function(node){
|
||||
ALL_FLOW.nodes.push(node);
|
||||
closeNodeForm();
|
||||
renderFlow();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,436 @@
|
||||
function initBuilderPanel() {
|
||||
(function () {
|
||||
var xEl = document.getElementById('pos-x'), yEl = document.getElementById('pos-y');
|
||||
var wEl = document.getElementById('pos-w'), hEl = document.getElementById('pos-h');
|
||||
// pos-w/pos-h n'existent pas pour un élément posé dans un conteneur (sa
|
||||
// taille se règle via les champs "Largeur/Hauteur (%)"/"fixe (px)" du
|
||||
// formulaire général à la place, voir size_ctrls plus haut) — X/Y non
|
||||
// plus, mais ils restent dans le DOM (juste désactivés) pour cet élément.
|
||||
if (!xEl || !wEl) return;
|
||||
function apply() {
|
||||
var canvasEl = document.getElementById('el-' + CURRENT_SELECTED_ID);
|
||||
var x = parseFloat(xEl.value) || 0, y = parseFloat(yEl.value) || 0;
|
||||
var w = parseFloat(wEl.value) || 1, h = parseFloat(hEl.value) || 1;
|
||||
if (canvasEl) {
|
||||
canvasEl.style.left = x + '%'; canvasEl.style.top = y + '%';
|
||||
canvasEl.style.width = w + '%'; canvasEl.style.height = h + '%';
|
||||
}
|
||||
saveGeometry(CURRENT_SELECTED_ID, x, y, w, h);
|
||||
}
|
||||
[xEl, yEl, wEl, hEl].forEach(function (el) { el.addEventListener('change', apply); });
|
||||
})();
|
||||
|
||||
bindAspectButtons();
|
||||
|
||||
document.querySelectorAll('.uploadInput').forEach(function (input) {
|
||||
input.addEventListener('change', function () {
|
||||
if (!input.files.length) return;
|
||||
var status = input.parentElement.querySelector('.uploadStatus');
|
||||
var targetField = document.getElementById(input.dataset.target);
|
||||
status.textContent = 'Envoi en cours...';
|
||||
var data = new FormData();
|
||||
data.append('file', input.files[0]);
|
||||
fetch("/game/" + GAME_SLUG + "/upload", { method: 'POST', body: data })
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (json) {
|
||||
if (json.url) {
|
||||
targetField.value = json.url;
|
||||
status.textContent = 'Fichier envoyé ✓ Enregistrement...';
|
||||
// Enregistre tout de suite, comme n'importe quel autre réglage —
|
||||
// un fichier envoyé ne doit jamais rester "en attente".
|
||||
submitPropsForm().then(function () { status.textContent = 'Fichier envoyé ✓ Enregistré.'; });
|
||||
}
|
||||
else { status.textContent = "Échec de l'envoi."; }
|
||||
})
|
||||
.catch(function () { status.textContent = "Échec de l'envoi."; });
|
||||
});
|
||||
});
|
||||
|
||||
bindPropsAutosave();
|
||||
bindJaugeDefinitionSelect();
|
||||
bindDefinitionFieldSelects('field-definition_id', ['field-filtre_champ', 'field-filtre2_champ']);
|
||||
bindDefinitionFieldSelects('field-visibilite_cond_definition_id', ['field-visibilite_cond_champ']);
|
||||
bindClauseListDefinitionSelect('field-data_definition_id');
|
||||
bindClauseListRows();
|
||||
initFilterValuePickers();
|
||||
var visCondModeSel = document.getElementById('field-visibilite_cond_mode');
|
||||
if (visCondModeSel) toggleVisCondFields(visCondModeSel);
|
||||
restoreTreeCollapsedState();
|
||||
applySelectionHighlight(CURRENT_SELECTED_ID);
|
||||
restoreFloatPanelState('props', 'propsPanelFloat', 'propsPanelReopenBtn');
|
||||
restoreFloatPanelState('left', 'panelLeftFloat', 'panelLeftReopenBtn');
|
||||
}
|
||||
|
||||
// Jauge : quand on change l'objet de données à suivre SANS quitter le
|
||||
// panneau (donc sans le rechargement serveur qui repeuplerait row_id/champ/
|
||||
// champ_nom via controls_with_values.py), on reconstruit ces trois menus à
|
||||
// la volée à partir de DEFINITIONS_DATA (même source que les formulaires de
|
||||
// la Logique de la scène, voir onFlowDefinitionChange). DEFINITIONS_DATA
|
||||
// est déclaré plus bas dans ce script (donc encore "undefined" au moment où
|
||||
// initBuilderPanel() tourne en tout premier) — sans conséquence ici,
|
||||
// puisqu'on ne le lit que dans le gestionnaire, jamais au moment du bind.
|
||||
// Libellé d'un champ dans une liste déroulante — précise l'objet visé pour
|
||||
// un champ "relation" (ex. "parcour (→ parcours)"), même règle que
|
||||
// _field_label() côté Python (controls_with_values.py).
|
||||
function fieldOptionLabel(f) {
|
||||
return (f.type === 'relation' && f.relation_definition_name) ? (f.name + ' (→ ' + f.relation_definition_name + ')') : f.name;
|
||||
}
|
||||
|
||||
function bindJaugeDefinitionSelect() {
|
||||
var defSel = document.getElementById('field-definition_id');
|
||||
var rowSel = document.getElementById('field-row_id');
|
||||
var champSel = document.getElementById('field-champ');
|
||||
var champNomSel = document.getElementById('field-champ_nom');
|
||||
if (!defSel || !rowSel || !champSel || !champNomSel) return; // pas la Jauge
|
||||
defSel.addEventListener('change', function () {
|
||||
var info = (DEFINITIONS_DATA || {})[defSel.value] || { rows: [], fields: [] };
|
||||
rowSel.innerHTML = info.rows.length
|
||||
? info.rows.map(function (r) { return '<option value="' + r.id + '">' + r.label + '</option>'; }).join('')
|
||||
: '<option value="">Aucune donnée dans cet objet</option>';
|
||||
// La Jauge affiche une valeur/un nom tel quel — un champ "relation" (un
|
||||
// id, pas une valeur) n'a pas sa place ici, même exclusion que côté
|
||||
// serveur (voir controls_with_values.py).
|
||||
var simpleFields = info.fields.filter(function (f) { return f.type !== 'relation'; });
|
||||
var fieldOptions = simpleFields.map(function (f) { return '<option value="' + f.name + '">' + f.name + '</option>'; }).join('');
|
||||
champSel.innerHTML = fieldOptions || '<option value="">Aucun champ simple</option>';
|
||||
champNomSel.innerHTML = '<option value="">— aucun —</option>' + fieldOptions;
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Réglages "champ" d'un filtre (Répéteur/Donnée liée) : listes
|
||||
// déroulantes peuplées avec les VRAIS champs de l'objet choisi, jamais
|
||||
// tapées à la main — même principe que bindJaugeDefinitionSelect() ci-dessus,
|
||||
// généralisé pour s'appliquer à un nombre quelconque de listes "champ"
|
||||
// rattachées à un même sélecteur d'objet (ici : filtre_champ + filtre2_champ,
|
||||
// ou data_filtre_champ + data_filtre2_champ). ----------
|
||||
// ---------- Condition de visibilité (voir VISIBILITY_CONDITION_CONTROLS) :
|
||||
// n'affiche que les réglages pertinents pour le mode choisi (variable
|
||||
// globale, ou champ d'un objet) — les deux autres restent en base (peu
|
||||
// importe, seul le mode courant est lu par is_element_visible()) mais sont
|
||||
// masqués pour ne pas embrouiller. ----------
|
||||
function toggleVisCondFields(sel) {
|
||||
var mode = sel.value;
|
||||
document.querySelectorAll('.visCondRow').forEach(function (row) {
|
||||
var scope = row.dataset.visCondScope;
|
||||
var show = scope === 'any' ? !!mode : scope === mode;
|
||||
row.style.display = show ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
function bindDefinitionFieldSelects(defSelId, fieldSelIds) {
|
||||
var defSel = document.getElementById(defSelId);
|
||||
if (!defSel) return;
|
||||
var fieldSels = fieldSelIds.map(function (id) { return document.getElementById(id); }).filter(Boolean);
|
||||
if (!fieldSels.length) return;
|
||||
defSel.addEventListener('change', function () {
|
||||
var info = (DEFINITIONS_DATA || {})[defSel.value] || { fields: [] };
|
||||
var opts = '<option value="">(sélectionner un objet d\'abord)</option>' +
|
||||
info.fields.map(function (f) { return '<option value="' + f.name + '">' + fieldOptionLabel(f) + '</option>'; }).join('');
|
||||
fieldSels.forEach(function (sel) { sel.innerHTML = opts; });
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- "Donnée liée" : liste de conditions ILLIMITÉE (champ/opérateur/
|
||||
// valeur), combinées entre elles par ET/OU (voir c_clause_list.py,
|
||||
// save_element_controls.py, resolve_bound_row.py). Chaque ligne existante
|
||||
// est rendue côté serveur (au chargement du panneau) ; "+ Ajouter une
|
||||
// condition" clone un <template> pour en ajouter de nouvelles à la volée,
|
||||
// sans aller-retour serveur — même principe que "fieldsList"/"varValueRows"
|
||||
// ailleurs dans l'outil. ----------
|
||||
function wireClauseRow(row, key) {
|
||||
row.querySelectorAll('input, select').forEach(function (field) {
|
||||
var debounced = field.tagName === 'INPUT';
|
||||
field.addEventListener(debounced ? 'input' : 'change', function () {
|
||||
if (debounced) debouncedSubmitPropsForm(); else submitPropsForm();
|
||||
});
|
||||
});
|
||||
var removeBtn = row.querySelector('.clauseRemoveBtn');
|
||||
if (removeBtn) {
|
||||
removeBtn.addEventListener('click', function () {
|
||||
row.remove();
|
||||
updateClauseCombinatorVisibility(key);
|
||||
submitPropsForm();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function updateClauseCombinatorVisibility(key) {
|
||||
var wrap = document.getElementById('clauseListWrap-' + key);
|
||||
var combRow = document.getElementById('clauseCombinatorRow-' + key);
|
||||
if (!wrap || !combRow) return;
|
||||
combRow.style.display = wrap.querySelectorAll('.clauseRow').length > 1 ? '' : 'none';
|
||||
}
|
||||
|
||||
function addClauseRow(key) {
|
||||
var tmpl = document.getElementById('clauseRowTemplate-' + key);
|
||||
var wrap = document.getElementById('clauseListWrap-' + key);
|
||||
if (!tmpl || !wrap) return;
|
||||
var clone = tmpl.content.cloneNode(true);
|
||||
var row = clone.querySelector('.clauseRow');
|
||||
wireClauseRow(row, key);
|
||||
wrap.appendChild(clone);
|
||||
// Repeuple tout de suite son sélecteur "Champ" avec les VRAIS champs de
|
||||
// l'objet déjà choisi (sans ça, une ligne ajoutée après coup resterait
|
||||
// bloquée sur "(sélectionner un objet d'abord)" même si un objet est
|
||||
// déjà réglé plus haut dans le panneau).
|
||||
var defSel = document.getElementById('field-data_definition_id');
|
||||
if (defSel && defSel.value) defSel.dispatchEvent(new Event('change'));
|
||||
// Initialise le sélecteur de valeur (fixe/dynamique/variable) de cette
|
||||
// nouvelle ligne — sans effet sur les lignes déjà initialisées.
|
||||
initFilterValuePickers();
|
||||
updateClauseCombinatorVisibility(key);
|
||||
submitPropsForm();
|
||||
}
|
||||
|
||||
// Rebranche les lignes déjà rendues par le serveur (rechargement du
|
||||
// panneau, ex. sélection d'un autre élément) — les lignes ajoutées EN
|
||||
// COURS de session par addClauseRow() se branchent déjà elles-mêmes.
|
||||
function bindClauseListRows() {
|
||||
document.querySelectorAll('.clauseListControl').forEach(function (control) {
|
||||
var key = control.dataset.clauseKey;
|
||||
control.querySelectorAll('.clauseRow').forEach(function (row) { wireClauseRow(row, key); });
|
||||
});
|
||||
}
|
||||
|
||||
// Repeuple le sélecteur "champ" de TOUTES les lignes de condition actuelles
|
||||
// (interrogées à chaque changement, donc couvre aussi les lignes ajoutées
|
||||
// après coup) quand on change l'objet lié — même principe que
|
||||
// bindDefinitionFieldSelects ci-dessus, généralisé pour un nombre de lignes
|
||||
// variable plutôt qu'une liste fixe d'ids capturée une fois pour toutes.
|
||||
function bindClauseListDefinitionSelect(defSelId) {
|
||||
var defSel = document.getElementById(defSelId);
|
||||
if (!defSel) return;
|
||||
defSel.addEventListener('change', function () {
|
||||
var info = (DEFINITIONS_DATA || {})[defSel.value] || { fields: [] };
|
||||
var opts = '<option value="">(sélectionner un objet d\'abord)</option>' +
|
||||
info.fields.map(function (f) { return '<option value="' + f.name + '">' + fieldOptionLabel(f) + '</option>'; }).join('');
|
||||
document.querySelectorAll('.clauseChampSelect').forEach(function (sel) {
|
||||
var current = sel.value;
|
||||
sel.innerHTML = opts;
|
||||
sel.value = current; // reste sélectionné si ce champ existe encore dans le nouvel objet
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Valeur de comparaison d'un filtre : fixe, ou donnée d'un autre
|
||||
// objet ----------
|
||||
//
|
||||
// La valeur envoyée au serveur reste une simple chaîne "texte" (voir
|
||||
// _resolve_filter_value côté Python) — soit une valeur fixe, soit une
|
||||
// référence à un champ d'un autre objet dans un format interne précis. Le
|
||||
// mode "dynamique" ci-dessous se contente de reconstruire cette chaîne à
|
||||
// partir de deux listes déroulantes (objet, champ) plutôt que de la faire
|
||||
// taper à la main. OPEN/CLOSE évitent d'écrire les deux accolades l'une
|
||||
// contre l'autre dans le source (Jinja les interpréterait comme le DÉBUT
|
||||
// d'une expression s'il les rencontrait telles quelles).
|
||||
var _FILTER_REF_OPEN = '{' + '{';
|
||||
var _FILTER_REF_CLOSE = '}' + '}';
|
||||
var _FILTER_REF_RE = new RegExp('^\\{\\{\\s*([^.{}]+)\\.([^.{}]+)\\s*\\}\\}$');
|
||||
// Une paire d'accolades doublées entourant "$nom_variable" (voir
|
||||
// _VAR_REF_PATTERN côté Python, filter_repeater_rows.py) référence une
|
||||
// variable globale — le "$" la distingue sans ambiguïté de _FILTER_REF_RE
|
||||
// ci-dessus, qui attend toujours un point ("Objet.champ"). Groupe 2 : un
|
||||
// chemin optionnel ".champ"/"[index]" (chaînable) à l'intérieur de la
|
||||
// variable, utile pour une variable "objet"/"tableau".
|
||||
var _VAR_REF_RE = new RegExp('^\\{\\{\\s*\\$([^.{}\\[\\]]+)((?:\\.[^.{}\\[\\]]+|\\[\\d+\\])*)\\s*\\}\\}$');
|
||||
|
||||
function _filterValueDefinitionId(objName) {
|
||||
var opt = document.querySelector('.filterValueObjSel option[value="' + CSS.escape(objName) + '"]');
|
||||
return opt ? opt.dataset.definitionId : null;
|
||||
}
|
||||
|
||||
function populateFilterValueFields(fieldSel, defId, selectedName) {
|
||||
var info = (DEFINITIONS_DATA || {})[defId] || { fields: [] };
|
||||
fieldSel.innerHTML = '<option value="">— champ —</option>' + info.fields.map(function (f) {
|
||||
return '<option value="' + f.name + '"' + (f.name === selectedName ? ' selected' : '') + '>' + fieldOptionLabel(f) + '</option>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function updateFilterValueFromDynamic(wrap) {
|
||||
var objSel = wrap.querySelector('.filterValueObjSel');
|
||||
var fieldSel = wrap.querySelector('.filterValueFieldSel');
|
||||
var input = wrap.querySelector('.filterValueFixe input');
|
||||
input.value = (objSel.value && fieldSel.value) ? (_FILTER_REF_OPEN + objSel.value + '.' + fieldSel.value + _FILTER_REF_CLOSE) : '';
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
|
||||
function updateFilterValueFromVariable(wrap) {
|
||||
var varSel = wrap.querySelector('.filterValueVarSel');
|
||||
var pathInput = wrap.querySelector('.filterValueVarPath');
|
||||
var input = wrap.querySelector('.filterValueFixe input');
|
||||
var path = pathInput ? pathInput.value.trim() : '';
|
||||
input.value = varSel.value ? (_FILTER_REF_OPEN + '$' + varSel.value + path + _FILTER_REF_CLOSE) : '';
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
|
||||
function onFilterValueModeChange(sel) {
|
||||
var wrap = sel.closest('.filterValueControl');
|
||||
var fixe = wrap.querySelector('.filterValueFixe');
|
||||
var dyn = wrap.querySelector('.filterValueDynamique');
|
||||
var varWrap = wrap.querySelector('.filterValueVariable');
|
||||
fixe.style.display = sel.value === 'fixe' ? 'block' : 'none';
|
||||
dyn.style.display = sel.value === 'dynamique' ? 'block' : 'none';
|
||||
varWrap.style.display = sel.value === 'variable' ? 'block' : 'none';
|
||||
if (sel.value === 'dynamique') updateFilterValueFromDynamic(wrap);
|
||||
else if (sel.value === 'variable') updateFilterValueFromVariable(wrap);
|
||||
}
|
||||
|
||||
function onFilterValueObjChange(sel) {
|
||||
var wrap = sel.closest('.filterValueControl');
|
||||
populateFilterValueFields(wrap.querySelector('.filterValueFieldSel'), _filterValueDefinitionId(sel.value), '');
|
||||
updateFilterValueFromDynamic(wrap);
|
||||
}
|
||||
|
||||
function onFilterValueFieldChange(sel) {
|
||||
updateFilterValueFromDynamic(sel.closest('.filterValueControl'));
|
||||
}
|
||||
|
||||
function onFilterValueVarChange(sel) {
|
||||
updateFilterValueFromVariable(sel.closest('.filterValueControl'));
|
||||
}
|
||||
|
||||
function initFilterValuePickers() {
|
||||
document.querySelectorAll('.filterValueControl').forEach(function (wrap) {
|
||||
var modeSel = wrap.querySelector('.filterValueMode');
|
||||
var objSel = wrap.querySelector('.filterValueObjSel');
|
||||
var fieldSel = wrap.querySelector('.filterValueFieldSel');
|
||||
var varSel = wrap.querySelector('.filterValueVarSel');
|
||||
var varPathInput = wrap.querySelector('.filterValueVarPath');
|
||||
var current = (wrap.dataset.currentValue || '').trim();
|
||||
var varMatch = _VAR_REF_RE.exec(current);
|
||||
var objMatch = _FILTER_REF_RE.exec(current);
|
||||
if (varMatch) {
|
||||
modeSel.value = 'variable';
|
||||
wrap.querySelector('.filterValueFixe').style.display = 'none';
|
||||
wrap.querySelector('.filterValueVariable').style.display = 'block';
|
||||
varSel.value = varMatch[1].trim();
|
||||
if (varPathInput) varPathInput.value = (varMatch[2] || '').trim();
|
||||
} else if (objMatch) {
|
||||
modeSel.value = 'dynamique';
|
||||
wrap.querySelector('.filterValueFixe').style.display = 'none';
|
||||
wrap.querySelector('.filterValueDynamique').style.display = 'block';
|
||||
objSel.value = objMatch[1].trim();
|
||||
populateFilterValueFields(fieldSel, _filterValueDefinitionId(objSel.value), objMatch[2].trim());
|
||||
} else {
|
||||
modeSel.value = 'fixe';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Le retour/avance du navigateur (bouton "précédent") est déjà pris en
|
||||
// charge par pjax.js (navigation globale sans rechargement, voir
|
||||
// static/pjax.js) : il refait un rendu complet de <main> et rejoue ce
|
||||
// script (voir runScriptsIn dans pjax.js), ce qui rappelle initBuilderPanel()
|
||||
// ci-dessous — donc le canevas et le panneau de propriétés se retrouvent à
|
||||
// jour automatiquement, sans qu'on ait besoin d'un second écouteur ici.
|
||||
initBuilderPanel();
|
||||
|
||||
var CONDITION_OPERATORS_HTML = document.getElementById('nf-cond-operator') ? document.getElementById('nf-cond-operator').innerHTML : '';
|
||||
var GLOBAL_VARIABLES_OPTIONS_HTML = document.getElementById('nf-cond-variable') ? document.getElementById('nf-cond-variable').innerHTML : '';
|
||||
|
||||
function toggleActionFields(sel) {
|
||||
var form = sel.closest('.actionAddForm');
|
||||
var screenSel = form.querySelector('.targetScreenSelect');
|
||||
var elementFields = form.querySelector('.targetElementFields');
|
||||
var dataFields = form.querySelector('.targetDataFields');
|
||||
screenSel.style.display = sel.value === 'aller_a' ? 'block' : 'none';
|
||||
elementFields.style.display = sel.value === 'modifier_element' ? 'block' : 'none';
|
||||
dataFields.style.display = sel.value === 'modifier_donnee' ? 'block' : 'none';
|
||||
if (sel.value === 'modifier_element') {
|
||||
var propSel = elementFields.querySelector('.elementPropertySelect');
|
||||
toggleElementPropertyValue(propSel);
|
||||
}
|
||||
if (sel.value === 'modifier_donnee') {
|
||||
var defSel = dataFields.querySelector('.targetDefinitionSelect');
|
||||
if (defSel) onDataDefinitionChange(defSel);
|
||||
}
|
||||
}
|
||||
document.querySelectorAll('.actionTypeSelect').forEach(toggleActionFields);
|
||||
|
||||
function toggleElementPropertyValue(sel) {
|
||||
var wrap = sel.closest('.targetElementFields');
|
||||
var visSel = wrap.querySelector('.elementValueVisibility');
|
||||
var colorInp = wrap.querySelector('.elementValueColor');
|
||||
var numInp = wrap.querySelector('.elementValueNumber');
|
||||
[visSel, colorInp, numInp].forEach(function(el){ el.style.display = 'none'; el.removeAttribute('name'); });
|
||||
if (sel.value === 'visibilite') {
|
||||
visSel.style.display = 'block'; visSel.setAttribute('name', 'element_value');
|
||||
} else if (sel.value === 'bg_color' || sel.value === 'border_color') {
|
||||
colorInp.style.display = 'block'; colorInp.setAttribute('name', 'element_value');
|
||||
} else {
|
||||
numInp.style.display = 'block'; numInp.setAttribute('name', 'element_value');
|
||||
}
|
||||
}
|
||||
document.querySelectorAll('.elementPropertySelect').forEach(toggleElementPropertyValue);
|
||||
|
||||
function onDataDefinitionChange(sel) {
|
||||
var wrap = sel.closest('.targetDataFields');
|
||||
var info = DEFINITIONS_DATA[sel.value] || {rows: [], fields: []};
|
||||
var rowSel = wrap.querySelector('.targetRowSelect');
|
||||
var fieldSel = wrap.querySelector('.targetFieldSelect');
|
||||
if (!rowSel || !fieldSel) return;
|
||||
rowSel.innerHTML = info.rows.length
|
||||
? info.rows.map(function(r){ return '<option value="' + r.id + '">' + r.label + '</option>'; }).join('')
|
||||
: '<option value="">Aucune donnée dans cet objet</option>';
|
||||
fieldSel.innerHTML = info.fields.length
|
||||
? info.fields.map(function(f){ return '<option value="' + f.name + '">' + f.name + ' (' + f.type + ')</option>'; }).join('')
|
||||
: '<option value="">Aucun champ simple</option>';
|
||||
}
|
||||
document.querySelectorAll('.targetDefinitionSelect').forEach(onDataDefinitionChange);
|
||||
|
||||
function syncAlign(radio) {
|
||||
radio.closest('.alignGroup').querySelectorAll('.alignOption').forEach(function(o){ o.classList.remove('active', 'is-primary'); });
|
||||
radio.closest('.alignOption').classList.add('active', 'is-primary');
|
||||
}
|
||||
|
||||
// Choix du format d'aperçu (Portrait/Paysage/Carré) : mémorisé côté serveur
|
||||
// (voir screen_set_aspect.py) pour ne pas repartir sur Portrait à chaque
|
||||
// ajout/suppression d'élément ou changement de sélection — ces actions
|
||||
// redemandent ce panneau au serveur, qui doit donc connaître le choix déjà
|
||||
// fait. Appelé depuis initBuilderPanel() (voir plus haut), une seule fois
|
||||
// par (re)rendu de ce panneau.
|
||||
function bindAspectButtons() {
|
||||
document.querySelectorAll('.aspectBtn').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
document.querySelectorAll('.aspectBtn').forEach(function (b) { b.classList.remove('active'); });
|
||||
btn.classList.add('active');
|
||||
// Dans l'éditeur (≥1300px), le canevas remplit tout .canvasFrame
|
||||
// (voir .canvas dans style.css) — cet aspect-ratio ne sert donc plus
|
||||
// qu'au repli en page empilée (<1300px, voir le media query) et à
|
||||
// l'aperçu jouable ("Jouer"), pas à la mise en page ici.
|
||||
document.getElementById('canvas').style.aspectRatio = btn.dataset.aspect;
|
||||
fetch("/game/" + GAME_SLUG + "/screens/" + SCREEN_ID + "/aspect", {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ aspect: btn.dataset.aspect }),
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelectorAll('.uploadInput').forEach(function(input){
|
||||
input.addEventListener('change', function(){
|
||||
if (!input.files.length) return;
|
||||
var status = input.parentElement.querySelector('.uploadStatus');
|
||||
var targetField = document.getElementById(input.dataset.target);
|
||||
status.textContent = 'Envoi en cours...';
|
||||
var data = new FormData();
|
||||
data.append('file', input.files[0]);
|
||||
fetch("/game/" + GAME_SLUG + "/upload", {method: 'POST', body: data})
|
||||
.then(function(r){ return r.json(); })
|
||||
.then(function(json){
|
||||
if (json.url) {
|
||||
targetField.value = json.url;
|
||||
status.textContent = 'Fichier envoyé ✓ Enregistrement...';
|
||||
// Enregistre tout de suite (comme un clic sur "Enregistrer") pour
|
||||
// qu'un fichier envoyé ne reste jamais "en attente" si on oublie
|
||||
// de cliquer sur le bouton ensuite — l'image doit apparaître dès
|
||||
// l'envoi, sans étape supplémentaire à retenir.
|
||||
var form = document.getElementById('propsForm');
|
||||
if (form) { form.requestSubmit ? form.requestSubmit() : form.submit(); }
|
||||
}
|
||||
else { status.textContent = "Échec de l'envoi."; }
|
||||
})
|
||||
.catch(function(){ status.textContent = "Échec de l'envoi."; });
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,137 @@
|
||||
// ---------- Onglets du centre : Écran / Logique de la scène / Timeline
|
||||
// d'animation — un seul visible à la fois, chacun occupant tout l'espace
|
||||
// disponible (remplace l'ancien panneau du bas rétractable/redimensionnable
|
||||
// à la souris : un onglet "prend toute la place" par nature, et en changer
|
||||
// équivaut à "fermer" celui qu'on quitte). ----------
|
||||
function switchBuilderTab(tab) {
|
||||
document.querySelectorAll('.builderTabBtn').forEach(function (btn) {
|
||||
btn.classList.toggle('active', btn.dataset.tab === tab);
|
||||
});
|
||||
document.querySelectorAll('.builderTabPanel').forEach(function (panel) {
|
||||
panel.classList.toggle('active', panel.dataset.tabPanel === tab);
|
||||
});
|
||||
}
|
||||
|
||||
function toggleDashCreate(tab) {
|
||||
var bar = document.getElementById('dashCreate-' + tab);
|
||||
bar.style.display = bar.style.display === 'none' ? 'flex' : 'none';
|
||||
if (bar.style.display === 'flex') {
|
||||
var firstInput = bar.querySelector('input, select');
|
||||
if (firstInput) firstInput.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleBlockEditRow(blockId) {
|
||||
document.getElementById('blockEditRow' + blockId).classList.toggle('hidden');
|
||||
}
|
||||
|
||||
// ---------- Panneaux flottants : glisser-déposer + redimensionnement +
|
||||
// plein écran ---------- Générique, porté tel quel depuis game_dashboard.html
|
||||
// (mêmes gestes partout dans l'outil plutôt qu'une variante par panneau).
|
||||
function makeFloatPanelDraggable(panel, header) {
|
||||
var dragging = false, offsetX = 0, offsetY = 0;
|
||||
header.addEventListener('mousedown', function (e) {
|
||||
if (e.target.closest('button')) return;
|
||||
dragging = true;
|
||||
if (panel.classList.contains('floatPanel--fullscreen')) panel._fsToggle.exit();
|
||||
var rect = panel.getBoundingClientRect();
|
||||
panel.style.left = rect.left + 'px';
|
||||
panel.style.top = rect.top + 'px';
|
||||
panel.style.right = 'auto';
|
||||
panel.style.bottom = 'auto';
|
||||
panel.style.transform = 'none';
|
||||
offsetX = e.clientX - rect.left;
|
||||
offsetY = e.clientY - rect.top;
|
||||
document.body.style.userSelect = 'none';
|
||||
});
|
||||
document.addEventListener('mousemove', function (e) {
|
||||
if (!dragging) return;
|
||||
panel.style.left = (e.clientX - offsetX) + 'px';
|
||||
panel.style.top = (e.clientY - offsetY) + 'px';
|
||||
});
|
||||
document.addEventListener('mouseup', function () {
|
||||
dragging = false;
|
||||
document.body.style.userSelect = '';
|
||||
});
|
||||
}
|
||||
function makeFloatPanelResizable(panel, handle) {
|
||||
var resizing = false, startX = 0, startY = 0, startW = 0, startH = 0;
|
||||
handle.addEventListener('mousedown', function (e) {
|
||||
resizing = true;
|
||||
if (panel.classList.contains('floatPanel--fullscreen')) panel._fsToggle.exit();
|
||||
var rect = panel.getBoundingClientRect();
|
||||
startX = e.clientX; startY = e.clientY;
|
||||
startW = rect.width; startH = rect.height;
|
||||
panel.style.width = startW + 'px';
|
||||
panel.style.maxWidth = 'none';
|
||||
document.body.style.userSelect = 'none';
|
||||
e.preventDefault();
|
||||
});
|
||||
document.addEventListener('mousemove', function (e) {
|
||||
if (!resizing) return;
|
||||
panel.style.width = Math.max(320, startW + (e.clientX - startX)) + 'px';
|
||||
panel.style.height = Math.max(200, startH + (e.clientY - startY)) + 'px';
|
||||
});
|
||||
document.addEventListener('mouseup', function () {
|
||||
resizing = false;
|
||||
document.body.style.userSelect = '';
|
||||
});
|
||||
}
|
||||
function makeFloatPanelFullscreenable(panel, toggleBtn) {
|
||||
var saved = null;
|
||||
function enter() {
|
||||
saved = {
|
||||
left: panel.style.left, top: panel.style.top, right: panel.style.right,
|
||||
width: panel.style.width, height: panel.style.height,
|
||||
maxWidth: panel.style.maxWidth, transform: panel.style.transform,
|
||||
};
|
||||
panel.classList.add('floatPanel--fullscreen');
|
||||
panel.style.left = '12px'; panel.style.top = '12px'; panel.style.right = '12px'; panel.style.bottom = '12px';
|
||||
panel.style.width = 'auto'; panel.style.height = 'auto'; panel.style.maxWidth = 'none'; panel.style.transform = 'none';
|
||||
toggleBtn.title = 'Quitter le plein écran';
|
||||
}
|
||||
function exit() {
|
||||
panel.classList.remove('floatPanel--fullscreen');
|
||||
panel.style.bottom = '';
|
||||
if (saved) {
|
||||
panel.style.left = saved.left; panel.style.top = saved.top; panel.style.right = saved.right;
|
||||
panel.style.width = saved.width; panel.style.height = saved.height;
|
||||
panel.style.maxWidth = saved.maxWidth; panel.style.transform = saved.transform;
|
||||
}
|
||||
toggleBtn.title = 'Plein écran';
|
||||
}
|
||||
toggleBtn.addEventListener('click', function () {
|
||||
if (panel.classList.contains('floatPanel--fullscreen')) exit(); else enter();
|
||||
});
|
||||
panel._fsToggle = { enter: enter, exit: exit };
|
||||
return panel._fsToggle;
|
||||
}
|
||||
|
||||
// ---------- Modale d'un bloc de logique (voir screens/flow/blocks/) : un
|
||||
// seul bloc ouvert à la fois, réutilise le même #nodeForm/#flowCanvas pour
|
||||
// n'importe quel bloc — voir currentBlockNodes()/currentBlockEdges(). ----------
|
||||
(function () {
|
||||
var panel = document.getElementById('logicBlockPanel');
|
||||
makeFloatPanelDraggable(panel, document.getElementById('logicBlockPanelHeader'));
|
||||
makeFloatPanelResizable(panel, document.getElementById('logicBlockPanelResizeHandle'));
|
||||
makeFloatPanelFullscreenable(panel, panel.querySelector('.floatPanelFullscreenBtn'));
|
||||
window.openLogicBlockPanel = function (blockId) {
|
||||
CURRENT_BLOCK_ID = blockId;
|
||||
closeNodeForm();
|
||||
var block = FLOW_BLOCKS.find(function (b) { return b.id === blockId; });
|
||||
document.getElementById('logicBlockPanelTitle').textContent = (block && block.name) || '?';
|
||||
panel.classList.remove('hidden');
|
||||
panel._fsToggle.enter();
|
||||
renderFlow();
|
||||
requestAnimationFrame(drawFlowEdges);
|
||||
};
|
||||
window.closeLogicBlockPanel = function () {
|
||||
panel.classList.add('hidden');
|
||||
CURRENT_BLOCK_ID = null;
|
||||
};
|
||||
})();
|
||||
|
||||
// L'ouverture initiale ?tab=/?block=... (données Jinja : request.args)
|
||||
// reste dans le petit <script> inline en fin de screen_edit.html, après
|
||||
// ce fichier — voir le commentaire là-bas.
|
||||
|
||||
@@ -0,0 +1,731 @@
|
||||
// Données injectées par Jinja (GAME_SLUG, SCREEN_ID, SCREEN_EDIT_URL,
|
||||
// CURRENT_SELECTED_ID, ELEMENT_ADD_URL...) : voir le petit <script> inline
|
||||
// resté dans screen_edit.html, en tête de page — ce fichier statique ne
|
||||
// passe jamais par le moteur de templates, voir static/js/play/ pour le
|
||||
// même patron déjà en place côté moteur de jeu.
|
||||
function saveGeometry(id, x, y, width, height) {
|
||||
return fetch("/game/" + GAME_SLUG + "/elements/" + id + "/geometry", {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({x: x, y: y, width: width, height: height})
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Menu contextuel (clic droit) de l'arborescence des éléments ----------
|
||||
//
|
||||
// Une seule action pour l'instant : dupliquer l'élément dans son conteneur
|
||||
// actuel (même parent, ou même écran si posé directement dessus) — voir
|
||||
// screens/elements/duplicate_element.py. La duplication passe par un vrai
|
||||
// <form method="post"> soumis dynamiquement : pjax.js intercepte tous les
|
||||
// formulaires internes, donc pas besoin de gérer le fetch/la redirection
|
||||
// nous-mêmes ici.
|
||||
var contextMenuElementId = null;
|
||||
|
||||
function showElementContextMenu(event, elementId) {
|
||||
event.preventDefault();
|
||||
contextMenuElementId = elementId;
|
||||
var menu = document.getElementById('elementContextMenu');
|
||||
menu.style.left = event.pageX + 'px';
|
||||
menu.style.top = event.pageY + 'px';
|
||||
menu.style.display = 'block';
|
||||
return false;
|
||||
}
|
||||
|
||||
function hideElementContextMenu() {
|
||||
var menu = document.getElementById('elementContextMenu');
|
||||
if (menu) menu.style.display = 'none';
|
||||
contextMenuElementId = null;
|
||||
}
|
||||
|
||||
function contextMenuDuplicate() {
|
||||
var id = contextMenuElementId;
|
||||
hideElementContextMenu();
|
||||
if (!id) return;
|
||||
var form = document.createElement('form');
|
||||
form.method = 'post';
|
||||
form.action = '/game/' + GAME_SLUG + '/elements/' + id + '/duplicate';
|
||||
document.body.appendChild(form);
|
||||
form.requestSubmit();
|
||||
}
|
||||
|
||||
if (!window.__forgeContextMenuBound) {
|
||||
window.__forgeContextMenuBound = true;
|
||||
document.addEventListener('click', function (e) {
|
||||
var menu = document.getElementById('elementContextMenu');
|
||||
if (menu && menu.style.display === 'block' && !menu.contains(e.target)) hideElementContextMenu();
|
||||
});
|
||||
document.addEventListener('scroll', hideElementContextMenu, true);
|
||||
}
|
||||
|
||||
// ---------- Arborescence : replier/déplier un conteneur ----------
|
||||
//
|
||||
// Le triangle (.treeToggle) replie/déplie SANS toucher à la sélection : le
|
||||
// nom de l'élément reste un lien à part (.treeRowLink) qui, lui, sélectionne
|
||||
// toujours l'élément et affiche ses réglages — cliquer sur un conteneur
|
||||
// replié donne donc bien accès à ses propriétés, comme demandé. L'état
|
||||
// replié/déplié est mémorisé par élément dans localStorage pour survivre à
|
||||
// un changement de sélection ou un rechargement de l'éditeur.
|
||||
function treeCollapseKey(nodeId) {
|
||||
return 'forgeTreeCollapsed:' + GAME_SLUG + ':' + SCREEN_ID + ':' + nodeId;
|
||||
}
|
||||
|
||||
function restoreTreeCollapsedState() {
|
||||
document.querySelectorAll('.elementTree .treeNode').forEach(function (node) {
|
||||
var id = node.dataset.elementId;
|
||||
var collapsed = false;
|
||||
try { collapsed = localStorage.getItem(treeCollapseKey(id)) === '1'; } catch (e) {}
|
||||
node.classList.toggle('collapsed', collapsed);
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Panneaux gauche/droite : flottants, déplaçables, fermables ----------
|
||||
//
|
||||
// Sortis du flux (position:fixed en CSS) pour ne jamais rétrécir le canevas
|
||||
// selon où on les pose — les fermer libère cette largeur pour une
|
||||
// prévisualisation plus fidèle à ce que "Jouer" affiche réellement (voir
|
||||
// bug remonté : des panneaux trop larges réduisaient le canevas au point de
|
||||
// casser la mise en page des onglets). Un seul jeu de fonctions génériques
|
||||
// (key = identifiant court mémorisé dans localStorage, distinct par
|
||||
// panneau) plutôt qu'une copie par panneau. Position et état ouvert/fermé
|
||||
// survivent à un changement de sélection (qui remplace tout #builder3, voir
|
||||
// refreshBuilderPanel) ou un rechargement — voir les appels à
|
||||
// restoreFloatPanelState() dans initBuilderPanel().
|
||||
function floatPanelStateKey(key) {
|
||||
return 'forgeFloatPanel:' + GAME_SLUG + ':' + SCREEN_ID + ':' + key;
|
||||
}
|
||||
|
||||
function saveFloatPanelState(key, state) {
|
||||
try {
|
||||
var current = JSON.parse(localStorage.getItem(floatPanelStateKey(key)) || '{}');
|
||||
localStorage.setItem(floatPanelStateKey(key), JSON.stringify(Object.assign(current, state)));
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function loadFloatPanelState(key) {
|
||||
try { return JSON.parse(localStorage.getItem(floatPanelStateKey(key)) || '{}'); } catch (e) { return {}; }
|
||||
}
|
||||
|
||||
function restoreFloatPanelState(key, panelId, reopenBtnId) {
|
||||
var panel = document.getElementById(panelId);
|
||||
var reopenBtn = document.getElementById(reopenBtnId);
|
||||
if (!panel) return;
|
||||
var state = loadFloatPanelState(key);
|
||||
if (state.left != null && state.top != null) {
|
||||
panel.style.left = state.left + 'px';
|
||||
panel.style.top = state.top + 'px';
|
||||
panel.style.right = 'auto';
|
||||
}
|
||||
var open = state.open !== false; // ouvert par défaut tant que rien n'a été fermé
|
||||
panel.classList.toggle('hidden', !open);
|
||||
if (reopenBtn) reopenBtn.classList.toggle('visible', !open);
|
||||
}
|
||||
|
||||
function closeFloatPanel(key, panelId, reopenBtnId) {
|
||||
var panel = document.getElementById(panelId);
|
||||
var reopenBtn = document.getElementById(reopenBtnId);
|
||||
if (panel) panel.classList.add('hidden');
|
||||
if (reopenBtn) reopenBtn.classList.add('visible');
|
||||
saveFloatPanelState(key, { open: false });
|
||||
}
|
||||
|
||||
function openFloatPanel(key, panelId, reopenBtnId) {
|
||||
var panel = document.getElementById(panelId);
|
||||
var reopenBtn = document.getElementById(reopenBtnId);
|
||||
if (panel) panel.classList.remove('hidden');
|
||||
if (reopenBtn) reopenBtn.classList.remove('visible');
|
||||
saveFloatPanelState(key, { open: true });
|
||||
}
|
||||
|
||||
// Raccourcis utilisés directement par les attributs onclick du gabarit.
|
||||
function closePropsPanel() { closeFloatPanel('props', 'propsPanelFloat', 'propsPanelReopenBtn'); }
|
||||
function openPropsPanel() { openFloatPanel('props', 'propsPanelFloat', 'propsPanelReopenBtn'); }
|
||||
function closeLeftPanel() { closeFloatPanel('left', 'panelLeftFloat', 'panelLeftReopenBtn'); }
|
||||
function openLeftPanel() { openFloatPanel('left', 'panelLeftFloat', 'panelLeftReopenBtn'); }
|
||||
|
||||
if (!window.__forgeFloatPanelDragBound) {
|
||||
window.__forgeFloatPanelDragBound = true;
|
||||
document.addEventListener('mousedown', function (e) {
|
||||
var handle = e.target.closest('.floatPanelHeader');
|
||||
if (!handle || e.target.closest('button')) return;
|
||||
var panel = document.getElementById(handle.dataset.dragPanel);
|
||||
var key = handle.dataset.dragKey;
|
||||
if (!panel) return;
|
||||
var rect = panel.getBoundingClientRect();
|
||||
var startX = e.clientX, startY = e.clientY;
|
||||
var startLeft = rect.left, startTop = rect.top;
|
||||
panel.style.right = 'auto';
|
||||
function onMove(ev) {
|
||||
var maxLeft = window.innerWidth - panel.offsetWidth - 4;
|
||||
var maxTop = window.innerHeight - 40;
|
||||
var left = Math.max(4, Math.min(maxLeft, startLeft + (ev.clientX - startX)));
|
||||
var top = Math.max(4, Math.min(maxTop, startTop + (ev.clientY - startY)));
|
||||
panel.style.left = left + 'px';
|
||||
panel.style.top = top + 'px';
|
||||
}
|
||||
function onUp() {
|
||||
document.removeEventListener('mousemove', onMove);
|
||||
document.removeEventListener('mouseup', onUp);
|
||||
saveFloatPanelState(key, { left: parseFloat(panel.style.left), top: parseFloat(panel.style.top) });
|
||||
}
|
||||
document.addEventListener('mousemove', onMove);
|
||||
document.addEventListener('mouseup', onUp);
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Galerie d'icônes Font Awesome (panneau de propriétés) ----------
|
||||
//
|
||||
// Cliquer une tuile l'ajoute directement (comme n'importe quelle tuile de
|
||||
// "Ajouter un élément sur l'écran") ; la glisser jusque sur le canevas fait
|
||||
// la même chose au relâchement — le drag HTML5 natif ne permet pas de créer
|
||||
// un vrai élément positionné exactement sous le curseur sans aller-retour
|
||||
// serveur supplémentaire, donc on se contente ici de déclencher le même
|
||||
// ajout "à la position par défaut" que le clic, l'utilisateur repositionne
|
||||
// ensuite comme pour tout nouvel élément.
|
||||
function addIconElement(iconClass) {
|
||||
var form = document.createElement('form');
|
||||
form.method = 'post';
|
||||
form.action = ELEMENT_ADD_URL;
|
||||
form.innerHTML =
|
||||
'<input type="hidden" name="widget" value="icone">' +
|
||||
'<input type="hidden" name="icon_class" value="' + iconClass.replace(/"/g, '"') + '">';
|
||||
document.body.appendChild(form);
|
||||
form.requestSubmit();
|
||||
}
|
||||
|
||||
function filterIconGallery(query) {
|
||||
var q = query.trim().toLowerCase();
|
||||
document.querySelectorAll('#iconGallery .iconGalleryTile').forEach(function (tile) {
|
||||
var match = !q || tile.dataset.iconSearch.indexOf(q) !== -1;
|
||||
tile.classList.toggle('iconHidden', !match);
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Sélecteur visuel d'icône (réglage "Icône" d'un élément déjà
|
||||
// posé) — même liste que la galerie d'ajout ci-dessus, mais choisir une
|
||||
// icône ici remplace celle de l'élément SÉLECTIONNÉ (champ caché
|
||||
// "field-icon_class") au lieu d'en créer un nouveau. ----------
|
||||
// ---------- Confirmation de suppression d'un élément (modale custom, pas
|
||||
// le confirm() natif du navigateur) — voir deleteConfirmModal plus haut.
|
||||
// Interroge element_delete_impact.py pour savoir si des nœuds de la
|
||||
// Logique de la scène seraient aussi supprimés, et l'affiche si oui,
|
||||
// avant que l'utilisateur confirme quoi que ce soit. ----------
|
||||
var _pendingDeleteForm = null;
|
||||
|
||||
function handleDeleteElementSubmit(event, form) {
|
||||
if (form.dataset.confirmed === '1') {
|
||||
// Deuxième passage, après clic sur "Supprimer" dans la modale (voir
|
||||
// confirmDeleteElement()) : laisse cette fois la soumission suivre son
|
||||
// cours normalement (pjax.js l'intercepte comme n'importe quel autre
|
||||
// formulaire, voir static/pjax.js).
|
||||
form.dataset.confirmed = '';
|
||||
return true;
|
||||
}
|
||||
event.preventDefault();
|
||||
_pendingDeleteForm = form;
|
||||
document.getElementById('deleteConfirmMessage').textContent = form.dataset.confirmMessage || 'Supprimer cet élément ?';
|
||||
var warnEl = document.getElementById('deleteConfirmFlowWarning');
|
||||
warnEl.style.display = 'none';
|
||||
warnEl.textContent = '';
|
||||
document.getElementById('deleteConfirmModal').classList.add('is-active');
|
||||
var m = form.getAttribute('action').match(/\/elements\/(\d+)\/delete$/);
|
||||
if (m) {
|
||||
fetch("/game/" + GAME_SLUG + "/elements/" + m[1] + "/delete-impact")
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (data) {
|
||||
if (!data.flow_node_count) return;
|
||||
var n = data.flow_node_count;
|
||||
var plural = n > 1 ? 's' : '';
|
||||
warnEl.textContent = '⚠️ ' + n + ' connexion' + plural + ' de la Logique de la scène (déclencheur/action) utilise' +
|
||||
(n > 1 ? 'nt' : '') + ' cet élément et sera' + (n > 1 ? 'ont' : '') + ' aussi supprimée' + plural + '.';
|
||||
warnEl.style.display = 'block';
|
||||
})
|
||||
.catch(function () {});
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function closeDeleteConfirmModal() {
|
||||
var modal = document.getElementById('deleteConfirmModal');
|
||||
if (modal) modal.classList.remove('is-active');
|
||||
_pendingDeleteForm = null;
|
||||
}
|
||||
|
||||
function confirmDeleteElement() {
|
||||
if (!_pendingDeleteForm) return;
|
||||
var form = _pendingDeleteForm;
|
||||
_pendingDeleteForm = null;
|
||||
closeDeleteConfirmModal();
|
||||
form.dataset.confirmed = '1';
|
||||
if (form.requestSubmit) form.requestSubmit(); else form.submit();
|
||||
}
|
||||
|
||||
function openIconPicker() {
|
||||
var modal = document.getElementById('iconPickerModal');
|
||||
if (modal) modal.classList.add('is-active');
|
||||
}
|
||||
|
||||
function closeIconPicker() {
|
||||
var modal = document.getElementById('iconPickerModal');
|
||||
if (modal) modal.classList.remove('is-active');
|
||||
}
|
||||
|
||||
function chooseIcon(iconSlug) {
|
||||
var input = document.getElementById('field-icon_class');
|
||||
var preview = document.getElementById('iconPickerPreview');
|
||||
if (input) input.value = iconSlug;
|
||||
if (preview) preview.style.setProperty('--icon-url', "url('/static/icons/" + iconSlug + ".svg')");
|
||||
closeIconPicker();
|
||||
submitPropsForm();
|
||||
}
|
||||
|
||||
function filterIconPickerModal(query) {
|
||||
var q = query.trim().toLowerCase();
|
||||
document.querySelectorAll('#iconPickerGrid .iconGalleryTile').forEach(function (tile) {
|
||||
var match = !q || tile.dataset.iconSearch.indexOf(q) !== -1;
|
||||
tile.classList.toggle('iconHidden', !match);
|
||||
});
|
||||
}
|
||||
|
||||
if (!window.__forgeIconPickerEscBound) {
|
||||
window.__forgeIconPickerEscBound = true;
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') closeIconPicker();
|
||||
});
|
||||
}
|
||||
|
||||
if (!window.__forgeIconGalleryDragBound) {
|
||||
window.__forgeIconGalleryDragBound = true;
|
||||
var draggedIconClass = null;
|
||||
|
||||
document.addEventListener('dragstart', function (e) {
|
||||
var tile = e.target.closest('.iconGalleryTile');
|
||||
if (!tile) return;
|
||||
draggedIconClass = tile.dataset.iconClass;
|
||||
tile.classList.add('dragging');
|
||||
e.dataTransfer.effectAllowed = 'copy';
|
||||
try { e.dataTransfer.setData('text/plain', draggedIconClass); } catch (err) {}
|
||||
});
|
||||
|
||||
document.addEventListener('dragend', function (e) {
|
||||
var tile = e.target.closest('.iconGalleryTile');
|
||||
if (tile) tile.classList.remove('dragging');
|
||||
draggedIconClass = null;
|
||||
});
|
||||
|
||||
document.addEventListener('dragover', function (e) {
|
||||
if (!draggedIconClass || !e.target.closest('#canvas')) return;
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
});
|
||||
|
||||
document.addEventListener('drop', function (e) {
|
||||
if (!draggedIconClass || !e.target.closest('#canvas')) return;
|
||||
e.preventDefault();
|
||||
addIconElement(draggedIconClass);
|
||||
draggedIconClass = null;
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Surbrillance sur le canevas de l'élément sélectionné ----------
|
||||
//
|
||||
// Un élément posé DIRECTEMENT sur l'écran a déjà son cadre de sélection via
|
||||
// la classe "canvasElement.selected" (posée côté serveur). Un élément
|
||||
// imbriqué dans un conteneur/répéteur/groupe de champs n'a pas ce cadre
|
||||
// séparé — sa propre balise porte "data-element-id" (voir visible_attrs.py)
|
||||
// mais rien ne la mettait en valeur, donc sélectionner un enfant dans
|
||||
// l'arborescence ne se voyait pas du tout sur le canevas. Ce contour
|
||||
// générique cible directement cette balise, quelle que soit sa profondeur.
|
||||
function applySelectionHighlight(id) {
|
||||
var canvas = document.getElementById('canvas');
|
||||
if (!canvas) return;
|
||||
canvas.querySelectorAll('.elementHighlighted').forEach(function (n) {
|
||||
n.classList.remove('elementHighlighted');
|
||||
});
|
||||
if (!id) return;
|
||||
var node = canvas.querySelector('[data-element-id="' + id + '"]');
|
||||
if (node) node.classList.add('elementHighlighted');
|
||||
}
|
||||
|
||||
// ---------- Élément à onglets : bascule d'onglet côté client ----------
|
||||
//
|
||||
// Un seul panneau visible à la fois (voir render_onglets.py) — basculé ici
|
||||
// plutôt que par un aller-retour serveur, pour un rendu instantané aussi
|
||||
// bien dans l'éditeur qu'en jeu (voir la même fonction dans play.html).
|
||||
function forgeShowTab(btn) {
|
||||
var groupId = btn.dataset.tabBtn;
|
||||
var targetId = btn.dataset.tabTarget;
|
||||
document.querySelectorAll('[data-tab-btn="' + groupId + '"]').forEach(function (b) {
|
||||
b.classList.toggle('is-active', b === btn);
|
||||
});
|
||||
document.querySelectorAll('[data-tab-group="' + groupId + '"]').forEach(function (p) {
|
||||
p.style.display = (p.id === targetId) ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
if (!window.__forgeTreeToggleBound) {
|
||||
window.__forgeTreeToggleBound = true;
|
||||
document.addEventListener('click', function (e) {
|
||||
var btn = e.target.closest('.treeToggle');
|
||||
if (!btn) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var node = btn.closest('.treeNode');
|
||||
var collapsed = node.classList.toggle('collapsed');
|
||||
try { localStorage.setItem(treeCollapseKey(node.dataset.elementId), collapsed ? '1' : '0'); } catch (err) {}
|
||||
});
|
||||
}
|
||||
|
||||
restoreTreeCollapsedState();
|
||||
|
||||
// ---------- Arborescence : réordonner ou déplacer dans un conteneur par
|
||||
// glisser-déposer ----------
|
||||
//
|
||||
// Deux gestes distincts, selon où on relâche sur une ligne cible :
|
||||
// - au-dessus/en dessous d'une ligne DU MÊME CONTENEUR (même parent, ou
|
||||
// toutes deux à la racine) : change leur ordre (voir reorder_element.py).
|
||||
// - sur le MILIEU d'une ligne dont le widget est un conteneur (n'importe où
|
||||
// dans l'arborescence, même un autre parent) : pose l'élément DEDANS, en
|
||||
// dernier enfant (voir move_element_to_container.py) — c'est désormais LA
|
||||
// façon de ranger un élément dans un conteneur (l'ancien menu dédié
|
||||
// "Ajouter DANS ce conteneur" du panneau de propriétés a été retiré,
|
||||
// devenu redondant avec ce geste).
|
||||
// Écouteurs posés une seule fois sur document (délégation) : ils survivent
|
||||
// au remplacement de #builder3 par refreshBuilderPanel/refreshCanvasOnly,
|
||||
// pas besoin de les rebrancher.
|
||||
var treeDragElementId = null;
|
||||
var treeDragParentId = null;
|
||||
|
||||
function treeRowDropInfo(row) {
|
||||
var node = row.closest('.treeNode');
|
||||
return {
|
||||
elementId: node ? node.dataset.elementId : null,
|
||||
parentId: row.dataset.parentId || '',
|
||||
isContainer: row.dataset.isContainer === '1',
|
||||
};
|
||||
}
|
||||
|
||||
function clearTreeDropIndicators() {
|
||||
document.querySelectorAll('.treeRow.dropBefore, .treeRow.dropAfter, .treeRow.dropInside').forEach(function (r) {
|
||||
r.classList.remove('dropBefore', 'dropAfter', 'dropInside');
|
||||
});
|
||||
}
|
||||
|
||||
// Zone touchée par le curseur dans la ligne cible : avec les frères et
|
||||
// sœurs, avant/après seulement (moitié haute/basse) ; sur un conteneur,
|
||||
// une bande centrale "dedans" s'ajoute (tiers haut/milieu/bas) — sauf si ce
|
||||
// conteneur n'est PAS un frère/sœur du même parent, où seul "dedans" a un
|
||||
// sens (il n'y a pas d'ordre à changer avec un élément d'un autre parent).
|
||||
function treeDropZone(row, clientY, sameParent, isContainer) {
|
||||
var rect = row.getBoundingClientRect();
|
||||
var ratio = (clientY - rect.top) / rect.height;
|
||||
if (!sameParent) return isContainer ? 'inside' : null;
|
||||
if (!isContainer) return ratio < 0.5 ? 'before' : 'after';
|
||||
if (ratio < 1 / 3) return 'before';
|
||||
if (ratio > 2 / 3) return 'after';
|
||||
return 'inside';
|
||||
}
|
||||
|
||||
if (!window.__forgeTreeDragBound) {
|
||||
window.__forgeTreeDragBound = true;
|
||||
|
||||
document.addEventListener('dragstart', function (e) {
|
||||
var row = e.target.closest('.elementTree .treeRow');
|
||||
if (!row) return;
|
||||
var info = treeRowDropInfo(row);
|
||||
treeDragElementId = info.elementId;
|
||||
treeDragParentId = info.parentId;
|
||||
row.classList.add('dragging');
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
try { e.dataTransfer.setData('text/plain', String(info.elementId)); } catch (err) {}
|
||||
});
|
||||
|
||||
document.addEventListener('dragend', function (e) {
|
||||
var row = e.target.closest('.elementTree .treeRow');
|
||||
if (row) row.classList.remove('dragging');
|
||||
clearTreeDropIndicators();
|
||||
treeDragElementId = null;
|
||||
treeDragParentId = null;
|
||||
});
|
||||
|
||||
document.addEventListener('dragover', function (e) {
|
||||
var row = e.target.closest('.elementTree .treeRow');
|
||||
if (!row || treeDragElementId == null) return;
|
||||
var info = treeRowDropInfo(row);
|
||||
if (info.elementId == null || String(info.elementId) === String(treeDragElementId)) return;
|
||||
var sameParent = info.parentId === treeDragParentId;
|
||||
var zone = treeDropZone(row, e.clientY, sameParent, info.isContainer);
|
||||
if (!zone) return;
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
clearTreeDropIndicators();
|
||||
row.classList.add(zone === 'before' ? 'dropBefore' : zone === 'after' ? 'dropAfter' : 'dropInside');
|
||||
});
|
||||
|
||||
document.addEventListener('drop', function (e) {
|
||||
var row = e.target.closest('.elementTree .treeRow');
|
||||
clearTreeDropIndicators();
|
||||
if (!row || treeDragElementId == null) return;
|
||||
var info = treeRowDropInfo(row);
|
||||
if (info.elementId == null || String(info.elementId) === String(treeDragElementId)) return;
|
||||
var sameParent = info.parentId === treeDragParentId;
|
||||
var zone = treeDropZone(row, e.clientY, sameParent, info.isContainer);
|
||||
if (!zone) return;
|
||||
e.preventDefault();
|
||||
var draggedId = treeDragElementId;
|
||||
if (zone === 'inside') {
|
||||
fetch('/game/' + GAME_SLUG + '/elements/' + draggedId + '/move-to-container', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ parent_id: info.elementId })
|
||||
}).then(refreshAfterReorder);
|
||||
} else {
|
||||
fetch('/game/' + GAME_SLUG + '/elements/' + draggedId + '/reorder', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ target_id: info.elementId, position: zone })
|
||||
}).then(refreshAfterReorder);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function refreshAfterReorder() {
|
||||
var url = SCREEN_EDIT_URL + (CURRENT_SELECTED_ID ? ('?selected=' + CURRENT_SELECTED_ID) : '');
|
||||
return fetch(url, { headers: { 'X-Requested-With': 'pjax' } })
|
||||
.then(function (r) { return r.text(); })
|
||||
.then(function (html) {
|
||||
var doc = new DOMParser().parseFromString(html, 'text/html');
|
||||
var newCanvas = doc.getElementById('canvas');
|
||||
var curCanvas = document.getElementById('canvas');
|
||||
if (newCanvas && curCanvas) {
|
||||
curCanvas.innerHTML = newCanvas.innerHTML;
|
||||
applySelectionHighlight(CURRENT_SELECTED_ID);
|
||||
}
|
||||
var newTree = doc.querySelector('#panelLeftFloat .elementTree');
|
||||
var curTree = document.querySelector('#panelLeftFloat .elementTree');
|
||||
if (newTree && curTree) { curTree.innerHTML = newTree.innerHTML; }
|
||||
restoreTreeCollapsedState();
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- Navigation dans l'éditeur sans AUCUN rechargement de page ----------
|
||||
//
|
||||
// Se déplacer dans le canevas (glisser, redimensionner, cliquer un autre
|
||||
// élément) et modifier les réglages d'un élément ne doivent jamais recharger
|
||||
// la page : on va chercher en arrière-plan (fetch) uniquement le fragment
|
||||
// HTML dont on a besoin (le bloc #builder3 en entier pour changer de
|
||||
// sélection, ou juste #canvas pour refléter un changement visuel après une
|
||||
// sauvegarde automatique) et on le remplace dans le DOM courant. L'URL
|
||||
// (?selected=...) reste mise à jour via l'historique (pushState), pour que
|
||||
// le bouton "précédent" du navigateur continue à fonctionner normalement.
|
||||
|
||||
function refreshBuilderPanel(selectedId) {
|
||||
var url = SCREEN_EDIT_URL + "?selected=" + selectedId;
|
||||
return fetch(url, { headers: { "X-Requested-With": "pjax" } })
|
||||
.then(function (r) { return r.text().then(function (html) { return { html: html, url: r.url || url }; }); })
|
||||
.then(function (result) {
|
||||
var doc = new DOMParser().parseFromString(result.html, "text/html");
|
||||
var newBuilder = doc.getElementById("builder3");
|
||||
var curBuilder = document.getElementById("builder3");
|
||||
if (newBuilder && curBuilder) {
|
||||
curBuilder.innerHTML = newBuilder.innerHTML;
|
||||
}
|
||||
CURRENT_SELECTED_ID = selectedId;
|
||||
history.pushState({ pjax: true }, "", result.url);
|
||||
initBuilderPanel();
|
||||
})
|
||||
.catch(function () {
|
||||
// Échec réseau : on retombe sur une vraie navigation plutôt que de
|
||||
// laisser l'éditeur dans un état incohérent.
|
||||
window.location.href = url;
|
||||
});
|
||||
}
|
||||
|
||||
function refreshCanvasOnly() {
|
||||
if (!CURRENT_SELECTED_ID) return Promise.resolve();
|
||||
var url = SCREEN_EDIT_URL + "?selected=" + CURRENT_SELECTED_ID;
|
||||
return fetch(url, { headers: { "X-Requested-With": "pjax" } })
|
||||
.then(function (r) { return r.text(); })
|
||||
.then(function (html) {
|
||||
var doc = new DOMParser().parseFromString(html, "text/html");
|
||||
var newCanvas = doc.getElementById("canvas");
|
||||
var curCanvas = document.getElementById("canvas");
|
||||
if (newCanvas && curCanvas) {
|
||||
curCanvas.innerHTML = newCanvas.innerHTML;
|
||||
applySelectionHighlight(CURRENT_SELECTED_ID);
|
||||
}
|
||||
// Aperçu du contenu dans l'arborescence de gauche (ex: texte tronqué) —
|
||||
// sans toucher au panneau de droite, pour ne jamais faire perdre le
|
||||
// focus/curseur pendant qu'on modifie un réglage.
|
||||
var newTree = doc.querySelector('#panelLeftFloat .elementTree');
|
||||
var curTree = document.querySelector('#panelLeftFloat .elementTree');
|
||||
if (newTree && curTree) { curTree.innerHTML = newTree.innerHTML; restoreTreeCollapsedState(); }
|
||||
});
|
||||
}
|
||||
|
||||
function goToSelected(id) {
|
||||
return refreshBuilderPanel(id);
|
||||
}
|
||||
|
||||
// ---------- Glisser-déposer / redimensionner sur le canevas ----------
|
||||
//
|
||||
// Un mousedown qui bouge de plus de quelques pixels déplace l'élément
|
||||
// (position sauvegardée en arrière-plan à la fin, sans recharger la page —
|
||||
// comme l'élément déplacé reste celui déjà sélectionné, on se contente de
|
||||
// mettre à jour les champs X/Y/Largeur/Hauteur en local, rien d'autre à
|
||||
// rafraîchir) ; un mousedown qui ne bouge pas est traité comme un simple
|
||||
// clic de sélection (qui, lui, doit rafraîchir le panneau de droite pour
|
||||
// afficher les réglages du nouvel élément choisi).
|
||||
function onElementMouseDown(e, id) {
|
||||
if (e.target.classList.contains('resizeHandle')) return;
|
||||
e.preventDefault();
|
||||
var el = document.getElementById('el-' + id);
|
||||
var canvas = document.getElementById('canvas');
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
var startX = e.clientX, startY = e.clientY;
|
||||
var startLeft = parseFloat(el.style.left), startTop = parseFloat(el.style.top);
|
||||
var width = parseFloat(el.style.width), height = parseFloat(el.style.height);
|
||||
var moved = false;
|
||||
// Un clic (sans glisser) sélectionne l'élément précis qu'on a touché —
|
||||
// même s'il est physiquement imbriqué dans ce conteneur — pour éviter de
|
||||
// devoir repasser par l'arborescence à chaque fois. Le glisser-déposer,
|
||||
// lui, reste toujours celui de la boîte de plus haut niveau (id).
|
||||
var clickedTarget = e.target.closest('[data-element-id]');
|
||||
var clickedId = clickedTarget ? clickedTarget.dataset.elementId : id;
|
||||
|
||||
function onMove(ev) {
|
||||
var dx = ev.clientX - startX, dy = ev.clientY - startY;
|
||||
if (Math.abs(dx) > 3 || Math.abs(dy) > 3) moved = true;
|
||||
var newLeft = Math.max(0, Math.min(100 - width, startLeft + (dx / rect.width) * 100));
|
||||
var newTop = Math.max(0, Math.min(100 - height, startTop + (dy / rect.height) * 100));
|
||||
el.style.left = newLeft + '%';
|
||||
el.style.top = newTop + '%';
|
||||
}
|
||||
function onUp() {
|
||||
document.removeEventListener('mousemove', onMove);
|
||||
document.removeEventListener('mouseup', onUp);
|
||||
if (moved) {
|
||||
var newLeft = parseFloat(el.style.left), newTop = parseFloat(el.style.top);
|
||||
updatePosFields(newLeft, newTop, width, height);
|
||||
saveGeometry(id, newLeft, newTop, width, height);
|
||||
} else if (String(clickedId) !== String(CURRENT_SELECTED_ID)) {
|
||||
goToSelected(clickedId);
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousemove', onMove);
|
||||
document.addEventListener('mouseup', onUp);
|
||||
}
|
||||
|
||||
function onResizeMouseDown(e, id) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
var el = document.getElementById('el-' + id);
|
||||
var canvas = document.getElementById('canvas');
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
var startX = e.clientX, startY = e.clientY;
|
||||
var startWidth = parseFloat(el.style.width), startHeight = parseFloat(el.style.height);
|
||||
var left = parseFloat(el.style.left), top = parseFloat(el.style.top);
|
||||
|
||||
function onMove(ev) {
|
||||
var dx = ev.clientX - startX, dy = ev.clientY - startY;
|
||||
var newWidth = Math.max(5, Math.min(100 - left, startWidth + (dx / rect.width) * 100));
|
||||
var newHeight = Math.max(5, Math.min(100 - top, startHeight + (dy / rect.height) * 100));
|
||||
el.style.width = newWidth + '%';
|
||||
el.style.height = newHeight + '%';
|
||||
}
|
||||
function onUp() {
|
||||
document.removeEventListener('mousemove', onMove);
|
||||
document.removeEventListener('mouseup', onUp);
|
||||
var newWidth = parseFloat(el.style.width), newHeight = parseFloat(el.style.height);
|
||||
updatePosFields(left, top, newWidth, newHeight);
|
||||
saveGeometry(id, left, top, newWidth, newHeight);
|
||||
}
|
||||
document.addEventListener('mousemove', onMove);
|
||||
document.addEventListener('mouseup', onUp);
|
||||
}
|
||||
|
||||
function updatePosFields(x, y, w, h) {
|
||||
var xEl = document.getElementById('pos-x'), yEl = document.getElementById('pos-y');
|
||||
var wEl = document.getElementById('pos-w'), hEl = document.getElementById('pos-h');
|
||||
if (xEl) xEl.value = Math.round(x * 10) / 10;
|
||||
if (yEl) yEl.value = Math.round(y * 10) / 10;
|
||||
if (wEl) wEl.value = Math.round(w * 10) / 10;
|
||||
if (hEl) hEl.value = Math.round(h * 10) / 10;
|
||||
}
|
||||
|
||||
// ---------- Panneau de propriétés : tout est enregistré automatiquement ----------
|
||||
//
|
||||
// Il n'y a plus de bouton "Enregistrer" : chaque réglage se sauvegarde tout
|
||||
// seul dès qu'on le change (immédiatement pour une case à cocher/couleur/
|
||||
// liste déroulante, après une courte pause pour un champ texte ou un
|
||||
// slider qu'on est en train de glisser, pour éviter d'envoyer une requête à
|
||||
// chaque caractère tapé ou à chaque pixel de glissement).
|
||||
var autosaveTimer = null;
|
||||
var autosaveIndicator = null;
|
||||
|
||||
function flashAutosave(state) {
|
||||
if (!autosaveIndicator) return;
|
||||
autosaveIndicator.classList.remove('saving', 'saved');
|
||||
if (state === 'saving') {
|
||||
autosaveIndicator.textContent = 'Enregistrement...';
|
||||
autosaveIndicator.classList.add('saving');
|
||||
} else {
|
||||
autosaveIndicator.textContent = 'Enregistré automatiquement ✓';
|
||||
autosaveIndicator.classList.add('saved');
|
||||
}
|
||||
}
|
||||
|
||||
function submitPropsForm() {
|
||||
var form = document.getElementById('propsForm');
|
||||
if (!form) return Promise.resolve();
|
||||
flashAutosave('saving');
|
||||
var data = new FormData(form);
|
||||
return fetch(form.getAttribute('action'), {
|
||||
method: 'POST', body: data, headers: { "X-Requested-With": "pjax" }
|
||||
}).then(function () {
|
||||
flashAutosave('saved');
|
||||
return refreshCanvasOnly();
|
||||
});
|
||||
}
|
||||
|
||||
function debouncedSubmitPropsForm() {
|
||||
clearTimeout(autosaveTimer);
|
||||
autosaveTimer = setTimeout(submitPropsForm, 500);
|
||||
}
|
||||
|
||||
// Insère "{{champ}}" à l'emplacement du curseur dans le champ "Contenu"
|
||||
// (voir controls_with_values.py, control["field_options"] posé une fois
|
||||
// "Lier à un objet de données" réglé) — évite d'avoir à taper la syntaxe
|
||||
// à la main sans savoir quels noms de champs existent. OPEN/CLOSE en deux
|
||||
// morceaux : Jinja interpréterait "{{"/"}}" littéralement adjacents dans
|
||||
// le SOURCE de ce template comme le début d'une expression s'il les
|
||||
// rencontrait tels quels (même à l'intérieur d'un <script>), voir la même
|
||||
// astuce pour _FILTER_REF_OPEN/_FILTER_REF_CLOSE plus bas.
|
||||
function insertFieldAtCursor(fieldId, pickerId) {
|
||||
var field = document.getElementById(fieldId);
|
||||
var picker = document.getElementById(pickerId);
|
||||
if (!field || !picker || !picker.value) return;
|
||||
var open = '{' + '{', close = '}' + '}';
|
||||
var text = open + picker.value + close;
|
||||
var start = field.selectionStart || 0, end = field.selectionEnd || 0;
|
||||
field.value = field.value.substring(0, start) + text + field.value.substring(end);
|
||||
var newPos = start + text.length;
|
||||
field.focus();
|
||||
field.setSelectionRange(newPos, newPos);
|
||||
field.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
picker.value = '';
|
||||
}
|
||||
|
||||
function bindPropsAutosave() {
|
||||
var form = document.getElementById('propsForm');
|
||||
autosaveIndicator = document.getElementById('autosaveStatus');
|
||||
if (!form) return;
|
||||
form.querySelectorAll('input, textarea, select').forEach(function (field) {
|
||||
if (field.classList.contains('uploadInput')) return; // géré séparément (upload de fichier)
|
||||
var debounced = field.type === 'text' || field.type === 'range' || field.tagName === 'TEXTAREA';
|
||||
field.addEventListener(debounced ? 'input' : 'change', function () {
|
||||
// Le bascule visuelle de l'alignement (case active) est déjà gérée
|
||||
// par l'attribut onchange="syncAlign(this)" posé sur chaque radio.
|
||||
if (debounced) debouncedSubmitPropsForm(); else submitPropsForm();
|
||||
});
|
||||
});
|
||||
}
|
||||
+24
-2233
File diff suppressed because it is too large
Load Diff
+20
-8
@@ -87,7 +87,19 @@ def game(client):
|
||||
shutil.rmtree(game_dir)
|
||||
|
||||
|
||||
_PLAY_JS_DIR = os.path.join(os.path.dirname(os.path.dirname(os.path.abspath(__file__))), "static", "js", "play")
|
||||
_STATIC_DIR = os.path.join(os.path.dirname(os.path.dirname(os.path.abspath(__file__))), "static", "js")
|
||||
_PLAY_JS_DIR = os.path.join(_STATIC_DIR, "play")
|
||||
_SCREEN_EDIT_JS_DIR = os.path.join(_STATIC_DIR, "screen_edit")
|
||||
|
||||
|
||||
def _js_bundle(directory):
|
||||
parts = []
|
||||
for name in sorted(os.listdir(directory)):
|
||||
path = os.path.join(directory, name)
|
||||
if os.path.isfile(path) and name.endswith(".js"):
|
||||
with open(path, encoding="utf-8") as f:
|
||||
parts.append(f.read())
|
||||
return "\n".join(parts)
|
||||
|
||||
|
||||
def play_js_bundle():
|
||||
@@ -98,13 +110,13 @@ def play_js_bundle():
|
||||
telle chaîne, sans dépendre d'un navigateur — avant le découpage, ça
|
||||
revenait à chercher dans le HTML de /game/<slug>/play (tout était
|
||||
inline) ; maintenant la logique vit dans ces fichiers statiques."""
|
||||
parts = []
|
||||
for name in sorted(os.listdir(_PLAY_JS_DIR)):
|
||||
path = os.path.join(_PLAY_JS_DIR, name)
|
||||
if os.path.isfile(path) and name.endswith(".js"):
|
||||
with open(path, encoding="utf-8") as f:
|
||||
parts.append(f.read())
|
||||
return "\n".join(parts)
|
||||
return _js_bundle(_PLAY_JS_DIR)
|
||||
|
||||
|
||||
def screen_edit_js_bundle():
|
||||
"""Même principe que play_js_bundle(), pour l'éditeur (static/js/
|
||||
screen_edit/, extrait de templates/screen_edit.html)."""
|
||||
return _js_bundle(_SCREEN_EDIT_JS_DIR)
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
|
||||
@@ -13,6 +13,8 @@ passent."""
|
||||
import json
|
||||
import re
|
||||
|
||||
from conftest import screen_edit_js_bundle
|
||||
|
||||
|
||||
def _create_screen(client, slug, name="Accueil"):
|
||||
resp = client.post(f"/game/{slug}/screens/new", data={"name": name}, follow_redirects=False)
|
||||
@@ -88,7 +90,7 @@ def test_screen_edit_panel_exposes_variable_source_condition_ui(client, game):
|
||||
assert 'id="nf-cond-source"' in html
|
||||
assert 'id="nf-cond-variable-fields"' in html
|
||||
assert "onFlowConditionSourceChange" in html
|
||||
assert "onFlowClauseSourceChange" in html
|
||||
assert "onFlowClauseSourceChange" in screen_edit_js_bundle()
|
||||
|
||||
|
||||
def test_condition_builder_still_available_without_any_object_defined(client, game):
|
||||
|
||||
@@ -10,6 +10,8 @@ import re
|
||||
import db
|
||||
import screens
|
||||
|
||||
from conftest import screen_edit_js_bundle
|
||||
|
||||
|
||||
def _create_screen(client, slug, name="Accueil"):
|
||||
resp = client.post(f"/game/{slug}/screens/new", data={"name": name}, follow_redirects=False)
|
||||
@@ -105,6 +107,8 @@ def test_ordinary_fixed_row_target_is_unaffected(client, game):
|
||||
def test_clicked_row_option_appears_in_the_flow_node_editor(client, game):
|
||||
_create_email_object(client, game)
|
||||
screen_id = _create_screen(client, game)
|
||||
html = client.get(f"/game/{game}/screens/{screen_id}/edit").data.decode()
|
||||
assert "FLOW_CLICKED_ROW_ID" in html
|
||||
assert "Ligne cliquée" in html
|
||||
resp = client.get(f"/game/{game}/screens/{screen_id}/edit")
|
||||
assert resp.status_code == 200
|
||||
js = screen_edit_js_bundle()
|
||||
assert "FLOW_CLICKED_ROW_ID" in js
|
||||
assert "Ligne cliquée" in js
|
||||
|
||||
Reference in New Issue
Block a user