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:
co-authored by
Claude Haiku 4.5
parent
5a228c2b08
commit
4807a6f3c3
@@ -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 = '';
|
||||||
|
|||||||
Reference in New Issue
Block a user