zonr bug fix

app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts

@@ -3,7 +3,7 @@ import { CameraControls } from '@react-three/drei';
 import { ThreeEvent, useThree } from '@react-three/fiber';
 import { useCallback, useEffect, useRef } from 'react';
 
-import { useActiveTool, useDeletableFloorItem, useSelectedFloorItem, useToggleView } from '../../../../../../store/builder/store';
+import { useActiveTool, useDeletableFloorItem, useSelectedFloorItem, useToggleView, useZoneAssetId } from '../../../../../../store/builder/store';
 import useModuleStore, { useSubModuleStore } from '../../../../../../store/useModuleStore';
 import { useSocketStore } from '../../../../../../store/builder/store';
 import { useSceneContext } from '../../../../../scene/sceneContext';
@@ -20,9 +20,11 @@ import { upsertProductOrEventApi } from '../../../../../../services/simulation/p
 export function useModelEventHandlers({
     boundingBox,
     groupRef,
+    asset
 }: {
     boundingBox: THREE.Box3 | null,
     groupRef: React.RefObject<THREE.Group>,
+    asset: Asset
 }) {
     const { controls, gl, camera } = useThree();
     const { activeTool } = useActiveTool();
@@ -32,12 +34,13 @@ export function useModelEventHandlers({
     const { socket } = useSocketStore();
     const { eventStore, productStore, assetStore, undoRedo3DStore } = useSceneContext();
     const { push3D } = undoRedo3DStore();
-    const { removeAsset } = assetStore();
+    const { getAssetById, removeAsset } = assetStore();
+    const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
     const { removeEvent, getEventByModelUuid } = eventStore();
     const { getIsEventInProduct, addPoint, deleteEvent } = productStore();
     const { setSelectedAsset, clearSelectedAsset } = useSelectedAsset();
     const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
-    const { setSelectedFloorItem } = useSelectedFloorItem();
+    const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
     const { selectedVersionStore } = useVersionContext();
@@ -66,6 +69,19 @@ export function useModelEventHandlers({
         });
     };
 
+    useEffect(() => {
+        if (!zoneAssetId) return
+        if (zoneAssetId.id === asset.modelUuid) {
+            handleDblClick(asset);
+        }
+    }, [zoneAssetId])
+
+    useEffect(() => {
+        if (!selectedFloorItem) {
+            setZoneAssetId(null);
+        }
+    }, [selectedFloorItem])
+
     const handleDblClick = (asset: Asset) => {
         if (asset && activeTool === "cursor" && boundingBox && groupRef.current && activeModule === 'builder') {
 

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

@@ -158,7 +158,7 @@ function Model({ asset, isRendered, loader }: { readonly asset: Asset, isRendere
         });
     }, []);
 
-    const { handleDblClick, handleClick, handlePointerOver, handlePointerOut, handleContextMenu } = useModelEventHandlers({ boundingBox, groupRef });
+    const { handleDblClick, handleClick, handlePointerOver, handlePointerOut, handleContextMenu } = useModelEventHandlers({ boundingBox, groupRef, asset });
 
     return (
         <group

app/src/modules/visualization/visualization.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import Dropped3dWidgets from './widgets/3d/Dropped3dWidget'
 import ZoneCentreTarget from './zone/zoneCameraTarget'
-import ZoneAssets from './zone/zoneAssets'
 import MqttEvents from '../../services/factoryBuilder/mqtt/mqttEvents'
 
 const Visualization:React.FC = () => {
@@ -12,8 +11,6 @@ const Visualization:React.FC = () => {
 
             <ZoneCentreTarget />
 
-            <ZoneAssets />
-
             <MqttEvents />
 
             {/* <DrieHtmlTemp /> */}

app/src/modules/visualization/zone/zoneAssets.tsx

@@ -1,78 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { useSelectedFloorItem, useZoneAssetId } from '../../../store/builder/store';
-import * as THREE from "three";
-import { useThree } from '@react-three/fiber';
-import * as Types from "../../../types/world/worldTypes";
-export default function ZoneAssets() {
-    const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
-    const { setSelectedFloorItem } = useSelectedFloorItem();
-    const { raycaster, controls, scene }: any = useThree();
-
-    useEffect(() => {
-        // console.log('zoneAssetId: ', zoneAssetId);
-        if (!zoneAssetId) return
-        let AssetMesh = scene.getObjectByProperty("uuid", zoneAssetId.id);
-        if (AssetMesh) {
-            const bbox = new THREE.Box3().setFromObject(AssetMesh);
-            const size = bbox.getSize(new THREE.Vector3());
-            const center = bbox.getCenter(new THREE.Vector3());
-
-            const front = new THREE.Vector3(0, 0, 1);
-            AssetMesh.localToWorld(front);
-            front.sub(AssetMesh.position).normalize();
-
-            const distance = Math.max(size.x, size.y, size.z) * 2;
-            const newPosition = center.clone().addScaledVector(front, distance);
-
-            controls.setPosition(newPosition.x, newPosition.y, newPosition.z, true);
-            controls.setTarget(center.x, center.y, center.z, true);
-            controls.fitToBox(AssetMesh, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });
-
-            setSelectedFloorItem(AssetMesh);
-        } else {
-            if (Array.isArray(zoneAssetId.position) && zoneAssetId.position.length >= 3) {
-                let selectedAssetPosition = [
-                    zoneAssetId.position[0],
-                    10,
-                    zoneAssetId.position[2]
-                ];
-                let selectedAssetTarget = [
-                    zoneAssetId.position[0],
-                    zoneAssetId.position[1],
-                    zoneAssetId.position[2]
-                ];
-                const setCam = async () => {
-                    await controls?.setLookAt(...selectedAssetPosition, ...selectedAssetTarget, true);
-                    setTimeout(() => {
-                        let AssetMesh = scene.getObjectByProperty("uuid", zoneAssetId.id);
-                        if (AssetMesh) {
-                            const bbox = new THREE.Box3().setFromObject(AssetMesh);
-                            const size = bbox.getSize(new THREE.Vector3());
-                            const center = bbox.getCenter(new THREE.Vector3());
-
-                            const front = new THREE.Vector3(0, 0, 1);
-                            AssetMesh.localToWorld(front);
-                            front.sub(AssetMesh.position).normalize();
-
-                            const distance = Math.max(size.x, size.y, size.z) * 2;
-                            const newPosition = center.clone().addScaledVector(front, distance);
-
-                            controls.setPosition(newPosition.x, newPosition.y, newPosition.z, true);
-                            controls.setTarget(center.x, center.y, center.z, true);
-                            controls.fitToBox(AssetMesh, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });
-
-                            setSelectedFloorItem(AssetMesh);
-                        }
-                    }, 500)
-
-                };
-                setCam();
-            }
-        }
-    }, [zoneAssetId, scene, controls])
-
-    return (
-        <>
-        </>
-    )
-}

app/src/modules/visualization/zone/zoneCameraTarget.tsx

@@ -3,101 +3,98 @@ import { useFrame, useThree } from "@react-three/fiber";
 import * as THREE from "three";
 import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
 import {
-  useEditPosition,
-  usezonePosition,
-  usezoneTarget,
+    useEditPosition,
+    usezonePosition,
+    usezoneTarget,
 } from "../../../store/builder/store";
 
 export default function ZoneCentreTarget() {
-  const { selectedZone } = useSelectedZoneStore();
-  // 
-  const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(
-    null
-  );
-  const sphereRef = useRef<THREE.Mesh>(null);
-  const { controls }: any = useThree();
-  const { setZonePosition } = usezonePosition();
-  const { setZoneTarget } = usezoneTarget();
-  const { Edit } = useEditPosition();
+    const { selectedZone } = useSelectedZoneStore();
+    const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(null);
+    const sphereRef = useRef<THREE.Mesh>(null);
+    const { controls }: any = useThree();
+    const { setZonePosition } = usezonePosition();
+    const { setZoneTarget } = usezoneTarget();
+    const { Edit } = useEditPosition();
 
-  const TRANSITION_SPEED = 2000;
+    const TRANSITION_SPEED = 2000;
 
-  useEffect(() => {
-    if (
-      selectedZone.zoneViewPortTarget &&
-      JSON.stringify(previousZoneCentre) !==
-        JSON.stringify(selectedZone.zoneViewPortTarget)
-    ) {
-      setPreviousZoneCentre(selectedZone.zoneViewPortTarget);
-    }
-  }, [selectedZone.zoneViewPortTarget, previousZoneCentre]);
-
-  const centrePoint = useMemo(() => {
-    if (!previousZoneCentre || !selectedZone.zoneViewPortTarget) return null;
-    return previousZoneCentre.map(
-      (value, index) => (value + selectedZone.zoneViewPortTarget[index]) / 2
-    );
-  }, [previousZoneCentre, selectedZone.zoneViewPortTarget]);
-
-  useEffect(() => {
-    if (selectedZone.zoneName !== "") {
-      if (sphereRef.current) {
-        sphereRef.current.position.set(
-          selectedZone.zoneViewPortTarget[0],
-          selectedZone.zoneViewPortTarget[1],
-          selectedZone.zoneViewPortTarget[2]
-        );
-      }
-      if (centrePoint) {
-        if (centrePoint.length > 0) {
-          const setCam = async () => {
-            controls.setLookAt(
-              centrePoint[0],
-              26,
-              centrePoint[2],
-              ...centrePoint,
-              true,
-              TRANSITION_SPEED
-            );
-            setTimeout(() => {
-              controls?.setLookAt(
-                ...selectedZone.zoneViewPortPosition,
-                ...selectedZone.zoneViewPortTarget,
-                true,
-                TRANSITION_SPEED
-              );
-            }, 100);
-          };
-          setCam();
-        } else {
-          const setCam = async () => {
-            controls?.setLookAt(
-              ...selectedZone.zoneViewPortPosition,
-              ...selectedZone.zoneViewPortTarget,
-              true,
-              TRANSITION_SPEED
-            );
-          };
-          setCam();
+    useEffect(() => {
+        if (
+            selectedZone.zoneViewPortTarget &&
+            JSON.stringify(previousZoneCentre) !==
+            JSON.stringify(selectedZone.zoneViewPortTarget)
+        ) {
+            setPreviousZoneCentre(selectedZone.zoneViewPortTarget);
         }
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedZone.zoneViewPortTarget]);
+    }, [selectedZone.zoneViewPortTarget, previousZoneCentre]);
 
-  useFrame(() => {
-    if (Edit) {
-      setZonePosition([
-        controls.getPosition().x,
-        controls.getPosition().y,
-        controls.getPosition().z,
-      ]);
-      setZoneTarget([
-        controls.getTarget().x,
-        controls.getTarget().y,
-        controls.getTarget().z,
-      ]);
-    }
-  });
-  return <></>;
+    const centrePoint = useMemo(() => {
+        if (!previousZoneCentre || !selectedZone.zoneViewPortTarget) return null;
+        return previousZoneCentre.map(
+            (value, index) => (value + selectedZone.zoneViewPortTarget[index]) / 2
+        );
+    }, [previousZoneCentre, selectedZone.zoneViewPortTarget]);
+
+    useEffect(() => {
+        if (selectedZone.zoneName !== "") {
+            if (sphereRef.current) {
+                sphereRef.current.position.set(
+                    selectedZone.zoneViewPortTarget[0],
+                    selectedZone.zoneViewPortTarget[1],
+                    selectedZone.zoneViewPortTarget[2]
+                );
+            }
+            if (centrePoint) {
+                if (centrePoint.length > 0) {
+                    const setCam = async () => {
+                        controls.setLookAt(
+                            centrePoint[0],
+                            26,
+                            centrePoint[2],
+                            ...centrePoint,
+                            true,
+                            TRANSITION_SPEED
+                        );
+                        setTimeout(() => {
+                            controls?.setLookAt(
+                                ...selectedZone.zoneViewPortPosition,
+                                ...selectedZone.zoneViewPortTarget,
+                                true,
+                                TRANSITION_SPEED
+                            );
+                        }, 100);
+                    };
+                    setCam();
+                } else {
+                    const setCam = async () => {
+                        controls?.setLookAt(
+                            ...selectedZone.zoneViewPortPosition,
+                            ...selectedZone.zoneViewPortTarget,
+                            true,
+                            TRANSITION_SPEED
+                        );
+                    };
+                    setCam();
+                }
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedZone.zoneViewPortTarget]);
+
+    useFrame(() => {
+        if (Edit) {
+            setZonePosition([
+                controls.getPosition().x,
+                controls.getPosition().y,
+                controls.getPosition().z,
+            ]);
+            setZoneTarget([
+                controls.getTarget().x,
+                controls.getTarget().y,
+                controls.getTarget().z,
+            ]);
+        }
+    });
+    return <></>;
 }