border radius for all shape

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

@@ -1,9 +1,10 @@
 import { useEffect, useRef } from "react";
-import { Image as KonvaImage } from "react-konva";
+import { Image as KonvaImage, Group, Rect } from "react-konva";
 import Konva from "konva";
 import useImage from "use-image";
 import type { ShapeProps } from "./types";
 import { clampPositionToStage } from "../../utils/stageBounds";
+import { createRoundedRectClipFunc, getObjectBorderRadius } from "../../utils/borderRadius";
 
 const ImageObject = ({
     obj,
@@ -17,9 +18,8 @@ const ImageObject = ({
 }: ShapeProps) => {
     const [image, status] = useImage(obj.imageUrl || "");
     const shapeRef = useRef<Konva.Image>(null);
+    const groupRef = useRef<Konva.Group>(null);
 
-    // Notify parent (ObjectRenderer) as soon as the image is decoded and ready.
-    // This lets the masked group re-cache itself after the image content appears.
     useEffect(() => {
         if (status === "loaded" && onImageReady) {
             onImageReady();
@@ -31,6 +31,84 @@ const ImageObject = ({
     const width = obj.width || image.width;
     const height = obj.height || image.height;
     const hasStageBounds = stageWidth != null && stageHeight != null;
+    const cornerRadius = getObjectBorderRadius(obj.borderRadius);
+    const clipFunc = createRoundedRectClipFunc(width, height, cornerRadius);
+
+    const dragBoundFunc =
+        draggable && hasStageBounds
+            ? (pos: { x: number; y: number }) =>
+                  clampPositionToStage(
+                      pos.x,
+                      pos.y,
+                      width,
+                      height,
+                      stageWidth!,
+                      stageHeight!,
+                  )
+            : undefined;
+
+    const handleDragEnd = (e: Konva.KonvaEventObject<DragEvent>) => {
+        const node = e.target;
+        let x = node.x();
+        let y = node.y();
+        if (hasStageBounds) {
+            ({ x, y } = clampPositionToStage(
+                x,
+                y,
+                width,
+                height,
+                stageWidth!,
+                stageHeight!,
+            ));
+            node.position({ x, y });
+        }
+        onUpdate(obj.id, { x, y });
+    };
+
+    const handleClick = (e: Konva.KonvaEventObject<MouseEvent>) => {
+        const node = cornerRadius > 0 ? groupRef.current : shapeRef.current;
+        if (node) {
+            onSelect(obj.id, node, e);
+        }
+    };
+
+    if (cornerRadius > 0) {
+        return (
+            <Group
+                ref={groupRef}
+                id={obj.id}
+                name="canvas-object"
+                x={obj.x}
+                y={obj.y}
+                rotation={obj.rotation || 0}
+                draggable={draggable}
+                clipFunc={clipFunc}
+                dragBoundFunc={dragBoundFunc}
+                onClick={handleClick}
+                onDragEnd={handleDragEnd}
+            >
+                <KonvaImage
+                    x={0}
+                    y={0}
+                    image={image}
+                    width={width}
+                    height={height}
+                />
+                {isSelected && (
+                    <Rect
+                        x={0}
+                        y={0}
+                        width={width}
+                        height={height}
+                        stroke="#3b82f6"
+                        strokeWidth={3}
+                        cornerRadius={cornerRadius}
+                        listening={false}
+                    />
+                )}
+            </Group>
+        );
+    }
 
     return (
         <KonvaImage
@@ -46,44 +124,11 @@ const ImageObject = ({
             strokeWidth={isSelected ? 3 : 0}
             rotation={obj.rotation || 0}
             draggable={draggable}
-            dragBoundFunc={
-                draggable && hasStageBounds
-                    ? (pos) =>
-                          clampPositionToStage(
-                              pos.x,
-                              pos.y,
-                              width,
-                              height,
-                              stageWidth!,
-                              stageHeight!,
-                          )
-                    : undefined
-            }
-            onClick={(e) => {
-                if (shapeRef.current) {
-                    onSelect(obj.id, shapeRef.current, e);
-                }
-            }}
-            onDragEnd={(e) => {
-                const node = e.target;
-                let x = node.x();
-                let y = node.y();
-                if (hasStageBounds) {
-                    ({ x, y } = clampPositionToStage(
-                        x,
-                        y,
-                        width,
-                        height,
-                        stageWidth!,
-                        stageHeight!,
-                    ));
-                    node.position({ x, y });
-                }
-                onUpdate(obj.id, { x, y });
-            }}
+            dragBoundFunc={dragBoundFunc}
+            onClick={handleClick}
+            onDragEnd={handleDragEnd}
         />
     );
 };
 
 export default ImageObject;
-