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(); });