From 8ec34a60c99674c766bff340c73b1230734d7956 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 15:15:29 +0100
Subject: [PATCH] Fix curved text selection and dragging

- Remove Group wrapper that was preventing TextPath from receiving click events
- Make TextPath directly draggable and selectable with proper event handlers
- TextPath now supports: clicking to select, dragging to move, position persistence
- Users can now properly interact with curved text on the canvas

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

diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx
index edafc9b..b2910c4 100644
--- a/src/components/DesignCanvas.tsx
+++ b/src/components/DesignCanvas.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
-import { Stage, Layer, Text, TextPath, Image as KonvaImage, Transformer, Rect, Group } from 'react-konva';
+import { Stage, Layer, Text, TextPath, Image as KonvaImage, Transformer, Rect } from 'react-konva';
 import type Konva from 'konva';
 import { v4 as uuid } from 'uuid';
 import ProductMockup from './ProductMockup';
@@ -325,29 +325,28 @@ function PrintSurface({
               {elements.map((el) =>
                 el.type === 'text' ? (
                   el.curvedPath ? (
-                    // Curved text path wrapped in a draggable Group
-                    <Group
+                    // Curved text path - directly draggable
+                    <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)}
+                      text={el.text}
+                      fontFamily={el.fontFamily}
+                      fontSize={el.fontSize}
+                      fill={el.fill}
                       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() })}
-                    >
-                      <TextPath
-                        data={generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse)}
-                        text={el.text}
-                        fontFamily={el.fontFamily}
-                        fontSize={el.fontSize}
-                        fill={el.fill}
-                        listening={false}
-                      />
-                    </Group>
+                      onDragEnd={(e) => {
+                        const node = e.target as any;
+                        updateElement(el.id, { x: node.x(), y: node.y() });
+                      }}
+                    />
                   ) : (
                     // Regular straight text
                     <Text