Refactor JS code for consistent formatting and style

Standardized spacing and object literal formatting across multiple JS files for improved readability and consistency. No functional changes were made. Minor Python formatting adjustment for line length in canvas_node.py.

canvas_node.py

@@ -251,7 +251,8 @@ class CanvasNode:
 
             try:
                 # Wczytaj obraz bez maski
-                path_image_without_mask = folder_paths.get_annotated_filepath(canvas_image.replace('.png', '_without_mask.png'))
+                path_image_without_mask = folder_paths.get_annotated_filepath(
+                    canvas_image.replace('.png', '_without_mask.png'))
                 i = Image.open(path_image_without_mask)
                 i = ImageOps.exif_transpose(i)
                 if i.mode not in ['RGB', 'RGBA']:

js/Canvas.js

@@ -1,5 +1,5 @@
-import { getCanvasState, setCanvasState, removeCanvasState } from "./db.js";
-import { MaskTool } from "./Mask_tool.js";
+import {getCanvasState, setCanvasState, removeCanvasState} from "./db.js";
+import {MaskTool} from "./Mask_tool.js";
 
 export class Canvas {
     constructor(node, widget) {
@@ -103,7 +103,7 @@ export class Canvas {
 
             this.width = savedState.width || 512;
             this.height = savedState.height || 512;
-            this.viewport = savedState.viewport || { x: -(this.width / 4), y: -(this.height / 4), zoom: 0.8 };
+            this.viewport = savedState.viewport || {x: -(this.width / 4), y: -(this.height / 4), zoom: 0.8};
 
             this.updateCanvasSize(this.width, this.height, false);
             console.log(`Canvas resized to ${this.width}x${this.height} and viewport set.`);
@@ -115,7 +115,7 @@ export class Canvas {
                         const img = new Image();
                         img.onload = () => {
                             console.log(`Layer ${index}: Image loaded successfully.`);
-                            const newLayer = { ...layerData, image: img };
+                            const newLayer = {...layerData, image: img};
                             delete newLayer.imageSrc;
                             resolve(newLayer);
                         };
@@ -126,7 +126,7 @@ export class Canvas {
                         img.src = layerData.imageSrc;
                     } else {
                         console.log(`Layer ${index}: No imageSrc found, resolving layer data.`);
-                        resolve({ ...layerData });
+                        resolve({...layerData});
                     }
                 });
             });
@@ -156,7 +156,7 @@ export class Canvas {
         try {
             const state = {
                 layers: this.layers.map((layer, index) => {
-                    const newLayer = { ...layer };
+                    const newLayer = {...layer};
                     if (layer.image instanceof HTMLImageElement) {
                         console.log(`Layer ${index}: Serializing image to data:URL.`);
                         newLayer.imageSrc = layer.image.src;
@@ -189,7 +189,7 @@ export class Canvas {
 
     cloneLayers(layers) {
         return layers.map(layer => {
-            const newLayer = { ...layer };
+            const newLayer = {...layer};
             // Obiekty Image nie są klonowane, aby oszczędzać pamięć.
             // Zakładamy, że same dane obrazu się nie zmieniają.
             return newLayer;
@@ -198,7 +198,7 @@ export class Canvas {
 
     getStateSignature(layers) {
         return JSON.stringify(layers.map(layer => {
-            const sig = { ...layer };
+            const sig = {...layer};
             if (sig.image instanceof HTMLImageElement) {
                 sig.imageSrc = sig.image.src;
             }
@@ -257,7 +257,7 @@ export class Canvas {
         if (this.selectedLayers) {
             this.selectedLayers.forEach(sl => {
                 const found = this.layers.find(l => l.id === sl.id);
-                if(found) newSelectedLayers.push(found);
+                if (found) newSelectedLayers.push(found);
             });
         }
         this.updateSelection(newSelectedLayers);

js/Canvas_view.js

@@ -2,7 +2,7 @@ import {app} from "../../scripts/app.js";
 import {api} from "../../scripts/api.js";
 import {$el} from "../../scripts/ui.js";
 import {Canvas} from "./Canvas.js";
-import { clearAllCanvasStates } from "./db.js";
+import {clearAllCanvasStates} from "./db.js";
 
 async function createCanvasWidget(node, widget, app) {
     const canvas = new Canvas(node, widget);
@@ -337,7 +337,7 @@ async function createCanvasWidget(node, widget, app) {
                     id: `open-editor-btn-${node.id}`,
                     textContent: "⛶",
                     title: "Open in Editor",
-                    style: { minWidth: "40px", maxWidth: "40px", fontWeight: "bold" },
+                    style: {minWidth: "40px", maxWidth: "40px", fontWeight: "bold"},
                 }),
                 $el("button.painter-button", {
                     textContent: "?",
@@ -514,11 +514,26 @@ async function createCanvasWidget(node, widget, app) {
 
             // --- Group: Transform ---
             $el("div.painter-button-group", {}, [
-                $el("button.painter-button.requires-selection", { textContent: "Rotate +90°", onclick: () => canvas.rotateLayer(90) }),
-                $el("button.painter-button.requires-selection", { textContent: "Scale +5%", onclick: () => canvas.resizeLayer(1.05) }),
-                $el("button.painter-button.requires-selection", { textContent: "Scale -5%", onclick: () => canvas.resizeLayer(0.95) }),
-                $el("button.painter-button.requires-selection", { textContent: "Mirror H", onclick: () => canvas.mirrorHorizontal() }),
-                $el("button.painter-button.requires-selection", { textContent: "Mirror V", onclick: () => canvas.mirrorVertical() }),
+                $el("button.painter-button.requires-selection", {
+                    textContent: "Rotate +90°",
+                    onclick: () => canvas.rotateLayer(90)
+                }),
+                $el("button.painter-button.requires-selection", {
+                    textContent: "Scale +5%",
+                    onclick: () => canvas.resizeLayer(1.05)
+                }),
+                $el("button.painter-button.requires-selection", {
+                    textContent: "Scale -5%",
+                    onclick: () => canvas.resizeLayer(0.95)
+                }),
+                $el("button.painter-button.requires-selection", {
+                    textContent: "Mirror H",
+                    onclick: () => canvas.mirrorHorizontal()
+                }),
+                $el("button.painter-button.requires-selection", {
+                    textContent: "Mirror V",
+                    onclick: () => canvas.mirrorVertical()
+                }),
             ]),
 
             $el("div.painter-separator"),
@@ -553,7 +568,7 @@ async function createCanvasWidget(node, widget, app) {
                             mattedImage.src = result.matted_image;
                             await mattedImage.decode();
 
-                            const newLayer = { ...selectedLayer, image: mattedImage, zIndex: canvas.layers.length };
+                            const newLayer = {...selectedLayer, image: mattedImage, zIndex: canvas.layers.length};
                             canvas.layers.push(newLayer);
                             canvas.updateSelection([newLayer]);
                             canvas.render();
@@ -569,8 +584,18 @@ async function createCanvasWidget(node, widget, app) {
                         }
                     }
                 }),
-                $el("button.painter-button", { id: `undo-button-${node.id}`, textContent: "Undo", disabled: true, onclick: () => canvas.undo() }),
-                $el("button.painter-button", { id: `redo-button-${node.id}`, textContent: "Redo", disabled: true, onclick: () => canvas.redo() }),
+                $el("button.painter-button", {
+                    id: `undo-button-${node.id}`,
+                    textContent: "Undo",
+                    disabled: true,
+                    onclick: () => canvas.undo()
+                }),
+                $el("button.painter-button", {
+                    id: `redo-button-${node.id}`,
+                    textContent: "Redo",
+                    disabled: true,
+                    onclick: () => canvas.redo()
+                }),
             ]),
 
             $el("div.painter-separator"),
@@ -602,7 +627,7 @@ async function createCanvasWidget(node, widget, app) {
                             const mattedImage = new Image();
                             mattedImage.src = result.matted_image;
                             await mattedImage.decode();
-                           const newLayer = { ...selectedLayer, image: mattedImage, zIndex: canvas.layers.length };
+                            const newLayer = {...selectedLayer, image: mattedImage, zIndex: canvas.layers.length};
                             canvas.layers.push(newLayer);
                             canvas.updateSelection([newLayer]);
                             canvas.render();
@@ -618,14 +643,24 @@ async function createCanvasWidget(node, widget, app) {
                         }
                     }
                 }),
-               $el("button.painter-button", { id: `undo-button-${node.id}`, textContent: "Undo", disabled: true, onclick: () => canvas.undo() }),
-               $el("button.painter-button", { id: `redo-button-${node.id}`, textContent: "Redo", disabled: true, onclick: () => canvas.redo() }),
+                $el("button.painter-button", {
+                    id: `undo-button-${node.id}`,
+                    textContent: "Undo",
+                    disabled: true,
+                    onclick: () => canvas.undo()
+                }),
+                $el("button.painter-button", {
+                    id: `redo-button-${node.id}`,
+                    textContent: "Redo",
+                    disabled: true,
+                    onclick: () => canvas.redo()
+                }),
             ]),
 
             $el("div.painter-separator"),
 
             // --- Group: Masking ---
-           $el("div.painter-button-group", { id: "mask-controls" }, [
+            $el("div.painter-button-group", {id: "mask-controls"}, [
                 $el("button.painter-button", {
                     id: "mask-mode-btn",
                     textContent: "Draw Mask",
@@ -644,8 +679,8 @@ async function createCanvasWidget(node, widget, app) {
                         }
                     }
                 }),
-               $el("div.painter-slider-container.mask-control", { style: { display: 'none' } }, [
-                   $el("label", { for: "brush-size-slider", textContent: "Size:" }),
+                $el("div.painter-slider-container.mask-control", {style: {display: 'none'}}, [
+                    $el("label", {for: "brush-size-slider", textContent: "Size:"}),
                     $el("input", {
                         id: "brush-size-slider",
                         type: "range",
@@ -655,8 +690,8 @@ async function createCanvasWidget(node, widget, app) {
                         oninput: (e) => canvas.maskTool.setBrushSize(parseInt(e.target.value))
                     })
                 ]),
-               $el("div.painter-slider-container.mask-control", { style: { display: 'none' } }, [
-                   $el("label", { for: "brush-strength-slider", textContent: "Strength:" }),
+                $el("div.painter-slider-container.mask-control", {style: {display: 'none'}}, [
+                    $el("label", {for: "brush-strength-slider", textContent: "Strength:"}),
                     $el("input", {
                         id: "brush-strength-slider",
                         type: "range",
@@ -667,8 +702,8 @@ async function createCanvasWidget(node, widget, app) {
                         oninput: (e) => canvas.maskTool.setBrushStrength(parseFloat(e.target.value))
                     })
                 ]),
-               $el("div.painter-slider-container.mask-control", { style: { display: 'none' } }, [
-                   $el("label", { for: "brush-softness-slider", textContent: "Softness:" }),
+                $el("div.painter-slider-container.mask-control", {style: {display: 'none'}}, [
+                    $el("label", {for: "brush-softness-slider", textContent: "Softness:"}),
                     $el("input", {
                         id: "brush-softness-slider",
                         type: "range",
@@ -681,7 +716,7 @@ async function createCanvasWidget(node, widget, app) {
                 ]),
                 $el("button.painter-button.mask-control", {
                     textContent: "Clear Mask",
-                   style: { display: 'none' },
+                    style: {display: 'none'},
                     onclick: () => {
                         if (confirm("Are you sure you want to clear the mask?")) {
                             canvas.maskTool.clear();
@@ -697,7 +732,7 @@ async function createCanvasWidget(node, widget, app) {
             $el("div.painter-button-group", {}, [
                 $el("button.painter-button", {
                     textContent: "Clear Cache",
-                    style: { backgroundColor: "#c54747", borderColor: "#a53737" },
+                    style: {backgroundColor: "#c54747", borderColor: "#a53737"},
                     onclick: async () => {
                         if (confirm("Are you sure you want to clear all saved canvas states? This action cannot be undone.")) {
                             try {
@@ -733,9 +768,9 @@ async function createCanvasWidget(node, widget, app) {
     const undoButton = controlPanel.querySelector(`#undo-button-${node.id}`);
     const redoButton = controlPanel.querySelector(`#redo-button-${node.id}`);
 
-    canvas.onHistoryChange = ({ canUndo, canRedo }) => {
-        if(undoButton) undoButton.disabled = !canUndo;
-        if(redoButton) redoButton.disabled = !canRedo;
+    canvas.onHistoryChange = ({canUndo, canRedo}) => {
+        if (undoButton) undoButton.disabled = !canUndo;
+        if (redoButton) redoButton.disabled = !canRedo;
     };
 
     updateButtonStates();

js/Mask_tool.js

@@ -131,7 +131,7 @@ export class MaskTool {
         return maskImage;
     }
 
-    resize(width, height){
+    resize(width, height) {
         const oldMask = this.maskCanvas;
         this.maskCanvas = document.createElement('canvas');
         this.maskCanvas.width = width;

js/db.js

@@ -29,7 +29,7 @@ function openDB() {
             console.log("Upgrading IndexedDB...");
             const db = event.target.result;
             if (!db.objectStoreNames.contains(STORE_NAME)) {
-                db.createObjectStore(STORE_NAME, { keyPath: 'id' });
+                db.createObjectStore(STORE_NAME, {keyPath: 'id'});
                 console.log("Object store created:", STORE_NAME);
             }
         };
@@ -62,7 +62,7 @@ export async function setCanvasState(id, state) {
     return new Promise((resolve, reject) => {
         const transaction = db.transaction([STORE_NAME], 'readwrite');
         const store = transaction.objectStore(STORE_NAME);
-        const request = store.put({ id, state });
+        const request = store.put({id, state});
 
         request.onerror = (event) => {
             console.error("DB: Error setting canvas state:", event.target.error);