hamid zarghami
72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import { useRef, useEffect } from "react";
|
|
import { Arrow } from "react-konva";
|
|
import Konva from "konva";
|
|
import type { ShapeProps } from "./types";
|
|
|
|
const ArrowShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
|
|
const shapeRef = useRef<Konva.Arrow>(null);
|
|
|
|
// Transformer is managed in EditorCanvas for multi-select support
|
|
|
|
const startX = obj.x;
|
|
const startY = obj.y;
|
|
const endX = obj.width || 0;
|
|
const endY = obj.height || 0;
|
|
|
|
const actualStrokeWidth = obj.strokeWidth ?? 2;
|
|
const actualStroke = obj.stroke || "#000000";
|
|
|
|
// اگر انتخاب شده و strokeWidth = 0 است، ضخامت را 3 کن تا مشخص باشد
|
|
const displayStrokeWidth = isSelected && actualStrokeWidth === 0 ? 3 : actualStrokeWidth;
|
|
|
|
// بهروزرسانی رنگ و ضخامت بهصورت لایو
|
|
useEffect(() => {
|
|
if (shapeRef.current) {
|
|
shapeRef.current.stroke(actualStroke);
|
|
shapeRef.current.fill(actualStroke);
|
|
shapeRef.current.strokeWidth(displayStrokeWidth);
|
|
shapeRef.current.getLayer()?.batchDraw();
|
|
}
|
|
}, [actualStroke, displayStrokeWidth, obj.stroke, obj.strokeWidth, isSelected]);
|
|
|
|
return (
|
|
<Arrow
|
|
ref={shapeRef}
|
|
id={obj.id}
|
|
x={startX}
|
|
y={startY}
|
|
points={[0, 0, endX - startX, endY - startY]}
|
|
stroke={actualStroke}
|
|
strokeWidth={displayStrokeWidth}
|
|
fill={actualStroke}
|
|
hitStrokeWidth={20}
|
|
perfectDrawEnabled={false}
|
|
rotation={obj.rotation || 0}
|
|
opacity={(obj.opacity ?? 100) / 100}
|
|
draggable={draggable}
|
|
onClick={(e) => {
|
|
if (shapeRef.current) {
|
|
onSelect(obj.id, shapeRef.current, e);
|
|
}
|
|
}}
|
|
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: newX,
|
|
y: newY,
|
|
width: newX + dx,
|
|
height: newY + dy,
|
|
});
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ArrowShape;
|
|
|