{
+ log('Message received from main thread:', e.data ? 'data received' : 'no data');
+ const { state, nodeId } = e.data;
+
+ if (!state || !nodeId) {
+ error('Invalid data received from main thread');
+ return;
+ }
+
+ try {
+ log(`Saving state for node: ${nodeId}`);
+ await setCanvasState(nodeId, state);
+ log(`State saved successfully for node: ${nodeId}`);
+ } catch (err) {
+ error(`Failed to save state for node: ${nodeId}`, err);
+ }
+};
diff --git a/src/templates/clipspace_clipboard_tooltip.html b/src/templates/clipspace_clipboard_tooltip.html
new file mode 100644
index 0000000..2401727
--- /dev/null
+++ b/src/templates/clipspace_clipboard_tooltip.html
@@ -0,0 +1,13 @@
+📋 ComfyUI Clipspace Mode
+
+ | Ctrl + C | Copy selected layers to internal clipboard + ComfyUI Clipspace as flattened image |
+ | Ctrl + V | Priority: |
+ | 1️⃣ Internal clipboard (copied layers) |
+ | 2️⃣ ComfyUI Clipspace (workflow images) |
+ | 3️⃣ System clipboard (fallback) |
+ | Paste Image | Same as Ctrl+V but respects fit_on_add setting |
+ | Drag & Drop | Load images directly from files |
+
+
+ 💡 Bestt for: ComfyUI workflow integration and node-to-node image transfer
+
diff --git a/src/templates/mask_shortcuts.html b/src/templates/mask_shortcuts.html
new file mode 100644
index 0000000..69721cc
--- /dev/null
+++ b/src/templates/mask_shortcuts.html
@@ -0,0 +1,9 @@
+Mask Mode
+
+ | Click + Drag | Paint on the mask |
+ | Middle Mouse Button + Drag | Pan canvas view |
+ | Mouse Wheel | Zoom view in/out |
+ | Brush Controls | Use sliders to control brush Size, Strength, and Hardness |
+ | Clear Mask | Remove the entire mask |
+ | Exit Mode | Click the "Draw Mask" button again |
+
diff --git a/src/templates/standard_shortcuts.html b/src/templates/standard_shortcuts.html
new file mode 100644
index 0000000..ded155e
--- /dev/null
+++ b/src/templates/standard_shortcuts.html
@@ -0,0 +1,40 @@
+Canvas Control
+
+ | Click + Drag | Pan canvas view |
+ | Mouse Wheel | Zoom view in/out |
+ | Shift + Click (background) | Start resizing canvas area |
+ | Shift + Ctrl + Click | Start moving entire canvas |
+ | Single Click (background) | Deselect all layers |
+
+
+Clipboard & I/O
+
+ | Ctrl + C | Copy selected layer(s) |
+ | Ctrl + V | Paste from clipboard (image or internal layers) |
+ | Drag & Drop Image File | Add image as a new layer |
+
+
+Layer Interaction
+
+ | Click + Drag | Move selected layer(s) |
+ | Ctrl + Click | Add/Remove layer from selection |
+ | Alt + Drag | Clone selected layer(s) |
+ | Right Click | Show blend mode & opacity menu |
+ | Mouse Wheel | Scale layer (snaps to grid) |
+ | Ctrl + Mouse Wheel | Fine-scale layer |
+ | Shift + Mouse Wheel | Rotate layer by 5° steps |
+ | Shift + Ctrl + Mouse Wheel | Snap rotation to 5° increments |
+ | Arrow Keys | Nudge layer by 1px |
+ | Shift + Arrow Keys | Nudge layer by 10px |
+ | [ or ] | Rotate by 1° |
+ | Shift + [ or ] | Rotate by 10° |
+ | Delete | Delete selected layer(s) |
+
+
+Transform Handles (on selected layer)
+
+ | Drag Corner/Side | Resize layer |
+ | Drag Rotation Handle | Rotate layer |
+ | Hold Shift | Keep aspect ratio / Snap rotation to 15° |
+ | Hold Ctrl | Snap to grid |
+
diff --git a/src/templates/system_clipboard_tooltip.html b/src/templates/system_clipboard_tooltip.html
new file mode 100644
index 0000000..b3be8eb
--- /dev/null
+++ b/src/templates/system_clipboard_tooltip.html
@@ -0,0 +1,16 @@
+📋 System Clipboard Mode
+
+ | Ctrl + C | Copy selected layers to internal clipboard + system clipboard as flattened image |
+ | Ctrl + V | Priority: |
+ | 1️⃣ Internal clipboard (copied layers) |
+ | 2️⃣ System clipboard (images, screenshots) |
+ | 3️⃣ System clipboard (file paths, URLs) |
+ | Paste Image | Same as Ctrl+V but respects fit_on_add setting |
+ | Drag & Drop | Load images directly from files |
+
+
+ ⚠️ Security Note: "Paste Image" button for external images may not work due to browser security restrictions. Use Ctrl+V instead or Drag & Drop.
+
+
+ 💡 Best for: Working with screenshots, copied images, file paths, and urls.
+
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..8561258
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,147 @@
+import type { Canvas as CanvasClass } from './Canvas';
+import type { CanvasLayers } from './CanvasLayers';
+
+export interface Layer {
+ id: string;
+ image: HTMLImageElement;
+ imageId: string;
+ name: string;
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+ originalWidth: number;
+ originalHeight: number;
+ rotation: number;
+ zIndex: number;
+ blendMode: string;
+ opacity: number;
+ mask?: Float32Array;
+}
+
+export interface ComfyNode {
+ id: number;
+ imgs?: HTMLImageElement[];
+ widgets: any[];
+ size: [number, number];
+ graph: any;
+ canvasWidget?: any;
+ onResize?: () => void;
+ addDOMWidget: (name: string, type: string, element: HTMLElement, options?: any) => any;
+ addWidget: (type: string, name: string, value: any, callback?: (value: any) => void, options?: any) => any;
+ setDirtyCanvas: (force: boolean, dirty: boolean) => void;
+}
+
+declare global {
+ interface Window {
+ MaskEditorDialog?: {
+ instance?: {
+ getMessageBroker: () => any;
+ };
+ };
+ }
+
+ interface HTMLElement {
+ getContext?(contextId: '2d', options?: any): CanvasRenderingContext2D | null;
+ width: number;
+ height: number;
+ }
+}
+
+export interface Canvas {
+ layers: Layer[];
+ selectedLayer: Layer | null;
+ canvasSelection: any;
+ lastMousePosition: Point;
+ width: number;
+ height: number;
+ node: ComfyNode;
+ viewport: { x: number, y: number, zoom: number };
+ canvas: HTMLCanvasElement;
+ offscreenCanvas: HTMLCanvasElement;
+ isMouseOver: boolean;
+ maskTool: any;
+ canvasLayersPanel: any;
+ canvasState: any;
+ widget?: { value: string };
+ imageReferenceManager: any;
+ imageCache: any;
+ dataInitialized: boolean;
+ pendingDataCheck: number | null;
+ pendingBatchContext: any;
+ canvasLayers: any;
+ saveState: () => void;
+ render: () => void;
+ updateSelection: (layers: Layer[]) => void;
+ requestSaveState: (immediate?: boolean) => void;
+ saveToServer: (fileName: string) => Promise;
+ removeLayersByIds: (ids: string[]) => void;
+ batchPreviewManagers: any[];
+ getMouseWorldCoordinates: (e: MouseEvent) => Point;
+ getMouseViewCoordinates: (e: MouseEvent) => Point;
+ updateOutputAreaSize: (width: number, height: number) => void;
+ undo: () => void;
+ redo: () => void;
+}
+
+// A simplified interface for the Canvas class, containing only what ClipboardManager needs.
+export interface CanvasForClipboard {
+ canvasLayers: CanvasLayersForClipboard;
+ node: ComfyNode;
+}
+
+// A simplified interface for the CanvasLayers class.
+export interface CanvasLayersForClipboard {
+ internalClipboard: Layer[];
+ pasteLayers(): void;
+ addLayerWithImage(image: HTMLImageElement, layerProps: Partial, addMode: string): Promise;
+}
+
+export type AddMode = 'mouse' | 'fit' | 'center' | 'default';
+
+export type ClipboardPreference = 'system' | 'clipspace';
+
+export interface WebSocketMessage {
+ type: string;
+ nodeId?: string;
+ [key: string]: any;
+}
+
+export interface AckCallback {
+ resolve: (value: WebSocketMessage | PromiseLike) => void;
+ reject: (reason?: any) => void;
+}
+
+export type AckCallbacks = Map;
+
+export interface CanvasState {
+ layersUndoStack: Layer[][];
+ layersRedoStack: Layer[][];
+ maskUndoStack: HTMLCanvasElement[];
+ maskRedoStack: HTMLCanvasElement[];
+ saveMaskState(): void;
+}
+
+export interface Point {
+ x: number;
+ y: number;
+}
+
+export interface Viewport {
+ x: number;
+ y: number;
+ zoom: number;
+}
+
+export interface Tensor {
+ data: Float32Array;
+ shape: number[];
+ width: number;
+ height: number;
+}
+
+export interface ImageDataPixel {
+ data: Uint8ClampedArray;
+ width: number;
+ height: number;
+}
diff --git a/src/utils/ClipboardManager.ts b/src/utils/ClipboardManager.ts
new file mode 100644
index 0000000..cf3b2f9
--- /dev/null
+++ b/src/utils/ClipboardManager.ts
@@ -0,0 +1,524 @@
+import {createModuleLogger} from "./LoggerUtils.js";
+
+// @ts-ignore
+import {api} from "../../../scripts/api.js";
+// @ts-ignore
+import {app} from "../../../scripts/app.js";
+// @ts-ignore
+import {ComfyApp} from "../../../scripts/app.js";
+
+import type { AddMode, CanvasForClipboard, ClipboardPreference } from "../types.js";
+
+const log = createModuleLogger('ClipboardManager');
+
+export class ClipboardManager {
+ canvas: CanvasForClipboard;
+ clipboardPreference: ClipboardPreference;
+ constructor(canvas: CanvasForClipboard) {
+ this.canvas = canvas;
+ this.clipboardPreference = 'system'; // 'system', 'clipspace'
+ }
+
+ /**
+ * Main paste handler that delegates to appropriate methods
+ * @param {AddMode} addMode - The mode for adding the layer
+ * @param {ClipboardPreference} preference - Clipboard preference ('system' or 'clipspace')
+ * @returns {Promise} - True if successful, false otherwise
+ */
+ async handlePaste(addMode: AddMode = 'mouse', preference: ClipboardPreference = 'system'): Promise {
+ try {
+ 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();
+ 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;
+ }
+ }
+
+ /**
+ * Attempts to paste from ComfyUI Clipspace
+ * @param {AddMode} addMode - The mode for adding the layer
+ * @returns {Promise} - True if successful, false otherwise
+ */
+ async tryClipspacePaste(addMode: AddMode): Promise {
+ try {
+ 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;
+ }
+ }
+ return false;
+ } catch (clipspaceError) {
+ log.warn("ComfyUI Clipspace paste failed:", clipspaceError);
+ return false;
+ }
+ }
+
+ /**
+ * System clipboard paste - handles both image data and text paths
+ * @param {AddMode} addMode - The mode for adding the layer
+ * @returns {Promise} - True if successful, false otherwise
+ */
+ async trySystemClipboardPaste(addMode: AddMode): Promise {
+ log.info("ClipboardManager: Checking system clipboard for images and paths");
+
+ if (navigator.clipboard?.read) {
+ try {
+ const clipboardItems = await navigator.clipboard.read();
+
+ for (const item of clipboardItems) {
+ log.debug("Clipboard item types:", item.types);
+
+ const imageType = item.types.find(type => type.startsWith('image/'));
+ if (imageType) {
+ try {
+ const blob = await item.getType(imageType);
+ const reader = new FileReader();
+ reader.onload = (event) => {
+ const img = new Image();
+ img.onload = async () => {
+ log.info("Successfully loaded image from system clipboard");
+ await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+ };
+ if (event.target?.result) {
+ img.src = event.target.result as string;
+ }
+ };
+ reader.readAsDataURL(blob);
+ log.info("Found image data in system clipboard");
+ return true;
+ } catch (error) {
+ log.debug("Error reading image data:", error);
+ }
+ }
+
+ const textTypes = ['text/plain', 'text/uri-list'];
+ for (const textType of textTypes) {
+ if (item.types.includes(textType)) {
+ try {
+ const textBlob = await item.getType(textType);
+ const text = await textBlob.text();
+
+ if (this.isValidImagePath(text)) {
+ log.info("Found image path in clipboard:", text);
+ const success = await this.loadImageFromPath(text, addMode);
+ if (success) {
+ return true;
+ }
+ }
+ } catch (error) {
+ log.debug(`Error reading ${textType}:`, error);
+ }
+ }
+ }
+ }
+ } catch (error) {
+ log.debug("Modern clipboard API failed:", error);
+ }
+ }
+
+ if (navigator.clipboard?.readText) {
+ try {
+ const text = await navigator.clipboard.readText();
+ log.debug("Found text in clipboard:", text);
+
+ if (text && this.isValidImagePath(text)) {
+ log.info("Found valid image path in clipboard:", text);
+ const success = await this.loadImageFromPath(text, addMode);
+ if (success) {
+ return true;
+ }
+ }
+ } catch (error) {
+ log.debug("Could not read text from clipboard:", error);
+ }
+ }
+
+ log.debug("No images or valid image paths found in system clipboard");
+ return false;
+ }
+
+
+ /**
+ * Validates if a text string is a valid image file path or URL
+ * @param {string} text - The text to validate
+ * @returns {boolean} - True if the text appears to be a valid image file path or URL
+ */
+ isValidImagePath(text: string): boolean {
+ if (!text || typeof text !== 'string') {
+ return false;
+ }
+
+ text = text.trim();
+
+ if (!text) {
+ return false;
+ }
+
+ if (text.startsWith('http://') || text.startsWith('https://') || text.startsWith('file://')) {
+
+ try {
+ new URL(text);
+ log.debug("Detected valid URL:", text);
+ return true;
+ } catch (e) {
+ log.debug("Invalid URL format:", text);
+ return false;
+ }
+ }
+
+ const imageExtensions = [
+ '.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp',
+ '.svg', '.tiff', '.tif', '.ico', '.avif'
+ ];
+
+ const hasImageExtension = imageExtensions.some(ext =>
+ text.toLowerCase().endsWith(ext)
+ );
+
+ if (!hasImageExtension) {
+ log.debug("No valid image extension found in:", text);
+ return false;
+ }
+
+
+ const pathPatterns = [
+ /^[a-zA-Z]:[\\\/]/, // Windows absolute path (C:\... or C:/...)
+ /^[\\\/]/, // Unix absolute path (/...)
+ /^\.{1,2}[\\\/]/, // Relative path (./... or ../...)
+ /^[^\\\/]*[\\\/]/ // Contains path separators
+ ];
+
+ const isValidPath = pathPatterns.some(pattern => pattern.test(text)) ||
+ (!text.includes('/') && !text.includes('\\') && text.includes('.')); // Simple filename
+
+ if (isValidPath) {
+ log.debug("Detected valid local file path:", text);
+ } else {
+ log.debug("Invalid local file path format:", text);
+ }
+
+ return isValidPath;
+ }
+
+ /**
+ * Attempts to load an image from a file path using simplified methods
+ * @param {string} filePath - The file path to load
+ * @param {AddMode} addMode - The mode for adding the layer
+ * @returns {Promise} - True if successful, false otherwise
+ */
+ async loadImageFromPath(filePath: string, addMode: AddMode): Promise {
+
+ if (filePath.startsWith('http://') || filePath.startsWith('https://')) {
+ try {
+ const img = new Image();
+ img.crossOrigin = 'anonymous';
+ return new Promise((resolve) => {
+ img.onload = async () => {
+ log.info("Successfully loaded image from URL");
+ await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+ resolve(true);
+ };
+ img.onerror = () => {
+ log.warn("Failed to load image from URL:", filePath);
+ resolve(false);
+ };
+ img.src = filePath;
+ });
+ } catch (error) {
+ log.warn("Error loading image from URL:", error);
+ return false;
+ }
+ }
+
+ try {
+ log.info("Attempting to load local file via backend");
+ const success = await this.loadFileViaBackend(filePath, addMode);
+ if (success) {
+ return true;
+ }
+ } catch (error) {
+ log.warn("Backend loading failed:", error);
+ }
+
+ try {
+ log.info("Falling back to file picker");
+ const success = await this.promptUserForFile(filePath, addMode);
+ if (success) {
+ return true;
+ }
+ } catch (error) {
+ log.warn("File picker failed:", error);
+ }
+
+ this.showFilePathMessage(filePath);
+ return false;
+ }
+
+ /**
+ * Loads a local file via the ComfyUI backend endpoint
+ * @param {string} filePath - The file path to load
+ * @param {AddMode} addMode - The mode for adding the layer
+ * @returns {Promise} - True if successful, false otherwise
+ */
+ async loadFileViaBackend(filePath: string, addMode: AddMode): Promise {
+ 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;
+ }
+ }
+
+ /**
+ * Prompts the user to select a file when a local path is detected
+ * @param {string} originalPath - The original file path from clipboard
+ * @param {AddMode} addMode - The mode for adding the layer
+ * @returns {Promise} - True if successful, false otherwise
+ */
+ async promptUserForFile(originalPath: string, addMode: AddMode): Promise {
+ return new Promise((resolve) => {
+
+ const fileInput = document.createElement('input');
+ fileInput.type = 'file';
+ fileInput.accept = 'image/*';
+ fileInput.style.display = 'none';
+
+ const fileName = originalPath.split(/[\\\/]/).pop();
+
+ fileInput.onchange = async (event) => {
+ const target = event.target as HTMLInputElement;
+ const file = target.files?.[0];
+ if (file && file.type.startsWith('image/')) {
+ try {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const img = new Image();
+ img.onload = async () => {
+ log.info("Successfully loaded image from file picker");
+ await this.canvas.canvasLayers.addLayerWithImage(img, {}, addMode);
+ resolve(true);
+ };
+ img.onerror = () => {
+ log.warn("Failed to load selected image");
+ resolve(false);
+ };
+ if (e.target?.result) {
+ img.src = e.target.result as string;
+ }
+ };
+ reader.onerror = () => {
+ log.warn("Failed to read selected file");
+ resolve(false);
+ };
+ reader.readAsDataURL(file);
+ } catch (error) {
+ log.warn("Error processing selected file:", error);
+ resolve(false);
+ }
+ } else {
+ log.warn("Selected file is not an image");
+ resolve(false);
+ }
+
+ document.body.removeChild(fileInput);
+ };
+
+ fileInput.oncancel = () => {
+ log.info("File selection cancelled by user");
+ document.body.removeChild(fileInput);
+ resolve(false);
+ };
+
+ this.showNotification(`Detected image path: ${fileName}. Please select the file to load it.`, 3000);
+
+ document.body.appendChild(fileInput);
+ fileInput.click();
+ });
+ }
+
+ /**
+ * Shows a message to the user about file path limitations
+ * @param {string} filePath - The file path that couldn't be loaded
+ */
+ showFilePathMessage(filePath: string): void {
+ const fileName = filePath.split(/[\\\/]/).pop();
+ const message = `Cannot load local file directly due to browser security restrictions. File detected: ${fileName}`;
+ this.showNotification(message, 5000);
+ log.info("Showed file path limitation message to user");
+ }
+
+ /**
+ * Shows a helpful message when clipboard appears empty and offers file picker
+ * @param {AddMode} addMode - The mode for adding the layer
+ */
+ showEmptyClipboardMessage(addMode: AddMode): void {
+ const message = `Copied a file? Browser can't access file paths for security. Click here to select the file manually.`;
+
+ const notification = document.createElement('div');
+ notification.style.cssText = `
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ background: #2d5aa0;
+ color: white;
+ padding: 14px 18px;
+ border-radius: 6px;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+ z-index: 10001;
+ max-width: 320px;
+ font-size: 14px;
+ line-height: 1.4;
+ cursor: pointer;
+ border: 2px solid #4a7bc8;
+ transition: all 0.2s ease;
+ font-weight: 500;
+ `;
+ notification.innerHTML = `
+
+ 📁
+ ${message}
+
+
+ 💡 Tip: You can also drag & drop files directly onto the canvas
+
+ `;
+
+ notification.onmouseenter = () => {
+ notification.style.backgroundColor = '#3d6bb0';
+ notification.style.borderColor = '#5a8bd8';
+ notification.style.transform = 'translateY(-1px)';
+ };
+ notification.onmouseleave = () => {
+ notification.style.backgroundColor = '#2d5aa0';
+ notification.style.borderColor = '#4a7bc8';
+ notification.style.transform = 'translateY(0)';
+ };
+
+ notification.onclick = async () => {
+ document.body.removeChild(notification);
+ try {
+ const success = await this.promptUserForFile('image_file.jpg', addMode);
+ if (success) {
+ log.info("Successfully loaded image via empty clipboard file picker");
+ }
+ } catch (error) {
+ log.warn("Error with empty clipboard file picker:", error);
+ }
+ };
+
+ document.body.appendChild(notification);
+
+ setTimeout(() => {
+ if (notification.parentNode) {
+ notification.parentNode.removeChild(notification);
+ }
+ }, 12000);
+
+ log.info("Showed enhanced empty clipboard message with file picker option");
+ }
+
+ /**
+ * Shows a temporary notification to the user
+ * @param {string} message - The message to show
+ * @param {number} duration - Duration in milliseconds
+ */
+ showNotification(message: string, duration = 3000): void {
+
+ const notification = document.createElement('div');
+ notification.style.cssText = `
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ background: #333;
+ color: white;
+ padding: 12px 16px;
+ border-radius: 4px;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+ z-index: 10001;
+ max-width: 300px;
+ font-size: 14px;
+ line-height: 1.4;
+ `;
+ notification.textContent = message;
+
+ document.body.appendChild(notification);
+
+ setTimeout(() => {
+ if (notification.parentNode) {
+ notification.parentNode.removeChild(notification);
+ }
+ }, duration);
+ }
+}
diff --git a/src/utils/CommonUtils.ts b/src/utils/CommonUtils.ts
new file mode 100644
index 0000000..8d2cff8
--- /dev/null
+++ b/src/utils/CommonUtils.ts
@@ -0,0 +1,289 @@
+import type { Layer } from '../types';
+
+/**
+ * CommonUtils - Wspólne funkcje pomocnicze
+ * Eliminuje duplikację funkcji używanych w różnych modułach
+ */
+
+export interface Point {
+ x: number;
+ y: number;
+}
+
+/**
+ * Generuje unikalny identyfikator UUID
+ * @returns {string} UUID w formacie xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
+ */
+export function generateUUID(): string {
+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+ const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+ return v.toString(16);
+ });
+}
+
+/**
+ * Funkcja snap do siatki
+ * @param {number} value - Wartość do przyciągnięcia
+ * @param {number} gridSize - Rozmiar siatki (domyślnie 64)
+ * @returns {number} Wartość przyciągnięta do siatki
+ */
+export function snapToGrid(value: number, gridSize = 64): number {
+ return Math.round(value / gridSize) * gridSize;
+}
+
+/**
+ * Oblicza dostosowanie snap dla warstwy
+ * @param {Object} layer - Obiekt warstwy
+ * @param {number} gridSize - Rozmiar siatki
+ * @param {number} snapThreshold - Próg przyciągania
+ * @returns {Point} Obiekt z dx i dy
+ */
+export function getSnapAdjustment(layer: Layer, gridSize = 64, snapThreshold = 10): Point {
+ if (!layer) {
+ return {x: 0, y: 0};
+ }
+
+ const layerEdges = {
+ left: layer.x,
+ right: layer.x + layer.width,
+ top: layer.y,
+ bottom: layer.y + layer.height
+ };
+
+ const x_adjustments = [
+ {type: 'x', delta: snapToGrid(layerEdges.left, gridSize) - layerEdges.left},
+ {type: 'x', delta: snapToGrid(layerEdges.right, gridSize) - layerEdges.right}
+ ].map(adj => ({ ...adj, abs: Math.abs(adj.delta) }));
+
+ const y_adjustments = [
+ {type: 'y', delta: snapToGrid(layerEdges.top, gridSize) - layerEdges.top},
+ {type: 'y', delta: snapToGrid(layerEdges.bottom, gridSize) - layerEdges.bottom}
+ ].map(adj => ({ ...adj, abs: Math.abs(adj.delta) }));
+
+ const bestXSnap = x_adjustments
+ .filter(adj => adj.abs < snapThreshold && adj.abs > 1e-9)
+ .sort((a, b) => a.abs - b.abs)[0];
+ const bestYSnap = y_adjustments
+ .filter(adj => adj.abs < snapThreshold && adj.abs > 1e-9)
+ .sort((a, b) => a.abs - b.abs)[0];
+
+ return {
+ x: bestXSnap ? bestXSnap.delta : 0,
+ y: bestYSnap ? bestYSnap.delta : 0
+ };
+}
+
+/**
+ * Konwertuje współrzędne świata na lokalne
+ * @param {number} worldX - Współrzędna X w świecie
+ * @param {number} worldY - Współrzędna Y w świecie
+ * @param {any} layerProps - Właściwości warstwy
+ * @returns {Point} Lokalne współrzędne {x, y}
+ */
+export function worldToLocal(worldX: number, worldY: number, layerProps: { centerX: number, centerY: number, rotation: number }): Point {
+ const dx = worldX - layerProps.centerX;
+ const dy = worldY - layerProps.centerY;
+ const rad = -layerProps.rotation * Math.PI / 180;
+ const cos = Math.cos(rad);
+ const sin = Math.sin(rad);
+
+ return {
+ x: dx * cos - dy * sin,
+ y: dx * sin + dy * cos
+ };
+}
+
+/**
+ * Konwertuje współrzędne lokalne na świat
+ * @param {number} localX - Lokalna współrzędna X
+ * @param {number} localY - Lokalna współrzędna Y
+ * @param {any} layerProps - Właściwości warstwy
+ * @returns {Point} Współrzędne świata {x, y}
+ */
+export function localToWorld(localX: number, localY: number, layerProps: { centerX: number, centerY: number, rotation: number }): Point {
+ const rad = layerProps.rotation * Math.PI / 180;
+ const cos = Math.cos(rad);
+ const sin = Math.sin(rad);
+
+ return {
+ x: layerProps.centerX + localX * cos - localY * sin,
+ y: layerProps.centerY + localX * sin + localY * cos
+ };
+}
+
+/**
+ * Klonuje warstwy (bez klonowania obiektów Image dla oszczędności pamięci)
+ * @param {Layer[]} layers - Tablica warstw do sklonowania
+ * @returns {Layer[]} Sklonowane warstwy
+ */
+export function cloneLayers(layers: Layer[]): Layer[] {
+ return layers.map(layer => ({ ...layer }));
+}
+
+/**
+ * Tworzy sygnaturę stanu warstw (dla porównań)
+ * @param {Layer[]} layers - Tablica warstw
+ * @returns {string} Sygnatura JSON
+ */
+export function getStateSignature(layers: Layer[]): string {
+ return JSON.stringify(layers.map((layer, index) => {
+ const sig: any = {
+ index: index,
+ x: Math.round(layer.x * 100) / 100, // Round to avoid floating point precision issues
+ y: Math.round(layer.y * 100) / 100,
+ width: Math.round(layer.width * 100) / 100,
+ height: Math.round(layer.height * 100) / 100,
+ rotation: Math.round((layer.rotation || 0) * 100) / 100,
+ zIndex: layer.zIndex,
+ blendMode: layer.blendMode || 'normal',
+ opacity: layer.opacity !== undefined ? Math.round(layer.opacity * 100) / 100 : 1
+ };
+
+ if (layer.imageId) {
+ sig.imageId = layer.imageId;
+ }
+
+ if (layer.image && layer.image.src) {
+ sig.imageSrc = layer.image.src.substring(0, 100); // First 100 chars to avoid huge signatures
+ }
+
+ return sig;
+ }));
+}
+
+/**
+ * Debounce funkcja - opóźnia wykonanie funkcji
+ * @param {Function} func - Funkcja do wykonania
+ * @param {number} wait - Czas oczekiwania w ms
+ * @param {boolean} immediate - Czy wykonać natychmiast
+ * @returns {(...args: any[]) => void} Funkcja z debounce
+ */
+export function debounce(func: (...args: any[]) => void, wait: number, immediate?: boolean): (...args: any[]) => void {
+ let timeout: number | null;
+ return function executedFunction(this: any, ...args: any[]) {
+ const later = () => {
+ timeout = null;
+ if (!immediate) func.apply(this, args);
+ };
+ const callNow = immediate && !timeout;
+ if (timeout) clearTimeout(timeout);
+ timeout = window.setTimeout(later, wait);
+ if (callNow) func.apply(this, args);
+ };
+}
+
+/**
+ * Throttle funkcja - ogranicza częstotliwość wykonania
+ * @param {Function} func - Funkcja do wykonania
+ * @param {number} limit - Limit czasu w ms
+ * @returns {(...args: any[]) => void} Funkcja z throttle
+ */
+export function throttle(func: (...args: any[]) => void, limit: number): (...args: any[]) => void {
+ let inThrottle: boolean;
+ return function(this: any, ...args: any[]) {
+ if (!inThrottle) {
+ func.apply(this, args);
+ inThrottle = true;
+ setTimeout(() => inThrottle = false, limit);
+ }
+ };
+}
+
+/**
+ * Ogranicza wartość do zakresu
+ * @param {number} value - Wartość do ograniczenia
+ * @param {number} min - Minimalna wartość
+ * @param {number} max - Maksymalna wartość
+ * @returns {number} Ograniczona wartość
+ */
+export function clamp(value: number, min: number, max: number): number {
+ return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * Interpolacja liniowa między dwoma wartościami
+ * @param {number} start - Wartość początkowa
+ * @param {number} end - Wartość końcowa
+ * @param {number} factor - Współczynnik interpolacji (0-1)
+ * @returns {number} Interpolowana wartość
+ */
+export function lerp(start: number, end: number, factor: number): number {
+ return start + (end - start) * factor;
+}
+
+/**
+ * Konwertuje stopnie na radiany
+ * @param {number} degrees - Stopnie
+ * @returns {number} Radiany
+ */
+export function degreesToRadians(degrees: number): number {
+ return degrees * Math.PI / 180;
+}
+
+/**
+ * Konwertuje radiany na stopnie
+ * @param {number} radians - Radiany
+ * @returns {number} Stopnie
+ */
+export function radiansToDegrees(radians: number): number {
+ return radians * 180 / Math.PI;
+}
+
+/**
+ * Tworzy canvas z kontekstem - eliminuje duplikaty w kodzie
+ * @param {number} width - Szerokość canvas
+ * @param {number} height - Wysokość canvas
+ * @param {string} contextType - Typ kontekstu (domyślnie '2d')
+ * @param {object} contextOptions - Opcje kontekstu
+ * @returns {{canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D | null}} Obiekt z canvas i ctx
+ */
+export function createCanvas(width: number, height: number, contextType = '2d', contextOptions: any = {}): { canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D | null } {
+ const canvas = document.createElement('canvas');
+ if (width) canvas.width = width;
+ if (height) canvas.height = height;
+ const ctx = canvas.getContext(contextType, contextOptions) as CanvasRenderingContext2D | null;
+ return { canvas, ctx };
+}
+
+/**
+ * Normalizuje wartość do zakresu Uint8 (0-255)
+ * @param {number} value - Wartość do znormalizowania (0-1)
+ * @returns {number} Wartość w zakresie 0-255
+ */
+export function normalizeToUint8(value: number): number {
+ return Math.max(0, Math.min(255, Math.round(value * 255)));
+}
+
+/**
+ * Generuje unikalną nazwę pliku z identyfikatorem node-a
+ * @param {string} baseName - Podstawowa nazwa pliku
+ * @param {string | number} nodeId - Identyfikator node-a
+ * @returns {string} Unikalna nazwa pliku
+ */
+export function generateUniqueFileName(baseName: string, nodeId: string | number): string {
+ const nodePattern = new RegExp(`_node_${nodeId}(?:_node_\\d+)*`);
+ if (nodePattern.test(baseName)) {
+ const cleanName = baseName.replace(/_node_\d+/g, '');
+ const extension = cleanName.split('.').pop();
+ const nameWithoutExt = cleanName.replace(`.${extension}`, '');
+ return `${nameWithoutExt}_node_${nodeId}.${extension}`;
+ }
+ const extension = baseName.split('.').pop();
+ const nameWithoutExt = baseName.replace(`.${extension}`, '');
+ return `${nameWithoutExt}_node_${nodeId}.${extension}`;
+}
+
+/**
+ * Sprawdza czy punkt jest w prostokącie
+ * @param {number} pointX - X punktu
+ * @param {number} pointY - Y punktu
+ * @param {number} rectX - X prostokąta
+ * @param {number} rectY - Y prostokąta
+ * @param {number} rectWidth - Szerokość prostokąta
+ * @param {number} rectHeight - Wysokość prostokąta
+ * @returns {boolean} Czy punkt jest w prostokącie
+ */
+export function isPointInRect(pointX: number, pointY: number, rectX: number, rectY: number, rectWidth: number, rectHeight: number): boolean {
+ return pointX >= rectX && pointX <= rectX + rectWidth &&
+ pointY >= rectY && pointY <= rectY + rectHeight;
+}
diff --git a/src/utils/ImageUtils.ts b/src/utils/ImageUtils.ts
new file mode 100644
index 0000000..7b074a0
--- /dev/null
+++ b/src/utils/ImageUtils.ts
@@ -0,0 +1,353 @@
+import {createModuleLogger} from "./LoggerUtils.js";
+import {withErrorHandling, createValidationError} from "../ErrorHandler.js";
+import type { Tensor, ImageDataPixel } from '../types';
+
+const log = createModuleLogger('ImageUtils');
+
+export function validateImageData(data: any): boolean {
+ log.debug("Validating data structure:", {
+ hasData: !!data,
+ type: typeof data,
+ isArray: Array.isArray(data),
+ keys: data ? Object.keys(data) : null,
+ shape: data?.shape,
+ dataType: data?.data ? data.data.constructor.name : null,
+ fullData: data
+ });
+
+ if (!data) {
+ log.info("Data is null or undefined");
+ return false;
+ }
+
+ if (Array.isArray(data)) {
+ log.debug("Data is array, getting first element");
+ data = data[0];
+ }
+
+ if (!data || typeof data !== 'object') {
+ log.info("Invalid data type");
+ return false;
+ }
+
+ if (!data.data) {
+ log.info("Missing data property");
+ return false;
+ }
+
+ if (!(data.data instanceof Float32Array)) {
+ try {
+ data.data = new Float32Array(data.data);
+ } catch (e) {
+ log.error("Failed to convert data to Float32Array:", e);
+ return false;
+ }
+ }
+
+ return true;
+}
+
+export function convertImageData(data: any): ImageDataPixel {
+ log.info("Converting image data:", data);
+
+ if (Array.isArray(data)) {
+ data = data[0];
+ }
+
+ const shape = data.shape;
+ const height = shape[1];
+ const width = shape[2];
+ const channels = shape[3];
+ const floatData = new Float32Array(data.data);
+
+ log.debug("Processing dimensions:", {height, width, channels});
+
+ const rgbaData = new Uint8ClampedArray(width * height * 4);
+
+ for (let h = 0; h < height; h++) {
+ for (let w = 0; w < width; w++) {
+ const pixelIndex = (h * width + w) * 4;
+ const tensorIndex = (h * width + w) * channels;
+
+ for (let c = 0; c < channels; c++) {
+ const value = floatData[tensorIndex + c];
+ rgbaData[pixelIndex + c] = Math.max(0, Math.min(255, Math.round(value * 255)));
+ }
+
+ rgbaData[pixelIndex + 3] = 255;
+ }
+ }
+
+ return {
+ data: rgbaData,
+ width: width,
+ height: height
+ };
+}
+
+export function applyMaskToImageData(imageData: ImageDataPixel, maskData: Tensor): ImageDataPixel {
+ log.info("Applying mask to image data");
+
+ const rgbaData = new Uint8ClampedArray(imageData.data);
+ const width = imageData.width;
+ const height = imageData.height;
+
+ const maskShape = maskData.shape;
+ const maskFloatData = new Float32Array(maskData.data);
+
+ log.debug(`Applying mask of shape: ${maskShape}`);
+
+ for (let h = 0; h < height; h++) {
+ for (let w = 0; w < width; w++) {
+ const pixelIndex = (h * width + w) * 4;
+ const maskIndex = h * width + w;
+
+ const alpha = maskFloatData[maskIndex];
+ rgbaData[pixelIndex + 3] = Math.max(0, Math.min(255, Math.round(alpha * 255)));
+ }
+ }
+
+ log.info("Mask application completed");
+
+ return {
+ data: rgbaData,
+ width: width,
+ height: height
+ };
+}
+
+export const prepareImageForCanvas = withErrorHandling(function (inputImage: any): ImageDataPixel {
+ log.info("Preparing image for canvas:", inputImage);
+
+ if (Array.isArray(inputImage)) {
+ inputImage = inputImage[0];
+ }
+
+ if (!inputImage || !inputImage.shape || !inputImage.data) {
+ throw createValidationError("Invalid input image format", {inputImage});
+ }
+
+ const shape = inputImage.shape;
+ const height = shape[1];
+ const width = shape[2];
+ const channels = shape[3];
+ const floatData = new Float32Array(inputImage.data);
+
+ log.debug("Image dimensions:", {height, width, channels});
+
+ const rgbaData = new Uint8ClampedArray(width * height * 4);
+
+ for (let h = 0; h < height; h++) {
+ for (let w = 0; w < width; w++) {
+ const pixelIndex = (h * width + w) * 4;
+ const tensorIndex = (h * width + w) * channels;
+
+ for (let c = 0; c < channels; c++) {
+ const value = floatData[tensorIndex + c];
+ rgbaData[pixelIndex + c] = Math.max(0, Math.min(255, Math.round(value * 255)));
+ }
+
+ rgbaData[pixelIndex + 3] = 255;
+ }
+ }
+
+ return {
+ data: rgbaData,
+ width: width,
+ height: height
+ };
+}, 'prepareImageForCanvas');
+
+export const imageToTensor = withErrorHandling(async function (image: HTMLImageElement | HTMLCanvasElement): Promise {
+ if (!image) {
+ throw createValidationError("Image is required");
+ }
+
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d', { willReadFrequently: true });
+
+ canvas.width = image.width;
+ canvas.height = image.height;
+
+ if (ctx) {
+ ctx.drawImage(image, 0, 0);
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ const data = new Float32Array(canvas.width * canvas.height * 3);
+
+ for (let i = 0; i < imageData.data.length; i += 4) {
+ const pixelIndex = i / 4;
+ data[pixelIndex * 3] = imageData.data[i] / 255;
+ data[pixelIndex * 3 + 1] = imageData.data[i + 1] / 255;
+ data[pixelIndex * 3 + 2] = imageData.data[i + 2] / 255;
+ }
+
+ return {
+ data: data,
+ shape: [1, canvas.height, canvas.width, 3],
+ width: canvas.width,
+ height: canvas.height
+ };
+ }
+ throw new Error("Canvas context not available");
+}, 'imageToTensor');
+
+export const tensorToImage = withErrorHandling(async function (tensor: Tensor): Promise {
+ if (!tensor || !tensor.data || !tensor.shape) {
+ throw createValidationError("Invalid tensor format", {tensor});
+ }
+
+ const [, height, width, channels] = tensor.shape;
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d', { willReadFrequently: true });
+
+ canvas.width = width;
+ canvas.height = height;
+
+ if (ctx) {
+ const imageData = ctx.createImageData(width, height);
+ const data = tensor.data;
+
+ for (let i = 0; i < width * height; i++) {
+ const pixelIndex = i * 4;
+ const tensorIndex = i * channels;
+
+ imageData.data[pixelIndex] = Math.round(data[tensorIndex] * 255);
+ imageData.data[pixelIndex + 1] = Math.round(data[tensorIndex + 1] * 255);
+ imageData.data[pixelIndex + 2] = Math.round(data[tensorIndex + 2] * 255);
+ imageData.data[pixelIndex + 3] = 255;
+ }
+
+ ctx.putImageData(imageData, 0, 0);
+
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.onload = () => resolve(img);
+ img.onerror = (err) => reject(err);
+ img.src = canvas.toDataURL();
+ });
+ }
+ throw new Error("Canvas context not available");
+}, 'tensorToImage');
+
+export const resizeImage = withErrorHandling(async function (image: HTMLImageElement, maxWidth: number, maxHeight: number): Promise {
+ if (!image) {
+ throw createValidationError("Image is required");
+ }
+
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d', { willReadFrequently: true });
+
+ const originalWidth = image.width;
+ const originalHeight = image.height;
+ const scale = Math.min(maxWidth / originalWidth, maxHeight / originalHeight);
+ const newWidth = Math.round(originalWidth * scale);
+ const newHeight = Math.round(originalHeight * scale);
+
+ canvas.width = newWidth;
+ canvas.height = newHeight;
+
+ if (ctx) {
+ ctx.imageSmoothingEnabled = true;
+ ctx.imageSmoothingQuality = 'high';
+ ctx.drawImage(image, 0, 0, newWidth, newHeight);
+
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.onload = () => resolve(img);
+ img.onerror = (err) => reject(err);
+ img.src = canvas.toDataURL();
+ });
+ }
+ throw new Error("Canvas context not available");
+}, 'resizeImage');
+
+export const createThumbnail = withErrorHandling(async function (image: HTMLImageElement, size = 128): Promise {
+ return resizeImage(image, size, size);
+}, 'createThumbnail');
+
+export const imageToBase64 = withErrorHandling(function (image: HTMLImageElement | HTMLCanvasElement, format = 'png', quality = 0.9): string {
+ if (!image) {
+ throw createValidationError("Image is required");
+ }
+
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d', { willReadFrequently: true });
+
+ canvas.width = image instanceof HTMLImageElement ? image.naturalWidth : image.width;
+ canvas.height = image instanceof HTMLImageElement ? image.naturalHeight : image.height;
+
+ if (ctx) {
+ ctx.drawImage(image, 0, 0);
+ const mimeType = `image/${format}`;
+ return canvas.toDataURL(mimeType, quality);
+ }
+ throw new Error("Canvas context not available");
+}, 'imageToBase64');
+
+export const base64ToImage = withErrorHandling(function (base64: string): Promise {
+ if (!base64) {
+ throw createValidationError("Base64 string is required");
+ }
+
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.onload = () => resolve(img);
+ img.onerror = () => reject(new Error("Failed to load image from base64"));
+ img.src = base64;
+ });
+}, 'base64ToImage');
+
+export function isValidImage(image: any): image is HTMLImageElement | HTMLCanvasElement {
+ return image &&
+ (image instanceof HTMLImageElement || image instanceof HTMLCanvasElement) &&
+ image.width > 0 &&
+ image.height > 0;
+}
+
+export function getImageInfo(image: HTMLImageElement | HTMLCanvasElement): {width: number, height: number, aspectRatio: number, area: number} | null {
+ if (!isValidImage(image)) {
+ return null;
+ }
+
+ const width = image instanceof HTMLImageElement ? image.naturalWidth : image.width;
+ const height = image instanceof HTMLImageElement ? image.naturalHeight : image.height;
+
+ return {
+ width,
+ height,
+ aspectRatio: width / height,
+ area: width * height
+ };
+}
+
+export function createImageFromSource(source: string): Promise {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.onload = () => resolve(img);
+ img.onerror = (err) => reject(err);
+ img.src = source;
+ });
+}
+
+export const createEmptyImage = withErrorHandling(function (width: number, height: number, color = 'transparent'): Promise {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d', { willReadFrequently: true });
+
+ canvas.width = width;
+ canvas.height = height;
+
+ if (ctx) {
+ if (color !== 'transparent') {
+ ctx.fillStyle = color;
+ ctx.fillRect(0, 0, width, height);
+ }
+
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.onload = () => resolve(img);
+ img.onerror = (err) => reject(err);
+ img.src = canvas.toDataURL();
+ });
+ }
+ throw new Error("Canvas context not available");
+}, 'createEmptyImage');
diff --git a/src/utils/LoggerUtils.ts b/src/utils/LoggerUtils.ts
new file mode 100644
index 0000000..c00bba2
--- /dev/null
+++ b/src/utils/LoggerUtils.ts
@@ -0,0 +1,92 @@
+/**
+ * LoggerUtils - Centralizacja inicjalizacji loggerów
+ * Eliminuje powtarzalny kod inicjalizacji loggera w każdym module
+ */
+
+import {logger, LogLevel} from "../logger.js";
+import { LOG_LEVEL } from '../config.js';
+
+export interface Logger {
+ debug: (...args: any[]) => void;
+ info: (...args: any[]) => void;
+ warn: (...args: any[]) => void;
+ error: (...args: any[]) => void;
+}
+
+/**
+ * Tworzy obiekt loggera dla modułu z predefiniowanymi metodami
+ * @param {string} moduleName - Nazwa modułu
+ * @returns {Logger} Obiekt z metodami logowania
+ */
+export function createModuleLogger(moduleName: string): Logger {
+ logger.setModuleLevel(moduleName, LogLevel[LOG_LEVEL as keyof typeof LogLevel]);
+
+ return {
+ debug: (...args: any[]) => logger.debug(moduleName, ...args),
+ info: (...args: any[]) => logger.info(moduleName, ...args),
+ warn: (...args: any[]) => logger.warn(moduleName, ...args),
+ error: (...args: any[]) => logger.error(moduleName, ...args)
+ };
+}
+
+/**
+ * Tworzy logger z automatycznym wykrywaniem nazwy modułu z URL
+ * @returns {Logger} Obiekt z metodami logowania
+ */
+export function createAutoLogger(): Logger {
+ const stack = new Error().stack;
+ const match = stack?.match(/\/([^\/]+)\.js/);
+ const moduleName = match ? match[1] : 'Unknown';
+
+ return createModuleLogger(moduleName);
+}
+
+/**
+ * Wrapper dla operacji z automatycznym logowaniem błędów
+ * @param {Function} operation - Operacja do wykonania
+ * @param {Logger} log - Obiekt loggera
+ * @param {string} operationName - Nazwa operacji (dla logów)
+ * @returns {Function} Opakowana funkcja
+ */
+export function withErrorLogging any>(
+ operation: T,
+ log: Logger,
+ operationName: string
+): (...args: Parameters) => Promise> {
+ return async function(this: any, ...args: Parameters): Promise> {
+ try {
+ log.debug(`Starting ${operationName}`);
+ const result = await operation.apply(this, args);
+ log.debug(`Completed ${operationName}`);
+ return result;
+ } catch (error) {
+ log.error(`Error in ${operationName}:`, error);
+ throw error;
+ }
+ };
+}
+
+/**
+ * Decorator dla metod klasy z automatycznym logowaniem
+ * @param {Logger} log - Obiekt loggera
+ * @param {string} methodName - Nazwa metody
+ */
+export function logMethod(log: Logger, methodName?: string) {
+ return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
+ const originalMethod = descriptor.value;
+
+ descriptor.value = async function (...args: any[]) {
+ try {
+ log.debug(`${methodName || propertyKey} started`);
+ const result = await originalMethod.apply(this, args);
+ log.debug(`${methodName || propertyKey} completed`);
+ return result;
+ } catch (error) {
+ log.error(`${methodName || propertyKey} failed:`, error);
+ throw error;
+ }
+ };
+
+ return descriptor;
+ };
+}
diff --git a/src/utils/ResourceManager.ts b/src/utils/ResourceManager.ts
new file mode 100644
index 0000000..42fd859
--- /dev/null
+++ b/src/utils/ResourceManager.ts
@@ -0,0 +1,32 @@
+// @ts-ignore
+import { $el } from "../../../scripts/ui.js";
+
+export function addStylesheet(url: string): void {
+ if (url.endsWith(".js")) {
+ url = url.substr(0, url.length - 2) + "css";
+ }
+ $el("link", {
+ parent: document.head,
+ rel: "stylesheet",
+ type: "text/css",
+ href: url.startsWith("http") ? url : getUrl(url),
+ });
+}
+
+export function getUrl(path: string, baseUrl?: string | URL): string {
+ if (baseUrl) {
+ return new URL(path, baseUrl).toString();
+ } else {
+ // @ts-ignore
+ return new URL("../" + path, import.meta.url).toString();
+ }
+}
+
+export async function loadTemplate(path: string, baseUrl?: string | URL): Promise {
+ const url = getUrl(path, baseUrl);
+ const response = await fetch(url);
+ if (!response.ok) {
+ throw new Error(`Failed to load template: ${url}`);
+ }
+ return await response.text();
+}
diff --git a/src/utils/WebSocketManager.ts b/src/utils/WebSocketManager.ts
new file mode 100644
index 0000000..993780b
--- /dev/null
+++ b/src/utils/WebSocketManager.ts
@@ -0,0 +1,166 @@
+import {createModuleLogger} from "./LoggerUtils.js";
+import type { WebSocketMessage, AckCallbacks } from "../types.js";
+
+const log = createModuleLogger('WebSocketManager');
+
+class WebSocketManager {
+ private socket: WebSocket | null;
+ private messageQueue: string[];
+ private isConnecting: boolean;
+ private reconnectAttempts: number;
+ private readonly maxReconnectAttempts: number;
+ private readonly reconnectInterval: number;
+ private ackCallbacks: AckCallbacks;
+ private messageIdCounter: number;
+
+ constructor(private url: string) {
+ this.socket = null;
+ this.messageQueue = [];
+ this.isConnecting = false;
+ this.reconnectAttempts = 0;
+ this.maxReconnectAttempts = 10;
+ this.reconnectInterval = 5000; // 5 seconds
+ this.ackCallbacks = new Map();
+ this.messageIdCounter = 0;
+
+ this.connect();
+ }
+
+ connect() {
+ if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+ log.debug("WebSocket is already open.");
+ return;
+ }
+
+ if (this.isConnecting) {
+ log.debug("Connection attempt already in progress.");
+ return;
+ }
+
+ this.isConnecting = true;
+ log.info(`Connecting to WebSocket at ${this.url}...`);
+
+ try {
+ 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.isConnecting = false;
+ log.error("Failed to create WebSocket connection:", error);
+ this.handleReconnect();
+ }
+ }
+
+ handleReconnect() {
+ if (this.reconnectAttempts < this.maxReconnectAttempts) {
+ this.reconnectAttempts++;
+ log.info(`Reconnect attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts}...`);
+ setTimeout(() => this.connect(), this.reconnectInterval);
+ } else {
+ log.error("Max reconnect attempts reached. Giving up.");
+ }
+ }
+
+ sendMessage(data: WebSocketMessage, requiresAck = false): Promise {
+ 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."));
+ }
+
+ const message = JSON.stringify(data);
+
+ if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+ this.socket.send(message);
+ log.debug("Sent message:", data);
+ if (requiresAck && nodeId) {
+ log.debug(`Message for nodeId ${nodeId} requires ACK. Setting up callback.`);
+
+ const timeout = setTimeout(() => {
+ this.ackCallbacks.delete(nodeId);
+ reject(new Error(`ACK timeout for nodeId ${nodeId}`));
+ log.warn(`ACK timeout for nodeId ${nodeId}.`);
+ }, 10000); // 10-second timeout
+
+ this.ackCallbacks.set(nodeId, {
+ resolve: (responseData: WebSocketMessage | PromiseLike) => {
+ clearTimeout(timeout);
+ resolve(responseData);
+ },
+ reject: (error: any) => {
+ clearTimeout(timeout);
+ reject(error);
+ }
+ });
+ } else {
+ resolve(); // Resolve immediately if no ACK is needed
+ }
+ } else {
+ log.warn("WebSocket not open. Queuing message.");
+ this.messageQueue.push(message);
+ if (!this.isConnecting) {
+ this.connect();
+ }
+
+ if (requiresAck) {
+ reject(new Error("Cannot send message with ACK required while disconnected."));
+ } else {
+ resolve();
+ }
+ }
+ });
+ }
+
+ flushMessageQueue() {
+ log.debug(`Flushing ${this.messageQueue.length} queued messages.`);
+
+ while (this.messageQueue.length > 0) {
+ const message = this.messageQueue.shift();
+ if (this.socket && message) {
+ this.socket.send(message);
+ }
+ }
+ }
+}
+
+const wsUrl = `ws://${window.location.host}/layerforge/canvas_ws`;
+export const webSocketManager = new WebSocketManager(wsUrl);
diff --git a/src/utils/mask_utils.ts b/src/utils/mask_utils.ts
new file mode 100644
index 0000000..5be6cc9
--- /dev/null
+++ b/src/utils/mask_utils.ts
@@ -0,0 +1,196 @@
+import {createModuleLogger} from "./LoggerUtils.js";
+import type { Canvas } from '../Canvas.js';
+// @ts-ignore
+import {ComfyApp} from "../../../scripts/app.js";
+
+const log = createModuleLogger('MaskUtils');
+
+export function new_editor(app: ComfyApp): boolean {
+ if (!app) return false;
+ return !!app.ui.settings.getSettingValue('Comfy.MaskEditor.UseNewEditor');
+}
+
+function get_mask_editor_element(app: ComfyApp): HTMLElement | null {
+ return new_editor(app) ? document.getElementById('maskEditor') : document.getElementById('maskCanvas')?.parentElement ?? null;
+}
+
+export function mask_editor_showing(app: ComfyApp): boolean {
+ const editor = get_mask_editor_element(app);
+ return !!editor && editor.style.display !== "none";
+}
+
+export function hide_mask_editor(app: ComfyApp): void {
+ if (mask_editor_showing(app)) {
+ const editor = document.getElementById('maskEditor');
+ if (editor) {
+ editor.style.display = 'none';
+ }
+ }
+}
+
+function get_mask_editor_cancel_button(app: ComfyApp): HTMLElement | null {
+ const cancelButton = document.getElementById("maskEditor_topBarCancelButton");
+ if (cancelButton) {
+ log.debug("Found cancel button by ID: maskEditor_topBarCancelButton");
+ return cancelButton;
+ }
+
+ const cancelSelectors = [
+ 'button[onclick*="cancel"]',
+ 'button[onclick*="Cancel"]',
+ 'input[value="Cancel"]'
+ ];
+
+ for (const selector of cancelSelectors) {
+ try {
+ const button = document.querySelector(selector);
+ if (button) {
+ log.debug("Found cancel button with selector:", selector);
+ return button;
+ }
+ } catch (e) {
+ log.warn("Invalid selector:", selector, e);
+ }
+ }
+
+ const allButtons = document.querySelectorAll('button, input[type="button"]');
+ for (const button of allButtons) {
+ const text = (button as HTMLElement).textContent || (button as HTMLInputElement).value || '';
+ if (text.toLowerCase().includes('cancel')) {
+ log.debug("Found cancel button by text content:", text);
+ return button as HTMLElement;
+ }
+ }
+
+ const editorElement = get_mask_editor_element(app);
+ if (editorElement) {
+ const childNodes = editorElement?.parentElement?.lastChild?.childNodes;
+ if (childNodes && childNodes.length > 2 && childNodes[2] instanceof HTMLElement) {
+ return childNodes[2];
+ }
+ }
+
+ return null;
+}
+
+function get_mask_editor_save_button(app: ComfyApp): HTMLElement | null {
+ const saveButton = document.getElementById("maskEditor_topBarSaveButton");
+ if (saveButton) {
+ return saveButton;
+ }
+ const editorElement = get_mask_editor_element(app);
+ if (editorElement) {
+ const childNodes = editorElement?.parentElement?.lastChild?.childNodes;
+ if (childNodes && childNodes.length > 2 && childNodes[2] instanceof HTMLElement) {
+ return childNodes[2];
+ }
+ }
+ return null;
+}
+
+export function mask_editor_listen_for_cancel(app: ComfyApp, callback: () => void): void {
+ let attempts = 0;
+ const maxAttempts = 50; // 5 sekund
+
+ const findAndAttachListener = () => {
+ attempts++;
+ const cancel_button = get_mask_editor_cancel_button(app);
+
+ if (cancel_button instanceof HTMLElement && !(cancel_button as any).filter_listener_added) {
+ log.info("Cancel button found, attaching listener");
+ cancel_button.addEventListener('click', callback);
+ (cancel_button as any).filter_listener_added = true;
+ } else if (attempts < maxAttempts) {
+
+ setTimeout(findAndAttachListener, 100);
+ } else {
+ log.warn("Could not find cancel button after", maxAttempts, "attempts");
+
+ const globalClickHandler = (event: MouseEvent) => {
+ const target = event.target as HTMLElement;
+ const text = target.textContent || (target as HTMLInputElement).value || '';
+ if (target && (text.toLowerCase().includes('cancel') ||
+ target.id.toLowerCase().includes('cancel') ||
+ target.className.toLowerCase().includes('cancel'))) {
+ log.info("Cancel detected via global click handler");
+ callback();
+ document.removeEventListener('click', globalClickHandler);
+ }
+ };
+
+ document.addEventListener('click', globalClickHandler);
+ log.debug("Added global click handler for cancel detection");
+ }
+ };
+
+ findAndAttachListener();
+}
+
+export function press_maskeditor_save(app: ComfyApp): void {
+ const button = get_mask_editor_save_button(app);
+ if (button instanceof HTMLElement) {
+ button.click();
+ }
+}
+
+export function press_maskeditor_cancel(app: ComfyApp): void {
+ const button = get_mask_editor_cancel_button(app);
+ if (button instanceof HTMLElement) {
+ button.click();
+ }
+}
+
+/**
+ * Uruchamia mask editor z predefiniowaną maską
+ * @param {Canvas} canvasInstance - Instancja Canvas
+ * @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;
+ }
+
+ canvasInstance.startMaskEditor(maskImage, sendCleanImage);
+}
+
+/**
+ * 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 {
+ if (!canvasInstance) {
+ log.error('Canvas instance is required');
+ return;
+ }
+ canvasInstance.startMaskEditor(null, true);
+}
+
+/**
+ * Tworzy maskę z obrazu dla użycia w mask editorze
+ * @param {string} imageSrc - Źródło obrazu (URL lub data URL)
+ * @returns {Promise} Promise zwracający obiekt Image
+ */
+export function create_mask_from_image_src(imageSrc: string): Promise {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.onload = () => resolve(img);
+ img.onerror = (err) => reject(err);
+ img.src = imageSrc;
+ });
+}
+
+/**
+ * Konwertuje canvas do Image dla użycia jako maska
+ * @param {HTMLCanvasElement} canvas - Canvas do konwersji
+ * @returns {Promise} Promise zwracający obiekt Image
+ */
+export function canvas_to_mask_image(canvas: HTMLCanvasElement): Promise {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.onload = () => resolve(img);
+ img.onerror = (err) => reject(err);
+ img.src = canvas.toDataURL();
+ });
+}