feat: Extend simulation state types to include ArmBot events and update related components
- Updated RotateControls and SelectionControls to handle ArmBot events in simulation states. - Enhanced PathConnector to manage connections involving ArmBot and StaticMachine types. - Added ArmBotMechanics and StaticMachineMechanics components for managing properties of ArmBot and StaticMachine. - Modified types in worldTypes to include rotation for ArmBot and StaticMachine events. - Updated store to accommodate new ArmBot event types in simulation states.
This commit is contained in:
parent
c44629f07d
commit
272317991a
|
@ -22,6 +22,8 @@ import GlobalProperties from "./properties/GlobalProperties";
|
||||||
import AsstePropertiies from "./properties/AssetProperties";
|
import AsstePropertiies from "./properties/AssetProperties";
|
||||||
import ZoneProperties from "./properties/ZoneProperties";
|
import ZoneProperties from "./properties/ZoneProperties";
|
||||||
import VehicleMechanics from "./mechanics/VehicleMechanics";
|
import VehicleMechanics from "./mechanics/VehicleMechanics";
|
||||||
|
import StaticMachineMechanics from "./mechanics/StaticMachineMechanics";
|
||||||
|
import ArmBotMechanics from "./mechanics/ArmBotMechanics";
|
||||||
|
|
||||||
const SideBarRight: React.FC = () => {
|
const SideBarRight: React.FC = () => {
|
||||||
const { activeModule } = useModuleStore();
|
const { activeModule } = useModuleStore();
|
||||||
|
@ -42,9 +44,8 @@ const SideBarRight: React.FC = () => {
|
||||||
<div className="sidebar-actions-container">
|
<div className="sidebar-actions-container">
|
||||||
{/* {activeModule === "builder" && ( */}
|
{/* {activeModule === "builder" && ( */}
|
||||||
<div
|
<div
|
||||||
className={`sidebar-action-list ${
|
className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
|
||||||
subModule === "properties" ? "active" : ""
|
}`}
|
||||||
}`}
|
|
||||||
onClick={() => setSubModule("properties")}
|
onClick={() => setSubModule("properties")}
|
||||||
>
|
>
|
||||||
<PropertiesIcon isActive={subModule === "properties"} />
|
<PropertiesIcon isActive={subModule === "properties"} />
|
||||||
|
@ -53,25 +54,22 @@ const SideBarRight: React.FC = () => {
|
||||||
{activeModule === "simulation" && (
|
{activeModule === "simulation" && (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className={`sidebar-action-list ${
|
className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
|
||||||
subModule === "mechanics" ? "active" : ""
|
}`}
|
||||||
}`}
|
|
||||||
onClick={() => setSubModule("mechanics")}
|
onClick={() => setSubModule("mechanics")}
|
||||||
>
|
>
|
||||||
<MechanicsIcon isActive={subModule === "mechanics"} />
|
<MechanicsIcon isActive={subModule === "mechanics"} />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={`sidebar-action-list ${
|
className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
|
||||||
subModule === "simulations" ? "active" : ""
|
}`}
|
||||||
}`}
|
|
||||||
onClick={() => setSubModule("simulations")}
|
onClick={() => setSubModule("simulations")}
|
||||||
>
|
>
|
||||||
<SimulationIcon isActive={subModule === "simulations"} />
|
<SimulationIcon isActive={subModule === "simulations"} />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={`sidebar-action-list ${
|
className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
|
||||||
subModule === "analysis" ? "active" : ""
|
}`}
|
||||||
}`}
|
|
||||||
onClick={() => setSubModule("analysis")}
|
onClick={() => setSubModule("analysis")}
|
||||||
>
|
>
|
||||||
<AnalysisIcon isActive={subModule === "analysis"} />
|
<AnalysisIcon isActive={subModule === "analysis"} />
|
||||||
|
@ -132,10 +130,28 @@ const SideBarRight: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{subModule === "mechanics" &&
|
||||||
|
selectedActionSphere &&
|
||||||
|
selectedActionSphere.path.type === "StaticMachine" && (
|
||||||
|
<div className="sidebar-right-container">
|
||||||
|
<div className="sidebar-right-content-container">
|
||||||
|
<StaticMachineMechanics />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{subModule === "mechanics" &&
|
||||||
|
selectedActionSphere &&
|
||||||
|
selectedActionSphere.path.type === "ArmBot" && (
|
||||||
|
<div className="sidebar-right-container">
|
||||||
|
<div className="sidebar-right-content-container">
|
||||||
|
<ArmBotMechanics />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
{subModule === "mechanics" && !selectedActionSphere && (
|
{subModule === "mechanics" && !selectedActionSphere && (
|
||||||
<div className="sidebar-right-container">
|
<div className="sidebar-right-container">
|
||||||
<div className="sidebar-right-content-container">
|
<div className="sidebar-right-content-container">
|
||||||
<ConveyorMechanics />
|
<ConveyorMechanics /> {/* default */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -0,0 +1,90 @@
|
||||||
|
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 Types from '../../../../types/world/worldTypes';
|
||||||
|
import PositionInput from "../customInput/PositionInputs";
|
||||||
|
import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
|
||||||
|
|
||||||
|
const ArmBotMechanics: React.FC = () => {
|
||||||
|
const { selectedActionSphere } = useSelectedActionSphere();
|
||||||
|
const { simulationStates, setSimulationStates } = useSimulationStates();
|
||||||
|
const { socket } = useSocketStore();
|
||||||
|
|
||||||
|
const propertiesContainerRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const { selectedPoint, connectedPointUuids } = useMemo(() => {
|
||||||
|
if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null, connectedPointUuids: [] };
|
||||||
|
|
||||||
|
const vehiclePaths = simulationStates.filter(
|
||||||
|
(path): path is Types.ArmBotEventsSchema => path.type === "ArmBot"
|
||||||
|
);
|
||||||
|
|
||||||
|
const points = vehiclePaths.find(
|
||||||
|
(path) => path.points.uuid === selectedActionSphere.points.uuid
|
||||||
|
)?.points;
|
||||||
|
|
||||||
|
if (!points) return { selectedPoint: null, connectedPointUuids: [] };
|
||||||
|
|
||||||
|
const connectedUuids: string[] = [];
|
||||||
|
if (points.connections?.targets) {
|
||||||
|
points.connections.targets.forEach(target => {
|
||||||
|
connectedUuids.push(target.pointUUID);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
selectedPoint: points,
|
||||||
|
connectedPointUuids: connectedUuids
|
||||||
|
};
|
||||||
|
}, [selectedActionSphere, simulationStates]);
|
||||||
|
|
||||||
|
const updateBackend = async (updatedPath: Types.ArmBotEventsSchema | undefined) => {
|
||||||
|
if (!updatedPath) return;
|
||||||
|
const email = localStorage.getItem("email");
|
||||||
|
const organization = email ? email.split("@")[1].split(".")[0] : "";
|
||||||
|
|
||||||
|
// await setEventApi(
|
||||||
|
// organization,
|
||||||
|
// updatedPath.modeluuid,
|
||||||
|
// { type: "ArmBot", points: updatedPath.points }
|
||||||
|
// );
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
organization: organization,
|
||||||
|
modeluuid: updatedPath.modeluuid,
|
||||||
|
eventData: { type: "ArmBot", points: updatedPath.points }
|
||||||
|
}
|
||||||
|
|
||||||
|
socket.emit('v2:model-asset:updateEventData', data);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="machine-mechanics-container" key={selectedPoint?.uuid}>
|
||||||
|
<div className="machine-mechanics-header">
|
||||||
|
{selectedActionSphere?.path?.modelName || "ArmBot point not found"}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="machine-mechanics-content-container">
|
||||||
|
<div className="selected-properties-container" ref={propertiesContainerRef}>
|
||||||
|
<div className="properties-header">ArmBot Properties</div>
|
||||||
|
|
||||||
|
{selectedPoint && (
|
||||||
|
<>
|
||||||
|
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="footer">
|
||||||
|
<InfoIcon />
|
||||||
|
Configure armbot properties.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default React.memo(ArmBotMechanics);
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,90 @@
|
||||||
|
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 Types from '../../../../types/world/worldTypes';
|
||||||
|
import PositionInput from "../customInput/PositionInputs";
|
||||||
|
import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
|
||||||
|
|
||||||
|
const StaticMachineMechanics: React.FC = () => {
|
||||||
|
const { selectedActionSphere } = useSelectedActionSphere();
|
||||||
|
const { simulationStates, setSimulationStates } = useSimulationStates();
|
||||||
|
const { socket } = useSocketStore();
|
||||||
|
|
||||||
|
const propertiesContainerRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const { selectedPoint, connectedPointUuids } = useMemo(() => {
|
||||||
|
if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null, connectedPointUuids: [] };
|
||||||
|
|
||||||
|
const vehiclePaths = simulationStates.filter(
|
||||||
|
(path): path is Types.StaticMachineEventsSchema => path.type === "StaticMachine"
|
||||||
|
);
|
||||||
|
|
||||||
|
const points = vehiclePaths.find(
|
||||||
|
(path) => path.points.uuid === selectedActionSphere.points.uuid
|
||||||
|
)?.points;
|
||||||
|
|
||||||
|
if (!points) return { selectedPoint: null, connectedPointUuids: [] };
|
||||||
|
|
||||||
|
const connectedUuids: string[] = [];
|
||||||
|
if (points.connections?.targets) {
|
||||||
|
points.connections.targets.forEach(target => {
|
||||||
|
connectedUuids.push(target.pointUUID);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
selectedPoint: points,
|
||||||
|
connectedPointUuids: connectedUuids
|
||||||
|
};
|
||||||
|
}, [selectedActionSphere, simulationStates]);
|
||||||
|
|
||||||
|
const updateBackend = async (updatedPath: Types.StaticMachineEventsSchema | undefined) => {
|
||||||
|
if (!updatedPath) return;
|
||||||
|
const email = localStorage.getItem("email");
|
||||||
|
const organization = email ? email.split("@")[1].split(".")[0] : "";
|
||||||
|
|
||||||
|
// await setEventApi(
|
||||||
|
// organization,
|
||||||
|
// updatedPath.modeluuid,
|
||||||
|
// { type: "StaticMachine", points: updatedPath.points }
|
||||||
|
// );
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
organization: organization,
|
||||||
|
modeluuid: updatedPath.modeluuid,
|
||||||
|
eventData: { type: "StaticMachine", points: updatedPath.points }
|
||||||
|
}
|
||||||
|
|
||||||
|
socket.emit('v2:model-asset:updateEventData', data);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="machine-mechanics-container" key={selectedPoint?.uuid}>
|
||||||
|
<div className="machine-mechanics-header">
|
||||||
|
{selectedActionSphere?.path?.modelName || "Machine point not found"}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="machine-mechanics-content-container">
|
||||||
|
<div className="selected-properties-container" ref={propertiesContainerRef}>
|
||||||
|
<div className="properties-header">Machine Properties</div>
|
||||||
|
|
||||||
|
{selectedPoint && (
|
||||||
|
<>
|
||||||
|
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="footer">
|
||||||
|
<InfoIcon />
|
||||||
|
Configure machine properties.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default React.memo(StaticMachineMechanics);
|
|
@ -64,9 +64,7 @@ const RealTimeVisulization: React.FC = () => {
|
||||||
const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
|
const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
|
||||||
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
|
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
|
||||||
|
|
||||||
const [floatingWidgets, setFloatingWidgets] = useState<
|
const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
|
||||||
Record<string, { zoneName: string; zoneId: string; objects: any[] }>
|
|
||||||
>({});
|
|
||||||
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
|
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
|
||||||
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
|
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
|
||||||
const { visualizationSocket } = useSocketStore();
|
const { visualizationSocket } = useSocketStore();
|
||||||
|
@ -78,7 +76,6 @@ const RealTimeVisulization: React.FC = () => {
|
||||||
const organization = email?.split("@")[1]?.split(".")[0];
|
const organization = email?.split("@")[1]?.split(".")[0];
|
||||||
try {
|
try {
|
||||||
const response = await getZone2dData(organization);
|
const response = await getZone2dData(organization);
|
||||||
// console.log('response: ', response);
|
|
||||||
|
|
||||||
if (!Array.isArray(response)) {
|
if (!Array.isArray(response)) {
|
||||||
return;
|
return;
|
||||||
|
|
|
@ -29,12 +29,15 @@ export default function PathNavigator({
|
||||||
const [dropPickupPath, setDropPickupPath] = useState<[number, number, number][]>([]);
|
const [dropPickupPath, setDropPickupPath] = useState<[number, number, number][]>([]);
|
||||||
const [initialPosition, setInitialPosition] = useState<THREE.Vector3 | null>(null);
|
const [initialPosition, setInitialPosition] = useState<THREE.Vector3 | null>(null);
|
||||||
const [initialRotation, setInitialRotation] = useState<THREE.Euler | null>(null);
|
const [initialRotation, setInitialRotation] = useState<THREE.Euler | null>(null);
|
||||||
|
const [targetPosition] = useState(new THREE.Vector3());
|
||||||
|
const [smoothPosition] = useState(new THREE.Vector3());
|
||||||
|
const [targetQuaternion] = useState(new THREE.Quaternion());
|
||||||
const distancesRef = useRef<number[]>([]);
|
const distancesRef = useRef<number[]>([]);
|
||||||
const totalDistanceRef = useRef(0);
|
const totalDistanceRef = useRef(0);
|
||||||
const progressRef = useRef(0);
|
const progressRef = useRef(0);
|
||||||
const isWaiting = useRef(false);
|
const isWaiting = useRef(false);
|
||||||
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||||
|
const pathTransitionProgress = useRef(0);
|
||||||
|
|
||||||
const { scene } = useThree();
|
const { scene } = useThree();
|
||||||
const { isPlaying } = usePlayButtonStore();
|
const { isPlaying } = usePlayButtonStore();
|
||||||
|
@ -44,6 +47,9 @@ export default function PathNavigator({
|
||||||
if (object) {
|
if (object) {
|
||||||
setInitialPosition(object.position.clone());
|
setInitialPosition(object.position.clone());
|
||||||
setInitialRotation(object.rotation.clone());
|
setInitialRotation(object.rotation.clone());
|
||||||
|
smoothPosition.copy(object.position.clone());
|
||||||
|
targetPosition.copy(object.position.clone());
|
||||||
|
targetQuaternion.setFromEuler(object.rotation.clone());
|
||||||
}
|
}
|
||||||
}, [scene, id]);
|
}, [scene, id]);
|
||||||
|
|
||||||
|
@ -65,22 +71,23 @@ export default function PathNavigator({
|
||||||
|
|
||||||
setPath([]);
|
setPath([]);
|
||||||
setCurrentPhase('initial');
|
setCurrentPhase('initial');
|
||||||
setPickupDropPath([]);
|
|
||||||
setDropPickupPath([]);
|
|
||||||
distancesRef.current = [];
|
distancesRef.current = [];
|
||||||
totalDistanceRef.current = 0;
|
totalDistanceRef.current = 0;
|
||||||
progressRef.current = 0;
|
progressRef.current = 0;
|
||||||
isWaiting.current = false;
|
isWaiting.current = false;
|
||||||
|
pathTransitionProgress.current = 0;
|
||||||
|
|
||||||
if (initialPosition && initialRotation) {
|
const object = scene.getObjectByProperty("uuid", id);
|
||||||
const object = scene.getObjectByProperty("uuid", id);
|
if (object && initialPosition && initialRotation) {
|
||||||
if (object) {
|
object.position.copy(initialPosition);
|
||||||
object.position.copy(initialPosition);
|
object.rotation.copy(initialRotation);
|
||||||
object.rotation.copy(initialRotation);
|
smoothPosition.copy(initialPosition);
|
||||||
}
|
targetPosition.copy(initialPosition);
|
||||||
|
targetQuaternion.setFromEuler(initialRotation);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isPlaying) {
|
if (!isPlaying) {
|
||||||
resetState();
|
resetState();
|
||||||
|
@ -171,16 +178,16 @@ export default function PathNavigator({
|
||||||
const end = new THREE.Vector3(...path[index + 1]);
|
const end = new THREE.Vector3(...path[index + 1]);
|
||||||
const dist = distancesRef.current[index];
|
const dist = distancesRef.current[index];
|
||||||
const t = THREE.MathUtils.clamp((covered - accumulated) / dist, 0, 1);
|
const t = THREE.MathUtils.clamp((covered - accumulated) / dist, 0, 1);
|
||||||
const position = start.clone().lerp(end, t);
|
|
||||||
|
|
||||||
object.position.copy(position);
|
targetPosition.copy(start).lerp(end, t);
|
||||||
|
|
||||||
|
smoothPosition.lerp(targetPosition, 0.1);
|
||||||
|
object.position.copy(smoothPosition);
|
||||||
|
|
||||||
const direction = new THREE.Vector3().subVectors(end, start).normalize();
|
const direction = new THREE.Vector3().subVectors(end, start).normalize();
|
||||||
const targetRotationY = Math.atan2(direction.x, direction.z);
|
const targetRotationY = Math.atan2(direction.x, direction.z);
|
||||||
|
targetQuaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0), targetRotationY);
|
||||||
let angleDifference = targetRotationY - object.rotation.y;
|
object.quaternion.slerp(targetQuaternion, 0.1);
|
||||||
angleDifference = ((angleDifference + Math.PI) % (Math.PI * 2)) - Math.PI;
|
|
||||||
object.rotation.y += angleDifference * 0.1;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -53,7 +53,7 @@ export default function addFloorToScene(
|
||||||
const mesh = new THREE.Mesh(geometry, material);
|
const mesh = new THREE.Mesh(geometry, material);
|
||||||
|
|
||||||
mesh.receiveShadow = true;
|
mesh.receiveShadow = true;
|
||||||
mesh.position.y = layer;
|
mesh.position.y = (layer) * CONSTANTS.wallConfig.height;
|
||||||
mesh.rotateX(Math.PI / 2);
|
mesh.rotateX(Math.PI / 2);
|
||||||
mesh.name = `Floor_Layer_${layer}`;
|
mesh.name = `Floor_Layer_${layer}`;
|
||||||
|
|
||||||
|
|
|
@ -171,7 +171,7 @@ function loadOnlyFloors(
|
||||||
mesh.castShadow = true;
|
mesh.castShadow = true;
|
||||||
mesh.receiveShadow = true;
|
mesh.receiveShadow = true;
|
||||||
|
|
||||||
mesh.position.y = (floor[0][0][2] - 1) * CONSTANTS.wallConfig.height + 0.03;
|
mesh.position.y = (floor[0][0][2] - 1) * CONSTANTS.wallConfig.height;
|
||||||
mesh.rotateX(Math.PI / 2);
|
mesh.rotateX(Math.PI / 2);
|
||||||
mesh.name = `Only_Floor_Line_${floor[0][0][2]}`;
|
mesh.name = `Only_Floor_Line_${floor[0][0][2]}`;
|
||||||
|
|
||||||
|
|
|
@ -1,26 +1,11 @@
|
||||||
import { useFrame, useThree } from "@react-three/fiber";
|
import { useFrame, useThree } from "@react-three/fiber";
|
||||||
import {
|
import { useActiveTool, useAsset3dWidget, useCamMode, useDeletableFloorItem, useDeleteModels, useFloorItems, useLoadingProgress, useRenderDistance, useselectedFloorItem, useSelectedItem, useSimulationStates, useSocketStore, useToggleView, useTransformMode, } from "../../../store/store";
|
||||||
useActiveTool,
|
|
||||||
useAsset3dWidget,
|
|
||||||
useCamMode,
|
|
||||||
useDeletableFloorItem,
|
|
||||||
useDeleteModels,
|
|
||||||
useFloorItems,
|
|
||||||
useLoadingProgress,
|
|
||||||
useRenderDistance,
|
|
||||||
useselectedFloorItem,
|
|
||||||
useSelectedItem,
|
|
||||||
useSimulationStates,
|
|
||||||
useSocketStore,
|
|
||||||
useToggleView,
|
|
||||||
useTransformMode,
|
|
||||||
} from "../../../store/store";
|
|
||||||
import assetVisibility from "../geomentries/assets/assetVisibility";
|
import assetVisibility from "../geomentries/assets/assetVisibility";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import * as Types from "../../../types/world/worldTypes";
|
import * as Types from "../../../types/world/worldTypes";
|
||||||
import assetManager, {
|
import assetManager, {
|
||||||
cancelOngoingTasks,
|
cancelOngoingTasks,
|
||||||
} from "../geomentries/assets/assetManager";
|
} from "../geomentries/assets/assetManager";
|
||||||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||||||
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
|
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
|
||||||
|
@ -31,413 +16,313 @@ import addAssetModel from "../geomentries/assets/addAssetModel";
|
||||||
import { getFloorAssets } from "../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi";
|
import { getFloorAssets } from "../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi";
|
||||||
import useModuleStore from "../../../store/useModuleStore";
|
import useModuleStore from "../../../store/useModuleStore";
|
||||||
// import { retrieveGLTF } from "../../../utils/indexDB/idbUtils";
|
// import { retrieveGLTF } from "../../../utils/indexDB/idbUtils";
|
||||||
const assetManagerWorker = new Worker(
|
const assetManagerWorker = new Worker(new URL("../../../services/factoryBuilder/webWorkers/assetManagerWorker.js", import.meta.url));
|
||||||
new URL(
|
const gltfLoaderWorker = new Worker(new URL("../../../services/factoryBuilder/webWorkers/gltfLoaderWorker.js", import.meta.url));
|
||||||
"../../../services/factoryBuilder/webWorkers/assetManagerWorker.js",
|
|
||||||
import.meta.url
|
|
||||||
)
|
|
||||||
);
|
|
||||||
const gltfLoaderWorker = new Worker(
|
|
||||||
new URL(
|
|
||||||
"../../../services/factoryBuilder/webWorkers/gltfLoaderWorker.js",
|
|
||||||
import.meta.url
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
const FloorItemsGroup = ({
|
const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject, floorGroup, tempLoader, isTempLoader, plane, }: any) => {
|
||||||
itemsGroup,
|
const state: Types.ThreeState = useThree();
|
||||||
hoveredDeletableFloorItem,
|
const { raycaster, controls }: any = state;
|
||||||
AttachedObject,
|
const { renderDistance } = useRenderDistance();
|
||||||
floorGroup,
|
const { toggleView } = useToggleView();
|
||||||
tempLoader,
|
const { floorItems, setFloorItems } = useFloorItems();
|
||||||
isTempLoader,
|
const { camMode } = useCamMode();
|
||||||
plane,
|
const { deleteModels } = useDeleteModels();
|
||||||
}: any) => {
|
const { setDeletableFloorItem } = useDeletableFloorItem();
|
||||||
const state: Types.ThreeState = useThree();
|
const { transformMode } = useTransformMode();
|
||||||
const { raycaster, controls }: any = state;
|
const { setselectedFloorItem } = useselectedFloorItem();
|
||||||
const { renderDistance } = useRenderDistance();
|
const { activeTool } = useActiveTool();
|
||||||
const { toggleView } = useToggleView();
|
const { selectedItem, setSelectedItem } = useSelectedItem();
|
||||||
const { floorItems, setFloorItems } = useFloorItems();
|
const { simulationStates, setSimulationStates } = useSimulationStates();
|
||||||
const { camMode } = useCamMode();
|
const { setLoadingProgress } = useLoadingProgress();
|
||||||
const { deleteModels } = useDeleteModels();
|
const { activeModule } = useModuleStore();
|
||||||
const { setDeletableFloorItem } = useDeletableFloorItem();
|
const { socket } = useSocketStore();
|
||||||
const { transformMode } = useTransformMode();
|
const loader = new GLTFLoader();
|
||||||
const { setselectedFloorItem } = useselectedFloorItem();
|
const dracoLoader = new DRACOLoader();
|
||||||
const { activeTool } = useActiveTool();
|
|
||||||
const { selectedItem, setSelectedItem } = useSelectedItem();
|
|
||||||
const { simulationStates, setSimulationStates } = useSimulationStates();
|
|
||||||
const { setLoadingProgress } = useLoadingProgress();
|
|
||||||
const { activeModule } = useModuleStore();
|
|
||||||
const { socket } = useSocketStore();
|
|
||||||
const loader = new GLTFLoader();
|
|
||||||
const dracoLoader = new DRACOLoader();
|
|
||||||
|
|
||||||
dracoLoader.setDecoderPath(
|
dracoLoader.setDecoderPath("https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/");
|
||||||
"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/"
|
loader.setDRACOLoader(dracoLoader);
|
||||||
);
|
|
||||||
loader.setDRACOLoader(dracoLoader);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const email = localStorage.getItem("email");
|
const email = localStorage.getItem("email");
|
||||||
const organization = email!.split("@")[1].split(".")[0];
|
const organization = email!.split("@")[1].split(".")[0];
|
||||||
|
|
||||||
let totalAssets = 0;
|
let totalAssets = 0;
|
||||||
let loadedAssets = 0;
|
let loadedAssets = 0;
|
||||||
|
|
||||||
const updateLoadingProgress = (progress: number) => {
|
const updateLoadingProgress = (progress: number) => {
|
||||||
if (progress < 100) {
|
if (progress < 100) {
|
||||||
setLoadingProgress(progress);
|
setLoadingProgress(progress);
|
||||||
} else if (progress === 100) {
|
} else if (progress === 100) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setLoadingProgress(100);
|
setLoadingProgress(100);
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setLoadingProgress(0);
|
setLoadingProgress(0);
|
||||||
}, 1500);
|
}, 1500);
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
getFloorAssets(organization).then((data) => {
|
getFloorAssets(organization).then((data) => {
|
||||||
if (data.length > 0) {
|
if (data.length > 0) {
|
||||||
const uniqueItems = (data as Types.FloorItems).filter(
|
const uniqueItems = (data as Types.FloorItems).filter((item, index, self) => index === self.findIndex((t) => t.modelfileID === item.modelfileID));
|
||||||
(item, index, self) =>
|
totalAssets = uniqueItems.length;
|
||||||
index === self.findIndex((t) => t.modelfileID === item.modelfileID)
|
if (totalAssets === 0) {
|
||||||
);
|
updateLoadingProgress(100);
|
||||||
totalAssets = uniqueItems.length;
|
return;
|
||||||
if (totalAssets === 0) {
|
}
|
||||||
updateLoadingProgress(100);
|
gltfLoaderWorker.postMessage({ floorItems: data });
|
||||||
return;
|
} else {
|
||||||
}
|
gltfLoaderWorker.postMessage({ floorItems: [] });
|
||||||
gltfLoaderWorker.postMessage({ floorItems: data });
|
loadInitialFloorItems(itemsGroup, setFloorItems, setSimulationStates);
|
||||||
} else {
|
updateLoadingProgress(100);
|
||||||
gltfLoaderWorker.postMessage({ floorItems: [] });
|
}
|
||||||
loadInitialFloorItems(itemsGroup, setFloorItems, setSimulationStates);
|
|
||||||
updateLoadingProgress(100);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
gltfLoaderWorker.onmessage = async (event) => {
|
|
||||||
if (event.data.message === "gltfLoaded" && event.data.modelBlob) {
|
|
||||||
const blobUrl = URL.createObjectURL(event.data.modelBlob);
|
|
||||||
|
|
||||||
loader.load(blobUrl, (gltf) => {
|
|
||||||
URL.revokeObjectURL(blobUrl);
|
|
||||||
THREE.Cache.remove(blobUrl);
|
|
||||||
THREE.Cache.add(event.data.modelID, gltf);
|
|
||||||
|
|
||||||
loadedAssets++;
|
|
||||||
const progress = Math.round((loadedAssets / totalAssets) * 100);
|
|
||||||
updateLoadingProgress(progress);
|
|
||||||
|
|
||||||
if (loadedAssets === totalAssets) {
|
|
||||||
loadInitialFloorItems(itemsGroup, setFloorItems, setSimulationStates);
|
|
||||||
updateLoadingProgress(100);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
gltfLoaderWorker.onmessage = async (event) => {
|
||||||
assetManagerWorker.onmessage = async (event) => {
|
if (event.data.message === "gltfLoaded" && event.data.modelBlob) {
|
||||||
cancelOngoingTasks(); // Cancel the ongoing process
|
const blobUrl = URL.createObjectURL(event.data.modelBlob);
|
||||||
await assetManager(event.data, itemsGroup, loader);
|
|
||||||
};
|
|
||||||
}, [assetManagerWorker]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
loader.load(blobUrl, (gltf) => {
|
||||||
if (toggleView) return;
|
URL.revokeObjectURL(blobUrl);
|
||||||
|
THREE.Cache.remove(blobUrl);
|
||||||
|
THREE.Cache.add(event.data.modelID, gltf);
|
||||||
|
|
||||||
const uuids: string[] = [];
|
loadedAssets++;
|
||||||
itemsGroup.current?.children.forEach((child: any) => {
|
const progress = Math.round((loadedAssets / totalAssets) * 100);
|
||||||
uuids.push(child.uuid);
|
updateLoadingProgress(progress);
|
||||||
});
|
|
||||||
const cameraPosition = state.camera.position;
|
|
||||||
|
|
||||||
assetManagerWorker.postMessage({
|
if (loadedAssets === totalAssets) {
|
||||||
floorItems,
|
loadInitialFloorItems(itemsGroup, setFloorItems, setSimulationStates);
|
||||||
cameraPosition,
|
updateLoadingProgress(100);
|
||||||
uuids,
|
}
|
||||||
renderDistance,
|
});
|
||||||
});
|
}
|
||||||
}, [camMode, renderDistance]);
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const controls: any = state.controls;
|
assetManagerWorker.onmessage = async (event) => {
|
||||||
const camera: any = state.camera;
|
cancelOngoingTasks(); // Cancel the ongoing process
|
||||||
|
await assetManager(event.data, itemsGroup, loader);
|
||||||
|
};
|
||||||
|
}, [assetManagerWorker]);
|
||||||
|
|
||||||
if (controls) {
|
useEffect(() => {
|
||||||
let intervalId: NodeJS.Timeout | null = null;
|
|
||||||
|
|
||||||
const handleChange = () => {
|
|
||||||
if (toggleView) return;
|
if (toggleView) return;
|
||||||
|
|
||||||
const uuids: string[] = [];
|
const uuids: string[] = [];
|
||||||
itemsGroup.current?.children.forEach((child: any) => {
|
itemsGroup.current?.children.forEach((child: any) => { uuids.push(child.uuid); });
|
||||||
uuids.push(child.uuid);
|
const cameraPosition = state.camera.position;
|
||||||
});
|
|
||||||
const cameraPosition = camera.position;
|
|
||||||
|
|
||||||
assetManagerWorker.postMessage({
|
assetManagerWorker.postMessage({ floorItems, cameraPosition, uuids, renderDistance, });
|
||||||
floorItems,
|
}, [camMode, renderDistance]);
|
||||||
cameraPosition,
|
|
||||||
uuids,
|
|
||||||
renderDistance,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const startInterval = () => {
|
useEffect(() => {
|
||||||
if (!intervalId) {
|
const controls: any = state.controls;
|
||||||
intervalId = setInterval(handleChange, 50);
|
const camera: any = state.camera;
|
||||||
|
|
||||||
|
if (controls) {
|
||||||
|
let intervalId: NodeJS.Timeout | null = null;
|
||||||
|
|
||||||
|
const handleChange = () => {
|
||||||
|
if (toggleView) return;
|
||||||
|
|
||||||
|
const uuids: string[] = [];
|
||||||
|
itemsGroup.current?.children.forEach((child: any) => { uuids.push(child.uuid); });
|
||||||
|
const cameraPosition = camera.position;
|
||||||
|
|
||||||
|
assetManagerWorker.postMessage({ floorItems, cameraPosition, uuids, renderDistance, });
|
||||||
|
};
|
||||||
|
|
||||||
|
const startInterval = () => {
|
||||||
|
if (!intervalId) {
|
||||||
|
intervalId = setInterval(handleChange, 50);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const stopInterval = () => {
|
||||||
|
handleChange();
|
||||||
|
if (intervalId) {
|
||||||
|
clearInterval(intervalId);
|
||||||
|
intervalId = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
controls.addEventListener("rest", handleChange);
|
||||||
|
controls.addEventListener("rest", stopInterval);
|
||||||
|
controls.addEventListener("control", startInterval);
|
||||||
|
controls.addEventListener("controlend", stopInterval);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
controls.removeEventListener("rest", handleChange);
|
||||||
|
controls.removeEventListener("rest", stopInterval);
|
||||||
|
controls.removeEventListener("control", startInterval);
|
||||||
|
controls.removeEventListener("controlend", stopInterval);
|
||||||
|
if (intervalId) {
|
||||||
|
clearInterval(intervalId);
|
||||||
|
}
|
||||||
|
};
|
||||||
}
|
}
|
||||||
};
|
}, [state.controls, floorItems, toggleView, renderDistance]);
|
||||||
|
|
||||||
const stopInterval = () => {
|
useEffect(() => {
|
||||||
handleChange();
|
const canvasElement = state.gl.domElement;
|
||||||
if (intervalId) {
|
let drag = false;
|
||||||
clearInterval(intervalId);
|
let isLeftMouseDown = false;
|
||||||
intervalId = null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
controls.addEventListener("rest", handleChange);
|
const onMouseDown = (evt: any) => {
|
||||||
controls.addEventListener("rest", stopInterval);
|
if (evt.button === 0) {
|
||||||
controls.addEventListener("control", startInterval);
|
isLeftMouseDown = true;
|
||||||
controls.addEventListener("controlend", stopInterval);
|
drag = false;
|
||||||
|
|
||||||
return () => {
|
|
||||||
controls.removeEventListener("rest", handleChange);
|
|
||||||
controls.removeEventListener("rest", stopInterval);
|
|
||||||
controls.removeEventListener("control", startInterval);
|
|
||||||
controls.removeEventListener("controlend", stopInterval);
|
|
||||||
if (intervalId) {
|
|
||||||
clearInterval(intervalId);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}, [state.controls, floorItems, toggleView, renderDistance]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const canvasElement = state.gl.domElement;
|
|
||||||
let drag = false;
|
|
||||||
let isLeftMouseDown = false;
|
|
||||||
|
|
||||||
const onMouseDown = (evt: any) => {
|
|
||||||
if (evt.button === 0) {
|
|
||||||
isLeftMouseDown = true;
|
|
||||||
drag = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onMouseMove = () => {
|
|
||||||
if (isLeftMouseDown) {
|
|
||||||
drag = true;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onMouseUp = async (evt: any) => {
|
|
||||||
if (controls) {
|
|
||||||
(controls as any).enabled = true;
|
|
||||||
}
|
|
||||||
if (evt.button === 0) {
|
|
||||||
isLeftMouseDown = false;
|
|
||||||
if (drag) return;
|
|
||||||
|
|
||||||
if (deleteModels) {
|
|
||||||
DeleteFloorItems(
|
|
||||||
itemsGroup,
|
|
||||||
hoveredDeletableFloorItem,
|
|
||||||
setFloorItems,
|
|
||||||
setSimulationStates,
|
|
||||||
socket
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const Mode = transformMode;
|
|
||||||
|
|
||||||
if (Mode !== null || activeTool === "cursor") {
|
|
||||||
if (!itemsGroup.current) return;
|
|
||||||
let intersects = raycaster.intersectObjects(
|
|
||||||
itemsGroup.current.children,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
if (
|
|
||||||
intersects.length > 0 &&
|
|
||||||
intersects[0]?.object?.parent?.parent?.position &&
|
|
||||||
intersects[0]?.object?.parent?.parent?.scale &&
|
|
||||||
intersects[0]?.object?.parent?.parent?.rotation
|
|
||||||
) {
|
|
||||||
// let currentObject = intersects[0].object;
|
|
||||||
// while (currentObject) {
|
|
||||||
// if (currentObject.name === "Scene") {
|
|
||||||
// break;
|
|
||||||
// }
|
|
||||||
// currentObject = currentObject.parent as THREE.Object3D;
|
|
||||||
// }
|
|
||||||
// if (currentObject) {
|
|
||||||
// AttachedObject.current = currentObject as any;
|
|
||||||
// setselectedFloorItem(AttachedObject.current!);
|
|
||||||
// }
|
|
||||||
} else {
|
|
||||||
const target = controls.getTarget(new THREE.Vector3());
|
|
||||||
await controls.setTarget(target.x, 0, target.z, true);
|
|
||||||
setselectedFloorItem(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onDblClick = async (evt: any) => {
|
|
||||||
if (evt.button === 0) {
|
|
||||||
isLeftMouseDown = false;
|
|
||||||
if (drag) return;
|
|
||||||
|
|
||||||
const Mode = transformMode;
|
|
||||||
|
|
||||||
if (Mode !== null || activeTool === "cursor") {
|
|
||||||
if (!itemsGroup.current) return;
|
|
||||||
let intersects = raycaster.intersectObjects(
|
|
||||||
itemsGroup.current.children,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
if (
|
|
||||||
intersects.length > 0 &&
|
|
||||||
intersects[0]?.object?.parent?.parent?.position &&
|
|
||||||
intersects[0]?.object?.parent?.parent?.scale &&
|
|
||||||
intersects[0]?.object?.parent?.parent?.rotation
|
|
||||||
) {
|
|
||||||
let currentObject = intersects[0].object;
|
|
||||||
|
|
||||||
while (currentObject) {
|
|
||||||
if (currentObject.name === "Scene") {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
currentObject = currentObject.parent as THREE.Object3D;
|
|
||||||
}
|
}
|
||||||
if (currentObject) {
|
};
|
||||||
AttachedObject.current = currentObject as any;
|
|
||||||
// controls.fitToSphere(AttachedObject.current!, true);
|
|
||||||
|
|
||||||
const bbox = new THREE.Box3().setFromObject(
|
const onMouseMove = () => {
|
||||||
AttachedObject.current
|
if (isLeftMouseDown) {
|
||||||
);
|
drag = true;
|
||||||
const size = bbox.getSize(new THREE.Vector3());
|
}
|
||||||
const center = bbox.getCenter(new THREE.Vector3());
|
};
|
||||||
|
|
||||||
const front = new THREE.Vector3(0, 0, 1);
|
const onMouseUp = async (evt: any) => {
|
||||||
AttachedObject.current.localToWorld(front);
|
if (controls) {
|
||||||
front.sub(AttachedObject.current.position).normalize();
|
(controls as any).enabled = true;
|
||||||
|
}
|
||||||
const distance = Math.max(size.x, size.y, size.z) * 2;
|
if (evt.button === 0) {
|
||||||
const newPosition = center
|
isLeftMouseDown = false;
|
||||||
.clone()
|
if (drag) return;
|
||||||
.addScaledVector(front, distance);
|
|
||||||
|
if (deleteModels) {
|
||||||
controls.setPosition(
|
DeleteFloorItems(itemsGroup, hoveredDeletableFloorItem, setFloorItems, setSimulationStates, socket);
|
||||||
newPosition.x,
|
}
|
||||||
newPosition.y,
|
const Mode = transformMode;
|
||||||
newPosition.z,
|
|
||||||
true
|
if (Mode !== null || activeTool === "cursor") {
|
||||||
);
|
if (!itemsGroup.current) return;
|
||||||
controls.setTarget(center.x, center.y, center.z, true);
|
let intersects = raycaster.intersectObjects(
|
||||||
controls.fitToBox(AttachedObject.current!, true, {
|
itemsGroup.current.children,
|
||||||
cover: true,
|
true
|
||||||
paddingTop: 5,
|
);
|
||||||
paddingLeft: 5,
|
if (intersects.length > 0 && intersects[0]?.object?.parent?.parent?.position && intersects[0]?.object?.parent?.parent?.scale && intersects[0]?.object?.parent?.parent?.rotation) {
|
||||||
paddingBottom: 5,
|
// let currentObject = intersects[0].object;
|
||||||
paddingRight: 5,
|
// while (currentObject) {
|
||||||
});
|
// if (currentObject.name === "Scene") {
|
||||||
|
// break;
|
||||||
setselectedFloorItem(AttachedObject.current!);
|
// }
|
||||||
|
// currentObject = currentObject.parent as THREE.Object3D;
|
||||||
|
// }
|
||||||
|
// if (currentObject) {
|
||||||
|
// AttachedObject.current = currentObject as any;
|
||||||
|
// setselectedFloorItem(AttachedObject.current!);
|
||||||
|
// }
|
||||||
|
} else {
|
||||||
|
const target = controls.getTarget(new THREE.Vector3());
|
||||||
|
await controls.setTarget(target.x, 0, target.z, true);
|
||||||
|
setselectedFloorItem(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDblClick = async (evt: any) => {
|
||||||
|
if (evt.button === 0) {
|
||||||
|
isLeftMouseDown = false;
|
||||||
|
if (drag) return;
|
||||||
|
|
||||||
|
const Mode = transformMode;
|
||||||
|
|
||||||
|
if (Mode !== null || activeTool === "cursor") {
|
||||||
|
if (!itemsGroup.current) return;
|
||||||
|
let intersects = raycaster.intersectObjects(itemsGroup.current.children, true);
|
||||||
|
if (intersects.length > 0 && intersects[0]?.object?.parent?.parent?.position && intersects[0]?.object?.parent?.parent?.scale && intersects[0]?.object?.parent?.parent?.rotation) {
|
||||||
|
let currentObject = intersects[0].object;
|
||||||
|
|
||||||
|
while (currentObject) {
|
||||||
|
if (currentObject.name === "Scene") {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
currentObject = currentObject.parent as THREE.Object3D;
|
||||||
|
}
|
||||||
|
if (currentObject) {
|
||||||
|
AttachedObject.current = currentObject as any;
|
||||||
|
// controls.fitToSphere(AttachedObject.current!, true);
|
||||||
|
|
||||||
|
const bbox = new THREE.Box3().setFromObject(AttachedObject.current);
|
||||||
|
const size = bbox.getSize(new THREE.Vector3());
|
||||||
|
const center = bbox.getCenter(new THREE.Vector3());
|
||||||
|
|
||||||
|
const front = new THREE.Vector3(0, 0, 1);
|
||||||
|
AttachedObject.current.localToWorld(front);
|
||||||
|
front.sub(AttachedObject.current.position).normalize();
|
||||||
|
|
||||||
|
const distance = Math.max(size.x, size.y, size.z) * 2;
|
||||||
|
const newPosition = center.clone().addScaledVector(front, distance);
|
||||||
|
|
||||||
|
controls.setPosition(newPosition.x, newPosition.y, newPosition.z, true);
|
||||||
|
controls.setTarget(center.x, center.y, center.z, true);
|
||||||
|
controls.fitToBox(AttachedObject.current!, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });
|
||||||
|
|
||||||
|
setselectedFloorItem(AttachedObject.current!);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const target = controls.getTarget(new THREE.Vector3());
|
||||||
|
await controls.setTarget(target.x, 0, target.z, true);
|
||||||
|
setselectedFloorItem(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDrop = (event: any) => {
|
||||||
|
if (!event.dataTransfer?.files[0]) return;
|
||||||
|
|
||||||
|
if (selectedItem.id !== "" && event.dataTransfer?.files[0]) {
|
||||||
|
addAssetModel(raycaster, state.camera, state.pointer, floorGroup, setFloorItems, itemsGroup, isTempLoader, tempLoader, socket, selectedItem, setSelectedItem, setSimulationStates, plane);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDragOver = (event: any) => {
|
||||||
|
event.preventDefault();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (activeModule === "builder") {
|
||||||
|
canvasElement.addEventListener("mousedown", onMouseDown);
|
||||||
|
canvasElement.addEventListener("mouseup", onMouseUp);
|
||||||
|
canvasElement.addEventListener("mousemove", onMouseMove);
|
||||||
|
canvasElement.addEventListener("dblclick", onDblClick);
|
||||||
|
canvasElement.addEventListener("drop", onDrop);
|
||||||
|
canvasElement.addEventListener("dragover", onDragOver);
|
||||||
|
} else {
|
||||||
|
if (controls) {
|
||||||
|
const target = controls.getTarget(new THREE.Vector3());
|
||||||
|
controls.setTarget(target.x, 0, target.z, true);
|
||||||
|
setselectedFloorItem(null);
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
const target = controls.getTarget(new THREE.Vector3());
|
|
||||||
await controls.setTarget(target.x, 0, target.z, true);
|
|
||||||
setselectedFloorItem(null);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onDrop = (event: any) => {
|
return () => {
|
||||||
if (!event.dataTransfer?.files[0]) return;
|
canvasElement.removeEventListener("mousedown", onMouseDown);
|
||||||
|
canvasElement.removeEventListener("mouseup", onMouseUp);
|
||||||
|
canvasElement.removeEventListener("mousemove", onMouseMove);
|
||||||
|
canvasElement.removeEventListener("dblclick", onDblClick);
|
||||||
|
canvasElement.removeEventListener("drop", onDrop);
|
||||||
|
canvasElement.removeEventListener("dragover", onDragOver);
|
||||||
|
};
|
||||||
|
}, [deleteModels, transformMode, controls, selectedItem, state.camera, state.pointer, activeTool, activeModule,]);
|
||||||
|
|
||||||
if (selectedItem.id !== "" && event.dataTransfer?.files[0]) {
|
useFrame(() => {
|
||||||
addAssetModel(
|
if (controls)
|
||||||
raycaster,
|
assetVisibility(itemsGroup, state.camera.position, renderDistance);
|
||||||
state.camera,
|
if (deleteModels && activeModule === "builder") {
|
||||||
state.pointer,
|
DeletableHoveredFloorItems(state, itemsGroup, hoveredDeletableFloorItem, setDeletableFloorItem);
|
||||||
floorGroup,
|
} else if (!deleteModels) {
|
||||||
setFloorItems,
|
if (hoveredDeletableFloorItem.current) {
|
||||||
itemsGroup,
|
hoveredDeletableFloorItem.current = undefined;
|
||||||
isTempLoader,
|
setDeletableFloorItem(null);
|
||||||
tempLoader,
|
}
|
||||||
socket,
|
}
|
||||||
selectedItem,
|
});
|
||||||
setSelectedItem,
|
|
||||||
setSimulationStates,
|
|
||||||
plane
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onDragOver = (event: any) => {
|
return <group ref={itemsGroup} name="itemsGroup"></group>;
|
||||||
event.preventDefault();
|
|
||||||
};
|
|
||||||
|
|
||||||
if (activeModule === "builder") {
|
|
||||||
canvasElement.addEventListener("mousedown", onMouseDown);
|
|
||||||
canvasElement.addEventListener("mouseup", onMouseUp);
|
|
||||||
canvasElement.addEventListener("mousemove", onMouseMove);
|
|
||||||
canvasElement.addEventListener("dblclick", onDblClick);
|
|
||||||
canvasElement.addEventListener("drop", onDrop);
|
|
||||||
canvasElement.addEventListener("dragover", onDragOver);
|
|
||||||
} else {
|
|
||||||
if (controls) {
|
|
||||||
const target = controls.getTarget(new THREE.Vector3());
|
|
||||||
controls.setTarget(target.x, 0, target.z, true);
|
|
||||||
setselectedFloorItem(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
canvasElement.removeEventListener("mousedown", onMouseDown);
|
|
||||||
canvasElement.removeEventListener("mouseup", onMouseUp);
|
|
||||||
canvasElement.removeEventListener("mousemove", onMouseMove);
|
|
||||||
canvasElement.removeEventListener("dblclick", onDblClick);
|
|
||||||
canvasElement.removeEventListener("drop", onDrop);
|
|
||||||
canvasElement.removeEventListener("dragover", onDragOver);
|
|
||||||
};
|
|
||||||
}, [
|
|
||||||
deleteModels,
|
|
||||||
transformMode,
|
|
||||||
controls,
|
|
||||||
selectedItem,
|
|
||||||
state.camera,
|
|
||||||
state.pointer,
|
|
||||||
activeTool,
|
|
||||||
activeModule,
|
|
||||||
]);
|
|
||||||
|
|
||||||
|
|
||||||
useFrame(() => {
|
|
||||||
if (controls)
|
|
||||||
assetVisibility(itemsGroup, state.camera.position, renderDistance);
|
|
||||||
if (deleteModels) {
|
|
||||||
DeletableHoveredFloorItems(
|
|
||||||
state,
|
|
||||||
itemsGroup,
|
|
||||||
hoveredDeletableFloorItem,
|
|
||||||
setDeletableFloorItem
|
|
||||||
);
|
|
||||||
} else if (!deleteModels) {
|
|
||||||
if (hoveredDeletableFloorItem.current) {
|
|
||||||
hoveredDeletableFloorItem.current = undefined;
|
|
||||||
setDeletableFloorItem(null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return <group ref={itemsGroup} name="itemsGroup"></group>;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default FloorItemsGroup;
|
export default FloorItemsGroup;
|
||||||
|
|
|
@ -9,9 +9,13 @@ import handleMeshMissed from "../eventFunctions/handleMeshMissed";
|
||||||
import DeleteWallItems from "../geomentries/walls/deleteWallItems";
|
import DeleteWallItems from "../geomentries/walls/deleteWallItems";
|
||||||
import loadInitialWallItems from "../../scene/IntialLoad/loadInitialWallItems";
|
import loadInitialWallItems from "../../scene/IntialLoad/loadInitialWallItems";
|
||||||
import AddWallItems from "../geomentries/walls/addWallItems";
|
import AddWallItems from "../geomentries/walls/addWallItems";
|
||||||
|
import useModuleStore from "../../../store/useModuleStore";
|
||||||
|
|
||||||
|
|
||||||
const WallItemsGroup = ({ currentWallItem, AssetConfigurations, hoveredDeletableWallItem, selectedItemsIndex, setSelectedItemsIndex, CSGGroup }: any) => {
|
const WallItemsGroup = ({ currentWallItem, AssetConfigurations, hoveredDeletableWallItem, selectedItemsIndex, setSelectedItemsIndex, CSGGroup }: any) => {
|
||||||
|
const state = useThree();
|
||||||
|
const { socket } = useSocketStore();
|
||||||
|
const { pointer, camera, raycaster } = state;
|
||||||
const { deleteModels, setDeleteModels } = useDeleteModels();
|
const { deleteModels, setDeleteModels } = useDeleteModels();
|
||||||
const { wallItems, setWallItems } = useWallItems();
|
const { wallItems, setWallItems } = useWallItems();
|
||||||
const { objectPosition, setObjectPosition } = useObjectPosition();
|
const { objectPosition, setObjectPosition } = useObjectPosition();
|
||||||
|
@ -19,10 +23,7 @@ const WallItemsGroup = ({ currentWallItem, AssetConfigurations, hoveredDeletable
|
||||||
const { objectRotation, setObjectRotation } = useObjectRotation();
|
const { objectRotation, setObjectRotation } = useObjectRotation();
|
||||||
const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
|
const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
|
||||||
const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
|
const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
|
||||||
const { socket } = useSocketStore();
|
const { activeModule } = useModuleStore();
|
||||||
const state = useThree();
|
|
||||||
const { pointer, camera, raycaster } = state;
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Load Wall Items from the backend
|
// Load Wall Items from the backend
|
||||||
|
@ -209,7 +210,7 @@ const WallItemsGroup = ({ currentWallItem, AssetConfigurations, hoveredDeletable
|
||||||
const onMouseUp = (evt: any) => {
|
const onMouseUp = (evt: any) => {
|
||||||
if (evt.button === 0) {
|
if (evt.button === 0) {
|
||||||
isLeftMouseDown = false;
|
isLeftMouseDown = false;
|
||||||
if (!drag && deleteModels) {
|
if (!drag && deleteModels && activeModule === "builder") {
|
||||||
DeleteWallItems(hoveredDeletableWallItem, setWallItems, wallItems, socket);
|
DeleteWallItems(hoveredDeletableWallItem, setWallItems, wallItems, socket);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -224,7 +225,7 @@ const WallItemsGroup = ({ currentWallItem, AssetConfigurations, hoveredDeletable
|
||||||
const onDrop = (event: any) => {
|
const onDrop = (event: any) => {
|
||||||
|
|
||||||
if (!event.dataTransfer?.files[0]) return
|
if (!event.dataTransfer?.files[0]) return
|
||||||
|
|
||||||
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
|
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
|
||||||
pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
||||||
raycaster.setFromCamera(pointer, camera);
|
raycaster.setFromCamera(pointer, camera);
|
||||||
|
@ -259,7 +260,7 @@ const WallItemsGroup = ({ currentWallItem, AssetConfigurations, hoveredDeletable
|
||||||
}, [deleteModels, wallItems])
|
}, [deleteModels, wallItems])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (deleteModels) {
|
if (deleteModels && activeModule === "builder") {
|
||||||
handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex);
|
handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex);
|
||||||
setSelectedWallItem(null);
|
setSelectedWallItem(null);
|
||||||
setSelectedItemsIndex(null);
|
setSelectedItemsIndex(null);
|
||||||
|
|
|
@ -192,7 +192,7 @@ function processLoadedModel(
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
if (item.eventData || item.modelfileID === '67e3db95c2e8f37134526fb2') {
|
if (item.eventData || item.modelfileID === '67e3db5ac2e8f37134526f40' || item.modelfileID === '67eb7904c2e8f37134527eae') {
|
||||||
processEventData(item, setSimulationStates);
|
processEventData(item, setSimulationStates);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -227,10 +227,10 @@ function processEventData(item: Types.EventData, setSimulationStates: any) {
|
||||||
data as Types.VehicleEventsSchema
|
data as Types.VehicleEventsSchema
|
||||||
]);
|
]);
|
||||||
|
|
||||||
} else if (item.modelfileID === '67e3db95c2e8f37134526fb2') {
|
} else if (item.modelfileID === '67e3db5ac2e8f37134526f40') {
|
||||||
|
|
||||||
const pointUUID = THREE.MathUtils.generateUUID();
|
const pointUUID = THREE.MathUtils.generateUUID();
|
||||||
const pointPosition = new THREE.Vector3(0, 1.75, 0);
|
const pointPosition = new THREE.Vector3(0, 1.5, -0.5);
|
||||||
|
|
||||||
const staticMachine: Types.StaticMachineEventsSchema = {
|
const staticMachine: Types.StaticMachineEventsSchema = {
|
||||||
modeluuid: item.modeluuid,
|
modeluuid: item.modeluuid,
|
||||||
|
@ -243,13 +243,39 @@ function processEventData(item: Types.EventData, setSimulationStates: any) {
|
||||||
triggers: { uuid: THREE.MathUtils.generateUUID(), name: 'Trigger 1', type: 'OnComplete' },
|
triggers: { uuid: THREE.MathUtils.generateUUID(), name: 'Trigger 1', type: 'OnComplete' },
|
||||||
connections: { source: { modelUUID: item.modeluuid, pointUUID: pointUUID }, targets: [] },
|
connections: { source: { modelUUID: item.modeluuid, pointUUID: pointUUID }, targets: [] },
|
||||||
},
|
},
|
||||||
position: item.position
|
position: item.position,
|
||||||
|
rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
|
||||||
};
|
};
|
||||||
|
|
||||||
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => [
|
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => [
|
||||||
...(prevEvents || []),
|
...(prevEvents || []),
|
||||||
staticMachine as Types.StaticMachineEventsSchema
|
staticMachine as Types.StaticMachineEventsSchema
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
} else if (item.modelfileID === '67eb7904c2e8f37134527eae') {
|
||||||
|
const pointUUID = THREE.MathUtils.generateUUID();
|
||||||
|
const pointPosition = new THREE.Vector3(0, 2.75, -0.5);
|
||||||
|
|
||||||
|
const armBot: Types.ArmBotEventsSchema = {
|
||||||
|
modeluuid: item.modeluuid,
|
||||||
|
modelName: item.modelname,
|
||||||
|
type: "ArmBot",
|
||||||
|
points: {
|
||||||
|
uuid: pointUUID,
|
||||||
|
position: [pointPosition.x, pointPosition.y, pointPosition.z],
|
||||||
|
actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', speed: 1, processes: [] },
|
||||||
|
triggers: { uuid: THREE.MathUtils.generateUUID(), name: 'Trigger 1', type: 'OnComplete' },
|
||||||
|
connections: { source: { modelUUID: item.modeluuid, pointUUID: pointUUID }, targets: [] },
|
||||||
|
},
|
||||||
|
position: item.position,
|
||||||
|
rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
|
||||||
|
}
|
||||||
|
|
||||||
|
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => [
|
||||||
|
...(prevEvents || []),
|
||||||
|
armBot as Types.ArmBotEventsSchema
|
||||||
|
]);
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -151,7 +151,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
|
||||||
return updatedItems;
|
return updatedItems;
|
||||||
});
|
});
|
||||||
|
|
||||||
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
|
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
|
||||||
|
|
||||||
const email = localStorage.getItem("email");
|
const email = localStorage.getItem("email");
|
||||||
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
||||||
|
@ -234,7 +234,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
|
||||||
newEventData.position = newFloorItem.position;
|
newEventData.position = newFloorItem.position;
|
||||||
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
||||||
|
|
||||||
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => [
|
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
|
||||||
...(prevEvents || []),
|
...(prevEvents || []),
|
||||||
newEventData as Types.ConveyorEventsSchema
|
newEventData as Types.ConveyorEventsSchema
|
||||||
]);
|
]);
|
||||||
|
@ -313,13 +313,44 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
|
||||||
newEventData.modelName = newFloorItem.modelname;
|
newEventData.modelName = newFloorItem.modelname;
|
||||||
newEventData.position = newFloorItem.position;
|
newEventData.position = newFloorItem.position;
|
||||||
|
|
||||||
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => [
|
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
|
||||||
...(prevEvents || []),
|
...(prevEvents || []),
|
||||||
newEventData as Types.VehicleEventsSchema
|
newEventData as Types.VehicleEventsSchema
|
||||||
]);
|
]);
|
||||||
|
|
||||||
socket.emit("v2:model-asset:add", data);
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
//REST
|
||||||
|
|
||||||
|
// await setFloorItemApi(
|
||||||
|
// organization,
|
||||||
|
// obj.uuid,
|
||||||
|
// obj.userData.name,
|
||||||
|
// [worldPosition.x, worldPosition.y, worldPosition.z],
|
||||||
|
// { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
|
||||||
|
// obj.userData.modelId,
|
||||||
|
// false,
|
||||||
|
// true,
|
||||||
|
// );
|
||||||
|
|
||||||
|
//SOCKET
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
organization,
|
||||||
|
modeluuid: newFloorItem.modeluuid,
|
||||||
|
modelname: newFloorItem.modelname,
|
||||||
|
modelfileID: newFloorItem.modelfileID,
|
||||||
|
position: newFloorItem.position,
|
||||||
|
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
|
||||||
|
isLocked: false,
|
||||||
|
isVisible: true,
|
||||||
|
socketId: socket.id,
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
|
|
@ -132,7 +132,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
|
||||||
return updatedItems;
|
return updatedItems;
|
||||||
});
|
});
|
||||||
|
|
||||||
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
|
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
|
||||||
|
|
||||||
const email = localStorage.getItem("email");
|
const email = localStorage.getItem("email");
|
||||||
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
||||||
|
@ -216,7 +216,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
|
||||||
newEventData.position = newFloorItem.position;
|
newEventData.position = newFloorItem.position;
|
||||||
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
||||||
|
|
||||||
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => [
|
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
|
||||||
...(prevEvents || []),
|
...(prevEvents || []),
|
||||||
newEventData as Types.ConveyorEventsSchema
|
newEventData as Types.ConveyorEventsSchema
|
||||||
]);
|
]);
|
||||||
|
@ -295,13 +295,44 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
|
||||||
newEventData.modelName = newFloorItem.modelname;
|
newEventData.modelName = newFloorItem.modelname;
|
||||||
newEventData.position = newFloorItem.position;
|
newEventData.position = newFloorItem.position;
|
||||||
|
|
||||||
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => [
|
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [
|
||||||
...(prevEvents || []),
|
...(prevEvents || []),
|
||||||
newEventData as Types.VehicleEventsSchema
|
newEventData as Types.VehicleEventsSchema
|
||||||
]);
|
]);
|
||||||
|
|
||||||
socket.emit("v2:model-asset:add", data);
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
//REST
|
||||||
|
|
||||||
|
// await setFloorItemApi(
|
||||||
|
// organization,
|
||||||
|
// obj.uuid,
|
||||||
|
// obj.userData.name,
|
||||||
|
// [worldPosition.x, worldPosition.y, worldPosition.z],
|
||||||
|
// { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
|
||||||
|
// obj.userData.modelId,
|
||||||
|
// false,
|
||||||
|
// true,
|
||||||
|
// );
|
||||||
|
|
||||||
|
//SOCKET
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
organization,
|
||||||
|
modeluuid: newFloorItem.modeluuid,
|
||||||
|
modelname: newFloorItem.modelname,
|
||||||
|
modelfileID: newFloorItem.modelfileID,
|
||||||
|
position: newFloorItem.position,
|
||||||
|
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
|
||||||
|
isLocked: false,
|
||||||
|
isVisible: true,
|
||||||
|
socketId: socket.id,
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
|
|
|
@ -180,12 +180,12 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
|
||||||
return updatedItems;
|
return updatedItems;
|
||||||
});
|
});
|
||||||
|
|
||||||
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
|
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
|
||||||
|
|
||||||
const email = localStorage.getItem("email");
|
const email = localStorage.getItem("email");
|
||||||
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
||||||
|
|
||||||
if (eventData && eventData.type !== 'StaticMachine') {
|
if (eventData) {
|
||||||
if (eventData.type === 'Conveyor' && eventData) {
|
if (eventData.type === 'Conveyor' && eventData) {
|
||||||
|
|
||||||
const backendEventData = {
|
const backendEventData = {
|
||||||
|
@ -229,7 +229,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
|
||||||
newEventData.position = newFloorItem.position;
|
newEventData.position = newFloorItem.position;
|
||||||
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
||||||
|
|
||||||
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => {
|
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
|
||||||
const updatedEvents = (prevEvents || []).map(event =>
|
const updatedEvents = (prevEvents || []).map(event =>
|
||||||
event.modeluuid === newFloorItem.modeluuid
|
event.modeluuid === newFloorItem.modeluuid
|
||||||
? { ...event, ...newEventData }
|
? { ...event, ...newEventData }
|
||||||
|
@ -280,7 +280,113 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
|
||||||
newEventData.modelName = newFloorItem.modelname;
|
newEventData.modelName = newFloorItem.modelname;
|
||||||
newEventData.position = newFloorItem.position;
|
newEventData.position = newFloorItem.position;
|
||||||
|
|
||||||
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => {
|
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
|
||||||
|
const updatedEvents = (prevEvents || []).map(event =>
|
||||||
|
event.modeluuid === newFloorItem.modeluuid
|
||||||
|
? { ...event, ...newEventData }
|
||||||
|
: event
|
||||||
|
);
|
||||||
|
return updatedEvents;
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
|
||||||
|
} else if (eventData.type === 'StaticMachine' && eventData) {
|
||||||
|
|
||||||
|
const backendEventData = {
|
||||||
|
type: 'StaticMachine',
|
||||||
|
points: eventData.points,
|
||||||
|
};
|
||||||
|
|
||||||
|
// REST
|
||||||
|
|
||||||
|
// await setFloorItemApi(
|
||||||
|
// organization,
|
||||||
|
// obj.uuid,
|
||||||
|
// obj.userData.name,
|
||||||
|
// obj.userData.modelId,
|
||||||
|
// [worldPosition.x, worldPosition.y, worldPosition.z],
|
||||||
|
// { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
|
||||||
|
// false,
|
||||||
|
// true,
|
||||||
|
// { type: backendEventData.type, points: backendEventData.points }
|
||||||
|
// );
|
||||||
|
|
||||||
|
//SOCKET
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
organization,
|
||||||
|
modeluuid: newFloorItem.modeluuid,
|
||||||
|
modelname: newFloorItem.modelname,
|
||||||
|
modelfileID: newFloorItem.modelfileID,
|
||||||
|
position: newFloorItem.position,
|
||||||
|
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
|
||||||
|
isLocked: false,
|
||||||
|
isVisible: true,
|
||||||
|
// eventData: { type: backendEventData.type, points: backendEventData.points },
|
||||||
|
socketId: socket.id,
|
||||||
|
};
|
||||||
|
|
||||||
|
const newEventData: any = { type: backendEventData.type, points: backendEventData.points };
|
||||||
|
newEventData.modeluuid = newFloorItem.modeluuid;
|
||||||
|
newEventData.modelName = newFloorItem.modelname;
|
||||||
|
newEventData.position = newFloorItem.position;
|
||||||
|
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
||||||
|
|
||||||
|
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
|
||||||
|
const updatedEvents = (prevEvents || []).map(event =>
|
||||||
|
event.modeluuid === newFloorItem.modeluuid
|
||||||
|
? { ...event, ...newEventData }
|
||||||
|
: event
|
||||||
|
);
|
||||||
|
return updatedEvents;
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
|
||||||
|
} else if (eventData.type === 'ArmBot' && eventData) {
|
||||||
|
|
||||||
|
const backendEventData = {
|
||||||
|
type: 'ArmBot',
|
||||||
|
points: eventData.points,
|
||||||
|
};
|
||||||
|
|
||||||
|
// REST
|
||||||
|
|
||||||
|
// await setFloorItemApi(
|
||||||
|
// organization,
|
||||||
|
// obj.uuid,
|
||||||
|
// obj.userData.name,
|
||||||
|
// obj.userData.modelId,
|
||||||
|
// [worldPosition.x, worldPosition.y, worldPosition.z],
|
||||||
|
// { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
|
||||||
|
// false,
|
||||||
|
// true,
|
||||||
|
// { type: backendEventData.type, points: backendEventData.points }
|
||||||
|
// );
|
||||||
|
|
||||||
|
//SOCKET
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
organization,
|
||||||
|
modeluuid: newFloorItem.modeluuid,
|
||||||
|
modelname: newFloorItem.modelname,
|
||||||
|
modelfileID: newFloorItem.modelfileID,
|
||||||
|
position: newFloorItem.position,
|
||||||
|
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
|
||||||
|
isLocked: false,
|
||||||
|
isVisible: true,
|
||||||
|
// eventData: { type: backendEventData.type, points: backendEventData.points },
|
||||||
|
socketId: socket.id,
|
||||||
|
};
|
||||||
|
|
||||||
|
const newEventData: any = { type: backendEventData.type, points: backendEventData.points };
|
||||||
|
newEventData.modeluuid = newFloorItem.modeluuid;
|
||||||
|
newEventData.modelName = newFloorItem.modelname;
|
||||||
|
newEventData.position = newFloorItem.position;
|
||||||
|
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
||||||
|
|
||||||
|
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
|
||||||
const updatedEvents = (prevEvents || []).map(event =>
|
const updatedEvents = (prevEvents || []).map(event =>
|
||||||
event.modeluuid === newFloorItem.modeluuid
|
event.modeluuid === newFloorItem.modeluuid
|
||||||
? { ...event, ...newEventData }
|
? { ...event, ...newEventData }
|
||||||
|
|
|
@ -184,13 +184,12 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
|
||||||
return updatedItems;
|
return updatedItems;
|
||||||
});
|
});
|
||||||
|
|
||||||
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
|
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
|
||||||
console.log('eventData: ', eventData);
|
|
||||||
|
|
||||||
const email = localStorage.getItem("email");
|
const email = localStorage.getItem("email");
|
||||||
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
const organization = email ? email.split("@")[1].split(".")[0] : "default";
|
||||||
|
|
||||||
if (eventData && eventData.type !== 'StaticMachine') {
|
if (eventData) {
|
||||||
if (eventData.type === 'Conveyor' && eventData) {
|
if (eventData.type === 'Conveyor' && eventData) {
|
||||||
|
|
||||||
const backendEventData = {
|
const backendEventData = {
|
||||||
|
@ -233,9 +232,8 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
|
||||||
newEventData.modelName = newFloorItem.modelname;
|
newEventData.modelName = newFloorItem.modelname;
|
||||||
newEventData.position = newFloorItem.position;
|
newEventData.position = newFloorItem.position;
|
||||||
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
||||||
console.log('newEventData: ', newEventData);
|
|
||||||
|
|
||||||
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => {
|
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
|
||||||
const updatedEvents = (prevEvents || []).map(event =>
|
const updatedEvents = (prevEvents || []).map(event =>
|
||||||
event.modeluuid === newFloorItem.modeluuid
|
event.modeluuid === newFloorItem.modeluuid
|
||||||
? { ...event, ...newEventData }
|
? { ...event, ...newEventData }
|
||||||
|
@ -287,7 +285,113 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
|
||||||
newEventData.modelName = newFloorItem.modelname;
|
newEventData.modelName = newFloorItem.modelname;
|
||||||
newEventData.position = newFloorItem.position;
|
newEventData.position = newFloorItem.position;
|
||||||
|
|
||||||
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => {
|
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
|
||||||
|
const updatedEvents = (prevEvents || []).map(event =>
|
||||||
|
event.modeluuid === newFloorItem.modeluuid
|
||||||
|
? { ...event, ...newEventData }
|
||||||
|
: event
|
||||||
|
);
|
||||||
|
return updatedEvents;
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
|
||||||
|
} else if (eventData.type === 'StaticMachine' && eventData) {
|
||||||
|
|
||||||
|
const backendEventData = {
|
||||||
|
type: 'StaticMachine',
|
||||||
|
points: eventData.points,
|
||||||
|
};
|
||||||
|
|
||||||
|
// REST
|
||||||
|
|
||||||
|
// await setFloorItemApi(
|
||||||
|
// organization,
|
||||||
|
// obj.uuid,
|
||||||
|
// obj.userData.name,
|
||||||
|
// obj.userData.modelId,
|
||||||
|
// [worldPosition.x, worldPosition.y, worldPosition.z],
|
||||||
|
// { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
|
||||||
|
// false,
|
||||||
|
// true,
|
||||||
|
// { type: backendEventData.type, points: backendEventData.points }
|
||||||
|
// );
|
||||||
|
|
||||||
|
//SOCKET
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
organization,
|
||||||
|
modeluuid: newFloorItem.modeluuid,
|
||||||
|
modelname: newFloorItem.modelname,
|
||||||
|
modelfileID: newFloorItem.modelfileID,
|
||||||
|
position: newFloorItem.position,
|
||||||
|
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
|
||||||
|
isLocked: false,
|
||||||
|
isVisible: true,
|
||||||
|
// eventData: { type: backendEventData.type, points: backendEventData.points },
|
||||||
|
socketId: socket.id,
|
||||||
|
};
|
||||||
|
|
||||||
|
const newEventData: any = { type: backendEventData.type, points: backendEventData.points };
|
||||||
|
newEventData.modeluuid = newFloorItem.modeluuid;
|
||||||
|
newEventData.modelName = newFloorItem.modelname;
|
||||||
|
newEventData.position = newFloorItem.position;
|
||||||
|
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
||||||
|
|
||||||
|
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
|
||||||
|
const updatedEvents = (prevEvents || []).map(event =>
|
||||||
|
event.modeluuid === newFloorItem.modeluuid
|
||||||
|
? { ...event, ...newEventData }
|
||||||
|
: event
|
||||||
|
);
|
||||||
|
return updatedEvents;
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.emit("v2:model-asset:add", data);
|
||||||
|
|
||||||
|
} else if (eventData.type === 'ArmBot' && eventData) {
|
||||||
|
|
||||||
|
const backendEventData = {
|
||||||
|
type: 'ArmBot',
|
||||||
|
points: eventData.points,
|
||||||
|
};
|
||||||
|
|
||||||
|
// REST
|
||||||
|
|
||||||
|
// await setFloorItemApi(
|
||||||
|
// organization,
|
||||||
|
// obj.uuid,
|
||||||
|
// obj.userData.name,
|
||||||
|
// obj.userData.modelId,
|
||||||
|
// [worldPosition.x, worldPosition.y, worldPosition.z],
|
||||||
|
// { "x": obj.rotation.x, "y": obj.rotation.y, "z": obj.rotation.z },
|
||||||
|
// false,
|
||||||
|
// true,
|
||||||
|
// { type: backendEventData.type, points: backendEventData.points }
|
||||||
|
// );
|
||||||
|
|
||||||
|
//SOCKET
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
organization,
|
||||||
|
modeluuid: newFloorItem.modeluuid,
|
||||||
|
modelname: newFloorItem.modelname,
|
||||||
|
modelfileID: newFloorItem.modelfileID,
|
||||||
|
position: newFloorItem.position,
|
||||||
|
rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
|
||||||
|
isLocked: false,
|
||||||
|
isVisible: true,
|
||||||
|
// eventData: { type: backendEventData.type, points: backendEventData.points },
|
||||||
|
socketId: socket.id,
|
||||||
|
};
|
||||||
|
|
||||||
|
const newEventData: any = { type: backendEventData.type, points: backendEventData.points };
|
||||||
|
newEventData.modeluuid = newFloorItem.modeluuid;
|
||||||
|
newEventData.modelName = newFloorItem.modelname;
|
||||||
|
newEventData.position = newFloorItem.position;
|
||||||
|
newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
|
||||||
|
|
||||||
|
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
|
||||||
const updatedEvents = (prevEvents || []).map(event =>
|
const updatedEvents = (prevEvents || []).map(event =>
|
||||||
event.modeluuid === newFloorItem.modeluuid
|
event.modeluuid === newFloorItem.modeluuid
|
||||||
? { ...event, ...newEventData }
|
? { ...event, ...newEventData }
|
||||||
|
|
|
@ -240,7 +240,7 @@ const SelectionControls: React.FC = () => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => {
|
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
|
||||||
const updatedEvents = (prevEvents || []).filter(event => event.modeluuid !== selectedMesh.uuid);
|
const updatedEvents = (prevEvents || []).filter(event => event.modeluuid !== selectedMesh.uuid);
|
||||||
return updatedEvents;
|
return updatedEvents;
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import { useFrame, useThree } from '@react-three/fiber';
|
import { useFrame, useThree } from '@react-three/fiber';
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
import * as THREE from 'three';
|
import * as THREE from 'three';
|
||||||
import * as Types from '../../../types/world/worldTypes';
|
import * as Types from '../../../types/world/worldTypes';
|
||||||
import { QuadraticBezierLine } from '@react-three/drei';
|
import { QuadraticBezierLine } from '@react-three/drei';
|
||||||
import { useIsConnecting, useSimulationStates, useSocketStore } from '../../../store/store';
|
import { useIsConnecting, useRenderDistance, useSimulationStates, useSocketStore } from '../../../store/store';
|
||||||
import useModuleStore from '../../../store/useModuleStore';
|
import useModuleStore from '../../../store/useModuleStore';
|
||||||
import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
|
import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
|
||||||
import { setEventApi } from '../../../services/factoryBuilder/assest/floorAsset/setEventsApt';
|
import { setEventApi } from '../../../services/factoryBuilder/assest/floorAsset/setEventsApt';
|
||||||
|
@ -11,28 +11,21 @@ import { setEventApi } from '../../../services/factoryBuilder/assest/floorAsset/
|
||||||
function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject<THREE.Group> }) {
|
function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject<THREE.Group> }) {
|
||||||
const { activeModule } = useModuleStore();
|
const { activeModule } = useModuleStore();
|
||||||
const { gl, raycaster, scene, pointer, camera } = useThree();
|
const { gl, raycaster, scene, pointer, camera } = useThree();
|
||||||
|
const { renderDistance } = useRenderDistance();
|
||||||
const { setIsConnecting } = useIsConnecting();
|
const { setIsConnecting } = useIsConnecting();
|
||||||
const { simulationStates, setSimulationStates } = useSimulationStates();
|
const { simulationStates, setSimulationStates } = useSimulationStates();
|
||||||
const { isPlaying } = usePlayButtonStore();
|
const { isPlaying } = usePlayButtonStore();
|
||||||
const { socket } = useSocketStore();
|
const { socket } = useSocketStore();
|
||||||
|
const groupRefs = useRef<{ [key: string]: any }>({});
|
||||||
|
|
||||||
const [firstSelected, setFirstSelected] = useState<{
|
const [firstSelected, setFirstSelected] = useState<{ modelUUID: string; sphereUUID: string; position: THREE.Vector3; isCorner: boolean; } | null>(null);
|
||||||
modelUUID: string;
|
|
||||||
sphereUUID: string;
|
|
||||||
position: THREE.Vector3;
|
|
||||||
isCorner: boolean;
|
|
||||||
} | null>(null);
|
|
||||||
const [currentLine, setCurrentLine] = useState<{ start: THREE.Vector3, end: THREE.Vector3, mid: THREE.Vector3 } | null>(null);
|
const [currentLine, setCurrentLine] = useState<{ start: THREE.Vector3, end: THREE.Vector3, mid: THREE.Vector3 } | null>(null);
|
||||||
const [helperlineColor, setHelperLineColor] = useState<string>('red');
|
const [helperlineColor, setHelperLineColor] = useState<string>('red');
|
||||||
|
|
||||||
const updatePathConnections = (
|
const updatePathConnections = (fromModelUUID: string, fromPointUUID: string, toModelUUID: string, toPointUUID: string) => {
|
||||||
fromModelUUID: string,
|
|
||||||
fromPointUUID: string,
|
|
||||||
toModelUUID: string,
|
|
||||||
toPointUUID: string
|
|
||||||
) => {
|
|
||||||
const updatedPaths = simulationStates.map(path => {
|
const updatedPaths = simulationStates.map(path => {
|
||||||
if (path.type === 'Conveyor') {
|
if (path.type === 'Conveyor') {
|
||||||
|
// Handle outgoing connections from Conveyor
|
||||||
if (path.modeluuid === fromModelUUID) {
|
if (path.modeluuid === fromModelUUID) {
|
||||||
return {
|
return {
|
||||||
...path,
|
...path,
|
||||||
|
@ -61,6 +54,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
// Handle incoming connections to Conveyor
|
||||||
else if (path.modeluuid === toModelUUID) {
|
else if (path.modeluuid === toModelUUID) {
|
||||||
return {
|
return {
|
||||||
...path,
|
...path,
|
||||||
|
@ -167,82 +161,170 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
||||||
}
|
}
|
||||||
return path;
|
return path;
|
||||||
}
|
}
|
||||||
// else if (path.type === 'StaticMachine') {
|
else if (path.type === 'StaticMachine') {
|
||||||
// if (path.modeluuid === fromModelUUID && path.points.uuid === fromPointUUID) {
|
// Handle outgoing connections from StaticMachine
|
||||||
// const newTarget = {
|
if (path.modeluuid === fromModelUUID && path.points.uuid === fromPointUUID) {
|
||||||
// modelUUID: toModelUUID,
|
const newTarget = {
|
||||||
// pointUUID: toPointUUID
|
modelUUID: toModelUUID,
|
||||||
// };
|
pointUUID: toPointUUID
|
||||||
// const existingTargets = path.points.connections.targets || [];
|
};
|
||||||
|
|
||||||
// // Check if target is an ArmBot
|
// Ensure target is an ArmBot
|
||||||
// const toPath = simulationStates.find(p => p.modeluuid === toModelUUID);
|
const toPath = simulationStates.find(p => p.modeluuid === toModelUUID);
|
||||||
// if (toPath?.type !== 'ArmBot') {
|
if (toPath?.type !== 'ArmBot') {
|
||||||
// console.log("StaticMachine can only connect to ArmBot");
|
console.log("StaticMachine can only connect to ArmBot");
|
||||||
// return path;
|
return path;
|
||||||
// }
|
}
|
||||||
|
|
||||||
// // Check if already has a connection
|
const existingTargets = path.points.connections.targets || [];
|
||||||
// if (existingTargets.length >= 1) {
|
|
||||||
// console.log("StaticMachine can have only one connection");
|
|
||||||
// return path;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if (!existingTargets.some(target =>
|
// Allow only one connection
|
||||||
// target.modelUUID === newTarget.modelUUID &&
|
if (existingTargets.length >= 1) {
|
||||||
// target.pointUUID === newTarget.pointUUID
|
console.log("StaticMachine can only have one connection");
|
||||||
// )) {
|
return path;
|
||||||
// return {
|
}
|
||||||
// ...path,
|
|
||||||
// points: {
|
|
||||||
// ...path.points,
|
|
||||||
// connections: {
|
|
||||||
// ...path.points.connections,
|
|
||||||
// targets: [...existingTargets, newTarget]
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// // Handle incoming connections to StaticMachine
|
|
||||||
// else if (path.modeluuid === toModelUUID && path.points.uuid === toPointUUID) {
|
|
||||||
// const reverseTarget = {
|
|
||||||
// modelUUID: fromModelUUID,
|
|
||||||
// pointUUID: fromPointUUID
|
|
||||||
// };
|
|
||||||
// const existingTargets = path.points.connections.targets || [];
|
|
||||||
|
|
||||||
// // Check if source is an ArmBot
|
if (!existingTargets.some(target =>
|
||||||
// const fromPath = simulationStates.find(p => p.modeluuid === fromModelUUID);
|
target.modelUUID === newTarget.modelUUID &&
|
||||||
// if (fromPath?.type !== 'ArmBot') {
|
target.pointUUID === newTarget.pointUUID
|
||||||
// console.log("StaticMachine can only connect to ArmBot");
|
)) {
|
||||||
// return path;
|
return {
|
||||||
// }
|
...path,
|
||||||
|
points: {
|
||||||
|
...path.points,
|
||||||
|
connections: {
|
||||||
|
...path.points.connections,
|
||||||
|
targets: [...existingTargets, newTarget]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// // Check if already has a connection
|
// Handle incoming connections to StaticMachine
|
||||||
// if (existingTargets.length >= 1) {
|
else if (path.modeluuid === toModelUUID && path.points.uuid === toPointUUID) {
|
||||||
// console.log("StaticMachine can have only one connection");
|
const reverseTarget = {
|
||||||
// return path;
|
modelUUID: fromModelUUID,
|
||||||
// }
|
pointUUID: fromPointUUID
|
||||||
|
};
|
||||||
|
|
||||||
|
const fromPath = simulationStates.find(p => p.modeluuid === fromModelUUID);
|
||||||
|
if (fromPath?.type !== 'ArmBot') {
|
||||||
|
console.log("StaticMachine can only be connected from ArmBot");
|
||||||
|
return path;
|
||||||
|
}
|
||||||
|
|
||||||
|
const existingTargets = path.points.connections.targets || [];
|
||||||
|
|
||||||
|
if (existingTargets.length >= 1) {
|
||||||
|
console.log("StaticMachine can only have one connection");
|
||||||
|
return path;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!existingTargets.some(target =>
|
||||||
|
target.modelUUID === reverseTarget.modelUUID &&
|
||||||
|
target.pointUUID === reverseTarget.pointUUID
|
||||||
|
)) {
|
||||||
|
return {
|
||||||
|
...path,
|
||||||
|
points: {
|
||||||
|
...path.points,
|
||||||
|
connections: {
|
||||||
|
...path.points.connections,
|
||||||
|
targets: [...existingTargets, reverseTarget]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return path;
|
||||||
|
}
|
||||||
|
else if (path.type === 'ArmBot') {
|
||||||
|
// Handle outgoing connections from ArmBot
|
||||||
|
if (path.modeluuid === fromModelUUID && path.points.uuid === fromPointUUID) {
|
||||||
|
const newTarget = {
|
||||||
|
modelUUID: toModelUUID,
|
||||||
|
pointUUID: toPointUUID
|
||||||
|
};
|
||||||
|
|
||||||
|
const toPath = simulationStates.find(p => p.modeluuid === toModelUUID);
|
||||||
|
if (!toPath) return path;
|
||||||
|
|
||||||
|
const existingTargets = path.points.connections.targets || [];
|
||||||
|
|
||||||
|
// Check if connecting to a StaticMachine and already connected to one
|
||||||
|
const alreadyConnectedToStatic = existingTargets.some(target => {
|
||||||
|
const targetPath = simulationStates.find(p => p.modeluuid === target.modelUUID);
|
||||||
|
return targetPath?.type === 'StaticMachine';
|
||||||
|
});
|
||||||
|
|
||||||
|
if (toPath.type === 'StaticMachine') {
|
||||||
|
if (alreadyConnectedToStatic) {
|
||||||
|
console.log("ArmBot can only connect to one StaticMachine");
|
||||||
|
return path;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!existingTargets.some(target =>
|
||||||
|
target.modelUUID === newTarget.modelUUID &&
|
||||||
|
target.pointUUID === newTarget.pointUUID
|
||||||
|
)) {
|
||||||
|
return {
|
||||||
|
...path,
|
||||||
|
points: {
|
||||||
|
...path.points,
|
||||||
|
connections: {
|
||||||
|
...path.points.connections,
|
||||||
|
targets: [...existingTargets, newTarget]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle incoming connections to ArmBot
|
||||||
|
else if (path.modeluuid === toModelUUID && path.points.uuid === toPointUUID) {
|
||||||
|
const reverseTarget = {
|
||||||
|
modelUUID: fromModelUUID,
|
||||||
|
pointUUID: fromPointUUID
|
||||||
|
};
|
||||||
|
|
||||||
|
const fromPath = simulationStates.find(p => p.modeluuid === fromModelUUID);
|
||||||
|
if (!fromPath) return path;
|
||||||
|
|
||||||
|
const existingTargets = path.points.connections.targets || [];
|
||||||
|
|
||||||
|
const alreadyConnectedFromStatic = existingTargets.some(target => {
|
||||||
|
const targetPath = simulationStates.find(p => p.modeluuid === target.modelUUID);
|
||||||
|
return targetPath?.type === 'StaticMachine';
|
||||||
|
});
|
||||||
|
|
||||||
|
if (fromPath.type === 'StaticMachine') {
|
||||||
|
if (alreadyConnectedFromStatic) {
|
||||||
|
console.log("ArmBot can only be connected from one StaticMachine");
|
||||||
|
return path;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!existingTargets.some(target =>
|
||||||
|
target.modelUUID === reverseTarget.modelUUID &&
|
||||||
|
target.pointUUID === reverseTarget.pointUUID
|
||||||
|
)) {
|
||||||
|
return {
|
||||||
|
...path,
|
||||||
|
points: {
|
||||||
|
...path.points,
|
||||||
|
connections: {
|
||||||
|
...path.points.connections,
|
||||||
|
targets: [...existingTargets, reverseTarget]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return path;
|
||||||
|
}
|
||||||
|
|
||||||
// if (!existingTargets.some(target =>
|
|
||||||
// target.modelUUID === reverseTarget.modelUUID &&
|
|
||||||
// target.pointUUID === reverseTarget.pointUUID
|
|
||||||
// )) {
|
|
||||||
// return {
|
|
||||||
// ...path,
|
|
||||||
// points: {
|
|
||||||
// ...path.points,
|
|
||||||
// connections: {
|
|
||||||
// ...path.points.connections,
|
|
||||||
// targets: [...existingTargets, reverseTarget]
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// return path;
|
|
||||||
// }
|
|
||||||
return path;
|
return path;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -252,10 +334,10 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
||||||
path.modeluuid === fromModelUUID || path.modeluuid === toModelUUID
|
path.modeluuid === fromModelUUID || path.modeluuid === toModelUUID
|
||||||
);
|
);
|
||||||
|
|
||||||
updateBackend(updatedPathDetails);
|
// updateBackend(updatedPathDetails);
|
||||||
};
|
};
|
||||||
|
|
||||||
const updateBackend = async (updatedPaths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => {
|
const updateBackend = async (updatedPaths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => {
|
||||||
if (updatedPaths.length === 0) return;
|
if (updatedPaths.length === 0) return;
|
||||||
const email = localStorage.getItem("email");
|
const email = localStorage.getItem("email");
|
||||||
const organization = email ? email.split("@")[1].split(".")[0] : "";
|
const organization = email ? email.split("@")[1].split(".")[0] : "";
|
||||||
|
@ -437,6 +519,69 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Check if StaticMachine is involved in the connection
|
||||||
|
if ((firstPath?.type === 'StaticMachine' && secondPath?.type !== 'ArmBot') ||
|
||||||
|
(secondPath?.type === 'StaticMachine' && firstPath?.type !== 'ArmBot')) {
|
||||||
|
console.log("StaticMachine can only connect to ArmBot");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if StaticMachine already has a connection
|
||||||
|
if (firstPath?.type === 'StaticMachine') {
|
||||||
|
const staticConnections = firstPath.points.connections.targets.length;
|
||||||
|
if (staticConnections >= 1) {
|
||||||
|
console.log("StaticMachine can only have one connection");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (secondPath?.type === 'StaticMachine') {
|
||||||
|
const staticConnections = secondPath.points.connections.targets.length;
|
||||||
|
if (staticConnections >= 1) {
|
||||||
|
console.log("StaticMachine can only have one connection");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if ArmBot is involved
|
||||||
|
if ((firstPath?.type === 'ArmBot' && secondPath?.type === 'StaticMachine') ||
|
||||||
|
(secondPath?.type === 'ArmBot' && firstPath?.type === 'StaticMachine')) {
|
||||||
|
|
||||||
|
const armBotPath = firstPath?.type === 'ArmBot' ? firstPath : secondPath;
|
||||||
|
const staticPath = firstPath?.type === 'StaticMachine' ? firstPath : secondPath;
|
||||||
|
|
||||||
|
const armBotConnections = armBotPath.points.connections.targets || [];
|
||||||
|
const alreadyConnectedToStatic = armBotConnections.some(target => {
|
||||||
|
const targetPath = simulationStates.find(p => p.modeluuid === target.modelUUID);
|
||||||
|
return targetPath?.type === 'StaticMachine';
|
||||||
|
});
|
||||||
|
|
||||||
|
if (alreadyConnectedToStatic) {
|
||||||
|
console.log("ArmBot can only connect to one StaticMachine");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const staticConnections = staticPath.points.connections.targets.length;
|
||||||
|
if (staticConnections >= 1) {
|
||||||
|
console.log("StaticMachine can only have one connection");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prevent ArmBot ↔ ArmBot
|
||||||
|
if (firstPath?.type === 'ArmBot' && secondPath?.type === 'ArmBot') {
|
||||||
|
console.log("Cannot connect two ArmBots together");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If one is ArmBot, ensure the other is StaticMachine or Conveyor
|
||||||
|
if (firstPath?.type === 'ArmBot' || secondPath?.type === 'ArmBot') {
|
||||||
|
const otherType = firstPath?.type === 'ArmBot' ? secondPath?.type : firstPath?.type;
|
||||||
|
if (otherType !== 'StaticMachine' && otherType !== 'Conveyor') {
|
||||||
|
console.log("ArmBot can only connect to Conveyors or one StaticMachine");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// At least one must be start/end point
|
// At least one must be start/end point
|
||||||
if (!firstSelected.isCorner && !isStartOrEnd) {
|
if (!firstSelected.isCorner && !isStartOrEnd) {
|
||||||
console.log("At least one of the selected spheres must be a start or end point.");
|
console.log("At least one of the selected spheres must be a start or end point.");
|
||||||
|
@ -489,6 +634,15 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
||||||
};
|
};
|
||||||
}, [camera, scene, raycaster, firstSelected, simulationStates]);
|
}, [camera, scene, raycaster, firstSelected, simulationStates]);
|
||||||
|
|
||||||
|
useFrame(() => {
|
||||||
|
Object.values(groupRefs.current).forEach((group) => {
|
||||||
|
if (group) {
|
||||||
|
const distance = new THREE.Vector3(...group.position.toArray()).distanceTo(camera.position);
|
||||||
|
group.visible = ((distance <= renderDistance) && !isPlaying);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (firstSelected) {
|
if (firstSelected) {
|
||||||
raycaster.setFromCamera(pointer, camera);
|
raycaster.setFromCamera(pointer, camera);
|
||||||
|
@ -574,12 +728,50 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
||||||
(firstPath?.type === 'Vehicle' && secondPath?.type !== 'Conveyor') ||
|
(firstPath?.type === 'Vehicle' && secondPath?.type !== 'Conveyor') ||
|
||||||
(secondPath?.type === 'Vehicle' && firstPath?.type !== 'Conveyor');
|
(secondPath?.type === 'Vehicle' && firstPath?.type !== 'Conveyor');
|
||||||
|
|
||||||
|
// Check if StaticMachine is connecting to non-ArmBot
|
||||||
|
const isStaticMachineToNonArmBot =
|
||||||
|
(firstPath?.type === 'StaticMachine' && secondPath?.type !== 'ArmBot') ||
|
||||||
|
(secondPath?.type === 'StaticMachine' && firstPath?.type !== 'ArmBot');
|
||||||
|
|
||||||
|
// Check if StaticMachine already has a connection
|
||||||
|
const isStaticMachineAtMaxConnections =
|
||||||
|
(firstPath?.type === 'StaticMachine' && firstPath.points.connections.targets.length >= 1) ||
|
||||||
|
(secondPath?.type === 'StaticMachine' && secondPath.points.connections.targets.length >= 1);
|
||||||
|
|
||||||
|
// Check if ArmBot is connecting to StaticMachine
|
||||||
|
const isArmBotToStaticMachine =
|
||||||
|
(firstPath?.type === 'ArmBot' && secondPath?.type === 'StaticMachine') ||
|
||||||
|
(secondPath?.type === 'ArmBot' && firstPath?.type === 'StaticMachine');
|
||||||
|
|
||||||
|
// Prevent multiple StaticMachine connections to ArmBot
|
||||||
|
let isArmBotAlreadyConnectedToStatic = false;
|
||||||
|
if (isArmBotToStaticMachine) {
|
||||||
|
const armBotPath = firstPath?.type === 'ArmBot' ? firstPath : secondPath;
|
||||||
|
isArmBotAlreadyConnectedToStatic = armBotPath.points.connections.targets.some(target => {
|
||||||
|
const targetPath = simulationStates.find(p => p.modeluuid === target.modelUUID);
|
||||||
|
return targetPath?.type === 'StaticMachine';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prevent ArmBot to ArmBot
|
||||||
|
const isArmBotToArmBot = firstPath?.type === 'ArmBot' && secondPath?.type === 'ArmBot';
|
||||||
|
|
||||||
|
// If ArmBot is involved, other must be Conveyor or StaticMachine
|
||||||
|
const isArmBotToInvalidType = (firstPath?.type === 'ArmBot' || secondPath?.type === 'ArmBot') &&
|
||||||
|
!(firstPath?.type === 'Conveyor' || firstPath?.type === 'StaticMachine' ||
|
||||||
|
secondPath?.type === 'Conveyor' || secondPath?.type === 'StaticMachine');
|
||||||
|
|
||||||
if (
|
if (
|
||||||
!isDuplicateConnection &&
|
!isDuplicateConnection &&
|
||||||
!isVehicleToVehicle &&
|
!isVehicleToVehicle &&
|
||||||
!isNonVehicleAlreadyConnected &&
|
!isNonVehicleAlreadyConnected &&
|
||||||
!isVehicleAtMaxConnections &&
|
!isVehicleAtMaxConnections &&
|
||||||
!isVehicleConnectingToNonConveyor &&
|
!isVehicleConnectingToNonConveyor &&
|
||||||
|
!isStaticMachineToNonArmBot &&
|
||||||
|
!isStaticMachineAtMaxConnections &&
|
||||||
|
!isArmBotToArmBot &&
|
||||||
|
!isArmBotToInvalidType &&
|
||||||
|
!isArmBotAlreadyConnectedToStatic &&
|
||||||
firstSelected.sphereUUID !== sphereUUID &&
|
firstSelected.sphereUUID !== sphereUUID &&
|
||||||
firstSelected.modelUUID !== modelUUID &&
|
firstSelected.modelUUID !== modelUUID &&
|
||||||
(firstSelected.isCorner || isConnectable) &&
|
(firstSelected.isCorner || isConnectable) &&
|
||||||
|
@ -596,6 +788,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
||||||
} else {
|
} else {
|
||||||
isInvalidConnection = true;
|
isInvalidConnection = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (snappedSphere) {
|
if (snappedSphere) {
|
||||||
|
@ -633,7 +826,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group name='simulationConnectionGroup' visible={!isPlaying} >
|
<group name='simulationConnectionGroup' visible={!isPlaying}>
|
||||||
{simulationStates.flatMap(path => {
|
{simulationStates.flatMap(path => {
|
||||||
if (path.type === 'Conveyor') {
|
if (path.type === 'Conveyor') {
|
||||||
return path.points.flatMap(point =>
|
return path.points.flatMap(point =>
|
||||||
|
@ -652,7 +845,6 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
||||||
|
|
||||||
const distance = fromWorldPosition.distanceTo(toWorldPosition);
|
const distance = fromWorldPosition.distanceTo(toWorldPosition);
|
||||||
const heightFactor = Math.max(0.5, distance * 0.2);
|
const heightFactor = Math.max(0.5, distance * 0.2);
|
||||||
|
|
||||||
const midPoint = new THREE.Vector3(
|
const midPoint = new THREE.Vector3(
|
||||||
(fromWorldPosition.x + toWorldPosition.x) / 2,
|
(fromWorldPosition.x + toWorldPosition.x) / 2,
|
||||||
Math.max(fromWorldPosition.y, toWorldPosition.y) + heightFactor,
|
Math.max(fromWorldPosition.y, toWorldPosition.y) + heightFactor,
|
||||||
|
@ -662,6 +854,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
||||||
return (
|
return (
|
||||||
<QuadraticBezierLine
|
<QuadraticBezierLine
|
||||||
key={`${point.uuid}-${target.pointUUID}-${index}`}
|
key={`${point.uuid}-${target.pointUUID}-${index}`}
|
||||||
|
ref={(el) => (groupRefs.current[`${point.uuid}-${target.pointUUID}-${index}`] = el!)}
|
||||||
start={fromWorldPosition.toArray()}
|
start={fromWorldPosition.toArray()}
|
||||||
end={toWorldPosition.toArray()}
|
end={toWorldPosition.toArray()}
|
||||||
mid={midPoint.toArray()}
|
mid={midPoint.toArray()}
|
||||||
|
@ -676,7 +869,9 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
||||||
return null;
|
return null;
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
} else if (path.type === 'Vehicle') {
|
}
|
||||||
|
|
||||||
|
if (path.type === 'Vehicle') {
|
||||||
return path.points.connections.targets.map((target, index) => {
|
return path.points.connections.targets.map((target, index) => {
|
||||||
const fromSphere = pathsGroupRef.current?.getObjectByProperty('uuid', path.points.uuid);
|
const fromSphere = pathsGroupRef.current?.getObjectByProperty('uuid', path.points.uuid);
|
||||||
const toSphere = pathsGroupRef.current?.getObjectByProperty('uuid', target.pointUUID);
|
const toSphere = pathsGroupRef.current?.getObjectByProperty('uuid', target.pointUUID);
|
||||||
|
@ -689,7 +884,6 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
||||||
|
|
||||||
const distance = fromWorldPosition.distanceTo(toWorldPosition);
|
const distance = fromWorldPosition.distanceTo(toWorldPosition);
|
||||||
const heightFactor = Math.max(0.5, distance * 0.2);
|
const heightFactor = Math.max(0.5, distance * 0.2);
|
||||||
|
|
||||||
const midPoint = new THREE.Vector3(
|
const midPoint = new THREE.Vector3(
|
||||||
(fromWorldPosition.x + toWorldPosition.x) / 2,
|
(fromWorldPosition.x + toWorldPosition.x) / 2,
|
||||||
Math.max(fromWorldPosition.y, toWorldPosition.y) + heightFactor,
|
Math.max(fromWorldPosition.y, toWorldPosition.y) + heightFactor,
|
||||||
|
@ -699,6 +893,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
||||||
return (
|
return (
|
||||||
<QuadraticBezierLine
|
<QuadraticBezierLine
|
||||||
key={`${path.points.uuid}-${target.pointUUID}-${index}`}
|
key={`${path.points.uuid}-${target.pointUUID}-${index}`}
|
||||||
|
ref={(el) => (groupRefs.current[`${path.points.uuid}-${target.pointUUID}-${index}`] = el!)}
|
||||||
start={fromWorldPosition.toArray()}
|
start={fromWorldPosition.toArray()}
|
||||||
end={toWorldPosition.toArray()}
|
end={toWorldPosition.toArray()}
|
||||||
mid={midPoint.toArray()}
|
mid={midPoint.toArray()}
|
||||||
|
@ -713,6 +908,48 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
||||||
return null;
|
return null;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (path.type === 'StaticMachine') {
|
||||||
|
return path.points.connections.targets.map((target, index) => {
|
||||||
|
const targetPath = simulationStates.find(p => p.modeluuid === target.modelUUID);
|
||||||
|
if (targetPath?.type !== 'ArmBot') return null;
|
||||||
|
|
||||||
|
const fromSphere = pathsGroupRef.current?.getObjectByProperty('uuid', path.points.uuid);
|
||||||
|
const toSphere = pathsGroupRef.current?.getObjectByProperty('uuid', target.pointUUID);
|
||||||
|
|
||||||
|
if (fromSphere && toSphere) {
|
||||||
|
const fromWorldPosition = new THREE.Vector3();
|
||||||
|
const toWorldPosition = new THREE.Vector3();
|
||||||
|
fromSphere.getWorldPosition(fromWorldPosition);
|
||||||
|
toSphere.getWorldPosition(toWorldPosition);
|
||||||
|
|
||||||
|
const distance = fromWorldPosition.distanceTo(toWorldPosition);
|
||||||
|
const heightFactor = Math.max(0.5, distance * 0.2);
|
||||||
|
const midPoint = new THREE.Vector3(
|
||||||
|
(fromWorldPosition.x + toWorldPosition.x) / 2,
|
||||||
|
Math.max(fromWorldPosition.y, toWorldPosition.y) + heightFactor,
|
||||||
|
(fromWorldPosition.z + toWorldPosition.z) / 2
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<QuadraticBezierLine
|
||||||
|
key={`${path.points.uuid}-${target.pointUUID}-${index}`}
|
||||||
|
ref={(el) => (groupRefs.current[`${path.points.uuid}-${target.pointUUID}-${index}`] = el!)}
|
||||||
|
start={fromWorldPosition.toArray()}
|
||||||
|
end={toWorldPosition.toArray()}
|
||||||
|
mid={midPoint.toArray()}
|
||||||
|
color="#42a5f5"
|
||||||
|
lineWidth={4}
|
||||||
|
dashed
|
||||||
|
dashSize={0.75}
|
||||||
|
dashScale={20}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return [];
|
return [];
|
||||||
})}
|
})}
|
||||||
|
|
||||||
|
@ -730,6 +967,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
|
||||||
)}
|
)}
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default PathConnector;
|
export default PathConnector;
|
|
@ -206,6 +206,7 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
|
||||||
return (
|
return (
|
||||||
<group
|
<group
|
||||||
name={`${path.modeluuid}-${path.type}-path`}
|
name={`${path.modeluuid}-${path.type}-path`}
|
||||||
|
uuid={path.modeluuid}
|
||||||
key={path.modeluuid}
|
key={path.modeluuid}
|
||||||
ref={(el) => (groupRefs.current[path.modeluuid] = el!)}
|
ref={(el) => (groupRefs.current[path.modeluuid] = el!)}
|
||||||
position={path.position}
|
position={path.position}
|
||||||
|
@ -271,10 +272,11 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
|
||||||
})}
|
})}
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
} else if (path.type === "Vehicle" || path.type === "StaticMachine") {
|
} else if (path.type === "Vehicle") {
|
||||||
return (
|
return (
|
||||||
<group
|
<group
|
||||||
name={`${path.modeluuid}-${path.type}-path`}
|
name={`${path.modeluuid}-${path.type}-path`}
|
||||||
|
uuid={path.modeluuid}
|
||||||
key={path.modeluuid}
|
key={path.modeluuid}
|
||||||
ref={(el) => (groupRefs.current[path.modeluuid] = el!)}
|
ref={(el) => (groupRefs.current[path.modeluuid] = el!)}
|
||||||
position={path.position}
|
position={path.position}
|
||||||
|
@ -323,6 +325,114 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
|
||||||
</Sphere>
|
</Sphere>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
|
} else if (path.type === "StaticMachine") {
|
||||||
|
return (
|
||||||
|
<group
|
||||||
|
name={`${path.modeluuid}-${path.type}-path`}
|
||||||
|
uuid={path.modeluuid}
|
||||||
|
key={path.modeluuid}
|
||||||
|
ref={(el) => (groupRefs.current[path.modeluuid] = el!)}
|
||||||
|
position={path.position}
|
||||||
|
rotation={path.rotation}
|
||||||
|
onClick={(e) => {
|
||||||
|
if (isConnecting || eyeDropMode) return;
|
||||||
|
e.stopPropagation();
|
||||||
|
setSelectedPath({
|
||||||
|
path,
|
||||||
|
group: groupRefs.current[path.modeluuid],
|
||||||
|
});
|
||||||
|
setSelectedActionSphere(null);
|
||||||
|
setTransformMode(null);
|
||||||
|
setSubModule("mechanics");
|
||||||
|
}}
|
||||||
|
onPointerMissed={() => {
|
||||||
|
if (eyeDropMode) return;
|
||||||
|
setSelectedPath(null);
|
||||||
|
setSubModule("properties");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Sphere
|
||||||
|
key={path.points.uuid}
|
||||||
|
uuid={path.points.uuid}
|
||||||
|
position={path.points.position}
|
||||||
|
args={[0.15, 32, 32]}
|
||||||
|
name="events-sphere"
|
||||||
|
ref={(el) => (sphereRefs.current[path.points.uuid] = el!)}
|
||||||
|
onClick={(e) => {
|
||||||
|
if (isConnecting || eyeDropMode) return;
|
||||||
|
e.stopPropagation();
|
||||||
|
setSelectedActionSphere({
|
||||||
|
path,
|
||||||
|
points: sphereRefs.current[path.points.uuid],
|
||||||
|
});
|
||||||
|
setSubModule("mechanics");
|
||||||
|
setSelectedPath(null);
|
||||||
|
}}
|
||||||
|
userData={{ points: path.points, path }}
|
||||||
|
onPointerMissed={() => {
|
||||||
|
if (eyeDropMode) return;
|
||||||
|
setSubModule("properties");
|
||||||
|
setSelectedActionSphere(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<meshStandardMaterial color="yellow" />
|
||||||
|
</Sphere>
|
||||||
|
</group>
|
||||||
|
);
|
||||||
|
} else if (path.type === "ArmBot") {
|
||||||
|
return (
|
||||||
|
<group
|
||||||
|
name={`${path.modeluuid}-${path.type}-path`}
|
||||||
|
uuid={path.modeluuid}
|
||||||
|
key={path.modeluuid}
|
||||||
|
ref={(el) => (groupRefs.current[path.modeluuid] = el!)}
|
||||||
|
position={path.position}
|
||||||
|
rotation={path.rotation}
|
||||||
|
onClick={(e) => {
|
||||||
|
if (isConnecting || eyeDropMode) return;
|
||||||
|
e.stopPropagation();
|
||||||
|
setSelectedPath({
|
||||||
|
path,
|
||||||
|
group: groupRefs.current[path.modeluuid],
|
||||||
|
});
|
||||||
|
setSelectedActionSphere(null);
|
||||||
|
setTransformMode(null);
|
||||||
|
setSubModule("mechanics");
|
||||||
|
}}
|
||||||
|
onPointerMissed={() => {
|
||||||
|
if (eyeDropMode) return;
|
||||||
|
setSelectedPath(null);
|
||||||
|
setSubModule("properties");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Sphere
|
||||||
|
key={path.points.uuid}
|
||||||
|
uuid={path.points.uuid}
|
||||||
|
position={path.points.position}
|
||||||
|
args={[0.15, 32, 32]}
|
||||||
|
name="events-sphere"
|
||||||
|
ref={(el) => (sphereRefs.current[path.points.uuid] = el!)}
|
||||||
|
onClick={(e) => {
|
||||||
|
if (isConnecting || eyeDropMode) return;
|
||||||
|
e.stopPropagation();
|
||||||
|
setSelectedActionSphere({
|
||||||
|
path,
|
||||||
|
points: sphereRefs.current[path.points.uuid],
|
||||||
|
});
|
||||||
|
setSubModule("mechanics");
|
||||||
|
setSelectedPath(null);
|
||||||
|
}}
|
||||||
|
userData={{ points: path.points, path }}
|
||||||
|
onPointerMissed={() => {
|
||||||
|
if (eyeDropMode) return;
|
||||||
|
setSubModule("properties");
|
||||||
|
setSelectedActionSphere(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<meshStandardMaterial color="pink" />
|
||||||
|
</Sphere>
|
||||||
|
</group>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -347,12 +347,12 @@ export const useSelectedPath = create<any>((set: any) => ({
|
||||||
}));
|
}));
|
||||||
|
|
||||||
interface SimulationPathsStore {
|
interface SimulationPathsStore {
|
||||||
simulationStates: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[];
|
simulationStates: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[];
|
||||||
setSimulationStates: (
|
setSimulationStates: (
|
||||||
paths:
|
paths:
|
||||||
| (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]
|
| (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]
|
||||||
| ((prev: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]
|
| ((prev: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]
|
||||||
) => (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[])
|
) => (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[])
|
||||||
) => void;
|
) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -329,6 +329,7 @@ interface StaticMachineEventsSchema {
|
||||||
connections: { source: { modelUUID: string; pointUUID: string }; targets: { modelUUID: string; pointUUID: string }[] };
|
connections: { source: { modelUUID: string; pointUUID: string }; targets: { modelUUID: string; pointUUID: string }[] };
|
||||||
};
|
};
|
||||||
position: [number, number, number];
|
position: [number, number, number];
|
||||||
|
rotation: [number, number, number];
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ArmBotEventsSchema {
|
interface ArmBotEventsSchema {
|
||||||
|
@ -343,6 +344,7 @@ interface ArmBotEventsSchema {
|
||||||
connections: { source: { modelUUID: string; pointUUID: string }; targets: { modelUUID: string; pointUUID: string }[] };
|
connections: { source: { modelUUID: string; pointUUID: string }; targets: { modelUUID: string; pointUUID: string }[] };
|
||||||
};
|
};
|
||||||
position: [number, number, number];
|
position: [number, number, number];
|
||||||
|
rotation: [number, number, number];
|
||||||
}
|
}
|
||||||
|
|
||||||
export type EventData = {
|
export type EventData = {
|
||||||
|
|
Loading…
Reference in New Issue