From 2890603c29da9f33fad6944638b4969b0f56f452 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Tue, 6 Jan 2026 11:37:09 +0330
Subject: [PATCH] fix text resize in extra padding

---
 src/pages/editor/components/EditorCanvas.tsx  | 18 ++++--
 .../editor/components/tools/TextShape.tsx     | 56 ++++++++++---------
 2 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/src/pages/editor/components/EditorCanvas.tsx b/src/pages/editor/components/EditorCanvas.tsx
index 703f900..98762aa 100644
--- a/src/pages/editor/components/EditorCanvas.tsx
+++ b/src/pages/editor/components/EditorCanvas.tsx
@@ -460,10 +460,14 @@ const EditorCanvas = () => {
               height: node.y() + dy,
             });
           } else if (selectedObject.type === "text" || selectedObject.type === "link") {
-            // Text and Link: calculate actual dimensions after transform
-            const clientRect = node.getClientRect({ skipTransform: true });
-            const newWidth = clientRect.width * scaleX;
-            const newHeight = clientRect.height * scaleY;
+            // Text and Link: use stored width/height from store, not getClientRect
+            // because TextShape auto-calculates dimensions and we need to scale the stored values
+            const storedWidth = selectedObject.width || 100;
+            const storedHeight = selectedObject.height || 100;
+            // Use average scale to maintain aspect ratio for text
+            const avgScale = (scaleX + scaleY) / 2;
+            const newWidth = Math.max(5, storedWidth * scaleX);
+            const newHeight = Math.max(5, storedHeight * scaleY);
 
             if (selectedObject.type === "link") {
               // For link, also update fontSize
@@ -474,12 +478,14 @@ const EditorCanvas = () => {
                 fontSize: selectedObject.fontSize ? Math.max(5, selectedObject.fontSize * scaleX) : undefined,
               });
             } else {
+              // For text, update width, height, and fontSize
               updateObject(selectedObject.id, {
                 x: node.x(),
                 y: node.y(),
                 rotation: node.rotation(),
-                width: Math.max(5, newWidth),
-                height: Math.max(5, newHeight),
+                width: newWidth,
+                height: newHeight,
+                fontSize: selectedObject.fontSize ? Math.max(5, selectedObject.fontSize * avgScale) : undefined,
               });
             }
           } else {
diff --git a/src/pages/editor/components/tools/TextShape.tsx b/src/pages/editor/components/tools/TextShape.tsx
index 98632b5..fa68b9f 100644
--- a/src/pages/editor/components/tools/TextShape.tsx
+++ b/src/pages/editor/components/tools/TextShape.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useMemo } from "react";
-import { Text } from "react-konva";
+import { Text, Group } from "react-konva";
 import Konva from "konva";
 import type { TextShapeProps } from "./types";
 
@@ -40,6 +40,7 @@ const TextShape = ({
   draggable,
 }: TextShapeProps) => {
   const shapeRef = useRef<Konva.Text>(null);
+  const groupRef = useRef<Konva.Group>(null);
 
   // Transformer is managed in EditorCanvas for multi-select support
   // Set offset for text node
@@ -51,25 +52,18 @@ const TextShape = ({
   }, []);
 
   // Update actual text dimensions after render
+  // Only update if width/height are not set (initial render)
   useEffect(() => {
-    if (shapeRef.current) {
+    if (shapeRef.current && (!obj.width || !obj.height)) {
       const node = shapeRef.current;
       const clientRect = node.getClientRect({ skipTransform: true });
 
-      // اگر width یا height واقعی با مقدار ذخیره شده متفاوت است، آپدیت کن
+      // Update store with actual dimensions
       if (clientRect.width && clientRect.height) {
-        const needsUpdate =
-          !obj.width ||
-          !obj.height ||
-          Math.abs((obj.width || 0) - clientRect.width) > 5 ||
-          Math.abs((obj.height || 0) - clientRect.height) > 5;
-
-        if (needsUpdate) {
-          onUpdate(obj.id, {
-            width: Math.ceil(clientRect.width),
-            height: Math.ceil(clientRect.height),
-          });
-        }
+        onUpdate(obj.id, {
+          width: Math.ceil(clientRect.width),
+          height: Math.ceil(clientRect.height),
+        });
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -80,24 +74,19 @@ const TextShape = ({
   const fillColor = useMemo(() => getColorWithOpacity(obj.fill, obj.opacity), [obj.fill, obj.opacity]);
 
   return (
-    <Text
-      ref={shapeRef}
+    <Group
+      ref={groupRef}
       id={obj.id}
       name="text-object"
       x={obj.x}
       y={obj.y}
-      text={obj.text || ""}
-      fontSize={obj.fontSize || 24}
-      fill={fillColor}
-      fontFamily={fontFamily}
-      fontStyle={fontWeight}
-      letterSpacing={obj.letterSpacing ?? 0}
-      align="right"
+      width={obj.width}
+      height={obj.height}
       rotation={obj.rotation || 0}
       draggable={draggable}
       onClick={(e) => {
-        if (shapeRef.current) {
-          onSelect(obj.id, shapeRef.current, e);
+        if (groupRef.current) {
+          onSelect(obj.id, groupRef.current, e);
         }
       }}
       onDragEnd={(e) => {
@@ -107,7 +96,20 @@ const TextShape = ({
           y: node.y(),
         });
       }}
-    />
+    >
+      <Text
+        ref={shapeRef}
+        x={0}
+        y={0}
+        text={obj.text || ""}
+        fontSize={obj.fontSize || 24}
+        fill={fillColor}
+        fontFamily={fontFamily}
+        fontStyle={fontWeight}
+        letterSpacing={obj.letterSpacing ?? 0}
+        align="right"
+      />
+    </Group>
   );
 };