From 14fa3acc7a80d7ad9566b302f9a08e41af005ad9 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 15:42:05 +0100
Subject: [PATCH] Add dragging support to curved text with path offset

- Make TextPath draggable
- On drag end, calculate delta (dx, dy) and add to element x/y
- Reset node position to 0 after drag so path offset recalculates
- Path is regenerated with new offset on next render
- Dragging now works smoothly without positioning conflicts

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

diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx
index df08405..9e0927d 100644
--- a/src/components/DesignCanvas.tsx
+++ b/src/components/DesignCanvas.tsx
@@ -325,7 +325,7 @@ function PrintSurface({
               {elements.map((el) =>
                 el.type === 'text' ? (
                   el.curvedPath ? (
-                    // Curved text - TextPath with path-based positioning
+                    // Curved text - TextPath with dragging via offset
                     <TextPath
                       key={el.id}
                       ref={(node) => {
@@ -336,9 +336,20 @@ function PrintSurface({
                       fontFamily={el.fontFamily}
                       fontSize={el.fontSize}
                       fill={el.fill}
+                      draggable
                       listening={true}
                       onClick={() => setSelectedId(el.id)}
                       onTap={() => setSelectedId(el.id)}
+                      onDragEnd={(e) => {
+                        const node = e.target as any;
+                        const dx = node.x();
+                        const dy = node.y();
+                        if (dx !== 0 || dy !== 0) {
+                          updateElement(el.id, { x: el.x + dx, y: el.y + dy });
+                          node.x(0);
+                          node.y(0);
+                        }
+                      }}
                     />
                   ) : (
                     // Regular straight text