Refactor vehicle simulation components for improved path handling and state management
- Updated PointsCreator component to enhance event data selection and keyboard handling. - Refactored VehicleAnimator to streamline animation logic and reset handling. - Simplified VehicleInstance logic for better clarity and maintainability. - Modified vehicle data structure to include rotation information for pick-up and unload points. - Adjusted TypeScript types to reflect new vehicle point schema with nested position and rotation properties.
This commit is contained in:
parent
ccc7a1d954
commit
ea53af62c4
|
|
@ -4,196 +4,182 @@ import RenameInput from "../../../../../ui/inputs/RenameInput";
|
||||||
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
|
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
|
||||||
import Trigger from "../trigger/Trigger";
|
import Trigger from "../trigger/Trigger";
|
||||||
import {
|
import {
|
||||||
useSelectedEventData,
|
useSelectedEventData,
|
||||||
useSelectedProduct,
|
useSelectedProduct,
|
||||||
} from "../../../../../../store/simulation/useSimulationStore";
|
} from "../../../../../../store/simulation/useSimulationStore";
|
||||||
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
|
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
|
||||||
import TravelAction from "../actions/TravelAction";
|
import TravelAction from "../actions/TravelAction";
|
||||||
import ActionsList from "../components/ActionsList";
|
import ActionsList from "../components/ActionsList";
|
||||||
|
|
||||||
function VehicleMechanics() {
|
function VehicleMechanics() {
|
||||||
const [activeOption, setActiveOption] = useState<"default" | "travel">(
|
const [activeOption, setActiveOption] = useState<"default" | "travel">(
|
||||||
"default"
|
"default"
|
||||||
);
|
);
|
||||||
const [selectedPointData, setSelectedPointData] = useState<
|
const [selectedPointData, setSelectedPointData] = useState<VehiclePointSchema | undefined>();
|
||||||
VehiclePointSchema | undefined
|
const { selectedEventData } = useSelectedEventData();
|
||||||
>();
|
const { getPointByUuid, updateEvent, updateAction } = useProductStore();
|
||||||
const { selectedEventData } = useSelectedEventData();
|
const { selectedProduct } = useSelectedProduct();
|
||||||
const { getPointByUuid, updateEvent, updateAction } = useProductStore();
|
|
||||||
const { selectedProduct } = useSelectedProduct();
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (selectedEventData) {
|
if (selectedEventData) {
|
||||||
const point = getPointByUuid(
|
const point = getPointByUuid(
|
||||||
selectedProduct.productId,
|
selectedProduct.productId,
|
||||||
selectedEventData.data.modelUuid,
|
selectedEventData.data.modelUuid,
|
||||||
selectedEventData.selectedPoint
|
selectedEventData.selectedPoint
|
||||||
) as VehiclePointSchema | undefined;
|
) as VehiclePointSchema | undefined;
|
||||||
|
|
||||||
if (point) {
|
if (point) {
|
||||||
setSelectedPointData(point);
|
setSelectedPointData(point);
|
||||||
setActiveOption(point.action.actionType as "travel");
|
setActiveOption(point.action.actionType as "travel");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [selectedProduct, selectedEventData, getPointByUuid]);
|
}, [selectedProduct, selectedEventData, getPointByUuid]);
|
||||||
|
|
||||||
const handleSpeedChange = (value: string) => {
|
const handleSpeedChange = (value: string) => {
|
||||||
if (!selectedEventData) return;
|
if (!selectedEventData) return;
|
||||||
updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
|
updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
|
||||||
speed: parseFloat(value),
|
speed: parseFloat(value),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleActionTypeChange = (option: string) => {
|
const handleActionTypeChange = (option: string) => {
|
||||||
if (!selectedEventData || !selectedPointData) return;
|
if (!selectedEventData || !selectedPointData) return;
|
||||||
const validOption = option as "travel";
|
const validOption = option as "travel";
|
||||||
setActiveOption(validOption);
|
setActiveOption(validOption);
|
||||||
|
|
||||||
updateAction(selectedPointData.action.actionUuid, {
|
updateAction(selectedPointData.action.actionUuid, {
|
||||||
actionType: validOption,
|
actionType: validOption,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleRenameAction = (newName: string) => {
|
const handleRenameAction = (newName: string) => {
|
||||||
if (!selectedPointData) return;
|
if (!selectedPointData) return;
|
||||||
updateAction(selectedPointData.action.actionUuid, { actionName: newName });
|
updateAction(selectedPointData.action.actionUuid, { actionName: newName });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleLoadCapacityChange = (value: string) => {
|
const handleLoadCapacityChange = (value: string) => {
|
||||||
if (!selectedPointData) return;
|
if (!selectedPointData) return;
|
||||||
updateAction(selectedPointData.action.actionUuid, {
|
updateAction(selectedPointData.action.actionUuid, {
|
||||||
loadCapacity: parseFloat(value),
|
loadCapacity: parseFloat(value),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleUnloadDurationChange = (value: string) => {
|
const handleUnloadDurationChange = (value: string) => {
|
||||||
if (!selectedPointData) return;
|
if (!selectedPointData) return;
|
||||||
updateAction(selectedPointData.action.actionUuid, {
|
updateAction(selectedPointData.action.actionUuid, {
|
||||||
unLoadDuration: parseFloat(value),
|
unLoadDuration: parseFloat(value),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlePickPointChange = (value: string) => {
|
const handlePickPointChange = (value: string) => {
|
||||||
if (!selectedPointData) return;
|
if (!selectedPointData) return;
|
||||||
const [x, y, z] = value.split(",").map(Number);
|
};
|
||||||
updateAction(selectedPointData.action.actionUuid, {
|
|
||||||
pickUpPoint: { x, y, z },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUnloadPointChange = (value: string) => {
|
const handleUnloadPointChange = (value: string) => {
|
||||||
if (!selectedPointData) return;
|
if (!selectedPointData) return;
|
||||||
const [x, y, z] = value.split(",").map(Number);
|
};
|
||||||
updateAction(selectedPointData.action.actionUuid, {
|
|
||||||
unLoadPoint: { x, y, z },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Get current values from store
|
// Get current values from store
|
||||||
const currentSpeed =
|
const currentSpeed =
|
||||||
selectedEventData?.data.type === "vehicle"
|
selectedEventData?.data.type === "vehicle"
|
||||||
? selectedEventData.data.speed.toString()
|
? selectedEventData.data.speed.toString()
|
||||||
: "0.5";
|
: "0.5";
|
||||||
|
|
||||||
const currentActionName = selectedPointData
|
const currentActionName = selectedPointData
|
||||||
? selectedPointData.action.actionName
|
? selectedPointData.action.actionName
|
||||||
: "Action Name";
|
: "Action Name";
|
||||||
|
|
||||||
const currentLoadCapacity = selectedPointData
|
const currentLoadCapacity = selectedPointData
|
||||||
? selectedPointData.action.loadCapacity.toString()
|
? selectedPointData.action.loadCapacity.toString()
|
||||||
: "1";
|
: "1";
|
||||||
|
|
||||||
const currentUnloadDuration = selectedPointData
|
const currentUnloadDuration = selectedPointData
|
||||||
? selectedPointData.action.unLoadDuration.toString()
|
? selectedPointData.action.unLoadDuration.toString()
|
||||||
: "1";
|
: "1";
|
||||||
|
|
||||||
const currentPickPoint = selectedPointData?.action.pickUpPoint
|
const currentPickPoint = selectedPointData?.action.pickUpPoint;
|
||||||
? `${selectedPointData.action.pickUpPoint.x},${selectedPointData.action.pickUpPoint.y},${selectedPointData.action.pickUpPoint.z}`
|
|
||||||
: "";
|
|
||||||
|
|
||||||
const currentUnloadPoint = selectedPointData?.action.unLoadPoint
|
const currentUnloadPoint = selectedPointData?.action.unLoadPoint;
|
||||||
? `${selectedPointData.action.unLoadPoint.x},${selectedPointData.action.unLoadPoint.y},${selectedPointData.action.unLoadPoint.z}`
|
|
||||||
: "";
|
|
||||||
|
|
||||||
const availableActions = {
|
const availableActions = {
|
||||||
defaultOption: "travel",
|
defaultOption: "travel",
|
||||||
options: ["travel"],
|
options: ["travel"],
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
{selectedEventData && (
|
|
||||||
<>
|
<>
|
||||||
<div className="global-props">
|
{selectedEventData && (
|
||||||
<div className="property-list-container">
|
<>
|
||||||
<div className="property-item">
|
<div className="global-props">
|
||||||
<InputWithDropDown
|
<div className="property-list-container">
|
||||||
label="Speed"
|
<div className="property-item">
|
||||||
value={currentSpeed}
|
<InputWithDropDown
|
||||||
min={0}
|
label="Speed"
|
||||||
step={0.1}
|
value={currentSpeed}
|
||||||
defaultValue={"0.5"}
|
min={0}
|
||||||
max={10}
|
step={0.1}
|
||||||
activeOption="m/s"
|
defaultValue={"0.5"}
|
||||||
onClick={() => {}}
|
max={10}
|
||||||
onChange={handleSpeedChange}
|
activeOption="m/s"
|
||||||
/>
|
onClick={() => { }}
|
||||||
</div>
|
onChange={handleSpeedChange}
|
||||||
</div>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<ActionsList
|
</div>
|
||||||
setSelectedPointData={setSelectedPointData}
|
</div>
|
||||||
selectedPointData={selectedPointData}
|
<ActionsList
|
||||||
/>
|
setSelectedPointData={setSelectedPointData}
|
||||||
<div className="selected-actions-details">
|
selectedPointData={selectedPointData}
|
||||||
<div className="selected-actions-header">
|
/>
|
||||||
<RenameInput
|
<div className="selected-actions-details">
|
||||||
value={currentActionName}
|
<div className="selected-actions-header">
|
||||||
onRename={handleRenameAction}
|
<RenameInput
|
||||||
/>
|
value={currentActionName}
|
||||||
</div>
|
onRename={handleRenameAction}
|
||||||
<div className="selected-actions-list">
|
/>
|
||||||
<LabledDropdown
|
</div>
|
||||||
defaultOption="travel"
|
<div className="selected-actions-list">
|
||||||
options={availableActions.options}
|
<LabledDropdown
|
||||||
onSelect={handleActionTypeChange}
|
defaultOption="travel"
|
||||||
/>
|
options={availableActions.options}
|
||||||
|
onSelect={handleActionTypeChange}
|
||||||
|
/>
|
||||||
|
|
||||||
{activeOption === "travel" && (
|
{activeOption === "travel" && (
|
||||||
<TravelAction
|
<TravelAction
|
||||||
loadCapacity={{
|
loadCapacity={{
|
||||||
value: currentLoadCapacity,
|
value: currentLoadCapacity,
|
||||||
min: 1,
|
min: 1,
|
||||||
max: 100,
|
max: 100,
|
||||||
defaultValue: "1",
|
defaultValue: "1",
|
||||||
onChange: handleLoadCapacityChange,
|
onChange: handleLoadCapacityChange,
|
||||||
}}
|
}}
|
||||||
unloadDuration={{
|
unloadDuration={{
|
||||||
value: currentUnloadDuration,
|
value: currentUnloadDuration,
|
||||||
min: 1,
|
min: 1,
|
||||||
max: 60,
|
max: 60,
|
||||||
defaultValue: "1",
|
defaultValue: "1",
|
||||||
onChange: handleUnloadDurationChange,
|
onChange: handleUnloadDurationChange,
|
||||||
}}
|
}}
|
||||||
// pickPoint={{
|
// pickPoint={{
|
||||||
// value: currentPickPoint,
|
// value: currentPickPoint,
|
||||||
// onChange: handlePickPointChange,
|
// onChange: handlePickPointChange,
|
||||||
// }}
|
// }}
|
||||||
// unloadPoint={{
|
// unloadPoint={{
|
||||||
// value: currentUnloadPoint,
|
// value: currentUnloadPoint,
|
||||||
// onChange: handleUnloadPointChange,
|
// onChange: handleUnloadPointChange,
|
||||||
// }}
|
// }}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="tirgger">
|
<div className="tirgger">
|
||||||
<Trigger />
|
<Trigger />
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
);
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default VehicleMechanics;
|
export default VehicleMechanics;
|
||||||
|
|
|
||||||
|
|
@ -15,36 +15,36 @@ function PointsCreator() {
|
||||||
const { selectedEventSphere, setSelectedEventSphere, clearSelectedEventSphere } = useSelectedEventSphere();
|
const { selectedEventSphere, setSelectedEventSphere, clearSelectedEventSphere } = useSelectedEventSphere();
|
||||||
const { setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
|
const { setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (selectedEventSphere) {
|
if (selectedEventSphere) {
|
||||||
const eventData = getEventByModelUuid(
|
const eventData = getEventByModelUuid(
|
||||||
selectedEventSphere.userData.modelUuid
|
selectedEventSphere.userData.modelUuid
|
||||||
);
|
);
|
||||||
if (eventData) {
|
if (eventData) {
|
||||||
setSelectedEventData(eventData, selectedEventSphere.userData.pointUuid);
|
setSelectedEventData(eventData, selectedEventSphere.userData.pointUuid);
|
||||||
} else {
|
} else {
|
||||||
clearSelectedEventData();
|
clearSelectedEventData();
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
clearSelectedEventData();
|
clearSelectedEventData();
|
||||||
}
|
}
|
||||||
}, [selectedEventSphere]);
|
}, [selectedEventSphere]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleKeyDown = (e: KeyboardEvent) => {
|
const handleKeyDown = (e: KeyboardEvent) => {
|
||||||
const keyCombination = detectModifierKeys(e);
|
const keyCombination = detectModifierKeys(e);
|
||||||
if (!selectedEventSphere) return;
|
if (!selectedEventSphere) return;
|
||||||
if (keyCombination === "G") {
|
if (keyCombination === "G") {
|
||||||
setTransformMode((prev) => (prev === "translate" ? null : "translate"));
|
setTransformMode((prev) => (prev === "translate" ? null : "translate"));
|
||||||
}
|
}
|
||||||
if (keyCombination === "R") {
|
if (keyCombination === "R") {
|
||||||
setTransformMode((prev) => (prev === "rotate" ? null : "rotate"));
|
setTransformMode((prev) => (prev === "rotate" ? null : "rotate"));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
window.addEventListener("keydown", handleKeyDown);
|
window.addEventListener("keydown", handleKeyDown);
|
||||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||||
}, [selectedEventSphere]);
|
}, [selectedEventSphere]);
|
||||||
|
|
||||||
const updatePointToState = (selectedEventSphere: THREE.Mesh) => {
|
const updatePointToState = (selectedEventSphere: THREE.Mesh) => {
|
||||||
let point = JSON.parse(JSON.stringify(getPointByUuid(selectedEventSphere.userData.modelUuid, selectedEventSphere.userData.pointUuid)));
|
let point = JSON.parse(JSON.stringify(getPointByUuid(selectedEventSphere.userData.modelUuid, selectedEventSphere.userData.pointUuid)));
|
||||||
|
|
|
||||||
|
|
@ -7,269 +7,267 @@ import { useAnimationPlaySpeed, usePauseButtonStore, useResetButtonStore } from
|
||||||
import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
|
import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
|
||||||
|
|
||||||
interface VehicleAnimatorProps {
|
interface VehicleAnimatorProps {
|
||||||
path: [number, number, number][];
|
path: [number, number, number][];
|
||||||
handleCallBack: () => void;
|
handleCallBack: () => void;
|
||||||
reset: () => void;
|
reset: () => void;
|
||||||
currentPhase: string;
|
currentPhase: string;
|
||||||
agvUuid: number;
|
agvUuid: number;
|
||||||
agvDetail: any;
|
agvDetail: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset }: VehicleAnimatorProps) {
|
function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset }: VehicleAnimatorProps) {
|
||||||
const { decrementVehicleLoad, vehicles } = useVehicleStore();
|
const { decrementVehicleLoad, vehicles } = useVehicleStore();
|
||||||
const { isPaused } = usePauseButtonStore();
|
const { isPaused } = usePauseButtonStore();
|
||||||
const { speed } = useAnimationPlaySpeed();
|
const { speed } = useAnimationPlaySpeed();
|
||||||
const { isReset } = useResetButtonStore();
|
const { isReset } = useResetButtonStore();
|
||||||
const [restRotation, setRestingRotation] = useState<boolean>(true);
|
const [restRotation, setRestingRotation] = useState<boolean>(true);
|
||||||
const [progress, setProgress] = useState<number>(0);
|
const [progress, setProgress] = useState<number>(0);
|
||||||
const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
|
const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
|
||||||
const { scene } = useThree();
|
const { scene } = useThree();
|
||||||
const progressRef = useRef<number>(0);
|
const progressRef = useRef<number>(0);
|
||||||
const movingForward = useRef<boolean>(true);
|
const movingForward = useRef<boolean>(true);
|
||||||
const completedRef = useRef<boolean>(false);
|
const completedRef = useRef<boolean>(false);
|
||||||
let startTime: number;
|
let startTime: number;
|
||||||
let pausedTime: number;
|
let pausedTime: number;
|
||||||
let fixedInterval: number;
|
let fixedInterval: number;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (currentPhase === 'stationed-pickup' && path.length > 0) {
|
if (currentPhase === 'stationed-pickup' && path.length > 0) {
|
||||||
setCurrentPath(path);
|
setCurrentPath(path);
|
||||||
} else if (currentPhase === 'pickup-drop' && path.length > 0) {
|
} else if (currentPhase === 'pickup-drop' && path.length > 0) {
|
||||||
setCurrentPath(path);
|
setCurrentPath(path);
|
||||||
} else if (currentPhase === 'drop-pickup' && path.length > 0) {
|
} else if (currentPhase === 'drop-pickup' && path.length > 0) {
|
||||||
setCurrentPath(path);
|
setCurrentPath(path);
|
||||||
}
|
|
||||||
}, [currentPhase, path]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setProgress(0);
|
|
||||||
completedRef.current = false;
|
|
||||||
}, [currentPath]);
|
|
||||||
// useEffect(() => {
|
|
||||||
// console.log('isReset: ', isReset);
|
|
||||||
// if (isReset) {
|
|
||||||
// reset();
|
|
||||||
// setCurrentPath([]);
|
|
||||||
// setProgress(0);
|
|
||||||
// completedRef.current = false;
|
|
||||||
// decrementVehicleLoad(agvDetail.modelUuid, 0)
|
|
||||||
// }
|
|
||||||
// }, [isReset])
|
|
||||||
|
|
||||||
// useFrame((_, delta) => {
|
|
||||||
// const object = scene.getObjectByProperty('uuid', agvUuid);
|
|
||||||
// if (!object || currentPath.length < 2) return;
|
|
||||||
// if (isPaused) return;
|
|
||||||
|
|
||||||
// let totalDistance = 0;
|
|
||||||
// const distances = [];
|
|
||||||
|
|
||||||
// for (let i = 0; i < currentPath.length - 1; i++) {
|
|
||||||
// const start = new THREE.Vector3(...currentPath[i]);
|
|
||||||
// const end = new THREE.Vector3(...currentPath[i + 1]);
|
|
||||||
// const segmentDistance = start.distanceTo(end);
|
|
||||||
// distances.push(segmentDistance);
|
|
||||||
// totalDistance += segmentDistance;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// let coveredDistance = progressRef.current;
|
|
||||||
// let accumulatedDistance = 0;
|
|
||||||
// let index = 0;
|
|
||||||
|
|
||||||
// while (
|
|
||||||
// index < distances.length &&
|
|
||||||
// coveredDistance > accumulatedDistance + distances[index]
|
|
||||||
// ) {
|
|
||||||
// accumulatedDistance += distances[index];
|
|
||||||
// index++;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if (index < distances.length) {
|
|
||||||
// const start = new THREE.Vector3(...currentPath[index]);
|
|
||||||
// const end = new THREE.Vector3(...currentPath[index + 1]);
|
|
||||||
// const segmentDistance = distances[index];
|
|
||||||
|
|
||||||
// const currentDirection = new THREE.Vector3().subVectors(end, start).normalize();
|
|
||||||
// const targetAngle = Math.atan2(currentDirection.x, currentDirection.z);
|
|
||||||
// const rotationSpeed = 2.0;
|
|
||||||
// const currentAngle = object.rotation.y;
|
|
||||||
|
|
||||||
// let angleDifference = targetAngle - currentAngle;
|
|
||||||
// if (angleDifference > Math.PI) angleDifference -= 2 * Math.PI;
|
|
||||||
// if (angleDifference < -Math.PI) angleDifference += 2 * Math.PI;
|
|
||||||
|
|
||||||
// const maxRotationStep = rotationSpeed * delta;
|
|
||||||
// object.rotation.y += Math.sign(angleDifference) * Math.min(Math.abs(angleDifference), maxRotationStep);
|
|
||||||
|
|
||||||
// const isAligned = Math.abs(angleDifference) < 0.01;
|
|
||||||
|
|
||||||
// if (isAligned) {
|
|
||||||
// progressRef.current += delta * (speed * agvDetail.speed);
|
|
||||||
// coveredDistance = progressRef.current;
|
|
||||||
|
|
||||||
// const t = (coveredDistance - accumulatedDistance) / segmentDistance;
|
|
||||||
// const position = start.clone().lerp(end, t);
|
|
||||||
// object.position.copy(position);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if (progressRef.current >= totalDistance) {
|
|
||||||
// if (restRotation) {
|
|
||||||
// const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, 0));
|
|
||||||
// object.quaternion.slerp(targetQuaternion, delta * 2);
|
|
||||||
// const angleDiff = object.quaternion.angleTo(targetQuaternion);
|
|
||||||
// if (angleDiff < 0.01) {
|
|
||||||
// let objectRotation = agvDetail.point.rotation
|
|
||||||
// object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
|
|
||||||
// setRestingRotation(false);
|
|
||||||
// }
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if (progressRef.current >= totalDistance) {
|
|
||||||
// setRestingRotation(true);
|
|
||||||
// progressRef.current = 0;
|
|
||||||
// movingForward.current = !movingForward.current;
|
|
||||||
// setCurrentPath([]);
|
|
||||||
// handleCallBack();
|
|
||||||
// if (currentPhase === 'pickup-drop') {
|
|
||||||
// requestAnimationFrame(firstFrame);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
useEffect(() => {
|
|
||||||
console.log('isReset: ', isReset);
|
|
||||||
if (isReset) {
|
|
||||||
reset();
|
|
||||||
setCurrentPath([]);
|
|
||||||
setProgress(0);
|
|
||||||
progressRef.current = 0;
|
|
||||||
completedRef.current = false;
|
|
||||||
movingForward.current = true;
|
|
||||||
setRestingRotation(false);
|
|
||||||
decrementVehicleLoad(agvDetail.modelUuid, 0);
|
|
||||||
console.log('agvDetail: ', vehicles);
|
|
||||||
}
|
|
||||||
}, [isReset]);
|
|
||||||
|
|
||||||
useFrame((_, delta) => {
|
|
||||||
// If reset is active, don't run anything in frame
|
|
||||||
if (isReset) return;
|
|
||||||
|
|
||||||
const object = scene.getObjectByProperty('uuid', agvUuid);
|
|
||||||
if (!object || currentPath.length < 2) return;
|
|
||||||
if (isPaused) return;
|
|
||||||
|
|
||||||
let totalDistance = 0;
|
|
||||||
const distances = [];
|
|
||||||
|
|
||||||
for (let i = 0; i < currentPath.length - 1; i++) {
|
|
||||||
const start = new THREE.Vector3(...currentPath[i]);
|
|
||||||
const end = new THREE.Vector3(...currentPath[i + 1]);
|
|
||||||
const segmentDistance = start.distanceTo(end);
|
|
||||||
distances.push(segmentDistance);
|
|
||||||
totalDistance += segmentDistance;
|
|
||||||
}
|
|
||||||
|
|
||||||
let coveredDistance = progressRef.current;
|
|
||||||
let accumulatedDistance = 0;
|
|
||||||
let index = 0;
|
|
||||||
|
|
||||||
while (index < distances.length && coveredDistance > accumulatedDistance + distances[index]) {
|
|
||||||
accumulatedDistance += distances[index];
|
|
||||||
index++;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (index < distances.length) {
|
|
||||||
const start = new THREE.Vector3(...currentPath[index]);
|
|
||||||
const end = new THREE.Vector3(...currentPath[index + 1]);
|
|
||||||
const segmentDistance = distances[index];
|
|
||||||
|
|
||||||
const currentDirection = new THREE.Vector3().subVectors(end, start).normalize();
|
|
||||||
const targetAngle = Math.atan2(currentDirection.x, currentDirection.z);
|
|
||||||
const currentAngle = object.rotation.y;
|
|
||||||
|
|
||||||
let angleDifference = targetAngle - currentAngle;
|
|
||||||
if (angleDifference > Math.PI) angleDifference -= 2 * Math.PI;
|
|
||||||
if (angleDifference < -Math.PI) angleDifference += 2 * Math.PI;
|
|
||||||
|
|
||||||
const rotationSpeed = 2.0;
|
|
||||||
const maxRotationStep = rotationSpeed * delta;
|
|
||||||
const rotationStep = Math.sign(angleDifference) * Math.min(Math.abs(angleDifference), maxRotationStep);
|
|
||||||
object.rotation.y += rotationStep;
|
|
||||||
|
|
||||||
const isAligned = Math.abs(angleDifference) < 0.01;
|
|
||||||
|
|
||||||
if (isAligned) {
|
|
||||||
progressRef.current += delta * (speed * agvDetail.speed);
|
|
||||||
coveredDistance = progressRef.current;
|
|
||||||
|
|
||||||
const t = (coveredDistance - accumulatedDistance) / segmentDistance;
|
|
||||||
const position = start.clone().lerp(end, t);
|
|
||||||
object.position.copy(position);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (progressRef.current >= totalDistance) {
|
|
||||||
if (restRotation) {
|
|
||||||
const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, 0));
|
|
||||||
object.quaternion.slerp(targetQuaternion, delta * 2);
|
|
||||||
const angleDiff = object.quaternion.angleTo(targetQuaternion);
|
|
||||||
if (angleDiff < 0.01) {
|
|
||||||
const objectRotation = agvDetail.point.rotation;
|
|
||||||
object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
|
|
||||||
setRestingRotation(false);
|
|
||||||
}
|
}
|
||||||
} else {
|
}, [currentPhase, path]);
|
||||||
setRestingRotation(true);
|
|
||||||
progressRef.current = 0;
|
useEffect(() => {
|
||||||
movingForward.current = !movingForward.current;
|
setProgress(0);
|
||||||
setCurrentPath([]);
|
completedRef.current = false;
|
||||||
handleCallBack();
|
}, [currentPath]);
|
||||||
if (currentPhase === 'pickup-drop') {
|
// useEffect(() => {
|
||||||
requestAnimationFrame(firstFrame);
|
// console.log('isReset: ', isReset);
|
||||||
|
// if (isReset) {
|
||||||
|
// reset();
|
||||||
|
// setCurrentPath([]);
|
||||||
|
// setProgress(0);
|
||||||
|
// completedRef.current = false;
|
||||||
|
// decrementVehicleLoad(agvDetail.modelUuid, 0)
|
||||||
|
// }
|
||||||
|
// }, [isReset])
|
||||||
|
|
||||||
|
// useFrame((_, delta) => {
|
||||||
|
// const object = scene.getObjectByProperty('uuid', agvUuid);
|
||||||
|
// if (!object || currentPath.length < 2) return;
|
||||||
|
// if (isPaused) return;
|
||||||
|
|
||||||
|
// let totalDistance = 0;
|
||||||
|
// const distances = [];
|
||||||
|
|
||||||
|
// for (let i = 0; i < currentPath.length - 1; i++) {
|
||||||
|
// const start = new THREE.Vector3(...currentPath[i]);
|
||||||
|
// const end = new THREE.Vector3(...currentPath[i + 1]);
|
||||||
|
// const segmentDistance = start.distanceTo(end);
|
||||||
|
// distances.push(segmentDistance);
|
||||||
|
// totalDistance += segmentDistance;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// let coveredDistance = progressRef.current;
|
||||||
|
// let accumulatedDistance = 0;
|
||||||
|
// let index = 0;
|
||||||
|
|
||||||
|
// while (
|
||||||
|
// index < distances.length &&
|
||||||
|
// coveredDistance > accumulatedDistance + distances[index]
|
||||||
|
// ) {
|
||||||
|
// accumulatedDistance += distances[index];
|
||||||
|
// index++;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (index < distances.length) {
|
||||||
|
// const start = new THREE.Vector3(...currentPath[index]);
|
||||||
|
// const end = new THREE.Vector3(...currentPath[index + 1]);
|
||||||
|
// const segmentDistance = distances[index];
|
||||||
|
|
||||||
|
// const currentDirection = new THREE.Vector3().subVectors(end, start).normalize();
|
||||||
|
// const targetAngle = Math.atan2(currentDirection.x, currentDirection.z);
|
||||||
|
// const rotationSpeed = 2.0;
|
||||||
|
// const currentAngle = object.rotation.y;
|
||||||
|
|
||||||
|
// let angleDifference = targetAngle - currentAngle;
|
||||||
|
// if (angleDifference > Math.PI) angleDifference -= 2 * Math.PI;
|
||||||
|
// if (angleDifference < -Math.PI) angleDifference += 2 * Math.PI;
|
||||||
|
|
||||||
|
// const maxRotationStep = rotationSpeed * delta;
|
||||||
|
// object.rotation.y += Math.sign(angleDifference) * Math.min(Math.abs(angleDifference), maxRotationStep);
|
||||||
|
|
||||||
|
// const isAligned = Math.abs(angleDifference) < 0.01;
|
||||||
|
|
||||||
|
// if (isAligned) {
|
||||||
|
// progressRef.current += delta * (speed * agvDetail.speed);
|
||||||
|
// coveredDistance = progressRef.current;
|
||||||
|
|
||||||
|
// const t = (coveredDistance - accumulatedDistance) / segmentDistance;
|
||||||
|
// const position = start.clone().lerp(end, t);
|
||||||
|
// object.position.copy(position);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (progressRef.current >= totalDistance) {
|
||||||
|
// if (restRotation) {
|
||||||
|
// const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, 0));
|
||||||
|
// object.quaternion.slerp(targetQuaternion, delta * 2);
|
||||||
|
// const angleDiff = object.quaternion.angleTo(targetQuaternion);
|
||||||
|
// if (angleDiff < 0.01) {
|
||||||
|
// let objectRotation = agvDetail.point.rotation
|
||||||
|
// object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
|
||||||
|
// setRestingRotation(false);
|
||||||
|
// }
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (progressRef.current >= totalDistance) {
|
||||||
|
// setRestingRotation(true);
|
||||||
|
// progressRef.current = 0;
|
||||||
|
// movingForward.current = !movingForward.current;
|
||||||
|
// setCurrentPath([]);
|
||||||
|
// handleCallBack();
|
||||||
|
// if (currentPhase === 'pickup-drop') {
|
||||||
|
// requestAnimationFrame(firstFrame);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
useEffect(() => {
|
||||||
|
if (isReset) {
|
||||||
|
reset();
|
||||||
|
setCurrentPath([]);
|
||||||
|
setProgress(0);
|
||||||
|
progressRef.current = 0;
|
||||||
|
completedRef.current = false;
|
||||||
|
movingForward.current = true;
|
||||||
|
setRestingRotation(false);
|
||||||
|
decrementVehicleLoad(agvDetail.modelUuid, 0);
|
||||||
}
|
}
|
||||||
}
|
}, [isReset]);
|
||||||
|
|
||||||
|
useFrame((_, delta) => {
|
||||||
|
// If reset is active, don't run anything in frame
|
||||||
|
if (isReset) return;
|
||||||
|
|
||||||
|
const object = scene.getObjectByProperty('uuid', agvUuid);
|
||||||
|
if (!object || currentPath.length < 2) return;
|
||||||
|
if (isPaused) return;
|
||||||
|
|
||||||
|
let totalDistance = 0;
|
||||||
|
const distances = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < currentPath.length - 1; i++) {
|
||||||
|
const start = new THREE.Vector3(...currentPath[i]);
|
||||||
|
const end = new THREE.Vector3(...currentPath[i + 1]);
|
||||||
|
const segmentDistance = start.distanceTo(end);
|
||||||
|
distances.push(segmentDistance);
|
||||||
|
totalDistance += segmentDistance;
|
||||||
|
}
|
||||||
|
|
||||||
|
let coveredDistance = progressRef.current;
|
||||||
|
let accumulatedDistance = 0;
|
||||||
|
let index = 0;
|
||||||
|
|
||||||
|
while (index < distances.length && coveredDistance > accumulatedDistance + distances[index]) {
|
||||||
|
accumulatedDistance += distances[index];
|
||||||
|
index++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (index < distances.length) {
|
||||||
|
const start = new THREE.Vector3(...currentPath[index]);
|
||||||
|
const end = new THREE.Vector3(...currentPath[index + 1]);
|
||||||
|
const segmentDistance = distances[index];
|
||||||
|
|
||||||
|
const currentDirection = new THREE.Vector3().subVectors(end, start).normalize();
|
||||||
|
const targetAngle = Math.atan2(currentDirection.x, currentDirection.z);
|
||||||
|
const currentAngle = object.rotation.y;
|
||||||
|
|
||||||
|
let angleDifference = targetAngle - currentAngle;
|
||||||
|
if (angleDifference > Math.PI) angleDifference -= 2 * Math.PI;
|
||||||
|
if (angleDifference < -Math.PI) angleDifference += 2 * Math.PI;
|
||||||
|
|
||||||
|
const rotationSpeed = 2.0;
|
||||||
|
const maxRotationStep = rotationSpeed * delta;
|
||||||
|
const rotationStep = Math.sign(angleDifference) * Math.min(Math.abs(angleDifference), maxRotationStep);
|
||||||
|
object.rotation.y += rotationStep;
|
||||||
|
|
||||||
|
const isAligned = Math.abs(angleDifference) < 0.01;
|
||||||
|
|
||||||
|
if (isAligned) {
|
||||||
|
progressRef.current += delta * (speed * agvDetail.speed);
|
||||||
|
coveredDistance = progressRef.current;
|
||||||
|
|
||||||
|
const t = (coveredDistance - accumulatedDistance) / segmentDistance;
|
||||||
|
const position = start.clone().lerp(end, t);
|
||||||
|
object.position.copy(position);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progressRef.current >= totalDistance) {
|
||||||
|
if (restRotation) {
|
||||||
|
const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, 0));
|
||||||
|
object.quaternion.slerp(targetQuaternion, delta * 2);
|
||||||
|
const angleDiff = object.quaternion.angleTo(targetQuaternion);
|
||||||
|
if (angleDiff < 0.01) {
|
||||||
|
const objectRotation = agvDetail.point.rotation;
|
||||||
|
object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
|
||||||
|
setRestingRotation(false);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setRestingRotation(true);
|
||||||
|
progressRef.current = 0;
|
||||||
|
movingForward.current = !movingForward.current;
|
||||||
|
setCurrentPath([]);
|
||||||
|
handleCallBack();
|
||||||
|
if (currentPhase === 'pickup-drop') {
|
||||||
|
requestAnimationFrame(firstFrame);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function firstFrame() {
|
||||||
|
const unLoadDuration = agvDetail.point.action.unLoadDuration;
|
||||||
|
const droppedMaterial = agvDetail.currentLoad;
|
||||||
|
fixedInterval = (unLoadDuration / droppedMaterial) * 1000;
|
||||||
|
startTime = performance.now();
|
||||||
|
step(droppedMaterial);
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
function firstFrame() {
|
function step(droppedMaterial: number) {
|
||||||
const unLoadDuration = agvDetail.point.action.unLoadDuration;
|
const elapsedTime = (performance.now() - startTime) * speed;
|
||||||
const droppedMaterial = agvDetail.currentLoad;
|
if (elapsedTime >= fixedInterval) {
|
||||||
fixedInterval = (unLoadDuration / droppedMaterial) * 1000;
|
let droppedMat = droppedMaterial - 1;
|
||||||
startTime = performance.now();
|
decrementVehicleLoad(agvDetail.modelUuid, 1);
|
||||||
step(droppedMaterial);
|
if (droppedMat === 0) return;
|
||||||
}
|
startTime = performance.now();
|
||||||
|
requestAnimationFrame(() => step(droppedMat));
|
||||||
function step(droppedMaterial: number) {
|
} else {
|
||||||
const elapsedTime = (performance.now() - startTime) * speed;
|
requestAnimationFrame(() => step(droppedMaterial));
|
||||||
if (elapsedTime >= fixedInterval) {
|
}
|
||||||
let droppedMat = droppedMaterial - 1;
|
|
||||||
decrementVehicleLoad(agvDetail.modelUuid, 1);
|
|
||||||
if (droppedMat === 0) return;
|
|
||||||
startTime = performance.now();
|
|
||||||
requestAnimationFrame(() => step(droppedMat));
|
|
||||||
} else {
|
|
||||||
requestAnimationFrame(() => step(droppedMaterial));
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
{currentPath.length > 0 && (
|
|
||||||
<>
|
<>
|
||||||
<Line points={currentPath} color="blue" lineWidth={3} />
|
{currentPath.length > 0 && (
|
||||||
{currentPath.map((point, index) => (
|
<>
|
||||||
<mesh key={index} position={point}>
|
<Line points={currentPath} color="blue" lineWidth={3} />
|
||||||
<sphereGeometry args={[0.1, 16, 16]} />
|
{currentPath.map((point, index) => (
|
||||||
<meshStandardMaterial color="red" />
|
<mesh key={index} position={point}>
|
||||||
</mesh>
|
<sphereGeometry args={[0.1, 16, 16]} />
|
||||||
))}
|
<meshStandardMaterial color="red" />
|
||||||
|
</mesh>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
);
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default VehicleAnimator;
|
export default VehicleAnimator;
|
||||||
|
|
@ -7,126 +7,116 @@ import { usePlayButtonStore, useResetButtonStore } from '../../../../../store/us
|
||||||
import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
|
import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
|
||||||
|
|
||||||
function VehicleInstance({ agvDetail }: any) {
|
function VehicleInstance({ agvDetail }: any) {
|
||||||
const { navMesh } = useNavMesh();
|
const { navMesh } = useNavMesh();
|
||||||
const { isPlaying, setIsPlaying } = usePlayButtonStore();
|
const { isPlaying, setIsPlaying } = usePlayButtonStore();
|
||||||
const { isReset } = useResetButtonStore();
|
const { isReset } = useResetButtonStore();
|
||||||
const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad } = useVehicleStore();
|
const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad } = useVehicleStore();
|
||||||
const [currentPhase, setCurrentPhase] = useState<string>('stationed');
|
const [currentPhase, setCurrentPhase] = useState<string>('stationed');
|
||||||
const [path, setPath] = useState<[number, number, number][]>([]);
|
const [path, setPath] = useState<[number, number, number][]>([]);
|
||||||
|
|
||||||
const computePath = useCallback(
|
const computePath = useCallback(
|
||||||
(start: any, end: any) => {
|
(start: any, end: any) => {
|
||||||
try {
|
try {
|
||||||
const navMeshQuery = new NavMeshQuery(navMesh);
|
const navMeshQuery = new NavMeshQuery(navMesh);
|
||||||
const { path: segmentPath } = navMeshQuery.computePath(start, end);
|
const { path: segmentPath } = navMeshQuery.computePath(start, end);
|
||||||
return (
|
return (
|
||||||
segmentPath?.map(({ x, y, z }) => [x, y + 0.1, z] as [number, number, number]) || []
|
segmentPath?.map(({ x, y, z }) => [x, y + 0.1, z] as [number, number, number]) || []
|
||||||
);
|
);
|
||||||
} catch {
|
} catch {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[navMesh]
|
[navMesh]
|
||||||
);
|
);
|
||||||
|
|
||||||
function vehicleStatus(modelid: string, status: string) {
|
function vehicleStatus(modelid: string, status: string) {
|
||||||
// console.log(`AGV ${modelid}: ${status}`);
|
// console.log(`AGV ${modelid}: ${status}`);
|
||||||
}
|
}
|
||||||
function reset() {
|
function reset() {
|
||||||
console.log("runs");
|
setVehicleActive(agvDetail.modelUuid, false);
|
||||||
setVehicleActive(agvDetail.modelUuid, false);
|
setVehicleState(agvDetail.modelUuid, 'idle');
|
||||||
setVehicleState(agvDetail.modelUuid, 'idle');
|
setPath([]);
|
||||||
setPath([]);
|
setCurrentPhase('stationed')
|
||||||
setCurrentPhase('stationed')
|
}
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isPlaying) {
|
if (isPlaying) {
|
||||||
if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'stationed') {
|
if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'stationed') {
|
||||||
const toPickupPath = computePath(
|
const toPickupPath = computePath(
|
||||||
new THREE.Vector3(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2]),
|
new THREE.Vector3(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2]),
|
||||||
agvDetail.point.action.pickUpPoint
|
agvDetail.point.action.pickUpPoint
|
||||||
);
|
);
|
||||||
setPath(toPickupPath);
|
setPath(toPickupPath);
|
||||||
setVehicleActive(agvDetail.modelUuid, true);
|
setVehicleActive(agvDetail.modelUuid, true);
|
||||||
setVehicleState(agvDetail.modelUuid, 'running');
|
setVehicleState(agvDetail.modelUuid, 'running');
|
||||||
setCurrentPhase('stationed-pickup');
|
setCurrentPhase('stationed-pickup');
|
||||||
vehicleStatus(agvDetail.modelUuid, 'Started from station, heading to pickup');
|
vehicleStatus(agvDetail.modelUuid, 'Started from station, heading to pickup');
|
||||||
return;
|
return;
|
||||||
} else if (
|
} else if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'picking') {
|
||||||
!agvDetail.isActive &&
|
|
||||||
agvDetail.state === 'idle' &&
|
|
||||||
currentPhase === 'picking'
|
|
||||||
) {
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
incrementVehicleLoad(agvDetail.modelUuid, 2);
|
incrementVehicleLoad(agvDetail.modelUuid, 2);
|
||||||
}, 5000);
|
}, 5000);
|
||||||
|
|
||||||
if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity) {
|
if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity) {
|
||||||
const toDrop = computePath(
|
const toDrop = computePath(
|
||||||
agvDetail.point.action.pickUpPoint,
|
agvDetail.point.action.pickUpPoint,
|
||||||
agvDetail.point.action.unLoadPoint
|
agvDetail.point.action.unLoadPoint
|
||||||
);
|
);
|
||||||
setPath(toDrop);
|
setPath(toDrop);
|
||||||
setVehicleActive(agvDetail.modelUuid, true);
|
setVehicleActive(agvDetail.modelUuid, true);
|
||||||
setVehicleState(agvDetail.modelUuid, 'running');
|
setVehicleState(agvDetail.modelUuid, 'running');
|
||||||
setCurrentPhase('pickup-drop');
|
setCurrentPhase('pickup-drop');
|
||||||
vehicleStatus(agvDetail.modelUuid, 'Started from pickup point, heading to drop point');
|
vehicleStatus(agvDetail.modelUuid, 'Started from pickup point, heading to drop point');
|
||||||
|
}
|
||||||
|
} else if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'dropping' && agvDetail.currentLoad === 0) {
|
||||||
|
const dropToPickup = computePath(
|
||||||
|
agvDetail.point.action.unLoadPoint,
|
||||||
|
agvDetail.point.action.pickUpPoint
|
||||||
|
);
|
||||||
|
setPath(dropToPickup);
|
||||||
|
setVehicleActive(agvDetail.modelUuid, true);
|
||||||
|
setVehicleState(agvDetail.modelUuid, 'running');
|
||||||
|
setCurrentPhase('drop-pickup');
|
||||||
|
vehicleStatus(agvDetail.modelUuid, 'Started from dropping point, heading to pickup point');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} else if (
|
}, [vehicles, currentPhase, path, isPlaying, isReset]);
|
||||||
!agvDetail.isActive &&
|
|
||||||
agvDetail.state === 'idle' &&
|
|
||||||
currentPhase === 'dropping' &&
|
|
||||||
agvDetail.currentLoad === 0
|
|
||||||
) {
|
|
||||||
const dropToPickup = computePath(
|
|
||||||
agvDetail.point.action.unLoadPoint,
|
|
||||||
agvDetail.point.action.pickUpPoint
|
|
||||||
);
|
|
||||||
setPath(dropToPickup);
|
|
||||||
setVehicleActive(agvDetail.modelUuid, true);
|
|
||||||
setVehicleState(agvDetail.modelUuid, 'running');
|
|
||||||
setCurrentPhase('drop-pickup');
|
|
||||||
vehicleStatus(agvDetail.modelUuid, 'Started from dropping point, heading to pickup point');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [vehicles, currentPhase, path, isPlaying, isReset]);
|
|
||||||
|
|
||||||
function handleCallBack() {
|
function handleCallBack() {
|
||||||
if (currentPhase === 'stationed-pickup') {
|
if (currentPhase === 'stationed-pickup') {
|
||||||
setVehicleActive(agvDetail.modelUuid, false);
|
setVehicleActive(agvDetail.modelUuid, false);
|
||||||
setVehicleState(agvDetail.modelUuid, 'idle');
|
setVehicleState(agvDetail.modelUuid, 'idle');
|
||||||
setCurrentPhase('picking');
|
setCurrentPhase('picking');
|
||||||
vehicleStatus(agvDetail.modelUuid, 'Reached pickup point, waiting for material');
|
vehicleStatus(agvDetail.modelUuid, 'Reached pickup point, waiting for material');
|
||||||
setPath([]);
|
setPath([]);
|
||||||
} else if (currentPhase === 'pickup-drop') {
|
} else if (currentPhase === 'pickup-drop') {
|
||||||
setVehicleActive(agvDetail.modelUuid, false);
|
setVehicleActive(agvDetail.modelUuid, false);
|
||||||
setVehicleState(agvDetail.modelUuid, 'idle');
|
setVehicleState(agvDetail.modelUuid, 'idle');
|
||||||
setCurrentPhase('dropping');
|
setCurrentPhase('dropping');
|
||||||
vehicleStatus(agvDetail.modelUuid, 'Reached drop point');
|
vehicleStatus(agvDetail.modelUuid, 'Reached drop point');
|
||||||
setPath([]);
|
setPath([]);
|
||||||
} else if (currentPhase === 'drop-pickup') {
|
} else if (currentPhase === 'drop-pickup') {
|
||||||
setVehicleActive(agvDetail.modelUuid, false);
|
setVehicleActive(agvDetail.modelUuid, false);
|
||||||
setVehicleState(agvDetail.modelUuid, 'idle');
|
setVehicleState(agvDetail.modelUuid, 'idle');
|
||||||
setCurrentPhase('picking');
|
setCurrentPhase('picking');
|
||||||
setPath([]);
|
setPath([]);
|
||||||
vehicleStatus(agvDetail.modelUuid, 'Reached pickup point again, cycle complete');
|
vehicleStatus(agvDetail.modelUuid, 'Reached pickup point again, cycle complete');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<VehicleAnimator
|
<VehicleAnimator
|
||||||
path={path}
|
path={path}
|
||||||
handleCallBack={handleCallBack}
|
handleCallBack={handleCallBack}
|
||||||
currentPhase={currentPhase}
|
currentPhase={currentPhase}
|
||||||
agvUuid={agvDetail?.modelUuid}
|
agvUuid={agvDetail?.modelUuid}
|
||||||
agvDetail={agvDetail}
|
agvDetail={agvDetail}
|
||||||
reset={reset}
|
reset={reset}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default VehicleInstance;
|
export default VehicleInstance;
|
||||||
|
|
@ -28,8 +28,8 @@ function Vehicles() {
|
||||||
actionType: "travel",
|
actionType: "travel",
|
||||||
unLoadDuration: 10,
|
unLoadDuration: 10,
|
||||||
loadCapacity: 2,
|
loadCapacity: 2,
|
||||||
pickUpPoint: { x: 98.71483985219794, y: 0, z: 28.66321267938962 },
|
pickUpPoint: { position: { x: 98.71483985219794, y: 0, z: 28.66321267938962 }, rotation: { x: 0, y: 0, z: 0 } },
|
||||||
unLoadPoint: { x: 105.71483985219794, y: 0, z: 28.66321267938962 },
|
unLoadPoint: { position: { x: 105.71483985219794, y: 0, z: 28.66321267938962 }, rotation: { x: 0, y: 0, z: 0 } },
|
||||||
triggers: [
|
triggers: [
|
||||||
{
|
{
|
||||||
triggerUuid: "trig-001",
|
triggerUuid: "trig-001",
|
||||||
|
|
@ -71,8 +71,8 @@ function Vehicles() {
|
||||||
actionType: "travel",
|
actionType: "travel",
|
||||||
unLoadDuration: 10,
|
unLoadDuration: 10,
|
||||||
loadCapacity: 2,
|
loadCapacity: 2,
|
||||||
pickUpPoint: { x: 90, y: 0, z: 28 },
|
pickUpPoint: { position: { x: 90, y: 0, z: 28 }, rotation: { x: 0, y: 0, z: 0 } },
|
||||||
unLoadPoint: { x: 20, y: 0, z: 10 },
|
unLoadPoint: { position: { x: 20, y: 0, z: 10 }, rotation: { x: 0, y: 0, z: 0 } },
|
||||||
triggers: [
|
triggers: [
|
||||||
{
|
{
|
||||||
triggerUuid: "trig-001",
|
triggerUuid: "trig-001",
|
||||||
|
|
@ -95,7 +95,8 @@ function Vehicles() {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
modelUuid: "e729a4f1-11d2-4778-8d6a-468f1b4f6b79",
|
modelUuid: "e729a4f1-11d2-4778-8d6a-468f1b4f6b79",
|
||||||
modelName: "forklift",
|
modelName: "forklift",
|
||||||
position: [98.85729337188162, 0, 38.36616546567653],
|
position: [98.85729337188162, 0, 38.36616546567653],
|
||||||
|
|
@ -113,8 +114,8 @@ function Vehicles() {
|
||||||
actionType: "travel",
|
actionType: "travel",
|
||||||
unLoadDuration: 15,
|
unLoadDuration: 15,
|
||||||
loadCapacity: 5,
|
loadCapacity: 5,
|
||||||
pickUpPoint: { x: 98.71483985219794, y: 0, z: 28.66321267938962 },
|
pickUpPoint: { position: { x: 98.71483985219794, y: 0, z: 28.66321267938962 }, rotation: { x: 0, y: 0, z: 0 } },
|
||||||
unLoadPoint: { x: 20, y: 0, z: 10 },
|
unLoadPoint: { position: { x: 20, y: 0, z: 10 }, rotation: { x: 0, y: 0, z: 0 } },
|
||||||
triggers: [
|
triggers: [
|
||||||
{
|
{
|
||||||
triggerUuid: "trig-001",
|
triggerUuid: "trig-001",
|
||||||
|
|
|
||||||
|
|
@ -44,8 +44,8 @@ interface VehiclePointSchema {
|
||||||
actionType: "travel";
|
actionType: "travel";
|
||||||
unLoadDuration: number;
|
unLoadDuration: number;
|
||||||
loadCapacity: number;
|
loadCapacity: number;
|
||||||
pickUpPoint: { x: number; y: number, z: number } | null;
|
pickUpPoint: { position: { x: number; y: number, z: number }, rotation: { x: number; y: number, z: number } } | null;
|
||||||
unLoadPoint: { x: number; y: number, z: number } | null;
|
unLoadPoint: { position: { x: number; y: number, z: number }, rotation: { x: number; y: number, z: number } } | null;
|
||||||
triggers: TriggerSchema[];
|
triggers: TriggerSchema[];
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
@ -134,7 +134,7 @@ interface ConveyorStatus extends ConveyorEventSchema {
|
||||||
isActive: boolean;
|
isActive: boolean;
|
||||||
idleTime: number;
|
idleTime: number;
|
||||||
activeTime: number;
|
activeTime: number;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
interface MachineStatus extends MachineEventSchema {
|
interface MachineStatus extends MachineEventSchema {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue