Fix curved text rendering - move positioning to Group

- Move x/y positioning from TextPath to Group wrapper
- TextPath now renders at default position using only path data
- Group handles x/y positioning and dragging
- Remove fontStyle/letterSpacing from TextPath (not needed)
- This should fix text disappearing when curved text is enabled

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Andymick
2026-07-18 15:27:34 +01:00
co-authored by Claude Haiku 4.5
parent 8509c1f08f
commit f90a5adc44
+3 -6
View File
@@ -325,32 +325,29 @@ function PrintSurface({
{elements.map((el) => {elements.map((el) =>
el.type === 'text' ? ( el.type === 'text' ? (
el.curvedPath ? ( el.curvedPath ? (
// Curved text - render as separate path-based text // Curved text - render with path-based positioning
<Group <Group
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);
}} }}
x={el.x}
y={el.y}
draggable draggable
listening={true} listening={true}
onClick={() => setSelectedId(el.id)} onClick={() => setSelectedId(el.id)}
onTap={() => setSelectedId(el.id)} onTap={() => setSelectedId(el.id)}
onDragEnd={(e) => { onDragEnd={(e) => {
const group = e.target; const group = e.target;
// Update x/y based on the path offset
updateElement(el.id, { x: group.x(), y: group.y() }); updateElement(el.id, { x: group.x(), y: group.y() });
}} }}
> >
<TextPath <TextPath
x={el.x}
y={el.y}
data={generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse)} data={generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse)}
text={el.text} text={el.text}
fontFamily={el.fontFamily} fontFamily={el.fontFamily}
fontSize={el.fontSize} fontSize={el.fontSize}
fill={el.fill} fill={el.fill}
fontStyle={el.fontStyle || 'normal'}
letterSpacing={el.letterSpacing || 0}
listening={false} listening={false}
/> />
</Group> </Group>