blur

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

@@ -3,7 +3,8 @@ import { RegularPolygon } 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 TriangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
     const shapeRef = useRef<Konva.RegularPolygon>(null);
@@ -16,17 +17,20 @@ const TriangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shape
 
     const actualStrokeWidth = obj.strokeWidth ?? 0;
     const hasStroke = actualStrokeWidth > 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).
+    // Avoid applying Konva blur filters on the element itself.
+    const blurProps = {};
 
-    useShapeBlurCache(shapeRef, isMask ? 0 : obj.blur, [
+    useShapeBlurCache(shapeRef, 0, [
         obj.width,
-        obj.height,
         obj.fill,
         obj.fillType,
         obj.gradient,
         obj.stroke,
         actualStrokeWidth,
-        obj.blur,
+        obj.height,
     ]);
 
     // برای نمایش انتخاب: اگر strokeWidth واقعی > 0 است، از آن استفاده کن، وگرنه stroke را برای انتخاب نمایش بده
@@ -41,14 +45,14 @@ const TriangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shape
     const displayStrokeWidth = isSelected
         ? (hasStroke ? actualStrokeWidth : 3)
         : (isMask && showGuide ? 2 : actualStrokeWidth);
-    const gradientProps = isMask
-        ? {}
-        : getKonvaGradientProps(
-            obj.fillType,
-            obj.gradient,
-            obj.width || 100,
-            obj.height || 100,
-            "centered",
+    const gradientProps = isMask || blurRadius > 0
+      ? {}
+      : getKonvaGradientProps(
+          obj.fillType,
+          obj.gradient,
+          obj.width || 100,
+          obj.height || 100,
+          "centered",
         );
 
     return (
@@ -60,7 +64,8 @@ const TriangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shape
             y={obj.y + (obj.height || 100) / 2}
             sides={3}
             radius={radius}
-            fill={isMask ? "transparent" : obj.fill}
+            // When blur is enabled, tint is rendered by BlurBackdropLayer.
+            fill={isMask ? "transparent" : blurRadius > 0 ? blurHitFill : (obj.fill ?? "#000000")}
             {...gradientProps}
             stroke={displayStroke}
             strokeWidth={displayStrokeWidth}