From dd6a9dfc851839bd6244ad9810948fd686ff724b Mon Sep 17 00:00:00 2001 From: Dariusz L Date: Thu, 26 Jun 2025 18:06:40 +0200 Subject: [PATCH] Rename canvas size methods and labels to output area Refactored method and variable names from 'canvas size' to 'output area size' across multiple files for clarity. Updated UI labels and related function calls to reflect this terminology change. --- js/Canvas.js | 4 +- js/CanvasInteractions.js | 2 +- js/CanvasLayers.js | 228 ++++++++++++++++++--------------------- js/CanvasState.js | 4 +- js/CanvasView.js | 4 +- 5 files changed, 113 insertions(+), 129 deletions(-) diff --git a/js/Canvas.js b/js/Canvas.js index 0f3b7fa..b866bea 100644 --- a/js/Canvas.js +++ b/js/Canvas.js @@ -241,8 +241,8 @@ export class Canvas { this.saveState(); } - updateCanvasSize(width, height, saveHistory = true) { - return this.canvasLayers.updateCanvasSize(width, height, saveHistory); + updateOutputAreaSize(width, height, saveHistory = true) { + return this.canvasLayers.updateOutputAreaSize(width, height, saveHistory); } render() { diff --git a/js/CanvasInteractions.js b/js/CanvasInteractions.js index ac1878e..9246b0d 100644 --- a/js/CanvasInteractions.js +++ b/js/CanvasInteractions.js @@ -680,7 +680,7 @@ export class CanvasInteractions { const rectX = this.interaction.canvasResizeRect.x; const rectY = this.interaction.canvasResizeRect.y; - this.canvas.updateCanvasSize(newWidth, newHeight); + this.canvas.updateOutputAreaSize(newWidth, newHeight); this.canvas.layers.forEach(layer => { layer.x -= rectX; diff --git a/js/CanvasLayers.js b/js/CanvasLayers.js index 81e8ad1..bb2f219 100644 --- a/js/CanvasLayers.js +++ b/js/CanvasLayers.js @@ -5,8 +5,8 @@ import {withErrorHandling, createValidationError} from "./ErrorHandler.js"; const log = createModuleLogger('CanvasLayers'); export class CanvasLayers { - constructor(canvas) { - this.canvas = canvas; + constructor(canvasLayers) { + this.canvasLayers = canvasLayers; this.blendModes = [ {name: 'normal', label: 'Normal'}, {name: 'multiply', label: 'Multiply'}, @@ -26,9 +26,10 @@ export class CanvasLayers { this.isAdjustingOpacity = false; this.internalClipboard = []; } + async copySelectedLayers() { - if (this.canvas.selectedLayers.length === 0) return; - this.internalClipboard = this.canvas.selectedLayers.map(layer => ({...layer})); + if (this.canvasLayers.selectedLayers.length === 0) return; + this.internalClipboard = this.canvasLayers.selectedLayers.map(layer => ({...layer})); log.info(`Copied ${this.internalClipboard.length} layer(s) to internal clipboard.`); try { const blob = await this.getFlattenedSelectionAsBlob(); @@ -44,23 +45,23 @@ export class CanvasLayers { pasteLayers() { if (this.internalClipboard.length === 0) return; - this.canvas.saveState(); + this.canvasLayers.saveState(); const newLayers = []; const pasteOffset = 20; this.internalClipboard.forEach(clipboardLayer => { const newLayer = { ...clipboardLayer, - x: clipboardLayer.x + pasteOffset / this.canvas.viewport.zoom, - y: clipboardLayer.y + pasteOffset / this.canvas.viewport.zoom, - zIndex: this.canvas.layers.length + x: clipboardLayer.x + pasteOffset / this.canvasLayers.viewport.zoom, + y: clipboardLayer.y + pasteOffset / this.canvasLayers.viewport.zoom, + zIndex: this.canvasLayers.layers.length }; - this.canvas.layers.push(newLayer); + this.canvasLayers.layers.push(newLayer); newLayers.push(newLayer); }); - this.canvas.updateSelection(newLayers); - this.canvas.render(); + this.canvasLayers.updateSelection(newLayers); + this.canvasLayers.render(); log.info(`Pasted ${newLayers.length} layer(s).`); } @@ -85,8 +86,8 @@ export class CanvasLayers { const img = new Image(); img.onload = async () => { await this.addLayerWithImage(img, { - x: this.canvas.lastMousePosition.x - img.width / 2, - y: this.canvas.lastMousePosition.y - img.height / 2, + x: this.canvasLayers.lastMousePosition.x - img.width / 2, + y: this.canvasLayers.lastMousePosition.y - img.height / 2, }); }; img.src = event.target.result; @@ -114,26 +115,26 @@ export class CanvasLayers { log.debug("Adding layer with image:", image); const imageId = generateUUID(); await saveImage(imageId, image.src); - this.canvas.imageCache.set(imageId, image.src); + this.canvasLayers.imageCache.set(imageId, image.src); const layer = { image: image, imageId: imageId, - x: (this.canvas.width - image.width) / 2, - y: (this.canvas.height - image.height) / 2, + x: (this.canvasLayers.width - image.width) / 2, + y: (this.canvasLayers.height - image.height) / 2, width: image.width, height: image.height, rotation: 0, - zIndex: this.canvas.layers.length, + zIndex: this.canvasLayers.layers.length, blendMode: 'normal', opacity: 1, ...layerProps }; - this.canvas.layers.push(layer); - this.canvas.updateSelection([layer]); - this.canvas.render(); - this.canvas.saveState(); + this.canvasLayers.layers.push(layer); + this.canvasLayers.updateSelection([layer]); + this.canvasLayers.render(); + this.canvasLayers.saveState(); log.info("Layer added successfully"); return layer; @@ -144,51 +145,51 @@ export class CanvasLayers { } async removeLayer(index) { - if (index >= 0 && index < this.canvas.layers.length) { - const layer = this.canvas.layers[index]; + if (index >= 0 && index < this.canvasLayers.layers.length) { + const layer = this.canvasLayers.layers[index]; if (layer.imageId) { - const isImageUsedElsewhere = this.canvas.layers.some((l, i) => i !== index && l.imageId === layer.imageId); + const isImageUsedElsewhere = this.canvasLayers.layers.some((l, i) => i !== index && l.imageId === layer.imageId); if (!isImageUsedElsewhere) { await removeImage(layer.imageId); - this.canvas.imageCache.delete(layer.imageId); + this.canvasLayers.imageCache.delete(layer.imageId); } } - this.canvas.layers.splice(index, 1); - this.canvas.selectedLayer = this.canvas.layers[this.canvas.layers.length - 1] || null; - this.canvas.render(); + this.canvasLayers.layers.splice(index, 1); + this.canvasLayers.selectedLayer = this.canvasLayers.layers[this.canvasLayers.layers.length - 1] || null; + this.canvasLayers.render(); } } moveLayer(fromIndex, toIndex) { - if (fromIndex >= 0 && fromIndex < this.canvas.layers.length && - toIndex >= 0 && toIndex < this.canvas.layers.length) { - const layer = this.canvas.layers.splice(fromIndex, 1)[0]; - this.canvas.layers.splice(toIndex, 0, layer); - this.canvas.render(); + if (fromIndex >= 0 && fromIndex < this.canvasLayers.layers.length && + toIndex >= 0 && toIndex < this.canvasLayers.layers.length) { + const layer = this.canvasLayers.layers.splice(fromIndex, 1)[0]; + this.canvasLayers.layers.splice(toIndex, 0, layer); + this.canvasLayers.render(); } } moveLayerUp() { - if (this.canvas.selectedLayers.length === 0) return; - const selectedIndicesSet = new Set(this.canvas.selectedLayers.map(layer => this.canvas.layers.indexOf(layer))); + if (this.canvasLayers.selectedLayers.length === 0) return; + const selectedIndicesSet = new Set(this.canvasLayers.selectedLayers.map(layer => this.canvasLayers.layers.indexOf(layer))); const sortedIndices = Array.from(selectedIndicesSet).sort((a, b) => b - a); sortedIndices.forEach(index => { const targetIndex = index + 1; - if (targetIndex < this.canvas.layers.length && !selectedIndicesSet.has(targetIndex)) { - [this.canvas.layers[index], this.canvas.layers[targetIndex]] = [this.canvas.layers[targetIndex], this.canvas.layers[index]]; + if (targetIndex < this.canvasLayers.layers.length && !selectedIndicesSet.has(targetIndex)) { + [this.canvasLayers.layers[index], this.canvasLayers.layers[targetIndex]] = [this.canvasLayers.layers[targetIndex], this.canvasLayers.layers[index]]; } }); - this.canvas.layers.forEach((layer, i) => layer.zIndex = i); - this.canvas.render(); - this.canvas.saveState(); + this.canvasLayers.layers.forEach((layer, i) => layer.zIndex = i); + this.canvasLayers.render(); + this.canvasLayers.saveState(); } moveLayerDown() { - if (this.canvas.selectedLayers.length === 0) return; - const selectedIndicesSet = new Set(this.canvas.selectedLayers.map(layer => this.canvas.layers.indexOf(layer))); + if (this.canvasLayers.selectedLayers.length === 0) return; + const selectedIndicesSet = new Set(this.canvasLayers.selectedLayers.map(layer => this.canvasLayers.layers.indexOf(layer))); const sortedIndices = Array.from(selectedIndicesSet).sort((a, b) => a - b); @@ -196,17 +197,17 @@ export class CanvasLayers { const targetIndex = index - 1; if (targetIndex >= 0 && !selectedIndicesSet.has(targetIndex)) { - [this.canvas.layers[index], this.canvas.layers[targetIndex]] = [this.canvas.layers[targetIndex], this.canvas.layers[index]]; + [this.canvasLayers.layers[index], this.canvasLayers.layers[targetIndex]] = [this.canvasLayers.layers[targetIndex], this.canvasLayers.layers[index]]; } }); - this.canvas.layers.forEach((layer, i) => layer.zIndex = i); - this.canvas.render(); - this.canvas.saveState(); + this.canvasLayers.layers.forEach((layer, i) => layer.zIndex = i); + this.canvasLayers.render(); + this.canvasLayers.saveState(); } getLayerAtPosition(worldX, worldY) { - for (let i = this.canvas.layers.length - 1; i >= 0; i--) { - const layer = this.canvas.layers[i]; + for (let i = this.canvasLayers.layers.length - 1; i >= 0; i--) { + const layer = this.canvasLayers.layers[i]; const centerX = layer.x + layer.width / 2; const centerY = layer.y + layer.height / 2; @@ -232,27 +233,10 @@ export class CanvasLayers { return null; } - resizeLayer(scale) { - this.canvas.selectedLayers.forEach(layer => { - layer.width *= scale; - layer.height *= scale; - }); - this.canvas.render(); - this.canvas.saveState(); - } - - rotateLayer(angle) { - this.canvas.selectedLayers.forEach(layer => { - layer.rotation += angle; - }); - this.canvas.render(); - this.canvas.saveState(); - } - async mirrorHorizontal() { - if (this.canvas.selectedLayers.length === 0) return; + if (this.canvasLayers.selectedLayers.length === 0) return; - const promises = this.canvas.selectedLayers.map(layer => { + const promises = this.canvasLayers.selectedLayers.map(layer => { return new Promise(resolve => { const tempCanvas = document.createElement('canvas'); const tempCtx = tempCanvas.getContext('2d'); @@ -273,14 +257,14 @@ export class CanvasLayers { }); await Promise.all(promises); - this.canvas.render(); - this.canvas.saveState(); + this.canvasLayers.render(); + this.canvasLayers.saveState(); } async mirrorVertical() { - if (this.canvas.selectedLayers.length === 0) return; + if (this.canvasLayers.selectedLayers.length === 0) return; - const promises = this.canvas.selectedLayers.map(layer => { + const promises = this.canvasLayers.selectedLayers.map(layer => { return new Promise(resolve => { const tempCanvas = document.createElement('canvas'); const tempCtx = tempCanvas.getContext('2d'); @@ -301,8 +285,8 @@ export class CanvasLayers { }); await Promise.all(promises); - this.canvas.render(); - this.canvas.saveState(); + this.canvasLayers.render(); + this.canvasLayers.saveState(); } async getLayerImageData(layer) { @@ -340,21 +324,21 @@ export class CanvasLayers { } - updateCanvasSize(width, height, saveHistory = true) { + updateOutputAreaSize(width, height, saveHistory = true) { if (saveHistory) { - this.canvas.saveState(); + this.canvasLayers.saveState(); } - this.canvas.width = width; - this.canvas.height = height; - this.canvas.maskTool.resize(width, height); + this.canvasLayers.width = width; + this.canvasLayers.height = height; + this.canvasLayers.maskTool.resize(width, height); - this.canvas.canvas.width = width; - this.canvas.canvas.height = height; + this.canvasLayers.canvasLayers.width = width; + this.canvasLayers.canvasLayers.height = height; - this.canvas.render(); + this.canvasLayers.render(); if (saveHistory) { - this.canvas.saveStateToDB(); + this.canvasLayers.saveStateToDB(); } } @@ -367,18 +351,18 @@ export class CanvasLayers { width: image.width, height: image.height, rotation: 0, - zIndex: this.canvas.layers.length + zIndex: this.canvasLayers.layers.length }; - this.canvas.layers.push(layer); - this.canvas.selectedLayer = layer; - this.canvas.render(); + this.canvasLayers.layers.push(layer); + this.canvasLayers.selectedLayer = layer; + this.canvasLayers.render(); } isRotationHandle(x, y) { - if (!this.canvas.selectedLayer) return false; + if (!this.canvasLayers.selectedLayer) return false; - const handleX = this.canvas.selectedLayer.x + this.canvas.selectedLayer.width / 2; - const handleY = this.canvas.selectedLayer.y - 20; + const handleX = this.canvasLayers.selectedLayer.x + this.canvasLayers.selectedLayer.width / 2; + const handleY = this.canvasLayers.selectedLayer.y - 20; const handleRadius = 5; return Math.sqrt(Math.pow(x - handleX, 2) + Math.pow(y - handleY, 2)) <= handleRadius; @@ -404,7 +388,7 @@ export class CanvasLayers { 'sw': {x: -halfW, y: halfH}, 'w': {x: -halfW, y: 0}, 'nw': {x: -halfW, y: -halfH}, - 'rot': {x: 0, y: -halfH - 20 / this.canvas.viewport.zoom} + 'rot': {x: 0, y: -halfH - 20 / this.canvasLayers.viewport.zoom} }; const worldHandles = {}; @@ -419,11 +403,11 @@ export class CanvasLayers { } getHandleAtPosition(worldX, worldY) { - if (this.canvas.selectedLayers.length === 0) return null; + if (this.canvasLayers.selectedLayers.length === 0) return null; - const handleRadius = 8 / this.canvas.viewport.zoom; - for (let i = this.canvas.selectedLayers.length - 1; i >= 0; i--) { - const layer = this.canvas.selectedLayers[i]; + const handleRadius = 8 / this.canvasLayers.viewport.zoom; + for (let i = this.canvasLayers.selectedLayers.length - 1; i >= 0; i--) { + const layer = this.canvasLayers.selectedLayers[i]; const handles = this.getHandles(layer); for (const key in handles) { @@ -439,17 +423,17 @@ export class CanvasLayers { } getResizeHandle(x, y) { - if (!this.canvas.selectedLayer) return null; + if (!this.canvasLayers.selectedLayer) return null; const handleRadius = 5; const handles = { - 'nw': {x: this.canvas.selectedLayer.x, y: this.canvas.selectedLayer.y}, - 'ne': {x: this.canvas.selectedLayer.x + this.canvas.selectedLayer.width, y: this.canvas.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}, 'se': { - x: this.canvas.selectedLayer.x + this.canvas.selectedLayer.width, - y: this.canvas.selectedLayer.y + this.canvas.selectedLayer.height + x: this.canvasLayers.selectedLayer.x + this.canvasLayers.selectedLayer.width, + y: this.canvasLayers.selectedLayer.y + this.canvasLayers.selectedLayer.height }, - 'sw': {x: this.canvas.selectedLayer.x, y: this.canvas.selectedLayer.y + this.canvas.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)) { @@ -500,14 +484,14 @@ export class CanvasLayers { slider.min = '0'; slider.max = '100'; - slider.value = this.canvas.selectedLayer.opacity ? Math.round(this.canvas.selectedLayer.opacity * 100) : 100; + slider.value = this.canvasLayers.selectedLayer.opacity ? Math.round(this.canvasLayers.selectedLayer.opacity * 100) : 100; slider.style.cssText = ` width: 100%; margin: 5px 0; display: none; `; - if (this.canvas.selectedLayer.blendMode === mode.name) { + if (this.canvasLayers.selectedLayer.blendMode === mode.name) { slider.style.display = 'block'; option.style.backgroundColor = '#3a3a3a'; } @@ -523,35 +507,35 @@ export class CanvasLayers { slider.style.display = 'block'; option.style.backgroundColor = '#3a3a3a'; - if (this.canvas.selectedLayer) { - this.canvas.selectedLayer.blendMode = mode.name; - this.canvas.render(); + if (this.canvasLayers.selectedLayer) { + this.canvasLayers.selectedLayer.blendMode = mode.name; + this.canvasLayers.render(); } }; slider.addEventListener('input', () => { - if (this.canvas.selectedLayer) { - this.canvas.selectedLayer.opacity = slider.value / 100; - this.canvas.render(); + if (this.canvasLayers.selectedLayer) { + this.canvasLayers.selectedLayer.opacity = slider.value / 100; + this.canvasLayers.render(); } }); slider.addEventListener('change', async () => { - if (this.canvas.selectedLayer) { - this.canvas.selectedLayer.opacity = slider.value / 100; - this.canvas.render(); + if (this.canvasLayers.selectedLayer) { + this.canvasLayers.selectedLayer.opacity = slider.value / 100; + this.canvasLayers.render(); const saveWithFallback = async (fileName) => { try { - const uniqueFileName = generateUniqueFileName(fileName, this.canvas.node.id); - return await this.canvas.saveToServer(uniqueFileName); + const uniqueFileName = generateUniqueFileName(fileName, this.canvasLayers.node.id); + return await this.canvasLayers.saveToServer(uniqueFileName); } catch (error) { console.warn(`Failed to save with unique name, falling back to original: ${fileName}`, error); - return await this.canvas.saveToServer(fileName); + return await this.canvasLayers.saveToServer(fileName); } }; - await saveWithFallback(this.canvas.widget.value); - if (this.canvas.node) { + await saveWithFallback(this.canvasLayers.widget.value); + if (this.canvasLayers.node) { app.graph.runStep(); } } @@ -613,11 +597,11 @@ export class CanvasLayers { async getFlattenedCanvasAsBlob() { return new Promise((resolve, reject) => { const tempCanvas = document.createElement('canvas'); - tempCanvas.width = this.canvas.width; - tempCanvas.height = this.canvas.height; + tempCanvas.width = this.canvasLayers.width; + tempCanvas.height = this.canvasLayers.height; const tempCtx = tempCanvas.getContext('2d'); - const sortedLayers = [...this.canvas.layers].sort((a, b) => a.zIndex - b.zIndex); + const sortedLayers = [...this.canvasLayers.layers].sort((a, b) => a.zIndex - b.zIndex); sortedLayers.forEach(layer => { if (!layer.image) return; @@ -650,13 +634,13 @@ export class CanvasLayers { }); } async getFlattenedSelectionAsBlob() { - if (this.canvas.selectedLayers.length === 0) { + if (this.canvasLayers.selectedLayers.length === 0) { return null; } return new Promise((resolve) => { let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; - this.canvas.selectedLayers.forEach(layer => { + this.canvasLayers.selectedLayers.forEach(layer => { const centerX = layer.x + layer.width / 2; const centerY = layer.y + layer.height / 2; const rad = layer.rotation * Math.PI / 180; @@ -698,7 +682,7 @@ export class CanvasLayers { tempCtx.translate(-minX, -minY); - const sortedSelection = [...this.canvas.selectedLayers].sort((a, b) => a.zIndex - b.zIndex); + const sortedSelection = [...this.canvasLayers.selectedLayers].sort((a, b) => a.zIndex - b.zIndex); sortedSelection.forEach(layer => { if (!layer.image) return; diff --git a/js/CanvasState.js b/js/CanvasState.js index f40e55d..1eb1f1b 100644 --- a/js/CanvasState.js +++ b/js/CanvasState.js @@ -55,8 +55,8 @@ export class CanvasState { zoom: 0.8 }; - this.canvas.updateCanvasSize(this.canvas.width, this.canvas.height, false); - log.debug(`Canvas resized to ${this.canvas.width}x${this.canvas.height} and viewport set.`); + this.canvas.updateOutputAreaSize(this.canvas.width, this.canvas.height, false); + log.debug(`Output Area resized to ${this.canvas.width}x${this.canvas.height} and viewport set.`); const loadedLayers = await this._loadLayers(savedState.layers); this.canvas.layers = loadedLayers.filter(l => l !== null); log.info(`Loaded ${this.canvas.layers.length} layers.`); diff --git a/js/CanvasView.js b/js/CanvasView.js index 71f7d23..1db8f2f 100644 --- a/js/CanvasView.js +++ b/js/CanvasView.js @@ -406,7 +406,7 @@ async function createCanvasWidget(node, widget, app) { $el("div.painter-separator"), $el("div.painter-button-group", {}, [ $el("button.painter-button", { - textContent: "Canvas Size", + textContent: "Output Area Size", onclick: () => { const dialog = $el("div.painter-dialog", { style: { @@ -479,7 +479,7 @@ async function createCanvasWidget(node, widget, app) { document.getElementById('confirm-size').onclick = () => { const width = parseInt(document.getElementById('canvas-width').value) || canvas.width; const height = parseInt(document.getElementById('canvas-height').value) || canvas.height; - canvas.updateCanvasSize(width, height); + canvas.updateOutputAreaSize(width, height); document.body.removeChild(dialog); };