Add automatic mask loading to mask editor

Introduces functionality for automatically applying predefined masks in the ComfyUI mask editor. Adds new API methods and utilities in Canvas.js and mask_utils.js, including support for sending a clean image, handling both new and old mask editors, and flexible mask formats. Includes documentation, usage examples, and helper functions for mask processing and error handling.

js/examples/mask_editor_examples.js

@@ -0,0 +1,153 @@
+/**
+ * Przykłady użycia automatycznego nakładania masek w mask editorze
+ * 
+ * Te przykłady pokazują jak używać nowej funkcjonalności do automatycznego
+ * nakładania predefiniowanych masek po otwarciu mask editora ComfyUI.
+ */
+
+import { 
+    start_mask_editor_with_predefined_mask, 
+    create_mask_from_image_src, 
+    canvas_to_mask_image 
+} from '../utils/mask_utils.js';
+
+/**
+ * Przykład 1: Podstawowe użycie z obrazem maski
+ */
+async function example1_basic_usage(canvasInstance) {
+    // Załaduj obraz maski z URL
+    const maskImage = await create_mask_from_image_src('/path/to/mask.png');
+    
+    // Uruchom mask editor z predefiniowaną maską
+    // sendCleanImage = true oznacza że wyślemy czysty obraz bez istniejącej maski
+    start_mask_editor_with_predefined_mask(canvasInstance, maskImage, true);
+}
+
+/**
+ * Przykład 2: Użycie z canvas jako maska
+ */
+async function example2_canvas_mask(canvasInstance) {
+    // Stwórz canvas z maską programowo
+    const maskCanvas = document.createElement('canvas');
+    maskCanvas.width = 512;
+    maskCanvas.height = 512;
+    const ctx = maskCanvas.getContext('2d');
+    
+    // Narysuj prostą maskę - białe koło na czarnym tle
+    ctx.fillStyle = 'black';
+    ctx.fillRect(0, 0, 512, 512);
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.arc(256, 256, 100, 0, 2 * Math.PI);
+    ctx.fill();
+    
+    // Konwertuj canvas do Image
+    const maskImage = await canvas_to_mask_image(maskCanvas);
+    
+    // Uruchom mask editor
+    start_mask_editor_with_predefined_mask(canvasInstance, maskImage, true);
+}
+
+/**
+ * Przykład 3: Bezpośrednie użycie metody Canvas
+ */
+async function example3_direct_canvas_method(canvasInstance) {
+    // Załaduj maskę
+    const maskImage = await create_mask_from_image_src('/path/to/mask.png');
+    
+    // Bezpośrednie wywołanie metody Canvas
+    // Parametr 1: predefiniowana maska
+    // Parametr 2: czy wysłać czysty obraz (true = tak, false = z istniejącą maską)
+    await canvasInstance.startMaskEditor(maskImage, true);
+}
+
+/**
+ * Przykład 4: Tworzenie maski z danych binarnych
+ */
+async function example4_binary_data_mask(canvasInstance, binaryData) {
+    // Konwertuj dane binarne do data URL
+    const blob = new Blob([binaryData], { type: 'image/png' });
+    const dataUrl = URL.createObjectURL(blob);
+    
+    // Stwórz obraz z data URL
+    const maskImage = await create_mask_from_image_src(dataUrl);
+    
+    // Uruchom mask editor
+    start_mask_editor_with_predefined_mask(canvasInstance, maskImage, true);
+    
+    // Wyczyść URL po użyciu
+    URL.revokeObjectURL(dataUrl);
+}
+
+/**
+ * Przykład 5: Maska z gradientem
+ */
+async function example5_gradient_mask(canvasInstance) {
+    const maskCanvas = document.createElement('canvas');
+    maskCanvas.width = 512;
+    maskCanvas.height = 512;
+    const ctx = maskCanvas.getContext('2d');
+    
+    // Stwórz gradient od przezroczystego do białego
+    const gradient = ctx.createLinearGradient(0, 0, 512, 0);
+    gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');    // Przezroczysty
+    gradient.addColorStop(1, 'rgba(255, 255, 255, 1)'); // Biały
+    
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, 512, 512);
+    
+    const maskImage = await canvas_to_mask_image(maskCanvas);
+    start_mask_editor_with_predefined_mask(canvasInstance, maskImage, true);
+}
+
+/**
+ * Przykład 6: Obsługa błędów
+ */
+async function example6_error_handling(canvasInstance) {
+    try {
+        const maskImage = await create_mask_from_image_src('/path/to/nonexistent.png');
+        start_mask_editor_with_predefined_mask(canvasInstance, maskImage, true);
+    } catch (error) {
+        console.error('Błąd podczas ładowania maski:', error);
+        
+        // Fallback - uruchom editor bez predefiniowanej maski
+        await canvasInstance.startMaskEditor();
+    }
+}
+
+/**
+ * Przykład 7: Maska z istniejącego elementu canvas na stronie
+ */
+async function example7_existing_canvas_element(canvasInstance, canvasElementId) {
+    const existingCanvas = document.getElementById(canvasElementId);
+    if (!existingCanvas) {
+        console.error('Canvas element not found:', canvasElementId);
+        return;
+    }
+    
+    const maskImage = await canvas_to_mask_image(existingCanvas);
+    start_mask_editor_with_predefined_mask(canvasInstance, maskImage, true);
+}
+
+/**
+ * Przykład 8: Kombinowanie z istniejącą maską
+ */
+async function example8_combine_with_existing_mask(canvasInstance) {
+    const maskImage = await create_mask_from_image_src('/path/to/mask.png');
+    
+    // sendCleanImage = false oznacza że wyślemy obraz z istniejącą maską
+    // Nowa maska zostanie nałożona dodatkowo w edytorze
+    start_mask_editor_with_predefined_mask(canvasInstance, maskImage, false);
+}
+
+// Eksportuj przykłady dla użycia w innych plikach
+export {
+    example1_basic_usage,
+    example2_canvas_mask,
+    example3_direct_canvas_method,
+    example4_binary_data_mask,
+    example5_gradient_mask,
+    example6_error_handling,
+    example7_existing_canvas_element,
+    example8_combine_with_existing_mask
+};