Przeciągnij i upuść widżety i ustawienia wstępne

1) Koncepcja i scenariusze

Widżety przeciągnij i upuść są interaktywnymi blokami (karty wykresowe, tabele, filtry, przyciski akcji), które użytkownik swobodnie umieszcza na płótnie w odniesieniu do siatki. Ustawienia wstępne - zapisane układy i style (układ + motyw + parametry), które można szybko zastosować, udostępnić i zmienić.

• Montaż deski rozdzielczej z gotowych bloków (karty KPI, wykresy, filtry).
• Szybka zmiana układu poprzez ustawienia wstępne „Compact”, „Analytics”, „Presentation”.
• Współedytowanie: produkt umieszcza widżety, analityk ustawia źródła.
• Publikacja wyłącznie do odczytu dla zainteresowanych stron.

2) Zasady architektoniczne

1. Siatka pierwsza: pozycjonowanie w kolumnach logicznych/wierszach (12/24), pikseli - pochodnych.
2. Snapping & Guides: prowadnice magnetyczne, trzymanie się siatki i sąsiadów, wyrównywanie.
3. Świadomość ograniczenia: ograniczniki rozmiaru/wymiaru, min/max, aspekt blokady.
4. Bezpieczne domyślnie: autosave ciągły, publikowanie transakcji, cofanie/redo.
5. A11y-first: DnD z klawiatury i zmiany głosowe.
6. Czas rzeczywisty gotowy: CRDT/OT dla sesji multiplayer.
7. Tematyczny: żetony projektowe, ustawienia tematyczne, tryby lekkie/ciemne/kontrastowe.
8. Przenośny: eksport/import JSON/YAML; Wersioning obwodu.

3) Model danych (uproszczony)

json
{
"id": "layout_01",
"name": "Analytics - Compact,"
"version": "2. 1. 0",
"grid": { "cols": 12, "rowHeight": 8, "gutter": 8, "margin": 16 },
"theme": { "preset": "light-pro", "tokens": { "radius": 12, "elevation": "soft" } },
"widgets": [
{
"id": "w_kpi_1",
"type": "kpi",
"title": "GGR",
"pos": { "x": 0, "y": 0, "w": 3, "h": 4, "z": 1 },
"constraints": { "minW": 2, "minH": 3, "lockAspect": false },
"props": { "format": "currency", "source": "ggr_daily" }
},
{
"id": "w_chart_1",
"type": "lineChart",
"title": "Deposits Trend",
"pos": { "x": 3, "y": 0, "w": 6, "h": 8, "z": 1 },
"props": { "source": "deposits", "legend": true }
},
{
"id": "w_table_1",
"type": "table",
"title": "Top Segments",
"pos": { "x": 9, "y": 0, "w": 3, "h": 12, "z": 2 },
"props": { "source": "segments_top", "pageSize": 12 }
}
],
"meta": { "createdBy": "dima", "updatedAt": "2025-11-03T17:55:00Z" }
}

4) Siatka, zatrzaski i prowadnice

Siatka: 12 głośników na pulpit, 6 na tablet, 4 na telefony; Wysokość jest taka sama dla stabilnego pionowego skoku.
Snapping: przystawka do krawędzi/centrów; „magnesy” przy 4/8 px; mądry przewodnik, gdy zbliża się do sąsiadów.
Automatyczny przepływ: automatyczny transfer poniżej w przypadku kolizji; algorytm „spadające bloki”.
Responsiveness: breakpoints → alternatywne 'pos' dla każdego breakpoint.

5) Wydarzenia i stany DnD

Состий: 'dragStart', 'drag', 'dragOver', 'drop', 'resizeStart', 'resize', 'resizeEnd', 'select', 'group', 'ungroup', 'reorder', 'undo', 'redo'.

• Duch/Podgląd-półprzezroczysta ścieżka podczas przeciągania.
• Pośrednicy: dozwolone strefy (zielone), zabronione (czerwone).
• Mapa zderzenia - szybkie obliczanie zajętych komórek (drzewo bitset/interval).

6) Podnieść, wyrównać, z-index

Resetuj uchwyty w narożnikach + przytrzymaj 'Shift', aby utrzymać proporcje.
Wyrównanie grupy: „lewy/prawy”, „środek”, „równomierny rozkład”.
Poziomy nakładki: 'z' z ograniczeniem zasięgu, przyciski przednie/tylne.

7) Grupy, pojemniki i gniazdowanie

Grupy: wielokrotny wybór, połączony przeciągnij i upuść, wyrównanie grupy.
Pojemnik widget: zakładki, akordeony, karuzele - wiedzą, jak akceptować widżety dla dzieci.
Przystanki kontenerowe: siatka zewnętrznawewnętrzna (pozostałe kolumny).

8) Ustawienia wstępne (szablony) i wersje

Rodzaje ustawień wstępnych: układ, motyw, zestaw widżetów, układ + dane.
Wersioning: programy i migracje „semver” (mapa pola, domyślne).
Podgląd i zastosowanie-podgląd przed zastosowaniem.
Zakresy ustawień: osobiste, zespołowe, globalne; prawa do odczytu/edycji.
Eksport/import: JSON/YAML, podpis kontrolny, kontrola zgodności wersji.

9) Dostępność (A11y) i klawiatura

• „Enter/Space” - uruchom transfer; strzałki - przejście do rozstawu siatki; „Przesunięcie” + strzałki - przyspieszone rozstawienie; 'Esc' - anuluj.
• „Ctrl/Cmd + G” - grupa; 'Ctrl/Cmd + Shift + G' - bez grupy.
• 'Alt' - tymczasowo wyłączyć pękanie do siatki.
• Głos działający SR: "Przeniesiony do (x, y). Trzymanie się: na. Konflikt: Tak/Nie"
• Pierścienie ostrości, duże uchwyty recydywy, strefy zrzutu z opisem.

10) Wzory dotykowe i mobilne

Długa prasa (300-500 ms) na start DnD.
Zwiększone cele (minimum 40-48 px).
Paski narzędzi adaptacyjnych (dok dolny).
Tryb edycji: blokada przewijania płótna, automatyczne przewijanie pionowe podczas przenoszenia na krawędź.

11) Działania z widżetów (działające widżety)

Wbudowana CTA (przycisk), menu kontekstowe, przeciągnij klon (duplikacja Alta).
„Szybkie ustawienia wstępne” dla widżetu (gęstość, legenda, schemat kolorów).
Stany: załadunek/pusty/błąd, bezpieczne stubs („dane są opóźnione”).

12) Współpraca i wydawnictwo

Czas rzeczywisty: CRDT (na przykład Yjs) lub OT (Quill approach) - kursory uczestnika, blokady grupy.
Prawa: 'Właściciel', 'Edytor', 'Viewer'; Publikacja niezmiennego migawki.
Strumienie: projekt → przegląd → publikacja; porównanie zmian (układ różnic).

13) Cofnąć/przerobić i autosave

Bus dowodzenia: każda operacja jest poleceniem z 'do/undo'.
Zaloguj się na kliencie (w pamięci + okresowe trwają), limit długości.
Auto-save: co N sekund/by 'idle', ze wskaźnikiem „Saved”.

14) Temizacja i żetony projektowe

json
{
"themeId": "light-pro",
"tokens": {
"fontScale": { "h1": 24, "h2": 18, "body": 14 },
"radius": 12,
"elevation": "soft",
"palette": { "primary": "#3366FF", "critical": "#E53935" }
}
}

Przełączanie tematów bez ponownego wyliczania układu (tylko żetony wizualne).
Kontrast AA/AAA, tryb High-Contrast, ciemny motyw z prawidłowym szarości.

15) Wydajność

Rendering według warstw (płótno/webgl dla skomplikowanych wykresów, DOM dla chromu).
Wirtualizacja listy/tabeli, przepustnica "przeciągnij' (16 ms)," AnimationFrame ".
Diff render: przerobić tylko zmodyfikowane widżety.
Cache licząc kolizje i wytyczne.

16) Bezpieczeństwo treści i ochrona

Sunbox dla widżetów HTML (iframe, CSP, 'piaskownica' flagi).
Ograniczenie spadku: typy białych list (pliki, linki, ustawienia wstępne JSON); sprawdzanie wielkości i zawartości.
Prawa do ustawień wstępnych (RBAC/ABAC), kontroli eksportu/importu.

17) API Widget (umowa)

ts interface Widget {
id: string;
type: string;
pos: { x:number; y:number; w:number; h:number; z:number };
constraints?: { minW?:number; minH?:number; maxW?:number; maxH?:number; lockAspect?:boolean };
props: Record<string, unknown>;
validate? (props): { ok: boolean; errors?: string[] };
onDrop? (dataTransfer): DropResult ;//support for external drop onAction? (actionId: string, payload?: any): void;
}

Zdarzenia cyklu życia to 'montaż', 'rozmiar', 'vis Change'.
Walidacja rekwizytów przed publikacją.

18) Przywóz/wywóz i migracja

Eksport: „siatka”, „widżety”, „motyw”, „meta”.
Import: sprawdzanie wersji schematu, automatyczne migracje (mapa pola/domyślne), raport.
Ustawienie wstępne pliku blokady z hashem w celu zapewnienia integralności.

19) Hotkeys (zalecane)

Nawigacja: '← i' - ruch; 'Shift' + strzałki - szybki krok.
Przypomnij: 'Alt' + strzałki.
Operacje: "Ctrl/Cmd + D' - duplikat; „Ctrl/Cmd + G” - grupa; 'Ctrl/Cmd + Shift + G' - bez grupy.
Poziomy: '['/']' - back/forward na z-index.
Undo/Redo: 'Ctrl/Cmd + Z '/' Ctrl/Cmd + Shift + Z' (ила 'Y').
Ustawienia wstępne: 'Ctrl/Cmd + 1.. 9 '- szybko zastosuj zapisane.

20) wzory UX

Szybkie przewodniki przy pierwszym uruchomieniu (mikro-pokład na 3-5 kroków).
Tryb siatki: przełączanie „show/hide grid”.
Wskazówki dotyczące zderzeń („niedostępne: minimalna szerokość widżetu = 3”).
Historia układu: Powraca do poprzedniej wersji.

21) Plan badania

Jednostka: obliczanie kolizji, pękanie, walidator ograniczeń.
Integracja: mysz DnD/dotknij/klawiatura; ugrupowania; kontenery.
E2E: montaż deski rozdzielczej od podstaw, zastosowanie ustawienia wstępnego, wydawnictwo, eksport/import.
Chaos: opóźnienia, utrata połączenia (czas rzeczywisty), konflikt praw.
A11y: skrypty klawiatury, działający głos SR, kontrast.

22) Lista kontrolna wdrażania

• Skonfigurowane punkty przełomowe/siatki i pęknięcia
• Przegląd/grupy/prace dostosowawcze i przetestowane
• Włączone klawiatury DnD i ScreenTips
• Autosave, undo/redo, historia układu
• Ustawienia wstępne: wersje, prawa, eksport/import
• Motywy i żetony projektowe, tryb wysokiego kontrastu
• Współpraca w czasie rzeczywistym i rozwiązywanie konfliktów
• Ograniczenie spadku, walidacja pliku, piaskownica HTML
• Wskaźniki: adopcja, czas do pierwszego umieszczenia, błędy kolizji

23) Mini-FAQ

Dlaczego tylko siatka, nie darmowe współrzędne?
Siatka upraszcza ustawienie, koronawirus, wstępną przenośność i wydajność.

Jak przechowywać różne układy dla punktów awaryjnych?
Każdy widget ma 'pos' na breakpoint (pulpit/tablet/mobile) z automatycznym powrotem.

Co wybrać do współpracy - OT lub CRDT?
CRDT jest łatwiejszy w przypadku konfliktów offline; OT - ok dla liniowych operacji tekstowych. Dla układu, CRDT jest częściej podejmowane.

Razem

Dobre widżety przeciągnij i upuść są nie tylko "przeciągnij i upuść. "Są to: ścisła siatka i pękanie, wygodne grupy i wyrównanie, dostępność klawiatury, stabilne ustawienia wstępne z wersji i eksportu, bezpieczne publikacje i współpraca. Zbuduj to wokół niezawodnego modelu danych, dobrze przemyślanego UX i planu testowego - a konstruktor stanie się szybki, zrozumiały i odporny na wzrost zawartości i poleceń.