simulation #64
|
|
@ -2,7 +2,7 @@ import React, { useRef, useMemo, useCallback, useState } from "react";
|
|||
import { InfoIcon, AddIcon, RemoveIcon, ResizeHeightIcon } from "../../../icons/ExportCommonIcons";
|
||||
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
|
||||
import { useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store";
|
||||
import * as SimulationTypes from '../../../../types/simulation';
|
||||
import * as SimulationTypes from '../../../../types/simulationTypes';
|
||||
import LabledDropdown from "../../../ui/inputs/LabledDropdown";
|
||||
import { handleResize } from "../../../../functions/handleResizePannel";
|
||||
|
||||
|
|
@ -224,19 +224,28 @@ const ArmBotMechanics: React.FC = () => {
|
|||
}, [selectedPoint, selectedProcessIndex, handleProcessChange]);
|
||||
|
||||
const handleTriggerSelect = useCallback((displayName: string, index: number) => {
|
||||
const selected = connectedTriggers.find(t => t.displayName === displayName);
|
||||
const availableOptions = getFilteredTriggerOptions(index);
|
||||
const selectedDisplayIndex = availableOptions.indexOf(displayName);
|
||||
|
||||
const filteredTriggers = connectedTriggers.filter(trigger =>
|
||||
!selectedPoint?.actions.processes
|
||||
?.filter((_, i) => i !== index)
|
||||
.map(p => p.triggerId)
|
||||
.includes(trigger.uuid)
|
||||
);
|
||||
|
||||
const selected = filteredTriggers[selectedDisplayIndex];
|
||||
|
||||
if (!selected || !selectedPoint?.actions.processes) return;
|
||||
|
||||
const oldProcess = selectedPoint.actions.processes[index];
|
||||
|
||||
const updatedProcesses = [...selectedPoint.actions.processes];
|
||||
|
||||
// Only reset start/end if new trigger invalidates them (your logic can expand this)
|
||||
updatedProcesses[index] = {
|
||||
...oldProcess,
|
||||
triggerId: selected.uuid,
|
||||
startPoint: oldProcess.startPoint || "", // preserve if exists
|
||||
endPoint: oldProcess.endPoint || "" // preserve if exists
|
||||
startPoint: oldProcess.startPoint || "",
|
||||
endPoint: oldProcess.endPoint || ""
|
||||
};
|
||||
|
||||
handleProcessChange(updatedProcesses);
|
||||
|
|
@ -298,8 +307,10 @@ const ArmBotMechanics: React.FC = () => {
|
|||
<InputWithDropDown
|
||||
key={`speed-${selectedPoint.uuid}`}
|
||||
label="ArmBot Speed"
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
value={selectedPoint.actions.speed.toString()}
|
||||
onChange={(value) => handleSpeedChange(parseInt(value))}
|
||||
onChange={(value) => handleSpeedChange(parseFloat(value))}
|
||||
/>
|
||||
|
||||
<div className="actions">
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import {
|
|||
useSocketStore,
|
||||
} from "../../../../store/store";
|
||||
import * as THREE from "three";
|
||||
import * as SimulationTypes from "../../../../types/simulation";
|
||||
import * as SimulationTypes from "../../../../types/simulationTypes";
|
||||
import InputToggle from "../../../ui/inputs/InputToggle";
|
||||
import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
|
||||
import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useRef, useMemo, useCallback } from "react";
|
|||
import { InfoIcon } from "../../../icons/ExportCommonIcons";
|
||||
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
|
||||
import { useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store";
|
||||
import * as SimulationTypes from '../../../../types/simulation';
|
||||
import * as SimulationTypes from '../../../../types/simulationTypes';
|
||||
import LabledDropdown from "../../../ui/inputs/LabledDropdown";
|
||||
import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useRef, useMemo } from "react";
|
|||
import { InfoIcon } from "../../../icons/ExportCommonIcons";
|
||||
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
|
||||
import { useEditingPoint, useEyeDropMode, usePreviewPosition, useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store";
|
||||
import * as SimulationTypes from '../../../../types/simulation';
|
||||
import * as SimulationTypes from '../../../../types/simulationTypes';
|
||||
import PositionInput from "../customInput/PositionInputs";
|
||||
import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
|
||||
import LabeledButton from "../../../ui/inputs/LabledButton";
|
||||
|
|
|
|||
|
|
@ -21,14 +21,17 @@ const BarChartInput = (props: Props) => {
|
|||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const [isLoading, setLoading] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
setLoading(false);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
|
|
@ -148,6 +151,7 @@ const BarChartInput = (props: Props) => {
|
|||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
|
|
|
|||
|
|
@ -21,14 +21,17 @@ const FleetEfficiencyInputComponent = (props: Props) => {
|
|||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const [isLoading, setLoading] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||
setLoading(true)
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
setLoading(false)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
|
|
@ -149,6 +152,7 @@ const FleetEfficiencyInputComponent = (props: Props) => {
|
|||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
|
|
|
|||
|
|
@ -21,14 +21,17 @@ const FlotingWidgetInput = (props: Props) => {
|
|||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const [isLoading, setLoading] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
setLoading(false);
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
|
|
@ -149,6 +152,7 @@ const FlotingWidgetInput = (props: Props) => {
|
|||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
|
|
|
|||
|
|
@ -140,14 +140,17 @@ const LineGrapInput = (props: Props) => {
|
|||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const [isLoading, setLoading] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
setLoading(false)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
|
|
@ -267,6 +270,7 @@ const LineGrapInput = (props: Props) => {
|
|||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
|
|
|
|||
|
|
@ -21,14 +21,17 @@ const PieChartInput = (props: Props) => {
|
|||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const [isLoading, setLoading] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
setLoading(false)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
|
|
@ -148,6 +151,7 @@ const PieChartInput = (props: Props) => {
|
|||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
|
|
|
|||
|
|
@ -21,14 +21,17 @@ const Progress1Input = (props: Props) => {
|
|||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const [isLoading, setLoading] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
setLoading(false)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
|
|
@ -142,6 +145,7 @@ const Progress1Input = (props: Props) => {
|
|||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
|
|
|
|||
|
|
@ -21,14 +21,17 @@ const Progress2Input = (props: Props) => {
|
|||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const [isLoading, setLoading] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
setLoading(false)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
|
|
@ -142,6 +145,7 @@ const Progress2Input = (props: Props) => {
|
|||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
|
|
|
|||
|
|
@ -21,14 +21,17 @@ const WarehouseThroughputInputComponent = (props: Props) => {
|
|||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const [isLoading, setLoading] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
setLoading(false)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
|
|
@ -149,6 +152,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
|
|||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
|
|
|
|||
|
|
@ -21,14 +21,17 @@ const Widget2InputCard3D = (props: Props) => {
|
|||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const [isLoading, setLoading] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
setLoading(false)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
|
|
@ -147,6 +150,7 @@ const Widget2InputCard3D = (props: Props) => {
|
|||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
|
|
|
|||
|
|
@ -19,14 +19,17 @@ const Widget3InputCard3D = () => {
|
|||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const [isLoading, setLoading] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await axios.get(`http://${iotApiUrl}/getinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
setLoading(false)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
|
|
@ -140,6 +143,7 @@ const Widget3InputCard3D = () => {
|
|||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
|
|
|
|||
|
|
@ -21,14 +21,17 @@ const Widget4InputCard3D = (props: Props) => {
|
|||
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0]
|
||||
const [isLoading, setLoading] = useState<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchZoneData = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await axios.get(`http://${iotApiUrl}/floatinput`);
|
||||
if (response.status === 200) {
|
||||
// console.log("dropdown data:", response.data);
|
||||
setDropDownData(response.data);
|
||||
setLoading(false)
|
||||
} else {
|
||||
console.log("Unexpected response:", response);
|
||||
}
|
||||
|
|
@ -147,6 +150,7 @@ const Widget4InputCard3D = (props: Props) => {
|
|||
onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
|
||||
onUnselect={() => handleSelect(inputKey, null)}
|
||||
selectedValue={selections[inputKey]} // Load from Zustand
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ import RenameInput from "./RenameInput";
|
|||
type InputWithDropDownProps = {
|
||||
label: string;
|
||||
value: string;
|
||||
min?: number
|
||||
min?: number;
|
||||
step?: number;
|
||||
defaultValue?: string;
|
||||
options?: string[]; // Array of dropdown options
|
||||
activeOption?: string; // The currently active dropdown option
|
||||
|
|
@ -18,6 +19,7 @@ const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
|
|||
label,
|
||||
value,
|
||||
min,
|
||||
step,
|
||||
defaultValue,
|
||||
options,
|
||||
activeOption,
|
||||
|
|
@ -45,6 +47,7 @@ const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
|
|||
<div className="input default" id={separatedWords}>
|
||||
<input
|
||||
min={min}
|
||||
step={step}
|
||||
type="number"
|
||||
defaultValue={value}
|
||||
onChange={(e) => {
|
||||
|
|
|
|||
|
|
@ -203,6 +203,7 @@ interface MultiLevelDropdownProps {
|
|||
onSelect: (selectedData: { name: string; fields: string }) => void;
|
||||
onUnselect: () => void;
|
||||
selectedValue?: { name: string; fields: string };
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
// Main Multi-Level Dropdown Component
|
||||
|
|
@ -211,6 +212,7 @@ const MultiLevelDropdown = ({
|
|||
onSelect,
|
||||
onUnselect,
|
||||
selectedValue,
|
||||
isLoading = false,
|
||||
}: MultiLevelDropdownProps) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
|
@ -261,19 +263,22 @@ const MultiLevelDropdown = ({
|
|||
<div className="dropdown-content ">
|
||||
|
||||
{/* loading list */}
|
||||
{/* <div className="loading" /> */}
|
||||
|
||||
|
||||
{/* Unselect Option */}
|
||||
<DropdownItem label="Unselect" onClick={handleItemUnselect} />
|
||||
{/* Nested Dropdown Items */}
|
||||
{Object.entries(data).map(([key, value]) => (
|
||||
<NestedDropdown
|
||||
key={key}
|
||||
label={key}
|
||||
fields={Object.keys(value)}
|
||||
onSelect={handleItemSelect}
|
||||
/>
|
||||
))}
|
||||
{
|
||||
isLoading ? <div className="loading" /> :
|
||||
Object.entries(data).map(([key, value]) => (
|
||||
<NestedDropdown
|
||||
key={key}
|
||||
label={key}
|
||||
fields={Object.keys(value)}
|
||||
onSelect={handleItemSelect}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { toast } from 'react-toastify';
|
|||
import TempLoader from './tempLoader';
|
||||
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
|
||||
import * as Types from "../../../../types/world/worldTypes";
|
||||
import * as SimulationTypes from "../../../../types/simulation";
|
||||
import * as SimulationTypes from "../../../../types/simulationTypes";
|
||||
import { retrieveGLTF, storeGLTF } from '../../../../utils/indexDB/idbUtils';
|
||||
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
|
||||
import { Socket } from 'socket.io-client';
|
||||
|
|
@ -225,7 +225,6 @@ async function handleModelLoad(
|
|||
eventData as SimulationTypes.ConveyorEventsSchema
|
||||
]);
|
||||
|
||||
console.log('data: ', data);
|
||||
socket.emit("v2:model-asset:add", data);
|
||||
|
||||
} else if (res.type === "Vehicle") {
|
||||
|
|
@ -365,7 +364,7 @@ async function handleModelLoad(
|
|||
uuid: pointUUID,
|
||||
position: res.points.position as [number, number, number],
|
||||
rotation: res.points.rotation as [number, number, number],
|
||||
actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', speed: 1, processes: [] },
|
||||
actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', speed: 0.2, processes: [] },
|
||||
triggers: { uuid: THREE.MathUtils.generateUUID(), name: 'Trigger 1', type: 'OnComplete' },
|
||||
connections: { source: { modelUUID: model.uuid, pointUUID: pointUUID }, targets: [] },
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { toast } from 'react-toastify';
|
|||
import * as THREE from 'three';
|
||||
|
||||
import * as Types from "../../../../types/world/worldTypes";
|
||||
import * as SimulationTypes from "../../../../types/simulation";
|
||||
import * as SimulationTypes from "../../../../types/simulationTypes";
|
||||
// import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi';
|
||||
import { Socket } from 'socket.io-client';
|
||||
import { getFloorAssets } from '../../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import * as THREE from 'three';
|
|||
import * as CONSTANTS from '../../../types/world/worldConstants';
|
||||
import { toast } from 'react-toastify';
|
||||
import * as Types from "../../../types/world/worldTypes";
|
||||
import * as SimulationTypes from "../../..//types/simulation";
|
||||
import * as SimulationTypes from "../../../types/simulationTypes";
|
||||
import { initializeDB, retrieveGLTF, storeGLTF } from '../../../utils/indexDB/idbUtils';
|
||||
import { getCamera } from '../../../services/factoryBuilder/camera/getCameraApi';
|
||||
import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
|
||||
|
|
@ -228,7 +228,6 @@ function processEventData(item: SimulationTypes.EventData, setSimulationStates:
|
|||
} else if (item.eventData?.type === 'StaticMachine') {
|
||||
|
||||
const data: any = item.eventData;
|
||||
item.eventData.points.position = [0, 1.5, 1]
|
||||
data.modeluuid = item.modeluuid;
|
||||
data.modelName = item.modelname;
|
||||
data.position = item.position;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore,
|
|||
import { toast } from "react-toastify";
|
||||
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
|
||||
import * as Types from "../../../../types/world/worldTypes";
|
||||
import * as SimulationTypes from "../../../../types/simulation";
|
||||
import * as SimulationTypes from "../../../../types/simulationTypes";
|
||||
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
|
||||
|
||||
const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, selectionGroup, setDuplicatedObjects, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) => {
|
||||
|
|
@ -332,8 +332,8 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
|
|||
} else if (eventData.type === 'StaticMachine' && eventData) {
|
||||
const createStaticMachinePoint = () => {
|
||||
const pointUUID = THREE.MathUtils.generateUUID();
|
||||
const vehiclePoint = (eventData as SimulationTypes.StaticMachineEventsSchema)?.points;
|
||||
const hasActions = vehiclePoint?.actions !== undefined;
|
||||
const staticMachinePoint = (eventData as SimulationTypes.StaticMachineEventsSchema)?.points;
|
||||
const hasActions = staticMachinePoint?.actions !== undefined;
|
||||
|
||||
const defaultAction = {
|
||||
uuid: THREE.MathUtils.generateUUID(),
|
||||
|
|
@ -344,11 +344,11 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
|
|||
|
||||
return {
|
||||
uuid: pointUUID,
|
||||
position: vehiclePoint?.position,
|
||||
// rotation: vehiclePoint?.rotation,
|
||||
position: staticMachinePoint?.position,
|
||||
rotation: staticMachinePoint?.rotation,
|
||||
actions: hasActions
|
||||
? {
|
||||
...vehiclePoint.actions,
|
||||
...staticMachinePoint.actions,
|
||||
uuid: THREE.MathUtils.generateUUID()
|
||||
}
|
||||
: defaultAction,
|
||||
|
|
@ -410,8 +410,8 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
|
|||
} else if (eventData.type === 'ArmBot' && eventData) {
|
||||
const createArmBotPoint = () => {
|
||||
const pointUUID = THREE.MathUtils.generateUUID();
|
||||
const vehiclePoint = (eventData as SimulationTypes.ArmBotEventsSchema)?.points;
|
||||
const hasActions = vehiclePoint?.actions !== undefined;
|
||||
const armBotPoint = (eventData as SimulationTypes.ArmBotEventsSchema)?.points;
|
||||
const hasActions = armBotPoint?.actions !== undefined;
|
||||
|
||||
const defaultAction = {
|
||||
uuid: THREE.MathUtils.generateUUID(),
|
||||
|
|
@ -422,18 +422,19 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
|
|||
|
||||
return {
|
||||
uuid: pointUUID,
|
||||
position: vehiclePoint?.position,
|
||||
// rotation: vehiclePoint?.rotation,
|
||||
position: armBotPoint?.position,
|
||||
rotation: armBotPoint?.rotation,
|
||||
actions: hasActions
|
||||
? {
|
||||
...vehiclePoint.actions,
|
||||
uuid: THREE.MathUtils.generateUUID()
|
||||
...armBotPoint.actions,
|
||||
uuid: THREE.MathUtils.generateUUID(),
|
||||
processes: []
|
||||
}
|
||||
: defaultAction,
|
||||
triggers: {
|
||||
uuid: THREE.MathUtils.generateUUID(),
|
||||
name: vehiclePoint.triggers.name,
|
||||
type: vehiclePoint.triggers.type,
|
||||
name: armBotPoint.triggers.name,
|
||||
type: armBotPoint.triggers.type,
|
||||
},
|
||||
connections: {
|
||||
source: { modelUUID: obj.uuid, pointUUID },
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore,
|
|||
import { toast } from "react-toastify";
|
||||
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
|
||||
import * as Types from "../../../../types/world/worldTypes";
|
||||
import * as SimulationTypes from "../../../../types/simulation";
|
||||
import * as SimulationTypes from "../../../../types/simulationTypes";
|
||||
import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
|
||||
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
|
||||
|
||||
|
|
@ -246,7 +246,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
|
|||
return {
|
||||
uuid: pointUUID,
|
||||
position: vehiclePoint?.position,
|
||||
// rotation: vehiclePoint?.rotation,
|
||||
rotation: vehiclePoint?.rotation,
|
||||
actions: hasActions
|
||||
? {
|
||||
...vehiclePoint.actions,
|
||||
|
|
@ -311,8 +311,8 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
|
|||
} else if (eventData.type === 'StaticMachine' && eventData) {
|
||||
const createStaticMachinePoint = () => {
|
||||
const pointUUID = THREE.MathUtils.generateUUID();
|
||||
const vehiclePoint = (eventData as SimulationTypes.StaticMachineEventsSchema)?.points;
|
||||
const hasActions = vehiclePoint?.actions !== undefined;
|
||||
const staticMachinePoint = (eventData as SimulationTypes.StaticMachineEventsSchema)?.points;
|
||||
const hasActions = staticMachinePoint?.actions !== undefined;
|
||||
|
||||
const defaultAction = {
|
||||
uuid: THREE.MathUtils.generateUUID(),
|
||||
|
|
@ -323,11 +323,11 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
|
|||
|
||||
return {
|
||||
uuid: pointUUID,
|
||||
position: vehiclePoint?.position,
|
||||
// rotation: vehiclePoint?.rotation,
|
||||
position: staticMachinePoint?.position,
|
||||
rotation: staticMachinePoint?.rotation,
|
||||
actions: hasActions
|
||||
? {
|
||||
...vehiclePoint.actions,
|
||||
...staticMachinePoint.actions,
|
||||
uuid: THREE.MathUtils.generateUUID()
|
||||
}
|
||||
: defaultAction,
|
||||
|
|
@ -389,8 +389,8 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
|
|||
} else if (eventData.type === 'ArmBot' && eventData) {
|
||||
const createArmBotPoint = () => {
|
||||
const pointUUID = THREE.MathUtils.generateUUID();
|
||||
const vehiclePoint = (eventData as SimulationTypes.ArmBotEventsSchema)?.points;
|
||||
const hasActions = vehiclePoint?.actions !== undefined;
|
||||
const armBotPoint = (eventData as SimulationTypes.ArmBotEventsSchema)?.points;
|
||||
const hasActions = armBotPoint?.actions !== undefined;
|
||||
|
||||
const defaultAction = {
|
||||
uuid: THREE.MathUtils.generateUUID(),
|
||||
|
|
@ -401,18 +401,19 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
|
|||
|
||||
return {
|
||||
uuid: pointUUID,
|
||||
position: vehiclePoint?.position,
|
||||
// rotation: vehiclePoint?.rotation,
|
||||
position: armBotPoint?.position,
|
||||
rotation: armBotPoint?.rotation,
|
||||
actions: hasActions
|
||||
? {
|
||||
...vehiclePoint.actions,
|
||||
uuid: THREE.MathUtils.generateUUID()
|
||||
...armBotPoint.actions,
|
||||
uuid: THREE.MathUtils.generateUUID(),
|
||||
processes: []
|
||||
}
|
||||
: defaultAction,
|
||||
triggers: {
|
||||
uuid: THREE.MathUtils.generateUUID(),
|
||||
name: vehiclePoint.triggers.name,
|
||||
type: vehiclePoint.triggers.type,
|
||||
name: armBotPoint.triggers.name,
|
||||
type: armBotPoint.triggers.type,
|
||||
},
|
||||
connections: {
|
||||
source: { modelUUID: obj.uuid, pointUUID },
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore,
|
|||
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
|
||||
import { toast } from "react-toastify";
|
||||
import * as Types from "../../../../types/world/worldTypes";
|
||||
import * as SimulationTypes from "../../../../types/simulation";
|
||||
import * as SimulationTypes from "../../../../types/simulationTypes";
|
||||
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
|
||||
|
||||
function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore,
|
|||
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
|
||||
import { toast } from "react-toastify";
|
||||
import * as Types from "../../../../types/world/worldTypes";
|
||||
import * as SimulationTypes from "../../../../types/simulation";
|
||||
import * as SimulationTypes from "../../../../types/simulationTypes";
|
||||
import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
|
||||
|
||||
function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, boundingBoxRef }: any) {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import BoundingBox from "./boundingBoxHelper";
|
|||
import { toast } from "react-toastify";
|
||||
// import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi';
|
||||
import * as Types from "../../../../types/world/worldTypes";
|
||||
import * as SimulationTypes from "../../../../types/simulation";
|
||||
import * as SimulationTypes from "../../../../types/simulationTypes";
|
||||
|
||||
import DuplicationControls from "./duplicationControls";
|
||||
import CopyPasteControls from "./copyPasteControls";
|
||||
|
|
@ -199,6 +199,7 @@ const SelectionControls: React.FC = () => {
|
|||
setDuplicatedObjects([]);
|
||||
setSelectedAssets([]);
|
||||
};
|
||||
|
||||
const updateBackend = async (updatedPaths: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
|
||||
if (updatedPaths.length === 0) return;
|
||||
const email = localStorage.getItem("email");
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
|
|||
import { useThree } from "@react-three/fiber";
|
||||
import useModuleStore from "../../../store/useModuleStore";
|
||||
import { useSimulationStates } from "../../../store/store";
|
||||
import * as SimulationTypes from '../../../types/simulation';
|
||||
import * as SimulationTypes from '../../../types/simulationTypes';
|
||||
import { ArmbotInstances } from "./ArmBotInstances";
|
||||
|
||||
interface ArmBotState {
|
||||
|
|
@ -12,26 +12,41 @@ interface ArmBotState {
|
|||
status: string;
|
||||
material: string;
|
||||
triggerId: string;
|
||||
connections: any
|
||||
actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; };
|
||||
}
|
||||
|
||||
const ArmBot: React.FC = () => {
|
||||
interface StaticMachineState {
|
||||
uuid: string;
|
||||
status: string;
|
||||
actions: { uuid: string; name: string; buffer: number; material: string; };
|
||||
machineTriggerId: string;
|
||||
connectedArmBot: string;
|
||||
}
|
||||
|
||||
interface ArmBotProps {
|
||||
armBots: ArmBotState[];
|
||||
setArmBots: React.Dispatch<React.SetStateAction<ArmBotState[]>>;
|
||||
setStaticMachines: React.Dispatch<React.SetStateAction<StaticMachineState[]>>;
|
||||
}
|
||||
|
||||
const ArmBot = ({ armBots, setArmBots, setStaticMachines }: ArmBotProps) => {
|
||||
const { activeModule } = useModuleStore();
|
||||
const { scene } = useThree();
|
||||
const { simulationStates } = useSimulationStates();
|
||||
const [armBots, setArmBots] = useState<ArmBotState[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const filtered = simulationStates.filter((s): s is SimulationTypes.ArmBotEventsSchema => s.type === "ArmBot");
|
||||
const initialStates: ArmBotState[] = filtered.map(bot => ({
|
||||
uuid: bot.modeluuid,
|
||||
position: bot.position,
|
||||
rotation: bot.rotation,
|
||||
status: "idle",
|
||||
material: "default",
|
||||
triggerId: '',
|
||||
connections: bot.points.connections
|
||||
}));
|
||||
const initialStates: ArmBotState[] = filtered
|
||||
.filter(bot => bot.points.connections.targets.length > 0)
|
||||
.map(bot => ({
|
||||
uuid: bot.modeluuid,
|
||||
position: bot.position,
|
||||
rotation: bot.rotation,
|
||||
status: "idle",
|
||||
material: "default",
|
||||
triggerId: '',
|
||||
actions: bot.points.actions
|
||||
}));
|
||||
setArmBots(initialStates);
|
||||
}, [simulationStates]);
|
||||
|
||||
|
|
@ -53,6 +68,7 @@ const ArmBot: React.FC = () => {
|
|||
index={i}
|
||||
armBot={bot}
|
||||
setArmBots={setArmBots}
|
||||
setStaticMachines={setStaticMachines}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,15 @@
|
|||
import IkInstances from "./IkInstances";
|
||||
import armModel from "../../../assets/gltf-glb/rigged/ik_arm_4.glb";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useThree } from "@react-three/fiber";
|
||||
import { Vector3 } from "three";
|
||||
|
||||
interface Process {
|
||||
triggerId: string;
|
||||
startPoint?: Vector3;
|
||||
endPoint?: Vector3;
|
||||
speed: number;
|
||||
}
|
||||
|
||||
interface ArmBotState {
|
||||
uuid: string;
|
||||
|
|
@ -8,18 +18,77 @@ interface ArmBotState {
|
|||
status: string;
|
||||
material: string;
|
||||
triggerId: string;
|
||||
connections: any
|
||||
actions: {
|
||||
uuid: string;
|
||||
name: string;
|
||||
speed: number;
|
||||
processes: {
|
||||
triggerId: string;
|
||||
startPoint: string;
|
||||
endPoint: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
interface StaticMachineState {
|
||||
uuid: string;
|
||||
status: string;
|
||||
actions: { uuid: string; name: string; buffer: number; material: string; };
|
||||
machineTriggerId: string;
|
||||
connectedArmBot: string;
|
||||
}
|
||||
|
||||
interface ArmbotInstancesProps {
|
||||
index: number;
|
||||
armBot: ArmBotState;
|
||||
setArmBots: (armBots: ArmBotState[]) => void;
|
||||
setArmBots: React.Dispatch<React.SetStateAction<ArmBotState[]>>;
|
||||
setStaticMachines: React.Dispatch<React.SetStateAction<StaticMachineState[]>>;
|
||||
}
|
||||
|
||||
export const ArmbotInstances: React.FC<ArmbotInstancesProps> = ({ index, armBot, setArmBots }) => {
|
||||
export const ArmbotInstances: React.FC<ArmbotInstancesProps> = ({ index, armBot, setArmBots, setStaticMachines }) => {
|
||||
const { scene } = useThree();
|
||||
const [processes, setProcesses] = useState<Process[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (armBot.actions.processes.length > 0) {
|
||||
const mappedProcesses = armBot.actions.processes.map((process) => {
|
||||
return {
|
||||
triggerId: process.triggerId,
|
||||
startPoint: scene.getObjectByProperty('uuid', process.startPoint)?.getWorldPosition(new Vector3()),
|
||||
endPoint: scene.getObjectByProperty('uuid', process.endPoint)?.getWorldPosition(new Vector3()),
|
||||
speed: armBot.actions.speed
|
||||
};
|
||||
});
|
||||
setProcesses(mappedProcesses);
|
||||
} else {
|
||||
setProcesses([]);
|
||||
}
|
||||
}, [armBot, scene]);
|
||||
|
||||
const updateArmBotStatus = (status: string) => {
|
||||
setArmBots((prevArmBots) => {
|
||||
return prevArmBots.map(bot => {
|
||||
if (bot.uuid === armBot.uuid) {
|
||||
return { ...bot, status, triggerId: status === 'idle' ? '' : armBot.triggerId };
|
||||
}
|
||||
return bot;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<IkInstances key={index} modelUrl={armModel} position={armBot.position} rotation={armBot.rotation} />
|
||||
<IkInstances
|
||||
key={index}
|
||||
uuid={armBot.uuid}
|
||||
selectedTrigger={armBot.triggerId}
|
||||
modelUrl={armModel}
|
||||
position={armBot.position}
|
||||
rotation={armBot.rotation}
|
||||
processes={processes}
|
||||
armBot={armBot}
|
||||
setStaticMachines={setStaticMachines}
|
||||
updateArmBotStatus={updateArmBotStatus}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,96 +1,310 @@
|
|||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useEffect, useMemo, useState, useRef } from "react";
|
||||
import { useFrame } from "@react-three/fiber";
|
||||
import * as THREE from "three";
|
||||
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
||||
import { useSimulationStates } from "../../../store/store";
|
||||
|
||||
|
||||
interface StaticMachineState {
|
||||
uuid: string;
|
||||
status: string;
|
||||
actions: { uuid: string; name: string; buffer: number; material: string; };
|
||||
machineTriggerId: string;
|
||||
connectedArmBot: string;
|
||||
}
|
||||
|
||||
interface ArmBotState {
|
||||
uuid: string;
|
||||
position: [number, number, number];
|
||||
rotation: [number, number, number];
|
||||
status: string;
|
||||
material: string;
|
||||
triggerId: string;
|
||||
actions: {
|
||||
uuid: string;
|
||||
name: string;
|
||||
speed: number;
|
||||
processes: {
|
||||
triggerId: string;
|
||||
startPoint: string;
|
||||
endPoint: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
type IKAnimationControllerProps = {
|
||||
ikSolver: any;
|
||||
process: {
|
||||
triggerId: string;
|
||||
startPoint: THREE.Vector3;
|
||||
endPoint: THREE.Vector3;
|
||||
speed: number;
|
||||
}[];
|
||||
selectedTrigger: string;
|
||||
targetBoneName: string;
|
||||
uuid: string;
|
||||
logStatus: (status: string) => void;
|
||||
groupRef: React.RefObject<THREE.Group>;
|
||||
armBot: ArmBotState;
|
||||
setStaticMachines: React.Dispatch<React.SetStateAction<StaticMachineState[]>>;
|
||||
updateArmBotStatus: (status: string) => void;
|
||||
}
|
||||
|
||||
const IKAnimationController = ({
|
||||
ikSolver,
|
||||
process,
|
||||
selectedTrigger,
|
||||
targetBoneName,
|
||||
}: {
|
||||
ikSolver: any;
|
||||
process: {
|
||||
trigger: string;
|
||||
start: THREE.Vector3;
|
||||
end: THREE.Vector3;
|
||||
speed: number;
|
||||
}[];
|
||||
selectedTrigger: string;
|
||||
targetBoneName: string;
|
||||
}) => {
|
||||
uuid,
|
||||
logStatus,
|
||||
groupRef,
|
||||
armBot,
|
||||
setStaticMachines,
|
||||
updateArmBotStatus
|
||||
}: IKAnimationControllerProps) => {
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [initialProgress, setInitialProgress] = useState(0);
|
||||
const [needsInitialMovement, setNeedsInitialMovement] = useState(true);
|
||||
const [isInitializing, setIsInitializing] = useState(true);
|
||||
const restSpeed = 0.1;
|
||||
const restPosition = new THREE.Vector3(0, 2, 1.6);
|
||||
const { isPlaying } = usePlayButtonStore();
|
||||
const { simulationStates } = useSimulationStates();
|
||||
|
||||
// Track previous states for comparison
|
||||
const prevStateRef = useRef({
|
||||
isInitializing: true,
|
||||
needsInitialMovement: true,
|
||||
selectedTrigger: "",
|
||||
progress: 0
|
||||
});
|
||||
|
||||
// Track previous status for comparison
|
||||
const prevStatusRef = useRef("");
|
||||
|
||||
const initialCurveRef = useRef<THREE.CatmullRomCurve3 | null>(null);
|
||||
const initialStartPositionRef = useRef<THREE.Vector3 | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setProgress(0);
|
||||
}, [selectedTrigger]);
|
||||
|
||||
const processedCurves = useMemo(() => {
|
||||
const restPosition = new THREE.Vector3(0.2, 2.3, 1.6);
|
||||
return process.map((p) => {
|
||||
const mid = new THREE.Vector3(
|
||||
(p.start.x + p.end.x) / 1,
|
||||
Math.max(p.start.y, p.end.y) + 0.8,
|
||||
(p.start.z + p.end.z) / 0.9
|
||||
useEffect(() => {
|
||||
if (ikSolver) {
|
||||
const targetBone = ikSolver.mesh.skeleton.bones.find(
|
||||
(b: any) => b.name === targetBoneName
|
||||
);
|
||||
const points = [
|
||||
restPosition.clone(),
|
||||
p.start.clone(),
|
||||
mid.clone(),
|
||||
p.end.clone(),
|
||||
restPosition.clone(),
|
||||
];
|
||||
const curve = new THREE.CatmullRomCurve3(points);
|
||||
const restToStartDist = points[0].distanceTo(points[1]);
|
||||
const startToEndDist = points[1].distanceTo(points[3]);
|
||||
const endToRestDist = points[3].distanceTo(points[4]);
|
||||
if (targetBone) {
|
||||
initialStartPositionRef.current = targetBone.position.clone();
|
||||
calculateInitialCurve(targetBone.position);
|
||||
logStatus(`[Arm ${uuid}] Initializing IK system, starting position: ${targetBone.position.toArray()}`);
|
||||
}
|
||||
}
|
||||
}, [ikSolver]);
|
||||
|
||||
const totalDist = restToStartDist + startToEndDist + endToRestDist;
|
||||
const restToStartRange = [0, restToStartDist / totalDist];
|
||||
const startToEndRange = [
|
||||
restToStartRange[1],
|
||||
restToStartRange[1] + startToEndDist / totalDist,
|
||||
];
|
||||
const endToRestRange = [startToEndRange[1], 1];
|
||||
// Log state changes
|
||||
useEffect(() => {
|
||||
const prev = prevStateRef.current;
|
||||
|
||||
return {
|
||||
trigger: p.trigger,
|
||||
curve,
|
||||
speed: p.speed,
|
||||
restToStartRange,
|
||||
startToEndRange,
|
||||
endToRestRange,
|
||||
};
|
||||
});
|
||||
}, [process]);
|
||||
if (prev.isInitializing !== isInitializing) {
|
||||
if (!isInitializing) {
|
||||
logStatus(`[Arm ${uuid}] Completed initialization, now at rest position`);
|
||||
}
|
||||
}
|
||||
|
||||
if (prev.needsInitialMovement !== needsInitialMovement && !needsInitialMovement) {
|
||||
logStatus(`[Arm ${uuid}] Reached rest position, ready for animation`);
|
||||
}
|
||||
|
||||
if (prev.selectedTrigger !== selectedTrigger) {
|
||||
logStatus(`[Arm ${uuid}] Processing new trigger: ${selectedTrigger}`);
|
||||
}
|
||||
|
||||
// Update previous state
|
||||
prevStateRef.current = {
|
||||
isInitializing,
|
||||
needsInitialMovement,
|
||||
selectedTrigger,
|
||||
progress
|
||||
};
|
||||
}, [isInitializing, needsInitialMovement, selectedTrigger, progress]);
|
||||
|
||||
const calculateInitialCurve = (startPosition: THREE.Vector3) => {
|
||||
const direction = new THREE.Vector3().subVectors(restPosition, startPosition);
|
||||
const distance = direction.length();
|
||||
direction.normalize();
|
||||
|
||||
const perpendicular = new THREE.Vector3(-direction.z, 0, direction.x).normalize();
|
||||
|
||||
const midHeight = 0.5;
|
||||
const tiltAmount = 1;
|
||||
const mid = new THREE.Vector3()
|
||||
.addVectors(startPosition, restPosition)
|
||||
.multiplyScalar(0.5)
|
||||
.add(perpendicular.clone().multiplyScalar(distance * 0.3 * tiltAmount))
|
||||
.add(new THREE.Vector3(0, midHeight, 0));
|
||||
|
||||
initialCurveRef.current = new THREE.CatmullRomCurve3([
|
||||
startPosition,
|
||||
new THREE.Vector3().lerpVectors(startPosition, mid, 0.33),
|
||||
mid,
|
||||
new THREE.Vector3().lerpVectors(mid, restPosition, 0.66),
|
||||
restPosition
|
||||
]);
|
||||
};
|
||||
|
||||
const processedCurves = useMemo(() => {
|
||||
if (isPlaying)
|
||||
return process.map((p) => {
|
||||
const tempLift = 0.5;
|
||||
const localStart = groupRef.current?.worldToLocal(p.startPoint.clone().add(new THREE.Vector3(0, tempLift, 0)));
|
||||
const localEnd = groupRef.current?.worldToLocal(p.endPoint.clone().add(new THREE.Vector3(0, tempLift, 0)));
|
||||
|
||||
if (localStart && localEnd) {
|
||||
|
||||
const mid = new THREE.Vector3(
|
||||
(localStart.x + localEnd.x) / 1,
|
||||
Math.max(localStart.y, localEnd.y) + 0.8,
|
||||
(localStart.z + localEnd.z) / 0.9
|
||||
);
|
||||
|
||||
const points = [
|
||||
restPosition.clone(),
|
||||
localStart.clone(),
|
||||
mid.clone(),
|
||||
localEnd.clone(),
|
||||
restPosition.clone(),
|
||||
];
|
||||
const curve = new THREE.CatmullRomCurve3(points);
|
||||
const restToStartDist = points[0].distanceTo(points[1]);
|
||||
const startToEndDist = points[1].distanceTo(points[3]);
|
||||
const endToRestDist = points[3].distanceTo(points[4]);
|
||||
|
||||
const totalDist = restToStartDist + startToEndDist + endToRestDist;
|
||||
const restToStartRange = [0, restToStartDist / totalDist];
|
||||
const startToEndRange = [
|
||||
restToStartRange[1],
|
||||
restToStartRange[1] + startToEndDist / totalDist,
|
||||
];
|
||||
const endToRestRange = [startToEndRange[1], 1];
|
||||
|
||||
return {
|
||||
trigger: p.triggerId,
|
||||
curve,
|
||||
speed: p.speed,
|
||||
restToStartRange,
|
||||
startToEndRange,
|
||||
endToRestRange,
|
||||
};
|
||||
}
|
||||
});
|
||||
}, [process, groupRef, isPlaying]);
|
||||
|
||||
const activeCurve = useMemo(() => {
|
||||
return processedCurves.find((c) => c.trigger === selectedTrigger);
|
||||
}, [processedCurves, selectedTrigger]);
|
||||
if (isPlaying && processedCurves)
|
||||
return processedCurves.find((c) => c?.trigger === selectedTrigger);
|
||||
}, [processedCurves, selectedTrigger, isPlaying]);
|
||||
|
||||
// Initial movement to rest position
|
||||
useFrame((_, delta) => {
|
||||
if (!ikSolver || !activeCurve) return;
|
||||
if (!ikSolver || !needsInitialMovement || !isInitializing || !initialCurveRef.current) return;
|
||||
|
||||
const { curve, speed, startToEndRange } = activeCurve;
|
||||
const targetBone = ikSolver.mesh.skeleton.bones.find(
|
||||
(b: any) => b.name === targetBoneName
|
||||
);
|
||||
if (!targetBone) return;
|
||||
|
||||
setInitialProgress((prev) => {
|
||||
const next = prev + delta * 0.5;
|
||||
if (next >= 1) {
|
||||
targetBone.position.copy(restPosition);
|
||||
setNeedsInitialMovement(false);
|
||||
setIsInitializing(false);
|
||||
return 1;
|
||||
}
|
||||
targetBone.position.copy(initialCurveRef.current!.getPoint(next));
|
||||
return next;
|
||||
});
|
||||
|
||||
ikSolver.update();
|
||||
});
|
||||
|
||||
// Main animation loop
|
||||
useFrame((_, delta) => {
|
||||
if (!ikSolver || !activeCurve || isInitializing || !isPlaying) return;
|
||||
|
||||
const { curve, speed, restToStartRange, startToEndRange, endToRestRange } = activeCurve;
|
||||
const targetBone = ikSolver.mesh.skeleton.bones.find(
|
||||
(b: any) => b.name === targetBoneName
|
||||
);
|
||||
if (!targetBone) return;
|
||||
|
||||
let currentSpeed = restSpeed;
|
||||
if (progress >= startToEndRange[0] && progress < startToEndRange[1]) {
|
||||
let currentStatus = "idle"; // Default status
|
||||
|
||||
// Determine current phase and status
|
||||
if (progress < restToStartRange[1]) {
|
||||
currentSpeed = restSpeed;
|
||||
currentStatus = "moving"; // Moving to start point
|
||||
} else if (progress >= startToEndRange[0] && progress < startToEndRange[1]) {
|
||||
currentSpeed = speed;
|
||||
currentStatus = "moving"; // Moving between points
|
||||
if (1 - progress < 0.05) {
|
||||
// Find the process that matches the current trigger
|
||||
const currentProcess = process.find(p => p.triggerId === selectedTrigger);
|
||||
if (currentProcess) {
|
||||
const triggerId = currentProcess.triggerId;
|
||||
|
||||
const endPoint = armBot.actions.processes.find((process) => process.triggerId === triggerId)?.endPoint;
|
||||
|
||||
// Search simulationStates for a StaticMachine that has a point matching this endPointId
|
||||
const matchedStaticMachine = simulationStates.find(
|
||||
(state) =>
|
||||
state.type === "StaticMachine" &&
|
||||
state.points?.uuid === endPoint// check for static machine with matching point uuid
|
||||
) as any;
|
||||
|
||||
if (matchedStaticMachine) {
|
||||
setStaticMachines((machines) => {
|
||||
return machines.map((machine) => {
|
||||
if (machine.uuid === matchedStaticMachine.modeluuid) {
|
||||
return { ...machine, status: "running" };
|
||||
} else {
|
||||
return machine;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
} else if (progress >= endToRestRange[0] && progress < 1) {
|
||||
currentSpeed = restSpeed;
|
||||
currentStatus = "moving"; // Returning to rest
|
||||
} else if (progress >= 1) {
|
||||
currentStatus = "idle"; // Completed cycle
|
||||
}
|
||||
|
||||
setProgress((prev) => {
|
||||
const next = prev + delta * currentSpeed;
|
||||
if (next >= 1) {
|
||||
targetBone.position.copy(curve.getPoint(1));
|
||||
return 1;
|
||||
}
|
||||
targetBone.position.copy(curve.getPoint(next));
|
||||
return next;
|
||||
});
|
||||
// Update status when it changes
|
||||
if (prevStatusRef.current !== currentStatus) {
|
||||
updateArmBotStatus(currentStatus);
|
||||
prevStatusRef.current = currentStatus;
|
||||
}
|
||||
|
||||
// Only update progress if we're not already at the end
|
||||
if (progress < 1) {
|
||||
setProgress((prev) => {
|
||||
const next = prev + delta * currentSpeed;
|
||||
return Math.min(next, 1); // Cap at 1
|
||||
});
|
||||
}
|
||||
|
||||
// Update bone position based on progress
|
||||
if (progress < 1) {
|
||||
targetBone.position.copy(curve.getPoint(progress));
|
||||
} else {
|
||||
targetBone.position.copy(curve.getPoint(1));
|
||||
}
|
||||
|
||||
ikSolver.update();
|
||||
});
|
||||
|
|
@ -98,4 +312,4 @@ const IKAnimationController = ({
|
|||
return null;
|
||||
};
|
||||
|
||||
export default IKAnimationController;
|
||||
export default IKAnimationController;
|
||||
|
|
@ -1,43 +1,72 @@
|
|||
import * as THREE from "three";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useLoader } from "@react-three/fiber";
|
||||
import { useFrame, useLoader } from "@react-three/fiber";
|
||||
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
|
||||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||||
import { clone } from "three/examples/jsm/utils/SkeletonUtils";
|
||||
import { CCDIKSolver, CCDIKHelper, } from "three/examples/jsm/animation/CCDIKSolver";
|
||||
import IKAnimationController from "./IKAnimationController";
|
||||
import { TransformControls } from "@react-three/drei";
|
||||
|
||||
const IkInstances = ({ modelUrl, position, rotation }: { modelUrl: string; position: [number, number, number]; rotation: [number, number, number]; }) => {
|
||||
interface StaticMachineState {
|
||||
uuid: string;
|
||||
status: string;
|
||||
actions: { uuid: string; name: string; buffer: number; material: string; };
|
||||
machineTriggerId: string;
|
||||
connectedArmBot: string;
|
||||
}
|
||||
|
||||
interface ArmBotState {
|
||||
uuid: string;
|
||||
position: [number, number, number];
|
||||
rotation: [number, number, number];
|
||||
status: string;
|
||||
material: string;
|
||||
triggerId: string;
|
||||
actions: {
|
||||
uuid: string;
|
||||
name: string;
|
||||
speed: number;
|
||||
processes: {
|
||||
triggerId: string;
|
||||
startPoint: string;
|
||||
endPoint: string;
|
||||
}[];
|
||||
};
|
||||
}
|
||||
|
||||
const IkInstances = ({
|
||||
uuid,
|
||||
selectedTrigger,
|
||||
modelUrl,
|
||||
processes,
|
||||
position,
|
||||
rotation,
|
||||
armBot,
|
||||
setStaticMachines,
|
||||
updateArmBotStatus
|
||||
}: {
|
||||
uuid: string;
|
||||
selectedTrigger: string;
|
||||
modelUrl: string;
|
||||
processes: any;
|
||||
position: [number, number, number];
|
||||
rotation: [number, number, number];
|
||||
armBot: ArmBotState;
|
||||
setStaticMachines: React.Dispatch<React.SetStateAction<StaticMachineState[]>>;
|
||||
updateArmBotStatus: (status: string) => void;
|
||||
}) => {
|
||||
const [ikSolver, setIkSolver] = useState<any>(null);
|
||||
const [selectedTrigger, setSelectedTrigger] = useState<string>("idle");
|
||||
const gltf = useLoader(GLTFLoader, modelUrl, (loader) => {
|
||||
const draco = new DRACOLoader();
|
||||
draco.setDecoderPath(
|
||||
"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/"
|
||||
);
|
||||
draco.setDecoderPath("https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/");
|
||||
loader.setDRACOLoader(draco);
|
||||
});
|
||||
const cloned = useMemo(() => clone(gltf.scene), [gltf]);
|
||||
const groupRef = useRef<any>(null);
|
||||
const [selectedArm, setSelectedArm] = useState<THREE.Group>();
|
||||
const targetBoneName = "Target";
|
||||
const skinnedMeshName = "link_0";
|
||||
|
||||
const process = useMemo(() => [
|
||||
{
|
||||
trigger: "Trigger1",
|
||||
start: new THREE.Vector3(-0.75, 1.5, -2.2),
|
||||
end: new THREE.Vector3(0, 1.2, 2.2),
|
||||
speed: 0.25,
|
||||
},
|
||||
{
|
||||
trigger: "Trigger2",
|
||||
start: new THREE.Vector3(0, 1.2, 2.2),
|
||||
end: new THREE.Vector3(0.75, 1.5, -2.2),
|
||||
speed: 0.22,
|
||||
}
|
||||
], []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!gltf) return;
|
||||
const OOI: any = {};
|
||||
|
|
@ -85,42 +114,36 @@ const IkInstances = ({ modelUrl, position, rotation }: { modelUrl: string; posit
|
|||
|
||||
}, [gltf]);
|
||||
|
||||
useEffect(() => {
|
||||
const triggers = ['Trigger1', 'Trigger2'];
|
||||
let index = 0;
|
||||
|
||||
const cycleTriggers = setInterval(() => {
|
||||
setSelectedTrigger(triggers[index]);
|
||||
index = (index + 1) % triggers.length;
|
||||
}, 10000);
|
||||
|
||||
return () => clearInterval(cycleTriggers);
|
||||
}, []);
|
||||
const logStatus = (status: string) => {
|
||||
// console.log(status);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<group
|
||||
ref={groupRef}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedArm(groupRef.current?.getObjectByName(targetBoneName))
|
||||
}}
|
||||
position={position}
|
||||
rotation={rotation}
|
||||
>
|
||||
<primitive
|
||||
object={cloned}
|
||||
position={position}
|
||||
rotation={rotation}
|
||||
scale={[1, 1, 1]}
|
||||
name={`arm-bot`}
|
||||
/>
|
||||
</group>
|
||||
<IKAnimationController
|
||||
ikSolver={ikSolver}
|
||||
process={process}
|
||||
process={processes}
|
||||
selectedTrigger={selectedTrigger}
|
||||
targetBoneName={targetBoneName}
|
||||
uuid={uuid}
|
||||
logStatus={logStatus}
|
||||
groupRef={groupRef}
|
||||
armBot={armBot}
|
||||
setStaticMachines={setStaticMachines}
|
||||
updateArmBotStatus={updateArmBotStatus}
|
||||
/>
|
||||
{/* {selectedArm && <TransformControls object={selectedArm} />} */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { useFrame, useThree } from '@react-three/fiber';
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import * as THREE from 'three';
|
||||
import * as Types from '../../../types/world/worldTypes';
|
||||
import * as SimulationTypes from '../../../types/simulation';
|
||||
import * as SimulationTypes from '../../../types/simulationTypes';
|
||||
import { QuadraticBezierLine } from '@react-three/drei';
|
||||
import { useDeleteTool, useIsConnecting, useRenderDistance, useSimulationStates, useSocketStore } from '../../../store/store';
|
||||
import useModuleStore from '../../../store/useModuleStore';
|
||||
|
|
@ -982,7 +982,6 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
|||
setSimulationStates(updatedStates);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<group name='simulationConnectionGroup' visible={!isPlaying}>
|
||||
{simulationStates.flatMap(path => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import * as THREE from "three";
|
||||
import * as SimulationTypes from "../../../types/simulation";
|
||||
import * as SimulationTypes from "../../../types/simulationTypes";
|
||||
import { useRef, useState, useEffect, useMemo } from "react";
|
||||
import { Sphere, TransformControls } from "@react-three/drei";
|
||||
import {
|
||||
|
|
@ -66,45 +66,6 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
|
|||
});
|
||||
});
|
||||
|
||||
const updateSimulationPaths = () => {
|
||||
if (!selectedActionSphere) return;
|
||||
|
||||
const updatedPaths = simulationStates.map((path) => {
|
||||
if (path.type === "Conveyor") {
|
||||
return {
|
||||
...path,
|
||||
points: path.points.map((point) =>
|
||||
point.uuid === selectedActionSphere.points.uuid
|
||||
? {
|
||||
...point,
|
||||
position: [
|
||||
selectedActionSphere.points.position.x,
|
||||
selectedActionSphere.points.position.y,
|
||||
selectedActionSphere.points.position.z,
|
||||
],
|
||||
rotation: [
|
||||
selectedActionSphere.points.rotation.x,
|
||||
selectedActionSphere.points.rotation.y,
|
||||
selectedActionSphere.points.rotation.z,
|
||||
],
|
||||
}
|
||||
: point
|
||||
),
|
||||
};
|
||||
} else {
|
||||
return path;
|
||||
}
|
||||
}) as SimulationTypes.ConveyorEventsSchema[];
|
||||
|
||||
const updatedPath = updatedPaths.find(
|
||||
(path) => path.type === "Conveyor" && path.points.some((point) => point.uuid === selectedActionSphere.points.uuid)
|
||||
);
|
||||
|
||||
// console.log("Updated Path:", updatedPath);
|
||||
|
||||
setSimulationStates(updatedPaths);
|
||||
};
|
||||
|
||||
useFrame(() => {
|
||||
if (eyeDropMode) {
|
||||
raycaster.setFromCamera(pointer, camera);
|
||||
|
|
@ -445,7 +406,6 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
|
|||
ref={transformRef}
|
||||
object={selectedActionSphere.points}
|
||||
mode={transformMode}
|
||||
onMouseUp={updateSimulationPaths}
|
||||
/>
|
||||
)}
|
||||
</group>
|
||||
|
|
|
|||
|
|
@ -11,11 +11,23 @@ import { ProcessData } from "./types";
|
|||
import { useSimulationStates } from "../../../store/store";
|
||||
import { retrieveGLTF } from "../../../utils/indexDB/idbUtils";
|
||||
|
||||
interface ArmBotState {
|
||||
uuid: string;
|
||||
position: [number, number, number];
|
||||
rotation: [number, number, number];
|
||||
status: string;
|
||||
material: string;
|
||||
triggerId: string;
|
||||
actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; };
|
||||
}
|
||||
|
||||
interface ProcessContainerProps {
|
||||
processes: ProcessData[];
|
||||
setProcesses: React.Dispatch<React.SetStateAction<any[]>>;
|
||||
agvRef: any;
|
||||
MaterialRef: any;
|
||||
armBots: ArmBotState[];
|
||||
setArmBots: React.Dispatch<React.SetStateAction<ArmBotState[]>>;
|
||||
}
|
||||
|
||||
const ProcessAnimator: React.FC<ProcessContainerProps> = ({
|
||||
|
|
@ -23,6 +35,8 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
|
|||
setProcesses,
|
||||
agvRef,
|
||||
MaterialRef,
|
||||
armBots,
|
||||
setArmBots
|
||||
}) => {
|
||||
const gltf = useLoader(GLTFLoader, crate) as GLTF;
|
||||
const groupRef = useRef<THREE.Group>(null);
|
||||
|
|
@ -42,7 +56,7 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
|
|||
getPointDataForAnimationIndex,
|
||||
processes: processedProcesses,
|
||||
checkAndCountTriggers,
|
||||
} = useProcessAnimation(processes, setProcesses, agvRef);
|
||||
} = useProcessAnimation(processes, setProcesses, agvRef, armBots, setArmBots);
|
||||
|
||||
const baseMaterials = useMemo(() => ({
|
||||
Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
|
||||
|
|
|
|||
|
|
@ -2,11 +2,23 @@ import React, { useState } from "react";
|
|||
import ProcessCreator from "./processCreator";
|
||||
import ProcessAnimator from "./processAnimator";
|
||||
|
||||
interface ArmBotState {
|
||||
uuid: string;
|
||||
position: [number, number, number];
|
||||
rotation: [number, number, number];
|
||||
status: string;
|
||||
material: string;
|
||||
triggerId: string;
|
||||
actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; };
|
||||
}
|
||||
|
||||
interface ProcessContainerProps {
|
||||
processes: any[];
|
||||
setProcesses: React.Dispatch<React.SetStateAction<any[]>>;
|
||||
agvRef: any;
|
||||
MaterialRef: any;
|
||||
armBots: ArmBotState[];
|
||||
setArmBots: React.Dispatch<React.SetStateAction<ArmBotState[]>>;
|
||||
}
|
||||
|
||||
const ProcessContainer: React.FC<ProcessContainerProps> = ({
|
||||
|
|
@ -14,6 +26,8 @@ const ProcessContainer: React.FC<ProcessContainerProps> = ({
|
|||
setProcesses,
|
||||
agvRef,
|
||||
MaterialRef,
|
||||
armBots,
|
||||
setArmBots
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -23,6 +37,8 @@ const ProcessContainer: React.FC<ProcessContainerProps> = ({
|
|||
setProcesses={setProcesses}
|
||||
agvRef={agvRef}
|
||||
MaterialRef={MaterialRef}
|
||||
armBots={armBots}
|
||||
setArmBots={setArmBots}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -458,7 +458,7 @@ import { useThree } from "@react-three/fiber";
|
|||
import {
|
||||
ConveyorEventsSchema,
|
||||
VehicleEventsSchema,
|
||||
} from "../../../types/simulation";
|
||||
} from "../../../types/simulationTypes";
|
||||
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
||||
|
||||
// Type definitions
|
||||
|
|
|
|||
|
|
@ -21,15 +21,15 @@ export interface PointAction {
|
|||
}
|
||||
|
||||
export interface ProcessPoint {
|
||||
uuid: string;
|
||||
uuid: string;
|
||||
position: number[];
|
||||
rotation: number[];
|
||||
actions: PointAction[];
|
||||
rotation: number[];
|
||||
actions: PointAction[];
|
||||
connections: {
|
||||
source: { modelUUID: string; pointUUID: string };
|
||||
targets: { modelUUID: string; pointUUID: string }[];
|
||||
source: { modelUUID: string; pointUUID: string };
|
||||
targets: { modelUUID: string; pointUUID: string }[];
|
||||
};
|
||||
triggers?: Trigger[];
|
||||
triggers?: Trigger[];
|
||||
}
|
||||
export interface ProcessPath {
|
||||
modeluuid: string;
|
||||
|
|
@ -38,7 +38,7 @@ export interface ProcessPath {
|
|||
pathPosition: number[];
|
||||
pathRotation: number[];
|
||||
speed: number;
|
||||
type: "Conveyor" | "Vehicle";
|
||||
type: "Conveyor" | "Vehicle" | "ArmBot";
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,10 +39,22 @@ interface PlayAgvState {
|
|||
setPlayAgv: (data: any) => void;
|
||||
}
|
||||
|
||||
interface ArmBotState {
|
||||
uuid: string;
|
||||
position: [number, number, number];
|
||||
rotation: [number, number, number];
|
||||
status: string;
|
||||
material: string;
|
||||
triggerId: string;
|
||||
actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; };
|
||||
}
|
||||
|
||||
export const useProcessAnimation = (
|
||||
processes: ProcessData[],
|
||||
setProcesses: React.Dispatch<React.SetStateAction<any[]>>,
|
||||
agvRef: any
|
||||
agvRef: any,
|
||||
armBots: ArmBotState[],
|
||||
setArmBots: React.Dispatch<React.SetStateAction<ArmBotState[]>>
|
||||
) => {
|
||||
// State and refs initialization
|
||||
const { isPlaying, setIsPlaying } = usePlayButtonStore();
|
||||
|
|
@ -438,6 +450,8 @@ export const useProcessAnimation = (
|
|||
[handleMaterialSwap]
|
||||
);
|
||||
|
||||
const deferredArmBotUpdates = useRef<{ uuid: string; triggerId: string }[]>([]);
|
||||
|
||||
// Trigger counting system
|
||||
const checkAndCountTriggers = useCallback(
|
||||
(
|
||||
|
|
@ -457,46 +471,54 @@ export const useProcessAnimation = (
|
|||
const point = getPointDataForAnimationIndex(process, currentPointIndex);
|
||||
if (!point?.triggers) return prev;
|
||||
|
||||
const onHitTriggers = point.triggers.filter(
|
||||
(t: Trigger) => t.type === "On-Hit" && t.isUsed
|
||||
);
|
||||
const onHitTriggers = point.triggers.filter((t: Trigger) => t.type === "On-Hit" && t.isUsed);
|
||||
|
||||
if (onHitTriggers.length === 0) return prev;
|
||||
|
||||
let newTriggerCounts = { ...processState.triggerCounts };
|
||||
const newTriggerLogs = [...processState.triggerLogs];
|
||||
let shouldLog = false;
|
||||
|
||||
// Find all vehicle paths for this process
|
||||
const vehiclePaths = process.paths.filter(
|
||||
(path) => path.type === "Vehicle"
|
||||
);
|
||||
const vehiclePaths = process.paths.filter((path) => path.type === "Vehicle");
|
||||
const armBotPaths = process.paths.filter((path) => path.type === "ArmBot");
|
||||
|
||||
// Check if any vehicle is active for this process
|
||||
const activeVehicles = vehiclePaths.filter(path => {
|
||||
const activeVehicles = vehiclePaths.filter((path) => {
|
||||
const vehicleId = path.modeluuid;
|
||||
const vehicleEntry = agvRef.current.find(
|
||||
(v: any) => v.vehicleId === vehicleId && v.processId === processId
|
||||
);
|
||||
const vehicleEntry = agvRef.current.find((v: any) => v.vehicleId === vehicleId && v.processId === processId);
|
||||
return vehicleEntry?.isActive;
|
||||
});
|
||||
|
||||
// Only count triggers if no vehicles are active for this process
|
||||
// Check if any ArmBot is active for this process
|
||||
// const activeArmBots = armBotPaths.filter((path) => {
|
||||
// const armBotId = path.modeluuid;
|
||||
// const armBotEntry = armBots.find((a: any) => a.uuid === armBotId);
|
||||
// return armBotEntry;
|
||||
// });
|
||||
|
||||
// Only count triggers if no vehicles and no ArmBots are active for this process
|
||||
|
||||
if (activeVehicles.length === 0) {
|
||||
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 connections = point.connections?.targets || [];
|
||||
|
||||
connections.forEach((connection) => {
|
||||
const connectedModelUUID = connection.modelUUID;
|
||||
|
||||
const matchingArmPath = armBotPaths.find((path) => path.modeluuid === connectedModelUUID);
|
||||
|
||||
if (matchingArmPath) {
|
||||
deferredArmBotUpdates.current.push({
|
||||
uuid: connectedModelUUID,
|
||||
triggerId: trigger.uuid,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
let processTotalHits = Object.values(newTriggerCounts).reduce((a, b) => a + b, 0);
|
||||
|
||||
// Handle logic for vehicles and ArmBots when a trigger is hit
|
||||
if (shouldLog) {
|
||||
vehiclePaths.forEach((vehiclePath) => {
|
||||
if (vehiclePath.points?.length > 0) {
|
||||
|
|
@ -506,7 +528,10 @@ export const useProcessAnimation = (
|
|||
|
||||
if (maxHitCount !== undefined) {
|
||||
const vehicleId = vehiclePath.modeluuid;
|
||||
let vehicleEntry = agvRef.current.find((v: any) => v.vehicleId === vehicleId && v.processId === processId);
|
||||
let vehicleEntry = agvRef.current.find(
|
||||
(v: any) =>
|
||||
v.vehicleId === vehicleId && v.processId === processId
|
||||
);
|
||||
|
||||
if (!vehicleEntry) {
|
||||
vehicleEntry = {
|
||||
|
|
@ -515,14 +540,13 @@ export const useProcessAnimation = (
|
|||
maxHitCount: maxHitCount,
|
||||
isActive: false,
|
||||
hitCount: 0,
|
||||
status: 'stationed'
|
||||
status: "stationed",
|
||||
};
|
||||
agvRef.current.push(vehicleEntry);
|
||||
}
|
||||
|
||||
// if (!vehicleEntry.isActive && vehicleEntry.status === 'picking') {
|
||||
if (!vehicleEntry.isActive) {
|
||||
vehicleEntry.hitCount = processTotalHits;
|
||||
vehicleEntry.hitCount++;
|
||||
vehicleEntry.lastUpdated = currentTime;
|
||||
|
||||
if (vehicleEntry.hitCount >= vehicleEntry.maxHitCount) {
|
||||
|
|
@ -546,9 +570,21 @@ export const useProcessAnimation = (
|
|||
},
|
||||
};
|
||||
});
|
||||
},
|
||||
[]
|
||||
);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (deferredArmBotUpdates.current.length > 0) {
|
||||
const updates = [...deferredArmBotUpdates.current];
|
||||
deferredArmBotUpdates.current = [];
|
||||
|
||||
setArmBots((prev) =>
|
||||
prev.map((bot) => {
|
||||
const update = updates.find((u) => u.uuid === bot.uuid);
|
||||
return update ? { ...bot, triggerId: update.triggerId } : bot;
|
||||
})
|
||||
);
|
||||
}
|
||||
}, [animationStates]);
|
||||
|
||||
// Utility functions
|
||||
const hasNonInheritActions = useCallback(
|
||||
|
|
|
|||
|
|
@ -6,40 +6,64 @@ import useModuleStore from "../../store/useModuleStore";
|
|||
import ProcessContainer from "./process/processContainer";
|
||||
import Agv from "../builder/agv/agv";
|
||||
import ArmBot from "./armbot/ArmBot";
|
||||
import StaticMachine from "./staticMachine/staticMachine";
|
||||
|
||||
interface ArmBotState {
|
||||
uuid: string;
|
||||
position: [number, number, number];
|
||||
rotation: [number, number, number];
|
||||
status: string;
|
||||
material: string;
|
||||
triggerId: string;
|
||||
actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; };
|
||||
}
|
||||
|
||||
interface StaticMachineState {
|
||||
uuid: string;
|
||||
status: string;
|
||||
actions: { uuid: string; name: string; buffer: number; material: string; };
|
||||
machineTriggerId: string;
|
||||
connectedArmBot: string;
|
||||
}
|
||||
|
||||
function Simulation() {
|
||||
const { activeModule } = useModuleStore();
|
||||
const pathsGroupRef = useRef() as React.MutableRefObject<THREE.Group>;
|
||||
const [processes, setProcesses] = useState<any[]>([]);
|
||||
const agvRef = useRef([]);
|
||||
const MaterialRef = useRef([]);
|
||||
const { activeModule } = useModuleStore();
|
||||
const pathsGroupRef = useRef() as React.MutableRefObject<THREE.Group>;
|
||||
const [armBots, setArmBots] = useState<ArmBotState[]>([]);
|
||||
const [staticMachines, setStaticMachines] = useState<StaticMachineState[]>([]);
|
||||
const [processes, setProcesses] = useState<any[]>([]);
|
||||
const agvRef = useRef([]);
|
||||
const MaterialRef = useRef([]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{activeModule === "simulation" && (
|
||||
return (
|
||||
<>
|
||||
<PathCreation pathsGroupRef={pathsGroupRef} />
|
||||
{activeModule === "simulation" && (
|
||||
<>
|
||||
<PathCreation pathsGroupRef={pathsGroupRef} />
|
||||
|
||||
<PathConnector pathsGroupRef={pathsGroupRef} />
|
||||
<PathConnector pathsGroupRef={pathsGroupRef} />
|
||||
|
||||
<ProcessContainer
|
||||
processes={processes}
|
||||
setProcesses={setProcesses}
|
||||
agvRef={agvRef}
|
||||
MaterialRef={MaterialRef}
|
||||
/>
|
||||
<ProcessContainer
|
||||
processes={processes}
|
||||
setProcesses={setProcesses}
|
||||
agvRef={agvRef}
|
||||
MaterialRef={MaterialRef}
|
||||
armBots={armBots}
|
||||
setArmBots={setArmBots}
|
||||
/>
|
||||
|
||||
<Agv
|
||||
processes={processes}
|
||||
agvRef={agvRef}
|
||||
MaterialRef={MaterialRef}
|
||||
/>
|
||||
<Agv
|
||||
processes={processes}
|
||||
agvRef={agvRef}
|
||||
MaterialRef={MaterialRef}
|
||||
/>
|
||||
|
||||
</>
|
||||
)}
|
||||
<StaticMachine setArmBots={setArmBots} staticMachines={staticMachines} setStaticMachines={setStaticMachines} />
|
||||
<ArmBot armBots={armBots} setArmBots={setArmBots} setStaticMachines={setStaticMachines} />
|
||||
</>
|
||||
)}
|
||||
<ArmBot />
|
||||
</>
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
export default Simulation;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
import React, { useEffect } from 'react'
|
||||
import * as SimulationTypes from '../../../types/simulationTypes';
|
||||
import { useSimulationStates } from '../../../store/store';
|
||||
import StaticMachineInstances from './staticMachineInstances';
|
||||
|
||||
interface ArmBotState {
|
||||
uuid: string;
|
||||
position: [number, number, number];
|
||||
rotation: [number, number, number];
|
||||
status: string;
|
||||
material: string;
|
||||
triggerId: string;
|
||||
actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; };
|
||||
}
|
||||
|
||||
interface StaticMachineState {
|
||||
uuid: string;
|
||||
status: string;
|
||||
actions: { uuid: string; name: string; buffer: number; material: string; };
|
||||
machineTriggerId: string;
|
||||
connectedArmBot: string;
|
||||
}
|
||||
|
||||
type StaticMachineProps = {
|
||||
setArmBots: React.Dispatch<React.SetStateAction<ArmBotState[]>>;
|
||||
staticMachines: StaticMachineState[];
|
||||
setStaticMachines: React.Dispatch<React.SetStateAction<StaticMachineState[]>>;
|
||||
}
|
||||
|
||||
function StaticMachine({ setArmBots, staticMachines, setStaticMachines }: StaticMachineProps) {
|
||||
|
||||
const { simulationStates } = useSimulationStates();
|
||||
|
||||
useEffect(() => {
|
||||
const filtered = simulationStates.filter((s): s is SimulationTypes.StaticMachineEventsSchema => s.type === "StaticMachine");
|
||||
const initialStates: StaticMachineState[] = filtered
|
||||
.filter(machine => machine.points.connections.targets.length > 0)
|
||||
.map(machine => ({
|
||||
uuid: machine.modeluuid,
|
||||
status: "idle",
|
||||
actions: machine.points.actions,
|
||||
machineTriggerId: machine.points.triggers.uuid,
|
||||
connectedArmBot: machine.points.connections.targets[0].modelUUID
|
||||
}));
|
||||
setStaticMachines(initialStates);
|
||||
}, [simulationStates]);
|
||||
|
||||
const updateArmBotTriggerAndMachineStatus = (armBotUuid: string, triggerId: string, machineId: string) => {
|
||||
setArmBots((prevArmBots) => {
|
||||
return prevArmBots.map(bot => {
|
||||
if (bot.uuid === armBotUuid) {
|
||||
return { ...bot, triggerId: triggerId };
|
||||
}
|
||||
return bot;
|
||||
});
|
||||
});
|
||||
setStaticMachines((prevStaticMachines) => {
|
||||
return prevStaticMachines.map(machine => {
|
||||
if (machine.uuid === machineId) {
|
||||
return { ...machine, status: "idle" };
|
||||
} else {
|
||||
return machine;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{staticMachines.map((machine, index) => (
|
||||
<StaticMachineInstances key={index} machine={machine} updateArmBotTriggerAndMachineStatus={updateArmBotTriggerAndMachineStatus} />
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default StaticMachine;
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import React, { useEffect } from 'react'
|
||||
import { useAnimationPlaySpeed } from '../../../store/usePlayButtonStore';
|
||||
|
||||
interface StaticMachineState {
|
||||
uuid: string;
|
||||
status: string;
|
||||
actions: { uuid: string; name: string; buffer: number; material: string; };
|
||||
machineTriggerId: string;
|
||||
connectedArmBot: string;
|
||||
}
|
||||
|
||||
type StaticMachineInstancesProps = {
|
||||
machine: StaticMachineState,
|
||||
updateArmBotTriggerAndMachineStatus: (armBotUuid: string, triggerId: string, machineId: string) => void;
|
||||
}
|
||||
|
||||
function StaticMachineInstances({ machine, updateArmBotTriggerAndMachineStatus }: StaticMachineInstancesProps) {
|
||||
const { speed } = useAnimationPlaySpeed();
|
||||
|
||||
useEffect(() => {
|
||||
if (machine.status === 'running') {
|
||||
setTimeout(() => {
|
||||
updateArmBotTriggerAndMachineStatus(machine.connectedArmBot, machine.machineTriggerId, machine.uuid);
|
||||
}, machine.actions.buffer * 1000 * speed);
|
||||
}
|
||||
}, [machine])
|
||||
|
||||
return (
|
||||
<></>
|
||||
)
|
||||
}
|
||||
|
||||
export default StaticMachineInstances
|
||||
|
|
@ -100,6 +100,8 @@ export const DraggableWidget = ({
|
|||
|
||||
const deleteSelectedChart = async () => {
|
||||
try {
|
||||
console.log("delete");
|
||||
|
||||
const email = localStorage.getItem("email") || "";
|
||||
const organization = email?.split("@")[1]?.split(".")[0];
|
||||
let deleteWidget = {
|
||||
|
|
@ -109,7 +111,9 @@ export const DraggableWidget = ({
|
|||
};
|
||||
|
||||
if (visualizationSocket) {
|
||||
setSelectedChartId(null)
|
||||
visualizationSocket.emit("v2:viz-widget:delete", deleteWidget);
|
||||
console.log("delete widget",selectedChartId);
|
||||
}
|
||||
const updatedWidgets = selectedZone.widgets.filter(
|
||||
(w: Widget) => w.id !== widget.id
|
||||
|
|
@ -120,7 +124,6 @@ export const DraggableWidget = ({
|
|||
widgets: updatedWidgets,
|
||||
}));
|
||||
setOpenKebabId(null);
|
||||
|
||||
// const response = await deleteWidgetApi(widget.id, organization);
|
||||
// if (response?.message === "Widget deleted successfully") {
|
||||
// const updatedWidgets = selectedZone.widgets.filter(
|
||||
|
|
@ -175,6 +178,7 @@ export const DraggableWidget = ({
|
|||
|
||||
const duplicatedWidget: Widget = {
|
||||
...widget,
|
||||
title: name === '' ? widget.title : name,
|
||||
Data: {
|
||||
duration: duration,
|
||||
measurements: { ...measurements },
|
||||
|
|
@ -187,6 +191,7 @@ export const DraggableWidget = ({
|
|||
zoneId: selectedZone.zoneId,
|
||||
widget: duplicatedWidget,
|
||||
};
|
||||
|
||||
if (visualizationSocket) {
|
||||
visualizationSocket.emit("v2:viz-widget:add", duplicateWidget);
|
||||
}
|
||||
|
|
@ -306,7 +311,10 @@ export const DraggableWidget = ({
|
|||
: undefined,
|
||||
}}
|
||||
ref={chartWidget}
|
||||
onClick={() => setSelectedChartId(widget)}
|
||||
onClick={() => {setSelectedChartId(widget)
|
||||
console.log('click');
|
||||
|
||||
}}
|
||||
>
|
||||
{/* Kebab Icon */}
|
||||
<div className="icon kebab" onClick={handleKebabClick}>
|
||||
|
|
@ -327,7 +335,10 @@ export const DraggableWidget = ({
|
|||
</div>
|
||||
<div className="label">Duplicate</div>
|
||||
</div>
|
||||
<div className="edit btn" onClick={deleteSelectedChart}>
|
||||
<div className="edit btn" onClick={(e)=>{
|
||||
e.stopPropagation()
|
||||
deleteSelectedChart();
|
||||
}}>
|
||||
<div className="icon">
|
||||
<DeleteIcon />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import * as THREE from "three";
|
||||
import * as Types from "../types/world/worldTypes";
|
||||
import * as SimulationTypes from "../types/simulation";
|
||||
import * as SimulationTypes from "../types/simulationTypes";
|
||||
import { create } from "zustand";
|
||||
import { io } from "socket.io-client";
|
||||
|
||||
|
|
|
|||
|
|
@ -101,6 +101,7 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
|
|||
let visualizationSocket = socketState.visualizationSocket;
|
||||
let iotMeasurements = iotData.flotingMeasurements;
|
||||
let iotDuration = iotData.flotingDuration;
|
||||
let iotHeader = iotData.header
|
||||
|
||||
if (!zone) return;
|
||||
|
||||
|
|
@ -117,6 +118,7 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
|
|||
measurements: iotMeasurements,
|
||||
duration: iotDuration,
|
||||
},
|
||||
header: iotHeader,
|
||||
id: `${originalObject.id}-copy-${Date.now()}`, // Unique ID
|
||||
position: {
|
||||
...originalObject.position,
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ interface StaticMachineEventsSchema {
|
|||
uuid: string;
|
||||
position: [number, number, number];
|
||||
rotation: [number, number, number];
|
||||
actions: { uuid: string; name: string; buffer: number | string; material: string; isUsed: boolean; };
|
||||
actions: { uuid: string; name: string; buffer: number; material: string; };
|
||||
triggers: { uuid: string; name: string; type: string };
|
||||
connections: {
|
||||
source: { modelUUID: string; pointUUID: string };
|
||||
|
|
@ -103,7 +103,7 @@ export type EventData = {
|
|||
isLocked: boolean;
|
||||
isVisible: boolean;
|
||||
eventData?:
|
||||
| {
|
||||
{
|
||||
type: "Conveyor";
|
||||
points: {
|
||||
uuid: string;
|
||||
Loading…
Reference in New Issue