diff --git a/src/pages/editor/components/tools/LineShape.tsx b/src/pages/editor/components/tools/LineShape.tsx index 0bc120d..edb5caf 100644 --- a/src/pages/editor/components/tools/LineShape.tsx +++ b/src/pages/editor/components/tools/LineShape.tsx @@ -13,14 +13,21 @@ const LineShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, dragga } }, [isSelected, transformerRef]); + const startX = obj.x; + const startY = obj.y; + const endX = obj.width || 0; + const endY = obj.height || 0; + return ( { @@ -30,9 +37,39 @@ const LineShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, dragga }} onDragEnd={(e) => { const node = e.target; + const newX = node.x(); + const newY = node.y(); + const dx = endX - startX; + const dy = endY - startY; + onUpdate(obj.id, { - x: node.x(), - y: node.y(), + x: newX, + y: newY, + width: newX + dx, + height: newY + dy, + }); + }} + onTransformEnd={() => { + const node = shapeRef.current; + if (!node) return; + + const scaleX = node.scaleX(); + const scaleY = node.scaleY(); + + node.scaleX(1); + node.scaleY(1); + + const newX = node.x(); + const newY = node.y(); + const dx = (endX - startX) * scaleX; + const dy = (endY - startY) * scaleY; + + onUpdate(obj.id, { + x: newX, + y: newY, + rotation: node.rotation(), + width: newX + dx, + height: newY + dy, }); }} />