← Tous les articles

Fenêtres sur le frontend

Snap connections : groupes de panneaux — construisez un mini-dashboard dans l'onglet en un glissement

15 mai 2026 · par JustZix Team

Quatre types de fenêtres (CSS pane, JS pane, JS Console, Output Console) + barres d'actions + bouton flottant — ça fait six choses différentes que JustZix peut rendre dans un onglet. Chacune séparée, chacune mobile, chacune avec son propre état persistant. Sans les snap connections (depuis v2.13.42), il faudrait positionner chaque élément à la main après chaque F5 et chaque redimensionnement de fenêtre. Les snap connections en font un seul groupe.

Que sont les snap connections ?

Snap = « attraction magnétique ». Quand vous glissez un panneau/une barre/un bouton près d'un autre (seuil ~20px), JustZix l'aimante bord à bord contre l'autre et les deux côtés s'enregistrent comme un « groupe ». Le prochain glissement de n'importe quel élément du groupe → déplace tout le groupe d'un bloc.

Les 6 types d'éléments vivent dans un espace d'ID partagé :

L'espace d'ID est uniforme — saveGroupPositions(groupIds) classe chaque ID par préfixe et choisit le stockage approprié (chrome.storage.local pour les barres d'actions et les panes, chrome.storage.sync pour le bouton flottant).

Positionnement par anchor — pourquoi ça compte

Les barres d'actions utilisent des coordonnées absolues : x=200, y=400 depuis le coin haut-gauche. Redimensionnez la fenêtre de 1920px à 1280px et la barre d'actions peut atterrir hors du viewport. Les panes (CSS/JS/JS Console/Output Console) utilisent le positionnement par anchor :

{ x: 100, y: 50, anchor: 'TR' }
//                       ^^ Coin haut-droit
// Élément rendu comme : right: 100px; top: 50px;

4 anchors possibles : TL (haut-gauche), TR (haut-droit), BL (bas-gauche), BR (bas-droit). Après chaque fin de glissement, absToAnchorPosition choisit l'anchor qui donne le plus court offset — l'élément s'aimante au coin de viewport le plus proche. Redimensionnement de fenêtre → l'élément reste près de « son » coin, ne s'envole pas hors écran.

Premier mini-dashboard : 30 secondes

Disons que vous construisez une toolbar QA pour vous-même. Vous voulez dans le coin haut-droit :

1. Une barre d'actions avec 3 boutons (« Reset cart » / « Skip cookie » / « Fill demo data »)
2. Un JS pane pour « 🔥 flux destructeur »
3. Une Output Console pour surveiller les logs

Workflow :

1. Chargez la page. La barre d'actions apparaît quelque part (par défaut ou dernière position).
2. Glissez la barre dans le coin haut-droit, ~20px des bords. L'anchor est détecté comme TR.
3. Glissez le JS pane sous la barre — à ~20px du bord inférieur de la barre. Snap. Pane + barre = groupe.
4. Glissez l'Output Console sous le JS pane — encore un snap. Groupe à trois éléments.
5. F5 → tout se rend ensemble, dans la même disposition ; les snap connections tiennent. Anchor TR → la disposition colle au coin haut-droit même après un redimensionnement de fenêtre.

Voilà votre toolbar QA personnelle. Elle ne fonctionne que pour le domaine dont le scope correspond. Autres sites — autre toolbar (ou aucune).

Ce que fait réellement la détection de snap

Algorithme à la fin du glissement (simplifié) :

// 1. Récupérer les bounds de l'élément glissé (left, top, w, h)
// 2. Pour chaque autre élément glissable du DOM (.jz-pane-*, .jz-actions-bar, #justzix-floating-btn) :
//    a. Récupérer les bounds de l'autre
//    b. Calculer la distance : minimum de (top-bottom, bottom-top, left-right, right-left)
//    c. Si distance < 20px → snap (aligner l'élément glissé bord à bord avec l'autre)
// 3. Après le snap, sauvegarder toutes les positions du groupe (helper saveGroupPositions(groupIds))
// 4. Appartenance au groupe = tout ce dont la position de départ est proche de l'élément glissé au début du glissement

Le seuil de 20px est intentionnel — assez « lâche » pour que le snap se produise sans ciblage précis, mais pas si large qu'on connecte par erreur des choses séparées. Sur trackpad / tactile, ça paraît intuitif.

Glissement avec des panes cachés — correctif v2.13.54

Bug signalé par un utilisateur après v2.13.53 : le bouton flottant glissé dans un groupe avec un CSS pane caché → la barre suit correctement le bouton flottant, mais le CSS pane (caché lui aussi) reste à l'ancien endroit.

Cause racine : les panes cachés n'ont pas d'élément DOM, mais sont toujours dans le groupe. v2.13.53 les ignorait dans le helper « récupérer la position de départ ». Correctif (v2.13.54) : un nouveau cssPanesCache (accès synchrone à la position+taille de chaque pane, peuplé en même temps que les autres données) + le helper paneAnchorToAbs(pane) qui calcule les bounds absolus depuis l'anchor + le viewport sans avoir besoin du DOM. Désormais un pane caché est membre à part entière du groupe même invisible.

Cas d'usage 1 — « dock du bas » à la mode mobile

Collez au bord inférieur (anchor BL) une large barre d'actions avec 8 boutons + 2 SLIDERS. Empilez JS Console + Output Console comme 2 panes au-dessus de la barre — glissez chacun sous l'autre, snap. Après le rechargement vous avez un « dock du bas » comme sur mobile. Redimensionnez la fenêtre de 1920 à 1280 → tout le groupe reste près du bord inférieur (l'anchor BL tient).

Cas d'usage 2 — mini-IDE dans un coin

CSS pane + JS pane + Output Console aimantés verticalement en haut à droite. CSS pane en haut, vous éditez en direct → vous voyez l'effet. JS pane en dessous, clic ▶ → lancer un script personnalisé. Output Console en bas, surveillez le console.log de la page et votre JUSTZIX.log. Trois « fenêtres » dans un seul flux vertical — c'est littéralement un mini-IDE.

Cas d'usage 3 — le bouton flottant comme anchor d'un groupe

Le bouton flottant est typiquement le menu lanceur en bas à droite (BR). Collez-y une barre d'actions + une Output Console — glissez-les vers le bouton flottant → snap. Maintenant les 3 sont groupés. Glissez le bouton flottant n'importe où → la barre + l'Output Console suivent. Le bouton flottant devient la « poignée d'anchor » de tout le groupe.

Pièges

• Le snap ne traverse pas les sites / domaines. Chaque domaine a sa propre disposition. Les groupes de snap sont stockés dans chrome.storage.local par élément, mais rendus seulement quand le scope correspond au domaine actuel. Passer de shop.com → google.com = une disposition différente (si visible du tout).
• Feedback visuel minimal au snap. L'élément « clique » doucement vers le bord après le relâchement de la souris — pas d'overlay « indicateur de snap » comme dans Figma. Peut dérouter les 2-3 premières fois.
• Le groupe n'a pas d'UX explicite « quitter le groupe ». Pour déconnecter, glissez l'élément à >20px du groupe. Il faut l'éloigner nettement ; les petits ajustements de position ne brisent pas le snap.
• Le redimensionnement de fenêtre déclenche un recalcul d'anchor. Après un grand changement de viewport (p. ex. plein écran F11), l'anchor peut choisir un autre coin. Bonne pratique : disposez les choses à votre taille d'espace de travail habituelle, pas en F11.
• 4 types de panes = 4 préfixes d'ID individuels. Le snap se fait par ID, pas par type. Vous pouvez avoir 3 JS panes tous aimantés à un seul CSS pane — aucun problème.

La suite

Les snap connections transforment JustZix de « quelques outils séparés » en « un dashboard configurable ». C'est la dernière pièce du puzzle pour un mini-IDE dans l'onglet : CSS pane + JS Console + JS pane + Output Console + actions (TOGGLE3, SLIDER) — disposés comme vous voulez, en un glissement.

Installez JustZix et construisez votre premier mini-dashboard — 30 secondes, zéro code de configuration.