Forge-Store/Forge-Engine
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Highlight the selected element on the canvas even when it's nested

Browse Source 
A top-level element already got a selection border via its
.canvasElement wrapper, but a child posed inside a container/répéteur/
groupe de champs has no such separate frame, so selecting it from the
tree gave no visual feedback on the canvas at all.

applySelectionHighlight() now targets the element's own tag directly via
data-element-id (present on every rendered element, nested or not) and
outlines it, re-run after every canvas refresh path (initial load, full
pjax navigation, partial panel refresh, and the autosave-only canvas
refresh).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-08-23 20:25:05 +02:00
co-authored by Claude Sonnet 5
parent 386e93d9c6
commit d8ab71ddeb
3 changed files with 45 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+7
View File
@@ -143,6 +143,13 @@ body.builderBody > main.content{ flex:1 1 auto; min-height:0; overflow:hidden; d
.canvasElement:hover{ border-color:rgba(91,140,255,.5); }
.canvasElement.selected{ border:2px solid var(--accent); }
.canvasElementInner{ width:100%; height:100%; pointer-events:none; }
/* Surbrillance de l'élément sélectionné dans l'arborescence, posée en JS sur
sa propre balise (voir applySelectionHighlight) — seul moyen de la voir
sur le canevas quand cet élément est imbriqué dans un conteneur/répéteur/
groupe de champs, qui n'a pas de cadre ".canvasElement" séparé comme un
élément posé directement sur l'écran. */
.elementHighlighted{ outline:2px solid var(--accent); outline-offset:-1px; }
.resizeHandle{
position:absolute; right:0; bottom:0; width:14px; height:14px; cursor:nwse-resize;
background:var(--accent); border-radius:3px 0 6px 0; opacity:.85;