← Todos los artículos

Ventanas en el frontend

Snap connections: grupos de paneles — construye un mini-dashboard en la pestaña con un arrastre

15 mayo 2026 · por JustZix Team

Cuatro tipos de ventanas (CSS pane, JS pane, JS Console, Output Console) + barras de acciones + botón flotante — son seis cosas distintas que JustZix puede renderizar en una pestaña. Cada una separada, cada una móvil, cada una con su propio estado persistente. Sin las snap connections (desde v2.13.42) tendrías que posicionar cada elemento a mano después de cada F5 y cada redimensionado de la ventana. Las snap connections las convierten en un único grupo.

¿Qué son las snap connections?

Snap = «atracción magnética». Cuando arrastras un panel/una barra/un botón cerca de otro (umbral ~20px), JustZix lo engancha borde con borde contra el otro y ambos lados se registran como un «grupo». El arrastre siguiente de cualquier elemento del grupo → mueve todo el grupo como uno.

Los 6 tipos de elementos viven en un espacio de IDs compartido:

El espacio de IDs es uniforme — saveGroupPositions(groupIds) clasifica cada ID por prefijo y elige el storage apropiado (chrome.storage.local para las barras de acciones y los panes, chrome.storage.sync para el botón flotante).

Posicionamiento por anchor — por qué importa

Las barras de acciones usan coordenadas absolutas: x=200, y=400 desde la esquina superior izquierda. Redimensiona la ventana de 1920px a 1280px y la barra de acciones puede quedar fuera del viewport. Los panes (CSS/JS/JS Console/Output Console) usan el posicionamiento por anchor:

{ x: 100, y: 50, anchor: 'TR' }
//                       ^^ Esquina superior derecha
// Elemento renderizado como: right: 100px; top: 50px;

4 anchors posibles: TL (arriba a la izquierda), TR (arriba a la derecha), BL (abajo a la izquierda), BR (abajo a la derecha). Tras cada fin de arrastre, absToAnchorPosition elige el anchor que da el offset más corto — el elemento se engancha a la esquina del viewport más cercana. Redimensionado de la ventana → el elemento se queda cerca de «su» esquina, no vuela fuera de pantalla.

Primer mini-dashboard: 30 segundos

Digamos que estás construyendo una toolbar QA para ti mismo. Quieres en la esquina superior derecha:

1. Una barra de acciones con 3 botones («Reset cart» / «Skip cookie» / «Fill demo data»)
2. Un JS pane para «🔥 flujo destructivo»
3. Una Output Console para monitorizar los logs

Flujo:

1. Carga la página. La barra de acciones aparece en algún sitio (default o última posición).
2. Arrastra la barra a la esquina superior derecha, ~20px de los bordes. El anchor se detecta como TR.
3. Arrastra el JS pane bajo la barra — dentro de ~20px del borde inferior de la barra. Snap. Pane + barra = grupo.
4. Arrastra la Output Console bajo el JS pane — otro snap. Grupo de tres elementos.
5. F5 → todo se renderiza junto, en el mismo layout; las snap connections aguantan. Anchor TR → el layout se queda pegado a la esquina superior derecha incluso tras el redimensionado de la ventana.

Esa es tu toolbar QA personal. Funciona solo para el dominio cuyo scope coincide. Otros sitios — otra toolbar (o ninguna).

Qué hace exactamente la detección del snap

Algoritmo al fin del arrastre (simplificado):

// 1. Obtener los bounds del elemento arrastrado (left, top, w, h)
// 2. Para cada otro elemento arrastrable del DOM (.jz-pane-*, .jz-actions-bar, #justzix-floating-btn):
//    a. Obtener los bounds del otro
//    b. Calcular la distancia: mínimo de (top-bottom, bottom-top, left-right, right-left)
//    c. Si distancia < 20px → snap (alinear el elemento arrastrado borde con borde con el otro)
// 3. Tras el snap, guardar todas las posiciones del grupo (helper saveGroupPositions(groupIds))
// 4. Pertenencia al grupo = todo lo que tiene posición de partida cercana al elemento arrastrado al inicio del arrastre

El umbral de 20px es a propósito — lo bastante «ancho» para que el snap ocurra sin apuntado preciso, pero no tan grande que conecte por error cosas separadas. En trackpad / touch resulta intuitivo.

Arrastre con panes ocultos — fix v2.13.54

Bug reportado por un usuario tras v2.13.53: el botón flotante arrastrado a un grupo con un CSS pane oculto → la barra sigue correctamente al botón flotante, pero el CSS pane (también oculto) se queda en el sitio antiguo.

Causa raíz: los panes ocultos no tienen un elemento DOM, pero igualmente están en el grupo. v2.13.53 los saltaba en el helper «obtener la posición de partida». Fix (v2.13.54): un nuevo cssPanesCache (acceso síncrono a posición+dimensión de cada pane, poblado junto a los demás datos) + el helper paneAnchorToAbs(pane) que calcula los bounds absolutos a partir de anchor + viewport sin necesidad del DOM. Ahora un pane oculto es miembro de pleno derecho del grupo incluso cuando no es visible.

Caso de uso 1 — «dock abajo» en estilo móvil

Pega al borde inferior (anchor BL) una ancha barra de acciones con 8 botones + 2 SLIDER. Apila JS Console + Output Console como 2 panes encima de la barra — arrastra cada uno bajo el otro, snap. Tras la recarga tienes un «dock abajo» como en el móvil. Redimensiona la ventana de 1920 a 1280 → todo el grupo se queda cerca del borde inferior (el anchor BL aguanta).

Caso de uso 2 — mini-IDE en una esquina

CSS pane + JS pane + Output Console enganchados verticalmente arriba a la derecha. CSS pane en lo alto, editas en vivo → ves el efecto. JS pane debajo, clic ▶ → lanzas un script personalizado. Output Console al fondo, monitorizas el console.log de la página y tu JUSTZIX.log. Tres «ventanas» en un único stream vertical — es literalmente un mini-IDE.

Caso de uso 3 — el botón flotante como anchor de un grupo

El botón flotante es típicamente el menú launcher abajo a la derecha (BR). Pégale una barra de acciones + una Output Console — arrástralas hacia el botón flotante → snap. Ahora los 3 están agrupados. Arrastra el botón flotante a cualquier sitio → la barra + la Output Console lo siguen. El botón flotante se convierte en la «manija de anchor» de todo el grupo.

Trampas

• El snap no atraviesa sitios / dominios. Cada dominio tiene su propio layout. Los grupos de snap se guardan en chrome.storage.local por elemento, pero se renderizan solo cuando el scope coincide con el dominio actual. Pasar de shop.com → google.com = un layout distinto (si visible en absoluto).
• Feedback visual mínimo al snap. El elemento «encaja» suavemente hacia el borde tras soltar el ratón — ningún overlay «indicador de snap» como en Figma. Puede confundir las primeras 2-3 veces.
• El grupo no tiene una UX explícita «abandona el grupo». Para desconectar, arrastra el elemento a >20px del grupo. Tienes que alejarlo claramente; pequeñas correcciones de posición no rompen el snap.
• El redimensionado de la ventana activa el recálculo del anchor. Tras un gran cambio de viewport (p. ej. pantalla completa F11) el anchor puede elegir otra esquina. Best practice: dispón las cosas en tu tamaño de workspace habitual, no en F11.
• 4 tipos de pane = 4 prefijos de ID individuales. El snap se hace por ID, no por tipo. Puedes tener 3 JS panes todos enganchados a un solo CSS pane — sin problema.

Qué hacer después

Las snap connections transforman JustZix de «algunas herramientas separadas» en «un dashboard configurable». Es la última pieza del puzle para un mini-IDE en la pestaña: CSS pane + JS Console + JS pane + Output Console + acciones (TOGGLE3, SLIDER) — dispuestos como quieras, con un arrastre.

Instala JustZix y construye tu primer mini-dashboard — 30 segundos, cero código de configuración.