hamid zarghami
63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import { useRef } from "react";
|
|
import { RegularPolygon } from "react-konva";
|
|
import Konva from "konva";
|
|
import type { ShapeProps } from "./types";
|
|
|
|
const TriangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
|
|
const shapeRef = useRef<Konva.RegularPolygon>(null);
|
|
|
|
// Transformer is managed in EditorCanvas for multi-select support
|
|
|
|
const isMask = obj.isMask || false;
|
|
const showGuide = obj.showMaskGuide !== false;
|
|
const radius = Math.min((obj.width || 100) / 2, (obj.height || 100) / 2);
|
|
|
|
return (
|
|
<RegularPolygon
|
|
ref={shapeRef}
|
|
id={obj.id}
|
|
name={isMask ? "mask-shape" : "canvas-object"}
|
|
x={obj.x + (obj.width || 100) / 2}
|
|
y={obj.y + (obj.height || 100) / 2}
|
|
sides={3}
|
|
radius={radius}
|
|
fill={isMask ? "transparent" : obj.fill}
|
|
stroke={
|
|
isSelected
|
|
? "#3b82f6"
|
|
: (isMask && showGuide)
|
|
? "#ff6b6b"
|
|
: (isMask && !showGuide)
|
|
? "transparent"
|
|
: obj.stroke
|
|
}
|
|
strokeWidth={isSelected ? 3 : (isMask && showGuide ? 2 : (obj.strokeWidth ?? 0))}
|
|
dash={isMask && showGuide ? [10, 5] : undefined}
|
|
rotation={obj.rotation || 0}
|
|
draggable={draggable}
|
|
onClick={(e) => {
|
|
if (shapeRef.current) {
|
|
onSelect(obj.id, shapeRef.current, e);
|
|
}
|
|
}}
|
|
onDragMove={(e) => {
|
|
const node = e.target;
|
|
onUpdate(obj.id, {
|
|
x: node.x() - (obj.width || 100) / 2,
|
|
y: node.y() - (obj.height || 100) / 2,
|
|
});
|
|
}}
|
|
onDragEnd={(e) => {
|
|
const node = e.target;
|
|
onUpdate(obj.id, {
|
|
x: node.x() - (obj.width || 100) / 2,
|
|
y: node.y() - (obj.height || 100) / 2,
|
|
});
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default TriangleShape;
|
|
|