Enhance event handling and backend updates across mechanics components; refactor trigger management in TriggerConnector

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx

@@ -6,6 +6,7 @@ import { useSelectedEventData, useSelectedProduct } from "../../../../../../stor
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import ProcessAction from "../actions/ProcessAction";
 import ActionsList from "../components/ActionsList";
+import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
 
 function MachineMechanics() {
     const [activeOption, setActiveOption] = useState<"default" | "process">("default");
@@ -14,6 +15,9 @@ function MachineMechanics() {
     const { getPointByUuid, updateAction } = useProductStore();
     const { selectedProduct } = useSelectedProduct();
 
+    const email = localStorage.getItem('email')
+    const organization = (email!.split("@")[1]).split(".")[0];
+
     useEffect(() => {
         if (selectedEventData) {
             const point = getPointByUuid(
@@ -28,31 +32,54 @@ function MachineMechanics() {
         }
     }, [selectedProduct, selectedEventData, getPointByUuid]);
 
+    const updateBackend = (
+        productName: string,
+        productId: string,
+        organization: string,
+        eventData: EventsSchema
+    ) => {
+        upsertProductOrEventApi({
+            productName: productName,
+            productId: productId,
+            organization: organization,
+            eventDatas: eventData
+        })
+    }
+
     const handleActionTypeChange = (option: string) => {
         if (!selectedEventData || !selectedPointData) return;
         const validOption = option as "process";
         setActiveOption(validOption);
 
-        updateAction(selectedPointData.action.actionUuid, {
+        const event = updateAction(selectedPointData.action.actionUuid, {
             actionType: validOption,
         });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
     };
 
     const handleRenameAction = (newName: string) => {
         if (!selectedPointData) return;
-        updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+        const event = updateAction(selectedPointData.action.actionUuid, { actionName: newName });
     };
 
     const handleProcessTimeChange = (value: string) => {
         if (!selectedPointData) return;
-        updateAction(selectedPointData.action.actionUuid, {
+        const event = updateAction(selectedPointData.action.actionUuid, {
             processTime: parseFloat(value),
         });
     };
 
     const handleMaterialSelect = (material: string) => {
         if (!selectedPointData) return;
-        updateAction(selectedPointData.action.actionUuid, {
+        const event = updateAction(selectedPointData.action.actionUuid, {
             swapMaterial: material,
         });
     };

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx

@@ -6,6 +6,7 @@ import { useSelectedEventData, useSelectedProduct } from "../../../../../../stor
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import StorageAction from "../actions/StorageAction";
 import ActionsList from "../components/ActionsList";
+import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
 
 function StorageMechanics() {
     const [activeOption, setActiveOption] = useState<"default" | "store" | "spawn">("default");
@@ -14,6 +15,9 @@ function StorageMechanics() {
     const { getPointByUuid, updateAction } = useProductStore();
     const { selectedProduct } = useSelectedProduct();
 
+    const email = localStorage.getItem('email')
+    const organization = (email!.split("@")[1]).split(".")[0];
+
     useEffect(() => {
         if (selectedEventData) {
             const point = getPointByUuid(
@@ -28,26 +32,67 @@ function StorageMechanics() {
         }
     }, [selectedProduct, selectedEventData, getPointByUuid]);
 
+    const updateBackend = (
+        productName: string,
+        productId: string,
+        organization: string,
+        eventData: EventsSchema
+    ) => {
+        upsertProductOrEventApi({
+            productName: productName,
+            productId: productId,
+            organization: organization,
+            eventDatas: eventData
+        })
+    }
+
     const handleActionTypeChange = (option: string) => {
         if (!selectedEventData || !selectedPointData) return;
         const validOption = option as "store" | "spawn";
         setActiveOption(validOption);
 
-        updateAction(selectedPointData.action.actionUuid, {
+        const event = updateAction(selectedPointData.action.actionUuid, {
             actionType: validOption,
         });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
     };
 
     const handleRenameAction = (newName: string) => {
         if (!selectedPointData) return;
-        updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+        const event = updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
     };
 
     const handleCapacityChange = (value: string) => {
         if (!selectedPointData) return;
-        updateAction(selectedPointData.action.actionUuid, {
+        const event = updateAction(selectedPointData.action.actionUuid, {
             storageCapacity: parseInt(value),
         });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
     };
 
     // Get current values from store

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx

@@ -10,6 +10,7 @@ import {
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import TravelAction from "../actions/TravelAction";
 import ActionsList from "../components/ActionsList";
+import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
 
 function VehicleMechanics() {
     const [activeOption, setActiveOption] = useState<"default" | "travel">("default");
@@ -18,6 +19,9 @@ function VehicleMechanics() {
     const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
     const { selectedProduct } = useSelectedProduct();
 
+    const email = localStorage.getItem('email')
+    const organization = (email!.split("@")[1]).split(".")[0];
+
     useEffect(() => {
         if (selectedEventData) {
             const point = getPointByUuid(
@@ -33,11 +37,34 @@ function VehicleMechanics() {
         }
     }, [selectedProduct, selectedEventData, getPointByUuid]);
 
+    const updateBackend = (
+        productName: string,
+        productId: string,
+        organization: string,
+        eventData: EventsSchema
+    ) => {
+        upsertProductOrEventApi({
+            productName: productName,
+            productId: productId,
+            organization: organization,
+            eventDatas: eventData
+        })
+    }
+
     const handleSpeedChange = (value: string) => {
         if (!selectedEventData) return;
-        updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
+        const event = updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
             speed: parseFloat(value),
         });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
     };
 
     const handleActionTypeChange = (option: string) => {
@@ -45,28 +72,64 @@ function VehicleMechanics() {
         const validOption = option as "travel";
         setActiveOption(validOption);
 
-        updateAction(selectedPointData.action.actionUuid, {
+        const event = updateAction(selectedPointData.action.actionUuid, {
             actionType: validOption,
         });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
     };
 
     const handleRenameAction = (newName: string) => {
         if (!selectedPointData) return;
-        updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+        const event = updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
     };
 
     const handleLoadCapacityChange = (value: string) => {
         if (!selectedPointData) return;
-        updateAction(selectedPointData.action.actionUuid, {
+        const event = updateAction(selectedPointData.action.actionUuid, {
             loadCapacity: parseFloat(value),
         });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
     };
 
     const handleUnloadDurationChange = (value: string) => {
         if (!selectedPointData) return;
-        updateAction(selectedPointData.action.actionUuid, {
+        const event = updateAction(selectedPointData.action.actionUuid, {
             unLoadDuration: parseFloat(value),
         });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
     };
 
     const handlePickPointChange = (value: string) => {

app/src/modules/builder/geomentries/assets/addAssetModel.ts

@@ -186,22 +186,59 @@ async function handleModelLoad(
                 state: "idle",
                 type: 'transfer',
                 speed: 1,
-                points: data.points.map((point: THREE.Vector3, index: number) => ({
+                points: data.points.map((point: THREE.Vector3, index: number) => {
-                    uuid: THREE.MathUtils.generateUUID(),
+                    const triggers: TriggerSchema[] = [];
-                    position: [point.x, point.y, point.z],
+
-                    rotation: [0, 0, 0],
+                    if (data.points && index < data.points.length - 1) {
-                    action: {
+                        triggers.push({
-                        actionUuid: THREE.MathUtils.generateUUID(),
+                            triggerUuid: THREE.MathUtils.generateUUID(),
-                        actionName: `Action ${index}`,
+                            triggerName: `Trigger 1`,
-                        actionType: 'default',
+                            triggerType: "onComplete",
-                        material: 'Default Material',
+                            delay: 0,
-                        delay: 0,
+                            triggeredAsset: {
-                        spawnInterval: 5,
+                                triggeredModel: {
-                        spawnCount: 1,
+                                    modelName: newFloorItem.modelName,
-                        triggers: []
+                                    modelUuid: newFloorItem.modelUuid
+                                },
+                                triggeredPoint: {
+                                    pointName: `Point`,
+                                    pointUuid: ""
+                                },
+                                triggeredAction: {
+                                    actionName: `Action 1`,
+                                    actionUuid: ""
+                                }
+                            }
+                        });
                     }
-                }))
+
+                    return {
+                        uuid: THREE.MathUtils.generateUUID(),
+                        position: [point.x, point.y, point.z],
+                        rotation: [0, 0, 0],
+                        action: {
+                            actionUuid: THREE.MathUtils.generateUUID(),
+                            actionName: `Action 1`,
+                            actionType: 'default',
+                            material: 'Default Material',
+                            delay: 0,
+                            spawnInterval: 5,
+                            spawnCount: 1,
+                            triggers: triggers
+                        }
+                    };
+                })
             };
+
+            for (let i = 0; i < ConveyorEvent.points.length - 1; i++) {
+                const currentPoint = ConveyorEvent.points[i];
+                const nextPoint = ConveyorEvent.points[i + 1];
+
+                if (currentPoint.action.triggers.length > 0) {
+                    currentPoint.action.triggers[0].triggeredAsset!.triggeredPoint.pointUuid = nextPoint.uuid;
+                    currentPoint.action.triggers[0].triggeredAsset!.triggeredAction!.actionUuid = nextPoint.action.actionUuid;
+                }
+            }
             addEvent(ConveyorEvent);
             eventData.points = ConveyorEvent.points.map(point => ({
                 uuid: point.uuid,
@@ -228,7 +265,7 @@ async function handleModelLoad(
                         actionType: "travel",
                         unLoadDuration: 5,
                         loadCapacity: 10,
-                        steeringAngle:0,
+                        steeringAngle: 0,
                         pickUpPoint: null,
                         unLoadPoint: null,
                         triggers: []

app/src/modules/scene/controls/selectionControls/moveControls.tsx

@@ -9,6 +9,7 @@ import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifie
 import { useEventsStore } from "../../../../store/simulation/useEventsStore";
 import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
+import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
 
 function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) {
     const { camera, controls, gl, scene, pointer, raycaster } = useThree();
@@ -16,10 +17,28 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
 
     const { toggleView } = useToggleView();
     const { selectedAssets, setSelectedAssets } = useSelectedAssets();
+    const { selectedProduct } = useSelectedProduct();
     const { floorItems, setFloorItems } = useFloorItems();
     const { socket } = useSocketStore();
     const itemsData = useRef<Types.FloorItems>([]);
 
+    const email = localStorage.getItem('email')
+    const organization = (email!.split("@")[1]).split(".")[0];
+
+    const updateBackend = (
+        productName: string,
+        productId: string,
+        organization: string,
+        eventData: EventsSchema
+    ) => {
+        upsertProductOrEventApi({
+            productName: productName,
+            productId: productId,
+            organization: organization,
+            eventDatas: eventData
+        })
+    }
+
     useEffect(() => {
         if (!camera || !scene || toggleView || !itemsGroupRef.current) return;
 
@@ -190,10 +209,19 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
                         })
                     }
                     if (productData) {
-                        useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
+                        const event = useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
                             position: [worldPosition.x, worldPosition.y, worldPosition.z],
                             rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
                         })
+
+                        if (event) {
+                            updateBackend(
+                                selectedProduct.productName,
+                                selectedProduct.productId,
+                                organization,
+                                event
+                            );
+                        }
                     }
                 }
 
@@ -203,9 +231,6 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
                     return updatedItems;
                 });
 
-                const email = localStorage.getItem("email");
-                const organization = email ? email.split("@")[1].split(".")[0] : "default";
-
                 //REST
 
                 // await setFloorItemApi(

app/src/modules/scene/controls/selectionControls/rotateControls.tsx

@@ -8,6 +8,7 @@ import * as Types from "../../../../types/world/worldTypes";
 import { useEventsStore } from "../../../../store/simulation/useEventsStore";
 import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
+import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
 
 function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, boundingBoxRef }: any) {
     const { camera, controls, gl, scene, pointer, raycaster } = useThree();
@@ -15,10 +16,28 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
 
     const { toggleView } = useToggleView();
     const { selectedAssets, setSelectedAssets } = useSelectedAssets();
+    const { selectedProduct } = useSelectedProduct();
     const { floorItems, setFloorItems } = useFloorItems();
     const { socket } = useSocketStore();
     const itemsData = useRef<Types.FloorItems>([]);
 
+    const email = localStorage.getItem('email')
+    const organization = (email!.split("@")[1]).split(".")[0];
+
+    const updateBackend = (
+        productName: string,
+        productId: string,
+        organization: string,
+        eventData: EventsSchema
+    ) => {
+        upsertProductOrEventApi({
+            productName: productName,
+            productId: productId,
+            organization: organization,
+            eventDatas: eventData
+        })
+    }
+
     const prevPointerPosition = useRef<THREE.Vector2 | null>(null);
 
     useEffect(() => {
@@ -190,10 +209,19 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
                         })
                     }
                     if (productData) {
-                        useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
+                        const event = useProductStore.getState().updateEvent(useSelectedProduct.getState().selectedProduct.productId, obj.userData.modelUuid, {
                             position: [worldPosition.x, worldPosition.y, worldPosition.z],
                             rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
                         })
+
+                        if (event) {
+                            updateBackend(
+                                selectedProduct.productName,
+                                selectedProduct.productId,
+                                organization,
+                                event
+                            );
+                        }
                     }
                 }
 
@@ -203,9 +231,6 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
                     return updatedItems;
                 });
 
-                const email = localStorage.getItem("email");
-                const organization = email ? email.split("@")[1].split(".")[0] : "default";
-
                 //REST
 
                 // await setFloorItemApi(

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

@@ -53,7 +53,17 @@ function AddOrRemoveEventsInProducts() {
             const canvasElement = gl.domElement;
             if (!canvasElement) return;
 
-            let intersects = raycaster.intersectObjects(scene.children, true);
+            const intersects = raycaster
+                .intersectObjects(scene.children, true)
+                .filter(
+                    (intersect) =>
+                        !intersect.object.name.includes("Roof") &&
+                        !intersect.object.name.includes("MeasurementReference") &&
+                        !intersect.object.name.includes("agv-collider") &&
+                        !(intersect.object.type === "GridHelper") &&
+                        !(intersect.object?.parent?.name.includes('zones')) &&
+                        !(intersect.object?.parent?.name.includes('Zone'))
+                );
             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;
 
@@ -116,6 +126,7 @@ function AddOrRemoveEventsInProducts() {
         };
 
     }, [gl, subModule, selectedProduct, selectedAsset]);
+
     return (
         <></>
     )

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/triggers/connector/triggerConnector.tsx

@@ -7,21 +7,24 @@ import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { useEventsStore } from "../../../../store/simulation/useEventsStore";
 import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
 import { handleAddEventToProduct } from "../../events/points/functions/handleAddEventToProduct";
+import { QuadraticBezierLine } from "@react-three/drei";
+import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
 
 interface ConnectionLine {
     id: string;
-    start: THREE.Vector3;
+    startPointUuid: string;
-    end: THREE.Vector3;
+    endPointUuid: string;
-    mid: THREE.Vector3;
     trigger: TriggerSchema;
 }
 
 function TriggerConnector() {
     const { gl, raycaster, scene } = useThree();
     const { subModule } = useSubModuleStore();
-    const { products, getPointByUuid, getIsEventInProduct, getActionByUuid, addTrigger, addEvent, getEventByModelUuid } = useProductStore();
+    const { products, getPointByUuid, getIsEventInProduct, getActionByUuid, addTrigger, addEvent, getEventByModelUuid, getProductById } = useProductStore();
     const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
     const { selectedProduct } = useSelectedProduct();
+    const [hoveredLineKey, setHoveredLineKey] = useState<string | null>(null);
+    const groupRefs = useRef<Record<string, any>>({});
 
     const [firstSelectedPoint, setFirstSelectedPoint] = useState<{
         productId: string;
@@ -32,52 +35,59 @@ function TriggerConnector() {
 
     const [connections, setConnections] = useState<ConnectionLine[]>([]);
 
+    const email = localStorage.getItem('email')
+    const organization = (email!.split("@")[1]).split(".")[0];
+
+    const updateBackend = (
+        productName: string,
+        productId: string,
+        organization: string,
+        eventData: EventsSchema
+    ) => {
+        upsertProductOrEventApi({
+            productName: productName,
+            productId: productId,
+            organization: organization,
+            eventDatas: eventData
+        })
+    }
+
     useEffect(() => {
         const newConnections: ConnectionLine[] = [];
 
-        products.forEach(product => {
+        const product = getProductById(selectedProduct.productId);
-            product.eventDatas.forEach(event => {
+        if (!product || products.length === 0) return;
-                if ('points' in event) {
-                    event.points.forEach(point => {
-                        if ('action' in point && point.action?.triggers) {
-                            point.action.triggers.forEach(trigger => {
-                                if (trigger.triggeredAsset) {
-                                    const targetPoint = getPointByUuid(
-                                        product.productId,
-                                        trigger.triggeredAsset.triggeredModel.modelUuid,
-                                        trigger.triggeredAsset.triggeredPoint.pointUuid
-                                    );
 
-                                    if (targetPoint) {
+        product.eventDatas.forEach(event => {
-                                        const startPos = new THREE.Vector3(...point.position);
+            if ('points' in event) {
-                                        const endPos = new THREE.Vector3(...targetPoint.position);
+                event.points.forEach(point => {
-                                        const midPos = new THREE.Vector3()
+                    if ('action' in point && point.action?.triggers) {
-                                            .addVectors(startPos, endPos)
+                        point.action.triggers.forEach(trigger => {
-                                            .multiplyScalar(0.5)
+                            if (trigger.triggeredAsset) {
-                                            .add(new THREE.Vector3(0, 2, 0));
+                                newConnections.push({
+                                    id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
+                                    startPointUuid: point.uuid,
+                                    endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
+                                    trigger
+                                });
+                            }
+                        });
+                    }
+                });
+            } else if ('point' in event) {
+                if ('actions' in event.point) {
+                    console.log(event);
 
-                                        newConnections.push({
+                    // you left here
-                                            id: `${point.uuid}-${targetPoint.uuid}-${trigger.triggerUuid}`,
+
-                                            start: startPos,
+                } else if ('action' in event.point) {
-                                            end: endPos,
+                    console.log(event);
-                                            mid: midPos,
-                                            trigger
-                                        });
-                                    }
-                                }
-                            });
-                        }
-                    });
                 }
-            });
+            }
         });
 
         setConnections(newConnections);
-    }, [products]);
+    }, [products, selectedProduct.productId]);
-
-    useEffect(() => {
-        console.log('connections: ', connections);
-    }, connections)
 
     useEffect(() => {
         const canvasElement = gl.domElement;
@@ -111,7 +121,12 @@ function TriggerConnector() {
             if (drag) return;
             evt.preventDefault();
 
-            const intersects = raycaster.intersectObjects(scene.children, true);
+            const intersects = raycaster
+                .intersectObjects(scene.children, true)
+                .filter(
+                    (intersect) =>
+                        intersect.object.name === ('Event-Sphere')
+                );
             if (intersects.length === 0) return;
 
             const currentObject = intersects[0].object;
@@ -128,7 +143,9 @@ function TriggerConnector() {
                     pointUuid
                 );
 
-                if (!point) return;
+                const event = getEventByModelUuid(selectedProduct.productId, modelUuid);
+
+                if (!point || !event) return;
 
                 let actionUuid: string | undefined;
                 if ('action' in point && point.action) {
@@ -152,12 +169,12 @@ function TriggerConnector() {
                         delay: 0,
                         triggeredAsset: {
                             triggeredModel: {
-                                modelName: currentObject.parent?.parent?.name || 'Unknown',
+                                modelName: event.modelName || 'Unknown',
                                 modelUuid: modelUuid
                             },
                             triggeredPoint: {
-                                pointName: currentObject.name,
+                                pointName: 'Point',
-                                pointUuid: pointUuid
+                                pointUuid: point.uuid
                             },
                             triggeredAction: actionUuid ? {
                                 actionName: getActionByUuid(selectedProduct.productId, actionUuid)?.actionName || 'Action',
@@ -167,7 +184,16 @@ function TriggerConnector() {
                     };
 
                     if (firstSelectedPoint.actionUuid) {
-                        addTrigger(firstSelectedPoint.actionUuid, trigger);
+                        const event = addTrigger(firstSelectedPoint.actionUuid, trigger);
+
+                        if (event) {
+                            updateBackend(
+                                selectedProduct.productName,
+                                selectedProduct.productId,
+                                organization,
+                                event
+                            );
+                        }
                     }
                     setFirstSelectedPoint(null);
                 }
@@ -237,9 +263,53 @@ function TriggerConnector() {
 
     }, [gl, subModule, selectedProduct, firstSelectedPoint]);
 
+    const getWorldPositionFromScene = (pointUuid: string): THREE.Vector3 | null => {
+        const pointObj = scene.getObjectByProperty("uuid", pointUuid);
+        if (!pointObj) return null;
+
+        const worldPosition = new THREE.Vector3();
+        pointObj.getWorldPosition(worldPosition);
+        return worldPosition;
+    };
+
     return (
-        <>
+        <group>
-        </>
+            {connections.map((connection) => {
+                const startPoint = getWorldPositionFromScene(connection.startPointUuid);
+                const endPoint = getWorldPositionFromScene(connection.endPointUuid);
+
+                if (!startPoint || !endPoint) return null;
+
+                const distance = startPoint.distanceTo(endPoint);
+                const heightFactor = Math.max(0.5, distance * 0.2);
+                const midPoint = new THREE.Vector3(
+                    (startPoint.x + endPoint.x) / 2,
+                    Math.max(startPoint.y, endPoint.y) + heightFactor,
+                    (startPoint.z + endPoint.z) / 2
+                );
+
+                return (
+                    <QuadraticBezierLine
+                        key={connection.id}
+                        ref={(el) => (groupRefs.current[connection.id] = el!)}
+                        start={startPoint.toArray()}
+                        end={endPoint.toArray()}
+                        mid={midPoint.toArray()}
+                        color={hoveredLineKey === connection.id ? "red" : "#42a5f5"}
+                        lineWidth={4}
+                        dashed={hoveredLineKey !== connection.id}
+                        dashSize={0.75}
+                        dashScale={20}
+                        onPointerOver={() => setHoveredLineKey(connection.id)}
+                        onPointerOut={() => setHoveredLineKey(null)}
+                        onClick={() => {
+                            console.log("Connection clicked:", connection);
+                        }}
+                        userData={connection.trigger}
+                    />
+                );
+            })}
+        </group>
     );
 }
 

app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx

@@ -67,7 +67,6 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
             setRestingRotation(true);
             decrementVehicleLoad(agvDetail.modelUuid, 0);
             const object = scene.getObjectByProperty('uuid', agvUuid);
-            console.log('currentPhase: ', currentPhase);
             if (object) {
                 object.position.set(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2]);
                 object.rotation.set(objectRotation.x, objectRotation.y, objectRotation.z);

app/src/store/simulation/useEventsStore.ts

@@ -7,7 +7,7 @@ type EventsStore = {
     // Event-level actions
     addEvent: (event: EventsSchema) => void;
     removeEvent: (modelUuid: string) => void;
-    updateEvent: (modelUuid: string, updates: Partial<EventsSchema>) => void;
+    updateEvent: (modelUuid: string, updates: Partial<EventsSchema>) => EventsSchema | undefined;
 
     // Point-level actions
     addPoint: (modelUuid: string, point: ConveyorPointSchema | VehiclePointSchema | RoboticArmPointSchema | MachinePointSchema | StoragePointSchema) => void;
@@ -60,12 +60,15 @@ export const useEventsStore = create<EventsStore>()(
         },
 
         updateEvent: (modelUuid, updates) => {
+            let updatedEvent: EventsSchema | undefined;
             set((state) => {
                 const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
                 if (event) {
                     Object.assign(event, updates);
+                    updatedEvent = JSON.parse(JSON.stringify(event));
                 }
             });
+            return updatedEvent;
         },
 
         // Point-level actions

app/src/store/simulation/useProductStore.ts

@@ -43,7 +43,7 @@ type ProductsStore = {
     addTrigger: (
         actionUuid: string,
         trigger: TriggerSchema
-    ) => void;
+    ) => EventsSchema | undefined;
     removeTrigger: (triggerUuid: string) => void;
     updateTrigger: (
         triggerUuid: string,
@@ -284,6 +284,7 @@ export const useProductStore = create<ProductsStore>()(
 
         // Trigger-level actions
         addTrigger: (actionUuid, trigger) => {
+            let updatedEvent: EventsSchema | undefined;
             set((state) => {
                 for (const product of state.products) {
                     for (const event of product.eventDatas) {
@@ -291,6 +292,7 @@ export const useProductStore = create<ProductsStore>()(
                             for (const point of (event as ConveyorEventSchema).points) {
                                 if (point.action && point.action.actionUuid === actionUuid) {
                                     point.action.triggers.push(trigger);
+                                    updatedEvent = JSON.parse(JSON.stringify(event));
                                     return;
                                 }
                             }
@@ -298,11 +300,13 @@ export const useProductStore = create<ProductsStore>()(
                             const point = (event as any).point;
                             if ('action' in point && point.action.actionUuid === actionUuid) {
                                 point.action.triggers.push(trigger);
+                                updatedEvent = JSON.parse(JSON.stringify(event));
                                 return;
                             } else if ('actions' in point) {
                                 const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
                                 if (action) {
                                     action.triggers.push(trigger);
+                                    updatedEvent = JSON.parse(JSON.stringify(event));
                                     return;
                                 }
                             }
@@ -310,6 +314,7 @@ export const useProductStore = create<ProductsStore>()(
                     }
                 }
             });
+            return updatedEvent;
         },
 
         removeTrigger: (triggerUuid) => {