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:
co-authored by
Claude Haiku 4.5
parent
4807a6f3c3
commit
14fa3acc7a
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user