hamid zarghami
72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
import { Star } from "react-konva";
|
|
import Konva from "konva";
|
|
import type { ShapeProps } from "./types";
|
|
|
|
const AbstractShape = ({ obj, isSelected, transformerRef, onSelect, onUpdate, draggable }: ShapeProps) => {
|
|
const shapeRef = useRef<Konva.Star>(null);
|
|
|
|
useEffect(() => {
|
|
if (isSelected && shapeRef.current && transformerRef.current) {
|
|
transformerRef.current.nodes([shapeRef.current]);
|
|
transformerRef.current.getLayer()?.batchDraw();
|
|
}
|
|
}, [isSelected, transformerRef]);
|
|
|
|
const baseRadius = Math.min((obj.width || 100) / 2, (obj.height || 100) / 2);
|
|
const abstractScale = 0.85;
|
|
const radius = baseRadius * abstractScale;
|
|
const innerRadius = radius * 0.5;
|
|
|
|
return (
|
|
<Star
|
|
ref={shapeRef}
|
|
x={obj.x + (obj.width || 100) / 2}
|
|
y={obj.y + (obj.height || 100) / 2}
|
|
numPoints={5}
|
|
innerRadius={innerRadius}
|
|
outerRadius={radius}
|
|
fill={obj.fill}
|
|
stroke={isSelected ? "#3b82f6" : obj.stroke}
|
|
strokeWidth={isSelected ? 3 : obj.strokeWidth || 2}
|
|
rotation={obj.rotation || 0}
|
|
draggable={draggable}
|
|
onClick={() => {
|
|
if (shapeRef.current) {
|
|
onSelect(obj.id, shapeRef.current);
|
|
}
|
|
}}
|
|
onDragEnd={(e) => {
|
|
const node = e.target;
|
|
onUpdate(obj.id, {
|
|
x: node.x() - (obj.width || 100) / 2,
|
|
y: node.y() - (obj.height || 100) / 2,
|
|
});
|
|
}}
|
|
onTransformEnd={() => {
|
|
const node = shapeRef.current;
|
|
if (!node) return;
|
|
|
|
const scaleX = node.scaleX();
|
|
const scaleY = node.scaleY();
|
|
|
|
node.scaleX(1);
|
|
node.scaleY(1);
|
|
|
|
const newRadius = Math.max(5, baseRadius * Math.min(scaleX, scaleY));
|
|
const newSize = newRadius * 2;
|
|
onUpdate(obj.id, {
|
|
x: node.x() - newSize / 2,
|
|
y: node.y() - newSize / 2,
|
|
rotation: node.rotation(),
|
|
width: newSize,
|
|
height: newSize,
|
|
});
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default AbstractShape;
|
|
|