andymick01/craft2prints
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert grid layout and fix curved text rendering

Browse Source 
- Revert grid layout changes - boxes now stack vertically as before
- Remove Group wrapper from curved text - was causing image disappearance
- Curved text now renders as simple TextPath with click handlers
- Text can be selected but not dragged (will add dragging back safely later)
- Images should now display correctly 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:31:54 +01:00
co-authored by Claude Haiku 4.5
parent 99aa9db6f8
commit 2718004ff4
1 changed files with 10 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DesignCanvas.tsx
+10 -21
View File
@@ -325,32 +325,21 @@ function PrintSurface({
{elements.map((el) => {elements.map((el) =>
el.type === 'text' ? ( el.type === 'text' ? (
el.curvedPath ? ( el.curvedPath ? (
// Curved text - render with path-based positioning // Curved text - simple TextPath without Group wrapper
<Group <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);
}} }}
x={el.x} data={generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse)}
y={el.y} text={el.text}
draggable fontFamily={el.fontFamily}
fontSize={el.fontSize}
fill={el.fill}
listening={true} listening={true}
onClick={() => setSelectedId(el.id)} onClick={() => setSelectedId(el.id)}
onTap={() => setSelectedId(el.id)} onTap={() => setSelectedId(el.id)}
onDragEnd={(e) => { />
const group = e.target;
updateElement(el.id, { x: group.x(), y: group.y() });
}}
>
<TextPath
data={generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse)}
text={el.text}
fontFamily={el.fontFamily}
fontSize={el.fontSize}
fill={el.fill}
listening={false}
/>
</Group>
) : ( ) : (
// Regular straight text // Regular straight text
<Text <Text
@@ -1162,7 +1151,7 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
{(() => { {(() => {
const images = view === 'front' ? elementsFront.filter(el => el.type === 'image') : elementsBack.filter(el => el.type === 'image'); const images = view === 'front' ? elementsFront.filter(el => el.type === 'image') : elementsBack.filter(el => el.type === 'image');
return images.length > 0 ? ( return images.length > 0 ? (
<div className="mb-4 space-y-3 grid grid-cols-1 lg:grid-cols-2 gap-3"> <div className="mb-4 space-y-3">
{images.map((img, idx) => ( {images.map((img, idx) => (
<div key={img.id} className="border border-line bg-surface p-3"> <div key={img.id} className="border border-line bg-surface p-3">
<p className="tag-label mb-2">Image {idx + 1} Dimensions</p> <p className="tag-label mb-2">Image {idx + 1} Dimensions</p>
@@ -1214,7 +1203,7 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
{(() => { {(() => {
const texts = view === 'front' ? elementsFront.filter(el => el.type === 'text') : elementsBack.filter(el => el.type === 'text'); const texts = view === 'front' ? elementsFront.filter(el => el.type === 'text') : elementsBack.filter(el => el.type === 'text');
return texts.length > 0 ? ( return texts.length > 0 ? (
<div className="mb-4 space-y-3 grid grid-cols-1 lg:grid-cols-2 gap-3"> <div className="mb-4 space-y-3">
{texts.map((text, idx) => ( {texts.map((text, idx) => (
<div key={text.id} className="border border-line bg-surface p-3"> <div key={text.id} className="border border-line bg-surface p-3">
<p className="tag-label mb-3">Font {idx + 1}</p> <p className="tag-label mb-3">Font {idx + 1}</p>