← Alle Beiträge

Fenster im Frontend

Snap connections: Panel-Gruppen — baue ein Mini-Dashboard im Tab mit einem Zug

15 Mai 2026 · von JustZix Team

Vier Fenstertypen (CSS pane, JS pane, JS Console, Output Console) + Aktionsleisten + Floating-Button — das sind sechs verschiedene Dinge, die JustZix in einem Tab rendern kann. Jedes einzeln, jedes mobil, jedes mit eigenem persistentem Zustand. Ohne Snap connections (seit v2.13.42) müsstest du jedes Element nach jedem F5 und jeder Fenstergrößenänderung manuell positionieren. Snap connections machen sie zu einer Gruppe.

Was sind Snap connections?

Snap = „magnetische Anziehung". Wenn du ein Panel/eine Leiste/einen Button nahe an ein anderes ziehst (Schwelle ~20px), rastet JustZix es Kante an Kante an das andere an, und beide Seiten merken sich als „Gruppe". Der nächste Zug eines beliebigen Elements der Gruppe → bewegt die ganze Gruppe als Einheit.

Alle 6 Elementtypen leben in einem gemeinsamen ID-Raum:

Der ID-Raum ist einheitlich — saveGroupPositions(groupIds) klassifiziert jede ID anhand des Präfixes und wählt den passenden Speicher (chrome.storage.local für Aktionsleisten und Panes, chrome.storage.sync für den Floating-Button).

Anchor-Positionierung — warum sie wichtig ist

Aktionsleisten nutzen absolute Koordinaten: x=200, y=400 von oben links. Verkleinerst du das Fenster von 1920px auf 1280px, kann die Aktionsleiste außerhalb des Viewports landen. Panes (CSS/JS/JS Console/Output Console) nutzen Anchor-Positionierung:

{ x: 100, y: 50, anchor: 'TR' }
//                       ^^ Ecke oben rechts
// Element gerendert als: right: 100px; top: 50px;

4 mögliche Anchor: TL (oben links), TR (oben rechts), BL (unten links), BR (unten rechts). Nach jedem Drag-Ende wählt absToAnchorPosition den Anchor, der den kürzesten Offset ergibt — das Element zieht sich zur nächsten Viewport-Ecke. Fenstergrößenänderung → das Element bleibt bei „seiner" Ecke und fliegt nicht vom Bildschirm.

Erstes Mini-Dashboard: 30 Sekunden

Angenommen, du baust dir eine QA-Toolbar. Du willst in der oberen rechten Ecke:

1. Eine Aktionsleiste mit 3 Buttons („Reset cart" / „Skip cookie" / „Fill demo data")
2. Ein JS pane für „🔥 destruktiver Flow"
3. Eine Output Console zur Log-Überwachung

Workflow:

1. Seite laden. Die Aktionsleiste erscheint irgendwo (Standard oder letzte Position).
2. Ziehe die Leiste in die obere rechte Ecke, ~20px von den Rändern. Anchor wird als TR erkannt.
3. Ziehe das JS pane unter die Leiste — innerhalb von ~20px der unteren Kante der Leiste. Snap. Pane + Leiste = Gruppe.
4. Ziehe die Output Console unter das JS pane — ein weiterer Snap. Dreielementige Gruppe.
5. F5 → alles rendert zusammen, im selben Layout; Snap connections halten. Anchor TR → das Layout klebt an der oberen rechten Ecke, auch nach Fenstergrößenänderung.

Das ist deine persönliche QA-Toolbar. Sie funktioniert nur für die Domain, deren Scope passt. Andere Seiten — andere Toolbar (oder keine).

Was die Snap-Erkennung tatsächlich macht

Algorithmus bei Drag-Ende (vereinfacht):

// 1. Bounds des gezogenen Elements ermitteln (left, top, w, h)
// 2. Für jedes andere ziehbare Element im DOM (.jz-pane-*, .jz-actions-bar, #justzix-floating-btn):
//    a. Bounds des anderen ermitteln
//    b. Distanz berechnen: Minimum von (top-bottom, bottom-top, left-right, right-left)
//    c. Wenn Distanz < 20px → snap (gezogenes Element Kante an Kante am anderen ausrichten)
// 3. Nach dem Snap alle Gruppenpositionen speichern (Helper saveGroupPositions(groupIds))
// 4. Gruppenzugehörigkeit = alles mit Startposition nahe am gezogenen Element zu Drag-Beginn

Die 20px-Schwelle ist Absicht — locker genug, dass der Snap ohne präzises Zielen erfolgt, aber nicht so groß, dass du versehentlich Dinge verbindest, die nicht zusammengehören. Auf Trackpad / Touch fühlt es sich intuitiv an.

Ziehen mit versteckten Panes — v2.13.54-Fix

Bug, gemeldet von einem User nach v2.13.53: der Floating-Button, in einer Gruppe mit einem versteckten CSS pane gezogen → die Leiste bewegt sich korrekt mit dem Floating-Button, aber das CSS pane (ebenfalls versteckt) bleibt am alten Ort.

Ursache: Versteckte Panes haben kein DOM-Element, sind aber weiterhin in der Gruppe. v2.13.53 übersprang sie im „Startposition ermitteln"-Helper. Fix (v2.13.54): ein neuer cssPanesCache (synchroner Zugriff auf Position+Größe jedes Panes, befüllt zusammen mit anderen Daten) + Helper paneAnchorToAbs(pane), der absolute Bounds aus Anchor + Viewport berechnet, ohne das DOM zu brauchen. Jetzt ist ein verstecktes Pane vollwertiges Gruppenmitglied, auch wenn es nicht sichtbar ist.

Anwendungsfall 1 — „Bottom Dock" im Mobile-Stil

Klebe an die untere Kante (Anchor BL) eine breite Aktionsleiste mit 8 Buttons + 2 SLIDERN. Stapele JS Console + Output Console als 2 Panes über der Leiste — ziehe jedes unter das andere, Snap. Nach dem Reload hast du ein „Bottom Dock" wie auf dem Handy. Verkleinere das Fenster von 1920 auf 1280 → die ganze Gruppe bleibt an der unteren Kante (Anchor BL hält).

Anwendungsfall 2 — Mini-IDE in einer Ecke

CSS pane + JS pane + Output Console vertikal oben rechts eingerastet. CSS pane oben, du editierst live → siehst den Effekt. JS pane darunter, klick ▶ → ein eigenes Skript ausführen. Output Console darunter, überwache das console.log der Seite und dein JUSTZIX.log. Drei „Fenster" in einem einzigen vertikalen Stream — das ist buchstäblich ein Mini-IDE.

Anwendungsfall 3 — Floating-Button als Anchor für eine Gruppe

Der Floating-Button ist typischerweise das Launcher-Menü unten rechts (BR). Klebe eine Aktionsleiste + Output Console daran — ziehe sie an den Floating-Button → Snap. Jetzt sind alle 3 gruppiert. Ziehe den Floating-Button irgendwohin → Leiste + Output Console folgen. Der Floating-Button wird zum „Anchor-Griff" für die ganze Gruppe.

Fallstricke

• Snap überschreitet keine Seiten / Domains. Jede Domain hat ihr eigenes Layout. Snap-Gruppen werden in chrome.storage.local pro Element gespeichert, aber nur gerendert, wenn der Scope zur aktuellen Domain passt. Von shop.com → google.com = ein anderes Layout (falls überhaupt sichtbar).
• Minimales visuelles Feedback beim Snap. Das Element „klickt" sich nach dem Loslassen der Maus sanft an die Kante — kein Overlay-„Snap-Indikator" wie in Figma. Kann die ersten 2-3 Mal verwirren.
• Die Gruppe hat keine explizite „Gruppe verlassen"-UX. Zum Trennen ziehe das Element >20px von der Gruppe weg. Du musst es deutlich wegbewegen; kleine Positionskorrekturen brechen den Snap nicht.
• Fenstergrößenänderung löst Anchor-Neuberechnung aus. Nach einer großen Viewport-Änderung (z. B. F11-Vollbild) kann der Anchor eine andere Ecke wählen. Best Practice: Layout in deiner typischen Arbeitsgröße anlegen, nicht in F11.
• 4 Pane-Typen = 4 individuelle ID-Präfixe. Snap erfolgt pro ID, nicht pro Typ. Du kannst 3 JS panes alle an ein CSS pane eingerastet haben — kein Problem.

Wie es weitergeht

Snap connections verwandeln JustZix von „ein paar separaten Werkzeugen" in „ein konfigurierbares Dashboard". Es ist das letzte Puzzleteil für ein In-Tab-Mini-IDE: CSS pane + JS Console + JS pane + Output Console + Aktionen (TOGGLE3, SLIDER) — angeordnet, wie du willst, mit einem Zug.

Installiere JustZix und baue dein erstes Mini-Dashboard — 30 Sekunden, null Konfigurationscode.