hamid zarghami
102 lines
3.2 KiB
TypeScript
102 lines
3.2 KiB
TypeScript
import { useRef } from "react";
|
|
import { Rect } from "react-konva";
|
|
import Konva from "konva";
|
|
import type { ShapeProps } from "./types";
|
|
import { getKonvaGradientProps } from "../../utils/gradient";
|
|
import { getColorWithOpacity } from "../../utils/colorOpacity";
|
|
import { useShapeBlurCache } from "../../utils/shapeBlur";
|
|
|
|
const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
|
|
const shapeRef = useRef<Konva.Rect>(null);
|
|
|
|
// Transformer is managed in EditorCanvas for multi-select support
|
|
|
|
const isMask = obj.isMask || false;
|
|
const showGuide = obj.showMaskGuide !== false;
|
|
|
|
const actualStrokeWidth = obj.strokeWidth ?? 0;
|
|
const hasStroke = actualStrokeWidth > 0;
|
|
const cornerRadius = Math.max(0, obj.borderRadius ?? 0);
|
|
const blurRadius = obj.blur ?? 0;
|
|
const blurHitFill = blurRadius > 0 ? getColorWithOpacity(obj.fill ?? "#000000", 0.5) : undefined;
|
|
// Editor blur is implemented via backdrop-filter (see BlurBackdropLayer),
|
|
// so we intentionally do not apply Konva blur filters here.
|
|
const blurProps = {};
|
|
|
|
useShapeBlurCache(shapeRef, 0, [
|
|
obj.width,
|
|
obj.height,
|
|
cornerRadius,
|
|
obj.fill,
|
|
obj.fillType,
|
|
obj.gradient,
|
|
obj.stroke,
|
|
actualStrokeWidth,
|
|
]);
|
|
|
|
// برای نمایش انتخاب: اگر strokeWidth واقعی > 0 است، از آن استفاده کن، وگرنه stroke را برای انتخاب نمایش بده
|
|
const displayStroke = isSelected
|
|
? (hasStroke ? obj.stroke : "#3b82f6")
|
|
: (isMask && showGuide)
|
|
? "#ff6b6b"
|
|
: (isMask && !showGuide)
|
|
? "transparent"
|
|
: (hasStroke ? obj.stroke : undefined);
|
|
|
|
const displayStrokeWidth = isSelected
|
|
? (hasStroke ? actualStrokeWidth : 3)
|
|
: (isMask && showGuide ? 2 : actualStrokeWidth);
|
|
const gradientProps = isMask || blurRadius > 0
|
|
? {}
|
|
: getKonvaGradientProps(
|
|
obj.fillType,
|
|
obj.gradient,
|
|
obj.width || 100,
|
|
obj.height || 100,
|
|
"rect",
|
|
);
|
|
|
|
return (
|
|
<Rect
|
|
ref={shapeRef}
|
|
id={obj.id}
|
|
name={isMask ? "mask-shape" : "canvas-object"}
|
|
x={obj.x}
|
|
y={obj.y}
|
|
width={obj.width || 100}
|
|
height={obj.height || 100}
|
|
cornerRadius={cornerRadius}
|
|
// When blur is enabled, visual tint is rendered by BlurBackdropLayer.
|
|
// Use a tiny non-zero alpha so Konva hit-detection still works for dragging.
|
|
fill={isMask ? "transparent" : blurRadius > 0 ? blurHitFill : (obj.fill ?? "#000000")}
|
|
{...gradientProps}
|
|
stroke={displayStroke}
|
|
strokeWidth={displayStrokeWidth}
|
|
dash={isMask && showGuide ? [10, 5] : undefined}
|
|
rotation={obj.rotation || 0}
|
|
opacity={(obj.opacity ?? 100) / 100}
|
|
{...blurProps}
|
|
draggable={draggable}
|
|
onClick={(e) => {
|
|
if (shapeRef.current) {
|
|
onSelect(obj.id, shapeRef.current, e);
|
|
}
|
|
}}
|
|
onDragMove={(e) => {
|
|
// Snapping is applied at Stage level, avoid store updates per frame.
|
|
e.target.getLayer()?.batchDraw();
|
|
}}
|
|
onDragEnd={(e) => {
|
|
const node = e.target;
|
|
onUpdate(obj.id, {
|
|
x: node.x(),
|
|
y: node.y(),
|
|
});
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default RectangleShape;
|
|
|