← Tutti gli articoli

Finestre nel frontend

Snap connections: gruppi di pannelli — costruisci una mini-dashboard nella scheda con un trascinamento

15 maggio 2026 · di JustZix Team

Quattro tipi di finestre (CSS pane, JS pane, JS Console, Output Console) + barre delle azioni + pulsante flottante — sono sei cose diverse che JustZix può renderizzare in una scheda. Ognuna separata, ognuna mobile, ognuna con il proprio stato persistente. Senza le snap connections (da v2.13.42) dovresti posizionare ogni elemento a mano dopo ogni F5 e ogni ridimensionamento della finestra. Le snap connections le rendono un unico gruppo.

Cosa sono le snap connections?

Snap = «attrazione magnetica». Quando trascini un pannello/una barra/un pulsante vicino a un altro (soglia ~20px), JustZix lo aggancia bordo a bordo contro l'altro ed entrambi i lati si registrano come un «gruppo». Il trascinamento successivo di qualsiasi elemento del gruppo → muove l'intero gruppo come uno.

Tutti e 6 i tipi di elementi vivono in uno spazio di ID condiviso:

Lo spazio di ID è uniforme — saveGroupPositions(groupIds) classifica ogni ID per prefisso e sceglie lo storage appropriato (chrome.storage.local per le barre delle azioni e i pane, chrome.storage.sync per il pulsante flottante).

Posizionamento per anchor — perché conta

Le barre delle azioni usano coordinate assolute: x=200, y=400 dall'angolo in alto a sinistra. Ridimensiona la finestra da 1920px a 1280px e la barra delle azioni può finire fuori dal viewport. I pane (CSS/JS/JS Console/Output Console) usano il posizionamento per anchor:

{ x: 100, y: 50, anchor: 'TR' }
//                       ^^ Angolo in alto a destra
// Elemento renderizzato come: right: 100px; top: 50px;

4 anchor possibili: TL (in alto a sinistra), TR (in alto a destra), BL (in basso a sinistra), BR (in basso a destra). Dopo ogni fine trascinamento, absToAnchorPosition sceglie l'anchor che dà l'offset più corto — l'elemento si aggancia all'angolo del viewport più vicino. Ridimensionamento della finestra → l'elemento resta vicino al «suo» angolo, non vola fuori schermo.

Prima mini-dashboard: 30 secondi

Diciamo che stai costruendo una toolbar QA per te stesso. Vuoi nell'angolo in alto a destra:

1. Una barra delle azioni con 3 pulsanti («Reset cart» / «Skip cookie» / «Fill demo data»)
2. Un JS pane per «🔥 flusso distruttivo»
3. Una Output Console per monitorare i log

Workflow:

1. Carica la pagina. La barra delle azioni appare da qualche parte (default o ultima posizione).
2. Trascina la barra nell'angolo in alto a destra, ~20px dai bordi. L'anchor viene rilevato come TR.
3. Trascina il JS pane sotto la barra — entro ~20px dal bordo inferiore della barra. Snap. Pane + barra = gruppo.
4. Trascina la Output Console sotto il JS pane — un altro snap. Gruppo a tre elementi.
5. F5 → tutto si renderizza insieme, nello stesso layout; le snap connections tengono. Anchor TR → il layout resta incollato all'angolo in alto a destra anche dopo il ridimensionamento della finestra.

Questa è la tua toolbar QA personale. Funziona solo per il dominio il cui scope corrisponde. Altri siti — altra toolbar (o nessuna).

Cosa fa esattamente il rilevamento dello snap

Algoritmo a fine trascinamento (semplificato):

// 1. Ottenere i bounds dell'elemento trascinato (left, top, w, h)
// 2. Per ogni altro elemento trascinabile nel DOM (.jz-pane-*, .jz-actions-bar, #justzix-floating-btn):
//    a. Ottenere i bounds dell'altro
//    b. Calcolare la distanza: minimo di (top-bottom, bottom-top, left-right, right-left)
//    c. Se distanza < 20px → snap (allineare l'elemento trascinato bordo a bordo con l'altro)
// 3. Dopo lo snap, salvare tutte le posizioni del gruppo (helper saveGroupPositions(groupIds))
// 4. Appartenenza al gruppo = tutto ciò che ha posizione di partenza vicina all'elemento trascinato all'inizio del trascinamento

La soglia di 20px è voluta — abbastanza «larga» perché lo snap avvenga senza puntamento preciso, ma non così grande da collegare per errore cose separate. Su trackpad / touch risulta intuitivo.

Trascinamento con pane nascosti — fix v2.13.54

Bug segnalato da un utente dopo v2.13.53: il pulsante flottante trascinato in un gruppo con un CSS pane nascosto → la barra segue correttamente il pulsante flottante, ma il CSS pane (anch'esso nascosto) resta nel vecchio posto.

Causa radice: i pane nascosti non hanno un elemento DOM, ma sono comunque nel gruppo. v2.13.53 li saltava nell'helper «ottenere la posizione di partenza». Fix (v2.13.54): un nuovo cssPanesCache (accesso sincrono a posizione+dimensione di ogni pane, popolato insieme agli altri dati) + l'helper paneAnchorToAbs(pane) che calcola i bounds assoluti da anchor + viewport senza bisogno del DOM. Ora un pane nascosto è membro a pieno titolo del gruppo anche quando non è visibile.

Caso d'uso 1 — «dock in basso» in stile mobile

Incolla al bordo inferiore (anchor BL) una larga barra delle azioni con 8 pulsanti + 2 SLIDER. Impila JS Console + Output Console come 2 pane sopra la barra — trascina ognuno sotto l'altro, snap. Dopo il ricaricamento hai un «dock in basso» come sul mobile. Ridimensiona la finestra da 1920 a 1280 → l'intero gruppo resta vicino al bordo inferiore (l'anchor BL tiene).

Caso d'uso 2 — mini-IDE in un angolo

CSS pane + JS pane + Output Console agganciati verticalmente in alto a destra. CSS pane in cima, editi dal vivo → vedi l'effetto. JS pane sotto, clic ▶ → lanci uno script personalizzato. Output Console in fondo, monitori il console.log della pagina e il tuo JUSTZIX.log. Tre «finestre» in un unico stream verticale — è letteralmente una mini-IDE.

Caso d'uso 3 — il pulsante flottante come anchor per un gruppo

Il pulsante flottante è tipicamente il menu launcher in basso a destra (BR). Incollagli una barra delle azioni + una Output Console — trascinale verso il pulsante flottante → snap. Ora tutti e 3 sono raggruppati. Trascina il pulsante flottante ovunque → la barra + la Output Console lo seguono. Il pulsante flottante diventa la «maniglia di anchor» per l'intero gruppo.

Trappole

• Lo snap non attraversa siti / domini. Ogni dominio ha il proprio layout. I gruppi di snap sono salvati in chrome.storage.local per elemento, ma renderizzati solo quando lo scope corrisponde al dominio attuale. Passare da shop.com → google.com = un layout diverso (se visibile del tutto).
• Feedback visivo minimo allo snap. L'elemento «scatta» dolcemente verso il bordo dopo il rilascio del mouse — nessun overlay «indicatore di snap» come in Figma. Può confondere le prime 2-3 volte.
• Il gruppo non ha una UX esplicita «lascia il gruppo». Per disconnettere, trascina l'elemento a >20px dal gruppo. Devi allontanarlo nettamente; piccole correzioni di posizione non rompono lo snap.
• Il ridimensionamento della finestra attiva il ricalcolo dell'anchor. Dopo un grande cambio di viewport (es. schermo intero F11) l'anchor può scegliere un altro angolo. Best practice: disponi le cose nella tua dimensione di workspace abituale, non in F11.
• 4 tipi di pane = 4 prefissi di ID individuali. Lo snap si fa per ID, non per tipo. Puoi avere 3 JS pane tutti agganciati a un solo CSS pane — nessun problema.

Cosa fare dopo

Le snap connections trasformano JustZix da «alcuni strumenti separati» in «una dashboard configurabile». È l'ultimo pezzo del puzzle per una mini-IDE nella scheda: CSS pane + JS Console + JS pane + Output Console + azioni (TOGGLE3, SLIDER) — disposti come vuoi, con un trascinamento.

Installa JustZix e costruisci la tua prima mini-dashboard — 30 secondi, zero codice di configurazione.