Add dragging support to curved text

- Add x/y positioning and offset to TextPath for proper dragging
- Make TextPath draggable with onDragEnd handler
- Curved text can now be selected, moved, and toggled without issues
- Uses offset property to handle path-based positioning correctly

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Andymick
2026-07-18 15:33:21 +01:00
co-authored by Claude Haiku 4.5
parent 2718004ff4
commit 5a228c2b08
+9 -1
View File
@@ -325,7 +325,7 @@ function PrintSurface({
{elements.map((el) =>
el.type === 'text' ? (
el.curvedPath ? (
// Curved text - simple TextPath without Group wrapper
// Curved text - TextPath with dragging support
<TextPath
key={el.id}
ref={(node) => {
@@ -336,9 +336,17 @@ function PrintSurface({
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