From f36f91487f7c301a223d66e68d6b6acd61c3f5a6 Mon Sep 17 00:00:00 2001 From: Dariusz L Date: Sun, 27 Jul 2025 19:12:25 +0200 Subject: [PATCH] Replace alert with notification utilities and refactor canvas creation Replaces all uses of alert() with showErrorNotification or showSuccessNotification for improved user experience and consistency. Refactors canvas creation to use the createCanvas utility function across multiple files, reducing code duplication and improving maintainability. Also updates layer ID generation to use generateUUID. --- js/CanvasIO.js | 5 +++-- js/CanvasLayers.js | 24 ++++++++---------------- js/CanvasSelection.js | 3 ++- js/CanvasView.js | 23 ++++++++++++----------- js/MaskEditorIntegration.js | 3 ++- js/MaskTool.js | 6 ++---- src/CanvasIO.ts | 5 +++-- src/CanvasLayers.ts | 24 ++++++++---------------- src/CanvasSelection.ts | 3 ++- src/CanvasView.ts | 23 ++++++++++++----------- src/MaskEditorIntegration.ts | 3 ++- src/MaskTool.ts | 6 ++---- 12 files changed, 58 insertions(+), 70 deletions(-) diff --git a/js/CanvasIO.js b/js/CanvasIO.js index eea43a3..5cb776b 100644 --- a/js/CanvasIO.js +++ b/js/CanvasIO.js @@ -1,5 +1,6 @@ import { createCanvas } from "./utils/CommonUtils.js"; import { createModuleLogger } from "./utils/LoggerUtils.js"; +import { showErrorNotification } from "./utils/NotificationUtils.js"; import { webSocketManager } from "./utils/WebSocketManager.js"; const log = createModuleLogger('CanvasIO'); export class CanvasIO { @@ -525,7 +526,7 @@ export class CanvasIO { } catch (error) { log.error("Error importing latest image:", error); - alert(`Failed to import latest image: ${error.message}`); + showErrorNotification(`Failed to import latest image: ${error.message}`); return false; } } @@ -565,7 +566,7 @@ export class CanvasIO { } catch (error) { log.error("Error importing latest images:", error); - alert(`Failed to import latest images: ${error.message}`); + showErrorNotification(`Failed to import latest images: ${error.message}`); return []; } } diff --git a/js/CanvasLayers.js b/js/CanvasLayers.js index 197c8c1..d61c8ee 100644 --- a/js/CanvasLayers.js +++ b/js/CanvasLayers.js @@ -1,7 +1,8 @@ import { saveImage } from "./db.js"; import { createModuleLogger } from "./utils/LoggerUtils.js"; -import { generateUUID, generateUniqueFileName } from "./utils/CommonUtils.js"; +import { generateUUID, generateUniqueFileName, createCanvas } from "./utils/CommonUtils.js"; import { withErrorHandling, createValidationError } from "./ErrorHandler.js"; +import { showErrorNotification } from "./utils/NotificationUtils.js"; // @ts-ignore import { app } from "../../scripts/app.js"; // @ts-ignore @@ -63,17 +64,11 @@ export class CanvasLayers { ...layerProps }; if (layer.mask) { - const tempCanvas = document.createElement('canvas'); - const tempCtx = tempCanvas.getContext('2d'); + const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(layer.width, layer.height); if (tempCtx) { - tempCanvas.width = layer.width; - tempCanvas.height = layer.height; tempCtx.drawImage(layer.image, 0, 0, layer.width, layer.height); - const maskCanvas = document.createElement('canvas'); - const maskCtx = maskCanvas.getContext('2d'); + const { canvas: maskCanvas, ctx: maskCtx } = createCanvas(layer.width, layer.height); if (maskCtx) { - maskCanvas.width = layer.width; - maskCanvas.height = layer.height; const maskImageData = maskCtx.createImageData(layer.width, layer.height); for (let i = 0; i < layer.mask.length; i++) { maskImageData.data[i * 4] = 255; @@ -371,10 +366,7 @@ export class CanvasLayers { let maskCanvas = this.getDistanceFieldMask(layer.image, blendArea); if (maskCanvas) { // Create a temporary canvas for the masked layer - const tempCanvas = document.createElement('canvas'); - tempCanvas.width = layer.width; - tempCanvas.height = layer.height; - const tempCtx = tempCanvas.getContext('2d'); + const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(layer.width, layer.height); if (tempCtx) { // Draw the original image tempCtx.drawImage(layer.image, 0, 0, layer.width, layer.height); @@ -978,7 +970,7 @@ export class CanvasLayers { } async fuseLayers() { if (this.canvas.canvasSelection.selectedLayers.length < 2) { - alert("Please select at least 2 layers to fuse."); + showErrorNotification("Please select at least 2 layers to fuse."); return; } log.info(`Fusing ${this.canvas.canvasSelection.selectedLayers.length} selected layers`); @@ -1012,7 +1004,7 @@ export class CanvasLayers { const fusedHeight = Math.ceil(maxY - minY); if (fusedWidth <= 0 || fusedHeight <= 0) { log.warn("Calculated fused layer dimensions are invalid"); - alert("Cannot fuse layers: invalid dimensions calculated."); + showErrorNotification("Cannot fuse layers: invalid dimensions calculated."); return; } const tempCanvas = document.createElement('canvas'); @@ -1070,7 +1062,7 @@ export class CanvasLayers { } catch (error) { log.error("Error during layer fusion:", error); - alert(`Error fusing layers: ${error.message}`); + showErrorNotification(`Error fusing layers: ${error.message}`); } } } diff --git a/js/CanvasSelection.js b/js/CanvasSelection.js index 0836435..f0d3fd2 100644 --- a/js/CanvasSelection.js +++ b/js/CanvasSelection.js @@ -1,4 +1,5 @@ import { createModuleLogger } from "./utils/LoggerUtils.js"; +import { generateUUID } from "./utils/CommonUtils.js"; const log = createModuleLogger('CanvasSelection'); export class CanvasSelection { constructor(canvas) { @@ -18,7 +19,7 @@ export class CanvasSelection { sortedLayers.forEach(layer => { const newLayer = { ...layer, - id: `layer_${+new Date()}_${Math.random().toString(36).substr(2, 9)}`, + id: generateUUID(), zIndex: this.canvas.layers.length, // Nowa warstwa zawsze na wierzchu }; this.canvas.layers.push(newLayer); diff --git a/js/CanvasView.js b/js/CanvasView.js index 019405b..5c2ef8b 100644 --- a/js/CanvasView.js +++ b/js/CanvasView.js @@ -7,6 +7,7 @@ import { Canvas } from "./Canvas.js"; import { clearAllCanvasStates } from "./db.js"; import { ImageCache } from "./ImageCache.js"; import { createModuleLogger } from "./utils/LoggerUtils.js"; +import { showErrorNotification, showSuccessNotification } from "./utils/NotificationUtils.js"; import { iconLoader, LAYERFORGE_TOOLS } from "./utils/IconLoader.js"; import { setupSAMDetectorHook } from "./SAMDetectorIntegration.js"; const log = createModuleLogger('Canvas_view'); @@ -488,11 +489,11 @@ async function createCanvasWidget(node, widget, app) { await canvas.imageReferenceManager.manualGarbageCollection(); const newStats = canvas.imageReferenceManager.getStats(); log.info("GC Stats after cleanup:", newStats); - alert(`Garbage collection completed!\nTracked images: ${newStats.trackedImages}\nTotal references: ${newStats.totalReferences}\nOperations: ${canvas.imageReferenceManager.operationCount}/${canvas.imageReferenceManager.operationThreshold}`); + showSuccessNotification(`Garbage collection completed!\nTracked images: ${newStats.trackedImages}\nTotal references: ${newStats.totalReferences}\nOperations: ${canvas.imageReferenceManager.operationCount}/${canvas.imageReferenceManager.operationThreshold}`); } catch (e) { log.error("Failed to run garbage collection:", e); - alert("Error running garbage collection. Check the console for details."); + showErrorNotification("Error running garbage collection. Check the console for details."); } } }), @@ -504,11 +505,11 @@ async function createCanvasWidget(node, widget, app) { if (confirm("Are you sure you want to clear all saved canvas states? This action cannot be undone.")) { try { await clearAllCanvasStates(); - alert("Canvas cache cleared successfully!"); + showSuccessNotification("Canvas cache cleared successfully!"); } catch (e) { log.error("Failed to clear canvas cache:", e); - alert("Error clearing canvas cache. Check the console for details."); + showErrorNotification("Error clearing canvas cache. Check the console for details."); } } } @@ -845,8 +846,8 @@ function showErrorDialog(message, details) { textContent: "Copy Details", onclick: () => { navigator.clipboard.writeText(details) - .then(() => alert("Error details copied to clipboard!")) - .catch(err => alert("Failed to copy details: " + err)); + .then(() => showSuccessNotification("Error details copied to clipboard!")) + .catch(err => showErrorNotification("Failed to copy details: " + err)); } }), $el("button", { @@ -885,7 +886,7 @@ app.registerExtension({ } catch (error) { log.error("Failed to send canvas data for one or more nodes. Aborting prompt.", error); - alert(`CanvasNode Error: ${error.message}`); + showErrorNotification(`CanvasNode Error: ${error.message}`); return; } } @@ -1043,12 +1044,12 @@ app.registerExtension({ } else { log.error("Canvas widget not available"); - alert("Canvas not ready. Please try again."); + showErrorNotification("Canvas not ready. Please try again."); } } catch (e) { log.error("Error opening MaskEditor:", e); - alert(`Failed to open MaskEditor: ${e.message}`); + showErrorNotification(`Failed to open MaskEditor: ${e.message}`); } }, }, @@ -1103,7 +1104,7 @@ app.registerExtension({ } catch (e) { log.error("Error copying image:", e); - alert("Failed to copy image to clipboard."); + showErrorNotification("Failed to copy image to clipboard."); } }, }, @@ -1122,7 +1123,7 @@ app.registerExtension({ } catch (e) { log.error("Error copying image with mask:", e); - alert("Failed to copy image with mask to clipboard."); + showErrorNotification("Failed to copy image with mask to clipboard."); } }, }, diff --git a/js/MaskEditorIntegration.js b/js/MaskEditorIntegration.js index 8daa8e1..63e4eb6 100644 --- a/js/MaskEditorIntegration.js +++ b/js/MaskEditorIntegration.js @@ -3,6 +3,7 @@ import { app } from "../../scripts/app.js"; // @ts-ignore import { ComfyApp } from "../../scripts/app.js"; import { createModuleLogger } from "./utils/LoggerUtils.js"; +import { showErrorNotification } from "./utils/NotificationUtils.js"; import { uploadImageBlob } from "./utils/ImageUploadUtils.js"; import { processImageToMask, processMaskForViewport } from "./utils/MaskProcessingUtils.js"; import { convertToImage } from "./utils/ImageUtils.js"; @@ -77,7 +78,7 @@ export class MaskEditorIntegration { } catch (error) { log.error("Error preparing image for mask editor:", error); - alert(`Error: ${error.message}`); + showErrorNotification(`Error: ${error.message}`); } } /** diff --git a/js/MaskTool.js b/js/MaskTool.js index 3f1053b..e91c8e4 100644 --- a/js/MaskTool.js +++ b/js/MaskTool.js @@ -1,4 +1,5 @@ import { createModuleLogger } from "./utils/LoggerUtils.js"; +import { createCanvas } from "./utils/CommonUtils.js"; const log = createModuleLogger('Mask_tool'); export class MaskTool { constructor(canvasInstance, callbacks = {}) { @@ -396,10 +397,7 @@ export class MaskTool { * Creates a canvas with specified dimensions and returns both canvas and context */ createCanvas(width, height) { - const canvas = document.createElement('canvas'); - canvas.width = width; - canvas.height = height; - const ctx = canvas.getContext('2d', { willReadFrequently: true }); + const { canvas, ctx } = createCanvas(width, height, '2d', { willReadFrequently: true }); if (!ctx) { throw new Error("Failed to get 2D context for canvas"); } diff --git a/src/CanvasIO.ts b/src/CanvasIO.ts index 4ff2e0b..13199e1 100644 --- a/src/CanvasIO.ts +++ b/src/CanvasIO.ts @@ -1,5 +1,6 @@ import { createCanvas } from "./utils/CommonUtils.js"; import { createModuleLogger } from "./utils/LoggerUtils.js"; +import { showErrorNotification } from "./utils/NotificationUtils.js"; import { webSocketManager } from "./utils/WebSocketManager.js"; import type { Canvas } from './Canvas'; import type { Layer, Shape } from './types'; @@ -611,7 +612,7 @@ export class CanvasIO { } } catch (error: any) { log.error("Error importing latest image:", error); - alert(`Failed to import latest image: ${error.message}`); + showErrorNotification(`Failed to import latest image: ${error.message}`); return false; } } @@ -655,7 +656,7 @@ export class CanvasIO { } } catch (error: any) { log.error("Error importing latest images:", error); - alert(`Failed to import latest images: ${error.message}`); + showErrorNotification(`Failed to import latest images: ${error.message}`); return []; } } diff --git a/src/CanvasLayers.ts b/src/CanvasLayers.ts index 38d2408..7508299 100644 --- a/src/CanvasLayers.ts +++ b/src/CanvasLayers.ts @@ -1,7 +1,8 @@ import {saveImage, removeImage} from "./db.js"; import {createModuleLogger} from "./utils/LoggerUtils.js"; -import {generateUUID, generateUniqueFileName} from "./utils/CommonUtils.js"; +import {generateUUID, generateUniqueFileName, createCanvas} from "./utils/CommonUtils.js"; import {withErrorHandling, createValidationError} from "./ErrorHandler.js"; +import {showErrorNotification, showSuccessNotification} from "./utils/NotificationUtils.js"; // @ts-ignore import {app} from "../../scripts/app.js"; // @ts-ignore @@ -223,18 +224,12 @@ export class CanvasLayers { }; if (layer.mask) { - const tempCanvas = document.createElement('canvas'); - const tempCtx = tempCanvas.getContext('2d'); + const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(layer.width, layer.height); if(tempCtx) { - tempCanvas.width = layer.width; - tempCanvas.height = layer.height; tempCtx.drawImage(layer.image, 0, 0, layer.width, layer.height); - const maskCanvas = document.createElement('canvas'); - const maskCtx = maskCanvas.getContext('2d'); + const { canvas: maskCanvas, ctx: maskCtx } = createCanvas(layer.width, layer.height); if(maskCtx) { - maskCanvas.width = layer.width; - maskCanvas.height = layer.height; const maskImageData = maskCtx.createImageData(layer.width, layer.height); for (let i = 0; i < layer.mask.length; i++) { maskImageData.data[i * 4] = 255; @@ -432,10 +427,7 @@ export class CanvasLayers { if (maskCanvas) { // Create a temporary canvas for the masked layer - const tempCanvas = document.createElement('canvas'); - tempCanvas.width = layer.width; - tempCanvas.height = layer.height; - const tempCtx = tempCanvas.getContext('2d'); + const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(layer.width, layer.height); if (tempCtx) { // Draw the original image @@ -1136,7 +1128,7 @@ export class CanvasLayers { async fuseLayers(): Promise { if (this.canvas.canvasSelection.selectedLayers.length < 2) { - alert("Please select at least 2 layers to fuse."); + showErrorNotification("Please select at least 2 layers to fuse."); return; } @@ -1178,7 +1170,7 @@ export class CanvasLayers { if (fusedWidth <= 0 || fusedHeight <= 0) { log.warn("Calculated fused layer dimensions are invalid"); - alert("Cannot fuse layers: invalid dimensions calculated."); + showErrorNotification("Cannot fuse layers: invalid dimensions calculated."); return; } @@ -1245,7 +1237,7 @@ export class CanvasLayers { } catch (error: any) { log.error("Error during layer fusion:", error); - alert(`Error fusing layers: ${error.message}`); + showErrorNotification(`Error fusing layers: ${error.message}`); } } } diff --git a/src/CanvasSelection.ts b/src/CanvasSelection.ts index a56ccae..f0de041 100644 --- a/src/CanvasSelection.ts +++ b/src/CanvasSelection.ts @@ -1,4 +1,5 @@ import { createModuleLogger } from "./utils/LoggerUtils.js"; +import { generateUUID } from "./utils/CommonUtils.js"; const log = createModuleLogger('CanvasSelection'); @@ -26,7 +27,7 @@ export class CanvasSelection { sortedLayers.forEach(layer => { const newLayer = { ...layer, - id: `layer_${+new Date()}_${Math.random().toString(36).substr(2, 9)}`, + id: generateUUID(), zIndex: this.canvas.layers.length, // Nowa warstwa zawsze na wierzchu }; this.canvas.layers.push(newLayer); diff --git a/src/CanvasView.ts b/src/CanvasView.ts index daaeae1..dd4af9f 100644 --- a/src/CanvasView.ts +++ b/src/CanvasView.ts @@ -14,6 +14,7 @@ import {clearAllCanvasStates} from "./db.js"; import {ImageCache} from "./ImageCache.js"; import {generateUniqueFileName} from "./utils/CommonUtils.js"; import {createModuleLogger} from "./utils/LoggerUtils.js"; +import {showErrorNotification, showSuccessNotification} from "./utils/NotificationUtils.js"; import { iconLoader, LAYERFORGE_TOOLS } from "./utils/IconLoader.js"; import { registerImageInClipspace, startSAMDetectorMonitoring, setupSAMDetectorHook } from "./SAMDetectorIntegration.js"; import type { ComfyNode, Layer, AddMode } from './types'; @@ -524,10 +525,10 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp): const newStats = canvas.imageReferenceManager.getStats(); log.info("GC Stats after cleanup:", newStats); - alert(`Garbage collection completed!\nTracked images: ${newStats.trackedImages}\nTotal references: ${newStats.totalReferences}\nOperations: ${canvas.imageReferenceManager.operationCount}/${canvas.imageReferenceManager.operationThreshold}`); + showSuccessNotification(`Garbage collection completed!\nTracked images: ${newStats.trackedImages}\nTotal references: ${newStats.totalReferences}\nOperations: ${canvas.imageReferenceManager.operationCount}/${canvas.imageReferenceManager.operationThreshold}`); } catch (e) { log.error("Failed to run garbage collection:", e); - alert("Error running garbage collection. Check the console for details."); + showErrorNotification("Error running garbage collection. Check the console for details."); } } }), @@ -539,10 +540,10 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp): if (confirm("Are you sure you want to clear all saved canvas states? This action cannot be undone.")) { try { await clearAllCanvasStates(); - alert("Canvas cache cleared successfully!"); + showSuccessNotification("Canvas cache cleared successfully!"); } catch (e) { log.error("Failed to clear canvas cache:", e); - alert("Error clearing canvas cache. Check the console for details."); + showErrorNotification("Error clearing canvas cache. Check the console for details."); } } } @@ -918,8 +919,8 @@ function showErrorDialog(message: string, details: string) { textContent: "Copy Details", onclick: () => { navigator.clipboard.writeText(details) - .then(() => alert("Error details copied to clipboard!")) - .catch(err => alert("Failed to copy details: " + err)); + .then(() => showSuccessNotification("Error details copied to clipboard!")) + .catch(err => showErrorNotification("Failed to copy details: " + err)); } }), $el("button", { @@ -964,7 +965,7 @@ app.registerExtension({ log.info("All canvas data has been sent and acknowledged by the server."); } catch (error: any) { log.error("Failed to send canvas data for one or more nodes. Aborting prompt.", error); - alert(`CanvasNode Error: ${error.message}`); + showErrorNotification(`CanvasNode Error: ${error.message}`); return; } } @@ -1152,11 +1153,11 @@ app.registerExtension({ await (self as any).canvasWidget.startMaskEditor(null, true); } else { log.error("Canvas widget not available"); - alert("Canvas not ready. Please try again."); + showErrorNotification("Canvas not ready. Please try again."); } } catch (e: any) { log.error("Error opening MaskEditor:", e); - alert(`Failed to open MaskEditor: ${e.message}`); + showErrorNotification(`Failed to open MaskEditor: ${e.message}`); } }, }, @@ -1202,7 +1203,7 @@ app.registerExtension({ log.info("Image copied to clipboard."); } catch (e) { log.error("Error copying image:", e); - alert("Failed to copy image to clipboard."); + showErrorNotification("Failed to copy image to clipboard."); } }, }, @@ -1218,7 +1219,7 @@ app.registerExtension({ log.info("Image with mask alpha copied to clipboard."); } catch (e) { log.error("Error copying image with mask:", e); - alert("Failed to copy image with mask to clipboard."); + showErrorNotification("Failed to copy image with mask to clipboard."); } }, }, diff --git a/src/MaskEditorIntegration.ts b/src/MaskEditorIntegration.ts index e494309..ff0dc4f 100644 --- a/src/MaskEditorIntegration.ts +++ b/src/MaskEditorIntegration.ts @@ -5,6 +5,7 @@ import {ComfyApp} from "../../scripts/app.js"; // @ts-ignore import {api} from "../../scripts/api.js"; import { createModuleLogger } from "./utils/LoggerUtils.js"; +import { showErrorNotification } from "./utils/NotificationUtils.js"; import { uploadCanvasAsImage, uploadCanvasWithMaskAsImage, uploadImageBlob } from "./utils/ImageUploadUtils.js"; import { processImageToMask, processMaskForViewport } from "./utils/MaskProcessingUtils.js"; import { convertToImage } from "./utils/ImageUtils.js"; @@ -100,7 +101,7 @@ export class MaskEditorIntegration { } catch (error) { log.error("Error preparing image for mask editor:", error); - alert(`Error: ${(error as Error).message}`); + showErrorNotification(`Error: ${(error as Error).message}`); } } diff --git a/src/MaskTool.ts b/src/MaskTool.ts index d1b4ef0..e6bfd43 100644 --- a/src/MaskTool.ts +++ b/src/MaskTool.ts @@ -1,4 +1,5 @@ import {createModuleLogger} from "./utils/LoggerUtils.js"; +import { createCanvas } from "./utils/CommonUtils.js"; import type { Canvas } from './Canvas'; import type { Point, CanvasState } from './types'; @@ -540,10 +541,7 @@ export class MaskTool { * Creates a canvas with specified dimensions and returns both canvas and context */ private createCanvas(width: number, height: number): { canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D } { - const canvas = document.createElement('canvas'); - canvas.width = width; - canvas.height = height; - const ctx = canvas.getContext('2d', { willReadFrequently: true }); + const { canvas, ctx } = createCanvas(width, height, '2d', { willReadFrequently: true }); if (!ctx) { throw new Error("Failed to get 2D context for canvas"); }