diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx index edafc9b..b2910c4 100644 --- a/src/components/DesignCanvas.tsx +++ b/src/components/DesignCanvas.tsx @@ -1,7 +1,7 @@ 'use client'; import { useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react'; -import { Stage, Layer, Text, TextPath, Image as KonvaImage, Transformer, Rect, Group } from 'react-konva'; +import { Stage, Layer, Text, TextPath, Image as KonvaImage, Transformer, Rect } from 'react-konva'; import type Konva from 'konva'; import { v4 as uuid } from 'uuid'; import ProductMockup from './ProductMockup'; @@ -325,29 +325,28 @@ function PrintSurface({ {elements.map((el) => el.type === 'text' ? ( el.curvedPath ? ( - // Curved text path wrapped in a draggable Group - { if (node) nodeRefs.current.set(el.id, node); }} + data={generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse)} + text={el.text} + fontFamily={el.fontFamily} + fontSize={el.fontSize} + fill={el.fill} x={el.x} y={el.y} draggable listening={true} onClick={() => setSelectedId(el.id)} onTap={() => setSelectedId(el.id)} - onDragEnd={(e) => updateElement(el.id, { x: e.target.x(), y: e.target.y() })} - > - - + onDragEnd={(e) => { + const node = e.target as any; + updateElement(el.id, { x: node.x(), y: node.y() }); + }} + /> ) : ( // Regular straight text