fix big size image

src/pages/editor/components/canvas/useTransformHandlers.ts

@@ -1,6 +1,11 @@
-import { useEffect, type RefObject } from "react";
+import { useEffect, useRef, type RefObject } from "react";
 import Konva from "konva";
 import { useEditorStore } from "../../store/editorStore";
+import {
+  getNodeTransformDimensions,
+  nodeHasPendingTransform,
+  resolveObjectFromNodeId,
+} from "../../utils/transformCommit";
 
 export const useTransformHandlers = (
   transformerRef: RefObject<Konva.Transformer | null>,
@@ -12,6 +17,7 @@ export const useTransformHandlers = (
     updateObject,
     applyTableResize,
   } = useEditorStore();
+  const commitTransformRef = useRef<(() => void) | null>(null);
 
   // Attach transformer to selected objects when they change
   useEffect(() => {
@@ -60,7 +66,15 @@ export const useTransformHandlers = (
       }
     }, 100);
 
-    return () => clearTimeout(timeoutId);
+    return () => {
+      clearTimeout(timeoutId);
+      const transformer = transformerRef.current;
+      if (!transformer) return;
+      const nodes = transformer.nodes();
+      if (nodes.some(nodeHasPendingTransform)) {
+        commitTransformRef.current?.();
+      }
+    };
   }, [selectedObjectIds, objects, transformerRef, layerRef]);
 
   useEffect(() => {
@@ -148,7 +162,7 @@ export const useTransformHandlers = (
 
       nodes.forEach((node) => {
         const nodeId = node.id();
-        const selectedObject = objects.find((obj) => obj.id === nodeId);
+        const selectedObject = resolveObjectFromNodeId(nodeId, objects);
         if (!selectedObject) return;
 
         // Handle group objects
@@ -505,23 +519,28 @@ export const useTransformHandlers = (
               height: Math.max(1, newHeight),
             });
           } else {
-            // Default for other objects (image, etc.)
+            // Default for raster objects (image, sticker, document, video, …)
+            const { width: baseWidth, height: baseHeight } =
+              getNodeTransformDimensions(node);
             updateObject(selectedObject.id, {
               x: node.x(),
               y: node.y(),
               rotation: node.rotation(),
-              width: Math.max(5, (selectedObject.width || 100) * scaleX),
-              height: Math.max(5, (selectedObject.height || 100) * scaleY),
+              width: Math.max(5, baseWidth * scaleX),
+              height: Math.max(5, baseHeight * scaleY),
             });
           }
         }
       });
     };
 
+    commitTransformRef.current = handleTransformEnd;
+
     transformer.on("transform", handleTransform);
     transformer.on("transformend", handleTransformEnd);
 
     return () => {
+      commitTransformRef.current = null;
       transformer.off("transform", handleTransform);
       transformer.off("transformend", handleTransformEnd);
     };