mirror of
https://github.com/Azornes/Comfyui-LayerForge.git
synced 2026-03-25 06:22:14 -03:00
Refactor code style and remove mask editor examples
This commit applies consistent code style changes (mainly spacing and formatting) across multiple JS files for improved readability and maintainability. Additionally, it removes the unused 'js/examples/mask_editor_examples.js' file.
This commit is contained in:
10
js/Canvas.js
10
js/Canvas.js
@@ -173,8 +173,6 @@ export class Canvas {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Ładuje stan canvas z bazy danych
|
* Ładuje stan canvas z bazy danych
|
||||||
*/
|
*/
|
||||||
@@ -292,8 +290,6 @@ export class Canvas {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Uruchamia edytor masek
|
* Uruchamia edytor masek
|
||||||
* @param {Image|HTMLCanvasElement|null} predefinedMask - Opcjonalna maska do nałożenia po otwarciu editora
|
* @param {Image|HTMLCanvasElement|null} predefinedMask - Opcjonalna maska do nałożenia po otwarciu editora
|
||||||
@@ -374,8 +370,6 @@ export class Canvas {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Inicjalizuje podstawowe właściwości canvas
|
* Inicjalizuje podstawowe właściwości canvas
|
||||||
*/
|
*/
|
||||||
@@ -488,8 +482,6 @@ export class Canvas {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Czeka na otwarcie mask editora i automatycznie nakłada predefiniowaną maskę
|
* Czeka na otwarcie mask editora i automatycznie nakłada predefiniowaną maskę
|
||||||
*/
|
*/
|
||||||
@@ -826,8 +818,6 @@ export class Canvas {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Zapisuje obecny stan maski przed otwarciem editora
|
* Zapisuje obecny stan maski przed otwarciem editora
|
||||||
* @returns {Object} Zapisany stan maski
|
* @returns {Object} Zapisany stan maski
|
||||||
|
|||||||
@@ -1124,7 +1124,6 @@ async function createCanvasWidget(node, widget, app) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
canvas: canvas,
|
canvas: canvas,
|
||||||
panel: controlPanel
|
panel: controlPanel
|
||||||
|
|||||||
@@ -283,7 +283,6 @@ export class MaskTool {
|
|||||||
setMask(image) {
|
setMask(image) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const destX = -this.x;
|
const destX = -this.x;
|
||||||
const destY = -this.y;
|
const destY = -this.y;
|
||||||
|
|
||||||
|
|||||||
@@ -1,141 +0,0 @@
|
|||||||
/**
|
|
||||||
* 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) {
|
|
||||||
|
|
||||||
const maskImage = await create_mask_from_image_src('/path/to/mask.png');
|
|
||||||
|
|
||||||
|
|
||||||
start_mask_editor_with_predefined_mask(canvasInstance, maskImage, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Przykład 2: Użycie z canvas jako maska
|
|
||||||
*/
|
|
||||||
async function example2_canvas_mask(canvasInstance) {
|
|
||||||
|
|
||||||
const maskCanvas = document.createElement('canvas');
|
|
||||||
maskCanvas.width = 512;
|
|
||||||
maskCanvas.height = 512;
|
|
||||||
const ctx = maskCanvas.getContext('2d');
|
|
||||||
|
|
||||||
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();
|
|
||||||
|
|
||||||
const maskImage = await canvas_to_mask_image(maskCanvas);
|
|
||||||
|
|
||||||
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) {
|
|
||||||
|
|
||||||
const maskImage = await create_mask_from_image_src('/path/to/mask.png');
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
await canvasInstance.startMaskEditor(maskImage, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Przykład 4: Tworzenie maski z danych binarnych
|
|
||||||
*/
|
|
||||||
async function example4_binary_data_mask(canvasInstance, binaryData) {
|
|
||||||
|
|
||||||
const blob = new Blob([binaryData], { type: 'image/png' });
|
|
||||||
const dataUrl = URL.createObjectURL(blob);
|
|
||||||
|
|
||||||
const maskImage = await create_mask_from_image_src(dataUrl);
|
|
||||||
|
|
||||||
start_mask_editor_with_predefined_mask(canvasInstance, maskImage, true);
|
|
||||||
|
|
||||||
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');
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
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');
|
|
||||||
|
|
||||||
|
|
||||||
start_mask_editor_with_predefined_mask(canvasInstance, maskImage, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
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
|
|
||||||
};
|
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
import {createModuleLogger} from "./LoggerUtils.js";
|
import {createModuleLogger} from "./LoggerUtils.js";
|
||||||
import {withErrorHandling, createValidationError} from "../ErrorHandler.js";
|
import {withErrorHandling, createValidationError} from "../ErrorHandler.js";
|
||||||
|
|
||||||
const log = createModuleLogger('ImageUtils');
|
const log = createModuleLogger('ImageUtils');
|
||||||
|
|
||||||
export function validateImageData(data) {
|
export function validateImageData(data) {
|
||||||
|
|||||||
@@ -130,7 +130,6 @@ class WebSocketManager {
|
|||||||
log.warn("WebSocket not open. Queuing message.");
|
log.warn("WebSocket not open. Queuing message.");
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
this.messageQueue.push(message);
|
this.messageQueue.push(message);
|
||||||
if (!this.isConnecting) {
|
if (!this.isConnecting) {
|
||||||
this.connect();
|
this.connect();
|
||||||
@@ -147,7 +146,6 @@ class WebSocketManager {
|
|||||||
log.debug(`Flushing ${this.messageQueue.length} queued messages.`);
|
log.debug(`Flushing ${this.messageQueue.length} queued messages.`);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
while (this.messageQueue.length > 0) {
|
while (this.messageQueue.length > 0) {
|
||||||
const message = this.messageQueue.shift();
|
const message = this.messageQueue.shift();
|
||||||
this.socket.send(message);
|
this.socket.send(message);
|
||||||
|
|||||||
@@ -142,7 +142,6 @@ export function start_mask_editor_auto(canvasInstance) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
canvasInstance.startMaskEditor();
|
canvasInstance.startMaskEditor();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user