Fixed hide transformer in a better way

Lemoncode · Aug 6, 2024 · cfaaae5 · cfaaae5
1 parent fbcbf22
commit cfaaae5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/src/core/providers/canvas/use-selection.hook.ts b/src/core/providers/canvas/use-selection.hook.ts
@@ -16,15 +16,23 @@ export const useSelection = (
     null
   );
 
-  // Remove unused shapes
+  // Remove unused shapes and reset selectedShapeId if it no longer exists
   useEffect(() => {
     const currentIds = shapes.map(shape => shape.id);
+
     Object.keys(shapeRefs.current).forEach(id => {
       if (!currentIds.includes(id)) {
         delete shapeRefs.current[id];
       }
     });
-  }, [shapes]);
+
+    if (!currentIds.includes(selectedShapeId)) {
+      transformerRef.current?.nodes([]);
+      selectedShapeRef.current = null;
+      setSelectedShapeId('');
+      setSelectedShapeType(null);
+    }
+  }, [shapes, selectedShapeId]);
 
   const handleSelected = (id: string, type: ShapeType) => {
     selectedShapeRef.current = shapeRefs.current[id].current;
@@ -42,6 +50,7 @@ export const useSelection = (
       transformerRef.current?.nodes([]);
       selectedShapeRef.current = null;
       setSelectedShapeId('');
+      setSelectedShapeType(null);
     }
   };
 

diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx
@@ -106,11 +106,6 @@ export const CanvasPod = () => {
     };
   }, [selectedShapeId]);
 
-  useEffect(() => {
-    transformerRef.current?.nodes([]);
-    selectedShapeRef.current = null;
-  }, [shapes]);
-
   {
     /* TODO: add other animation for isDraggerOver */
   }