@@ -729,6 +738,89 @@ function restoreTreeCollapsedState() {
});
}
+// ---------- Panneau de propriétés : flottant, déplaçable, fermable ----------
+//
+// Sorti du flux (position:fixed en CSS) pour ne jamais rétrécir le canevas
+// selon où on le pose — le fermer libère toute cette largeur pour une
+// prévisualisation plus fidèle à ce que "Jouer" affiche réellement (voir
+// bug remonté : un panneau trop large réduisait le canevas au point de
+// casser la mise en page des onglets). Position et état ouvert/fermé
+// mémorisés par écran pour survivre à un changement de sélection (qui
+// remplace tout #builder3, voir refreshBuilderPanel) ou un rechargement.
+function propsPanelStateKey() {
+ return 'forgePropsPanel:' + GAME_SLUG + ':' + SCREEN_ID;
+}
+
+function savePropsPanelState(state) {
+ try {
+ var current = JSON.parse(localStorage.getItem(propsPanelStateKey()) || '{}');
+ localStorage.setItem(propsPanelStateKey(), JSON.stringify(Object.assign(current, state)));
+ } catch (e) {}
+}
+
+function loadPropsPanelState() {
+ try { return JSON.parse(localStorage.getItem(propsPanelStateKey()) || '{}'); } catch (e) { return {}; }
+}
+
+function restorePropsPanelState() {
+ var panel = document.getElementById('propsPanelFloat');
+ var reopenBtn = document.getElementById('propsPanelReopenBtn');
+ if (!panel) return;
+ var state = loadPropsPanelState();
+ 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 closePropsPanel() {
+ var panel = document.getElementById('propsPanelFloat');
+ var reopenBtn = document.getElementById('propsPanelReopenBtn');
+ if (panel) panel.classList.add('hidden');
+ if (reopenBtn) reopenBtn.classList.add('visible');
+ savePropsPanelState({ open: false });
+}
+
+function openPropsPanel() {
+ var panel = document.getElementById('propsPanelFloat');
+ var reopenBtn = document.getElementById('propsPanelReopenBtn');
+ if (panel) panel.classList.remove('hidden');
+ if (reopenBtn) reopenBtn.classList.remove('visible');
+ savePropsPanelState({ open: true });
+}
+
+if (!window.__forgePropsPanelDragBound) {
+ window.__forgePropsPanelDragBound = true;
+ document.addEventListener('mousedown', function (e) {
+ if (!e.target.closest('#propsPanelDragHandle') || e.target.closest('button')) return;
+ var panel = document.getElementById('propsPanelFloat');
+ 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);
+ savePropsPanelState({ left: parseFloat(panel.style.left), top: parseFloat(panel.style.top) });
+ }
+ document.addEventListener('mousemove', onMove);
+ document.addEventListener('mouseup', onUp);
+ });
+}
+
// ---------- 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
@@ -1132,6 +1224,7 @@ function initBuilderPanel() {
bindJaugeDefinitionSelect();
restoreTreeCollapsedState();
applySelectionHighlight(CURRENT_SELECTED_ID);
+ restorePropsPanelState();
}
// Jauge : quand on change l'objet de données à suivre SANS quitter le