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

simulation-animation #55

Merged
Vishnu merged 3 commits from simulation-animation into main 2025-04-10 12:25:01 +00:00
Conversation 0 Commits 3 Files Changed 23 +1609 -1169
15 changed files with 1609 additions and 1169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e48195db98 - Show all commits

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

@@ -1,68 +1,107 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Line } from "@react-three/drei"; import { Line } from "@react-three/drei";
import { useNavMesh, useSimulationStates } from "../../../store/store"; import {
useNavMesh,
usePlayAgv,
useSimulationStates,
} from "../../../store/store";
import PathNavigator from "./pathNavigator"; import PathNavigator from "./pathNavigator";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
type PathPoints = { type PathPoints = {
modelUuid: string; modelUuid: string;
modelSpeed: number; modelSpeed: number;
bufferTime: number; bufferTime: number;
points: { x: number; y: number; z: number }[]; points: { x: number; y: number; z: number }[];
hitCount: number; hitCount: number;
}; };
interface ProcessContainerProps {
processes: any[];
agvRef: any;
}
const Agv = () => { const Agv: React.FC<ProcessContainerProps> = ({ processes, agvRef }) => {
const [pathPoints, setPathPoints] = useState<PathPoints[]>([]); const [pathPoints, setPathPoints] = useState<PathPoints[]>([]);
const { simulationStates } = useSimulationStates(); const { simulationStates } = useSimulationStates();
const { navMesh } = useNavMesh(); const { navMesh } = useNavMesh();
const { isPlaying } = usePlayButtonStore(); const { isPlaying } = usePlayButtonStore();
const { PlayAgv, setPlayAgv } = usePlayAgv();
useEffect(() => { useEffect(() => {
if (simulationStates.length > 0) { console.log("agvRef: ", agvRef);
}, [agvRef]);
const agvModels = simulationStates.filter((val) => val.modelName === "agv" && val.type === "Vehicle"); useEffect(() => {
if (simulationStates.length > 0) {
const agvModels = simulationStates.filter(
(val) => val.modelName === "agv" && val.type === "Vehicle"
);
const newPathPoints = agvModels.filter((model: any) => model.points && model.points.actions && typeof model.points.actions.start === "object" && typeof model.points.actions.end === "object" && "x" in model.points.actions.start && "y" in model.points.actions.start && "x" in model.points.actions.end && "y" in model.points.actions.end) const newPathPoints = agvModels
.map((model: any) => ({ .filter(
modelUuid: model.modeluuid, (model: any) =>
modelSpeed: model.points.speed, model.points &&
bufferTime: model.points.actions.buffer, model.points.actions &&
hitCount: model.points.actions.hitCount, typeof model.points.actions.start === "object" &&
points: [ typeof model.points.actions.end === "object" &&
{ x: model.position[0], y: model.position[1], z: model.position[2] }, "x" in model.points.actions.start &&
{ x: model.points.actions.start.x, y: 0, z: model.points.actions.start.y }, "y" in model.points.actions.start &&
{ x: model.points.actions.end.x, y: 0, z: model.points.actions.end.y }, "x" in model.points.actions.end &&
], "y" in model.points.actions.end
})); )
.map((model: any) => ({
modelUuid: model.modeluuid,
modelSpeed: model.points.speed,
bufferTime: model.points.actions.buffer,
hitCount: model.points.actions.hitCount,
points: [
{
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.end.x,
y: 0,
z: model.points.actions.end.y,
},
],
}));
setPathPoints(newPathPoints); setPathPoints(newPathPoints);
} }
}, [simulationStates]); }, [simulationStates]);
return ( return (
<> <>
{pathPoints.map((pair, i) => ( {pathPoints.map((pair, i) => (
<group key={i} visible={!isPlaying}> <group key={i} visible={!isPlaying}>
<PathNavigator <PathNavigator
navMesh={navMesh} navMesh={navMesh}
pathPoints={pair.points} pathPoints={pair.points}
id={pair.modelUuid} id={pair.modelUuid}
speed={pair.modelSpeed} speed={pair.modelSpeed}
bufferTime={pair.bufferTime} bufferTime={pair.bufferTime}
hitCount={pair.hitCount} hitCount={pair.hitCount}
/> processes={processes}
agvRef={agvRef}
/>
{pair.points.slice(1).map((point, idx) => ( {pair.points.slice(1).map((point, idx) => (
<mesh position={[point.x, point.y, point.z]} key={idx}> <mesh position={[point.x, point.y, point.z]} key={idx}>
<sphereGeometry args={[0.3, 15, 15]} /> <sphereGeometry args={[0.3, 15, 15]} />
<meshStandardMaterial color="red" /> <meshStandardMaterial color="red" />
</mesh> </mesh>
))} ))}
</group> </group>
))} ))}
</> </>
); );
}; };
export default Agv; export default Agv;

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

@@ -4,206 +4,368 @@ 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 { usePlayButtonStore } from "../../../store/usePlayButtonStore"; import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { usePlayAgv } from "../../../store/store";
interface PathNavigatorProps { interface PathNavigatorProps {
navMesh: any; navMesh: any;
pathPoints: any; pathPoints: any;
id: string; id: string;
speed: number; speed: number;
bufferTime: number; bufferTime: number;
hitCount: number; hitCount: number;
processes: any[];
agvRef: any;
} }
interface AGVData {
processId: string;
vehicleId: string;
hitCount: number;
totalHits: number;
}
type Phase = "initial" | "toDrop" | "toPickup";
export default function PathNavigator({ export default function PathNavigator({
navMesh, navMesh,
pathPoints, pathPoints,
id, id,
speed, speed,
bufferTime, bufferTime,
hitCount hitCount,
processes,
agvRef,
}: PathNavigatorProps) { }: PathNavigatorProps) {
const [path, setPath] = useState<[number, number, number][]>([]); const [currentPhase, setCurrentPhase] = useState<Phase>("initial");
const [currentPhase, setCurrentPhase] = useState<'initial' | 'loop'>('initial'); // console.log('agvRef: ', agvRef);
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 [path, setPath] = useState<[number, number, number][]>([]);
const totalDistanceRef = useRef(0);
const progressRef = useRef(0);
const isWaiting = useRef(false);
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const { scene } = useThree(); // const [currentPhase, setCurrentPhase] = useState<"initial" | "loop">(
const { isPlaying } = usePlayButtonStore(); // "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
);
useEffect(() => { const distancesRef = useRef<number[]>([]);
const object = scene.getObjectByProperty("uuid", id); const totalDistanceRef = useRef(0);
if (object) { const progressRef = useRef(0);
setInitialPosition(object.position.clone()); const isWaiting = useRef(false);
setInitialRotation(object.rotation.clone()); const timeoutRef = useRef<NodeJS.Timeout | null>(null);
} const hasStarted = useRef(false);
}, [scene, id]);
const computePath = (start: any, end: any) => { const { scene } = useThree();
try { const { isPlaying } = usePlayButtonStore();
const navMeshQuery = new NavMeshQuery(navMesh); const { PlayAgv, setPlayAgv } = usePlayAgv();
const { path: segmentPath } = navMeshQuery.computePath(start, end);
return segmentPath?.map(({ x, y, z }) => [x, y + 0.1, z] as [number, number, number]) || [];
} catch {
return [];
}
};
const resetState = () => { useEffect(() => {
if (timeoutRef.current) { const object = scene.getObjectByProperty("uuid", id);
clearTimeout(timeoutRef.current); if (object) {
timeoutRef.current = null; setInitialPosition(object.position.clone());
} setInitialRotation(object.rotation.clone());
}
}, [scene, id]);
setPath([]); const computePath = (start: any, end: any) => {
setCurrentPhase('initial'); try {
setPickupDropPath([]); const navMeshQuery = new NavMeshQuery(navMesh);
setDropPickupPath([]); const { path: segmentPath } = navMeshQuery.computePath(start, end);
distancesRef.current = []; return (
totalDistanceRef.current = 0; segmentPath?.map(
progressRef.current = 0; ({ x, y, z }) => [x, y + 0.1, z] as [number, number, number]
isWaiting.current = false; ) || []
);
} catch {
return [];
}
};
if (initialPosition && initialRotation) { const resetState = () => {
const object = scene.getObjectByProperty("uuid", id); if (timeoutRef.current) {
if (object) { clearTimeout(timeoutRef.current);
object.position.copy(initialPosition); timeoutRef.current = null;
object.rotation.copy(initialRotation); }
}
}
};
useEffect(() => { setPath([]);
if (!isPlaying) { setCurrentPhase("initial");
resetState(); setPickupDropPath([]);
} setDropPickupPath([]);
distancesRef.current = [];
totalDistanceRef.current = 0;
progressRef.current = 0;
isWaiting.current = false;
if (!navMesh || pathPoints.length < 2) return; if (initialPosition && initialRotation) {
const object = scene.getObjectByProperty("uuid", id);
if (object) {
object.position.copy(initialPosition);
object.rotation.copy(initialRotation);
}
}
};
const [pickup, drop] = pathPoints.slice(-2); useEffect(() => {
const object = scene.getObjectByProperty("uuid", id); if (!isPlaying) {
if (!object) return; resetState();
}
const currentPosition = { x: object.position.x, y: object.position.y, z: object.position.z }; if (!navMesh || pathPoints.length < 2) return;
const toPickupPath = computePath(currentPosition, pickup); const [pickup, drop] = pathPoints.slice(-2);
const pickupToDropPath = computePath(pickup, drop); const object = scene.getObjectByProperty("uuid", id);
const dropToPickupPath = computePath(drop, pickup);
if (toPickupPath.length && pickupToDropPath.length && dropToPickupPath.length) { if (!object) return;
setPickupDropPath(pickupToDropPath);
setDropPickupPath(dropToPickupPath);
setToPickupPath(toPickupPath);
setPath(toPickupPath);
setCurrentPhase('initial');
}
}, [navMesh, pathPoints, hitCount, isPlaying]);
useEffect(() => { const currentPosition = {
if (path.length < 2) return; x: object.position.x,
y: object.position.y,
z: object.position.z,
};
let total = 0; const toPickupPath = computePath(currentPosition, pickup);
const segmentDistances = path.slice(0, -1).map((point, i) => { const pickupToDropPath = computePath(pickup, drop);
const dist = new THREE.Vector3(...point).distanceTo(new THREE.Vector3(...path[i + 1])); const dropToPickupPath = computePath(drop, pickup);
total += dist;
return dist;
});
distancesRef.current = segmentDistances; if (
totalDistanceRef.current = total; toPickupPath.length &&
progressRef.current = 0; pickupToDropPath.length &&
isWaiting.current = false; dropToPickupPath.length
}, [path]); ) {
setPickupDropPath(pickupToDropPath);
setDropPickupPath(dropToPickupPath);
setToPickupPath(toPickupPath);
setPath(toPickupPath);
setCurrentPhase("initial");
}
}, [navMesh, pathPoints, hitCount, isPlaying, PlayAgv]);
useFrame((_, delta) => { useEffect(() => {
if (!isPlaying || path.length < 2 || !scene || !id) return; if (path.length < 2) return;
const object = scene.getObjectByProperty("uuid", id); let total = 0;
if (!object) return; 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;
});
const speedFactor = speed; distancesRef.current = segmentDistances;
progressRef.current += delta * speedFactor; totalDistanceRef.current = total;
progressRef.current = 0;
isWaiting.current = false;
}, [path]);
let covered = progressRef.current; // Add these refs outside the useFrame if not already present:
let accumulated = 0; const startPointReached = useRef(false);
let index = 0;
while ( useFrame((_, delta) => {});
index < distancesRef.current.length &&
covered > accumulated + distancesRef.current[index]
) {
accumulated += distancesRef.current[index];
index++;
}
if (index >= distancesRef.current.length) { useFrame((_, delta) => {
progressRef.current = totalDistanceRef.current; const currentAgv = (agvRef.current || []).find(
(agv: AGVData) => agv.vehicleId === id
);
console.log("currentAgv: ", currentAgv?.isplaying);
if (!isWaiting.current) { if (!scene || !id || !isPlaying) return;
isWaiting.current = true;
timeoutRef.current = setTimeout(() => { const object = scene.getObjectByProperty("uuid", id);
if (currentPhase === 'initial') { if (!object) return;
setPath(pickupDropPath);
setCurrentPhase('loop');
} else {
setPath(prevPath =>
prevPath === pickupDropPath ? dropPickupPath : pickupDropPath
);
}
progressRef.current = 0; if (isPlaying && !hasStarted.current) {
isWaiting.current = false; hasStarted.current = false;
}, bufferTime * 1000); startPointReached.current = false;
} progressRef.current = 0;
return; isWaiting.current = false;
} if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
timeoutRef.current = null;
}
}
const start = new THREE.Vector3(...path[index]); const isAgvReady = () => {
const end = new THREE.Vector3(...path[index + 1]); if (!agvRef.current || agvRef.current.length === 0) return false;
const dist = distancesRef.current[index]; if (!currentAgv) return false;
const t = THREE.MathUtils.clamp((covered - accumulated) / dist, 0, 1); return hitCount === currentAgv.expectedHitCount;
const position = start.clone().lerp(end, t); };
object.position.copy(position); // Step 1: Snap to start point on first play
if (isPlaying && !hasStarted.current && toPickupPath.length > 0) {
const startPoint = new THREE.Vector3(...toPickupPath[0]);
object.position.copy(startPoint);
const direction = new THREE.Vector3().subVectors(end, start).normalize(); if (toPickupPath.length > 1) {
const targetRotationY = Math.atan2(direction.x, direction.z); const nextPoint = new THREE.Vector3(...toPickupPath[1]);
const direction = nextPoint.clone().sub(startPoint).normalize();
object.rotation.y = Math.atan2(direction.x, direction.z);
}
let angleDifference = targetRotationY - object.rotation.y; hasStarted.current = true;
angleDifference = ((angleDifference + Math.PI) % (Math.PI * 2)) - Math.PI; startPointReached.current = true;
object.rotation.y += angleDifference * 0.1; progressRef.current = 0;
});
useEffect(() => { return;
return () => { }
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
};
}, []);
return ( // Step 2: Wait at start point for AGV readiness (only if expected hit count is not met)
<group name="path-navigator-lines" visible={!isPlaying} > if (
{toPickupPath.length > 0 && ( isPlaying &&
<Line points={toPickupPath} color="blue" lineWidth={3} dashed dashSize={0.75} dashScale={2} /> startPointReached.current &&
)} path.length === 0 &&
currentAgv?.isplaying
) {
if (!isAgvReady()) {
return; // Prevent transitioning to the next phase if AGV is not ready
}
{pickupDropPath.length > 0 && ( setPath([...toPickupPath]); // Start path transition once the AGV is ready
<Line points={pickupDropPath} color="red" lineWidth={3} /> setCurrentPhase("toDrop");
)} progressRef.current = 0;
startPointReached.current = false;
{dropPickupPath.length > 0 && ( return;
<Line points={dropPickupPath} color="red" lineWidth={3} /> }
)}
</group> if (path.length < 2) return;
);
} progressRef.current += delta * speed;
let covered = progressRef.current;
let accumulated = 0;
let index = 0;
if (distancesRef.current.length !== path.length - 1) {
distancesRef.current = [];
totalDistanceRef.current = 0;
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 distance = start.distanceTo(end);
distancesRef.current.push(distance);
totalDistanceRef.current += distance;
}
}
while (
index < distancesRef.current.length &&
covered > accumulated + distancesRef.current[index]
) {
accumulated += distancesRef.current[index];
index++;
}
// AGV has completed its path
if (index >= distancesRef.current.length) {
progressRef.current = totalDistanceRef.current;
timeoutRef.current = setTimeout(() => {
if (!isAgvReady()) {
isWaiting.current = false;
return;
}
let nextPath = [];
let nextPhase = currentPhase;
if (currentPhase === "toDrop") {
nextPath = dropPickupPath;
nextPhase = "toPickup";
} else if (currentPhase === "toPickup") {
nextPath = pickupDropPath;
nextPhase = "toDrop";
} else {
nextPath = pickupDropPath;
nextPhase = "toDrop";
}
setPath([...nextPath]);
setCurrentPhase(nextPhase);
progressRef.current = 0;
isWaiting.current = false;
distancesRef.current = [];
// Decrease the expected count if AGV is ready and has completed its path
if (currentAgv) {
currentAgv.expectedCount = Math.max(0, currentAgv.expectedCount - 1); // Decrease but ensure it's not negative
console.log(
"Decreased expected count to: ",
currentAgv.expectedCount
);
}
if (agvRef.current) {
agvRef.current = agvRef.current.map((agv: AGVData) =>
agv.vehicleId === id ? { ...agv, hitCount: null } : agv
);
}
// 🔁 Reset and wait again after reaching start
if (currentPhase === "toPickup" && currentAgv) {
currentAgv.isplaying = false;
setPath([]);
startPointReached.current = true;
progressRef.current = 0;
}
}, bufferTime * 1000);
return;
}
// Step 4: Interpolate position and rotation
const start = new THREE.Vector3(...path[index]);
const end = new THREE.Vector3(...path[index + 1]);
const dist = distancesRef.current[index];
if (!dist || dist === 0) return;
const t = THREE.MathUtils.clamp((covered - accumulated) / dist, 0, 1);
object.position.copy(start.clone().lerp(end, t));
const direction = new THREE.Vector3().subVectors(end, start).normalize();
object.rotation.y = Math.atan2(direction.x, direction.z);
});
useEffect(() => {
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
};
}, []);
return (
<group name="path-navigator-lines" visible={!isPlaying}>
{toPickupPath.length > 0 && (
<Line
points={toPickupPath}
color="blue"
lineWidth={3}
dashed
dashSize={0.75}
dashScale={2}
/>
)}
{pickupDropPath.length > 0 && (
<Line points={pickupDropPath} color="red" lineWidth={3} />
)}
{dropPickupPath.length > 0 && (
<Line points={dropPickupPath} color="red" lineWidth={3} />
)}
</group>
);
}

3
app/src/modules/builder/geomentries/assets/addAssetModel.ts
View File

@@ -150,6 +150,7 @@ async function handleModelLoad(
const organization = email ? email.split("@")[1].split(".")[0] : ""; const organization = email ? email.split("@")[1].split(".")[0] : "";
getAssetEventType(selectedItem.id, organization).then(async (res) => { getAssetEventType(selectedItem.id, organization).then(async (res) => {
console.log('res: ', res);
if (res.type === "Conveyor") { if (res.type === "Conveyor") {
const pointUUIDs = res.points.map(() => THREE.MathUtils.generateUUID()); const pointUUIDs = res.points.map(() => THREE.MathUtils.generateUUID());
@@ -224,6 +225,7 @@ async function handleModelLoad(
eventData as Types.ConveyorEventsSchema eventData as Types.ConveyorEventsSchema
]); ]);
console.log('data: ', data);
socket.emit("v2:model-asset:add", data); socket.emit("v2:model-asset:add", data);
} else if (res.type === "Vehicle") { } else if (res.type === "Vehicle") {
@@ -324,6 +326,7 @@ async function handleModelLoad(
return updatedItems; return updatedItems;
}); });
console.log('data: ', data);
socket.emit("v2:model-asset:add", data); socket.emit("v2:model-asset:add", data);
} }

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

@@ -20,6 +20,7 @@ async function loadInitialFloorItems(
const organization = (email!.split("@")[1]).split(".")[0]; const organization = (email!.split("@")[1]).split(".")[0];
const items = await getFloorAssets(organization); const items = await getFloorAssets(organization);
console.log('items: ', items);
localStorage.setItem("FloorItems", JSON.stringify(items)); localStorage.setItem("FloorItems", JSON.stringify(items));
await initializeDB(); await initializeDB();

7
app/src/modules/simulation/process/mesh.tsx
View File

@@ -1,7 +0,0 @@
import React from "react";
const Mesh: React.FC = () => {
return <mesh></mesh>;
};
export default Mesh;

603
app/src/modules/simulation/process/processAnimator.tsx
View File

@@ -1,134 +1,45 @@
import React, { useRef, useState, useEffect, useMemo } from "react"; import React, { useRef, useEffect, useMemo } from "react";
import {
useAnimationPlaySpeed,
usePauseButtonStore,
usePlayButtonStore,
useResetButtonStore,
} from "../../../store/usePlayButtonStore";
import { GLTFLoader } from "three-stdlib";
import { useLoader, useFrame } from "@react-three/fiber"; import { useLoader, useFrame } from "@react-three/fiber";
import { GLTFLoader } from "three-stdlib";
import * as THREE from "three"; import * as THREE from "three";
import { GLTF } from "three-stdlib"; import { GLTF } from "three-stdlib";
import crate from "../../../assets/gltf-glb/crate_box.glb"; import crate from "../../../assets/gltf-glb/crate_box.glb";
import box from "../../../assets/gltf-glb/box.glb";
interface PointAction { import { useProcessAnimation } from "./useProcessAnimations";
uuid: string; import ProcessObject from "./processObject";
name: string; import { ProcessData } from "./types";
type: "Inherit" | "Spawn" | "Despawn" | "Delay" | "Swap"; import { useSimulationStates } from "../../../store/store";
objectType: string;
material: string; interface ProcessContainerProps {
delay: string | number; processes: ProcessData[];
spawnInterval: string | number; setProcesses: React.Dispatch<React.SetStateAction<any[]>>;
isUsed: boolean; agvRef: any;
} }
interface ProcessPoint { const ProcessAnimator: React.FC<ProcessContainerProps> = ({
uuid: string;
position: number[];
rotation: number[];
actions: PointAction[];
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
}
interface ProcessPath {
modeluuid: string;
modelName: string;
points: ProcessPoint[];
pathPosition: number[];
pathRotation: number[];
speed: number;
}
interface ProcessData {
id: string;
paths: ProcessPath[];
animationPath: { x: number; y: number; z: number }[];
pointActions: PointAction[][];
speed: number;
customMaterials?: Record<string, THREE.Material>;
renderAs?: "box" | "custom";
}
interface AnimationState {
currentIndex: number;
progress: number;
isAnimating: boolean;
speed: number;
isDelaying: boolean;
delayStartTime: number;
currentDelayDuration: number;
delayComplete: boolean;
currentPathIndex: number;
}
interface SpawnedObject {
ref: React.RefObject<THREE.Group | THREE.Mesh>;
state: AnimationState;
visible: boolean;
material: THREE.Material;
spawnTime: number;
currentMaterialType: string;
position: THREE.Vector3;
}
interface ProcessAnimationState {
spawnedObjects: { [objectId: string]: SpawnedObject };
nextSpawnTime: number;
objectIdCounter: number;
isProcessDelaying: boolean;
processDelayStartTime: number;
processDelayDuration: number;
}
const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
processes, processes,
setProcesses,
agvRef,
}) => { }) => {
const gltf = useLoader(GLTFLoader, crate) as GLTF; const gltf = useLoader(GLTFLoader, crate) as GLTF;
const { isPlaying, setIsPlaying } = usePlayButtonStore();
const { isPaused, setIsPaused } = usePauseButtonStore();
const { isReset, setReset } = useResetButtonStore();
const groupRef = useRef<THREE.Group>(null); const groupRef = useRef<THREE.Group>(null);
const debugRef = useRef<boolean>(false);
const clockRef = useRef<THREE.Clock>(new THREE.Clock());
const pauseTimeRef = useRef<number>(0);
const elapsedBeforePauseRef = useRef<number>(0);
const animationStatesRef = useRef<Record<string, ProcessAnimationState>>({});
const { speed, setSpeed } = useAnimationPlaySpeed();
const prevIsPlaying = useRef<boolean | null>(null);
const [internalResetFlag, setInternalResetFlag] = useState(false);
const [animationStates, setAnimationStates] = useState<
Record<string, ProcessAnimationState>
>({});
// Store the speed in a ref to access the latest value in animation frames const {
const speedRef = useRef<number>(speed); animationStates,
setAnimationStates,
clockRef,
elapsedBeforePauseRef,
speedRef,
debugRef,
findSpawnPoint,
createSpawnedObject,
handlePointActions,
hasNonInheritActions,
getPointDataForAnimationIndex,
processes: processedProcesses,
checkAndCountTriggers,
} = useProcessAnimation(processes, setProcesses, agvRef);
// Update the ref when speed changes
useEffect(() => {
speedRef.current = speed;
}, [speed]);
useEffect(() => {
if (prevIsPlaying.current !== null) {
setAnimationStates({});
}
// Update ref to current isPlaying after effect
prevIsPlaying.current = isPlaying;
// setAnimationStates({});
}, [isPlaying]);
// Sync ref with state
useEffect(() => {
animationStatesRef.current = animationStates;
}, [animationStates]);
// Base materials
const baseMaterials = useMemo( const baseMaterials = useMemo(
() => ({ () => ({
Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }), Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
@@ -138,365 +49,22 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
[] []
); );
// Replace your reset effect with this: // In processAnimator.tsx - only the relevant spawn logic part that needs fixes
useEffect(() => {
if (isReset) {
// 1. Mark that we're doing an internal reset
setInternalResetFlag(true);
// 2. Pause the animation first
setIsPlaying(false);
setIsPaused(false);
// 3. Reset all animation states
setAnimationStates({});
animationStatesRef.current = {};
// 4. Reset timing references
clockRef.current = new THREE.Clock();
elapsedBeforePauseRef.current = 0;
pauseTimeRef.current = 0;
// 5. Clear the external reset flag
setReset(false);
// 6. After state updates are complete, restart
setTimeout(() => {
setInternalResetFlag(false);
setIsPlaying(true);
}, 0);
}
}, [isReset, setReset, setIsPlaying, setIsPaused]);
// Handle pause state changes
useEffect(() => {
if (isPaused) {
pauseTimeRef.current = clockRef.current.getElapsedTime();
} else if (pauseTimeRef.current > 0) {
const pausedDuration =
clockRef.current.getElapsedTime() - pauseTimeRef.current;
elapsedBeforePauseRef.current += pausedDuration;
}
}, [isPaused]);
// Initialize animation states when processes or play state changes
useEffect(() => {
if (isPlaying && !internalResetFlag) {
const newStates: Record<string, ProcessAnimationState> = {};
processes.forEach((process) => {
newStates[process.id] = {
spawnedObjects: {},
nextSpawnTime: 0,
objectIdCounter: 0,
isProcessDelaying: false,
processDelayStartTime: 0,
processDelayDuration: 0,
};
});
setAnimationStates(newStates);
animationStatesRef.current = newStates;
clockRef.current.start();
}
}, [isPlaying, processes, internalResetFlag]);
const findSpawnPoint = (process: ProcessData): ProcessPoint | null => {
for (const path of process.paths || []) {
for (const point of path.points || []) {
const spawnAction = point.actions?.find(
(a) => a.isUsed && a.type === "Spawn"
);
if (spawnAction) {
return point;
}
}
}
return null;
};
const findAnimationPathPoint = (
process: ProcessData,
spawnPoint: ProcessPoint
): THREE.Vector3 => {
if (process.animationPath && process.animationPath.length > 0) {
let pointIndex = 0;
for (const path of process.paths || []) {
for (let i = 0; i < (path.points?.length || 0); i++) {
const point = path.points?.[i];
if (point && point.uuid === spawnPoint.uuid) {
if (process.animationPath[pointIndex]) {
const p = process.animationPath[pointIndex];
return new THREE.Vector3(p.x, p.y, p.z);
}
}
pointIndex++;
}
}
}
return new THREE.Vector3(
spawnPoint.position[0],
spawnPoint.position[1],
spawnPoint.position[2]
);
};
const createSpawnedObject = (
process: ProcessData,
currentTime: number,
materialType: string,
spawnPoint: ProcessPoint
): SpawnedObject => {
const processMaterials = {
...baseMaterials,
...(process.customMaterials || {}),
};
const spawnPosition = findAnimationPathPoint(process, spawnPoint);
const material =
processMaterials[materialType as keyof typeof processMaterials] ||
baseMaterials.Default;
if (debugRef.current) {
console.log(`Creating object with material: ${materialType}`, material);
}
return {
ref: React.createRef(),
state: {
currentIndex: 0,
progress: 0,
isAnimating: true,
speed: process.speed || 1, // Process base speed (will be multiplied by global speed)
isDelaying: false,
delayStartTime: 0,
currentDelayDuration: 0,
delayComplete: false,
currentPathIndex: 0,
},
visible: true,
material: material,
currentMaterialType: materialType,
spawnTime: currentTime,
position: spawnPosition,
};
};
const handleMaterialSwap = (
processId: string,
objectId: string,
materialType: string
) => {
if (debugRef.current) {
console.log(`Attempting material swap to: ${materialType}`);
}
setAnimationStates((prev) => {
const processState = prev[processId];
if (!processState || !processState.spawnedObjects[objectId]) {
if (debugRef.current) console.log("Object not found for swap");
return prev;
}
const process = processes.find((p) => p.id === processId);
if (!process) {
if (debugRef.current) console.log("Process not found");
return prev;
}
const processMaterials = {
...baseMaterials,
...(process.customMaterials || {}),
};
const newMaterial =
processMaterials[materialType as keyof typeof processMaterials];
if (!newMaterial) {
if (debugRef.current) console.log(`Material ${materialType} not found`);
return prev;
}
if (debugRef.current) {
console.log(`Swapping material for ${objectId} to ${materialType}`);
}
return {
...prev,
[processId]: {
...processState,
spawnedObjects: {
...processState.spawnedObjects,
[objectId]: {
...processState.spawnedObjects[objectId],
material: newMaterial,
currentMaterialType: materialType,
},
},
},
};
});
};
const handlePointActions = (
processId: string,
objectId: string,
actions: PointAction[] = [],
currentTime: number
): boolean => {
let shouldStopAnimation = false;
actions.forEach((action) => {
if (!action.isUsed) return;
if (debugRef.current) {
console.log(`Processing action: ${action.type} for ${objectId}`);
}
switch (action.type) {
case "Delay":
setAnimationStates((prev) => {
const processState = prev[processId];
if (!processState || processState.isProcessDelaying) {
return prev;
}
const delayDuration =
typeof action.delay === "number"
? action.delay
: parseFloat(action.delay as string) || 0;
if (delayDuration > 0) {
return {
...prev,
[processId]: {
...processState,
isProcessDelaying: true,
processDelayStartTime: currentTime,
processDelayDuration: delayDuration,
spawnedObjects: {
...processState.spawnedObjects,
[objectId]: {
...processState.spawnedObjects[objectId],
state: {
...processState.spawnedObjects[objectId].state,
isAnimating: false,
isDelaying: true,
delayStartTime: currentTime,
currentDelayDuration: delayDuration,
delayComplete: false,
},
},
},
},
};
}
return prev;
});
shouldStopAnimation = true;
break;
case "Despawn":
setAnimationStates((prev) => {
const processState = prev[processId];
if (!processState) return prev;
const newSpawnedObjects = { ...processState.spawnedObjects };
delete newSpawnedObjects[objectId];
return {
...prev,
[processId]: {
...processState,
spawnedObjects: newSpawnedObjects,
},
};
});
shouldStopAnimation = true;
break;
case "Swap":
if (action.material) {
handleMaterialSwap(processId, objectId, action.material);
}
break;
default:
break;
}
});
return shouldStopAnimation;
};
const hasNonInheritActions = (actions: PointAction[] = []): boolean => {
return actions.some((action) => action.isUsed && action.type !== "Inherit");
};
const getPointDataForAnimationIndex = (
process: ProcessData,
index: number
): ProcessPoint | null => {
if (!process.paths) return null;
let cumulativePoints = 0;
for (const path of process.paths) {
const pointCount = path.points?.length || 0;
if (index < cumulativePoints + pointCount) {
const pointIndex = index - cumulativePoints;
return path.points?.[pointIndex] || null;
}
cumulativePoints += pointCount;
}
return null;
};
useFrame(() => { useFrame(() => {
if (!isPlaying || isPaused) return; // Spawn logic frame
const currentTime = const currentTime =
clockRef.current.getElapsedTime() - elapsedBeforePauseRef.current; clockRef.current.getElapsedTime() - elapsedBeforePauseRef.current;
setAnimationStates((prev) => { setAnimationStates((prev) => {
const newStates = { ...prev }; const newStates = { ...prev };
processes.forEach((process) => { processedProcesses.forEach((process) => {
const processState = newStates[process.id]; const processState = newStates[process.id];
if (!processState) return; if (!processState) return;
if (processState.isProcessDelaying) { if (processState.isProcessDelaying) {
// Apply global speed to delays (faster speed = shorter delays) // Existing delay handling logic...
const effectiveDelayTime =
processState.processDelayDuration / speedRef.current;
if (
currentTime - processState.processDelayStartTime >=
effectiveDelayTime
) {
newStates[process.id] = {
...processState,
isProcessDelaying: false,
spawnedObjects: Object.entries(
processState.spawnedObjects
).reduce(
(acc, [id, obj]) => ({
...acc,
[id]: {
...obj,
state: {
...obj.state,
isDelaying: false,
delayComplete: true,
isAnimating: true,
progress:
obj.state.progress === 0 ? 0.001 : obj.state.progress,
},
},
}),
{}
),
};
}
return; return;
} }
@@ -513,7 +81,14 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
? spawnAction.spawnInterval ? spawnAction.spawnInterval
: parseFloat(spawnAction.spawnInterval as string) || 0; : parseFloat(spawnAction.spawnInterval as string) || 0;
// Apply global speed to spawn intervals (faster speed = more frequent spawns) // Check if this is a zero interval spawn and we already spawned an object
if (
spawnInterval === 0 &&
processState.hasSpawnedZeroIntervalObject === true
) {
return; // Don't spawn more objects for zero interval
}
const effectiveSpawnInterval = spawnInterval / speedRef.current; const effectiveSpawnInterval = spawnInterval / speedRef.current;
if (currentTime >= processState.nextSpawnTime) { if (currentTime >= processState.nextSpawnTime) {
@@ -522,9 +97,11 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
process, process,
currentTime, currentTime,
spawnAction.material || "Default", spawnAction.material || "Default",
spawnPoint spawnPoint,
baseMaterials
); );
// Update state with the new object and flag for zero interval
newStates[process.id] = { newStates[process.id] = {
...processState, ...processState,
spawnedObjects: { spawnedObjects: {
@@ -533,6 +110,11 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
}, },
objectIdCounter: processState.objectIdCounter + 1, objectIdCounter: processState.objectIdCounter + 1,
nextSpawnTime: currentTime + effectiveSpawnInterval, nextSpawnTime: currentTime + effectiveSpawnInterval,
// Mark that we've spawned an object for zero interval case
hasSpawnedZeroIntervalObject:
spawnInterval === 0
? true
: processState.hasSpawnedZeroIntervalObject,
}; };
} }
}); });
@@ -542,20 +124,18 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
}); });
useFrame((_, delta) => { useFrame((_, delta) => {
if (!isPlaying || isPaused) return; // Animation logic frame
const currentTime = const currentTime =
clockRef.current.getElapsedTime() - elapsedBeforePauseRef.current; clockRef.current.getElapsedTime() - elapsedBeforePauseRef.current;
setAnimationStates((prev) => { setAnimationStates((prev) => {
const newStates = { ...prev }; const newStates = { ...prev };
processes.forEach((process) => { processedProcesses.forEach((process) => {
const processState = newStates[process.id]; const processState = newStates[process.id];
if (!processState) return; if (!processState) return;
if (processState.isProcessDelaying) { if (processState.isProcessDelaying) {
// Apply global speed to delays (faster speed = shorter delays)
const effectiveDelayTime = const effectiveDelayTime =
processState.processDelayDuration / speedRef.current; processState.processDelayDuration / speedRef.current;
@@ -617,7 +197,6 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
const stateRef = obj.state; const stateRef = obj.state;
if (stateRef.isDelaying) { if (stateRef.isDelaying) {
// Apply global speed to delays (faster speed = shorter delays)
const effectiveDelayTime = const effectiveDelayTime =
stateRef.currentDelayDuration / speedRef.current; stateRef.currentDelayDuration / speedRef.current;
@@ -654,18 +233,15 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
stateRef.currentIndex stateRef.currentIndex
); );
// Handle point actions when first arriving at point
if (stateRef.progress === 0 && currentPointData?.actions) { if (stateRef.progress === 0 && currentPointData?.actions) {
if (debugRef.current) {
console.log(
`At point ${stateRef.currentIndex} with actions:`,
currentPointData.actions
);
}
const shouldStop = handlePointActions( const shouldStop = handlePointActions(
process.id, process.id,
objectId, objectId,
currentPointData.actions, currentPointData.actions,
currentTime currentTime,
processedProcesses,
baseMaterials
); );
if (shouldStop) { if (shouldStop) {
updatedObjects[objectId] = { ...obj, state: { ...stateRef } }; updatedObjects[objectId] = { ...obj, state: { ...stateRef } };
@@ -691,8 +267,6 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
const nextPoint = path[nextPointIdx]; const nextPoint = path[nextPointIdx];
const distance = const distance =
path[stateRef.currentIndex].distanceTo(nextPoint); path[stateRef.currentIndex].distanceTo(nextPoint);
// Apply both process-specific speed and global speed multiplier
const effectiveSpeed = stateRef.speed * speedRef.current; const effectiveSpeed = stateRef.speed * speedRef.current;
const movement = effectiveSpeed * delta; const movement = effectiveSpeed * delta;
@@ -708,17 +282,19 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
stateRef.progress = 0; stateRef.progress = 0;
currentRef.position.copy(nextPoint); currentRef.position.copy(nextPoint);
// TRIGGER CHECK - When object arrives at new point
checkAndCountTriggers(
process.id,
objectId,
stateRef.currentIndex, // The new point index
processedProcesses,
currentTime
);
const newPointData = getPointDataForAnimationIndex( const newPointData = getPointDataForAnimationIndex(
process, process,
stateRef.currentIndex stateRef.currentIndex
); );
if (newPointData?.actions && debugRef.current) {
console.log(
`Reached new point with actions:`,
newPointData.actions
);
}
} else { } else {
currentRef.position.lerpVectors( currentRef.position.lerpVectors(
path[stateRef.currentIndex], path[stateRef.currentIndex],
@@ -742,56 +318,31 @@ const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
}); });
}); });
if (!processes || processes.length === 0) { if (!processedProcesses || processedProcesses.length === 0) {
return null; return null;
} }
return ( return (
<> <group ref={groupRef}>
{Object.entries(animationStates).flatMap(([processId, processState]) => {Object.entries(animationStates).flatMap(([processId, processState]) =>
Object.entries(processState.spawnedObjects) Object.entries(processState.spawnedObjects)
.filter(([_, obj]) => obj.visible) .filter(([_, obj]) => obj.visible)
.map(([objectId, obj]) => { .map(([objectId, obj]) => {
const process = processes.find((p) => p.id === processId); const process = processedProcesses.find((p) => p.id === processId);
const renderAs = process?.renderAs || "custom"; const renderAs = process?.renderAs || "custom";
if (renderAs === "box") { return (
return ( <ProcessObject
<mesh key={objectId}
key={objectId} objectId={objectId}
ref={obj.ref as React.RefObject<THREE.Mesh>} obj={obj}
material={obj.material} renderAs={renderAs}
position={obj.position} gltf={gltf}
> />
<boxGeometry args={[1, 1, 1]} /> );
</mesh>
);
}
if (gltf?.scene) {
// Clone the scene and apply the material to all meshes
const clonedScene = gltf.scene.clone();
clonedScene.traverse((child) => {
if (child instanceof THREE.Mesh) {
child.material = obj.material;
}
});
return (
<group
key={objectId}
ref={obj.ref as React.RefObject<THREE.Group>}
position={obj.position}
>
<primitive object={clonedScene} />
</group>
);
}
return null;
}) })
)} )}
</> </group>
); );
}; };

17
app/src/modules/simulation/process/processContainer.tsx
View File

@@ -2,15 +2,22 @@ import React, { useState } from "react";
import ProcessCreator from "./processCreator"; import ProcessCreator from "./processCreator";
import ProcessAnimator from "./processAnimator"; import ProcessAnimator from "./processAnimator";
const ProcessContainer: React.FC = () => { interface ProcessContainerProps {
const [processes, setProcesses] = useState<any[]>([]); processes: any[];
setProcesses: React.Dispatch<React.SetStateAction<any[]>>;
agvRef: any;
}
const ProcessContainer: React.FC<ProcessContainerProps> = ({
processes,
setProcesses,
agvRef
}) => {
console.log("processes: ", processes);
return ( return (
<> <>
<ProcessCreator onProcessesCreated={setProcesses} /> <ProcessCreator onProcessesCreated={setProcesses} />
{processes.length > 0 && <ProcessAnimator processes={processes} />} <ProcessAnimator processes={processes} setProcesses={setProcesses} agvRef={agvRef}/>
</> </>
); );
}; };

262
app/src/modules/simulation/process/processCreator.tsx
View File

@@ -24,16 +24,26 @@
// isUsed: boolean; // isUsed: boolean;
// } // }
// export interface PointTrigger {
// uuid: string;
// bufferTime: number;
// name: string;
// type: string;
// isUsed: boolean;
// }
// export interface PathPoint { // export interface PathPoint {
// uuid: string; // uuid: string;
// position: [number, number, number]; // position: [number, number, number];
// actions: PointAction[]; // actions: PointAction[];
// triggers: PointTrigger[];
// connections: { // connections: {
// targets: Array<{ modelUUID: string }>; // targets: Array<{ modelUUID: string }>;
// }; // };
// } // }
// export interface SimulationPath { // export interface SimulationPath {
// type: string;
// modeluuid: string; // modeluuid: string;
// points: PathPoint[]; // points: PathPoint[];
// pathPosition: [number, number, number]; // pathPosition: [number, number, number];
@@ -45,7 +55,9 @@
// paths: SimulationPath[]; // paths: SimulationPath[];
// animationPath: THREE.Vector3[]; // animationPath: THREE.Vector3[];
// pointActions: PointAction[][]; // pointActions: PointAction[][];
// pointTriggers: PointTrigger[][];
// speed: number; // speed: number;
// isplaying: boolean;
// } // }
// interface ProcessCreatorProps { // interface ProcessCreatorProps {
@@ -58,18 +70,33 @@
// ): SimulationPath { // ): SimulationPath {
// const { modeluuid } = path; // const { modeluuid } = path;
// // Simplified normalizeAction function that preserves exact original properties // // Normalized action handler
// const normalizeAction = (action: any): PointAction => { // const normalizeAction = (action: any): PointAction => {
// return { ...action }; // Return exact copy with no modifications // return { ...action }; // Return exact copy with no modifications
// }; // };
// // Normalized trigger handler
// const normalizeTrigger = (trigger: any): PointTrigger => {
// return { ...trigger }; // Return exact copy with no modifications
// };
// if (path.type === "Conveyor") { // if (path.type === "Conveyor") {
// return { // return {
// type: path.type,
// modeluuid, // modeluuid,
// points: path.points.map((point) => ({ // points: path.points.map((point) => ({
// uuid: point.uuid, // uuid: point.uuid,
// position: point.position, // position: point.position,
// actions: point.actions.map(normalizeAction), // Preserve exact actions // actions: Array.isArray(point.actions)
// ? point.actions.map(normalizeAction)
// : point.actions
// ? [normalizeAction(point.actions)]
// : [],
// triggers: Array.isArray(point.triggers)
// ? point.triggers.map(normalizeTrigger)
// : point.triggers
// ? [normalizeTrigger(point.triggers)]
// : [],
// connections: { // connections: {
// targets: point.connections.targets.map((target) => ({ // targets: point.connections.targets.map((target) => ({
// modelUUID: target.modelUUID, // modelUUID: target.modelUUID,
@@ -83,44 +110,44 @@
// : path.speed || 1, // : path.speed || 1,
// }; // };
// } else { // } else {
// // For vehicle paths, handle the case where triggers might not exist
// return { // return {
// type: path.type,
// modeluuid, // modeluuid,
// points: [ // points: [
// { // {
// uuid: path.point.uuid, // uuid: path.points.uuid,
// position: path.point.position, // position: path.points.position,
// actions: Array.isArray(path.point.actions) // actions: Array.isArray(path.points.actions)
// ? path.point.actions.map(normalizeAction) // ? path.points.actions.map(normalizeAction)
// : [normalizeAction(path.point.actions)], // : path.points.actions
// ? [normalizeAction(path.points.actions)]
// : [],
// // For vehicle paths, since triggers might not exist in the schema,
// // we always define default to an empty array
// triggers: [],
// connections: { // connections: {
// targets: path.point.connections.targets.map((target) => ({ // targets: path.points.connections.targets.map((target) => ({
// modelUUID: target.modelUUID, // modelUUID: target.modelUUID,
// })), // })),
// }, // },
// }, // },
// ], // ],
// pathPosition: path.position, // pathPosition: path.position,
// speed: path.point.speed || 1, // speed: path.points.speed || 1,
// }; // };
// } // }
// } // }
// // Custom shallow comparison for arrays
// const areArraysEqual = (a: any[], b: any[]) => {
// if (a.length !== b.length) return false;
// for (let i = 0; i < a.length; i++) {
// if (a[i] !== b[i]) return false;
// }
// return true;
// };
// // Helper function to create an empty process // // Helper function to create an empty process
// const createEmptyProcess = (): Process => ({ // const createEmptyProcess = (): Process => ({
// id: `process-${Math.random().toString(36).substring(2, 11)}`, // id: `process-${Math.random().toString(36).substring(2, 11)}`,
// paths: [], // paths: [],
// animationPath: [], // animationPath: [],
// pointActions: [], // pointActions: [],
// pointTriggers: [], // Added point triggers array
// speed: 1, // speed: 1,
// isplaying: false,
// }); // });
// // Enhanced connection checking function // // Enhanced connection checking function
@@ -156,12 +183,38 @@
// return connectsToLast && !connectsToFirst; // return connectsToLast && !connectsToFirst;
// } // }
// // Check if a point has a spawn action
// function hasSpawnAction(point: PathPoint): boolean {
// return point.actions.some((action) => action.type.toLowerCase() === "spawn");
// }
// // Ensure spawn point is always at the beginning of the path
// function ensureSpawnPointIsFirst(path: SimulationPath): SimulationPath {
// if (path.points.length !== 3) return path;
// // If the third point has spawn action and first doesn't, reverse the array
// if (hasSpawnAction(path.points[2]) && !hasSpawnAction(path.points[0])) {
// return {
// ...path,
// points: [...path.points].reverse(),
// };
// }
// return path;
// }
// // Updated path adjustment function // // Updated path adjustment function
// function adjustPathPointsOrder(paths: SimulationPath[]): SimulationPath[] { // function adjustPathPointsOrder(paths: SimulationPath[]): SimulationPath[] {
// if (paths.length < 2) return paths; // if (paths.length < 1) return paths;
// const adjustedPaths = [...paths]; // const adjustedPaths = [...paths];
// // First ensure all paths have spawn points at the beginning
// for (let i = 0; i < adjustedPaths.length; i++) {
// adjustedPaths[i] = ensureSpawnPointIsFirst(adjustedPaths[i]);
// }
// // Then handle connections between paths
// for (let i = 0; i < adjustedPaths.length - 1; i++) { // for (let i = 0; i < adjustedPaths.length - 1; i++) {
// const currentPath = adjustedPaths[i]; // const currentPath = adjustedPaths[i];
// const nextPath = adjustedPaths[i + 1]; // const nextPath = adjustedPaths[i + 1];
@@ -189,6 +242,7 @@
// const [processes, setProcesses] = useState<Process[]>([]); // const [processes, setProcesses] = useState<Process[]>([]);
// const hasSpawnAction = useCallback((path: SimulationPath): boolean => { // const hasSpawnAction = useCallback((path: SimulationPath): boolean => {
// if (path.type !== "Conveyor") return false;
// return path.points.some((point) => // return path.points.some((point) =>
// point.actions.some((action) => action.type.toLowerCase() === "spawn") // point.actions.some((action) => action.type.toLowerCase() === "spawn")
// ); // );
@@ -202,19 +256,23 @@
// const animationPath: THREE.Vector3[] = []; // const animationPath: THREE.Vector3[] = [];
// const pointActions: PointAction[][] = []; // const pointActions: PointAction[][] = [];
// const pointTriggers: PointTrigger[][] = []; // Added point triggers collection
// const processSpeed = paths[0]?.speed || 1; // const processSpeed = paths[0]?.speed || 1;
// for (const path of paths) { // for (const path of paths) {
// for (const point of path.points) { // for (const point of path.points) {
// const obj = scene.getObjectByProperty("uuid", point.uuid); // if (path.type === "Conveyor") {
// if (!obj) { // const obj = scene.getObjectByProperty("uuid", point.uuid);
// console.warn(`Object with UUID ${point.uuid} not found in scene`); // if (!obj) {
// continue; // console.warn(`Object with UUID ${point.uuid} not found in scene`);
// } // continue;
// }
// const position = obj.getWorldPosition(new THREE.Vector3()); // const position = obj.getWorldPosition(new THREE.Vector3());
// animationPath.push(position.clone()); // animationPath.push(position.clone());
// pointActions.push(point.actions); // pointActions.push(point.actions);
// pointTriggers.push(point.triggers); // Collect triggers for each point
// }
// } // }
// } // }
@@ -223,7 +281,9 @@
// paths, // paths,
// animationPath, // animationPath,
// pointActions, // pointActions,
// pointTriggers,
// speed: processSpeed, // speed: processSpeed,
// isplaying: false,
// }; // };
// }, // },
// [scene] // [scene]
@@ -326,21 +386,35 @@
// ); // );
// }, [simulationStates]); // }, [simulationStates]);
// // Enhanced dependency tracking that includes action and trigger types
// const pathsDependency = useMemo(() => { // const pathsDependency = useMemo(() => {
// if (!convertedPaths) return null; // if (!convertedPaths) return null;
// return convertedPaths.map((path) => ({ // return convertedPaths.map((path) => ({
// id: path.modeluuid, // id: path.modeluuid,
// hasSpawn: path.points.some((p: PathPoint) => // // Track all action types for each point
// p.actions.some((a: PointAction) => a.type.toLowerCase() === "spawn") // actionSignature: path.points
// ), // .map((point, index) =>
// point.actions.map((action) => `${index}-${action.type}`).join("|")
// )
// .join(","),
// // Track all trigger types for each point
// triggerSignature: path.points
// .map((point, index) =>
// point.triggers
// .map((trigger) => `${index}-${trigger.type}`)
// .join("|")
// )
// .join(","),
// connections: path.points // connections: path.points
// .flatMap((p: PathPoint) => // .flatMap((p: PathPoint) =>
// p.connections.targets.map((t: { modelUUID: string }) => t.modelUUID) // p.connections.targets.map((t: { modelUUID: string }) => t.modelUUID)
// ) // )
// .join(","), // .join(","),
// isplaying: false,
// })); // }));
// }, [convertedPaths]); // }, [convertedPaths]);
// // Force process recreation when paths change
// useEffect(() => { // useEffect(() => {
// if (!convertedPaths || convertedPaths.length === 0) { // if (!convertedPaths || convertedPaths.length === 0) {
// if (prevProcessesRef.current.length > 0) { // if (prevProcessesRef.current.length > 0) {
@@ -350,42 +424,16 @@
// return; // return;
// } // }
// if (areArraysEqual(prevPathsRef.current, convertedPaths)) { // // Always regenerate processes if the pathsDependency has changed
// return; // // This ensures action and trigger type changes will be detected
// }
// prevPathsRef.current = convertedPaths;
// const newProcesses = createProcessesFromPaths(convertedPaths); // const newProcesses = createProcessesFromPaths(convertedPaths);
// prevPathsRef.current = convertedPaths;
// // console.log("--- Action Types in Paths ---"); // // Always update processes when action or trigger types change
// // convertedPaths.forEach((path) => { // onProcessesCreated(newProcesses);
// // path.points.forEach((point) => { // prevProcessesRef.current = newProcesses;
// // point.actions.forEach((action) => {
// // console.log(
// // `Path ${path.modeluuid}, Point ${point.uuid}: ${action.type}`
// // );
// // });
// // });
// // });
// // console.log("New processes:", newProcesses);
// if (
// newProcesses.length !== prevProcessesRef.current.length ||
// !newProcesses.every(
// (proc, i) =>
// proc.paths.length === prevProcessesRef.current[i]?.paths.length &&
// proc.paths.every(
// (path, j) =>
// path.modeluuid ===
// prevProcessesRef.current[i]?.paths[j]?.modeluuid
// )
// )
// ) {
// onProcessesCreated(newProcesses);
// // prevProcessesRef.current = newProcesses;
// }
// }, [ // }, [
// pathsDependency, // pathsDependency, // This now includes action and trigger types
// onProcessesCreated, // onProcessesCreated,
// convertedPaths, // convertedPaths,
// createProcessesFromPaths, // createProcessesFromPaths,
@@ -423,10 +471,19 @@ export interface PointAction {
isUsed: boolean; isUsed: boolean;
} }
export interface PointTrigger {
uuid: string;
bufferTime: number;
name: string;
type: string;
isUsed: boolean;
}
export interface PathPoint { export interface PathPoint {
uuid: string; uuid: string;
position: [number, number, number]; position: [number, number, number];
actions: PointAction[]; actions: PointAction[];
triggers: PointTrigger[];
connections: { connections: {
targets: Array<{ modelUUID: string }>; targets: Array<{ modelUUID: string }>;
}; };
@@ -438,6 +495,7 @@ export interface SimulationPath {
points: PathPoint[]; points: PathPoint[];
pathPosition: [number, number, number]; pathPosition: [number, number, number];
speed?: number; speed?: number;
isplaying: boolean;
} }
export interface Process { export interface Process {
@@ -445,7 +503,9 @@ export interface Process {
paths: SimulationPath[]; paths: SimulationPath[];
animationPath: THREE.Vector3[]; animationPath: THREE.Vector3[];
pointActions: PointAction[][]; pointActions: PointAction[][];
pointTriggers: PointTrigger[][];
speed: number; speed: number;
isplaying: boolean;
} }
interface ProcessCreatorProps { interface ProcessCreatorProps {
@@ -458,11 +518,16 @@ function convertToSimulationPath(
): SimulationPath { ): SimulationPath {
const { modeluuid } = path; const { modeluuid } = path;
// Simplified normalizeAction function that preserves exact original properties // Normalized action handler
const normalizeAction = (action: any): PointAction => { const normalizeAction = (action: any): PointAction => {
return { ...action }; // Return exact copy with no modifications return { ...action }; // Return exact copy with no modifications
}; };
// Normalized trigger handler
const normalizeTrigger = (trigger: any): PointTrigger => {
return { ...trigger }; // Return exact copy with no modifications
};
if (path.type === "Conveyor") { if (path.type === "Conveyor") {
return { return {
type: path.type, type: path.type,
@@ -470,7 +535,16 @@ function convertToSimulationPath(
points: path.points.map((point) => ({ points: path.points.map((point) => ({
uuid: point.uuid, uuid: point.uuid,
position: point.position, position: point.position,
actions: point.actions.map(normalizeAction), // Preserve exact actions actions: Array.isArray(point.actions)
? point.actions.map(normalizeAction)
: point.actions
? [normalizeAction(point.actions)]
: [],
triggers: Array.isArray(point.triggers)
? point.triggers.map(normalizeTrigger)
: point.triggers
? [normalizeTrigger(point.triggers)]
: [],
connections: { connections: {
targets: point.connections.targets.map((target) => ({ targets: point.connections.targets.map((target) => ({
modelUUID: target.modelUUID, modelUUID: target.modelUUID,
@@ -482,8 +556,10 @@ function convertToSimulationPath(
typeof path.speed === "string" typeof path.speed === "string"
? parseFloat(path.speed) || 1 ? parseFloat(path.speed) || 1
: path.speed || 1, : path.speed || 1,
isplaying: false, // Added missing property
}; };
} else { } else {
// For vehicle paths, handle the case where triggers might not exist
return { return {
type: path.type, type: path.type,
modeluuid, modeluuid,
@@ -493,7 +569,10 @@ function convertToSimulationPath(
position: path.points.position, position: path.points.position,
actions: Array.isArray(path.points.actions) actions: Array.isArray(path.points.actions)
? path.points.actions.map(normalizeAction) ? path.points.actions.map(normalizeAction)
: [normalizeAction(path.points.actions)], : path.points.actions
? [normalizeAction(path.points.actions)]
: [],
triggers: [],
connections: { connections: {
targets: path.points.connections.targets.map((target) => ({ targets: path.points.connections.targets.map((target) => ({
modelUUID: target.modelUUID, modelUUID: target.modelUUID,
@@ -503,26 +582,20 @@ function convertToSimulationPath(
], ],
pathPosition: path.position, pathPosition: path.position,
speed: path.points.speed || 1, speed: path.points.speed || 1,
isplaying: false,
}; };
} }
} }
// Custom shallow comparison for arrays
const areArraysEqual = (a: any[], b: any[]) => {
if (a.length !== b.length) return false;
for (let i = 0; i < a.length; i++) {
if (a[i] !== b[i]) return false;
}
return true;
};
// Helper function to create an empty process // Helper function to create an empty process
const createEmptyProcess = (): Process => ({ const createEmptyProcess = (): Process => ({
id: `process-${Math.random().toString(36).substring(2, 11)}`, id: `process-${Math.random().toString(36).substring(2, 11)}`,
paths: [], paths: [],
animationPath: [], animationPath: [],
pointActions: [], pointActions: [],
pointTriggers: [], // Added point triggers array
speed: 1, speed: 1,
isplaying: false,
}); });
// Enhanced connection checking function // Enhanced connection checking function
@@ -631,19 +704,23 @@ export function useProcessCreation() {
const animationPath: THREE.Vector3[] = []; const animationPath: THREE.Vector3[] = [];
const pointActions: PointAction[][] = []; const pointActions: PointAction[][] = [];
const pointTriggers: PointTrigger[][] = []; // Added point triggers collection
const processSpeed = paths[0]?.speed || 1; const processSpeed = paths[0]?.speed || 1;
for (const path of paths) { for (const path of paths) {
for (const point of path.points) { for (const point of path.points) {
const obj = scene.getObjectByProperty("uuid", point.uuid); if (path.type === "Conveyor") {
if (!obj) { const obj = scene.getObjectByProperty("uuid", point.uuid);
console.warn(`Object with UUID ${point.uuid} not found in scene`); if (!obj) {
continue; console.warn(`Object with UUID ${point.uuid} not found in scene`);
} continue;
}
const position = obj.getWorldPosition(new THREE.Vector3()); const position = obj.getWorldPosition(new THREE.Vector3());
animationPath.push(position.clone()); animationPath.push(position.clone());
pointActions.push(point.actions); pointActions.push(point.actions);
pointTriggers.push(point.triggers); // Collect triggers for each point
}
} }
} }
@@ -652,7 +729,9 @@ export function useProcessCreation() {
paths, paths,
animationPath, animationPath,
pointActions, pointActions,
pointTriggers,
speed: processSpeed, speed: processSpeed,
isplaying: false,
}; };
}, },
[scene] [scene]
@@ -755,7 +834,7 @@ const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
); );
}, [simulationStates]); }, [simulationStates]);
// Enhanced dependency tracking that includes action types // Enhanced dependency tracking that includes action and trigger types
const pathsDependency = useMemo(() => { const pathsDependency = useMemo(() => {
if (!convertedPaths) return null; if (!convertedPaths) return null;
return convertedPaths.map((path) => ({ return convertedPaths.map((path) => ({
@@ -766,11 +845,20 @@ const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
point.actions.map((action) => `${index}-${action.type}`).join("|") point.actions.map((action) => `${index}-${action.type}`).join("|")
) )
.join(","), .join(","),
// Track all trigger types for each point
triggerSignature: path.points
.map((point, index) =>
point.triggers
.map((trigger) => `${index}-${trigger.type}`)
.join("|")
)
.join(","),
connections: path.points connections: path.points
.flatMap((p: PathPoint) => .flatMap((p: PathPoint) =>
p.connections.targets.map((t: { modelUUID: string }) => t.modelUUID) p.connections.targets.map((t: { modelUUID: string }) => t.modelUUID)
) )
.join(","), .join(","),
isplaying: false,
})); }));
}, [convertedPaths]); }, [convertedPaths]);
@@ -785,15 +873,15 @@ const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
} }
// Always regenerate processes if the pathsDependency has changed // Always regenerate processes if the pathsDependency has changed
// This ensures action type changes will be detected // This ensures action and trigger type changes will be detected
const newProcesses = createProcessesFromPaths(convertedPaths); const newProcesses = createProcessesFromPaths(convertedPaths);
prevPathsRef.current = convertedPaths; prevPathsRef.current = convertedPaths;
// Always update processes when action types change // Always update processes when action or trigger types change
onProcessesCreated(newProcesses); onProcessesCreated(newProcesses);
prevProcessesRef.current = newProcesses; prevProcessesRef.current = newProcesses;
}, [ }, [
pathsDependency, // This now includes action types pathsDependency, // This now includes action and trigger types
onProcessesCreated, onProcessesCreated,
convertedPaths, convertedPaths,
createProcessesFromPaths, createProcessesFromPaths,

58
app/src/modules/simulation/process/processObject.tsx Normal file
View File

@@ -0,0 +1,58 @@
import React, { useMemo } from "react";
import * as THREE from "three";
import { GLTF } from "three-stdlib";
import { SpawnedObject } from "./types";
interface ProcessObjectProps {
objectId: string;
obj: SpawnedObject;
renderAs?: "box" | "custom";
gltf?: GLTF;
}
const ProcessObject: React.FC<ProcessObjectProps> = ({
objectId,
obj,
renderAs = "custom",
gltf,
}) => {
const renderedObject = useMemo(() => {
if (renderAs === "box") {
return (
<mesh
key={objectId}
ref={obj.ref as React.RefObject<THREE.Mesh>}
material={obj.material}
position={obj.position}
>
<boxGeometry args={[1, 1, 1]} />
</mesh>
);
}
if (gltf?.scene) {
const clonedScene = gltf.scene.clone();
clonedScene.traverse((child) => {
if (child instanceof THREE.Mesh) {
child.material = obj.material;
}
});
return (
<group
key={objectId}
ref={obj.ref as React.RefObject<THREE.Group>}
position={obj.position}
>
<primitive object={clonedScene} />
</group>
);
}
return null;
}, [objectId, obj, renderAs, gltf]);
return renderedObject;
};
export default ProcessObject;

114
app/src/modules/simulation/process/processObjectRender.tsx
View File

@@ -1,114 +0,0 @@
import React, { useRef, useEffect } from "react";
import { useFrame } from "@react-three/fiber";
import * as THREE from "three";
import { GLTF } from "three-stdlib";
import { Box3Helper } from "three";
import { SpawnedObject, ProcessData } from "./types";
interface ProcessObjectRendererProps {
objectId: string;
object: SpawnedObject;
process: ProcessData;
gltf: GLTF;
showBoundingBox?: boolean;
}
export const ProcessObjectRenderer: React.FC<ProcessObjectRendererProps> = ({
objectId,
object,
process,
gltf,
showBoundingBox = false,
}) => {
const meshRef = useRef<THREE.Mesh>(null);
const boxHelperRef = useRef<THREE.Box3Helper | null>(null);
const boundingBoxRef = useRef<THREE.Box3>(new THREE.Box3());
// Issue 1: Can't assign to ref.current as it's read-only
useEffect(() => {
if (object.ref && meshRef.current) {
// Instead of direct assignment, we need to store the mesh reference another way
// Option 1: If you can modify the SpawnedObject interface, add a setMesh method
if (typeof (object as any).setMesh === 'function') {
(object as any).setMesh(meshRef.current);
}
// Option 2: Store the mesh in a property that isn't ref.current
// This requires modifying your SpawnedObject interface to include this property
(object as any).meshInstance = meshRef.current;
// Option 3: If you need to maintain compatibility, you could use Object.defineProperty
// But this is a hack and not recommended
// Object.defineProperty(object.ref, 'current', { value: meshRef.current, writable: true });
}
}, [object.ref]);
// Create a bounding box helper for visualization
useFrame(() => {
if (meshRef.current && showBoundingBox) {
// Update the bounding box to match the mesh position
if (!boxHelperRef.current) {
// Get the size of the mesh
const size = new THREE.Vector3(1, 1, 1);
// If the mesh has geometry, use its dimensions
if (meshRef.current.geometry) {
const box = new THREE.Box3().setFromObject(meshRef.current);
box.getSize(size);
}
// Create a new bounding box centered on the mesh
boundingBoxRef.current = new THREE.Box3().setFromCenterAndSize(
meshRef.current.position,
size
);
// Create a helper to visualize the box
boxHelperRef.current = new Box3Helper(
boundingBoxRef.current,
new THREE.Color(0xff0000)
);
// Add the helper to the scene
meshRef.current.parent?.add(boxHelperRef.current);
} else {
// Update the box position to match the mesh
boundingBoxRef.current.setFromCenterAndSize(
meshRef.current.position,
boundingBoxRef.current.getSize(new THREE.Vector3())
);
// Force the helper to update
boxHelperRef.current.updateMatrixWorld(true);
}
}
});
if (gltf?.scene) {
return (
<primitive
ref={meshRef}
object={gltf.scene.clone()}
position={[0, 0, 0]}
material={object.material}
/>
);
}
// Issue 2: Material color type problem
return (
<mesh ref={meshRef}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial
// Fix the color property access
color={
object.material && 'color' in object.material
? (object.material as THREE.MeshStandardMaterial).color
: "#00ff00"
}
metalness={0.5}
roughness={0.3}
/>
</mesh>
);
};

123
app/src/modules/simulation/process/types.ts
View File

@@ -1,79 +1,86 @@
import * as THREE from "three"; import * as THREE from "three";
import React from "react";
export interface ProcessPoint { export interface Trigger {
uuid: string; uuid: string;
position: number[]; name: string;
actions?: PointAction[]; type: string;
bufferTime: number;
isUsed: boolean;
} }
export interface PointAction { export interface PointAction {
type: string; uuid: string;
name: string;
type: "Inherit" | "Spawn" | "Despawn" | "Delay" | "Swap";
objectType: string;
material: string;
delay: string | number;
spawnInterval: string | number;
isUsed: boolean; isUsed: boolean;
spawnInterval?: number | string; hitCount?: number;
material?: string; }
delay?: number | string;
export interface ProcessPoint {
uuid: string;
position: number[];
rotation: number[];
actions: PointAction[];
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
triggers?: Trigger[];
}
export interface ProcessPath {
modeluuid: string;
modelName: string;
points: ProcessPoint[];
pathPosition: number[];
pathRotation: number[];
speed: number;
type: "Conveyor" | "Vehicle";
isplaying: boolean
} }
export interface ProcessData { export interface ProcessData {
id: string; id: string;
name: string; paths: ProcessPath[];
paths?: { animationPath: { x: number; y: number; z: number }[];
points?: ProcessPoint[]; pointActions: PointAction[][];
}[]; speed: number;
animationPath?: { x: number; y: number; z: number }[];
speed?: number;
customMaterials?: Record<string, THREE.Material>; customMaterials?: Record<string, THREE.Material>;
renderAs?: "box" | "custom";
pointTriggers: [];
}
export interface AnimationState {
currentIndex: number;
progress: number;
isAnimating: boolean;
speed: number;
isDelaying: boolean;
delayStartTime: number;
currentDelayDuration: number;
delayComplete: boolean;
currentPathIndex: number;
}
export interface SpawnedObject {
ref: React.RefObject<THREE.Group | THREE.Mesh>;
state: AnimationState;
visible: boolean;
material: THREE.Material;
spawnTime: number;
currentMaterialType: string;
position: THREE.Vector3;
} }
export interface ProcessAnimationState { export interface ProcessAnimationState {
spawnedObjects: Record<string, SpawnedObject | SpawnedObjectWithCollision>; spawnedObjects: { [objectId: string]: SpawnedObject };
nextSpawnTime: number; nextSpawnTime: number;
objectIdCounter: number; objectIdCounter: number;
isProcessDelaying: boolean; isProcessDelaying: boolean;
processDelayStartTime: number; processDelayStartTime: number;
processDelayDuration: number; processDelayDuration: number;
isCollisionPaused?: boolean; hasSpawnedZeroIntervalObject?: boolean;
} }
export interface SpawnedObject {
ref: React.RefObject<THREE.Object3D>;
state: {
currentIndex: number;
progress: number;
isAnimating: boolean;
speed: number;
isDelaying: boolean;
delayStartTime: number;
currentDelayDuration: number;
delayComplete: boolean;
currentPathIndex: number;
};
visible: boolean;
material: THREE.Material;
currentMaterialType: string;
spawnTime: number;
position: THREE.Vector3;
collision?: {
boundingBox: THREE.Box3;
isColliding: boolean;
colliding: boolean; // Added this property
};
}
// For use in your processAnimator.tsx
// Update the CollisionState interface to include all required properties
interface CollisionState {
boundingBox: THREE.Box3;
isColliding: boolean;
colliding: boolean; // This was missing
collidingWith: string[];
}
export interface SpawnedObjectWithCollision extends SpawnedObject {
collision: {
boundingBox: THREE.Box3;
isColliding: boolean;
colliding: boolean;
collidingWith: string[];
};
}

542
app/src/modules/simulation/process/useProcessAnimations.tsx Normal file
View File

@@ -0,0 +1,542 @@
import { useCallback, useEffect, useRef, useState } from "react";
import * as THREE from "three";
import {
ProcessData,
ProcessAnimationState,
SpawnedObject,
AnimationState,
ProcessPoint,
PointAction,
Trigger,
} from "./types";
import {
useAnimationPlaySpeed,
usePauseButtonStore,
usePlayButtonStore,
useResetButtonStore,
} from "../../../store/usePlayButtonStore";
import { usePlayAgv } from "../../../store/store";
// Enhanced ProcessAnimationState with trigger tracking
interface EnhancedProcessAnimationState extends ProcessAnimationState {
triggerCounts: Record<string, number>;
triggerLogs: Array<{
timestamp: number;
pointId: string;
objectId: string;
triggerId: string;
hasSpawnedZeroIntervalObject?: boolean;
}>;
}
interface ProcessContainerProps {
processes: ProcessData[];
setProcesses: React.Dispatch<React.SetStateAction<any[]>>;
agvRef: any;
}
interface PlayAgvState {
playAgv: Record<string, any>;
setPlayAgv: (data: any) => void;
}
export const useProcessAnimation = (
processes: ProcessData[],
setProcesses: React.Dispatch<React.SetStateAction<any[]>>,
agvRef: any
) => {
// State and refs initialization
const { isPlaying, setIsPlaying } = usePlayButtonStore();
const { isPaused, setIsPaused } = usePauseButtonStore();
const { isReset, setReset } = useResetButtonStore();
const debugRef = useRef<boolean>(false);
const clockRef = useRef<THREE.Clock>(new THREE.Clock());
const pauseTimeRef = useRef<number>(0);
const elapsedBeforePauseRef = useRef<number>(0);
const animationStatesRef = useRef<
Record<string, EnhancedProcessAnimationState>
>({});
const { speed } = useAnimationPlaySpeed();
const prevIsPlaying = useRef<boolean | null>(null);
const [internalResetFlag, setInternalResetFlag] = useState(false);
const [animationStates, setAnimationStates] = useState<
Record<string, EnhancedProcessAnimationState>
>({});
const speedRef = useRef<number>(speed);
const { PlayAgv, setPlayAgv } = usePlayAgv();
// Effect hooks
useEffect(() => {
speedRef.current = speed;
}, [speed]);
useEffect(() => {
if (prevIsPlaying.current !== null) {
setAnimationStates({});
}
prevIsPlaying.current = isPlaying;
}, [isPlaying]);
useEffect(() => {
animationStatesRef.current = animationStates;
}, [animationStates]);
// Reset handler
useEffect(() => {
if (isReset) {
setInternalResetFlag(true);
setIsPlaying(false);
setIsPaused(false);
setAnimationStates({});
animationStatesRef.current = {};
clockRef.current = new THREE.Clock();
elapsedBeforePauseRef.current = 0;
pauseTimeRef.current = 0;
setReset(false);
setTimeout(() => {
setInternalResetFlag(false);
setIsPlaying(true);
}, 0);
}
}, [isReset, setReset, setIsPlaying, setIsPaused]);
// Pause handler
useEffect(() => {
if (isPaused) {
pauseTimeRef.current = clockRef.current.getElapsedTime();
} else if (pauseTimeRef.current > 0) {
const pausedDuration =
clockRef.current.getElapsedTime() - pauseTimeRef.current;
elapsedBeforePauseRef.current += pausedDuration;
}
}, [isPaused]);
// Initialize animation states with trigger tracking
useEffect(() => {
if (isPlaying && !internalResetFlag) {
const newStates: Record<string, EnhancedProcessAnimationState> = {};
processes.forEach((process) => {
const triggerCounts: Record<string, number> = {};
// Initialize trigger counts for all On-Hit triggers
process.paths?.forEach((path) => {
path.points?.forEach((point) => {
point.triggers?.forEach((trigger: Trigger) => {
if (trigger.type === "On-Hit" && trigger.isUsed) {
triggerCounts[`${point.uuid}-${trigger.uuid}`] = 0;
}
});
});
});
newStates[process.id] = {
spawnedObjects: {},
nextSpawnTime: 0,
objectIdCounter: 0,
isProcessDelaying: false,
processDelayStartTime: 0,
processDelayDuration: 0,
triggerCounts,
triggerLogs: [],
hasSpawnedZeroIntervalObject: false, // Initialize the new property
};
});
setAnimationStates(newStates);
animationStatesRef.current = newStates;
clockRef.current.start();
}
}, [isPlaying, processes, internalResetFlag]);
// Helper functions
const findSpawnPoint = (process: ProcessData): ProcessPoint | null => {
for (const path of process.paths || []) {
for (const point of path.points || []) {
const spawnAction = point.actions?.find(
(a) => a.isUsed && a.type === "Spawn"
);
if (spawnAction) {
return point;
}
}
}
return null;
};
const findAnimationPathPoint = (
process: ProcessData,
spawnPoint: ProcessPoint
): THREE.Vector3 => {
if (process.animationPath && process.animationPath.length > 0) {
let pointIndex = 0;
for (const path of process.paths || []) {
for (let i = 0; i < (path.points?.length || 0); i++) {
const point = path.points?.[i];
if (point && point.uuid === spawnPoint.uuid) {
if (process.animationPath[pointIndex]) {
const p = process.animationPath[pointIndex];
return new THREE.Vector3(p.x, p.y, p.z);
}
}
pointIndex++;
}
}
}
return new THREE.Vector3(
spawnPoint.position[0],
spawnPoint.position[1],
spawnPoint.position[2]
);
};
// Optimized object creation
const createSpawnedObject = useCallback(
(
process: ProcessData,
currentTime: number,
materialType: string,
spawnPoint: ProcessPoint,
baseMaterials: Record<string, THREE.Material>
): SpawnedObject => {
const processMaterials = {
...baseMaterials,
...(process.customMaterials || {}),
};
const spawnPosition = findAnimationPathPoint(process, spawnPoint);
const material =
processMaterials[materialType as keyof typeof processMaterials] ||
baseMaterials.Default;
return {
ref: { current: null },
state: {
currentIndex: 0,
progress: 0,
isAnimating: true,
speed: process.speed || 1,
isDelaying: false,
delayStartTime: 0,
currentDelayDuration: 0,
delayComplete: false,
currentPathIndex: 0,
},
visible: true,
material: material,
currentMaterialType: materialType,
spawnTime: currentTime,
position: spawnPosition,
};
},
[]
);
// Material handling
const handleMaterialSwap = useCallback(
(
processId: string,
objectId: string,
materialType: string,
processes: ProcessData[],
baseMaterials: Record<string, THREE.Material>
) => {
setAnimationStates((prev) => {
const processState = prev[processId];
if (!processState || !processState.spawnedObjects[objectId])
return prev;
const process = processes.find((p) => p.id === processId);
if (!process) return prev;
const processMaterials = {
...baseMaterials,
...(process.customMaterials || {}),
};
const newMaterial =
processMaterials[materialType as keyof typeof processMaterials];
if (!newMaterial) return prev;
return {
...prev,
[processId]: {
...processState,
spawnedObjects: {
...processState.spawnedObjects,
[objectId]: {
...processState.spawnedObjects[objectId],
material: newMaterial,
currentMaterialType: materialType,
},
},
},
};
});
},
[]
);
// Point action handler with trigger counting
const handlePointActions = useCallback(
(
processId: string,
objectId: string,
actions: PointAction[] = [],
currentTime: number,
processes: ProcessData[],
baseMaterials: Record<string, THREE.Material>
): boolean => {
let shouldStopAnimation = false;
actions.forEach((action) => {
if (!action.isUsed) return;
switch (action.type) {
case "Delay":
setAnimationStates((prev) => {
const processState = prev[processId];
if (!processState || processState.isProcessDelaying) return prev;
const delayDuration =
typeof action.delay === "number"
? action.delay
: parseFloat(action.delay as string) || 0;
if (delayDuration > 0) {
return {
...prev,
[processId]: {
...processState,
isProcessDelaying: true,
processDelayStartTime: currentTime,
processDelayDuration: delayDuration,
spawnedObjects: {
...processState.spawnedObjects,
[objectId]: {
...processState.spawnedObjects[objectId],
state: {
...processState.spawnedObjects[objectId].state,
isAnimating: false,
isDelaying: true,
delayStartTime: currentTime,
currentDelayDuration: delayDuration,
delayComplete: false,
},
},
},
},
};
}
return prev;
});
shouldStopAnimation = true;
break;
case "Despawn":
setAnimationStates((prev) => {
const processState = prev[processId];
if (!processState) return prev;
const newSpawnedObjects = { ...processState.spawnedObjects };
delete newSpawnedObjects[objectId];
return {
...prev,
[processId]: {
...processState,
spawnedObjects: newSpawnedObjects,
},
};
});
shouldStopAnimation = true;
break;
case "Swap":
if (action.material) {
handleMaterialSwap(
processId,
objectId,
action.material,
processes,
baseMaterials
);
}
break;
default:
break;
}
});
return shouldStopAnimation;
},
[handleMaterialSwap]
);
// Trigger counting system
const checkAndCountTriggers = useCallback(
(
processId: string,
objectId: string,
currentPointIndex: number,
processes: ProcessData[],
currentTime: number
) => {
setAnimationStates((prev) => {
const processState = prev[processId];
if (!processState) return prev;
const process = processes.find((p) => p.id === processId);
if (!process) return prev;
const point = getPointDataForAnimationIndex(process, currentPointIndex);
if (!point?.triggers) return prev;
const onHitTriggers = point.triggers.filter(
(t: Trigger) => t.type === "On-Hit" && t.isUsed
);
if (onHitTriggers.length === 0) return prev;
const newTriggerCounts = { ...processState.triggerCounts };
const newTriggerLogs = [...processState.triggerLogs];
let shouldLog = false;
// Update counts for all valid triggers
onHitTriggers.forEach((trigger: Trigger) => {
const triggerKey = `${point.uuid}-${trigger.uuid}`;
newTriggerCounts[triggerKey] =
(newTriggerCounts[triggerKey] || 0) + 1;
shouldLog = true;
newTriggerLogs.push({
timestamp: currentTime,
pointId: point.uuid,
objectId,
triggerId: trigger.uuid,
});
});
const processTotalHits = Object.values(newTriggerCounts).reduce(
(a, b) => a + b,
0
);
if (shouldLog) {
const vehiclePaths = process.paths.filter(
(path) => path.type === "Vehicle"
);
vehiclePaths.forEach((vehiclePath) => {
if (vehiclePath.points?.length > 0) {
const vehiclePoint = vehiclePath.points[0];
const action = vehiclePoint.actions?.[0];
let expectedHitCount = action?.hitCount;
if (expectedHitCount !== undefined) {
const vehicleId = vehiclePath.modeluuid;
let vehicleEntry = agvRef.current.find(
(v: any) =>
v.vehicleId === vehicleId && v.processId === processId
);
if (!vehicleEntry) {
vehicleEntry = {
processId,
vehicleId,
expectedHitCount,
isplaying: false,
hitCount: 0, // Initialize hitCount
};
agvRef.current.push(vehicleEntry);
}
// Increment expectedHitCount if not playing
if (!vehicleEntry.isplaying) {
vehicleEntry.expectedHitCount = processTotalHits + 1;
}
// Set vehicle's hitCount to the processTotalHits
vehicleEntry.hitCount = processTotalHits;
vehicleEntry.lastUpdated = currentTime;
// If hitCount matches expectedHitCount, set isplaying to true
if (vehicleEntry.hitCount >= vehicleEntry.expectedHitCount) {
vehicleEntry.isplaying = true;
}
}
}
});
}
return {
...prev,
[processId]: {
...processState,
triggerCounts: newTriggerCounts,
triggerLogs: newTriggerLogs,
totalHits: processTotalHits,
},
};
});
},
[]
);
// Utility functions
const hasNonInheritActions = useCallback(
(actions: PointAction[] = []): boolean => {
return actions.some(
(action) => action.isUsed && action.type !== "Inherit"
);
},
[]
);
const getPointDataForAnimationIndex = useCallback(
(process: ProcessData, index: number): ProcessPoint | null => {
if (!process.paths) return null;
let cumulativePoints = 0;
for (const path of process.paths) {
const pointCount = path.points?.length || 0;
if (index < cumulativePoints + pointCount) {
const pointIndex = index - cumulativePoints;
return path.points?.[pointIndex] || null;
}
cumulativePoints += pointCount;
}
return null;
},
[]
);
const getTriggerCounts = useCallback((processId: string) => {
return animationStatesRef.current[processId]?.triggerCounts || {};
}, []);
const getTriggerLogs = useCallback((processId: string) => {
return animationStatesRef.current[processId]?.triggerLogs || [];
}, []);
return {
animationStates,
setAnimationStates,
clockRef,
elapsedBeforePauseRef,
speedRef,
debugRef,
findSpawnPoint,
createSpawnedObject,
handlePointActions,
hasNonInheritActions,
getPointDataForAnimationIndex,
checkAndCountTriggers,
getTriggerCounts,
getTriggerLogs,
processes,
};
};

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

@@ -16,23 +16,8 @@ function Simulation() {
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const pathsGroupRef = useRef() as React.MutableRefObject<THREE.Group>; const pathsGroupRef = useRef() as React.MutableRefObject<THREE.Group>;
const { simulationStates, setSimulationStates } = useSimulationStates(); const { simulationStates, setSimulationStates } = useSimulationStates();
const [processes, setProcesses] = useState([]); const [processes, setProcesses] = useState<any[]>([]);
const agvRef = useRef([]);
useEffect(() => {
// console.log('simulationStates: ', simulationStates);
}, [simulationStates]);
// useEffect(() => {
// if (selectedActionSphere) {
// console.log('selectedActionSphere: ', selectedActionSphere);
// }
// }, [selectedActionSphere]);
// useEffect(() => {
// if (selectedPath) {
// console.log('selectedPath: ', selectedPath);
// }
// }, [selectedPath]);
return ( return (
<> <>
@@ -41,8 +26,8 @@ function Simulation() {
<> <>
<PathCreation pathsGroupRef={pathsGroupRef} /> <PathCreation pathsGroupRef={pathsGroupRef} />
<PathConnector pathsGroupRef={pathsGroupRef} /> <PathConnector pathsGroupRef={pathsGroupRef} />
<ProcessContainer /> <ProcessContainer processes={processes} setProcesses={setProcesses} agvRef={agvRef} />
<Agv /> <Agv processes={processes} agvRef={agvRef} />
</> </>
)} )}
</> </>

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

@@ -305,9 +305,7 @@ export const useActiveUsers = create<any>((set: any) => ({
setActiveUsers: (callback: (prev: any[]) => any[] | any[]) => setActiveUsers: (callback: (prev: any[]) => any[] | any[]) =>
set((state: { activeUsers: any[] }) => ({ set((state: { activeUsers: any[] }) => ({
activeUsers: activeUsers:
typeof callback === "function" typeof callback === "function" ? callback(state.activeUsers) : callback,
? callback(state.activeUsers)
: callback,
})), })),
})); }));
@@ -347,12 +345,29 @@ export const useSelectedPath = create<any>((set: any) => ({
})); }));
interface SimulationPathsStore { interface SimulationPathsStore {
simulationStates: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]; simulationStates: (
| Types.ConveyorEventsSchema
| Types.VehicleEventsSchema
| Types.StaticMachineEventsSchema
)[];
setSimulationStates: ( setSimulationStates: (
paths: paths:
| (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[] | (
| ((prev: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[] | Types.ConveyorEventsSchema
) => (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) | Types.VehicleEventsSchema
| Types.StaticMachineEventsSchema
)[]
| ((
prev: (
| Types.ConveyorEventsSchema
| Types.VehicleEventsSchema
| Types.StaticMachineEventsSchema
)[]
) => (
| Types.ConveyorEventsSchema
| Types.VehicleEventsSchema
| Types.StaticMachineEventsSchema
)[])
) => void; ) => void;
} }
@@ -363,7 +378,7 @@ export const useSimulationStates = create<SimulationPathsStore>((set) => ({
simulationStates: simulationStates:
typeof paths === "function" ? paths(state.simulationStates) : paths, typeof paths === "function" ? paths(state.simulationStates) : paths,
})), })),
})) }));
export const useNavMesh = create<any>((set: any) => ({ export const useNavMesh = create<any>((set: any) => ({
navMesh: null, navMesh: null,
@@ -446,3 +461,9 @@ export const useTileDistance = create<any>((set: any) => ({
planeValue: { ...state.planeValue, ...value }, planeValue: { ...state.planeValue, ...value },
})), })),
})); }));
export const usePlayAgv = create<any>((set, get) => ({
PlayAgv: [],
setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
set({ PlayAgv: updateFn(get().PlayAgv) }),
}));

357
app/src/types/world/worldTypes.d.ts vendored
View File

@@ -1,13 +1,13 @@
// Importing core classes and types from THREE.js and @react-three/fiber // Importing core classes and types from THREE.js and @react-three/fiber
import * as THREE from "three"; import * as THREE from "three";
import { TransformControls } from 'three/examples/jsm/controls/TransformControls'; import { TransformControls } from "three/examples/jsm/controls/TransformControls";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { DragControls } from 'three/examples/jsm/controls/DragControls'; import { DragControls } from "three/examples/jsm/controls/DragControls";
import { IntersectionEvent } from '@react-three/fiber/dist/declarations/src/core/events'; import { IntersectionEvent } from "@react-three/fiber/dist/declarations/src/core/events";
import { ThreeEvent } from "@react-three/fiber/dist/declarations/src/core/events"; import { ThreeEvent } from "@react-three/fiber/dist/declarations/src/core/events";
import { RootState } from "@react-three/fiber"; import { RootState } from "@react-three/fiber";
import { CSM } from "three/examples/jsm/csm/CSM"; import { CSM } from "three/examples/jsm/csm/CSM";
import { CSMHelper } from 'three/examples/jsm/csm/CSMHelper'; import { CSMHelper } from "three/examples/jsm/csm/CSMHelper";
import { CameraControls } from "@react-three/drei"; import { CameraControls } from "@react-three/drei";
/** Core THREE.js and React-Fiber Event Types **/ /** Core THREE.js and React-Fiber Event Types **/
@@ -15,7 +15,6 @@ import { CameraControls } from "@react-three/drei";
// Event type specific to pointer events in @react-three/fiber // Event type specific to pointer events in @react-three/fiber
export type ThreeEvent = ThreeEvent<PointerEvent>; export type ThreeEvent = ThreeEvent<PointerEvent>;
/** Vector and Reference Types **/ /** Vector and Reference Types **/
// 2D Vector type from THREE.js // 2D Vector type from THREE.js
@@ -33,7 +32,6 @@ export type RefVector3 = React.MutableRefObject<THREE.Vector3 | null>;
// Quaternion type for rotations, using the base structure from THREE.js // Quaternion type for rotations, using the base structure from THREE.js
export type QuaternionType = THREE.QuaternionLike; export type QuaternionType = THREE.QuaternionLike;
/** Basic Object Types for Scene Management **/ /** Basic Object Types for Scene Management **/
// THREE.js mesh object // THREE.js mesh object
@@ -49,7 +47,9 @@ export type Shape = THREE.Shape;
export type IntersectionEvent = THREE.Intersection; export type IntersectionEvent = THREE.Intersection;
// Array type for intersections with objects in the scene // Array type for intersections with objects in the scene
export type IntersectsType = THREE.Intersection<THREE.Object3D<THREE.Object3DEventMap>>[]; export type IntersectsType = THREE.Intersection<
THREE.Object3D<THREE.Object3DEventMap>
>[];
// Event type for mesh interactions // Event type for mesh interactions
export type MeshEvent = IntersectionEvent<MouseEvent>; export type MeshEvent = IntersectionEvent<MouseEvent>;
@@ -60,7 +60,6 @@ export type DragEvent = DragEvent;
// Generic type for user data attached to objects // Generic type for user data attached to objects
export type UserData = any; export type UserData = any;
/** React Mutable References for Scene Objects **/ /** React Mutable References for Scene Objects **/
// Mutable reference to the scene, used in React-based projects // Mutable reference to the scene, used in React-based projects
@@ -92,7 +91,6 @@ export type Vector3Array = THREE.Vector3[];
export type DragControl = DragControls | null; export type DragControl = DragControls | null;
export type RefDragControl = React.MutableRefObject<DragControls | null>; export type RefDragControl = React.MutableRefObject<DragControls | null>;
/** Primitive Types with Mutable References **/ /** Primitive Types with Mutable References **/
export type String = string; export type String = string;
@@ -109,15 +107,15 @@ export type NumberArray = number[];
export type RefRaycaster = React.MutableRefObject<THREE.Raycaster>; export type RefRaycaster = React.MutableRefObject<THREE.Raycaster>;
// Camera reference, supporting both perspective and basic cameras // Camera reference, supporting both perspective and basic cameras
export type RefCamera = React.MutableRefObject<THREE.Camera | THREE.PerspectiveCamera>; export type RefCamera = React.MutableRefObject<
THREE.Camera | THREE.PerspectiveCamera
>;
/** Three.js Root State Management **/ /** Three.js Root State Management **/
// Root state of the @react-three/fiber instance, providing context of the scene // Root state of the @react-three/fiber instance, providing context of the scene
export type ThreeState = RootState; export type ThreeState = RootState;
/** Point and Line Types for Spatial Geometry **/ /** Point and Line Types for Spatial Geometry **/
// Defines a point in 3D space with metadata for unique identification // Defines a point in 3D space with metadata for unique identification
@@ -132,11 +130,16 @@ export type RefLine = React.MutableRefObject<Line | [Point] | []>;
// Collection of lines for structured geometry // Collection of lines for structured geometry
export type Lines = Array<Line>; export type Lines = Array<Line>;
/** Wall and Room Types for 3D Space Management **/ /** Wall and Room Types for 3D Space Management **/
// Defines a wall with its geometry, position, rotation, material, and layer information // Defines a wall with its geometry, position, rotation, material, and layer information
export type Wall = [THREE.ExtrudeGeometry, [number, number, number], [number, number, number], string, number]; export type Wall = [
THREE.ExtrudeGeometry,
[number, number, number],
[number, number, number],
string,
number
];
// Collection of walls, useful in scene construction // Collection of walls, useful in scene construction
export type Walls = Array<Wall>; export type Walls = Array<Wall>;
@@ -145,15 +148,22 @@ export type Walls = Array<Wall>;
export type RefWalls = React.MutableRefObject<Walls>; export type RefWalls = React.MutableRefObject<Walls>;
// Room type, containing coordinates and layer metadata for spatial management // Room type, containing coordinates and layer metadata for spatial management
export type Rooms = Array<{ coordinates: Array<{ position: THREE.Vector3, uuid: string }>, layer: number }>; export type Rooms = Array<{
coordinates: Array<{ position: THREE.Vector3; uuid: string }>;
layer: number;
}>;
// Reference for room objects, enabling updates within React components // Reference for room objects, enabling updates within React components
export type RefRooms = React.MutableRefObject<Array<{ coordinates: Array<{ position: THREE.Vector3, uuid: string }>, layer: number }>>; export type RefRooms = React.MutableRefObject<
Array<{
coordinates: Array<{ position: THREE.Vector3; uuid: string }>;
layer: number;
}>
>;
// Reference for lines, supporting React-based state changes // Reference for lines, supporting React-based state changes
export type RefLines = React.MutableRefObject<Lines>; export type RefLines = React.MutableRefObject<Lines>;
/** Floor Line Types for Layered Structures **/ /** Floor Line Types for Layered Structures **/
// Floor line type for single lines on the floor level // Floor line type for single lines on the floor level
@@ -168,18 +178,16 @@ export type OnlyFloorLines = Array<Lines>;
// Reference for multi-level floor lines, allowing structured updates // Reference for multi-level floor lines, allowing structured updates
export type RefOnlyFloorLines = React.MutableRefObject<OnlyFloorLines>; export type RefOnlyFloorLines = React.MutableRefObject<OnlyFloorLines>;
/** GeoJSON Line Integration **/ /** GeoJSON Line Integration **/
// Structure for representing GeoJSON lines, integrating external data sources // Structure for representing GeoJSON lines, integrating external data sources
export type GeoJsonLine = { export type GeoJsonLine = {
line: any; line: any;
uuids: [string, string]; uuids: [string, string];
layer: number; layer: number;
type: string; type: string;
}; };
/** State Management Types for React Components **/ /** State Management Types for React Components **/
// Dispatch types for number and boolean states, commonly used in React hooks // Dispatch types for number and boolean states, commonly used in React hooks
@@ -189,68 +197,71 @@ export type BooleanState = React.Dispatch<React.SetStateAction<boolean>>;
// Mutable reference for TubeGeometry, allowing dynamic geometry updates // Mutable reference for TubeGeometry, allowing dynamic geometry updates
export type RefTubeGeometry = React.MutableRefObject<THREE.TubeGeometry | null>; export type RefTubeGeometry = React.MutableRefObject<THREE.TubeGeometry | null>;
/** Floor Item Configuration **/ /** Floor Item Configuration **/
// Type for individual items placed on the floor, with positioning and rotation metadata // Type for individual items placed on the floor, with positioning and rotation metadata
export type FloorItemType = { export type FloorItemType = {
modeluuid: string; modeluuid: string;
modelname: string; modelname: string;
position: [number, number, number]; position: [number, number, number];
rotation: { x: number; y: number; z: number }; rotation: { x: number; y: number; z: number };
modelfileID: string; modelfileID: string;
isLocked: boolean; isLocked: boolean;
isVisible: boolean; isVisible: boolean;
}; };
// Array of floor items for managing multiple objects on the floor // Array of floor items for managing multiple objects on the floor
export type FloorItems = Array<FloorItemType>; export type FloorItems = Array<FloorItemType>;
// Dispatch type for setting floor item state in React // Dispatch type for setting floor item state in React
export type setFloorItemSetState = React.Dispatch<React.SetStateAction<FloorItems | null | undefined>>; export type setFloorItemSetState = React.Dispatch<
React.SetStateAction<FloorItems | null | undefined>
>;
/** Asset Configuration for Loading and Positioning **/ /** Asset Configuration for Loading and Positioning **/
// Configuration for assets, allowing model URLs, scaling, positioning, and types // Configuration for assets, allowing model URLs, scaling, positioning, and types
interface AssetConfiguration { interface AssetConfiguration {
modelUrl: string; modelUrl: string;
scale?: [number, number, number]; scale?: [number, number, number];
csgscale?: [number, number, number]; csgscale?: [number, number, number];
csgposition?: [number, number, number]; csgposition?: [number, number, number];
positionY?: (intersectionPoint: { point: THREE.Vector3 }) => number; positionY?: (intersectionPoint: { point: THREE.Vector3 }) => number;
type?: "Fixed-Move" | "Free-Move"; type?: "Fixed-Move" | "Free-Move";
} }
// Collection of asset configurations, keyed by unique identifiers // Collection of asset configurations, keyed by unique identifiers
export type AssetConfigurations = { export type AssetConfigurations = {
[key: string]: AssetConfiguration; [key: string]: AssetConfiguration;
}; };
/** Wall Item Configuration **/ /** Wall Item Configuration **/
// Configuration for wall items, including model, scale, position, and rotation // Configuration for wall items, including model, scale, position, and rotation
interface WallItem { interface WallItem {
type: "Fixed-Move" | "Free-Move" | undefined; type: "Fixed-Move" | "Free-Move" | undefined;
model?: THREE.Group; model?: THREE.Group;
modeluuid?: string modeluuid?: string;
modelname?: string; modelname?: string;
scale?: [number, number, number]; scale?: [number, number, number];
csgscale?: [number, number, number]; csgscale?: [number, number, number];
csgposition?: [number, number, number]; csgposition?: [number, number, number];
position?: [number, number, number]; position?: [number, number, number];
quaternion?: Types.QuaternionType; quaternion?: Types.QuaternionType;
} }
// Collection of wall items, allowing for multiple items in a scene // Collection of wall items, allowing for multiple items in a scene
export type wallItems = Array<WallItem>; export type wallItems = Array<WallItem>;
// Dispatch for setting wall item state in React // Dispatch for setting wall item state in React
export type setWallItemSetState = React.Dispatch<React.SetStateAction<WallItem[]>>; export type setWallItemSetState = React.Dispatch<
React.SetStateAction<WallItem[]>
>;
// Dispatch for setting vector3 state in React // Dispatch for setting vector3 state in React
export type setVector3State = React.Dispatch<React.SetStateAction<THREE.Vector3>>; export type setVector3State = React.Dispatch<
React.SetStateAction<THREE.Vector3>
>;
// Dispatch for setting euler state in React // Dispatch for setting euler state in React
export type setEulerState = React.Dispatch<React.SetStateAction<THREE.Euler>>; export type setEulerState = React.Dispatch<React.SetStateAction<THREE.Euler>>;
@@ -258,120 +269,206 @@ export type setEulerState = React.Dispatch<React.SetStateAction<THREE.Euler>>;
// Reference type for wall items, allowing direct access to the mutable array // Reference type for wall items, allowing direct access to the mutable array
export type RefWallItems = React.MutableRefObject<WallItem[]>; export type RefWallItems = React.MutableRefObject<WallItem[]>;
/** Wall and Item Selection State Management **/ /** Wall and Item Selection State Management **/
// State management for selecting, removing, and indexing wall items // State management for selecting, removing, and indexing wall items
export type setRemoveLayerSetState = (layer: number | null) => void; export type setRemoveLayerSetState = (layer: number | null) => void;
export type setSelectedWallItemSetState = (item: THREE.Object3D | null) => void; export type setSelectedWallItemSetState = (item: THREE.Object3D | null) => void;
export type setSelectedFloorItemSetState = (item: THREE.Object3D | null) => void; export type setSelectedFloorItemSetState = (
item: THREE.Object3D | null
) => void;
export type setSelectedItemsIndexSetState = (index: number | null) => void; export type setSelectedItemsIndexSetState = (index: number | null) => void;
export type RefCSM = React.MutableRefObject<CSM>; export type RefCSM = React.MutableRefObject<CSM>;
export type RefCSMHelper = React.MutableRefObject<CSMHelper>; export type RefCSMHelper = React.MutableRefObject<CSMHelper>;
interface PathConnection { interface PathConnection {
fromModelUUID: string; fromModelUUID: string;
fromUUID: string; fromUUID: string;
toConnections: { toConnections: {
toModelUUID: string; toModelUUID: string;
toUUID: string; toUUID: string;
}[]; }[];
} }
interface ConnectionStore { interface ConnectionStore {
connections: PathConnection[]; connections: PathConnection[];
setConnections: (connections: PathConnection[]) => void; setConnections: (connections: PathConnection[]) => void;
addConnection: (newConnection: PathConnection) => void; addConnection: (newConnection: PathConnection) => void;
removeConnection: (fromUUID: string, toUUID: string) => void; removeConnection: (fromUUID: string, toUUID: string) => void;
} }
interface ConveyorEventsSchema { interface ConveyorEventsSchema {
modeluuid: string; modeluuid: string;
modelName: string; modelName: string;
type: 'Conveyor'; type: "Conveyor";
points: { points: {
uuid: string; 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; bufferTime: number }[] | [];
connections: { source: { modelUUID: string; pointUUID: string }; targets: { modelUUID: string; pointUUID: string }[] };
}[];
position: [number, number, number]; position: [number, number, number];
rotation: [number, number, number]; rotation: [number, number, number];
speed: number | string; 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;
bufferTime: number;
}[]
| [];
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
}[];
position: [number, number, number];
rotation: [number, number, number];
speed: number | string;
} }
interface VehicleEventsSchema { interface VehicleEventsSchema {
modeluuid: string; modeluuid: string;
modelName: string; modelName: string;
type: 'Vehicle'; type: "Vehicle";
points: { points: {
uuid: string; uuid: string;
position: [number, number, number];
actions: { uuid: string; name: string; type: string; start: { x: number, y: number } | {}, hitCount: number, end: { x: number, y: number } | {}, buffer: number };
connections: { source: { modelUUID: string; pointUUID: string }; targets: { modelUUID: string; pointUUID: string }[] };
speed: number;
};
position: [number, number, number]; position: [number, number, number];
actions: {
uuid: string;
name: string;
type: string;
start: { x: number; y: number } | {};
hitCount: number;
end: { x: number; y: number } | {};
buffer: number;
};
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
speed: number;
isPlaying: boolean;
};
position: [number, number, number];
} }
interface StaticMachineEventsSchema { interface StaticMachineEventsSchema {
modeluuid: string; modeluuid: string;
modelName: string; modelName: string;
type: 'StaticMachine'; type: "StaticMachine";
points: { points: {
uuid: string; uuid: string;
position: [number, number, number];
actions: { uuid: string; name: string; buffer: number | string; material: string; isUsed: boolean };
triggers: { uuid: string; name: string; type: string };
connections: { source: { modelUUID: string; pointUUID: string }; targets: { modelUUID: string; pointUUID: string }[] };
};
position: [number, number, number]; position: [number, number, number];
actions: {
uuid: string;
name: string;
buffer: number | string;
material: string;
isUsed: boolean;
};
triggers: { uuid: string; name: string; type: string };
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
};
position: [number, number, number];
} }
interface ArmBotEventsSchema { interface ArmBotEventsSchema {
modeluuid: string; modeluuid: string;
modelName: string; modelName: string;
type: 'ArmBot'; type: "ArmBot";
points: { points: {
uuid: string; uuid: string;
position: [number, number, number];
actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[] };
triggers: { uuid: string; name: string; type: string };
connections: { source: { modelUUID: string; pointUUID: string }; targets: { modelUUID: string; pointUUID: string }[] };
};
position: [number, number, number]; position: [number, number, number];
actions: {
uuid: string;
name: string;
speed: number;
processes: { triggerId: string; startPoint: string; endPoint: string }[];
};
triggers: { uuid: string; name: string; type: string };
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
};
position: [number, number, number];
} }
export type EventData = { export type EventData = {
modeluuid: string; modeluuid: string;
modelname: string; modelname: string;
position: [number, number, number]; position: [number, number, number];
rotation: { x: number; y: number; z: number }; rotation: { x: number; y: number; z: number };
modelfileID: string; modelfileID: string;
isLocked: boolean; isLocked: boolean;
isVisible: boolean; isVisible: boolean;
eventData?: { eventData?:
type: 'Conveyor'; | {
type: "Conveyor";
points: { points: {
uuid: string; uuid: string;
position: [number, number, number]; position: [number, number, number];
rotation: [number, number, number]; rotation: [number, number, number];
actions: { uuid: string; name: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean }[] | []; actions:
triggers: { uuid: string; name: string; type: string; isUsed: boolean; bufferTime: number }[] | []; | {
connections: { source: { modelUUID: string; pointUUID: string }; targets: { modelUUID: string; pointUUID: string }[] }; 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;
bufferTime: number;
}[]
| [];
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
}[]; }[];
speed: number | string; speed: number | string;
} | { }
type: 'Vehicle'; | {
type: "Vehicle";
points: { points: {
uuid: string;
position: [number, number, number];
actions: {
uuid: string; uuid: string;
position: [number, number, number]; name: string;
actions: { uuid: string; name: string; type: string; start: { x: number, y: number } | {}, hitCount: number, end: { x: number, y: number } | {}, buffer: number }; type: string;
connections: { source: { modelUUID: string; pointUUID: string }; targets: { modelUUID: string; pointUUID: string }[] }; start: { x: number; y: number } | {};
speed: number; hitCount: number;
end: { x: number; y: number } | {};
buffer: number;
};
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
speed: number;
}; };
}; };
} };