Refactor CanvasView.js to use new Canvas facade modules

Updated all CanvasView.js method calls to use the new modular structure (canvasIO, canvasLayers, imageReferenceManager) as part of the Canvas facade refactor. Updated REFACTORING_GUIDE.md to reflect completed migration, document new usage patterns, and outline next steps. This improves code clarity and modularity while maintaining backward compatibility.

js/CanvasView.js

@@ -552,7 +552,7 @@ async function createCanvasWidget(node, widget, app) {
                 $el("button.painter-button.primary", {
                     textContent: "Import Input",
                     title: "Import image from another node",
-                    onclick: () => canvas.importLatestImage()
+                    onclick: () => canvas.canvasIO.importLatestImage()
                 }),
                 $el("button.painter-button.primary", {
                     textContent: "Paste Image",
@@ -560,7 +560,7 @@ async function createCanvasWidget(node, widget, app) {
                     onclick: () => {
                         const fitOnAddWidget = node.widgets.find(w => w.name === "fit_on_add");
                         const addMode = fitOnAddWidget && fitOnAddWidget.value ? 'fit' : 'center';
-                        canvas.handlePaste(addMode);
+                        canvas.canvasLayers.handlePaste(addMode);
                     }
                 }),
             ]),
@@ -660,12 +660,12 @@ async function createCanvasWidget(node, widget, app) {
                 $el("button.painter-button.requires-selection", {
                     textContent: "Layer Up",
                     title: "Move selected layer(s) up",
-                    onclick: () => canvas.moveLayerUp()
+                    onclick: () => canvas.canvasLayers.moveLayerUp()
                 }),
                 $el("button.painter-button.requires-selection", {
                     textContent: "Layer Down",
                     title: "Move selected layer(s) down",
-                    onclick: () => canvas.moveLayerDown()
+                    onclick: () => canvas.canvasLayers.moveLayerDown()
                 }),
             ]),
 
@@ -689,12 +689,12 @@ async function createCanvasWidget(node, widget, app) {
                 $el("button.painter-button.requires-selection", {
                     textContent: "Mirror H",
                     title: "Mirror selected layer(s) horizontally",
-                    onclick: () => canvas.mirrorHorizontal()
+                    onclick: () => canvas.canvasLayers.mirrorHorizontal()
                 }),
                 $el("button.painter-button.requires-selection", {
                     textContent: "Mirror V",
                     title: "Mirror selected layer(s) vertically",
-                    onclick: () => canvas.mirrorVertical()
+                    onclick: () => canvas.canvasLayers.mirrorVertical()
                 }),
             ]),
 
@@ -716,7 +716,7 @@ async function createCanvasWidget(node, widget, app) {
 
                             const selectedLayer = canvas.selectedLayers[0];
                             const selectedLayerIndex = canvas.layers.indexOf(selectedLayer);
-                            const imageData = await canvas.getLayerImageData(selectedLayer);
+                            const imageData = await canvas.canvasLayers.getLayerImageData(selectedLayer);
                             const response = await fetch("/matting", {
                                 method: "POST",
                                 headers: {"Content-Type": "application/json"},
@@ -845,15 +845,15 @@ async function createCanvasWidget(node, widget, app) {
                     style: {backgroundColor: "#4a7c59", borderColor: "#3a6c49"},
                     onclick: async () => {
                         try {
-                            const stats = canvas.getGarbageCollectionStats();
+                            const stats = canvas.imageReferenceManager.getStats();
                             log.info("GC Stats before cleanup:", stats);
 
-                            await canvas.runGarbageCollection();
+                            await canvas.imageReferenceManager.manualGarbageCollection();
 
-                            const newStats = canvas.getGarbageCollectionStats();
+                            const newStats = canvas.imageReferenceManager.getStats();
                             log.info("GC Stats after cleanup:", newStats);
 
-                            alert(`Garbage collection completed!\nTracked images: ${newStats.trackedImages}\nTotal references: ${newStats.totalReferences}\nOperations: ${newStats.operationCount}/${newStats.operationThreshold}`);
+                            alert(`Garbage collection completed!\nTracked images: ${newStats.trackedImages}\nTotal references: ${newStats.totalReferences}\nOperations: ${canvas.imageReferenceManager.operationCount}/${canvas.imageReferenceManager.operationThreshold}`);
                         } catch (e) {
                             log.error("Failed to run garbage collection:", e);
                             alert("Error running garbage collection. Check the console for details.");

js/REFACTORING_GUIDE.md

@@ -113,18 +113,49 @@ canvas.addLayer(image);
 - ✅ **Większa elastyczność** - wybór między uproszczonym a szczegółowym interfejsem
 - ✅ **Kompatybilność wsteczna** - istniejący kod nadal działa
 
-## Kolejne kroki
+## Status refaktoryzacji
 
-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
+### ✅ 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** - w przyszłych wersjach (po okresie przejściowym)
+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
+- ✅ **Refaktoryzacja zakończona** - wszystkie pliki zostały zaktualizowane
+- ✅ **Nowy kod** używa modułów bezpośrednio zgodnie z wzorcem fasady
+- ⚠️ **Metody delegujące** są zachowane dla kompatybilności, ale oznaczone jako tymczasowe
 - 📚 **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ą.
+**Refaktoryzacja została zakończona pomyślnie!** System jest gotowy do dalszego rozwoju z lepszą architekturą opartą na wzorcu fasady.