From 8509c1f08fe18801b32a8575690bf97cf0a78897 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 15:24:40 +0100
Subject: [PATCH] Fix curved text rendering - add x/y positioning and font
 properties

- Re-add x/y coordinates to TextPath for proper positioning within Group
- Add fontStyle and letterSpacing properties for complete font rendering
- Group remains draggable for movement
- Text content and font should now persist and render correctly when curves enabled

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

diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx
index 048e457..83d3ed5 100644
--- a/src/components/DesignCanvas.tsx
+++ b/src/components/DesignCanvas.tsx
@@ -325,26 +325,32 @@ function PrintSurface({
               {elements.map((el) =>
                 el.type === 'text' ? (
                   el.curvedPath ? (
-                    // Curved text path wrapped in draggable Group
+                    // Curved text - render as separate path-based text
                     <Group
                       key={el.id}
                       ref={(node) => {
                         if (node) nodeRefs.current.set(el.id, node);
                       }}
-                      x={el.x}
-                      y={el.y}
                       draggable
                       listening={true}
                       onClick={() => setSelectedId(el.id)}
                       onTap={() => setSelectedId(el.id)}
-                      onDragEnd={(e) => updateElement(el.id, { x: e.target.x(), y: e.target.y() })}
+                      onDragEnd={(e) => {
+                        const group = e.target;
+                        // Update x/y based on the path offset
+                        updateElement(el.id, { x: group.x(), y: group.y() });
+                      }}
                     >
                       <TextPath
+                        x={el.x}
+                        y={el.y}
                         data={generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse)}
                         text={el.text}
                         fontFamily={el.fontFamily}
                         fontSize={el.fontSize}
                         fill={el.fill}
+                        fontStyle={el.fontStyle || 'normal'}
+                        letterSpacing={el.letterSpacing || 0}
                         listening={false}
                       />
                     </Group>