refactor: standardize activeTool casing and enhance trigger mechanics with bufferTime

app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx

@@ -243,6 +243,7 @@ const ConveyorMechanics: React.FC = () => {
                 uuid: THREE.MathUtils.generateUUID(),
                 name: `Trigger ${triggerIndex + 1}`,
                 type: '',
+                bufferTime: 0,
                 isUsed: false
               };
 
@@ -298,8 +299,19 @@ const ConveyorMechanics: React.FC = () => {
     );
 
     setSimulationPaths(updatedPaths);
+
+    // Ensure the selectedItem is updated immediately
+    const updatedTrigger = updatedPaths
+      .flatMap((path) => (path.type === "Conveyor" ? path.points : []))
+      .flatMap((point) => point.triggers)
+      .find((trigger) => trigger.uuid === uuid);
+
+    if (updatedTrigger) {
+      setSelectedItem({ type: "trigger", item: updatedTrigger });
+    }
   };
 
+
   // Update the toggle handlers to immediately update the selected item
   const handleActionToggle = (uuid: string) => {
     if (!selectedActionSphere) return;
@@ -373,10 +385,45 @@ const ConveyorMechanics: React.FC = () => {
     }
   };
 
+  const handleTriggerBufferTimeChange = (uuid: string, bufferTime: number) => {
+    if (!selectedActionSphere) return;
+
+    const updatedPaths = simulationPaths.map((path) =>
+      path.type === "Conveyor"
+        ? {
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                triggers: point.triggers.map((trigger) =>
+                  trigger.uuid === uuid ? { ...trigger, bufferTime } : trigger
+                ),
+              }
+              : point
+          ),
+        }
+        : path
+    );
+
+    setSimulationPaths(updatedPaths);
+
+    // Immediately update selectedItem if it's the currently selected trigger
+    if (selectedItem?.type === "trigger" && selectedItem.item.uuid === uuid) {
+      setSelectedItem({
+        ...selectedItem,
+        item: {
+          ...selectedItem.item,
+          bufferTime
+        }
+      });
+    }
+  };
+
   const [selectedItem, setSelectedItem] = useState<{ type: "action" | "trigger"; item: any; } | null>(null);
 
   useEffect(() => {
-    setSelectedItem(null); // Reset selectedItem when selectedActionSphere changes
+    setSelectedItem(null);
   }, [selectedActionSphere]);
 
   return (
@@ -559,8 +606,19 @@ const ConveyorMechanics: React.FC = () => {
                     options={["On-Hit", "Buffer"]}
                     onSelect={(option) => handleTriggerSelect(selectedItem.item.uuid, option)}
                   />
+
+                  {selectedItem.item.type === "Buffer" && (
+                    <InputWithDropDown
+                      label="Buffer Time"
+                      value={selectedItem.item.bufferTime.toString()}
+                      onChange={(value) => {
+                        handleTriggerBufferTimeChange(selectedItem.item.uuid, parseInt(value));
+                      }}
+                    />
+                  )}
                 </>
               )}
+
             </>
           )}
 

app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx

@@ -243,6 +243,7 @@ const VehicleMechanics: React.FC = () => {
                                 uuid: THREE.MathUtils.generateUUID(),
                                 name: `Trigger ${triggerIndex + 1}`,
                                 type: '',
+                                bufferTime: 0,
                                 isUsed: false
                             };
 

app/src/components/ui/Tools.tsx

@@ -18,15 +18,19 @@ import { usePlayButtonStore } from "../../store/usePlayButtonStore";
 import useTemplateStore from "../../store/useTemplateStore";
 import { useSelectedZoneStore } from "../../store/useZoneStore";
 import {
+  useActiveTool,
   useAddAction,
   useDeleteModels,
+  useDeletePointOrLine,
+  useMovePoint,
   useSelectedWallItem,
   useToggleView,
+  useToolMode,
+  useTransformMode,
 } from "../../store/store";
 
 const Tools: React.FC = () => {
   const { templates } = useTemplateStore();
-  const [activeTool, setActiveTool] = useState("cursor");
   const [activeSubTool, setActiveSubTool] = useState("cursor");
   const [toggleThreeD, setToggleThreeD] = useState(true);
 
@@ -39,11 +43,17 @@ const Tools: React.FC = () => {
   const { selectedZone } = useSelectedZoneStore();
 
   // wall options
-  const { setToggleView } = useToggleView();
+  const { toggleView, setToggleView } = useToggleView();
   const { setDeleteModels } = useDeleteModels();
   const { setAddAction } = useAddAction();
   const { setSelectedWallItem } = useSelectedWallItem();
 
+  const { transformMode, setTransformMode } = useTransformMode();
+  const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
+  const { movePoint, setMovePoint } = useMovePoint();
+  const { toolMode, setToolMode } = useToolMode();
+  const { activeTool, setActiveTool } = useActiveTool();
+
   // Reset activeTool whenever activeModule changes
   useEffect(() => {
     setActiveTool(activeSubTool);
@@ -60,6 +70,7 @@ const Tools: React.FC = () => {
       setToggleView(false);
     }
     setToggleThreeD(!toggleThreeD);
+    setActiveTool("cursor");
   };
 
   useEffect(() => {
@@ -85,6 +96,84 @@ const Tools: React.FC = () => {
     };
   }, []);
 
+  useEffect(() => {
+    setToolMode(null);
+    setDeleteModels(false);
+    setAddAction(null);
+    setTransformMode(null);
+    setMovePoint(false);
+    setDeletePointOrLine(false);
+
+    switch (activeTool) {
+      case "Move":
+        if (toggleView) {
+          setMovePoint(true);
+        } else {
+          setTransformMode("translate");
+        }
+        break;
+
+      case "Rotate":
+        if (!toggleView) {
+          setTransformMode("rotate");
+        }
+        break;
+
+      case "Scale":
+        if (!toggleView) {
+          setTransformMode("scale");
+        }
+        break;
+
+      case "draw-wall":
+        if (toggleView) {
+          setToolMode("Wall");
+        }
+        break;
+
+      case "Draw Aisle":
+        if (toggleView) {
+          setToolMode("Aisle");
+        }
+        break;
+
+      case "Mark zone":
+        if (toggleView) {
+          setToolMode("Zone");
+        }
+        break;
+
+      case "Draw Floor":
+        if (toggleView) {
+          setToolMode("Floor");
+        }
+        break;
+
+      case "Measurement Tool":
+        setToolMode("MeasurementScale");
+        break;
+
+      case "Add pillar":
+        if (!toggleView) {
+          setAddAction("pillar");
+        }
+        break;
+
+      case "Delete":
+        if (toggleView) {
+          setDeletePointOrLine(true);
+        } else {
+          setDeleteModels(true);
+        }
+        break;
+
+      default:
+        break;
+    }
+
+    setActiveTool(activeTool);
+  }, [activeTool]);
+
   return (
     <>
       {!isPlaying ? (
@@ -94,8 +183,7 @@ const Tools: React.FC = () => {
               <div className="activeDropicon">
                 {activeSubTool == "cursor" && (
                   <div
-                    className={`tool-button ${
+                    className={`tool-button ${activeTool === "cursor" ? "active" : ""
-                      activeTool === "cursor" ? "active" : ""
                       }`}
                     onClick={() => {
                       setActiveTool("cursor");
@@ -106,8 +194,7 @@ const Tools: React.FC = () => {
                 )}
                 {activeSubTool == "free-hand" && (
                   <div
-                    className={`tool-button ${
+                    className={`tool-button ${activeTool === "free-hand" ? "active" : ""
-                      activeTool === "free-hand" ? "active" : ""
                       }`}
                     onClick={() => {
                       setActiveTool("free-hand");
@@ -167,8 +254,7 @@ const Tools: React.FC = () => {
                 <div className="split"></div>
                 <div className="draw-tools">
                   <div
-                    className={`tool-button ${
+                    className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
-                      activeTool === "draw-wall" ? "active" : ""
                       }`}
                     onClick={() => {
                       setActiveTool("draw-wall");
@@ -177,8 +263,7 @@ const Tools: React.FC = () => {
                     <WallIcon isActive={activeTool === "draw-wall"} />
                   </div>
                   <div
-                    className={`tool-button ${
+                    className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
-                      activeTool === "draw-zone" ? "active" : ""
                       }`}
                     onClick={() => {
                       setActiveTool("draw-zone");
@@ -187,8 +272,7 @@ const Tools: React.FC = () => {
                     <ZoneIcon isActive={activeTool === "draw-zone"} />
                   </div>
                   <div
-                    className={`tool-button ${
+                    className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
-                      activeTool === "draw-aisle" ? "active" : ""
                       }`}
                     onClick={() => {
                       setActiveTool("draw-aisle");
@@ -197,8 +281,7 @@ const Tools: React.FC = () => {
                     <AsileIcon isActive={activeTool === "draw-aisle"} />
                   </div>
                   <div
-                    className={`tool-button ${
+                    className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
-                      activeTool === "draw-floor" ? "active" : ""
                       }`}
                     onClick={() => {
                       setActiveTool("draw-floor");
@@ -214,8 +297,7 @@ const Tools: React.FC = () => {
                 <div className="split"></div>
                 <div className="draw-tools">
                   <div
-                    className={`tool-button ${
+                    className={`tool-button ${activeTool === "pen" ? "active" : ""
-                      activeTool === "pen" ? "active" : ""
                       }`}
                     onClick={() => {
                       setActiveTool("pen");
@@ -248,8 +330,7 @@ const Tools: React.FC = () => {
             <div className="split"></div>
             <div className="general-options">
               <div
-                className={`tool-button ${
+                className={`tool-button ${activeTool === "comment" ? "active" : ""
-                  activeTool === "comment" ? "active" : ""
                   }`}
                 onClick={() => {
                   setActiveTool("comment");
@@ -258,8 +339,7 @@ const Tools: React.FC = () => {
                 <CommentIcon isActive={activeTool === "comment"} />
               </div>
               <div
-                className={`tool-button ${
+                className={`tool-button ${activeTool === "play" ? "active" : ""
-                  activeTool === "play" ? "active" : ""
                   }`}
                 onClick={() => {
                   setIsPlaying(!isPlaying);
@@ -270,8 +350,7 @@ const Tools: React.FC = () => {
             </div>
             <div className="split"></div>
             <div
-              className={`toggle-threed-button${
+              className={`toggle-threed-button${toggleThreeD ? " toggled" : ""
-                toggleThreeD ? " toggled" : ""
                 }`}
               onClick={toggleSwitch}
             >

app/src/modules/builder/groups/floorItemsGroup.tsx

@@ -193,7 +193,7 @@ const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject
                 }
                 const Mode = transformMode;
 
-                if (Mode !== null || activeTool === "Cursor") {
+                if (Mode !== null || activeTool === "cursor") {
                     if (!itemsGroup.current) return;
                     let intersects = raycaster.intersectObjects(itemsGroup.current.children, true);
                     if (intersects.length > 0 && intersects[0]?.object?.parent?.parent?.position && intersects[0]?.object?.parent?.parent?.scale && intersects[0]?.object?.parent?.parent?.rotation) {
@@ -225,7 +225,7 @@ const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject
 
                 const Mode = transformMode;
 
-                if (Mode !== null || activeTool === "Cursor") {
+                if (Mode !== null || activeTool === "cursor") {
                     if (!itemsGroup.current) return;
                     let intersects = raycaster.intersectObjects(itemsGroup.current.children, true);
                     if (intersects.length > 0 && intersects[0]?.object?.parent?.parent?.position && intersects[0]?.object?.parent?.parent?.scale && intersects[0]?.object?.parent?.parent?.rotation) {

app/src/modules/simulation/behaviour/behaviour.tsx

@@ -67,7 +67,7 @@ function Behaviour() {
                     point: {
                         uuid: pointUUID,
                         position: [pointPosition.x, pointPosition.y, pointPosition.z],
-                        actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Start', start: THREE.MathUtils.generateUUID(), hitCount: 1, end: THREE.MathUtils.generateUUID(), buffer: 0, isUsed: false }],
+                        actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Start', start: '', hitCount: 1, end: '', buffer: 0, isUsed: false }],
                         triggers: [],
                         connections: { source: { pathUUID: item.modeluuid, pointUUID: pointUUID }, targets: [] },
                     },

app/src/modules/simulation/path/pathCreation.tsx

@@ -1,27 +1,10 @@
 import * as THREE from 'three';
+import * as Types from '../../../types/world/worldTypes';
 import { useRef, useState, useEffect } from 'react';
 import { Sphere, TransformControls } from '@react-three/drei';
 import { useIsConnecting, useRenderDistance, useSelectedActionSphere, useSelectedPath, useSimulationPaths } from '../../../store/store';
 import { useFrame, useThree } from '@react-three/fiber';
 import { useSubModuleStore } from '../../../store/useModuleStore';
-import { point } from '@turf/helpers';
-
-interface ConveyorEventsSchema {
-    modeluuid: string;
-    modelName: string;
-    type: 'Conveyor';
-    points: {
-        uuid: string;
-        position: [number, number, number];
-        rotation: [number, number, number];
-        actions: { uuid: string; name: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean }[] | [];
-        triggers: { uuid: string; name: string; type: string; isUsed: boolean }[] | [];
-        connections: { source: { pathUUID: string; pointUUID: string }; targets: { pathUUID: string; pointUUID: string }[] };
-    }[];
-    assetPosition: [number, number, number];
-    assetRotation: [number, number, number];
-    speed: number;
-}
 
 function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject<THREE.Group> }) {
     const { renderDistance } = useRenderDistance();
@@ -89,7 +72,7 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
                 };
             }
             return path;
-        }) as ConveyorEventsSchema[];
+        }) as Types.ConveyorEventsSchema[];
 
         setSimulationPaths(updatedPaths);
     };

app/src/modules/simulation/simulation.tsx

@@ -14,7 +14,7 @@ function Simulation() {
     const [processes, setProcesses] = useState([]);
 
     useEffect(() => {
-     
+        console.log('simulationPaths: ', simulationPaths);
     }, [simulationPaths]);
 
     // useEffect(() => {

app/src/store/store.ts

@@ -214,7 +214,7 @@ export const useAddAction = create<any>((set: any) => ({
 }));
 
 export const useActiveTool = create<any>((set: any) => ({
-  activeTool: "Cursor",
+  activeTool: "cursor",
   setActiveTool: (x: any) => set({ activeTool: x }),
 }));
 

app/src/types/world/worldTypes.d.ts

@@ -295,7 +295,7 @@ interface ConveyorEventsSchema {
         position: [number, number, number];
         rotation: [number, number, number];
         actions: { uuid: string; name: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean }[] | [];
-        triggers: { uuid: string; name: string; type: string; isUsed: boolean }[] | [];
+        triggers: { uuid: string; name: string; type: string; isUsed: boolean; bufferTime: number }[] | [];
         connections: { source: { pathUUID: string; pointUUID: string }; targets: { pathUUID: string; pointUUID: string }[] };
     }[];
     assetPosition: [number, number, number];