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) =>
|
{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
|
||||||
|
|||||||
Reference in New Issue
Block a user