alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-25 14:25:44 -03:00
Code Issues Packages Projects Releases Wiki Activity

Show original image size in layer info overlay

Browse Source 
Added originalWidth and originalHeight properties to layers in CanvasLayers.js. Updated CanvasRenderer.js to display the original image dimensions in the layer info overlay if available, and improved overlay rendering to support multiline text.
This commit is contained in:
Dariusz L
2025-06-28 19:54:34 +02:00
parent 4376a21147
commit 7a52be5a79
2 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/CanvasLayers.js
View File

@@ -140,6 +140,8 @@ export class CanvasLayers {
y: finalY, y: finalY,
width: finalWidth, width: finalWidth,
height: finalHeight, height: finalHeight,
originalWidth: image.width,
originalHeight: image.height,
rotation: 0, rotation: 0,
zIndex: this.canvasLayers.layers.length, zIndex: this.canvasLayers.layers.length,
blendMode: 'normal', blendMode: 'normal',

20
js/CanvasRenderer.js
View File

@@ -190,8 +190,10 @@ export class CanvasRenderer {
const currentWidth = Math.round(layer.width); const currentWidth = Math.round(layer.width);
const currentHeight = Math.round(layer.height); const currentHeight = Math.round(layer.height);
const rotation = Math.round(layer.rotation % 360); const rotation = Math.round(layer.rotation % 360);
const text = `${currentWidth}x${currentHeight} | ${rotation}° | Layer #${layerIndex + 1}`; let text = `${currentWidth}x${currentHeight} | ${rotation}° | Layer #${layerIndex + 1}`;
if (layer.originalWidth && layer.originalHeight) {
text += `\nOriginal: ${layer.originalWidth}x${layer.originalHeight}`;
}
const centerX = layer.x + layer.width / 2; const centerX = layer.x + layer.width / 2;
const centerY = layer.y + layer.height / 2; const centerY = layer.y + layer.height / 2;
const rad = layer.rotation * Math.PI / 180; const rad = layer.rotation * Math.PI / 180;
@@ -229,14 +231,20 @@ export class CanvasRenderer {
ctx.font = "14px sans-serif"; ctx.font = "14px sans-serif";
ctx.textAlign = "center"; ctx.textAlign = "center";
ctx.textBaseline = "middle"; ctx.textBaseline = "middle";
const textMetrics = ctx.measureText(text); const lines = text.split('\n');
const textBgWidth = textMetrics.width + 10; const textMetrics = lines.map(line => ctx.measureText(line));
const textBgHeight = 22; const textBgWidth = Math.max(...textMetrics.map(m => m.width)) + 10;
const lineHeight = 18;
const textBgHeight = lines.length * lineHeight + (lines.length > 1 ? 5 : 0) + 10;
ctx.fillStyle = "rgba(0, 0, 0, 0.7)"; ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
ctx.fillRect(screenX - textBgWidth / 2, screenY - textBgHeight / 2, textBgWidth, textBgHeight); ctx.fillRect(screenX - textBgWidth / 2, screenY - textBgHeight / 2, textBgWidth, textBgHeight);
ctx.fillStyle = "white"; ctx.fillStyle = "white";
ctx.fillText(text, screenX, screenY); lines.forEach((line, index) => {
const yPos = screenY - (textBgHeight / 2) + (lineHeight / 2) + (index * lineHeight) + 5;
ctx.fillText(line, screenX, yPos);
});
ctx.restore(); ctx.restore();
}); });