Snap connections: grupy paneli — buduj mini-dashboard w karcie jednym przeciągnięciem

15 maja 2026 · autor JustZix Team

Cztery typy okien (CSS pane, JS pane, JS Console, Output Console) + bary akcji + floating button — to sześć różnych rzeczy, które JustZix może renderować w karcie. Każda osobna, każda mobilna, każda z własnym persistent state. Bez snap connections (od v2.13.42) musiałbyś ręcznie ustawiać każdy element po każdym F5 i każdym resize okna. Snap connections robi je jedną grupą.

Co to są snap connections?

Snap = "magnetyczne przyciąganie". Kiedy przeciągasz panel/bar/button blisko innego (próg ~20px), JustZix snap'uje go do krawędzi tamtego i obie strony zapisują się jako "grupa". Następny drag dowolnego elementu w grupie → przenosi całą grupę jako jeden.

Wszystkie 6 typów elementów żyją we wspólnym ID space:

Element	Prefix ID	Pozycjonowanie
Action bar	`ab_*`	Absolute (x, y)
Floating button	`(stała)`	Absolute (x, y)
CSS pane	`cp_*`	Anchor (x, y, anchor: TL/TR/BL/BR)
JS pane	`jp_*`	Anchor (jak wyżej)
JS Console	`jc_*`	Anchor
Output Console	`oc_*`	Anchor

ID space jest jednolite — saveGroupPositions(groupIds) sam klasyfikuje każdy ID po prefiksie i wybiera odpowiedni storage (chrome.storage.local dla action bars i panes, chrome.storage.sync dla floating btn).

Anchor positioning — dlaczego to ma znaczenie

Action bary używają absolute coordinates: x=200, y=400 od top-left. Jak resize'ujesz okno z 1920px na 1280px, action bar może wylądować poza viewport. Panes (CSS/JS/JS Console/Output Console) używają anchor positioning:

{ x: 100, y: 50, anchor: 'TR' }
//                       ^^ Top-Right corner
// Element renderowany jako: right: 100px; top: 50px;

4 możliwe anchor'y: TL (top-left), TR (top-right), BL (bottom-left), BR (bottom-right). Po każdym drag end, absToAnchorPosition oblicza ten anchor który daje najkrótszy offset — element przyciąga się do najbliższego rogu viewportu. Resize okna → element zostaje przy "swoim" rogu, nie poleci off-screen.

Pierwszy mini-dashboard: 30 sekund

Załóżmy że robisz QA toolbar dla siebie. Chcesz w prawym górnym rogu mieć:

Action bar z 3 buttonami ("Reset cart" / "Skip cookie" / "Fill demo data")
JS pane do "🔥 destrukcyjne flow"
Output Console do podglądu logów

Workflow:

Załaduj stronę. Action bar pojawia się gdzieś (default lub poprzednia pozycja).
Przeciągnij bar do prawego górnego rogu, ~20px od krawędzi. Anchor zostaje wykryty jako TR.
Przeciągnij JS pane pod bar — bliżej niż ~20px od dolnej krawędzi bara. Snap. Pane + bar = grupa.
Przeciągnij Output Console pod JS pane — kolejny snap. Trzyelementowa grupa.
F5 → wszystko renderuje się razem, w tym samym układzie, snap connections trzymają. Anchor TR → układ przyciąga się do prawego górnego rogu nawet po resize okna.

To jest twój personal QA toolbar. Działa tylko dla domeny której scope match'uje. Inne strony — inny toolbar (albo żaden).

Co dokładnie robi snap detection

Algorytm na drag-end (uproszczony):

// 1. Get current dragged element's bounds (left, top, w, h)
// 2. For each other draggable in DOM (.jz-pane-*, .jz-actions-bar, #justzix-floating-btn):
//    a. Get other's bounds
//    b. Compute distance: minimum of (top-bottom, bottom-top, left-right, right-left)
//    c. If distance < 20px → snap (set dragged to align edge-to-edge with other)
// 3. After snap, save all group positions (helper saveGroupPositions(groupIds))
// 4. Group membership = anything with start-position close to dragged element when drag started

Dystans 20px jest celowy — wystarczająco "luźny" żeby snap się stało bez precyzyjnego targetowania, ale nie tak duży żeby pomyłkowo łączyć rzeczy oddzielne. Na trackpadzie / dotykowo to działa intuicyjnie.

Drag z hidden panes — fix v2.13.54

Bug zgłoszony przez usera po v2.13.53: floating button przeciągany w grupie z hidden CSS pane → bar idzie z floating btn poprawnie, ale CSS pane (też hidden) zostaje w starym miejscu.

Root cause: hidden panes nie mają DOM elementu, ale wciąż są w grupie. v2.13.53 pomijał je w "get start position" helper'ze. Fix (v2.13.54): nowa cssPanesCache (sync access do pos+size każdego pane'a, populowana razem z innym data) + helper paneAnchorToAbs(pane) który liczy absolute bounds z anchor + viewport bez potrzeby DOM. Teraz hidden pane jest pełnoprawnym członkiem grupy nawet kiedy nie jest widoczny.

Use case 1 — Mobile-style "bottom dock"

Przyklej do dolnej krawędzi (anchor BL) szeroki action bar z 8 buttonami + 2 SLIDER'ami. Ułóż JS Console + Output Console jako 2 panes nad barem — drag każdego pod siebie, snap. Po reload masz "bottom dock" jak na mobilkach. Resize okna z 1920 na 1280 → cała grupa zostaje przy dolnej krawędzi (anchor BL trzyma).

Use case 2 — Mini IDE w narożniku

CSS pane + JS pane + Output Console snap'nięte pionowo w prawym górnym rogu. CSS pane na górze, edytujesz live → widzisz efekt. JS pane pod nim, klikasz ▶ → odpalasz custom script. Output Console na dole, monitorujesz console.log'i strony i swoje JUSTZIX.log. Trzy "okna" w jednym pionowym streamie — to literalnie mini-IDE.

Use case 3 — Floating button jako anchor dla grupy

Floating button to typically rozjazdowy "menu" w prawym dolnym (BR). Przyklej do niego action bar + Output Console — drag nimi do floating btn → snap. Teraz wszystkie 3 są zgrupowane. Przeciągnij floating btn gdziekolwiek → bar + Output Console idą za nim. Floating btn to jakby "anchor handle" dla całej grupy.

Pułapki

Snap nie krzyżuje stron / domen. Każda domena ma swój układ. Snap groupy są zapamiętywane w chrome.storage.local per-element, ale renderowane tylko gdy scope match'uje aktualną domenę. Przejście shop.com → google.com = inny układ (jeśli w ogóle widoczny).
Visual feedback przy snap minimalny. Element delikatnie "klika" się do krawędzi po release myszy — brak overlay "snap indicator" jak w Figma. Może być confusing pierwsze 2-3 razy.
Grupa nie ma explicit "leave group" UX. Żeby rozłączyć, przeciągnij element >20px od grupy. Trzeba odsunąć go wyraźnie, mała korekta pozycji nie zrywa snap.
Resize okna trigger'uje anchor recalc. Po dużej zmianie viewport (np. F11 fullscreen) anchor może wybrać inny róg. Best practice: ustaw układ w typowym workspace size, nie w F11.
4 typy paneli = 4 indywidualne ID prefix. Snap robi się per ID, nie per typ. Możesz mieć 3 JS panes wszystkie snap'nięte do jednego CSS pane'a — żaden problem.

Co dalej

Snap connections zmieniają JustZix z "kilka oddzielnych narzędzi" w "konfigurowalny dashboard". To last piece układanki dla in-tab mini-IDE: CSS pane + JS Console + JS pane + Output Console + akcje (TOGGLE3, SLIDER) — wszystko ułożone jak chcesz, jednym przeciągnięciem.

Zainstaluj JustZix i zbuduj swój pierwszy mini-dashboard — 30 sekund, zero kodu konfiguracyjnego.

Oceń ten wpis

Brak ocen — oceń jako pierwszy.