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>
This commit is contained in:
Andymick
2026-07-18 15:42:05 +01:00
co-authored by Claude Haiku 4.5
parent 4807a6f3c3
commit 14fa3acc7a
+12 -1
View File
@@ -325,7 +325,7 @@ function PrintSurface({
{elements.map((el) => {elements.map((el) =>
el.type === 'text' ? ( el.type === 'text' ? (
el.curvedPath ? ( el.curvedPath ? (
// Curved text - TextPath with path-based positioning // Curved text - TextPath with dragging via offset
<TextPath <TextPath
key={el.id} key={el.id}
ref={(node) => { ref={(node) => {
@@ -336,9 +336,20 @@ function PrintSurface({
fontFamily={el.fontFamily} fontFamily={el.fontFamily}
fontSize={el.fontSize} fontSize={el.fontSize}
fill={el.fill} fill={el.fill}
draggable
listening={true} listening={true}
onClick={() => setSelectedId(el.id)} onClick={() => setSelectedId(el.id)}
onTap={() => 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 // Regular straight text