From 7a52be5a797489b48b6664814e46af9a8dbf212f Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Sat, 28 Jun 2025 19:54:34 +0200
Subject: [PATCH] Show original image size in layer info overlay

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.
---
 js/CanvasLayers.js   |  2 ++
 js/CanvasRenderer.js | 20 ++++++++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/js/CanvasLayers.js b/js/CanvasLayers.js
index 109dbca..a44e662 100644
--- a/js/CanvasLayers.js
+++ b/js/CanvasLayers.js
@@ -140,6 +140,8 @@ export class CanvasLayers {
             y: finalY,
             width: finalWidth,
             height: finalHeight,
+            originalWidth: image.width,
+            originalHeight: image.height,
             rotation: 0,
             zIndex: this.canvasLayers.layers.length,
             blendMode: 'normal',
diff --git a/js/CanvasRenderer.js b/js/CanvasRenderer.js
index 5465154..58bde37 100644
--- a/js/CanvasRenderer.js
+++ b/js/CanvasRenderer.js
@@ -190,8 +190,10 @@ export class CanvasRenderer {
                 const currentWidth = Math.round(layer.width);
                 const currentHeight = Math.round(layer.height);
                 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 centerY = layer.y + layer.height / 2;
                 const rad = layer.rotation * Math.PI / 180;
@@ -229,14 +231,20 @@ export class CanvasRenderer {
                 ctx.font = "14px sans-serif";
                 ctx.textAlign = "center";
                 ctx.textBaseline = "middle";
-                const textMetrics = ctx.measureText(text);
-                const textBgWidth = textMetrics.width + 10;
-                const textBgHeight = 22;
+                const lines = text.split('\n');
+                const textMetrics = lines.map(line => ctx.measureText(line));
+                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.fillRect(screenX - textBgWidth / 2, screenY - textBgHeight / 2, textBgWidth, textBgHeight);
 
                 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();
             });