Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor AGV and PathNavigator components; add NavMeshCreator for improved navigation handling and added backend event storage for connections

This commit is contained in:
Jerald-Golden-B 2025-04-05 12:25:29 +05:30
parent e92345d820
commit 34aea0ecf1
9 changed files with 305 additions and 202 deletions

53
app/src/modules/builder/agv/agv.tsx
View File

@ -1,14 +1,8 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useState } from "react";
import { useSimulationStates } from "../../../store/store"; import { Line } from "@react-three/drei";
import PolygonGenerator from "./polygonGenerator"; import { useNavMesh, useSimulationStates } from "../../../store/store";
import PathNavigator from "./pathNavigator"; import PathNavigator from "./pathNavigator";
import NavMeshDetails from "./navMeshDetails"; import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import * as CONSTANTS from "../../../types/world/worldConstants";
import * as Types from "../../../types/world/worldTypes";
type AgvProps = {
lines: Types.RefLines
};
type PathPoints = { type PathPoints = {
modelUuid: string; modelUuid: string;
@ -18,12 +12,11 @@ type PathPoints = {
hitCount: number; hitCount: number;
}; };
const Agv = ({ lines }: AgvProps) => { const Agv = () => {
let groupRef = useRef() as Types.RefGroup;
const [pathPoints, setPathPoints] = useState<PathPoints[]>([]); const [pathPoints, setPathPoints] = useState<PathPoints[]>([]);
const { simulationStates } = useSimulationStates(); const { simulationStates } = useSimulationStates();
const [navMesh, setNavMesh] = useState(); const { navMesh } = useNavMesh();
const { isPlaying } = usePlayButtonStore();
useEffect(() => { useEffect(() => {
if (simulationStates.length > 0) { if (simulationStates.length > 0) {
@ -37,9 +30,9 @@ const Agv = ({ lines }: AgvProps) => {
bufferTime: model.points.actions.buffer, bufferTime: model.points.actions.buffer,
hitCount: model.points.actions.hitCount, hitCount: model.points.actions.hitCount,
points: [ points: [
{ x: model.position[0], y: model.position[1], z: model.position[2], }, { x: model.position[0], y: model.position[1], z: model.position[2] },
{ x: model.points.actions.start.x, y: 0, z: model.points.actions.start.y, }, { x: model.points.actions.start.x, y: 0, z: model.points.actions.start.y },
{ x: model.points.actions.end.x, y: 0, z: model.points.actions.end.y, }, { x: model.points.actions.end.x, y: 0, z: model.points.actions.end.y },
], ],
})); }));
@ -49,41 +42,25 @@ const Agv = ({ lines }: AgvProps) => {
return ( return (
<> <>
<PolygonGenerator groupRef={groupRef} lines={lines} />
<NavMeshDetails lines={lines} setNavMesh={setNavMesh} groupRef={groupRef} />
{pathPoints.map((pair, i) => ( {pathPoints.map((pair, i) => (
<group key={i} visible={!isPlaying}>
<PathNavigator <PathNavigator
navMesh={navMesh} navMesh={navMesh}
selectedPoints={pair.points} pathPoints={pair.points}
id={pair.modelUuid} id={pair.modelUuid}
key={i}
speed={pair.modelSpeed} speed={pair.modelSpeed}
bufferTime={pair.bufferTime} bufferTime={pair.bufferTime}
hitCount={pair.hitCount} hitCount={pair.hitCount}
/> />
))}
{pathPoints.map((pair, i) => ( {pair.points.slice(1).map((point, idx) => (
<group key={i}> <mesh position={[point.x, point.y, point.z]} key={idx}>
<mesh position={[pair.points[1].x, pair.points[1].y, pair.points[1].z,]} >
<sphereGeometry args={[0.3, 15, 15]} />
<meshStandardMaterial color="red" />
</mesh>
<mesh position={[pair.points[2].x, pair.points[2].y, pair.points[2].z,]} >
<sphereGeometry args={[0.3, 15, 15]} /> <sphereGeometry args={[0.3, 15, 15]} />
<meshStandardMaterial color="red" /> <meshStandardMaterial color="red" />
</mesh> </mesh>
))}
</group> </group>
))} ))}
<group ref={groupRef} visible={false} name="Meshes">
<mesh rotation-x={CONSTANTS.planeConfig.rotation} position={CONSTANTS.planeConfig.position3D} name="Plane" receiveShadow>
<planeGeometry args={[300, 300]} />
<meshBasicMaterial color={CONSTANTS.planeConfig.color} />
</mesh>
</group>
</> </>
); );
}; };

31
app/src/modules/builder/agv/navMeshCreator.tsx Normal file
View File

@ -0,0 +1,31 @@
import { useRef } from "react";
import { useNavMesh } from "../../../store/store";
import PolygonGenerator from "./polygonGenerator";
import NavMeshDetails from "./navMeshDetails";
import * as CONSTANTS from "../../../types/world/worldConstants";
import * as Types from "../../../types/world/worldTypes";
type NavMeshCreatorProps = {
lines: Types.RefLines
};
function NavMeshCreator({ lines }: NavMeshCreatorProps) {
let groupRef = useRef() as Types.RefGroup;
const { setNavMesh } = useNavMesh();
return (
<>
<PolygonGenerator groupRef={groupRef} lines={lines} />
<NavMeshDetails lines={lines} setNavMesh={setNavMesh} groupRef={groupRef} />
<group ref={groupRef} visible={false} name="Meshes">
<mesh rotation-x={CONSTANTS.planeConfig.rotation} position={CONSTANTS.planeConfig.position3D} name="Plane" receiveShadow>
<planeGeometry args={[300, 300]} />
<meshBasicMaterial color={CONSTANTS.planeConfig.color} />
</mesh>
</group>
</>
)
}
export default NavMeshCreator

248
app/src/modules/builder/agv/pathNavigator.tsx
View File

@ -3,12 +3,11 @@ import * as THREE from "three";
import { useFrame, useThree } from "@react-three/fiber"; import { useFrame, useThree } from "@react-three/fiber";
import { NavMeshQuery } from "@recast-navigation/core"; import { NavMeshQuery } from "@recast-navigation/core";
import { Line } from "@react-three/drei"; import { Line } from "@react-three/drei";
import { useActiveTool } from "../../../store/store";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
interface PathNavigatorProps { interface PathNavigatorProps {
navMesh: any; navMesh: any;
selectedPoints: any; pathPoints: any;
id: string; id: string;
speed: number; speed: number;
bufferTime: number; bufferTime: number;
@ -17,102 +16,131 @@ interface PathNavigatorProps {
export default function PathNavigator({ export default function PathNavigator({
navMesh, navMesh,
selectedPoints, pathPoints,
id, id,
speed, speed,
bufferTime, bufferTime,
hitCount, hitCount
}: PathNavigatorProps) { }: PathNavigatorProps) {
const [path, setPath] = useState<[number, number, number][]>([]); const [path, setPath] = useState<[number, number, number][]>([]);
const progressRef = useRef(0); const [currentPhase, setCurrentPhase] = useState<'initial' | 'loop'>('initial');
const [toPickupPath, setToPickupPath] = useState<[number, number, number][]>([]);
const [pickupDropPath, setPickupDropPath] = useState<[number, number, number][]>([]);
const [dropPickupPath, setDropPickupPath] = useState<[number, number, number][]>([]);
const [initialPosition, setInitialPosition] = useState<THREE.Vector3 | null>(null);
const [initialRotation, setInitialRotation] = useState<THREE.Euler | null>(null);
const distancesRef = useRef<number[]>([]); const distancesRef = useRef<number[]>([]);
const totalDistanceRef = useRef(0); const totalDistanceRef = useRef(0);
const currentSegmentIndex = useRef(0); const progressRef = useRef(0);
const [stop, setStop] = useState<boolean>(true); const isWaiting = useRef(false);
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const { scene } = useThree(); const { scene } = useThree();
const { isPlaying, setIsPlaying } = usePlayButtonStore(); const { isPlaying } = usePlayButtonStore();
const [startPoint, setStartPoint] = useState(new THREE.Vector3());
const isWaiting = useRef<boolean>(false); // Flag to track waiting state
const delayTime = bufferTime;
const movingForward = useRef<boolean>(true); // Tracks whether the object is moving forward
// Compute distances and total distance when the path changes
useEffect(() => { useEffect(() => {
if (!scene || !id || path.length < 2) return; const object = scene.getObjectByProperty("uuid", id);
if (object) {
let totalDistance = 0; setInitialPosition(object.position.clone());
const distances: number[] = []; setInitialRotation(object.rotation.clone());
for (let i = 0; i < path.length - 1; i++) {
const start = new THREE.Vector3(...path[i]);
const end = new THREE.Vector3(...path[i + 1]);
const segmentDistance = start.distanceTo(end);
distances.push(segmentDistance);
totalDistance += segmentDistance;
} }
distancesRef.current = distances; }, [scene, id]);
totalDistanceRef.current = totalDistance;
progressRef.current = 0;
}, [path]);
// Compute the path using NavMeshQuery
useEffect(() => {
if (!navMesh || selectedPoints.length === 0) return;
const allPoints = selectedPoints.flat();
const computedPath: [number, number, number][] = [];
for (let i = 0; i < allPoints.length - 1; i++) {
const start = allPoints[i];
setStartPoint(
new THREE.Vector3(allPoints[0].x, allPoints[0].y, allPoints[0].z)
);
const end = allPoints[i + 1];
const computePath = (start: any, end: any) => {
try { try {
const navMeshQuery = new NavMeshQuery(navMesh); const navMeshQuery = new NavMeshQuery(navMesh);
const { path: segmentPath } = navMeshQuery.computePath(start, end); const { path: segmentPath } = navMeshQuery.computePath(start, end);
return segmentPath?.map(({ x, y, z }) => [x, y + 0.1, z] as [number, number, number]) || [];
} catch {
return [];
}
};
if (!segmentPath || segmentPath.length === 0) { const resetState = () => {
continue; if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
timeoutRef.current = null;
} }
computedPath.push( setPath([]);
...segmentPath.map(({ x, y, z }): [number, number, number] => [ setCurrentPhase('initial');
x, setPickupDropPath([]);
y + 0.1, setDropPickupPath([]);
z, distancesRef.current = [];
]) totalDistanceRef.current = 0;
); progressRef.current = 0;
} catch (error) {} isWaiting.current = false;
if (initialPosition && initialRotation) {
const object = scene.getObjectByProperty("uuid", id);
if (object) {
object.position.copy(initialPosition);
object.rotation.copy(initialRotation);
}
}
};
useEffect(() => {
if (!isPlaying) {
resetState();
} }
if (computedPath.length > 0) { if (!navMesh || pathPoints.length < 2) return;
setPath(computedPath);
currentSegmentIndex.current = 0; const [pickup, drop] = pathPoints.slice(-2);
const object = scene.getObjectByProperty("uuid", id);
if (!object) return;
const currentPosition = { x: object.position.x, y: object.position.y, z: object.position.z };
const toPickupPath = computePath(currentPosition, pickup);
const pickupToDropPath = computePath(pickup, drop);
const dropToPickupPath = computePath(drop, pickup);
if (toPickupPath.length && pickupToDropPath.length && dropToPickupPath.length) {
setPickupDropPath(pickupToDropPath);
setDropPickupPath(dropToPickupPath);
setToPickupPath(toPickupPath);
setPath(toPickupPath);
setCurrentPhase('initial');
} }
}, [selectedPoints, navMesh]); }, [navMesh, pathPoints, hitCount, isPlaying]);
useEffect(() => {
if (path.length < 2) return;
let total = 0;
const segmentDistances = path.slice(0, -1).map((point, i) => {
const dist = new THREE.Vector3(...point).distanceTo(new THREE.Vector3(...path[i + 1]));
total += dist;
return dist;
});
distancesRef.current = segmentDistances;
totalDistanceRef.current = total;
progressRef.current = 0;
isWaiting.current = false;
}, [path]);
useFrame((_, delta) => { useFrame((_, delta) => {
if (!scene || !id || path.length < 2) return; if (!isPlaying || path.length < 2 || !scene || !id) return;
// Find the object in the scene by its UUID const object = scene.getObjectByProperty("uuid", id);
const findObject = scene.getObjectByProperty("uuid", id); if (!object) return;
if (!findObject) return;
if (isPlaying) { const speedFactor = speed;
const fast = speed; progressRef.current += delta * speedFactor;
progressRef.current += delta * fast;
let coveredDistance = progressRef.current; let covered = progressRef.current;
let accumulatedDistance = 0; let accumulated = 0;
let index = 0; let index = 0;
// Determine the current segment of the path
while ( while (
index < distancesRef.current.length && index < distancesRef.current.length &&
coveredDistance > accumulatedDistance + distancesRef.current[index] covered > accumulated + distancesRef.current[index]
) { ) {
accumulatedDistance += distancesRef.current[index]; accumulated += distancesRef.current[index];
index++; index++;
} }
@ -120,62 +148,62 @@ export default function PathNavigator({
progressRef.current = totalDistanceRef.current; progressRef.current = totalDistanceRef.current;
if (!isWaiting.current) { if (!isWaiting.current) {
isWaiting.current = true; // Set waiting flag isWaiting.current = true;
if (movingForward.current) { timeoutRef.current = setTimeout(() => {
// Moving forward: reached the end, wait for `delay` if (currentPhase === 'initial') {
// console.log( setPath(pickupDropPath);
// "Reached end position. Waiting for delay:", setCurrentPhase('loop');
// delayTime, } else {
// "seconds" setPath(prevPath =>
// ); prevPath === pickupDropPath ? dropPickupPath : pickupDropPath
setTimeout(() => { );
// After delay, reverse direction
movingForward.current = false;
progressRef.current = 0; // Reset progress
path.reverse(); // Reverse the path
distancesRef.current.reverse();
isWaiting.current = false; // Reset waiting flag
}, delayTime * 1000); // Wait for `delay` seconds
} }
progressRef.current = 0;
isWaiting.current = false;
}, bufferTime * 1000);
} }
return; return;
} }
// Interpolate position within the current segment
const start = new THREE.Vector3(...path[index]); const start = new THREE.Vector3(...path[index]);
const end = new THREE.Vector3(...path[index + 1]); const end = new THREE.Vector3(...path[index + 1]);
const segmentDistance = distancesRef.current[index]; const dist = distancesRef.current[index];
const t = THREE.MathUtils.clamp((covered - accumulated) / dist, 0, 1);
const t = Math.min(
(coveredDistance - accumulatedDistance) / segmentDistance,
1
); // Clamp t to avoid overshooting
const position = start.clone().lerp(end, t); const position = start.clone().lerp(end, t);
findObject.position.copy(position);
// Rotate the object to face the direction of movement object.position.copy(position);
const direction = new THREE.Vector3().subVectors(end, start).normalize(); const direction = new THREE.Vector3().subVectors(end, start).normalize();
const targetYRotation = Math.atan2(direction.x, direction.z); const targetRotationY = Math.atan2(direction.x, direction.z);
findObject.rotation.y += (targetYRotation - findObject.rotation.y) * 0.1;
} else { let angleDifference = targetRotationY - object.rotation.y;
findObject.position.copy(startPoint); angleDifference = ((angleDifference + Math.PI) % (Math.PI * 2)) - Math.PI;
} object.rotation.y += angleDifference * 0.1;
}); });
useEffect(() => {
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
};
}, []);
return ( return (
<> <group name="path-navigator-lines" visible={!isPlaying} >
{path.length > 0 && ( {toPickupPath.length > 0 && (
<> <Line points={toPickupPath} color="blue" lineWidth={3} dashed dashSize={0.75} dashScale={2} />
<Line points={path} color="blue" lineWidth={3} />
{selectedPoints.map((val: any, i: any) => (
<mesh position={[val[0], val[1] + 1, val[2]]} key={i}>
<sphereGeometry args={[50, 5, 5]} />
<meshBasicMaterial color={"red"} />
</mesh>
))}
</>
)} )}
</>
{pickupDropPath.length > 0 && (
<Line points={pickupDropPath} color="red" lineWidth={3} />
)}
{dropPickupPath.length > 0 && (
<Line points={dropPickupPath} color="red" lineWidth={3} />
)}
</group>
); );
} }

2
app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts
View File

@ -215,7 +215,7 @@ function processEventData(item: Types.EventData, setSimulationStates: any) {
data as Types.ConveyorEventsSchema data as Types.ConveyorEventsSchema
]); ]);
} else { } else if (item.eventData?.type === 'Vehicle') {
const data: any = item.eventData; const data: any = item.eventData;
data.modeluuid = item.modeluuid; data.modeluuid = item.modeluuid;

4
app/src/modules/scene/world/world.tsx
View File

@ -53,8 +53,8 @@ import { findEnvironment } from "../../../services/factoryBuilder/environment/fi
import Layer2DVisibility from "../../builder/geomentries/layers/layer2DVisibility"; import Layer2DVisibility from "../../builder/geomentries/layers/layer2DVisibility";
import DrieHtmlTemp from "../mqttTemp/drieHtmlTemp"; import DrieHtmlTemp from "../mqttTemp/drieHtmlTemp";
import ZoneGroup from "../../builder/groups/zoneGroup"; import ZoneGroup from "../../builder/groups/zoneGroup";
import Agv from "../../builder/agv/agv";
import useModuleStore from "../../../store/useModuleStore"; import useModuleStore from "../../../store/useModuleStore";
import NavMeshCreator from "../../builder/agv/navMeshCreator";
export default function World() { export default function World() {
const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements. const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
@ -368,7 +368,7 @@ export default function World() {
{/* <DrieHtmlTemp itemsGroup={itemsGroup} /> */} {/* <DrieHtmlTemp itemsGroup={itemsGroup} /> */}
{activeModule === "simulation" && <Agv lines={lines} />} <NavMeshCreator lines={lines} />
</> </>
); );

53
app/src/modules/simulation/path/pathConnector.tsx
View File

@ -3,9 +3,10 @@ import React, { useEffect, useState } from 'react';
import * as THREE from 'three'; import * as THREE from 'three';
import * as Types from '../../../types/world/worldTypes'; import * as Types from '../../../types/world/worldTypes';
import { QuadraticBezierLine } from '@react-three/drei'; import { QuadraticBezierLine } from '@react-three/drei';
import { useIsConnecting, useSimulationStates } from '../../../store/store'; import { useIsConnecting, useSimulationStates, useSocketStore } from '../../../store/store';
import useModuleStore from '../../../store/useModuleStore'; import useModuleStore from '../../../store/useModuleStore';
import { usePlayButtonStore } from '../../../store/usePlayButtonStore'; import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
import { setEventApi } from '../../../services/factoryBuilder/assest/floorAsset/setEventsApt';
function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject<THREE.Group> }) { function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject<THREE.Group> }) {
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
@ -13,6 +14,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
const { setIsConnecting } = useIsConnecting(); const { setIsConnecting } = useIsConnecting();
const { simulationStates, setSimulationStates } = useSimulationStates(); const { simulationStates, setSimulationStates } = useSimulationStates();
const { isPlaying } = usePlayButtonStore(); const { isPlaying } = usePlayButtonStore();
const { socket } = useSocketStore();
const [firstSelected, setFirstSelected] = useState<{ const [firstSelected, setFirstSelected] = useState<{
pathUUID: string; pathUUID: string;
@ -170,8 +172,57 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
}); });
setSimulationStates(updatedPaths); setSimulationStates(updatedPaths);
const updatedPathDetails = updatedPaths.filter(path =>
path.modeluuid === fromPathUUID || path.modeluuid === toPathUUID
);
updateBackend(updatedPathDetails);
}; };
const updateBackend = async (updatedPaths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema)[]) => {
if (updatedPaths.length === 0) return;
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "";
updatedPaths.forEach(async (updatedPath) => {
if (updatedPath.type === 'Conveyor') {
// await setEventApi(
// organization,
// updatedPath.modeluuid,
// { type: "Conveyor", points: updatedPath.points, speed: updatedPath.speed }
// );
const data = {
organization: organization,
modeluuid: updatedPath.modeluuid,
eventData: { type: "Conveyor", points: updatedPath.points, speed: updatedPath.speed }
}
socket.emit('v2:model-asset:updateEventData', data);
} else if (updatedPath.type === 'Vehicle') {
// await setEventApi(
// organization,
// updatedPath.modeluuid,
// { type: "Vehicle", points: updatedPath.points }
// );
const data = {
organization: organization,
modeluuid: updatedPath.modeluuid,
eventData: { type: "Vehicle", points: updatedPath.points }
}
socket.emit('v2:model-asset:updateEventData', data);
}
})
}
const handleAddConnection = (fromPathUUID: string, fromUUID: string, toPathUUID: string, toUUID: string) => { const handleAddConnection = (fromPathUUID: string, fromUUID: string, toPathUUID: string, toUUID: string) => {
updatePathConnections(fromPathUUID, fromUUID, toPathUUID, toUUID); updatePathConnections(fromPathUUID, fromUUID, toPathUUID, toUUID);
setFirstSelected(null); setFirstSelected(null);

13
app/src/modules/simulation/path/pathCreation.tsx
View File

@ -93,10 +93,21 @@ function PathCreation({
: point : point
), ),
}; };
} } else {
return path; return path;
}
}) as Types.ConveyorEventsSchema[]; }) as Types.ConveyorEventsSchema[];
const updatedPath = updatedPaths.find(
(path) =>
path.type === "Conveyor" &&
path.points.some(
(point) => point.uuid === selectedActionSphere.points.uuid
)
);
// console.log("Updated Path:", updatedPath);
setSimulationStates(updatedPaths); setSimulationStates(updatedPaths);
}; };

2
app/src/modules/simulation/simulation.tsx
View File

@ -42,7 +42,7 @@ function Simulation() {
<PathCreation pathsGroupRef={pathsGroupRef} /> <PathCreation pathsGroupRef={pathsGroupRef} />
<PathConnector pathsGroupRef={pathsGroupRef} /> <PathConnector pathsGroupRef={pathsGroupRef} />
<ProcessContainer /> <ProcessContainer />
{/* <Agv /> */} <Agv />
</> </>
)} )}
</> </>

5
app/src/store/store.ts
View File

@ -359,6 +359,11 @@ export const useSimulationStates = create<SimulationPathsStore>((set) => ({
})), })),
})) }))
export const useNavMesh = create<any>((set: any) => ({
navMesh: null,
setNavMesh: (x: any) => set({ navMesh: x }),
}));
export const useIsConnecting = create<any>((set: any) => ({ export const useIsConnecting = create<any>((set: any) => ({
isConnecting: false, isConnecting: false,
setIsConnecting: (x: any) => set({ isConnecting: x }), setIsConnecting: (x: any) => set({ isConnecting: x }),