Konfigurator Szafek

Minimalny szkielet aplikacji webowej pod dalszą rozbudowę konfiguratora szafek.

Start

npm run dev

Aplikacja uruchomi lokalny serwer na http://localhost:4173.

W PowerShellu z restrykcyjną polityką wykonania użyj:

npm.cmd run dev

Jeśli chcesz uruchomić serwer bez automatycznego otwierania przeglądarki:

$env:NO_OPEN="1"; npm.cmd run dev

Co jest gotowe

• layout 50/50: panel narzędzi i panel wizualizacji,
• przełącznik zamieniający strony paneli,
• renderowanie w Web Worker z użyciem OffscreenCanvas,
• centralny command bus dla komend UI,
• synchronizacja stanu z URL i history.pushState,
• obsługa back / forward zarówno z UI, jak i z przycisków przeglądarki,
• hot reload frontendu przez SSE,
• automatyczne otwieranie przeglądarki po starcie serwera,
• scena three.js w workerze z orbit controls.

Sterowanie sceną

• lewy przycisk myszy: orbit,
• prawy przycisk lub środkowy: pan,
• kółko myszy: zoom.

Mechanizm routingu i komend

Każda akcja UI jest reprezentowana przez obiekt komendy:

{
  type: "scene/cycle-module",
  payload: {},
  meta: {
    source: "ui",
    history: "push"
  }
}

Przepływ jest następujący:

1. UI emituje komendę do command bus.
2. Reducer aktualizuje centralny snapshot stanu.
3. historyController zapisuje stan do URL i history.pushState.
4. rendererController wysyła do workera tylko polecenia renderingu.
5. popstate odtwarza snapshot i odpala ten sam pipeline bez dopisywania nowej historii.

Gdzie rozbudowywać

• nowe trasy: src/app/history/urlState.js,
• nowe komendy: src/shared/protocol.js,
• logika stanu: src/app/state/reducer.js,
• przekazywanie efektów do renderera: src/app/commands/commandBus.js,
• rendering: src/worker/render.worker.js.