Refactor codebase for consistent formatting and style

This commit applies consistent code formatting across multiple files, including spacing, indentation, and object destructuring. No functional changes were made; the update improves code readability and maintainability.
This commit is contained in:
Dariusz L
2025-06-27 07:13:20 +02:00
parent b40d645a79
commit 375ed6a2b8
13 changed files with 163 additions and 143 deletions

View File

@@ -7,6 +7,7 @@ import {CanvasRenderer} from "./CanvasRenderer.js";
import {CanvasIO} from "./CanvasIO.js"; import {CanvasIO} from "./CanvasIO.js";
import {ImageReferenceManager} from "./ImageReferenceManager.js"; import {ImageReferenceManager} from "./ImageReferenceManager.js";
import {createModuleLogger} from "./utils/LoggerUtils.js"; import {createModuleLogger} from "./utils/LoggerUtils.js";
const log = createModuleLogger('Canvas'); const log = createModuleLogger('Canvas');
export class Canvas { export class Canvas {
@@ -137,6 +138,7 @@ export class Canvas {
this.onSelectionChange(); this.onSelectionChange();
} }
} }
async copySelectedLayers() { async copySelectedLayers() {
return this.canvasLayers.copySelectedLayers(); return this.canvasLayers.copySelectedLayers();
} }
@@ -265,8 +267,6 @@ export class Canvas {
} }
async getFlattenedCanvasAsBlob() { async getFlattenedCanvasAsBlob() {
return this.canvasLayers.getFlattenedCanvasAsBlob(); return this.canvasLayers.getFlattenedCanvasAsBlob();
} }

View File

@@ -54,15 +54,15 @@ export class CanvasIO {
} }
return new Promise((resolve) => { return new Promise((resolve) => {
const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(this.canvas.width, this.canvas.height); const {canvas: tempCanvas, ctx: tempCtx} = createCanvas(this.canvas.width, this.canvas.height);
const { canvas: maskCanvas, ctx: maskCtx } = createCanvas(this.canvas.width, this.canvas.height); const {canvas: maskCanvas, ctx: maskCtx} = createCanvas(this.canvas.width, this.canvas.height);
tempCtx.fillStyle = '#ffffff'; tempCtx.fillStyle = '#ffffff';
tempCtx.fillRect(0, 0, this.canvas.width, this.canvas.height); tempCtx.fillRect(0, 0, this.canvas.width, this.canvas.height);
const visibilityCanvas = document.createElement('canvas'); const visibilityCanvas = document.createElement('canvas');
visibilityCanvas.width = this.canvas.width; visibilityCanvas.width = this.canvas.width;
visibilityCanvas.height = this.canvas.height; visibilityCanvas.height = this.canvas.height;
const visibilityCtx = visibilityCanvas.getContext('2d', { alpha: true }); const visibilityCtx = visibilityCanvas.getContext('2d', {alpha: true});
maskCtx.fillStyle = '#ffffff'; maskCtx.fillStyle = '#ffffff';
maskCtx.fillRect(0, 0, this.canvas.width, this.canvas.height); maskCtx.fillRect(0, 0, this.canvas.width, this.canvas.height);
@@ -153,7 +153,7 @@ export class CanvasIO {
const imageData = tempCanvas.toDataURL('image/png'); const imageData = tempCanvas.toDataURL('image/png');
const maskData = maskCanvas.toDataURL('image/png'); const maskData = maskCanvas.toDataURL('image/png');
log.info("Returning image and mask data as base64 for RAM mode."); log.info("Returning image and mask data as base64 for RAM mode.");
resolve({ image: imageData, mask: maskData }); resolve({image: imageData, mask: maskData});
return; return;
} }
@@ -237,15 +237,15 @@ export class CanvasIO {
async _renderOutputData() { async _renderOutputData() {
return new Promise((resolve) => { return new Promise((resolve) => {
const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(this.canvas.width, this.canvas.height); const {canvas: tempCanvas, ctx: tempCtx} = createCanvas(this.canvas.width, this.canvas.height);
const { canvas: maskCanvas, ctx: maskCtx } = createCanvas(this.canvas.width, this.canvas.height); const {canvas: maskCanvas, ctx: maskCtx} = createCanvas(this.canvas.width, this.canvas.height);
tempCtx.fillStyle = '#ffffff'; tempCtx.fillStyle = '#ffffff';
tempCtx.fillRect(0, 0, this.canvas.width, this.canvas.height); tempCtx.fillRect(0, 0, this.canvas.width, this.canvas.height);
const visibilityCanvas = document.createElement('canvas'); const visibilityCanvas = document.createElement('canvas');
visibilityCanvas.width = this.canvas.width; visibilityCanvas.width = this.canvas.width;
visibilityCanvas.height = this.canvas.height; visibilityCanvas.height = this.canvas.height;
const visibilityCtx = visibilityCanvas.getContext('2d', { alpha: true }); const visibilityCtx = visibilityCanvas.getContext('2d', {alpha: true});
maskCtx.fillStyle = '#ffffff'; // Start with a white mask (nothing masked) maskCtx.fillStyle = '#ffffff'; // Start with a white mask (nothing masked)
maskCtx.fillRect(0, 0, this.canvas.width, this.canvas.height); maskCtx.fillRect(0, 0, this.canvas.width, this.canvas.height);
@@ -301,7 +301,7 @@ export class CanvasIO {
const copyHeight = Math.min(toolMaskCanvas.height - sourceY, this.canvas.height - destY); const copyHeight = Math.min(toolMaskCanvas.height - sourceY, this.canvas.height - destY);
if (copyWidth > 0 && copyHeight > 0) { if (copyWidth > 0 && copyHeight > 0) {
tempMaskCtx.drawImage( tempMaskCtx.drawImage(
toolMaskCanvas, toolMaskCanvas,
sourceX, sourceY, copyWidth, copyHeight, sourceX, sourceY, copyWidth, copyHeight,
destX, destY, copyWidth, copyHeight destX, destY, copyWidth, copyHeight
@@ -312,7 +312,7 @@ export class CanvasIO {
for (let i = 0; i < tempMaskData.data.length; i += 4) { for (let i = 0; i < tempMaskData.data.length; i += 4) {
const alpha = tempMaskData.data[i + 3]; const alpha = tempMaskData.data[i + 3];
tempMaskData.data[i] = tempMaskData.data[i+1] = tempMaskData.data[i+2] = alpha; tempMaskData.data[i] = tempMaskData.data[i + 1] = tempMaskData.data[i + 2] = alpha;
tempMaskData.data[i + 3] = 255; // Solid alpha tempMaskData.data[i + 3] = 255; // Solid alpha
} }
tempMaskCtx.putImageData(tempMaskData, 0, 0); tempMaskCtx.putImageData(tempMaskData, 0, 0);
@@ -325,14 +325,14 @@ export class CanvasIO {
const imageDataUrl = tempCanvas.toDataURL('image/png'); const imageDataUrl = tempCanvas.toDataURL('image/png');
const maskDataUrl = maskCanvas.toDataURL('image/png'); const maskDataUrl = maskCanvas.toDataURL('image/png');
resolve({ image: imageDataUrl, mask: maskDataUrl }); resolve({image: imageDataUrl, mask: maskDataUrl});
}); });
} }
async sendDataViaWebSocket(nodeId) { async sendDataViaWebSocket(nodeId) {
log.info(`Preparing to send data for node ${nodeId} via WebSocket.`); log.info(`Preparing to send data for node ${nodeId} via WebSocket.`);
const { image, mask } = await this._renderOutputData(); const {image, mask} = await this._renderOutputData();
try { try {
log.info(`Sending data for node ${nodeId}...`); log.info(`Sending data for node ${nodeId}...`);
@@ -357,7 +357,7 @@ export class CanvasIO {
try { try {
log.debug("Adding input to canvas:", {inputImage}); log.debug("Adding input to canvas:", {inputImage});
const { canvas: tempCanvas, ctx: tempCtx } = createCanvas(inputImage.width, inputImage.height); const {canvas: tempCanvas, ctx: tempCtx} = createCanvas(inputImage.width, inputImage.height);
const imgData = new ImageData( const imgData = new ImageData(
inputImage.data, inputImage.data,

View File

@@ -1,5 +1,6 @@
import {createModuleLogger} from "./utils/LoggerUtils.js"; import {createModuleLogger} from "./utils/LoggerUtils.js";
import {snapToGrid, getSnapAdjustment} from "./utils/CommonUtils.js"; import {snapToGrid, getSnapAdjustment} from "./utils/CommonUtils.js";
const log = createModuleLogger('CanvasInteractions'); const log = createModuleLogger('CanvasInteractions');
export class CanvasInteractions { export class CanvasInteractions {

View File

@@ -2,6 +2,7 @@ import {saveImage, removeImage} from "./db.js";
import {createModuleLogger} from "./utils/LoggerUtils.js"; import {createModuleLogger} from "./utils/LoggerUtils.js";
import {generateUUID, generateUniqueFileName} from "./utils/CommonUtils.js"; import {generateUUID, generateUniqueFileName} from "./utils/CommonUtils.js";
import {withErrorHandling, createValidationError} from "./ErrorHandler.js"; import {withErrorHandling, createValidationError} from "./ErrorHandler.js";
const log = createModuleLogger('CanvasLayers'); const log = createModuleLogger('CanvasLayers');
export class CanvasLayers { export class CanvasLayers {
@@ -358,6 +359,7 @@ export class CanvasLayers {
this.canvasLayers.selectedLayer = layer; this.canvasLayers.selectedLayer = layer;
this.canvasLayers.render(); this.canvasLayers.render();
} }
isRotationHandle(x, y) { isRotationHandle(x, y) {
if (!this.canvasLayers.selectedLayer) return false; if (!this.canvasLayers.selectedLayer) return false;
@@ -428,12 +430,18 @@ export class CanvasLayers {
const handleRadius = 5; const handleRadius = 5;
const handles = { const handles = {
'nw': {x: this.canvasLayers.selectedLayer.x, y: this.canvasLayers.selectedLayer.y}, 'nw': {x: this.canvasLayers.selectedLayer.x, y: this.canvasLayers.selectedLayer.y},
'ne': {x: this.canvasLayers.selectedLayer.x + this.canvasLayers.selectedLayer.width, y: this.canvasLayers.selectedLayer.y}, 'ne': {
x: this.canvasLayers.selectedLayer.x + this.canvasLayers.selectedLayer.width,
y: this.canvasLayers.selectedLayer.y
},
'se': { 'se': {
x: this.canvasLayers.selectedLayer.x + this.canvasLayers.selectedLayer.width, x: this.canvasLayers.selectedLayer.x + this.canvasLayers.selectedLayer.width,
y: this.canvasLayers.selectedLayer.y + this.canvasLayers.selectedLayer.height y: this.canvasLayers.selectedLayer.y + this.canvasLayers.selectedLayer.height
}, },
'sw': {x: this.canvasLayers.selectedLayer.x, y: this.canvasLayers.selectedLayer.y + this.canvasLayers.selectedLayer.height} 'sw': {
x: this.canvasLayers.selectedLayer.x,
y: this.canvasLayers.selectedLayer.y + this.canvasLayers.selectedLayer.height
}
}; };
for (const [position, point] of Object.entries(handles)) { for (const [position, point] of Object.entries(handles)) {
@@ -443,6 +451,7 @@ export class CanvasLayers {
} }
return null; return null;
} }
showBlendModeMenu(x, y) { showBlendModeMenu(x, y) {
const existingMenu = document.getElementById('blend-mode-menu'); const existingMenu = document.getElementById('blend-mode-menu');
if (existingMenu) { if (existingMenu) {
@@ -594,6 +603,7 @@ export class CanvasLayers {
modeElement.appendChild(slider); modeElement.appendChild(slider);
} }
} }
async getFlattenedCanvasAsBlob() { async getFlattenedCanvasAsBlob() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const tempCanvas = document.createElement('canvas'); const tempCanvas = document.createElement('canvas');
@@ -633,6 +643,7 @@ export class CanvasLayers {
}, 'image/png'); }, 'image/png');
}); });
} }
async getFlattenedSelectionAsBlob() { async getFlattenedSelectionAsBlob() {
if (this.canvasLayers.selectedLayers.length === 0) { if (this.canvasLayers.selectedLayers.length === 0) {
return null; return null;

View File

@@ -1,4 +1,5 @@
import {createModuleLogger} from "./utils/LoggerUtils.js"; import {createModuleLogger} from "./utils/LoggerUtils.js";
const log = createModuleLogger('CanvasRenderer'); const log = createModuleLogger('CanvasRenderer');
export class CanvasRenderer { export class CanvasRenderer {

View File

@@ -2,6 +2,7 @@ import {getCanvasState, setCanvasState, saveImage, getImage} from "./db.js";
import {createModuleLogger} from "./utils/LoggerUtils.js"; import {createModuleLogger} from "./utils/LoggerUtils.js";
import {generateUUID, cloneLayers, getStateSignature, debounce} from "./utils/CommonUtils.js"; import {generateUUID, cloneLayers, getStateSignature, debounce} from "./utils/CommonUtils.js";
import {withErrorHandling} from "./ErrorHandler.js"; import {withErrorHandling} from "./ErrorHandler.js";
const log = createModuleLogger('CanvasState'); const log = createModuleLogger('CanvasState');
export class CanvasState { export class CanvasState {

View File

@@ -789,9 +789,6 @@ async function createCanvasWidget(node, widget, app) {
}; };
const mainContainer = $el("div.painterMainContainer", { const mainContainer = $el("div.painterMainContainer", {
style: { style: {
position: "relative", position: "relative",
@@ -922,7 +919,6 @@ async function createCanvasWidget(node, widget, app) {
} }
node.canvasWidget = canvas; node.canvasWidget = canvas;
setTimeout(() => { setTimeout(() => {
@@ -944,7 +940,7 @@ app.registerExtension({
init() { init() {
const originalQueuePrompt = app.queuePrompt; const originalQueuePrompt = app.queuePrompt;
app.queuePrompt = async function(number, prompt) { app.queuePrompt = async function (number, prompt) {
log.info("Preparing to queue prompt..."); log.info("Preparing to queue prompt...");
if (canvasNodeInstances.size > 0) { if (canvasNodeInstances.size > 0) {
@@ -994,7 +990,7 @@ app.registerExtension({
return r; return r;
}; };
nodeType.prototype.onAdded = async function() { nodeType.prototype.onAdded = async function () {
log.info(`CanvasNode onAdded, ID: ${this.id}`); log.info(`CanvasNode onAdded, ID: ${this.id}`);
log.debug(`Available widgets in onAdded:`, this.widgets.map(w => w.name)); log.debug(`Available widgets in onAdded:`, this.widgets.map(w => w.name));
@@ -1003,6 +999,10 @@ app.registerExtension({
return; return;
} }
// Iterate through every widget attached to this node
this.widgets.forEach(w => {
log.debug(`Widget name: ${w.name}, type: ${w.type}, value: ${w.value}`);
});
const nodeIdWidget = this.widgets.find(w => w.name === "node_id"); const nodeIdWidget = this.widgets.find(w => w.name === "node_id");
if (nodeIdWidget) { if (nodeIdWidget) {

View File

@@ -81,7 +81,7 @@ export class ErrorHandler {
return new AppError( return new AppError(
error.message, error.message,
type, type,
{ context, ...additionalInfo }, {context, ...additionalInfo},
error error
); );
} }
@@ -90,14 +90,14 @@ export class ErrorHandler {
return new AppError( return new AppError(
error, error,
ErrorTypes.SYSTEM, ErrorTypes.SYSTEM,
{ context, ...additionalInfo } {context, ...additionalInfo}
); );
} }
return new AppError( return new AppError(
'Unknown error occurred', 'Unknown error occurred',
ErrorTypes.SYSTEM, ErrorTypes.SYSTEM,
{ context, originalError: error, ...additionalInfo } {context, originalError: error, ...additionalInfo}
); );
} }
@@ -224,6 +224,7 @@ export class ErrorHandler {
log.info('Error history cleared'); log.info('Error history cleared');
} }
} }
const errorHandler = new ErrorHandler(); const errorHandler = new ErrorHandler();
/** /**
@@ -233,7 +234,7 @@ const errorHandler = new ErrorHandler();
* @returns {Function} Opakowana funkcja * @returns {Function} Opakowana funkcja
*/ */
export function withErrorHandling(fn, context) { export function withErrorHandling(fn, context) {
return async function(...args) { return async function (...args) {
try { try {
return await fn.apply(this, args); return await fn.apply(this, args);
} catch (error) { } catch (error) {
@@ -251,10 +252,10 @@ export function withErrorHandling(fn, context) {
* @param {string} context - Kontekst wykonania * @param {string} context - Kontekst wykonania
*/ */
export function handleErrors(context) { export function handleErrors(context) {
return function(target, propertyKey, descriptor) { return function (target, propertyKey, descriptor) {
const originalMethod = descriptor.value; const originalMethod = descriptor.value;
descriptor.value = async function(...args) { descriptor.value = async function (...args) {
try { try {
return await originalMethod.apply(this, args); return await originalMethod.apply(this, args);
} catch (error) { } catch (error) {
@@ -339,12 +340,13 @@ export async function retryWithBackoff(operation, maxRetries = 3, baseDelay = 10
} }
const delay = baseDelay * Math.pow(2, attempt); const delay = baseDelay * Math.pow(2, attempt);
log.warn(`Attempt ${attempt + 1} failed, retrying in ${delay}ms`, { error: error.message, context }); log.warn(`Attempt ${attempt + 1} failed, retrying in ${delay}ms`, {error: error.message, context});
await new Promise(resolve => setTimeout(resolve, delay)); await new Promise(resolve => setTimeout(resolve, delay));
} }
} }
throw errorHandler.handle(lastError, context, { attempts: maxRetries + 1 }); throw errorHandler.handle(lastError, context, {attempts: maxRetries + 1});
} }
export { errorHandler };
export {errorHandler};
export default errorHandler; export default errorHandler;

View File

@@ -1,4 +1,5 @@
import {createModuleLogger} from "./utils/LoggerUtils.js"; import {createModuleLogger} from "./utils/LoggerUtils.js";
const log = createModuleLogger('ImageCache'); const log = createModuleLogger('ImageCache');
export class ImageCache { export class ImageCache {

View File

@@ -146,7 +146,7 @@ export class ImageReferenceManager {
if (age > this.maxAge) { if (age > this.maxAge) {
unusedImages.push(imageId); unusedImages.push(imageId);
} else { } else {
log.debug(`Image ${imageId} is unused but too young (age: ${Math.round(age/1000)}s)`); log.debug(`Image ${imageId} is unused but too young (age: ${Math.round(age / 1000)}s)`);
} }
} }
} }

View File

@@ -1,4 +1,5 @@
import {createModuleLogger} from "./utils/LoggerUtils.js"; import {createModuleLogger} from "./utils/LoggerUtils.js";
const log = createModuleLogger('Mask_tool'); const log = createModuleLogger('Mask_tool');
export class MaskTool { export class MaskTool {

View File

@@ -1,4 +1,5 @@
import {createModuleLogger} from "./utils/LoggerUtils.js"; import {createModuleLogger} from "./utils/LoggerUtils.js";
const log = createModuleLogger('db'); const log = createModuleLogger('db');
const DB_NAME = 'CanvasNodeDB'; const DB_NAME = 'CanvasNodeDB';

View File

@@ -39,7 +39,7 @@ const LEVEL_NAMES = {
class Logger { class Logger {
constructor() { constructor() {
this.config = { ...DEFAULT_CONFIG }; this.config = {...DEFAULT_CONFIG};
this.logs = []; this.logs = [];
this.enabled = true; this.enabled = true;
this.loadConfig(); this.loadConfig();
@@ -50,7 +50,7 @@ class Logger {
* @param {Object} config - Obiekt konfiguracyjny * @param {Object} config - Obiekt konfiguracyjny
*/ */
configure(config) { configure(config) {
this.config = { ...this.config, ...config }; this.config = {...this.config, ...config};
this.saveConfig(); this.saveConfig();
return this; return this;
} }
@@ -147,7 +147,7 @@ class Logger {
* @param {Object} logData - Dane logu * @param {Object} logData - Dane logu
*/ */
printToConsole(logData) { printToConsole(logData) {
const { timestamp, module, level, levelName, args } = logData; const {timestamp, module, level, levelName, args} = logData;
const prefix = `[${timestamp}] [${module}] [${levelName}]`; const prefix = `[${timestamp}] [${module}] [${levelName}]`;
if (this.config.useColors && typeof console.log === 'function') { if (this.config.useColors && typeof console.log === 'function') {
const color = COLORS[level] || '#000000'; const color = COLORS[level] || '#000000';
@@ -223,7 +223,7 @@ class Logger {
try { try {
const storedConfig = localStorage.getItem('layerforge_logger_config'); const storedConfig = localStorage.getItem('layerforge_logger_config');
if (storedConfig) { if (storedConfig) {
this.config = { ...this.config, ...JSON.parse(storedConfig) }; this.config = {...this.config, ...JSON.parse(storedConfig)};
} }
} catch (e) { } catch (e) {
console.error('Failed to load logger config from localStorage:', e); console.error('Failed to load logger config from localStorage:', e);
@@ -267,7 +267,7 @@ class Logger {
mimeType = 'text/plain'; mimeType = 'text/plain';
extension = 'txt'; extension = 'txt';
} }
const blob = new Blob([content], { type: mimeType }); const blob = new Blob([content], {type: mimeType});
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const a = document.createElement('a'); const a = document.createElement('a');
a.href = url; a.href = url;
@@ -314,6 +314,7 @@ class Logger {
this.log(module, LogLevel.ERROR, ...args); this.log(module, LogLevel.ERROR, ...args);
} }
} }
export const logger = new Logger(); export const logger = new Logger();
export const debug = (module, ...args) => logger.debug(module, ...args); export const debug = (module, ...args) => logger.debug(module, ...args);
export const info = (module, ...args) => logger.info(module, ...args); export const info = (module, ...args) => logger.info(module, ...args);