fix resize

src/pages/editor/components/EditorCanvas.tsx

@@ -354,6 +354,18 @@ const EditorCanvas = () => {
           const groupWidth = maxX - minX;
           const groupHeight = maxY - minY;
 
+          // Update group node directly in Konva first to prevent transformer flicker
+          if (layerRef.current) {
+            const groupNode = layerRef.current.findOne(`#${selectedObject.id}`);
+            if (groupNode) {
+              groupNode.x(minX);
+              groupNode.y(minY);
+              groupNode.width(groupWidth);
+              groupNode.height(groupHeight);
+              groupNode.rotation(0);
+            }
+          }
+
           // Update group object with new bounds (rotation should remain 0)
           updateObject(selectedObject.id, {
             x: minX,
@@ -362,6 +374,15 @@ const EditorCanvas = () => {
             height: groupHeight,
             rotation: 0,
           });
+
+          // Force transformer to update immediately
+          if (transformerRef.current && layerRef.current) {
+            const groupNode = layerRef.current.findOne(`#${selectedObject.id}`);
+            if (groupNode) {
+              transformerRef.current.nodes([groupNode]);
+              transformerRef.current.getLayer()?.batchDraw();
+            }
+          }
         } else if (selectedObject.type === "grid") {
           // Handle grid objects separately
           const scaleX = node.scaleX();
@@ -386,13 +407,91 @@ const EditorCanvas = () => {
           node.scaleX(1);
           node.scaleY(1);
 
-          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),
-          });
+          // Handle special shapes that use radius (Circle, Triangle, Abstract)
+          if (selectedObject.type === "rectangle") {
+            if (selectedObject.shapeType === "circle") {
+              // Circle: maintain aspect ratio and use average scale
+              const avgScale = (scaleX + scaleY) / 2;
+              const newRadius = Math.max(5, ((selectedObject.width || 50) / 2) * avgScale);
+              const newSize = newRadius * 2;
+              updateObject(selectedObject.id, {
+                x: node.x(),
+                y: node.y(),
+                rotation: node.rotation(),
+                width: newSize,
+                height: newSize,
+              });
+            } else if (selectedObject.shapeType === "triangle" || selectedObject.shapeType === "abstract") {
+              // Triangle and Abstract: maintain aspect ratio and use average scale
+              const avgScale = (scaleX + scaleY) / 2;
+              const baseRadius = Math.min((selectedObject.width || 100) / 2, (selectedObject.height || 100) / 2);
+              const newRadius = Math.max(5, baseRadius * avgScale);
+              const newSize = newRadius * 2;
+              updateObject(selectedObject.id, {
+                x: node.x() - newSize / 2,
+                y: node.y() - newSize / 2,
+                rotation: node.rotation(),
+                width: newSize,
+                height: newSize,
+              });
+            } else {
+              // Regular rectangle
+              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),
+              });
+            }
+          } else if (selectedObject.type === "line" || selectedObject.type === "arrow") {
+            // Line and Arrow: scale the end point
+            const startX = selectedObject.x || 0;
+            const startY = selectedObject.y || 0;
+            const endX = selectedObject.width || 0;
+            const endY = selectedObject.height || 0;
+            const dx = (endX - startX) * scaleX;
+            const dy = (endY - startY) * scaleY;
+            updateObject(selectedObject.id, {
+              x: node.x(),
+              y: node.y(),
+              rotation: node.rotation(),
+              width: node.x() + dx,
+              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;
+
+            if (selectedObject.type === "link") {
+              // For link, also update fontSize
+              updateObject(selectedObject.id, {
+                x: node.x(),
+                y: node.y(),
+                rotation: node.rotation(),
+                fontSize: selectedObject.fontSize ? Math.max(5, selectedObject.fontSize * scaleX) : undefined,
+              });
+            } else {
+              updateObject(selectedObject.id, {
+                x: node.x(),
+                y: node.y(),
+                rotation: node.rotation(),
+                width: Math.max(5, newWidth),
+                height: Math.max(5, newHeight),
+              });
+            }
+          } else {
+            // Default for other objects (image, etc.)
+            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),
+            });
+          }
         }
       });
     };