From 2b4fd31ea2685ea38a987eb7030c8bf5156b312e Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 1 Jul 2026 11:53:30 +0330
Subject: [PATCH] fix diffrent size in editor and viewer

---
 .../editor/components/tools/VideoShape.tsx    | 59 +++++++++++++++----
 1 file changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/pages/editor/components/tools/VideoShape.tsx b/src/pages/editor/components/tools/VideoShape.tsx
index 7302a7a..57e55f4 100644
--- a/src/pages/editor/components/tools/VideoShape.tsx
+++ b/src/pages/editor/components/tools/VideoShape.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Image as KonvaImage, Rect, Group, Circle, Text as KonvaText } from "react-konva";
 import Konva from "konva";
 import useImage from "use-image";
@@ -73,6 +73,35 @@ const VideoShape = ({
     const containerWidth = obj.width || 400;
     const containerHeight = obj.height || 300;
 
+    // هم‌تراز با viewer که object-fit: contain دارد
+    const imageLayout = useMemo(() => {
+        if (!image) {
+            return { x: 0, y: 0, width: containerWidth, height: containerHeight };
+        }
+
+        const naturalWidth = image.width || 1;
+        const naturalHeight = image.height || 1;
+        const containerRatio = containerWidth / containerHeight;
+        const imageRatio = naturalWidth / naturalHeight;
+
+        let width: number;
+        let height: number;
+        if (imageRatio > containerRatio) {
+            width = containerWidth;
+            height = containerWidth / imageRatio;
+        } else {
+            height = containerHeight;
+            width = containerHeight * imageRatio;
+        }
+
+        return {
+            x: (containerWidth - width) / 2,
+            y: (containerHeight - height) / 2,
+            width,
+            height,
+        };
+    }, [image, containerWidth, containerHeight]);
+
     const handlePlayClick = (e: Konva.KonvaEventObject<MouseEvent>) => {
         e.cancelBubble = true;
         const evt = e.evt;
@@ -121,20 +150,30 @@ const VideoShape = ({
                 <Rect
                     width={containerWidth}
                     height={containerHeight}
-                    fill="#000000"
+                    fill="transparent"
                     stroke={isSelected ? "#3b82f6" : "#666666"}
                     strokeWidth={isSelected ? 3 : (obj.strokeWidth ?? 0)}
                     onClick={handleGroupClick}
                 />
                 {image ? (
-                    <KonvaImage
-                        x={0}
-                        y={0}
-                        width={containerWidth}
-                        height={containerHeight}
-                        image={image}
-                        onClick={handleGroupClick}
-                    />
+                    <>
+                        <Rect
+                            x={imageLayout.x}
+                            y={imageLayout.y}
+                            width={imageLayout.width}
+                            height={imageLayout.height}
+                            fill="#000000"
+                            onClick={handleGroupClick}
+                        />
+                        <KonvaImage
+                            x={imageLayout.x}
+                            y={imageLayout.y}
+                            width={imageLayout.width}
+                            height={imageLayout.height}
+                            image={image}
+                            onClick={handleGroupClick}
+                        />
+                    </>
                 ) : (
                     <Rect
                         x={0}