Re-add dragging support for curved text via Group wrapper

- Wrap TextPath in Group to enable dragging while preserving text on toggle
- Group handles x/y positioning and drag events
- TextPath is non-listening so Group events take priority
- Curved text can now be selected, dragged, and unchecked without losing content

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Andymick
2026-07-18 15:20:36 +01:00
co-authored by Claude Haiku 4.5
parent 6a1f4c7ca1
commit 9f6dcccaa8
+14 -6
View File
@@ -1,7 +1,7 @@
'use client'; 'use client';
import { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react'; import { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
import { Stage, Layer, Text, TextPath, Image as KonvaImage, Transformer, Rect } from 'react-konva'; import { Stage, Layer, Text, TextPath, Image as KonvaImage, Transformer, Rect, Group } from 'react-konva';
import type Konva from 'konva'; import type Konva from 'konva';
import { v4 as uuid } from 'uuid'; import { v4 as uuid } from 'uuid';
import ProductMockup from './ProductMockup'; import ProductMockup from './ProductMockup';
@@ -325,21 +325,29 @@ function PrintSurface({
{elements.map((el) => {elements.map((el) =>
el.type === 'text' ? ( el.type === 'text' ? (
el.curvedPath ? ( el.curvedPath ? (
// Curved text path - centered on canvas // Curved text path wrapped in draggable Group
<TextPath <Group
key={el.id} key={el.id}
ref={(node) => { ref={(node) => {
if (node) nodeRefs.current.set(el.id, 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() })}
>
<TextPath
data={generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse)} data={generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse)}
text={el.text} text={el.text}
fontFamily={el.fontFamily} fontFamily={el.fontFamily}
fontSize={el.fontSize} fontSize={el.fontSize}
fill={el.fill} fill={el.fill}
listening={true} listening={false}
onClick={() => setSelectedId(el.id)}
onTap={() => setSelectedId(el.id)}
/> />
</Group>
) : ( ) : (
// Regular straight text // Regular straight text
<Text <Text