fix text resize in extra padding

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
+            // Text and Link: use stored width/height from store, not getClientRect
-            const clientRect = node.getClientRect({ skipTransform: true });
+            // because TextShape auto-calculates dimensions and we need to scale the stored values
-            const newWidth = clientRect.width * scaleX;
+            const storedWidth = selectedObject.width || 100;
-            const newHeight = clientRect.height * scaleY;
+            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),
+                width: newWidth,
-                height: Math.max(5, newHeight),
+                height: newHeight,
+                fontSize: selectedObject.fontSize ? Math.max(5, selectedObject.fontSize * avgScale) : undefined,
               });
             }
           } else {

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,27 +52,20 @@ 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),
         });
       }
     }
-    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [obj.text, obj.fontSize, obj.fontFamily, obj.fontWeight, obj.letterSpacing]);
 
@@ -80,24 +74,19 @@ const TextShape = ({
   const fillColor = useMemo(() => getColorWithOpacity(obj.fill, obj.opacity), [obj.fill, obj.opacity]);
 
   return (
-    <Text
+    <Group
-      ref={shapeRef}
+      ref={groupRef}
       id={obj.id}
       name="text-object"
       x={obj.x}
       y={obj.y}
-      text={obj.text || ""}
+      width={obj.width}
-      fontSize={obj.fontSize || 24}
+      height={obj.height}
-      fill={fillColor}
-      fontFamily={fontFamily}
-      fontStyle={fontWeight}
-      letterSpacing={obj.letterSpacing ?? 0}
-      align="right"
       rotation={obj.rotation || 0}
       draggable={draggable}
       onClick={(e) => {
-        if (shapeRef.current) {
+        if (groupRef.current) {
-          onSelect(obj.id, shapeRef.current, e);
+          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>
   );
 };