From 046c38b4dc7e0243ce2fcbaafb9583ea7e080fc0 Mon Sep 17 00:00:00 2001 From: william Date: Thu, 3 Sep 2026 16:18:42 +0200 Subject: [PATCH] =?UTF-8?q?Annule=20la=20r=C3=A9servation=20d'espace=20des?= =?UTF-8?q?=20panneaux,=20corrige=20le=20vrai=20bug=20(drag=20invisible=20?= =?UTF-8?q?sous=20eux)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Retour en arrière sur le commit précédent : les panneaux flottants doivent RESTER en position:fixed par-dessus le canevas pour maximiser l'espace utile (remarque explicite) — leur réserver une marge permanente allait à l'encontre de ce principe et ne réglait rien. Vrai bug identifié : un objet glissé (déplacé ou redimensionné) sous l'un de ces panneaux (z-index:60) disparaissait littéralement à l'écran PENDANT le geste — toujours déplacé/enregistré correctement en dessous, juste invisible, donnant l'impression qu'on ne pouvait pas y déposer d'objet. Élevé au-dessus des panneaux (z-index très haut) le temps du glisser/redimensionnement SEULEMENT, restauré ensuite. Co-Authored-By: Claude Sonnet 5 --- static/js/scenes/scene-editor.js | 22 +++++++++++++++++++++- static/style.css | 12 +----------- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/static/js/scenes/scene-editor.js b/static/js/scenes/scene-editor.js index 0ea3c00b..dbe51ef5 100644 --- a/static/js/scenes/scene-editor.js +++ b/static/js/scenes/scene-editor.js @@ -48,10 +48,23 @@ function onSceneObjectMouseDown(e, id) { var startLeft = parseFloat(el.style.left) || 0, startTop = parseFloat(el.style.top) || 0; var width = parseFloat(el.style.width) || 0, height = parseFloat(el.style.height) || 0; var moved = false; + // Les panneaux flottants "🧩 Objets"/"⚙️ Propriétés" (voir static/style.css + // .floatPanel, z-index:60) restent DÉLIBÉRÉMENT en position:fixed + // PAR-DESSUS le canevas, pour maximiser l'espace utile — mais un objet + // glissé sous l'un d'eux, à son z-index habituel (bien plus bas), y + // disparaissait littéralement à l'écran PENDANT le glisser (toujours + // déplacé/enregistré correctement en dessous, juste invisible pendant + // le geste) : impossible de voir où on le dépose. Passé au-dessus des + // panneaux (z-index très élevé) le temps du glisser SEULEMENT, restauré + // à sa valeur d'origine à la fin. + var previousZIndex = el.style.zIndex; function onMove(ev) { var dx = ev.clientX - startX, dy = ev.clientY - startY; - if (Math.abs(dx) > 3 || Math.abs(dy) > 3) moved = true; + if (Math.abs(dx) > 3 || Math.abs(dy) > 3) { + if (!moved) el.style.zIndex = 9999; + moved = true; + } var newLeft = Math.max(0, Math.min(SCENE_WIDTH - width, startLeft + dx)); var newTop = Math.max(0, Math.min(SCENE_HEIGHT - height, startTop + dy)); el.style.left = newLeft + 'px'; @@ -61,6 +74,7 @@ function onSceneObjectMouseDown(e, id) { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); if (moved) { + el.style.zIndex = previousZIndex; var newLeft = parseFloat(el.style.left), newTop = parseFloat(el.style.top); updateScenePosFields(newLeft, newTop, width, height); saveSceneObjectGeometry(id, newLeft, newTop, width, height); @@ -79,6 +93,11 @@ function onSceneObjectResizeMouseDown(e, id) { var startX = e.clientX, startY = e.clientY; var startWidth = parseFloat(el.style.width) || 0, startHeight = parseFloat(el.style.height) || 0; var left = parseFloat(el.style.left) || 0, top = parseFloat(el.style.top) || 0; + // Voir la même note dans onSceneObjectMouseDown ci-dessus : au-dessus + // des panneaux flottants le temps du geste, pour rester visible même + // en redimensionnant sous l'un d'eux. + var previousZIndex = el.style.zIndex; + el.style.zIndex = 9999; function onMove(ev) { var dx = ev.clientX - startX, dy = ev.clientY - startY; @@ -90,6 +109,7 @@ function onSceneObjectResizeMouseDown(e, id) { function onUp() { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); + el.style.zIndex = previousZIndex; var newWidth = parseFloat(el.style.width), newHeight = parseFloat(el.style.height); updateScenePosFields(left, top, newWidth, newHeight); saveSceneObjectGeometry(id, left, top, newWidth, newHeight); diff --git a/static/style.css b/static/style.css index 152e5c0b..c8ec72c7 100644 --- a/static/style.css +++ b/static/style.css @@ -467,17 +467,7 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d (.flowCanvasWrap/.animTimelineWrap ont déjà leur propre défilement), jamais sur cette zone entière — sans quoi la barre d'onglets et la barre d'outils défileraient avec le contenu au lieu de rester fixes en haut. */ -.builderCanvasArea{ flex:1 1 auto; min-width:0; height:100%; overflow:hidden; display:flex; flex-direction:column; transition:margin .2s ease; } -/* Bug corrigé : les panneaux flottants (voir .floatPanel plus bas) sont - en position:fixed, DONC hors du flux flex de .builder3 — ils flottent - PAR-DESSUS le canevas sans jamais réduire sa largeur, rendant sa - partie droite (sous "⚙️ Propriétés") ou gauche (sous "🧩 Objets") - inaccessible au clic/glisser tant que le panneau correspondant reste - ouvert. Réserve maintenant leur largeur explicitement dès qu'un - panneau est ouvert (voir :not(.hidden), la classe posée/retirée par - openFloatPanel()/closeFloatPanel(), static/js/screen_edit/tree-panels.js). */ -#builder3:has(#panelLeftFloat:not(.hidden)) .builderCanvasArea{ margin-left:310px; } -#builder3:has(#propsPanelFloat:not(.hidden)) .builderCanvasArea{ margin-right:370px; } +.builderCanvasArea{ flex:1 1 auto; min-width:0; height:100%; overflow:hidden; display:flex; flex-direction:column; } /* ---------- Panneaux gauche/droite flottants ---------- */ /* Les deux panneaux (éléments de l'écran / propriétés) sont sortis du flux