blur

src/pages/editor/components/tools/RectangleShape.tsx

@@ -3,7 +3,8 @@ import { Rect } from "react-konva";
 import Konva from "konva";
 import type { ShapeProps } from "./types";
 import { getKonvaGradientProps } from "../../utils/gradient";
-import { getKonvaBlurProps, useShapeBlurCache } from "../../utils/shapeBlur";
+import { getColorWithOpacity } from "../../utils/colorOpacity";
+import { useShapeBlurCache } from "../../utils/shapeBlur";
 
 const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
   const shapeRef = useRef<Konva.Rect>(null);
@@ -16,9 +17,13 @@ const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shap
   const actualStrokeWidth = obj.strokeWidth ?? 0;
   const hasStroke = actualStrokeWidth > 0;
   const cornerRadius = Math.max(0, obj.borderRadius ?? 0);
-  const blurProps = isMask ? {} : getKonvaBlurProps(obj.blur);
+  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, isMask ? 0 : obj.blur, [
+  useShapeBlurCache(shapeRef, 0, [
     obj.width,
     obj.height,
     cornerRadius,
@@ -27,7 +32,6 @@ const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shap
     obj.gradient,
     obj.stroke,
     actualStrokeWidth,
-    obj.blur,
   ]);
   
   // برای نمایش انتخاب: اگر strokeWidth واقعی > 0 است، از آن استفاده کن، وگرنه stroke را برای انتخاب نمایش بده
@@ -42,7 +46,7 @@ const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shap
   const displayStrokeWidth = isSelected
     ? (hasStroke ? actualStrokeWidth : 3)
     : (isMask && showGuide ? 2 : actualStrokeWidth);
-  const gradientProps = isMask
+  const gradientProps = isMask || blurRadius > 0
     ? {}
     : getKonvaGradientProps(
       obj.fillType,
@@ -62,7 +66,9 @@ const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shap
       width={obj.width || 100}
       height={obj.height || 100}
       cornerRadius={cornerRadius}
-      fill={isMask ? "transparent" : obj.fill}
+      // 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}