mirror of
https://github.com/Azornes/Comfyui-LayerForge.git
synced 2026-03-22 13:12:10 -03:00
d50a0443c3
Changed the default log level from NONE to DEBUG in both canvas_node.py and LoggerUtils.js to improve logging visibility during development. Added js/REFACTORING_GUIDE.md with detailed documentation on the recent Canvas module refactor, outlining architectural changes, migration instructions, and developer notes.
131 lines
4.8 KiB
Markdown
131 lines
4.8 KiB
Markdown
# Przewodnik refaktoryzacji Canvas
|
|
|
|
## Podsumowanie wykonanych prac
|
|
|
|
Przeprowadzono kompleksową refaktoryzację klasy `Canvas` oraz powiązanych plików w celu poprawy architektury i zastosowania wzorca fasady.
|
|
|
|
## Zmiany w architekturze
|
|
|
|
### 1. Wzorzec Fasady w `Canvas.js`
|
|
Klasa `Canvas` została przekształcona w prawdziwą fasadę:
|
|
|
|
#### Struktura przed refaktoryzacją:
|
|
- ✗ Dziesiątki metod delegujących (`copySelectedLayers() { return this.canvasLayers.copySelectedLayers(); }`)
|
|
- ✗ Canvas jako pośrednik dla wszystkich operacji
|
|
- ✗ Trudność w utrzymaniu kodu
|
|
|
|
#### Struktura po refaktoryzacji:
|
|
- ✅ **Główne operacje fasady**: `loadInitialState()`, `saveState()`, `render()`, `addLayer()`
|
|
- ✅ **Publiczne moduły**: `canvas.canvasLayers`, `canvas.canvasInteractions`, `canvas.canvasIO`, `canvas.canvasState`
|
|
- ✅ **Metody delegujące**: Zachowane dla kompatybilności, wyraźnie oznaczone jako tymczasowe
|
|
|
|
### 2. Nowa struktura `Canvas.js`
|
|
```
|
|
Canvas/
|
|
├── Konstruktor i inicjalizacja
|
|
│ ├── _initializeModules()
|
|
│ └── _setupCanvas()
|
|
├── Główne operacje fasady
|
|
│ ├── loadInitialState()
|
|
│ ├── saveState()
|
|
│ ├── render()
|
|
│ └── addLayer()
|
|
├── Operacje na masce
|
|
│ └── startMaskEditor()
|
|
├── Metody pomocnicze
|
|
│ ├── getMouseWorldCoordinates()
|
|
│ ├── updateHistoryButtons()
|
|
│ └── incrementOperationCount()
|
|
└── Metody delegujące (tymczasowe)
|
|
└── [zachowane dla kompatybilności]
|
|
```
|
|
|
|
### 3. Aktualizacja `CanvasView.js`
|
|
Główny interfejs użytkownika został zaktualizowany aby używać nowego podejścia:
|
|
|
|
#### Przykłady zmian:
|
|
```javascript
|
|
// PRZED
|
|
onclick: () => canvas.mirrorHorizontal()
|
|
|
|
// PO
|
|
onclick: () => canvas.canvasLayers.mirrorHorizontal()
|
|
|
|
// PRZED
|
|
const imageData = await canvas.getLayerImageData(selectedLayer);
|
|
|
|
// PO
|
|
const imageData = await canvas.canvasLayers.getLayerImageData(selectedLayer);
|
|
```
|
|
|
|
## Mapowanie modułów
|
|
|
|
| Moduł | Odpowiedzialność | Przykładowe metody |
|
|
|-------|------------------|-------------------|
|
|
| `canvasLayers` | Operacje na warstwach | `copySelectedLayers()`, `moveLayerUp()`, `mirrorHorizontal()` |
|
|
| `canvasInteractions` | Obsługa interakcji | `handleMouseMove()`, `handleKeyDown()` |
|
|
| `canvasIO` | Operacje wejścia/wyjścia | `importLatestImage()`, `sendDataViaWebSocket()` |
|
|
| `canvasState` | Zarządzanie stanem | `saveStateToDB()`, `undo()`, `redo()` |
|
|
| `canvasRenderer` | Renderowanie | `render()` (wywoływane przez fasadę) |
|
|
| `maskTool` | Narzędzie masek | `activate()`, `setBrushSize()` |
|
|
| `imageReferenceManager` | Zarządzanie pamięcią | `manualGarbageCollection()` |
|
|
|
|
## Instrukcje migracji
|
|
|
|
### Stare podejście (przestarzałe)
|
|
```javascript
|
|
// Bezpośrednie wywołanie metod delegujących
|
|
canvas.copySelectedLayers();
|
|
canvas.handleMouseMove(e);
|
|
canvas.getLayerImageData(layer);
|
|
```
|
|
|
|
### Nowe podejście (zalecane)
|
|
```javascript
|
|
// Dostęp bezpośrednio do modułów
|
|
canvas.canvasLayers.copySelectedLayers();
|
|
canvas.canvasInteractions.handleMouseMove(e);
|
|
canvas.canvasLayers.getLayerImageData(layer);
|
|
|
|
// Lub użycie głównych operacji fasady
|
|
canvas.render();
|
|
canvas.saveState();
|
|
canvas.addLayer(image);
|
|
```
|
|
|
|
### Zasady wyboru podejścia
|
|
1. **Główne operacje** → Używaj fasady (`canvas.render()`, `canvas.saveState()`)
|
|
2. **Operacje specjalistyczne** → Używaj modułów (`canvas.canvasLayers.mirrorHorizontal()`)
|
|
3. **Częste operacje** → Metody delegujące zostały zachowane dla kompatybilności
|
|
|
|
## Korzyści refaktoryzacji
|
|
|
|
### Przed refaktoryzacją:
|
|
- 🔴 80+ metod delegujących w klasie Canvas
|
|
- 🔴 Każda nowa funkcja wymagała aktualizacji fasady
|
|
- 🔴 Trudne debugowanie i śledzenie przepływu danych
|
|
- 🔴 Naruszenie zasady Single Responsibility
|
|
|
|
### Po refaktoryzacji:
|
|
- ✅ **Czysta fasada** z kluczowymi operacjami wysokiego poziomu
|
|
- ✅ **Modułowa architektura** z jasnym podziałem odpowiedzialności
|
|
- ✅ **Łatwiejsze utrzymanie** - zmiany w module nie wpływają na fasadę
|
|
- ✅ **Większa elastyczność** - wybór między uproszczonym a szczegółowym interfejsem
|
|
- ✅ **Kompatybilność wsteczna** - istniejący kod nadal działa
|
|
|
|
## Kolejne kroki
|
|
|
|
1. **Stopniowa migracja** istniejącego kodu do nowego podejścia
|
|
2. **Usunięcie metod delegujących** w przyszłych wersjach
|
|
3. **Rozszerzenie dokumentacji** dla poszczególnych modułów
|
|
4. **Dodanie testów jednostkowych** dla modułów
|
|
|
|
## Uwagi dla deweloperów
|
|
|
|
- ⚠️ **Metody delegujące** są oznaczone jako tymczasowe i zostaną usunięte
|
|
- ✅ **Nowy kod** powinien używać modułów bezpośrednio
|
|
- 📚 **Dokumentacja** została zaktualizowana w tym przewodniku
|
|
- 🔄 **Kompatybilność** z istniejącym kodem jest zachowana
|
|
|
|
Refaktoryzacja została zakończona pomyślnie i system jest gotowy do dalszego rozwoju z lepszą architekturą.
|