Refactor EventProperties component to utilize new state management for selected event data and asset selection; implement action handling based on asset type and improve action rendering logic.

Enhance Simulations component to support adding and removing events from products; integrate new asset selection store for better state management.

Fix import paths in Design component and related files to ensure correct module resolution.

Update Tools component to correct import paths for template saving functionality.

Refactor EditWidgetOption component to simplify option handling and remove unnecessary state management.

Add new mechanics components for various asset types (Conveyor, Machine, Robotic Arm, Storage, Vehicle) as placeholders for future implementation.

Implement Trigger and TriggerConnector components to manage right-click interactions and asset selection in the simulation environment.

Enhance product store with new helper functions for event and action retrieval based on UUIDs.

Introduce new selected event data and asset state management in the simulation store for improved event handling.

Update simulation types to include new action types and improve type definitions for better type safety.

Remove obsolete temp markdown file from triggers directory.

app/src/modules/builder/builder.tsx

@@ -51,7 +51,7 @@ import Ground from "../scene/environment/ground";
 // import ZoneGroup from "../groups/zoneGroup1";
 import { findEnvironment } from "../../services/factoryBuilder/environment/findEnvironment";
 import Layer2DVisibility from "./geomentries/layers/layer2DVisibility";
-import DrieHtmlTemp from "..//visualization/mqttTemp/drieHtmlTemp";
+import DrieHtmlTemp from "../visualization/mqttTemp/drieHtmlTemp";
 import ZoneGroup from "./groups/zoneGroup";
 import useModuleStore from "../../store/useModuleStore";
 import MeasurementTool from "../scene/tools/measurementTool";

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

@@ -4,15 +4,32 @@ import { useEventsStore } from '../../../../../store/simulation/useEventsStore';
 import useModuleStore from '../../../../../store/useModuleStore';
 import { TransformControls } from '@react-three/drei';
 import { detectModifierKeys } from '../../../../../utils/shortcutkeys/detectModifierKeys';
-import { useSelectedEventSphere } from '../../../../../store/simulation/useSimulationStore';
+import { useSelectedEventSphere, useSelectedEventData } from '../../../../../store/simulation/useSimulationStore';
 
 function PointsCreator() {
-    const { events, updatePoint, getPointByUuid } = useEventsStore();
+    const { events, updatePoint, getPointByUuid, getEventByModelUuid } = useEventsStore();
     const { activeModule } = useModuleStore();
     const transformRef = useRef<any>(null);
     const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
     const sphereRefs = useRef<{ [key: string]: THREE.Mesh }>({});
     const { selectedEventSphere, setSelectedEventSphere, clearSelectedEventSphere } = useSelectedEventSphere();
+    const { setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
+
+    useEffect(() => {
+        if (selectedEventSphere) {
+            const eventData = getEventByModelUuid(selectedEventSphere.userData.modelUuid);
+            if (eventData) {
+                setSelectedEventData(
+                    eventData,
+                    selectedEventSphere.userData.pointUuid
+                );
+            } else {
+                clearSelectedEventData();
+            }
+        } else {
+            clearSelectedEventData();
+        }
+    }, [selectedEventSphere]);
 
     useEffect(() => {
         const handleKeyDown = (e: KeyboardEvent) => {

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

@@ -1,13 +1,18 @@
 import React, { useEffect } from 'react'
 import { useProductStore } from '../../../store/simulation/useProductStore'
 import * as THREE from 'three';
+import { useSelectedProduct } from '../../../store/simulation/useSimulationStore';
 
 function Products() {
     const { products, addProduct } = useProductStore();
+    const { setSelectedProduct } = useSelectedProduct();
 
     useEffect(() => {
         if (products.length === 0) {
-            addProduct('Product 1', THREE.MathUtils.generateUUID());
+            const id = THREE.MathUtils.generateUUID();
+            const name = 'Product 1';
+            addProduct(name, id);
+            setSelectedProduct(id, name);
         }
     }, [products])
 

app/src/modules/simulation/simulation.tsx

@@ -10,39 +10,52 @@ import Machine from './machine/machine';
 import StorageUnit from './storageUnit/storageUnit';
 import Simulator from './simulator/simulator';
 import Products from './products/products';
+import Trigger from './triggers/trigger';
+import useModuleStore from '../../store/useModuleStore';
 
 function Simulation() {
+    const { activeModule } = useModuleStore();
     const { events } = useEventsStore();
     const { products } = useProductStore();
 
     useEffect(() => {
-        console.log('events: ', events);
+        // console.log('events: ', events);
     }, [events])
 
     useEffect(() => {
-        // console.log('products: ', products);
+        console.log('products: ', products);
     }, [products])
 
     return (
         <>
 
-            <Points />
+            {activeModule === 'simulation' &&
 
-            <Products />
+                <>
 
-            <Materials />
+                    <Points />
 
-            <Conveyor />
+                    <Products />
 
-            <Vehicles />
+                    <Materials />
 
-            <RoboticArm />
+                    <Trigger />
 
-            <Machine />
+                    <Conveyor />
 
-            <StorageUnit />
+                    <Vehicles />
 
-            <Simulator />
+                    <RoboticArm />
+
+                    <Machine />
+
+                    <StorageUnit />
+
+                    <Simulator />
+
+                </>
+
+            }
 
         </>
     )

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

@@ -0,0 +1,126 @@
+import { useThree } from '@react-three/fiber'
+import React, { 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 TriggerConnector() {
+    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 TriggerConnector

app/src/modules/simulation/triggers/trigger.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import TriggerConnector from './connector/triggerConnector'
+
+function Trigger() {
+    return (
+        <>
+
+            <TriggerConnector />
+
+        </>
+    )
+}
+
+export default Trigger

app/src/modules/visualization/RealTimeVisulization.tsx

@@ -125,7 +125,7 @@ const RealTimeVisulization: React.FC = () => {
           {}
         );
         setZonesData(formattedData);
-      } catch (error) {}
+      } catch (error) { }
     }
 
     GetZoneData();
@@ -362,6 +362,10 @@ const RealTimeVisulization: React.FC = () => {
                   "RotateY",
                   "Delete",
                 ]}
+                onClick={(e) => {
+                  setRightSelect(e);
+                  setEditWidgetOptions(false);
+                }}
               />
             )}