hamid zarghami
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { useRef } from "react";
|
|
import { Image as KonvaImage } from "react-konva";
|
|
import Konva from "konva";
|
|
import useImage from "use-image";
|
|
import type { ShapeProps } from "./types";
|
|
|
|
const ImageObject = ({
|
|
obj,
|
|
isSelected,
|
|
onSelect,
|
|
onUpdate,
|
|
draggable,
|
|
}: ShapeProps) => {
|
|
const [image] = useImage(obj.imageUrl || "");
|
|
const shapeRef = useRef<Konva.Image>(null);
|
|
|
|
// Transformer is managed in EditorCanvas for multi-select support
|
|
|
|
if (!image) return null;
|
|
|
|
return (
|
|
<KonvaImage
|
|
ref={shapeRef}
|
|
id={obj.id}
|
|
x={obj.x}
|
|
y={obj.y}
|
|
image={image}
|
|
width={obj.width || image.width}
|
|
height={obj.height || image.height}
|
|
// اگر draggable=false باشد، یعنی mask اعمال شده و نباید stroke نمایش داده شود (Group stroke دارد)
|
|
stroke={isSelected && draggable ? "#3b82f6" : undefined}
|
|
strokeWidth={isSelected && draggable ? 3 : 0}
|
|
rotation={obj.rotation || 0}
|
|
draggable={draggable}
|
|
onClick={draggable ? (e) => {
|
|
// فقط وقتی mask اعمال نشده onClick handler را فعال کن
|
|
if (shapeRef.current) {
|
|
onSelect(obj.id, shapeRef.current, e);
|
|
}
|
|
} : undefined}
|
|
onDragEnd={(e) => {
|
|
const node = e.target;
|
|
onUpdate(obj.id, {
|
|
x: node.x(),
|
|
y: node.y(),
|
|
});
|
|
}}
|
|
onTransformEnd={() => {
|
|
const node = shapeRef.current;
|
|
if (!node) return;
|
|
|
|
const scaleX = node.scaleX();
|
|
const scaleY = node.scaleY();
|
|
|
|
node.scaleX(1);
|
|
node.scaleY(1);
|
|
|
|
onUpdate(obj.id, {
|
|
x: node.x(),
|
|
y: node.y(),
|
|
rotation: node.rotation(),
|
|
width: Math.max(5, (obj.width || image.width) * scaleX),
|
|
height: Math.max(5, (obj.height || image.height) * scaleY),
|
|
});
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ImageObject;
|
|
|