grediant in a shape

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

@@ -2,6 +2,7 @@ import { useRef } from "react";
 import { Star } from "react-konva";
 import Konva from "konva";
 import type { ShapeProps } from "./types";
+import { getKonvaGradientProps } from "../../utils/gradient";
 
 const AbstractShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
     const shapeRef = useRef<Konva.Star>(null);
@@ -30,6 +31,15 @@ const AbstractShape = ({ 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",
+        );
 
     return (
         <Star
@@ -42,6 +52,7 @@ const AbstractShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shape
             innerRadius={innerRadius}
             outerRadius={radius}
             fill={isMask ? "transparent" : obj.fill}
+            {...gradientProps}
             stroke={displayStroke}
             strokeWidth={displayStrokeWidth}
             dash={isMask && showGuide ? [10, 5] : undefined}

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

@@ -2,6 +2,7 @@ import { useRef } from "react";
 import { Circle } from "react-konva";
 import Konva from "konva";
 import type { ShapeProps } from "./types";
+import { getKonvaGradientProps } from "../../utils/gradient";
 
 const CircleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
     const shapeRef = useRef<Konva.Circle>(null);
@@ -26,6 +27,10 @@ const CircleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapePr
     const displayStrokeWidth = isSelected
         ? (hasStroke ? actualStrokeWidth : 3)
         : (isMask && showGuide ? 2 : actualStrokeWidth);
+    const diameter = obj.width || 100;
+    const gradientProps = isMask
+        ? {}
+        : getKonvaGradientProps(obj.fillType, obj.gradient, diameter, diameter, "centered");
 
     return (
         <Circle
@@ -36,6 +41,7 @@ const CircleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapePr
             y={obj.y}
             radius={(obj.width || 50) / 2}
             fill={isMask ? "transparent" : obj.fill}
+            {...gradientProps}
             stroke={displayStroke}
             strokeWidth={displayStrokeWidth}
             dash={isMask && showGuide ? [10, 5] : undefined}

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

@@ -2,6 +2,7 @@ import { useRef } from "react";
 import { Rect } from "react-konva";
 import Konva from "konva";
 import type { ShapeProps } from "./types";
+import { getKonvaGradientProps } from "../../utils/gradient";
 
 const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
   const shapeRef = useRef<Konva.Rect>(null);
@@ -27,6 +28,15 @@ const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shap
   const displayStrokeWidth = isSelected
     ? (hasStroke ? actualStrokeWidth : 3)
     : (isMask && showGuide ? 2 : actualStrokeWidth);
+  const gradientProps = isMask
+    ? {}
+    : getKonvaGradientProps(
+      obj.fillType,
+      obj.gradient,
+      obj.width || 100,
+      obj.height || 100,
+      "rect",
+    );
 
   return (
     <Rect
@@ -39,6 +49,7 @@ const RectangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shap
       height={obj.height || 100}
       cornerRadius={cornerRadius}
       fill={isMask ? "transparent" : obj.fill}
+      {...gradientProps}
       stroke={displayStroke}
       strokeWidth={displayStrokeWidth}
       dash={isMask && showGuide ? [10, 5] : undefined}

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

@@ -2,6 +2,7 @@ import { useRef } from "react";
 import { RegularPolygon } from "react-konva";
 import Konva from "konva";
 import type { ShapeProps } from "./types";
+import { getKonvaGradientProps } from "../../utils/gradient";
 
 const TriangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapeProps) => {
     const shapeRef = useRef<Konva.RegularPolygon>(null);
@@ -27,6 +28,15 @@ 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",
+        );
 
     return (
         <RegularPolygon
@@ -38,6 +48,7 @@ const TriangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shape
             sides={3}
             radius={radius}
             fill={isMask ? "transparent" : obj.fill}
+            {...gradientProps}
             stroke={displayStroke}
             strokeWidth={displayStrokeWidth}
             dash={isMask && showGuide ? [10, 5] : undefined}