feat: Add AddOrRemoveEventsInProducts component for event management in products; refactor TriggerConnector and update PointsCreator to improve event handling and mesh identification

app/src/modules/simulation/events/points/creator/pointsCreator.tsx

@@ -66,6 +66,7 @@ function PointsCreator() {
                                     <group key={i} position={new THREE.Vector3(...event.position)}>
                                         {event.points.map((point, j) => (
                                             <mesh
+                                                name='Event-Sphere'
                                                 uuid={point.uuid}
                                                 ref={(el) => (sphereRefs.current[point.uuid] = el!)}
                                                 onClick={(e) => {
@@ -90,6 +91,7 @@ function PointsCreator() {
                                 return (
                                     <group key={i} position={new THREE.Vector3(...event.position)}>
                                         <mesh
+                                            name='Event-Sphere'
                                             uuid={event.point.uuid}
                                             ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
                                             onClick={(e) => {
@@ -112,6 +114,7 @@ function PointsCreator() {
                                 return (
                                     <group key={i} position={new THREE.Vector3(...event.position)}>
                                         <mesh
+                                            name='Event-Sphere'
                                             uuid={event.point.uuid}
                                             ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
                                             onClick={(e) => {
@@ -134,6 +137,7 @@ function PointsCreator() {
                                 return (
                                     <group key={i} position={new THREE.Vector3(...event.position)}>
                                         <mesh
+                                            name='Event-Sphere'
                                             uuid={event.point.uuid}
                                             ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
                                             onClick={(e) => {

app/src/modules/simulation/products/events/addOrRemoveEventsInProducts.tsx

@@ -0,0 +1,124 @@
+import { useThree } from '@react-three/fiber'
+import { useEffect } from 'react'
+import { Object3D } from 'three';
+import { useSubModuleStore } from '../../../../store/useModuleStore';
+import { useLeftData, useTopData } from '../../../../store/visualization/useZone3DWidgetStore';
+import { useEventsStore } from '../../../../store/simulation/useEventsStore';
+import { useProductStore } from '../../../../store/simulation/useProductStore';
+import { useSelectedProduct } from '../../../../store/simulation/useSimulationStore';
+import { useSelectedAsset } from '../../../../store/simulation/useSimulationStore';
+
+function AddOrRemoveEventsInProducts() {
+    const { gl, raycaster, scene } = useThree();
+    const { subModule } = useSubModuleStore();
+    const { setTop } = useTopData();
+    const { setLeft } = useLeftData();
+    const { getIsEventInProduct } = useProductStore();
+    const { getEventByModelUuid } = useEventsStore();
+    const { selectedProduct } = useSelectedProduct();
+    const { selectedAsset, setSelectedAsset, clearSelectedAsset } = useSelectedAsset();
+
+    useEffect(() => {
+
+        const canvasElement = gl.domElement;
+
+        let drag = false;
+        let isRightMouseDown = false;
+
+        const onMouseDown = (evt: MouseEvent) => {
+            if (selectedAsset) {
+                clearSelectedAsset();
+            }
+            if (evt.button === 2) {
+                isRightMouseDown = true;
+                drag = false;
+            }
+        };
+
+        const onMouseUp = (evt: MouseEvent) => {
+            if (evt.button === 2) {
+                isRightMouseDown = false;
+            }
+        }
+
+        const onMouseMove = () => {
+            if (isRightMouseDown) {
+                drag = true;
+            }
+        };
+
+        const handleRightClick = (evt: MouseEvent) => {
+            if (drag) return;
+            evt.preventDefault();
+            const canvasElement = gl.domElement;
+            if (!canvasElement) return;
+
+            let intersects = raycaster.intersectObjects(scene.children, true);
+            if (intersects.length > 0 && intersects[0]?.object?.parent?.parent?.position && intersects[0]?.object?.parent?.parent?.scale && intersects[0]?.object?.parent?.parent?.rotation) {
+                let currentObject = intersects[0].object;
+
+                while (currentObject) {
+                    if (currentObject.name === "Scene") {
+                        break;
+                    }
+                    currentObject = currentObject.parent as Object3D;
+                }
+                if (currentObject) {
+                    const isInProduct = getIsEventInProduct(selectedProduct.productId, currentObject.uuid);
+
+                    if (isInProduct) {
+                        const event = getEventByModelUuid(currentObject.uuid);
+                        if (event) {
+                            setSelectedAsset(event)
+                            const canvasRect = canvasElement.getBoundingClientRect();
+                            const relativeX = evt.clientX - canvasRect.left;
+                            const relativeY = evt.clientY - canvasRect.top;
+
+                            setTop(relativeY);
+                            setLeft(relativeX);
+                        } else {
+                            clearSelectedAsset()
+                        }
+                    } else {
+                        const event = getEventByModelUuid(currentObject.uuid);
+                        if (event) {
+                            setSelectedAsset(event)
+                            const canvasRect = canvasElement.getBoundingClientRect();
+                            const relativeX = evt.clientX - canvasRect.left;
+                            const relativeY = evt.clientY - canvasRect.top;
+
+                            setTop(relativeY);
+                            setLeft(relativeX);
+                        } else {
+                            clearSelectedAsset()
+                        }
+                    }
+
+                }
+            } else {
+                clearSelectedAsset()
+            }
+
+        };
+
+        if (subModule === 'simulations') {
+            canvasElement.addEventListener("mousedown", onMouseDown);
+            canvasElement.addEventListener("mouseup", onMouseUp);
+            canvasElement.addEventListener("mousemove", onMouseMove);
+            canvasElement.addEventListener('contextmenu', handleRightClick);
+        }
+
+        return () => {
+            canvasElement.removeEventListener("mousedown", onMouseDown);
+            canvasElement.removeEventListener("mouseup", onMouseUp);
+            canvasElement.removeEventListener("mousemove", onMouseMove);
+            canvasElement.removeEventListener('contextmenu', handleRightClick);
+        };
+
+    }, [gl, subModule, selectedProduct, selectedAsset]);
+    return (
+        <></>
+    )
+}
+
+export default AddOrRemoveEventsInProducts

app/src/modules/simulation/products/products.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect } from 'react'
-import { useProductStore } from '../../../store/simulation/useProductStore'
 import * as THREE from 'three';
+import { useEffect } from 'react';
+import { useProductStore } from '../../../store/simulation/useProductStore';
 import { useSelectedProduct } from '../../../store/simulation/useSimulationStore';
+import AddOrRemoveEventsInProducts from './events/addOrRemoveEventsInProducts';
 import { upsertProductOrEventApi } from '../../../services/simulation/UpsertProductOrEventApi';
 import { getAllProductsApi } from '../../../services/simulation/getallProductsApi';
 
@@ -32,6 +33,9 @@ function Products() {
 
     return (
         <>
+
+            <AddOrRemoveEventsInProducts />
+
         </>
     )
 }

app/src/modules/simulation/simulation.tsx

@@ -23,7 +23,7 @@ function Simulation() {
     }, [events])
 
     useEffect(() => {
-        console.log('products: ', products);
+        // console.log('products: ', products);
     }, [products])
 
     return (

app/src/modules/simulation/simulator/simulator.tsx

@@ -1,6 +1,13 @@
-import React from 'react'
+import { useEffect } from 'react'
+import { useProductStore } from '../../../store/simulation/useProductStore'
 
 function Simulator() {
+    const { products } = useProductStore();
+
+    useEffect(() => {
+        // console.log('products: ', products);
+    }, [products])
+
     return (
         <>
 

app/src/modules/simulation/triggers/connector/triggerConnector.tsx

@@ -1,22 +1,16 @@
-import { useThree } from '@react-three/fiber'
+import { useEffect } from "react";
-import React, { useEffect } from 'react'
+import { useThree } from "@react-three/fiber";
-import { Object3D } from 'three';
+import { useSubModuleStore } from "../../../../store/useModuleStore";
-import { useSubModuleStore } from '../../../../store/useModuleStore';
+import { useSelectedAsset } from "../../../../store/simulation/useSimulationStore";
-import { useLeftData, useTopData } from '../../../../store/visualization/useZone3DWidgetStore';
+import { useProductStore } from "../../../../store/simulation/useProductStore";
-import { useEventsStore } from '../../../../store/simulation/useEventsStore';
+import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
-import { useProductStore } from '../../../../store/simulation/useProductStore';
-import { useSelectedProduct } from '../../../../store/simulation/useSimulationStore';
-import { useSelectedAsset } from '../../../../store/simulation/useSimulationStore';
 
 function TriggerConnector() {
     const { gl, raycaster, scene } = useThree();
     const { subModule } = useSubModuleStore();
-    const { setTop } = useTopData();
+    const { getPointByUuid, getIsEventInProduct } = useProductStore();
-    const { setLeft } = useLeftData();
+    const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
-    const { getIsEventInProduct } = useProductStore();
-    const { getEventByModelUuid } = useEventsStore();
     const { selectedProduct } = useSelectedProduct();
-    const { selectedAsset, setSelectedAsset, clearSelectedAsset } = useSelectedAsset();
 
     useEffect(() => {
 
@@ -57,48 +51,31 @@ function TriggerConnector() {
             if (intersects.length > 0 && intersects[0]?.object?.parent?.parent?.position && intersects[0]?.object?.parent?.parent?.scale && intersects[0]?.object?.parent?.parent?.rotation) {
                 let currentObject = intersects[0].object;
 
-                while (currentObject) {
+                if (currentObject && currentObject.name === 'Event-Sphere') {
-                    if (currentObject.name === "Scene") {
+
-                        break;
+                    const isInProduct = getIsEventInProduct(
-                    }
+                        selectedProduct.productId,
-                    currentObject = currentObject.parent as Object3D;
+                        currentObject.userData.modelUuid
-                }
+                    );
-                if (currentObject) {
+
-                    const isInProduct = getIsEventInProduct(selectedProduct.productId, currentObject.uuid);
+                    // You left Here
 
                     if (isInProduct) {
-                        const event = getEventByModelUuid(currentObject.uuid);
-                        if (event) {
-                            setSelectedAsset(event)
-                            const canvasRect = canvasElement.getBoundingClientRect();
-                            const relativeX = evt.clientX - canvasRect.left;
-                            const relativeY = evt.clientY - canvasRect.top;
 
-                            setTop(relativeY);
+                        const event = getPointByUuid(
-                            setLeft(relativeX);
+                            selectedProduct.productId,
+                            currentObject.userData.modelUuid,
+                            currentObject.userData.pointUuid
+                        );
+                        console.log('event: ', event);
                     } else {
-                            clearSelectedAsset()
-                        }
-                    } else {
-                        const event = getEventByModelUuid(currentObject.uuid);
-                        if (event) {
-                            setSelectedAsset(event)
-                            const canvasRect = canvasElement.getBoundingClientRect();
-                            const relativeX = evt.clientX - canvasRect.left;
-                            const relativeY = evt.clientY - canvasRect.top;
 
-                            setTop(relativeY);
-                            setLeft(relativeX);
-                        } else {
-                            clearSelectedAsset()
                     }
                 }
 
-                }
             } else {
-                clearSelectedAsset()
-            }
 
+            }
         };
 
         if (subModule === 'simulations') {
@@ -115,7 +92,7 @@ function TriggerConnector() {
             canvasElement.removeEventListener('contextmenu', handleRightClick);
         };
 
-    }, [gl, subModule, selectedProduct, selectedAsset]);
+    }, [gl, subModule]);
 
     return (
         <>