gallery:

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

@@ -3,6 +3,7 @@ import { Image as KonvaImage } from "react-konva";
 import Konva from "konva";
 import useImage from "use-image";
 import type { ShapeProps } from "./types";
+import { clampPositionToStage } from "../../utils/stageBounds";
 
 const ImageObject = ({
     obj,
@@ -10,6 +11,8 @@ const ImageObject = ({
     onSelect,
     onUpdate,
     draggable,
+    stageWidth,
+    stageHeight,
 }: ShapeProps) => {
     const [image] = useImage(obj.imageUrl || "");
     const shapeRef = useRef<Konva.Image>(null);
@@ -18,32 +21,58 @@ const ImageObject = ({
 
     if (!image) return null;
 
+    const width = obj.width || image.width;
+    const height = obj.height || image.height;
+    const hasStageBounds = stageWidth != null && stageHeight != null;
+
     return (
         <KonvaImage
             ref={shapeRef}
             id={obj.id}
+            name="canvas-object"
             x={obj.x}
             y={obj.y}
             image={image}
-            width={obj.width || image.width}
-            height={obj.height || image.height}
-            // اگر draggable=false باشد، یعنی mask اعمال شده و نباید stroke نمایش داده شود (Group stroke دارد)
-            stroke={isSelected && draggable ? "#3b82f6" : undefined}
-            strokeWidth={isSelected && draggable ? 3 : 0}
+            width={width}
+            height={height}
+            stroke={isSelected ? "#3b82f6" : undefined}
+            strokeWidth={isSelected ? 3 : 0}
             rotation={obj.rotation || 0}
             draggable={draggable}
-            onClick={draggable ? (e) => {
-                // فقط وقتی mask اعمال نشده onClick handler را فعال کن
+            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);
                 }
-            } : undefined}
+            }}
             onDragEnd={(e) => {
                 const node = e.target;
-                onUpdate(obj.id, {
-                    x: node.x(),
-                    y: node.y(),
-                });
+                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 });
             }}
         />
     );