From 209af186b38cf8a8f75542c8a1aa4b9857f30283 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 11:48:28 +0100
Subject: [PATCH] Add position and size display to personalization canvas

- Display X and Y coordinates of selected elements
- Show width and height of selected images in pixels
- Add "Position & Size" panel below design controls
- Helps users understand exact placement during design

Users can now see precise measurements while personalizing
instead of guessing or calculating after the fact.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/components/DesignCanvas.tsx | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx
index ad4127c..63535d0 100644
--- a/src/components/DesignCanvas.tsx
+++ b/src/components/DesignCanvas.tsx
@@ -777,6 +777,34 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
             )}
           </div>
 
+          {selected && (
+            <div className="mt-4 border border-line bg-surface p-4">
+              <p className="mb-3 font-medium text-sm">Position & Size</p>
+              <div className="space-y-2 text-xs font-mono">
+                <div className="flex justify-between">
+                  <span className="text-muted">X:</span>
+                  <span>{Math.round(selected.x)} px</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted">Y:</span>
+                  <span>{Math.round(selected.y)} px</span>
+                </div>
+                {selected.type === 'image' && (
+                  <>
+                    <div className="flex justify-between">
+                      <span className="text-muted">Width:</span>
+                      <span>{Math.round(selected.width)} px</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-muted">Height:</span>
+                      <span>{Math.round(selected.height)} px</span>
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+
           {selected?.type === 'text' && (
             <div className="mt-4 flex flex-wrap items-center gap-3 border border-line bg-surface p-4">
               <input
@@ -829,6 +857,10 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
 
           {selected?.type === 'image' && (
             <div className="mt-4 flex flex-wrap items-center gap-3 border border-line bg-surface p-4">
+              <div className="flex items-center gap-3 text-sm">
+                <span className="font-medium">Size:</span>
+                <span className="font-mono text-xs">{Math.round(selected.width)} × {Math.round(selected.height)} px</span>
+              </div>
               <label className="flex items-center gap-2 text-sm text-muted">
                 Angle
                 <input