Fix curved text positioning - bake offsets into path data

- Modify generateCurvePath to accept offsetX/offsetY parameters
- Path data now contains positioning - center at (280 + offsetX, 280 + offsetY)
- Remove confusing x/y/offset properties from TextPath element
- TextPath now renders with position baked into path, no additional positioning
- Curved text renders correctly without interfering with images or other elements
- Curved text not currently draggable (position set at creation time)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Andymick
2026-07-18 15:38:59 +01:00
co-authored by Claude Haiku 4.5
parent 5a228c2b08
commit 4807a6f3c3
+5 -13
View File
@@ -325,28 +325,20 @@ function PrintSurface({
{elements.map((el) => {elements.map((el) =>
el.type === 'text' ? ( el.type === 'text' ? (
el.curvedPath ? ( el.curvedPath ? (
// Curved text - TextPath with dragging support // Curved text - TextPath with path-based positioning
<TextPath <TextPath
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);
}} }}
data={generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse)} data={generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse, el.x - 280, el.y - 280)}
text={el.text} text={el.text}
fontFamily={el.fontFamily} fontFamily={el.fontFamily}
fontSize={el.fontSize} fontSize={el.fontSize}
fill={el.fill} fill={el.fill}
offset={{ x: -el.x, y: -el.y }}
x={el.x}
y={el.y}
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;
updateElement(el.id, { x: node.x(), y: node.y() });
}}
/> />
) : ( ) : (
// Regular straight text // Regular straight text
@@ -419,9 +411,9 @@ function PrintSurface({
} }
// Generate SVG path for curved text based on type and radius // Generate SVG path for curved text based on type and radius
function generateCurvePath(type: string, radius: number, reverse: boolean = false): string { function generateCurvePath(type: string, radius: number, reverse: boolean = false, offsetX: number = 0, offsetY: number = 0): string {
const cx = 280; // center x (middle of 560px canvas) const cx = 280 + offsetX; // center x (middle of 560px canvas + offset)
const cy = 280; // center y const cy = 280 + offsetY; // center y + offset
const r = radius; const r = radius;
let path = ''; let path = '';