alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-21 20:52:12 -03:00
Code Issues Packages Projects Releases Wiki Activity

Standart Error in Utils

Browse Source
This commit is contained in:
Dariusz L
2025-07-27 20:30:06 +02:00
parent 64ee2c6abb
commit 058a1c4d67
20 changed files with 770 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/CanvasLayers.ts
View File

@@ -8,7 +8,7 @@ import {app} from "../../scripts/app.js";
// @ts-ignore
import {ComfyApp} from "../../scripts/app.js";
import { ClipboardManager } from "./utils/ClipboardManager.js";
import { createDistanceFieldMask } from "./utils/ImageAnalysis.js";
import { createDistanceFieldMaskSync } from "./utils/ImageAnalysis.js";
import type { Canvas } from './Canvas';
import type { Layer, Point, AddMode, ClipboardPreference } from './types';
@@ -421,9 +421,9 @@ export class CanvasLayers {
const needsBlendAreaEffect = blendArea > 0;
if (needsBlendAreaEffect) {
log.info(`Applying blend area effect for layer ${layer.id}`);
log.debug(`Applying blend area effect for layer ${layer.id}, blendArea: ${blendArea}%`);
// Get or create distance field mask
let maskCanvas = this.getDistanceFieldMask(layer.image, blendArea);
const maskCanvas = this.getDistanceFieldMaskSync(layer.image, blendArea);
if (maskCanvas) {
// Create a temporary canvas for the masked layer
@@ -463,7 +463,7 @@ export class CanvasLayers {
ctx.restore();
}
private getDistanceFieldMask(image: HTMLImageElement, blendArea: number): HTMLCanvasElement | null {
private getDistanceFieldMaskSync(image: HTMLImageElement, blendArea: number): HTMLCanvasElement | null {
// Check cache first
let imageCache = this.distanceFieldCache.get(image);
if (!imageCache) {
@@ -475,7 +475,7 @@ export class CanvasLayers {
if (!maskCanvas) {
try {
log.info(`Creating distance field mask for blendArea: ${blendArea}%`);
maskCanvas = createDistanceFieldMask(image, blendArea);
maskCanvas = createDistanceFieldMaskSync(image, blendArea);
log.info(`Distance field mask created successfully, size: ${maskCanvas.width}x${maskCanvas.height}`);
imageCache.set(blendArea, maskCanvas);
} catch (error) {

176
src/utils/ClipboardManager.ts
View File

@@ -1,5 +1,6 @@
import {createModuleLogger} from "./LoggerUtils.js";
import { showNotification, showInfoNotification } from "./NotificationUtils.js";
import { withErrorHandling, createValidationError, createNetworkError, createFileError } from "../ErrorHandler.js";
// @ts-ignore
import {api} from "../../../scripts/api.js";
@@ -26,62 +27,51 @@ export class ClipboardManager {
* @param {ClipboardPreference} preference - Clipboard preference ('system' or 'clipspace')
* @returns {Promise<boolean>} - True if successful, false otherwise
*/
async handlePaste(addMode: AddMode = 'mouse', preference: ClipboardPreference = 'system'): Promise<boolean> {
try {
log.info(`ClipboardManager handling paste with preference: ${preference}`);
handlePaste = withErrorHandling(async (addMode: AddMode = 'mouse', preference: ClipboardPreference = 'system'): Promise<boolean> => {
log.info(`ClipboardManager handling paste with preference: ${preference}`);
if (this.canvas.canvasLayers.internalClipboard.length > 0) {
log.info("Found layers in internal clipboard, pasting layers");
this.canvas.canvasLayers.pasteLayers();
if (this.canvas.canvasLayers.internalClipboard.length > 0) {
log.info("Found layers in internal clipboard, pasting layers");
this.canvas.canvasLayers.pasteLayers();
return true;
}
if (preference === 'clipspace') {
log.info("Attempting paste from ComfyUI Clipspace");
const success = await this.tryClipspacePaste(addMode);
if (success) {
return true;
}
if (preference === 'clipspace') {
log.info("Attempting paste from ComfyUI Clipspace");
const success = await this.tryClipspacePaste(addMode);
if (success) {
return true;
}
log.info("No image found in ComfyUI Clipspace");
}
log.info("Attempting paste from system clipboard");
return await this.trySystemClipboardPaste(addMode);
} catch (err) {
log.error("ClipboardManager paste operation failed:", err);
return false;
log.info("No image found in ComfyUI Clipspace");
}
}
log.info("Attempting paste from system clipboard");
return await this.trySystemClipboardPaste(addMode);
}, 'ClipboardManager.handlePaste');
/**
* Attempts to paste from ComfyUI Clipspace
* @param {AddMode} addMode - The mode for adding the layer
* @returns {Promise<boolean>} - True if successful, false otherwise
*/
async tryClipspacePaste(addMode: AddMode): Promise<boolean> {
try {
log.info("Attempting to paste from ComfyUI Clipspace");
ComfyApp.pasteFromClipspace(this.canvas.node);
tryClipspacePaste = withErrorHandling(async (addMode: AddMode): Promise<boolean> => {
log.info("Attempting to paste from ComfyUI Clipspace");
ComfyApp.pasteFromClipspace(this.canvas.node);
if (this.canvas.node.imgs && this.canvas.node.imgs.length > 0) {
const clipspaceImage = this.canvas.node.imgs[0];
if (clipspaceImage && clipspaceImage.src) {
log.info("Successfully got image from ComfyUI Clipspace");
const img = new Image();
img.onload = async () => {
await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
};
img.src = clipspaceImage.src;
return true;
}
if (this.canvas.node.imgs && this.canvas.node.imgs.length > 0) {
const clipspaceImage = this.canvas.node.imgs[0];
if (clipspaceImage && clipspaceImage.src) {
log.info("Successfully got image from ComfyUI Clipspace");
const img = new Image();
img.onload = async () => {
await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
};
img.src = clipspaceImage.src;
return true;
}
return false;
} catch (clipspaceError) {
log.warn("ComfyUI Clipspace paste failed:", clipspaceError);
return false;
}
}
return false;
}, 'ClipboardManager.tryClipspacePaste');
/**
* System clipboard paste - handles both image data and text paths
@@ -290,57 +280,57 @@ export class ClipboardManager {
* @param {AddMode} addMode - The mode for adding the layer
* @returns {Promise<boolean>} - True if successful, false otherwise
*/
async loadFileViaBackend(filePath: string, addMode: AddMode): Promise<boolean> {
try {
log.info("Loading file via ComfyUI backend:", filePath);
const response = await api.fetchApi("/ycnode/load_image_from_path", {
method: "POST",
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
file_path: filePath
})
});
if (!response.ok) {
const errorData = await response.json();
log.debug("Backend failed to load image:", errorData.error);
return false;
}
const data = await response.json();
if (!data.success) {
log.debug("Backend returned error:", data.error);
return false;
}
log.info("Successfully loaded image via ComfyUI backend:", filePath);
const img = new Image();
const success: boolean = await new Promise((resolve) => {
img.onload = async () => {
log.info("Successfully loaded image from backend response");
await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
resolve(true);
};
img.onerror = () => {
log.warn("Failed to load image from backend response");
resolve(false);
};
img.src = data.image_data;
});
return success;
} catch (error) {
log.debug("Error loading file via ComfyUI backend:", error);
return false;
loadFileViaBackend = withErrorHandling(async (filePath: string, addMode: AddMode): Promise<boolean> => {
if (!filePath) {
throw createValidationError("File path is required", { filePath });
}
}
log.info("Loading file via ComfyUI backend:", filePath);
const response = await api.fetchApi("/ycnode/load_image_from_path", {
method: "POST",
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
file_path: filePath
})
});
if (!response.ok) {
const errorData = await response.json();
throw createNetworkError(`Backend failed to load image: ${errorData.error}`, {
filePath,
status: response.status,
statusText: response.statusText
});
}
const data = await response.json();
if (!data.success) {
throw createFileError(`Backend returned error: ${data.error}`, { filePath, backendError: data.error });
}
log.info("Successfully loaded image via ComfyUI backend:", filePath);
const img = new Image();
const success: boolean = await new Promise((resolve) => {
img.onload = async () => {
log.info("Successfully loaded image from backend response");
await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
resolve(true);
};
img.onerror = () => {
log.warn("Failed to load image from backend response");
resolve(false);
};
img.src = data.image_data;
});
return success;
}, 'ClipboardManager.loadFileViaBackend');
/**
* Prompts the user to select a file when a local path is detected

22
src/utils/IconLoader.ts
View File

@@ -1,5 +1,6 @@
import { createModuleLogger } from "./LoggerUtils.js";
import { createCanvas } from "./CommonUtils.js";
import { withErrorHandling, createValidationError } from "../ErrorHandler.js";
const log = createModuleLogger('IconLoader');
@@ -81,24 +82,25 @@ export class IconLoader {
/**
* Preload all LayerForge tool icons
*/
preloadToolIcons(): Promise<void> {
preloadToolIcons = withErrorHandling(async (): Promise<void> => {
log.info('Starting to preload LayerForge tool icons');
const loadPromises = Object.keys(LAYERFORGE_TOOL_ICONS).map(tool => {
return this.loadIcon(tool);
});
return Promise.all(loadPromises).then(() => {
log.info(`Successfully preloaded ${loadPromises.length} tool icons`);
}).catch(error => {
log.error('Error preloading tool icons:', error);
});
}
await Promise.all(loadPromises);
log.info(`Successfully preloaded ${loadPromises.length} tool icons`);
}, 'IconLoader.preloadToolIcons');
/**
* Load a specific icon by tool name
*/
async loadIcon(tool: string): Promise<HTMLImageElement> {
loadIcon = withErrorHandling(async (tool: string): Promise<HTMLImageElement> => {
if (!tool) {
throw createValidationError("Tool name is required", { tool });
}
// Check if already cached
if (this._iconCache[tool] && this._iconCache[tool] instanceof HTMLImageElement) {
return this._iconCache[tool] as HTMLImageElement;
@@ -136,13 +138,13 @@ export class IconLoader {
img.src = iconData;
} else {
log.warn(`No icon data found for tool: ${tool}`);
reject(new Error(`No icon data for tool: ${tool}`));
reject(createValidationError(`No icon data for tool: ${tool}`, { tool, availableTools: Object.keys(LAYERFORGE_TOOL_ICONS) }));
}
});
this._loadingPromises.set(tool, loadPromise);
return loadPromise;
}
}, 'IconLoader.loadIcon');
/**
* Create a fallback canvas icon with colored background and text

36
src/utils/ImageAnalysis.ts
View File

@@ -1,5 +1,6 @@
import { createModuleLogger } from "./LoggerUtils.js";
import { createCanvas } from "./CommonUtils.js";
import { withErrorHandling, createValidationError } from "../ErrorHandler.js";
const log = createModuleLogger('ImageAnalysis');
@@ -10,7 +11,19 @@ const log = createModuleLogger('ImageAnalysis');
* @param blendArea - The percentage (0-100) of the area to apply blending
* @returns HTMLCanvasElement containing the distance field mask
*/
export function createDistanceFieldMask(image: HTMLImageElement, blendArea: number): HTMLCanvasElement {
/**
* Synchronous version of createDistanceFieldMask for use in synchronous rendering
*/
export function createDistanceFieldMaskSync(image: HTMLImageElement, blendArea: number): HTMLCanvasElement {
if (!image) {
log.error("Image is required for distance field mask");
return createCanvas(1, 1).canvas;
}
if (typeof blendArea !== 'number' || blendArea < 0 || blendArea > 100) {
log.error("Blend area must be a number between 0 and 100");
return createCanvas(1, 1).canvas;
}
const { canvas, ctx } = createCanvas(image.width, image.height, '2d', { willReadFrequently: true });
if (!ctx) {
@@ -95,6 +108,13 @@ export function createDistanceFieldMask(image: HTMLImageElement, blendArea: numb
return canvas;
}
/**
* Async version with error handling for use in async contexts
*/
export const createDistanceFieldMask = withErrorHandling(function(image: HTMLImageElement, blendArea: number): HTMLCanvasElement {
return createDistanceFieldMaskSync(image, blendArea);
}, 'createDistanceFieldMask');
/**
* Calculates the Euclidean distance transform of a binary mask.
* Uses a two-pass algorithm for efficiency.
@@ -214,7 +234,17 @@ function calculateDistanceFromEdges(width: number, height: number): Float32Array
* @param blendArea - The percentage (0-100) of the area to apply blending
* @returns HTMLCanvasElement containing the radial gradient mask
*/
export function createRadialGradientMask(width: number, height: number, blendArea: number): HTMLCanvasElement {
export const createRadialGradientMask = withErrorHandling(function(width: number, height: number, blendArea: number): HTMLCanvasElement {
if (typeof width !== 'number' || width <= 0) {
throw createValidationError("Width must be a positive number", { width });
}
if (typeof height !== 'number' || height <= 0) {
throw createValidationError("Height must be a positive number", { height });
}
if (typeof blendArea !== 'number' || blendArea < 0 || blendArea > 100) {
throw createValidationError("Blend area must be a number between 0 and 100", { blendArea });
}
const { canvas, ctx } = createCanvas(width, height);
if (!ctx) {
@@ -236,4 +266,4 @@ export function createRadialGradientMask(width: number, height: number, blendAre
ctx.fillRect(0, 0, width, height);
return canvas;
}
}, 'createRadialGradientMask');

54
src/utils/ImageUploadUtils.ts
View File

@@ -1,5 +1,6 @@
import { api } from "../../../scripts/api.js";
import { createModuleLogger } from "./LoggerUtils.js";
import { withErrorHandling, createValidationError, createNetworkError } from "../ErrorHandler.js";
const log = createModuleLogger('ImageUploadUtils');
@@ -35,7 +36,14 @@ export interface UploadImageResult {
* @param options - Upload options
* @returns Promise with upload result
*/
export async function uploadImageBlob(blob: Blob, options: UploadImageOptions = {}): Promise<UploadImageResult> {
export const uploadImageBlob = withErrorHandling(async function(blob: Blob, options: UploadImageOptions = {}): Promise<UploadImageResult> {
if (!blob) {
throw createValidationError("Blob is required", { blob });
}
if (blob.size === 0) {
throw createValidationError("Blob cannot be empty", { blobSize: blob.size });
}
const {
filenamePrefix = 'layerforge',
overwrite = true,
@@ -68,9 +76,12 @@ export async function uploadImageBlob(blob: Blob, options: UploadImageOptions =
});
if (!response.ok) {
const error = new Error(`Failed to upload image: ${response.statusText}`);
log.error('Image upload failed:', error);
throw error;
throw createNetworkError(`Failed to upload image: ${response.statusText}`, {
status: response.status,
statusText: response.statusText,
filename,
blobSize: blob.size
});
}
const data = await response.json();
@@ -93,7 +104,7 @@ export async function uploadImageBlob(blob: Blob, options: UploadImageOptions =
};
imageElement.onerror = (error) => {
log.error("Failed to load uploaded image", error);
reject(new Error("Failed to load uploaded image"));
reject(createNetworkError("Failed to load uploaded image", { error, imageUrl, filename }));
};
imageElement.src = imageUrl;
});
@@ -104,7 +115,7 @@ export async function uploadImageBlob(blob: Blob, options: UploadImageOptions =
imageUrl,
imageElement
};
}
}, 'uploadImageBlob');
/**
* Uploads canvas content as image blob
@@ -112,7 +123,11 @@ export async function uploadImageBlob(blob: Blob, options: UploadImageOptions =
* @param options - Upload options
* @returns Promise with upload result
*/
export async function uploadCanvasAsImage(canvas: any, options: UploadImageOptions = {}): Promise<UploadImageResult> {
export const uploadCanvasAsImage = withErrorHandling(async function(canvas: any, options: UploadImageOptions = {}): Promise<UploadImageResult> {
if (!canvas) {
throw createValidationError("Canvas is required", { canvas });
}
let blob: Blob | null = null;
// Handle different canvas types
@@ -123,15 +138,19 @@ export async function uploadCanvasAsImage(canvas: any, options: UploadImageOptio
// Standard HTML Canvas
blob = await new Promise<Blob | null>(resolve => canvas.toBlob(resolve));
} else {
throw new Error("Unsupported canvas type");
throw createValidationError("Unsupported canvas type", {
canvas,
hasCanvasLayers: !!canvas.canvasLayers,
isHTMLCanvas: canvas instanceof HTMLCanvasElement
});
}
if (!blob) {
throw new Error("Failed to generate canvas blob");
throw createValidationError("Failed to generate canvas blob", { canvas, options });
}
return uploadImageBlob(blob, options);
}
}, 'uploadCanvasAsImage');
/**
* Uploads canvas with mask as image blob
@@ -139,15 +158,22 @@ export async function uploadCanvasAsImage(canvas: any, options: UploadImageOptio
* @param options - Upload options
* @returns Promise with upload result
*/
export async function uploadCanvasWithMaskAsImage(canvas: any, options: UploadImageOptions = {}): Promise<UploadImageResult> {
export const uploadCanvasWithMaskAsImage = withErrorHandling(async function(canvas: any, options: UploadImageOptions = {}): Promise<UploadImageResult> {
if (!canvas) {
throw createValidationError("Canvas is required", { canvas });
}
if (!canvas.canvasLayers || typeof canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob !== 'function') {
throw new Error("Canvas does not support mask operations");
throw createValidationError("Canvas does not support mask operations", {
canvas,
hasCanvasLayers: !!canvas.canvasLayers,
hasMaskMethod: !!(canvas.canvasLayers && typeof canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob === 'function')
});
}
const blob = await canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob();
if (!blob) {
throw new Error("Failed to generate canvas with mask blob");
throw createValidationError("Failed to generate canvas with mask blob", { canvas, options });
}
return uploadImageBlob(blob, options);
}
}, 'uploadCanvasWithMaskAsImage');

57
src/utils/MaskProcessingUtils.ts
View File

@@ -1,6 +1,7 @@
import { createModuleLogger } from "./LoggerUtils.js";
import { createCanvas } from "./CommonUtils.js";
import { convertToImage } from "./ImageUtils.js";
import { withErrorHandling, createValidationError } from "../ErrorHandler.js";
const log = createModuleLogger('MaskProcessingUtils');
@@ -25,10 +26,14 @@ export interface MaskProcessingOptions {
* @param options - Processing options
* @returns Promise with processed mask as HTMLCanvasElement
*/
export async function processImageToMask(
export const processImageToMask = withErrorHandling(async function(
sourceImage: HTMLImageElement | HTMLCanvasElement,
options: MaskProcessingOptions = {}
): Promise<HTMLCanvasElement> {
if (!sourceImage) {
throw createValidationError("Source image is required", { sourceImage });
}
const {
targetWidth = sourceImage.width,
targetHeight = sourceImage.height,
@@ -47,7 +52,7 @@ export async function processImageToMask(
const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(targetWidth, targetHeight, '2d', { willReadFrequently: true });
if (!tempCtx) {
throw new Error("Failed to get 2D context for mask processing");
throw createValidationError("Failed to get 2D context for mask processing");
}
// Draw the source image
@@ -79,7 +84,7 @@ export async function processImageToMask(
log.debug('Mask processing completed');
return tempCanvas;
}
}, 'processImageToMask');
/**
* Processes image data with custom pixel transformation
@@ -88,11 +93,18 @@ export async function processImageToMask(
* @param options - Processing options
* @returns Promise with processed image as HTMLCanvasElement
*/
export async function processImageWithTransform(
export const processImageWithTransform = withErrorHandling(async function(
sourceImage: HTMLImageElement | HTMLCanvasElement,
pixelTransform: (r: number, g: number, b: number, a: number, index: number) => [number, number, number, number],
options: MaskProcessingOptions = {}
): Promise<HTMLCanvasElement> {
if (!sourceImage) {
throw createValidationError("Source image is required", { sourceImage });
}
if (!pixelTransform || typeof pixelTransform !== 'function') {
throw createValidationError("Pixel transform function is required", { pixelTransform });
}
const {
targetWidth = sourceImage.width,
targetHeight = sourceImage.height
@@ -101,7 +113,7 @@ export async function processImageWithTransform(
const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(targetWidth, targetHeight, '2d', { willReadFrequently: true });
if (!tempCtx) {
throw new Error("Failed to get 2D context for image processing");
throw createValidationError("Failed to get 2D context for image processing");
}
tempCtx.drawImage(sourceImage, 0, 0, targetWidth, targetHeight);
@@ -118,7 +130,7 @@ export async function processImageWithTransform(
tempCtx.putImageData(imageData, 0, 0);
return tempCanvas;
}
}, 'processImageWithTransform');
/**
* Crops an image to a specific region
@@ -126,12 +138,23 @@ export async function processImageWithTransform(
* @param cropArea - Crop area {x, y, width, height}
* @returns Promise with cropped image as HTMLCanvasElement
*/
export async function cropImage(
export const cropImage = withErrorHandling(async function(
sourceImage: HTMLImageElement | HTMLCanvasElement,
cropArea: { x: number; y: number; width: number; height: number }
): Promise<HTMLCanvasElement> {
if (!sourceImage) {
throw createValidationError("Source image is required", { sourceImage });
}
if (!cropArea || typeof cropArea !== 'object') {
throw createValidationError("Crop area is required", { cropArea });
}
const { x, y, width, height } = cropArea;
if (width <= 0 || height <= 0) {
throw createValidationError("Crop area must have positive width and height", { cropArea });
}
log.debug('Cropping image:', {
sourceSize: { width: sourceImage.width, height: sourceImage.height },
cropArea
@@ -140,7 +163,7 @@ export async function cropImage(
const { canvas, ctx } = createCanvas(width, height);
if (!ctx) {
throw new Error("Failed to get 2D context for image cropping");
throw createValidationError("Failed to get 2D context for image cropping");
}
ctx.drawImage(
@@ -150,7 +173,7 @@ export async function cropImage(
);
return canvas;
}
}, 'cropImage');
/**
* Applies a mask to an image using viewport positioning
@@ -161,13 +184,23 @@ export async function cropImage(
* @param maskColor - Mask color (default: white)
* @returns Promise with processed mask for viewport
*/
export async function processMaskForViewport(
export const processMaskForViewport = withErrorHandling(async function(
maskImage: HTMLImageElement | HTMLCanvasElement,
targetWidth: number,
targetHeight: number,
viewportOffset: { x: number; y: number },
maskColor: { r: number; g: number; b: number } = { r: 255, g: 255, b: 255 }
): Promise<HTMLCanvasElement> {
if (!maskImage) {
throw createValidationError("Mask image is required", { maskImage });
}
if (!viewportOffset || typeof viewportOffset !== 'object') {
throw createValidationError("Viewport offset is required", { viewportOffset });
}
if (targetWidth <= 0 || targetHeight <= 0) {
throw createValidationError("Target dimensions must be positive", { targetWidth, targetHeight });
}
log.debug("Processing mask for viewport:", {
sourceSize: { width: maskImage.width, height: maskImage.height },
targetSize: { width: targetWidth, height: targetHeight },
@@ -177,7 +210,7 @@ export async function processMaskForViewport(
const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(targetWidth, targetHeight, '2d', { willReadFrequently: true });
if (!tempCtx) {
throw new Error("Failed to get 2D context for viewport mask processing");
throw createValidationError("Failed to get 2D context for viewport mask processing");
}
// Calculate source coordinates based on viewport offset
@@ -214,4 +247,4 @@ export async function processMaskForViewport(
log.debug("Viewport mask processing completed");
return tempCanvas;
}
}, 'processMaskForViewport');

61
src/utils/PreviewUtils.ts
View File

@@ -1,4 +1,5 @@
import { createModuleLogger } from "./LoggerUtils.js";
import { withErrorHandling, createValidationError } from "../ErrorHandler.js";
import type { ComfyNode } from '../types';
const log = createModuleLogger('PreviewUtils');
@@ -23,11 +24,18 @@ export interface PreviewOptions {
* @param options - Preview options
* @returns Promise with created Image element
*/
export async function createPreviewFromCanvas(
export const createPreviewFromCanvas = withErrorHandling(async function(
canvas: any,
node: ComfyNode,
options: PreviewOptions = {}
): Promise<HTMLImageElement> {
if (!canvas) {
throw createValidationError("Canvas is required", { canvas });
}
if (!node) {
throw createValidationError("Node is required", { node });
}
const {
includeMask = true,
updateNodeImages = true,
@@ -46,7 +54,7 @@ export async function createPreviewFromCanvas(
// Get blob from canvas if not provided
if (!blob) {
if (!canvas.canvasLayers) {
throw new Error("Canvas does not have canvasLayers");
throw createValidationError("Canvas does not have canvasLayers", { canvas });
}
if (includeMask && typeof canvas.canvasLayers.getFlattenedCanvasWithMaskAsBlob === 'function') {
@@ -54,12 +62,15 @@ export async function createPreviewFromCanvas(
} else if (typeof canvas.canvasLayers.getFlattenedCanvasAsBlob === 'function') {
blob = await canvas.canvasLayers.getFlattenedCanvasAsBlob();
} else {
throw new Error("Canvas does not support required blob generation methods");
throw createValidationError("Canvas does not support required blob generation methods", {
canvas,
availableMethods: Object.getOwnPropertyNames(canvas.canvasLayers)
});
}
}
if (!blob) {
throw new Error("Failed to generate canvas blob for preview");
throw createValidationError("Failed to generate canvas blob for preview", { canvas, options });
}
// Create preview image
@@ -78,7 +89,7 @@ export async function createPreviewFromCanvas(
};
previewImage.onerror = (error) => {
log.error("Failed to load preview image", error);
reject(new Error("Failed to load preview image"));
reject(createValidationError("Failed to load preview image", { error, blob: blob?.size }));
};
});
@@ -89,7 +100,7 @@ export async function createPreviewFromCanvas(
}
return previewImage;
}
}, 'createPreviewFromCanvas');
/**
* Creates a preview image from a blob
@@ -98,11 +109,18 @@ export async function createPreviewFromCanvas(
* @param updateNodeImages - Whether to update node.imgs (default: false)
* @returns Promise with created Image element
*/
export async function createPreviewFromBlob(
export const createPreviewFromBlob = withErrorHandling(async function(
blob: Blob,
node?: ComfyNode,
updateNodeImages: boolean = false
): Promise<HTMLImageElement> {
if (!blob) {
throw createValidationError("Blob is required", { blob });
}
if (blob.size === 0) {
throw createValidationError("Blob cannot be empty", { blobSize: blob.size });
}
log.debug('Creating preview from blob:', {
blobSize: blob.size,
updateNodeImages,
@@ -122,7 +140,7 @@ export async function createPreviewFromBlob(
};
previewImage.onerror = (error) => {
log.error("Failed to load preview image from blob", error);
reject(new Error("Failed to load preview image from blob"));
reject(createValidationError("Failed to load preview image from blob", { error, blobSize: blob.size }));
};
});
@@ -132,7 +150,7 @@ export async function createPreviewFromBlob(
}
return previewImage;
}
}, 'createPreviewFromBlob');
/**
* Updates node preview after canvas changes
@@ -141,11 +159,18 @@ export async function createPreviewFromBlob(
* @param includeMask - Whether to include mask in preview
* @returns Promise with updated preview image
*/
export async function updateNodePreview(
export const updateNodePreview = withErrorHandling(async function(
canvas: any,
node: ComfyNode,
includeMask: boolean = true
): Promise<HTMLImageElement> {
if (!canvas) {
throw createValidationError("Canvas is required", { canvas });
}
if (!node) {
throw createValidationError("Node is required", { node });
}
log.info('Updating node preview:', {
nodeId: node.id,
includeMask
@@ -168,7 +193,7 @@ export async function updateNodePreview(
log.info('Node preview updated successfully');
return previewImage;
}
}, 'updateNodePreview');
/**
* Clears node preview images
@@ -207,13 +232,23 @@ export function getCurrentPreview(node: ComfyNode): HTMLImageElement | null {
* @param processor - Custom processing function that takes canvas and returns blob
* @returns Promise with processed preview image
*/
export async function createCustomPreview(
export const createCustomPreview = withErrorHandling(async function(
canvas: any,
node: ComfyNode,
processor: (canvas: any) => Promise<Blob>
): Promise<HTMLImageElement> {
if (!canvas) {
throw createValidationError("Canvas is required", { canvas });
}
if (!node) {
throw createValidationError("Node is required", { node });
}
if (!processor || typeof processor !== 'function') {
throw createValidationError("Processor function is required", { processor });
}
log.debug('Creating custom preview:', { nodeId: node.id });
const blob = await processor(canvas);
return createPreviewFromBlob(blob, node, true);
}
}, 'createCustomPreview');

41
src/utils/ResourceManager.ts
View File

@@ -1,7 +1,17 @@
// @ts-ignore
import { $el } from "../../../scripts/ui.js";
import { createModuleLogger } from "./LoggerUtils.js";
import { withErrorHandling, createValidationError, createNetworkError } from "../ErrorHandler.js";
const log = createModuleLogger('ResourceManager');
export const addStylesheet = withErrorHandling(function(url: string): void {
if (!url) {
throw createValidationError("URL is required", { url });
}
log.debug('Adding stylesheet:', { url });
export function addStylesheet(url: string): void {
if (url.endsWith(".js")) {
url = url.substr(0, url.length - 2) + "css";
}
@@ -11,9 +21,15 @@ export function addStylesheet(url: string): void {
type: "text/css",
href: url.startsWith("http") ? url : getUrl(url),
});
}
log.debug('Stylesheet added successfully:', { finalUrl: url });
}, 'addStylesheet');
export function getUrl(path: string, baseUrl?: string | URL): string {
if (!path) {
throw createValidationError("Path is required", { path });
}
if (baseUrl) {
return new URL(path, baseUrl).toString();
} else {
@@ -22,11 +38,24 @@ export function getUrl(path: string, baseUrl?: string | URL): string {
}
}
export async function loadTemplate(path: string, baseUrl?: string | URL): Promise<string> {
export const loadTemplate = withErrorHandling(async function(path: string, baseUrl?: string | URL): Promise<string> {
if (!path) {
throw createValidationError("Path is required", { path });
}
const url = getUrl(path, baseUrl);
log.debug('Loading template:', { path, url });
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to load template: ${url}`);
throw createNetworkError(`Failed to load template: ${url}`, {
url,
status: response.status,
statusText: response.statusText
});
}
return await response.text();
}
const content = await response.text();
log.debug('Template loaded successfully:', { path, contentLength: content.length });
return content;
}, 'loadTemplate');

120
src/utils/WebSocketManager.ts
View File

@@ -1,4 +1,5 @@
import {createModuleLogger} from "./LoggerUtils.js";
import { withErrorHandling, createValidationError, createNetworkError } from "../ErrorHandler.js";
import type { WebSocketMessage, AckCallbacks } from "../types.js";
const log = createModuleLogger('WebSocketManager');
@@ -26,7 +27,7 @@ class WebSocketManager {
this.connect();
}
connect() {
connect = withErrorHandling(() => {
if (this.socket && this.socket.readyState === WebSocket.OPEN) {
log.debug("WebSocket is already open.");
return;
@@ -37,58 +38,56 @@ class WebSocketManager {
return;
}
if (!this.url) {
throw createValidationError("WebSocket URL is required", { url: this.url });
}
this.isConnecting = true;
log.info(`Connecting to WebSocket at ${this.url}...`);
try {
this.socket = new WebSocket(this.url);
this.socket = new WebSocket(this.url);
this.socket.onopen = () => {
this.isConnecting = false;
this.reconnectAttempts = 0;
log.info("WebSocket connection established.");
this.flushMessageQueue();
};
this.socket.onmessage = (event: MessageEvent) => {
try {
const data: WebSocketMessage = JSON.parse(event.data);
log.debug("Received message:", data);
if (data.type === 'ack' && data.nodeId) {
const callback = this.ackCallbacks.get(data.nodeId);
if (callback) {
log.debug(`ACK received for nodeId: ${data.nodeId}, resolving promise.`);
callback.resolve(data);
this.ackCallbacks.delete(data.nodeId);
}
}
} catch (error) {
log.error("Error parsing incoming WebSocket message:", error);
}
};
this.socket.onclose = (event: CloseEvent) => {
this.isConnecting = false;
if (event.wasClean) {
log.info(`WebSocket closed cleanly, code=${event.code}, reason=${event.reason}`);
} else {
log.warn("WebSocket connection died. Attempting to reconnect...");
this.handleReconnect();
}
};
this.socket.onerror = (error: Event) => {
this.isConnecting = false;
log.error("WebSocket error:", error);
};
} catch (error) {
this.socket.onopen = () => {
this.isConnecting = false;
log.error("Failed to create WebSocket connection:", error);
this.handleReconnect();
}
}
this.reconnectAttempts = 0;
log.info("WebSocket connection established.");
this.flushMessageQueue();
};
this.socket.onmessage = (event: MessageEvent) => {
try {
const data: WebSocketMessage = JSON.parse(event.data);
log.debug("Received message:", data);
if (data.type === 'ack' && data.nodeId) {
const callback = this.ackCallbacks.get(data.nodeId);
if (callback) {
log.debug(`ACK received for nodeId: ${data.nodeId}, resolving promise.`);
callback.resolve(data);
this.ackCallbacks.delete(data.nodeId);
}
}
} catch (error) {
log.error("Error parsing incoming WebSocket message:", error);
}
};
this.socket.onclose = (event: CloseEvent) => {
this.isConnecting = false;
if (event.wasClean) {
log.info(`WebSocket closed cleanly, code=${event.code}, reason=${event.reason}`);
} else {
log.warn("WebSocket connection died. Attempting to reconnect...");
this.handleReconnect();
}
};
this.socket.onerror = (error: Event) => {
this.isConnecting = false;
throw createNetworkError("WebSocket connection error", { error, url: this.url });
};
}, 'WebSocketManager.connect');
handleReconnect() {
if (this.reconnectAttempts < this.maxReconnectAttempts) {
@@ -100,13 +99,17 @@ class WebSocketManager {
}
}
sendMessage(data: WebSocketMessage, requiresAck = false): Promise<WebSocketMessage | void> {
return new Promise((resolve, reject) => {
const nodeId = data.nodeId;
if (requiresAck && !nodeId) {
return reject(new Error("A nodeId is required for messages that need acknowledgment."));
}
sendMessage = withErrorHandling(async (data: WebSocketMessage, requiresAck = false): Promise<WebSocketMessage | void> => {
if (!data || typeof data !== 'object') {
throw createValidationError("Message data is required", { data });
}
const nodeId = data.nodeId;
if (requiresAck && !nodeId) {
throw createValidationError("A nodeId is required for messages that need acknowledgment", { data, requiresAck });
}
return new Promise((resolve, reject) => {
const message = JSON.stringify(data);
if (this.socket && this.socket.readyState === WebSocket.OPEN) {
@@ -117,7 +120,7 @@ class WebSocketManager {
const timeout = setTimeout(() => {
this.ackCallbacks.delete(nodeId);
reject(new Error(`ACK timeout for nodeId ${nodeId}`));
reject(createNetworkError(`ACK timeout for nodeId ${nodeId}`, { nodeId, timeout: 10000 }));
log.warn(`ACK timeout for nodeId ${nodeId}.`);
}, 10000); // 10-second timeout
@@ -142,13 +145,16 @@ class WebSocketManager {
}
if (requiresAck) {
reject(new Error("Cannot send message with ACK required while disconnected."));
reject(createNetworkError("Cannot send message with ACK required while disconnected", {
socketState: this.socket?.readyState,
isConnecting: this.isConnecting
}));
} else {
resolve();
}
}
});
}
}, 'WebSocketManager.sendMessage');
flushMessageQueue() {
log.debug(`Flushing ${this.messageQueue.length} queued messages.`);

20
src/utils/mask_utils.ts
View File

@@ -1,4 +1,5 @@
import {createModuleLogger} from "./LoggerUtils.js";
import { withErrorHandling, createValidationError } from "../ErrorHandler.js";
import type { Canvas } from '../Canvas.js';
// @ts-ignore
import {ComfyApp} from "../../../scripts/app.js";
@@ -146,26 +147,27 @@ export function press_maskeditor_cancel(app: ComfyApp): void {
* @param {HTMLImageElement | HTMLCanvasElement} maskImage - Obraz maski do nałożenia
* @param {boolean} sendCleanImage - Czy wysłać czysty obraz (bez istniejącej maski)
*/
export function start_mask_editor_with_predefined_mask(canvasInstance: Canvas, maskImage: HTMLImageElement | HTMLCanvasElement, sendCleanImage = true): void {
if (!canvasInstance || !maskImage) {
log.error('Canvas instance and mask image are required');
return;
export const start_mask_editor_with_predefined_mask = withErrorHandling(function(canvasInstance: Canvas, maskImage: HTMLImageElement | HTMLCanvasElement, sendCleanImage = true): void {
if (!canvasInstance) {
throw createValidationError('Canvas instance is required', { canvasInstance });
}
if (!maskImage) {
throw createValidationError('Mask image is required', { maskImage });
}
canvasInstance.startMaskEditor(maskImage, sendCleanImage);
}
}, 'start_mask_editor_with_predefined_mask');
/**
* Uruchamia mask editor z automatycznym zachowaniem (czysty obraz + istniejąca maska)
* @param {Canvas} canvasInstance - Instancja Canvas
*/
export function start_mask_editor_auto(canvasInstance: Canvas): void {
export const start_mask_editor_auto = withErrorHandling(function(canvasInstance: Canvas): void {
if (!canvasInstance) {
log.error('Canvas instance is required');
return;
throw createValidationError('Canvas instance is required', { canvasInstance });
}
canvasInstance.startMaskEditor(null, true);
}
}, 'start_mask_editor_auto');
// Duplikowane funkcje zostały przeniesione do ImageUtils.ts:
// - create_mask_from_image_src -> createMaskFromImageSrc