mirror of
https://github.com/Azornes/Comfyui-LayerForge.git
synced 2026-03-21 20:52:12 -03:00
8efb9d91b0
Removed all remaining delegating methods from Canvas.js, including handleMouseMove and garbage collection helpers, as part of finalizing the refactor to a pure facade. Updated REFACTORING_GUIDE.md to reflect the completion of this refactor and clarify the new architecture.
217 lines
9.3 KiB
Markdown
217 lines
9.3 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
|
|
|
|
## Status refaktoryzacji
|
|
|
|
### ✅ Zakończone zadania
|
|
|
|
1. **Refaktoryzacja klasy Canvas** - przekształcenie w prawdziwą fasadę ✅
|
|
2. **Aktualizacja CanvasView.js** - migracja do nowego podejścia ✅
|
|
3. **Implementacja wzorca fasady** - główne operacje wysokiego poziomu ✅
|
|
4. **Zachowanie kompatybilności** - metody delegujące dla istniejącego kodu ✅
|
|
|
|
### 📋 Zmiany w CanvasView.js
|
|
|
|
Wszystkie wywołania zostały zaktualizowane zgodnie z nowym podejściem:
|
|
|
|
```javascript
|
|
// Operacje I/O
|
|
canvas.canvasIO.importLatestImage()
|
|
canvas.canvasLayers.handlePaste(addMode)
|
|
|
|
// Operacje na warstwach
|
|
canvas.canvasLayers.moveLayerUp()
|
|
canvas.canvasLayers.moveLayerDown()
|
|
canvas.canvasLayers.mirrorHorizontal()
|
|
canvas.canvasLayers.mirrorVertical()
|
|
canvas.canvasLayers.getLayerImageData(selectedLayer)
|
|
|
|
// Garbage Collection
|
|
canvas.imageReferenceManager.getStats()
|
|
canvas.imageReferenceManager.manualGarbageCollection()
|
|
```
|
|
|
|
### 🎯 Kolejne kroki
|
|
|
|
1. **Monitorowanie działania** - sprawdzenie czy wszystkie funkcje działają poprawnie ✅
|
|
2. **Usunięcie metod delegujących do CanvasState** - zakończone ✅
|
|
3. **Rozszerzenie dokumentacji** - dla poszczególnych modułów ✅
|
|
4. **Dodanie testów jednostkowych** - dla modułów
|
|
|
|
### 🔧 Ostatnie poprawki (2025-06-29)
|
|
|
|
1. **Dodano brakujące metody w CanvasLayers.js** ✅
|
|
- `resizeLayer(scale)` - zmienia rozmiar wybranych warstw
|
|
- `rotateLayer(angle)` - obraca wybrane warstwy
|
|
- Poprawiono delegację z Canvas.js do CanvasLayers.js
|
|
|
|
2. **Weryfikacja spójności** ✅
|
|
- Wszystkie delegacje w Canvas.js wskazują na istniejące metody w modułach
|
|
- CanvasView.js używa nowego podejścia modułowego
|
|
- Dokumentacja została zaktualizowana
|
|
|
|
3. **Finalne poprawki architektury** ✅
|
|
- Poprawiono konstruktor CanvasLayers.js - zmieniono mylącą nazwę parametru z `canvasLayers` na `canvas`
|
|
- Zaktualizowano wszystkie odwołania `this.canvasLayers.` na `this.canvas.` w CanvasLayers.js
|
|
- Poprawiono wywołania w CanvasView.js - `canvas.rotateLayer()` → `canvas.canvasLayers.rotateLayer()`
|
|
- Wszystkie moduły używają teraz spójnej konwencji nazewnictwa
|
|
|
|
4. **Usunięcie metod delegujących do CanvasState** ✅
|
|
- Usunięto metodę delegującą `saveStateToDB()` z Canvas.js
|
|
- Zaktualizowano wszystkie wywołania w CanvasView.js: `canvas.undo()` → `canvas.canvasState.undo()`
|
|
- Zaktualizowano wszystkie wywołania w CanvasInteractions.js dla operacji undo/redo i copy/paste
|
|
- Zaktualizowano wywołania w CanvasLayers.js i CanvasIO.js
|
|
- Wszystkie operacje na stanie używają teraz bezpośrednio modułu `canvasState`
|
|
|
|
5. **Usunięcie metod delegujących do CanvasLayers** ✅
|
|
- Usunięto 14 metod delegujących do CanvasLayers z Canvas.js
|
|
- Zaktualizowano wszystkie wywołania w CanvasRenderer.js, CanvasIO.js i CanvasInteractions.js
|
|
- Wszystkie operacje na warstwach używają teraz bezpośrednio modułu `canvasLayers`
|
|
- Canvas.js zawiera teraz tylko główne operacje fasady i niezbędne metody pomocnicze
|
|
|
|
6. **Usunięcie metod delegujących do CanvasInteractions** ✅
|
|
- Usunięto ostatnią metodę delegującą `handleMouseMove()` z Canvas.js
|
|
- Metoda nie była używana w żadnym pliku, więc usunięcie było bezpieczne
|
|
- Wszystkie operacje interakcji używają teraz bezpośrednio modułu `canvasInteractions`
|
|
- Canvas.js jest teraz prawdziwą fasadą bez niepotrzebnych metod delegujących
|
|
|
|
## Uwagi dla deweloperów
|
|
|
|
- ✅ **Refaktoryzacja w pełni zakończona** - wszystkie pliki zostały zaktualizowane
|
|
- ✅ **Nowy kod** używa modułów bezpośrednio zgodnie z wzorcem fasady
|
|
- ✅ **Wszystkie metody delegujące** do głównych modułów zostały usunięte
|
|
- ✅ **Czysta fasada** - Canvas.js zawiera tylko główne operacje wysokiego poziomu
|
|
- ✅ **Spójna architektura** - wszystkie moduły używają poprawnych referencji
|
|
- ✅ **Minimalne delegacje** - pozostały tylko metody do ImageReferenceManager
|
|
- 📚 **Dokumentacja** została zaktualizowana w tym przewodniku
|
|
- 🔄 **Kompatybilność** z istniejącym kodem jest zachowana
|
|
|
|
**Refaktoryzacja została w pełni zakończona!** Canvas.js jest teraz prawdziwą fasadą bez niepotrzebnych metod delegujących. System jest gotowy do dalszego rozwoju z czystą architekturą opartą na wzorcu fasady.
|
|
|
|
### 📋 Mapowanie kompletnych funkcjonalności
|
|
|
|
| Funkcjonalność | Moduł | Metoda | Status |
|
|
|----------------|-------|--------|--------|
|
|
| Dodawanie warstw | `canvasLayers` | `addLayerWithImage()` | ✅ |
|
|
| Kopiowanie/wklejanie | `canvasLayers` | `copySelectedLayers()`, `handlePaste()` | ✅ |
|
|
| Przesuwanie warstw | `canvasLayers` | `moveLayerUp()`, `moveLayerDown()` | ✅ |
|
|
| Transformacje | `canvasLayers` | `resizeLayer()`, `rotateLayer()` | ✅ |
|
|
| Odbicia lustrzane | `canvasLayers` | `mirrorHorizontal()`, `mirrorVertical()` | ✅ |
|
|
| Obsługa interakcji | `canvasInteractions` | `handleMouseMove()`, `handleKeyDown()` | ✅ |
|
|
| Zarządzanie stanem | `canvasState` | `saveState()`, `undo()`, `redo()` | ✅ |
|
|
| Operacje I/O | `canvasIO` | `importLatestImage()`, `sendDataViaWebSocket()` | ✅ |
|
|
| Renderowanie | `canvasRenderer` | `render()` | ✅ |
|
|
| Zarządzanie pamięcią | `imageReferenceManager` | `manualGarbageCollection()` | ✅ |
|