Comfyui-LayerForge/js/examples/mask_editor_examples.js

/**
 * 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
};