hamid zarghami
62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import { useRef } from "react";
|
|
import { Line } from "react-konva";
|
|
import Konva from "konva";
|
|
import type { ShapeProps } from "./types";
|
|
|
|
const PencilShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
|
|
const shapeRef = useRef<Konva.Line>(null);
|
|
|
|
const points = obj.points ?? [];
|
|
if (points.length < 4) return null;
|
|
|
|
const actualStrokeWidth = obj.strokeWidth ?? 3;
|
|
const hasStroke = actualStrokeWidth > 0;
|
|
|
|
const displayStroke = isSelected
|
|
? (hasStroke ? obj.stroke : "#3b82f6")
|
|
: (hasStroke ? obj.stroke : "#000000");
|
|
|
|
const displayStrokeWidth = isSelected
|
|
? (hasStroke ? actualStrokeWidth : 3)
|
|
: actualStrokeWidth;
|
|
|
|
return (
|
|
<Line
|
|
ref={shapeRef}
|
|
id={obj.id}
|
|
name="canvas-object"
|
|
x={obj.x}
|
|
y={obj.y}
|
|
points={points}
|
|
closed={false}
|
|
stroke={displayStroke}
|
|
strokeWidth={displayStrokeWidth}
|
|
tension={obj.tension ?? 0.5}
|
|
lineCap="round"
|
|
lineJoin="round"
|
|
hitStrokeWidth={Math.max(20, displayStrokeWidth + 10)}
|
|
perfectDrawEnabled={false}
|
|
rotation={obj.rotation ?? 0}
|
|
opacity={(obj.opacity ?? 100) / 100}
|
|
draggable={draggable}
|
|
onClick={(e) => {
|
|
if (shapeRef.current) {
|
|
onSelect(obj.id, shapeRef.current, e);
|
|
}
|
|
}}
|
|
onDragMove={(e) => {
|
|
e.target.getLayer()?.batchDraw();
|
|
}}
|
|
onDragEnd={(e) => {
|
|
const node = e.target;
|
|
onUpdate(obj.id, {
|
|
x: node.x(),
|
|
y: node.y(),
|
|
});
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default PencilShape;
|