Enhance MachineMechanics and InputWithDropDown components; add connections to path interfaces

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useMemo } from "react";
+import React, { useRef, useState, useMemo, useEffect } from "react";
 import {
   AddIcon,
   InfoIcon,
@@ -325,10 +325,11 @@ const MachineMechanics: React.FC = () => {
     }
   };
 
-  const [selectedItem, setSelectedItem] = useState<{
+  const [selectedItem, setSelectedItem] = useState<{ type: "action" | "trigger"; item: any; } | null>(null);
-    type: "action" | "trigger";
+
-    item: any;
+  useEffect(() => {
-  } | null>(null);
+    setSelectedItem(null); // Reset selectedItem when selectedActionSphere changes
+  }, [selectedActionSphere]);
 
   return (
     <div className="machine-mechanics-container">
@@ -479,18 +480,14 @@ const MachineMechanics: React.FC = () => {
                   {selectedItem.item.type === 'Spawn' && (
                     <InputWithDropDown
                       label="Spawn Interval"
-                      value={selectedItem.item.spawnInterval === 'Inherit'
+                      min={0}
-                        ? undefined
+                      defaultValue={selectedItem.item.spawnInterval === "Inherit" ? "" : selectedItem.item.spawnInterval.toString()}
-                        : selectedItem.item.spawnInterval}
+                      value={selectedItem.item.spawnInterval === "Inherit" ? "" : selectedItem.item.spawnInterval.toString()}
-
                       onChange={(value) => {
-                        const numValue = parseInt(value);
+                        handleSpawnIntervalChange(selectedItem.item.uuid, (value === "") ? "Inherit" : parseInt(value));
-                        handleSpawnIntervalChange(
-                          selectedItem.item.uuid,
-                          !value ? 'Inherit' : numValue
-                        );
                       }}
                     />
+
                   )}
                 </>
               )}

app/src/components/ui/inputs/InputWithDropDown.tsx

@@ -4,6 +4,8 @@ import RenameInput from "./RenameInput";
 type InputWithDropDownProps = {
   label: string;
   value: string;
+  min?: number
+  defaultValue?: string;
   options?: string[]; // Array of dropdown options
   activeOption?: string; // The currently active dropdown option
   onClick?: () => void;
@@ -15,6 +17,8 @@ type InputWithDropDownProps = {
 const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
   label,
   value,
+  min,
+  defaultValue,
   options,
   activeOption,
   onClick,
@@ -40,8 +44,9 @@ const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
       )}
       <div className="input default" id={separatedWords}>
         <input
+          min={min}
           type="number"
-          // defaultValue={value}
+          defaultValue={value}
           onChange={(e) => {
             onChange(e.target.value);
           }}

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

@@ -3,7 +3,6 @@ import * as THREE from 'three';
 import * as Types from '../../../types/world/worldTypes';
 import { useEffect } from 'react';
 
-
 interface Path {
     modeluuid: string;
     modelName: string;
@@ -13,7 +12,7 @@ interface Path {
         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 }[] } | [];
     }[];
     pathPosition: [number, number, number];
     pathRotation: [number, number, number];
@@ -33,8 +32,8 @@ function Behaviour({ setSimulationPaths }: { setSimulationPaths: any }) {
                 const point2Position = new THREE.Vector3(0, 1.25, -3.3);
 
                 const point1UUID = THREE.MathUtils.generateUUID();
-                const point2UUID = THREE.MathUtils.generateUUID();
                 const middlePointUUID = THREE.MathUtils.generateUUID();
+                const point2UUID = THREE.MathUtils.generateUUID();
 
                 const newPath: Path = {
                     modeluuid: item.modeluuid,
@@ -46,6 +45,7 @@ function Behaviour({ setSimulationPaths }: { setSimulationPaths: any }) {
                             rotation: [0, 0, 0],
                             actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: false }],
                             triggers: [],
+                            connections: [],
                         },
                         {
                             uuid: middlePointUUID,
@@ -53,6 +53,7 @@ function Behaviour({ setSimulationPaths }: { setSimulationPaths: any }) {
                             rotation: [0, 0, 0],
                             actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: false }],
                             triggers: [],
+                            connections: [],
                         },
                         {
                             uuid: point2UUID,
@@ -60,6 +61,7 @@ function Behaviour({ setSimulationPaths }: { setSimulationPaths: any }) {
                             rotation: [0, 0, 0],
                             actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: false }],
                             triggers: [],
+                            connections: [],
                         },
                     ],
                     pathPosition: [...item.position],
@@ -77,4 +79,4 @@ function Behaviour({ setSimulationPaths }: { setSimulationPaths: any }) {
     return null;
 }
 
-export default Behaviour;
+export default Behaviour;

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

@@ -2,11 +2,11 @@ import { useFrame, useThree } from '@react-three/fiber';
 import React, { useEffect, useState } from 'react';
 import * as THREE from 'three';
 import { QuadraticBezierLine } from '@react-three/drei';
-import {  useConnections, useIsConnecting, useSimulationPaths } from '../../../store/store';
+import { useConnections, useIsConnecting, useSimulationPaths } from '../../../store/store';
 import useModuleStore from '../../../store/useModuleStore';
 
 function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject<THREE.Group> }) {
-    const { activeModule } = useModuleStore();    
+    const { activeModule } = useModuleStore();
     const { gl, raycaster, scene, pointer, camera } = useThree();
     const { connections, setConnections, addConnection } = useConnections();
     const { isConnecting, setIsConnecting } = useIsConnecting();
@@ -232,8 +232,9 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
     return (
         <>
             {connections.map((connection, index) => {
-                const fromSphere = scene.getObjectByProperty('uuid', connection.fromUUID);
+                if (!pathsGroupRef.current) return;
-                const toSphere = scene.getObjectByProperty('uuid', connection.toConnections[0].toUUID);
+                const fromSphere = pathsGroupRef.current.getObjectByProperty('uuid', connection.fromUUID);
+                const toSphere = pathsGroupRef.current.getObjectByProperty('uuid', connection.toConnections[0].toUUID);
 
                 if (fromSphere && toSphere) {
                     const fromWorldPosition = new THREE.Vector3();

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

@@ -14,6 +14,7 @@ interface Path {
         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 }[] } | [];
     }[];
     pathPosition: [number, number, number];
     pathRotation: [number, number, number];

app/src/modules/simulation/simulation.tsx

@@ -32,9 +32,9 @@ function Simulation() {
 
     return (
         <>
+            <Behaviour setSimulationPaths={setSimulationPaths} />
             {activeModule === 'simulation' && (
                 <>
-                    <Behaviour setSimulationPaths={setSimulationPaths} />
                     <PathCreation pathsGroupRef={pathsGroupRef} />
                     <PathConnector pathsGroupRef={pathsGroupRef} />
                 </>

app/src/pages/Project.tsx

@@ -55,7 +55,7 @@ const Project: React.FC = () => {
       <SideBarRight />
       <RealTimeVisulization />
       {activeModule !== "market" && <Tools />}
-      <SimulationUI />
+      {/* <SimulationUI /> */}
     </div>
   );
 };

app/src/store/store.ts

@@ -307,6 +307,7 @@ interface Path {
         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 }[] } | [];
     }[];
     pathPosition: [number, number, number];
     pathRotation: [number, number, number];