140 lines
6.0 KiB
TypeScript
140 lines
6.0 KiB
TypeScript
import { useEffect, useRef, useState } from 'react'
|
|
import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
|
|
import MachineAnimator from '../animator/machineAnimator';
|
|
import { useProductStore } from '../../../../../store/simulation/useProductStore';
|
|
import { useTriggerHandler } from '../../../triggers/triggerHandler/useTriggerHandler';
|
|
import { useSceneContext } from '../../../../scene/sceneContext';
|
|
import { useProductContext } from '../../../products/productContext';
|
|
|
|
function MachineInstance({ machineDetail }: { readonly machineDetail: MachineStatus }) {
|
|
const [currentPhase, setCurrentPhase] = useState<string>('idle');
|
|
let isIncrememtable = useRef<boolean>(true);
|
|
const idleTimeRef = useRef<number>(0);
|
|
const activeTimeRef = useRef<number>(0);
|
|
const previousTimeRef = useRef<number | null>(null);
|
|
const animationFrameIdRef = useRef<number | null>(null);
|
|
const isSpeedRef = useRef<number>(0);
|
|
const isPausedRef = useRef<boolean>(false);
|
|
const { isPlaying } = usePlayButtonStore();
|
|
const { machineStore } = useSceneContext();
|
|
const { selectedProductStore } = useProductContext();
|
|
const { machines, setMachineState, setMachineActive, incrementIdleTime, incrementActiveTime, resetTime } = machineStore();
|
|
const { selectedProduct } = selectedProductStore();
|
|
const { getActionByUuid } = useProductStore();
|
|
const { triggerPointActions } = useTriggerHandler();
|
|
const { speed } = useAnimationPlaySpeed();
|
|
const { isPaused } = usePauseButtonStore();
|
|
useEffect(() => {
|
|
isPausedRef.current = isPaused;
|
|
}, [isPaused]);
|
|
|
|
useEffect(() => {
|
|
isSpeedRef.current = speed;
|
|
}, [speed]);
|
|
|
|
const reset = () => {
|
|
setCurrentPhase("idle");
|
|
setMachineState(machineDetail.modelUuid, 'idle');
|
|
setMachineActive(machineDetail.modelUuid, false);
|
|
isIncrememtable.current = true;
|
|
isPausedRef.current = false;
|
|
resetTime(machineDetail.modelUuid)
|
|
activeTimeRef.current = 0
|
|
idleTimeRef.current = 0
|
|
previousTimeRef.current = null
|
|
if (animationFrameIdRef.current !== null) {
|
|
cancelAnimationFrame(animationFrameIdRef.current)
|
|
animationFrameIdRef.current = null
|
|
}
|
|
}
|
|
|
|
function machineStatus(modelId: string, status: string) {
|
|
// console.log(`${modelId} , ${status}`);
|
|
}
|
|
function animate(currentTime: number) {
|
|
if (previousTimeRef.current === null) {
|
|
previousTimeRef.current = currentTime;
|
|
}
|
|
|
|
const deltaTime = (currentTime - previousTimeRef.current) / 1000;
|
|
previousTimeRef.current = currentTime;
|
|
|
|
if (machineDetail.isActive) {
|
|
if (!isPausedRef.current) {
|
|
activeTimeRef.current += deltaTime * isSpeedRef.current;
|
|
// console.log(' activeTimeRef.current: ', activeTimeRef.current);
|
|
}
|
|
} else {
|
|
if (!isPausedRef.current) {
|
|
idleTimeRef.current += deltaTime * isSpeedRef.current;
|
|
// console.log('idleTimeRef.curre: ', idleTimeRef.current);
|
|
}
|
|
}
|
|
animationFrameIdRef.current = requestAnimationFrame(animate);
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!isPlaying) return
|
|
if (!machineDetail.isActive) {
|
|
const roundedActiveTime = Math.round(activeTimeRef.current);
|
|
// console.log('Final Active Time:', roundedActiveTime, 'seconds');
|
|
incrementActiveTime(machineDetail.modelUuid, roundedActiveTime);
|
|
activeTimeRef.current = 0;
|
|
} else {
|
|
const roundedIdleTime = Math.round(idleTimeRef.current);
|
|
// console.log('Final Idle Time:', roundedIdleTime, 'seconds');
|
|
incrementIdleTime(machineDetail.modelUuid, roundedIdleTime);
|
|
idleTimeRef.current = 0;
|
|
}
|
|
|
|
if (animationFrameIdRef.current === null) {
|
|
animationFrameIdRef.current = requestAnimationFrame(animate);
|
|
}
|
|
|
|
return () => {
|
|
if (animationFrameIdRef.current !== null) {
|
|
cancelAnimationFrame(animationFrameIdRef.current);
|
|
animationFrameIdRef.current = null;
|
|
}
|
|
};
|
|
}, [machineDetail, isPlaying]);
|
|
|
|
useEffect(() => {
|
|
if (isPlaying) {
|
|
if (!machineDetail.isActive && machineDetail.state === "idle" && currentPhase == "idle" && !machineDetail.currentAction) {
|
|
machineStatus(machineDetail.modelUuid, 'Machine is idle and waiting for next instruction.')
|
|
} else if (!machineDetail.isActive && machineDetail.state === "idle" && currentPhase == "idle" && machineDetail.currentAction) {
|
|
setCurrentPhase("processing");
|
|
setMachineState(machineDetail.modelUuid, 'running');
|
|
setMachineActive(machineDetail.modelUuid, true);
|
|
machineStatus(machineDetail.modelUuid, "Machine started processing")
|
|
}
|
|
}
|
|
}, [currentPhase, isPlaying, machines])
|
|
|
|
function handleCallBack() {
|
|
if (currentPhase == "processing") {
|
|
setMachineState(machineDetail.modelUuid, 'idle');
|
|
setMachineActive(machineDetail.modelUuid, false);
|
|
setCurrentPhase("idle")
|
|
isIncrememtable.current = true;
|
|
machineStatus(machineDetail.modelUuid, "Machine has completed the processing")
|
|
|
|
if (machineDetail.currentAction) {
|
|
const action = getActionByUuid(selectedProduct.productId, machineDetail.currentAction.actionUuid);
|
|
if (action && machineDetail.currentAction.materialId) {
|
|
triggerPointActions(action, machineDetail.currentAction.materialId)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<MachineAnimator processingTime={machineDetail.point.action.processTime} handleCallBack={handleCallBack} currentPhase={currentPhase} machineUuid={machineDetail.modelUuid} machineStatus={machineStatus} reset={reset} />
|
|
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default MachineInstance |