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

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
+16
View File
@@ -46,6 +46,22 @@ def test_add_element_and_save_properties(client, game):
assert "Bienvenue" in html
def test_nested_child_carries_data_element_id_for_canvas_highlight(client, game):
"""Régression : le contour de sélection JS de l'éditeur (voir
applySelectionHighlight dans screen_edit.html) cible la balise de
l'élément via son attribut "data-element-id" — le seul repère possible
pour un enfant imbriqué, qui n'a pas de cadre ".canvasElement" séparé
comme un élément posé directement sur l'écran (voir visible_attrs.py)."""
screen_id = _create_screen(client, game)
resp = client.post(f"/game/{game}/screens/{screen_id}/elements/add", data={"widget": "conteneur"})
container_id = int(re.search(r"selected=(\d+)", resp.headers["Location"]).group(1))
resp = client.post(f"/game/{game}/elements/{container_id}/children/add", data={"widget": "titre"})
child_id = int(re.search(r"selected=(\d+)", resp.headers["Location"]).group(1))
html = client.get(f"/game/{game}/screens/{screen_id}/edit").data.decode()
assert f'data-element-id="{child_id}"' in html
def test_container_child_flex_row_no_collision(client, game):
"""Régression : un conteneur en disposition 'ligne' ne doit plus forcer
chacun de ses enfants à 100% de largeur (voir _style_string /