From 4807a6f3c357a290a25d4c3836911b0c84f7a729 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 15:38:59 +0100
Subject: [PATCH] Fix curved text positioning - bake offsets into path data

- Modify generateCurvePath to accept offsetX/offsetY parameters
- Path data now contains positioning - center at (280 + offsetX, 280 + offsetY)
- Remove confusing x/y/offset properties from TextPath element
- TextPath now renders with position baked into path, no additional positioning
- Curved text renders correctly without interfering with images or other elements
- Curved text not currently draggable (position set at creation time)

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

diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx
index 42a4b5b..df08405 100644
--- a/src/components/DesignCanvas.tsx
+++ b/src/components/DesignCanvas.tsx
@@ -325,28 +325,20 @@ function PrintSurface({
               {elements.map((el) =>
                 el.type === 'text' ? (
                   el.curvedPath ? (
-                    // Curved text - TextPath with dragging support
+                    // Curved text - TextPath with path-based positioning
                     <TextPath
                       key={el.id}
                       ref={(node) => {
                         if (node) nodeRefs.current.set(el.id, node);
                       }}
-                      data={generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse)}
+                      data={generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse, el.x - 280, el.y - 280)}
                       text={el.text}
                       fontFamily={el.fontFamily}
                       fontSize={el.fontSize}
                       fill={el.fill}
-                      offset={{ x: -el.x, y: -el.y }}
-                      x={el.x}
-                      y={el.y}
-                      draggable
                       listening={true}
                       onClick={() => setSelectedId(el.id)}
                       onTap={() => setSelectedId(el.id)}
-                      onDragEnd={(e) => {
-                        const node = e.target as any;
-                        updateElement(el.id, { x: node.x(), y: node.y() });
-                      }}
                     />
                   ) : (
                     // Regular straight text
@@ -419,9 +411,9 @@ function PrintSurface({
 }
 
 // Generate SVG path for curved text based on type and radius
-function generateCurvePath(type: string, radius: number, reverse: boolean = false): string {
-  const cx = 280; // center x (middle of 560px canvas)
-  const cy = 280; // center y
+function generateCurvePath(type: string, radius: number, reverse: boolean = false, offsetX: number = 0, offsetY: number = 0): string {
+  const cx = 280 + offsetX; // center x (middle of 560px canvas + offset)
+  const cy = 280 + offsetY; // center y + offset
   const r = radius;
 
   let path = '';