update assetID

app/src/modules/builder/asset/models/model/model.tsx

@@ -1,10 +1,10 @@
 import * as THREE from 'three';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { retrieveGLTF, storeGLTF } from '../../../../../utils/indexDB/idbUtils';
 import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
 import { ThreeEvent, useFrame, useThree } from '@react-three/fiber';
-import { useActiveTool, useDeletableFloorItem, useRenderDistance, useSelectedFloorItem, useSocketStore, useToggleView } from '../../../../../store/builder/store';
+import { useActiveTool, useDeletableFloorItem, useRenderDistance, useSelectedFloorItem, useSocketStore, useToggleView, useToolMode } from '../../../../../store/builder/store';
 import { AssetBoundingBox } from '../../functions/assetBoundingBox';
 import { CameraControls } from '@react-three/drei';
 import { useAssetsStore } from '../../../../../store/builder/useAssetStore';
@@ -39,8 +39,13 @@ function Model({ asset }: { readonly asset: Asset }) {
     const [gltfScene, setGltfScene] = useState<GLTF["scene"] | null>(null);
     const [boundingBox, setBoundingBox] = useState<THREE.Box3 | null>(null);
     const groupRef = useRef<THREE.Group>(null);
+    const { toolMode } = useToolMode();
     const { projectId } = useParams();
 
+    useEffect(() => {
+        setDeletableFloorItem(null);
+    }, [activeModule, toolMode])
+
     useEffect(() => {
         const loader = new GLTFLoader();
         const dracoLoader = new DRACOLoader();
@@ -191,21 +196,21 @@ function Model({ asset }: { readonly asset: Asset }) {
         }
     }
 
-    const handlePointerOver = (asset: Asset) => {
-        if (activeTool === "delete") {
+    const handlePointerOver = useCallback((asset: Asset) => {
+        if (activeTool === "delete" && activeModule === 'builder') {
             if (deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) {
                 return;
             } else {
                 setDeletableFloorItem(groupRef.current);
             }
         }
-    }
+    }, [activeTool, activeModule, deletableFloorItem]);
 
-    const handlePointerOut = (asset: Asset) => {
+    const handlePointerOut = useCallback((asset: Asset) => {
         if (activeTool === "delete" && deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) {
             setDeletableFloorItem(null);
         }
-    }
+    }, [activeTool, deletableFloorItem]);
 
     const handleContextMenu = (asset: Asset, evt: ThreeEvent<MouseEvent>) => {
         if (activeTool === "cursor" && subModule === 'simulations') {
@@ -247,6 +252,7 @@ function Model({ asset }: { readonly asset: Asset }) {
 
     return (
         <group
+            key={asset.modelUuid}
             name='Asset Model'
             ref={groupRef}
             uuid={asset.modelUuid}
@@ -266,7 +272,7 @@ function Model({ asset }: { readonly asset: Asset }) {
                     handleClick(asset);
                 }
             }}
-            onPointerOver={(e) => {
+            onPointerEnter={(e) => {
                 if (!toggleView) {
                     e.stopPropagation();
                     handlePointerOver(asset);