90 lines
4.5 KiB
Markdown
90 lines
4.5 KiB
Markdown
# Visualizer UI: kafelki → warstwy (stack)
|
||
|
||
Ten dokument opisuje MVP dla przełączania układu UI w `apps/visualizer`:
|
||
|
||
- **Grid (kafelki / standard)**: obecny layout aplikacji.
|
||
- **Stack (warstwy / fullscreen)**: jedna aktywna warstwa jest na wierzchu (fullscreen), a kolejność warstw można ustawiać przez **DnD**.
|
||
|
||
## Zachowanie (MVP)
|
||
|
||
### Wejście / wyjście ze stack
|
||
- **Chart**: przycisk `Fullscreen` w pasku narzędzi wykresu przełącza tryb `grid` ↔ `stack` (dla warstwy `chart`).
|
||
- **DLOB**: przycisk `Fullscreen` w nagłówku DLOB przełącza tryb `grid` ↔ `stack` (dla warstwy `dlob`).
|
||
- Wyjście ze stack:
|
||
- przycisk `Back` w panelu warstw
|
||
- klawisz `Esc` **dwa razy** (w ciągu ~0.8s)
|
||
|
||
### Warstwy i DnD
|
||
- W stack pojawia się panel `Layers` jako **wysuwany drawer z boku**.
|
||
- Lista w panelu jest **od góry (top) do dołu (bottom)**:
|
||
- element na górze listy jest `active` (czyli jest “na wierzchu”).
|
||
- **DnD** na liście:
|
||
- przeciągnij element i upuść na inny — zmienisz kolejność (top/bottom).
|
||
- Kliknięcie elementu na liście przenosi go na wierzch (`active`).
|
||
|
||
### Warstwy kosztów (Costs)
|
||
- Są dwie osobne warstwy kosztów:
|
||
- `Costs (New)` — estymata nowego kontraktu (domyślnie **na samej górze**),
|
||
- `Costs (Active)` — monitoring puszczonego kontraktu (pojawia się i jest ustawiana **jeden poziom niżej** po wpisaniu `contract_id`).
|
||
- Możesz zmienić kolejność DnD (to nadpisuje domyślne ustawienie).
|
||
- Po pierwszym DnD aplikacja oznacza układ jako “manualny” i nie przestawia już automatycznie warstw przy pojawieniu się `contract_id`.
|
||
|
||
### Auto-hide + lock
|
||
- Domyślnie drawer ma **auto-hide** (chowa się po ~1s po zjechaniu kursorem z panelu).
|
||
- Przycisk `Auto/Locked`:
|
||
- `Auto` = auto-hide włączony,
|
||
- `Locked` = auto-hide wyłączony (drawer zostaje otwarty).
|
||
- Drawer otwiera się po najechaniu kursorem na wąski “hotspot” przy lewym brzegu ekranu.
|
||
|
||
### Opacity (UI)
|
||
- W drawerze są suwaki:
|
||
- `Backdrop` (przyciemnienie tła w stack)
|
||
- `Panel` (tło drawera)
|
||
- Wartości są zapisywane w localStorage (`trade.stackBackdropOpacity`, `trade.stackDrawerOpacity`).
|
||
|
||
### Opacity (warstwy)
|
||
- Każda warstwa ma swój suwak opacity (0–100%):
|
||
- `0%` = warstwa niewidoczna,
|
||
- `100%` = pełna widoczność.
|
||
- DnD nadal ustawia kolejność (z-index), a interakcje trafiają do warstwy `active` (top).
|
||
- Wartości są zapisywane w localStorage (`trade.layerOpacity`).
|
||
|
||
### Jasność (warstwy)
|
||
- Każda warstwa ma suwak `brightness` (60–180%).
|
||
- To jest filtr UI (nie wpływa na dane), przydatny gdy chcesz rozjaśnić wykres/DLOB w stack.
|
||
- Wartości są zapisywane w localStorage (`trade.layerBrightness`).
|
||
|
||
### Widoczność + lock (warstwy)
|
||
- Ikona “oka” przełącza widoczność warstwy (nie resetuje suwaka opacity).
|
||
- Ikona “kłódki” blokuje warstwę:
|
||
- nie da się jej przeciągać (DnD),
|
||
- suwak opacity jest wyłączony,
|
||
- klik w wiersz nie zmienia kolejności (nie “wypycha” na top).
|
||
- Ustawienia są zapisywane w localStorage (`trade.layerVisible`, `trade.layerLocked`).
|
||
|
||
## Implementacja (gdzie w kodzie)
|
||
- Sterowanie układem i panel `Layers`: `apps/visualizer/src/App.tsx`
|
||
- `trade.layoutMode` w localStorage: `'grid' | 'stack'`
|
||
- `trade.stackOrder` w localStorage: kolejność warstw (z-index; ostatni = top)
|
||
- `trade.stackOrderManual` w localStorage: czy użytkownik zmienił kolejność przez DnD (blokuje auto-przestawianie)
|
||
- `trade.stackPanelLocked` w localStorage: blokada auto-hide panelu warstw
|
||
- `trade.contractId` w localStorage: aktywny kontrakt do monitoringu
|
||
- Fullscreen chart przez warstwy: `apps/visualizer/src/features/chart/ChartPanel.tsx`
|
||
- `fullscreenOverride` + `onToggleFullscreenOverride` (fullscreen kontrolowany z zewnątrz, bez backdropu)
|
||
- Fullscreen DLOB: `apps/visualizer/src/features/market/DlobDashboard.tsx`
|
||
- `isFullscreen` + `onToggleFullscreen` (przycisk w nagłówku)
|
||
- Panel kosztów: `apps/visualizer/src/features/contracts/ContractCostsPanel.tsx`
|
||
|
||
## Co dalej (kolejne iteracje)
|
||
|
||
MVP nie robi jeszcze “prawdziwego” układu kafelków z:
|
||
- drag/resize okien w trybie stack,
|
||
- wyświetlaniem kilku warstw jednocześnie (np. jako nakładające się okna),
|
||
- przełączaniem grid→stack przez zoom kafelka (z animacją).
|
||
|
||
Proponowane następne kroki:
|
||
1) wydzielić `Pane` abstraction (id, title, render, hotkeys),
|
||
2) zrobić `grid` jako faktyczne kafelki (Chart, DLOB, Orderbook, TradeForm),
|
||
3) dodać “zoom” kafelka → wejście do stack,
|
||
4) dodać opcjonalnie drag/resize w stack (na start tylko z-index + focus).
|