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

Merge pull request 'simulation' (#63) from simulation into main 

Reviewed-on: http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev/pulls/63
This commit is contained in:
Marikannan 2025-04-14 13:06:33 +00:00
parent ba215dd0d3 d60d9812e4
commit ca3028985f
48 changed files with 1894 additions and 1469 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/components/layout/sidebarLeft/Assets.tsx
View File

@ -133,7 +133,6 @@ const Assets: React.FC = () => {
} else { } else {
try { try {
const res = await getCategoryAsset(asset); const res = await getCategoryAsset(asset);
console.log('res: ', res);
setCategoryAssets(res); setCategoryAssets(res);
setFiltereredAssets(res); setFiltereredAssets(res);
} catch (error) {} } catch (error) {}

19
app/src/components/layout/sidebarRight/mechanics/ArmBotMechanics.tsx
View File

@ -2,7 +2,7 @@ import React, { useRef, useMemo, useCallback, useState } from "react";
import { InfoIcon, AddIcon, RemoveIcon, ResizeHeightIcon } from "../../../icons/ExportCommonIcons"; import { InfoIcon, AddIcon, RemoveIcon, ResizeHeightIcon } from "../../../icons/ExportCommonIcons";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown"; import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import { useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store"; import { useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store";
import * as Types from '../../../../types/world/worldTypes'; import * as SimulationTypes from '../../../../types/simulation';
import LabledDropdown from "../../../ui/inputs/LabledDropdown"; import LabledDropdown from "../../../ui/inputs/LabledDropdown";
import { handleResize } from "../../../../functions/handleResizePannel"; import { handleResize } from "../../../../functions/handleResizePannel";
@ -34,7 +34,7 @@ const ArmBotMechanics: React.FC = () => {
if (!selectedActionSphere?.points?.uuid) return []; if (!selectedActionSphere?.points?.uuid) return [];
const armBotPaths = simulationStates.filter( const armBotPaths = simulationStates.filter(
(path): path is Types.ArmBotEventsSchema => path.type === "ArmBot" (path): path is SimulationTypes.ArmBotEventsSchema => path.type === "ArmBot"
); );
const currentPoint = armBotPaths.find( const currentPoint = armBotPaths.find(
@ -54,7 +54,7 @@ const ArmBotMechanics: React.FC = () => {
let points: { uuid: string; position: [number, number, number] }[] = []; let points: { uuid: string; position: [number, number, number] }[] = [];
if (connectedModel.type === "Conveyor") { if (connectedModel.type === "Conveyor") {
const conveyor = connectedModel as Types.ConveyorEventsSchema; const conveyor = connectedModel as SimulationTypes.ConveyorEventsSchema;
const connectedPointUUIDs = currentPoint?.connections?.targets const connectedPointUUIDs = currentPoint?.connections?.targets
.filter(t => t.modelUUID === connectedModel.modeluuid) .filter(t => t.modelUUID === connectedModel.modeluuid)
@ -72,7 +72,7 @@ const ArmBotMechanics: React.FC = () => {
triggers = conveyor.points.flatMap(p => p.triggers?.filter(t => t.isUsed) || []); triggers = conveyor.points.flatMap(p => p.triggers?.filter(t => t.isUsed) || []);
} }
else if (connectedModel.type === "StaticMachine") { else if (connectedModel.type === "StaticMachine") {
const staticMachine = connectedModel as Types.StaticMachineEventsSchema; const staticMachine = connectedModel as SimulationTypes.StaticMachineEventsSchema;
points = [{ points = [{
uuid: staticMachine.points.uuid, uuid: staticMachine.points.uuid,
@ -128,7 +128,7 @@ const ArmBotMechanics: React.FC = () => {
if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null }; if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null };
const armBotPaths = simulationStates.filter( const armBotPaths = simulationStates.filter(
(path): path is Types.ArmBotEventsSchema => path.type === "ArmBot" (path): path is SimulationTypes.ArmBotEventsSchema => path.type === "ArmBot"
); );
const points = armBotPaths.find( const points = armBotPaths.find(
@ -140,7 +140,7 @@ const ArmBotMechanics: React.FC = () => {
}; };
}, [selectedActionSphere, simulationStates]); }, [selectedActionSphere, simulationStates]);
const updateBackend = async (updatedPath: Types.ArmBotEventsSchema | undefined) => { const updateBackend = async (updatedPath: SimulationTypes.ArmBotEventsSchema | undefined) => {
if (!updatedPath) return; if (!updatedPath) 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] : "";
@ -150,12 +150,11 @@ const ArmBotMechanics: React.FC = () => {
modeluuid: updatedPath.modeluuid, modeluuid: updatedPath.modeluuid,
eventData: { type: "ArmBot", points: updatedPath.points } eventData: { type: "ArmBot", points: updatedPath.points }
} }
console.log('data: ', data);
socket.emit('v2:model-asset:updateEventData', data); socket.emit('v2:model-asset:updateEventData', data);
} }
const handleActionUpdate = useCallback((updatedAction: Partial<Types.ArmBotEventsSchema['points']['actions']>) => { const handleActionUpdate = useCallback((updatedAction: Partial<SimulationTypes.ArmBotEventsSchema['points']['actions']>) => {
if (!selectedActionSphere?.points?.uuid || !selectedPoint) return; if (!selectedActionSphere?.points?.uuid || !selectedPoint) return;
const updatedPaths = simulationStates.map((path) => { const updatedPaths = simulationStates.map((path) => {
@ -175,7 +174,7 @@ const ArmBotMechanics: React.FC = () => {
}); });
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.ArmBotEventsSchema => (path): path is SimulationTypes.ArmBotEventsSchema =>
path.type === "ArmBot" && path.type === "ArmBot" &&
path.points.uuid === selectedActionSphere.points.uuid path.points.uuid === selectedActionSphere.points.uuid
); );
@ -188,7 +187,7 @@ const ArmBotMechanics: React.FC = () => {
handleActionUpdate({ speed }); handleActionUpdate({ speed });
}, [handleActionUpdate]); }, [handleActionUpdate]);
const handleProcessChange = useCallback((processes: Types.ArmBotEventsSchema['points']['actions']['processes']) => { const handleProcessChange = useCallback((processes: SimulationTypes.ArmBotEventsSchema['points']['actions']['processes']) => {
handleActionUpdate({ processes }); handleActionUpdate({ processes });
}, [handleActionUpdate]); }, [handleActionUpdate]);

34
app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
View File

@ -17,7 +17,7 @@ import {
useSocketStore, useSocketStore,
} from "../../../../store/store"; } from "../../../../store/store";
import * as THREE from "three"; import * as THREE from "three";
import * as Types from "../../../../types/world/worldTypes"; import * as SimulationTypes from "../../../../types/simulation";
import InputToggle from "../../../ui/inputs/InputToggle"; import InputToggle from "../../../ui/inputs/InputToggle";
import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi"; import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt"; import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
@ -36,13 +36,13 @@ const ConveyorMechanics: React.FC = () => {
if (!selectedActionSphere) return null; if (!selectedActionSphere) return null;
return simulationStates return simulationStates
.filter( .filter(
(path): path is Types.ConveyorEventsSchema => path.type === "Conveyor" (path): path is SimulationTypes.ConveyorEventsSchema => path.type === "Conveyor"
) )
.flatMap((path) => path.points) .flatMap((path) => path.points)
.find((point) => point.uuid === selectedActionSphere.points.uuid); .find((point) => point.uuid === selectedActionSphere.points.uuid);
}, [selectedActionSphere, simulationStates]); }, [selectedActionSphere, simulationStates]);
const updateBackend = async (updatedPath: Types.ConveyorEventsSchema | undefined) => { const updateBackend = async (updatedPath: SimulationTypes.ConveyorEventsSchema | undefined) => {
if (!updatedPath) return; if (!updatedPath) 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] : "";
@ -93,7 +93,7 @@ const ConveyorMechanics: React.FC = () => {
}); });
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.ConveyorEventsSchema => (path): path is SimulationTypes.ConveyorEventsSchema =>
path.type === "Conveyor" && path.type === "Conveyor" &&
path.points.some( path.points.some(
(point) => point.uuid === selectedActionSphere.points.uuid (point) => point.uuid === selectedActionSphere.points.uuid
@ -126,7 +126,7 @@ const ConveyorMechanics: React.FC = () => {
); );
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.ConveyorEventsSchema => (path): path is SimulationTypes.ConveyorEventsSchema =>
path.type === "Conveyor" && path.type === "Conveyor" &&
path.points.some( path.points.some(
(point) => point.uuid === selectedActionSphere.points.uuid (point) => point.uuid === selectedActionSphere.points.uuid
@ -174,7 +174,7 @@ const ConveyorMechanics: React.FC = () => {
); );
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.ConveyorEventsSchema => (path): path is SimulationTypes.ConveyorEventsSchema =>
path.type === "Conveyor" && path.type === "Conveyor" &&
path.points.some( path.points.some(
(point) => point.uuid === selectedActionSphere.points.uuid (point) => point.uuid === selectedActionSphere.points.uuid
@ -188,7 +188,7 @@ const ConveyorMechanics: React.FC = () => {
if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) { if (selectedItem?.type === "action" && selectedItem.item.uuid === uuid) {
const updatedAction = updatedPaths const updatedAction = updatedPaths
.filter( .filter(
(path): path is Types.ConveyorEventsSchema => path.type === "Conveyor" (path): path is SimulationTypes.ConveyorEventsSchema => path.type === "Conveyor"
) )
.flatMap((path) => path.points) .flatMap((path) => path.points)
.find((p) => p.uuid === selectedActionSphere.points.uuid) .find((p) => p.uuid === selectedActionSphere.points.uuid)
@ -229,7 +229,7 @@ const ConveyorMechanics: React.FC = () => {
); );
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.ConveyorEventsSchema => (path): path is SimulationTypes.ConveyorEventsSchema =>
path.type === "Conveyor" && path.type === "Conveyor" &&
path.points.some( path.points.some(
(point) => point.uuid === selectedActionSphere.points.uuid (point) => point.uuid === selectedActionSphere.points.uuid
@ -273,7 +273,7 @@ const ConveyorMechanics: React.FC = () => {
); );
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.ConveyorEventsSchema => (path): path is SimulationTypes.ConveyorEventsSchema =>
path.type === "Conveyor" && path.type === "Conveyor" &&
path.points.some( path.points.some(
(point) => point.uuid === selectedActionSphere.points.uuid (point) => point.uuid === selectedActionSphere.points.uuid
@ -311,7 +311,7 @@ const ConveyorMechanics: React.FC = () => {
); );
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.ConveyorEventsSchema => (path): path is SimulationTypes.ConveyorEventsSchema =>
path.type === "Conveyor" && path.type === "Conveyor" &&
path.points.some( path.points.some(
(point) => point.uuid === selectedActionSphere.points.uuid (point) => point.uuid === selectedActionSphere.points.uuid
@ -330,7 +330,7 @@ const ConveyorMechanics: React.FC = () => {
); );
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.ConveyorEventsSchema => (path): path is SimulationTypes.ConveyorEventsSchema =>
path.type === "Conveyor" && path.type === "Conveyor" &&
path.modeluuid === selectedPath.path.modeluuid path.modeluuid === selectedPath.path.modeluuid
); );
@ -367,7 +367,7 @@ const ConveyorMechanics: React.FC = () => {
); );
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.ConveyorEventsSchema => (path): path is SimulationTypes.ConveyorEventsSchema =>
path.type === "Conveyor" && path.type === "Conveyor" &&
path.points.some( path.points.some(
(point) => point.uuid === selectedActionSphere.points.uuid (point) => point.uuid === selectedActionSphere.points.uuid
@ -400,7 +400,7 @@ const ConveyorMechanics: React.FC = () => {
); );
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.ConveyorEventsSchema => (path): path is SimulationTypes.ConveyorEventsSchema =>
path.type === "Conveyor" && path.type === "Conveyor" &&
path.points.some( path.points.some(
(point) => point.uuid === selectedActionSphere.points.uuid (point) => point.uuid === selectedActionSphere.points.uuid
@ -435,7 +435,7 @@ const ConveyorMechanics: React.FC = () => {
); );
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.ConveyorEventsSchema => (path): path is SimulationTypes.ConveyorEventsSchema =>
path.type === "Conveyor" && path.type === "Conveyor" &&
path.points.some( path.points.some(
(point) => point.uuid === selectedActionSphere.points.uuid (point) => point.uuid === selectedActionSphere.points.uuid
@ -479,7 +479,7 @@ const ConveyorMechanics: React.FC = () => {
); );
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.ConveyorEventsSchema => (path): path is SimulationTypes.ConveyorEventsSchema =>
path.type === "Conveyor" && path.type === "Conveyor" &&
path.points.some( path.points.some(
(point) => point.uuid === selectedActionSphere.points.uuid (point) => point.uuid === selectedActionSphere.points.uuid
@ -525,7 +525,7 @@ const ConveyorMechanics: React.FC = () => {
); );
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.ConveyorEventsSchema => (path): path is SimulationTypes.ConveyorEventsSchema =>
path.type === "Conveyor" && path.type === "Conveyor" &&
path.points.some( path.points.some(
(point) => point.uuid === selectedActionSphere.points.uuid (point) => point.uuid === selectedActionSphere.points.uuid
@ -571,7 +571,7 @@ const ConveyorMechanics: React.FC = () => {
); );
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.ConveyorEventsSchema => (path): path is SimulationTypes.ConveyorEventsSchema =>
path.type === "Conveyor" && path.type === "Conveyor" &&
path.points.some( path.points.some(
(point) => point.uuid === selectedActionSphere.points.uuid (point) => point.uuid === selectedActionSphere.points.uuid

14
app/src/components/layout/sidebarRight/mechanics/StaticMachineMechanics.tsx
View File

@ -2,7 +2,7 @@ import React, { useRef, useMemo, useCallback } from "react";
import { InfoIcon } from "../../../icons/ExportCommonIcons"; import { InfoIcon } from "../../../icons/ExportCommonIcons";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown"; import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import { useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store"; import { useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store";
import * as Types from '../../../../types/world/worldTypes'; import * as SimulationTypes from '../../../../types/simulation';
import LabledDropdown from "../../../ui/inputs/LabledDropdown"; import LabledDropdown from "../../../ui/inputs/LabledDropdown";
import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt"; import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
@ -17,7 +17,7 @@ const StaticMachineMechanics: React.FC = () => {
if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null, connectedPointUuids: [] }; if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null, connectedPointUuids: [] };
const staticMachinePaths = simulationStates.filter( const staticMachinePaths = simulationStates.filter(
(path): path is Types.StaticMachineEventsSchema => path.type === "StaticMachine" (path): path is SimulationTypes.StaticMachineEventsSchema => path.type === "StaticMachine"
); );
const points = staticMachinePaths.find( const points = staticMachinePaths.find(
@ -39,7 +39,7 @@ const StaticMachineMechanics: React.FC = () => {
}; };
}, [selectedActionSphere, simulationStates]); }, [selectedActionSphere, simulationStates]);
const updateBackend = async (updatedPath: Types.StaticMachineEventsSchema | undefined) => { const updateBackend = async (updatedPath: SimulationTypes.StaticMachineEventsSchema | undefined) => {
if (!updatedPath) return; if (!updatedPath) 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] : "";
@ -59,7 +59,7 @@ const StaticMachineMechanics: React.FC = () => {
socket.emit('v2:model-asset:updateEventData', data); socket.emit('v2:model-asset:updateEventData', data);
} }
const handleActionUpdate = useCallback((updatedAction: Partial<Types.StaticMachineEventsSchema['points']['actions']>) => { const handleActionUpdate = useCallback((updatedAction: Partial<SimulationTypes.StaticMachineEventsSchema['points']['actions']>) => {
if (!selectedActionSphere?.points?.uuid) return; if (!selectedActionSphere?.points?.uuid) return;
const updatedPaths = simulationStates.map((path) => { const updatedPaths = simulationStates.map((path) => {
@ -79,7 +79,7 @@ const StaticMachineMechanics: React.FC = () => {
}); });
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.StaticMachineEventsSchema => (path): path is SimulationTypes.StaticMachineEventsSchema =>
path.type === "StaticMachine" && path.type === "StaticMachine" &&
path.points.uuid === selectedActionSphere.points.uuid path.points.uuid === selectedActionSphere.points.uuid
); );
@ -96,7 +96,7 @@ const StaticMachineMechanics: React.FC = () => {
handleActionUpdate({ material }); handleActionUpdate({ material });
}, [handleActionUpdate]); }, [handleActionUpdate]);
const handleTriggerChange = useCallback((updatedTrigger: Partial<Types.StaticMachineEventsSchema['points']['triggers']>) => { const handleTriggerChange = useCallback((updatedTrigger: Partial<SimulationTypes.StaticMachineEventsSchema['points']['triggers']>) => {
if (!selectedActionSphere?.points?.uuid) return; if (!selectedActionSphere?.points?.uuid) return;
const updatedPaths = simulationStates.map((path) => { const updatedPaths = simulationStates.map((path) => {
@ -116,7 +116,7 @@ const StaticMachineMechanics: React.FC = () => {
}); });
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.StaticMachineEventsSchema => (path): path is SimulationTypes.StaticMachineEventsSchema =>
path.type === "StaticMachine" && path.type === "StaticMachine" &&
path.points.uuid === selectedActionSphere.points.uuid path.points.uuid === selectedActionSphere.points.uuid
); );

14
app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx
View File

@ -2,7 +2,7 @@ import React, { useRef, useMemo } from "react";
import { InfoIcon } from "../../../icons/ExportCommonIcons"; import { InfoIcon } from "../../../icons/ExportCommonIcons";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown"; import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import { useEditingPoint, useEyeDropMode, usePreviewPosition, useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store"; import { useEditingPoint, useEyeDropMode, usePreviewPosition, useSelectedActionSphere, useSimulationStates, useSocketStore } from "../../../../store/store";
import * as Types from '../../../../types/world/worldTypes'; import * as SimulationTypes from '../../../../types/simulation';
import PositionInput from "../customInput/PositionInputs"; import PositionInput from "../customInput/PositionInputs";
import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt"; import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";
import LabeledButton from "../../../ui/inputs/LabledButton"; import LabeledButton from "../../../ui/inputs/LabledButton";
@ -21,7 +21,7 @@ const VehicleMechanics: React.FC = () => {
if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null, connectedPointUuids: [] }; if (!selectedActionSphere?.points?.uuid) return { selectedPoint: null, connectedPointUuids: [] };
const vehiclePaths = simulationStates.filter( const vehiclePaths = simulationStates.filter(
(path): path is Types.VehicleEventsSchema => path.type === "Vehicle" (path): path is SimulationTypes.VehicleEventsSchema => path.type === "Vehicle"
); );
const points = vehiclePaths.find( const points = vehiclePaths.find(
@ -43,7 +43,7 @@ const VehicleMechanics: React.FC = () => {
}; };
}, [selectedActionSphere, simulationStates]); }, [selectedActionSphere, simulationStates]);
const updateBackend = async (updatedPath: Types.VehicleEventsSchema | undefined) => { const updateBackend = async (updatedPath: SimulationTypes.VehicleEventsSchema | undefined) => {
if (!updatedPath) return; if (!updatedPath) 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] : "";
@ -64,7 +64,7 @@ const VehicleMechanics: React.FC = () => {
} }
const handleActionUpdate = React.useCallback((updatedAction: Partial<Types.VehicleEventsSchema['points']['actions']>) => { const handleActionUpdate = React.useCallback((updatedAction: Partial<SimulationTypes.VehicleEventsSchema['points']['actions']>) => {
if (!selectedActionSphere?.points?.uuid) return; if (!selectedActionSphere?.points?.uuid) return;
const updatedPaths = simulationStates.map((path) => { const updatedPaths = simulationStates.map((path) => {
@ -84,7 +84,7 @@ const VehicleMechanics: React.FC = () => {
}); });
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.VehicleEventsSchema => (path): path is SimulationTypes.VehicleEventsSchema =>
path.type === "Vehicle" && path.type === "Vehicle" &&
path.points.uuid === selectedActionSphere.points.uuid path.points.uuid === selectedActionSphere.points.uuid
); );
@ -118,7 +118,7 @@ const VehicleMechanics: React.FC = () => {
}); });
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.VehicleEventsSchema => (path): path is SimulationTypes.VehicleEventsSchema =>
path.type === "Vehicle" && path.type === "Vehicle" &&
path.points.uuid === selectedActionSphere.points.uuid path.points.uuid === selectedActionSphere.points.uuid
); );
@ -145,7 +145,7 @@ const VehicleMechanics: React.FC = () => {
}); });
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path): path is Types.VehicleEventsSchema => (path): path is SimulationTypes.VehicleEventsSchema =>
path.type === "Vehicle" && path.type === "Vehicle" &&
path.points.uuid === selectedActionSphere.points.uuid path.points.uuid === selectedActionSphere.points.uuid
); );

6
app/src/components/ui/inputs/MultiLevelDropDown.tsx
View File

@ -258,7 +258,11 @@ const MultiLevelDropdown = ({
</button> </button>
{open && ( {open && (
<div className="dropdown-menu"> <div className="dropdown-menu">
<div className="dropdown-content"> <div className="dropdown-content ">
{/* loading list */}
{/* <div className="loading" /> */}
{/* Unselect Option */} {/* Unselect Option */}
<DropdownItem label="Unselect" onClick={handleItemUnselect} /> <DropdownItem label="Unselect" onClick={handleItemUnselect} />
{/* Nested Dropdown Items */} {/* Nested Dropdown Items */}

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

@ -5,6 +5,7 @@ import { toast } from 'react-toastify';
import TempLoader from './tempLoader'; import TempLoader from './tempLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import * as Types from "../../../../types/world/worldTypes"; import * as Types from "../../../../types/world/worldTypes";
import * as SimulationTypes from "../../../../types/simulation";
import { retrieveGLTF, storeGLTF } from '../../../../utils/indexDB/idbUtils'; import { retrieveGLTF, storeGLTF } from '../../../../utils/indexDB/idbUtils';
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
import { Socket } from 'socket.io-client'; import { Socket } from 'socket.io-client';
@ -136,7 +137,7 @@ async function handleModelLoad(
tempLoader.current = undefined; tempLoader.current = undefined;
} }
const newFloorItem: Types.EventData = { const newFloorItem: SimulationTypes.EventData = {
modeluuid: model.uuid, modeluuid: model.uuid,
modelname: selectedItem.name, modelname: selectedItem.name,
modelfileID: selectedItem.id, modelfileID: selectedItem.id,
@ -150,12 +151,11 @@ async function handleModelLoad(
const organization = email ? email.split("@")[1].split(".")[0] : ""; const organization = email ? email.split("@")[1].split(".")[0] : "";
getAssetEventType(selectedItem.id, organization).then(async (res) => { getAssetEventType(selectedItem.id, organization).then(async (res) => {
console.log('res: ', res);
if (res.type === "Conveyor") { if (res.type === "Conveyor") {
const pointUUIDs = res.points.map(() => THREE.MathUtils.generateUUID()); const pointUUIDs = res.points.map(() => THREE.MathUtils.generateUUID());
const backendEventData: Extract<Types.EventData['eventData'], { type: 'Conveyor' }> = { const backendEventData: Extract<SimulationTypes.EventData['eventData'], { type: 'Conveyor' }> = {
type: 'Conveyor', type: 'Conveyor',
points: res.points.map((point: any, index: number) => ({ points: res.points.map((point: any, index: number) => ({
uuid: pointUUIDs[index], uuid: pointUUIDs[index],
@ -220,9 +220,9 @@ async function handleModelLoad(
eventData.position = newFloorItem.position; eventData.position = newFloorItem.position;
eventData.rotation = [model.rotation.x, model.rotation.y, model.rotation.z]; eventData.rotation = [model.rotation.x, model.rotation.y, model.rotation.z];
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
eventData as Types.ConveyorEventsSchema eventData as SimulationTypes.ConveyorEventsSchema
]); ]);
console.log('data: ', data); console.log('data: ', data);
@ -232,7 +232,7 @@ async function handleModelLoad(
const pointUUID = THREE.MathUtils.generateUUID(); const pointUUID = THREE.MathUtils.generateUUID();
const backendEventData: Extract<Types.EventData['eventData'], { type: 'Vehicle' }> = { const backendEventData: Extract<SimulationTypes.EventData['eventData'], { type: 'Vehicle' }> = {
type: "Vehicle", type: "Vehicle",
points: { points: {
uuid: pointUUID, uuid: pointUUID,
@ -284,9 +284,9 @@ async function handleModelLoad(
return updatedItems; return updatedItems;
}); });
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
eventData as Types.VehicleEventsSchema eventData as SimulationTypes.VehicleEventsSchema
]); ]);
socket.emit("v2:model-asset:add", data); socket.emit("v2:model-asset:add", data);
@ -295,7 +295,7 @@ async function handleModelLoad(
const pointUUID = THREE.MathUtils.generateUUID(); const pointUUID = THREE.MathUtils.generateUUID();
const backendEventData: Extract<Types.EventData['eventData'], { type: 'StaticMachine' }> = { const backendEventData: Extract<SimulationTypes.EventData['eventData'], { type: 'StaticMachine' }> = {
type: "StaticMachine", type: "StaticMachine",
points: { points: {
uuid: pointUUID, uuid: pointUUID,
@ -348,9 +348,9 @@ async function handleModelLoad(
return updatedItems; return updatedItems;
}); });
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
eventData as Types.StaticMachineEventsSchema eventData as SimulationTypes.StaticMachineEventsSchema
]); ]);
socket.emit("v2:model-asset:add", data); socket.emit("v2:model-asset:add", data);
@ -359,7 +359,7 @@ async function handleModelLoad(
const pointUUID = THREE.MathUtils.generateUUID(); const pointUUID = THREE.MathUtils.generateUUID();
const backendEventData: Extract<Types.EventData['eventData'], { type: 'ArmBot' }> = { const backendEventData: Extract<SimulationTypes.EventData['eventData'], { type: 'ArmBot' }> = {
type: "ArmBot", type: "ArmBot",
points: { points: {
uuid: pointUUID, uuid: pointUUID,
@ -412,9 +412,9 @@ async function handleModelLoad(
return updatedItems; return updatedItems;
}); });
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
eventData as Types.ArmBotEventsSchema eventData as SimulationTypes.ArmBotEventsSchema
]); ]);
socket.emit("v2:model-asset:add", data); socket.emit("v2:model-asset:add", data);
@ -455,7 +455,6 @@ async function handleModelLoad(
return updatedItems; return updatedItems;
}); });
console.log('data: ', data);
socket.emit("v2:model-asset:add", data); socket.emit("v2:model-asset:add", data);
} }

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

@ -2,6 +2,7 @@ import { toast } from 'react-toastify';
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 * as SimulationTypes from "../../../../types/simulation";
// import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi'; // import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi';
import { Socket } from 'socket.io-client'; import { Socket } from 'socket.io-client';
import { getFloorAssets } from '../../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi'; import { getFloorAssets } from '../../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
@ -76,7 +77,7 @@ async function DeleteFloorItems(
} }
setFloorItems(updatedItems); setFloorItems(updatedItems);
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => { setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
const updatedEvents = (prevEvents || []).filter(event => event.modeluuid !== removedItem.modeluuid); const updatedEvents = (prevEvents || []).filter(event => event.modeluuid !== removedItem.modeluuid);
return updatedEvents; return updatedEvents;
}); });

2
app/src/modules/builder/groups/floorItemsGroup.tsx
View File

@ -313,7 +313,7 @@ const FloorItemsGroup = ({ itemsGroup, hoveredDeletableFloorItem, AttachedObject
useFrame(() => { useFrame(() => {
if (controls) if (controls)
assetVisibility(itemsGroup, state.camera.position, renderDistance); // assetVisibility(itemsGroup, state.camera.position, renderDistance);
if (deleteTool && activeModule === "builder") { if (deleteTool && activeModule === "builder") {
DeletableHoveredFloorItems(state, itemsGroup, hoveredDeletableFloorItem, setDeletableFloorItem); DeletableHoveredFloorItems(state, itemsGroup, hoveredDeletableFloorItem, setDeletableFloorItem);
} else if (!deleteTool) { } else if (!deleteTool) {

7
app/src/modules/collaboration/collabCams.tsx
View File

@ -26,12 +26,7 @@ const CamModelsGroup = () => {
loader.setDRACOLoader(dracoLoader); loader.setDRACOLoader(dracoLoader);
const [cams, setCams] = useState<any[]>([]); const [cams, setCams] = useState<any[]>([]);
const [models, setModels] = useState< const [models, setModels] = useState<Record<string, { targetPosition: THREE.Vector3; targetRotation: THREE.Euler }>>({});
Record<
string,
{ targetPosition: THREE.Vector3; targetRotation: THREE.Euler }
>
>({});
const dedupeCams = (cams: any[]) => { const dedupeCams = (cams: any[]) => {
const seen = new Set(); const seen = new Set();

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

@ -5,6 +5,7 @@ import * as THREE from 'three';
import * as CONSTANTS from '../../../types/world/worldConstants'; import * as CONSTANTS from '../../../types/world/worldConstants';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import * as Types from "../../../types/world/worldTypes"; import * as Types from "../../../types/world/worldTypes";
import * as SimulationTypes from "../../..//types/simulation";
import { initializeDB, retrieveGLTF, storeGLTF } from '../../../utils/indexDB/idbUtils'; import { initializeDB, retrieveGLTF, storeGLTF } from '../../../utils/indexDB/idbUtils';
import { getCamera } from '../../../services/factoryBuilder/camera/getCameraApi'; import { getCamera } from '../../../services/factoryBuilder/camera/getCameraApi';
import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi'; import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
@ -12,7 +13,7 @@ import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAss
async function loadInitialFloorItems( async function loadInitialFloorItems(
itemsGroup: Types.RefGroup, itemsGroup: Types.RefGroup,
setFloorItems: Types.setFloorItemSetState, setFloorItems: Types.setFloorItemSetState,
setSimulationStates: (paths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => void setSimulationStates: (paths: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => void
): Promise<void> { ): Promise<void> {
if (!itemsGroup.current) return; if (!itemsGroup.current) return;
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`; let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
@ -26,7 +27,7 @@ async function loadInitialFloorItems(
if (items.message === "floorItems not found") return; if (items.message === "floorItems not found") return;
if (items) { if (items) {
const storedFloorItems: Types.EventData[] = items; const storedFloorItems: SimulationTypes.EventData[] = items;
const loader = new GLTFLoader(); const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader(); const dracoLoader = new DRACOLoader();
@ -150,10 +151,10 @@ async function loadInitialFloorItems(
function processLoadedModel( function processLoadedModel(
gltf: any, gltf: any,
item: Types.EventData, item: SimulationTypes.EventData,
itemsGroup: Types.RefGroup, itemsGroup: Types.RefGroup,
setFloorItems: Types.setFloorItemSetState, setFloorItems: Types.setFloorItemSetState,
setSimulationStates: (paths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => void setSimulationStates: (paths: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => void
) { ) {
const model = gltf; const model = gltf;
model.uuid = item.modeluuid; model.uuid = item.modeluuid;
@ -196,7 +197,7 @@ function processLoadedModel(
gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: 'power2.out' }); gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: 'power2.out' });
} }
function processEventData(item: Types.EventData, setSimulationStates: any) { function processEventData(item: SimulationTypes.EventData, setSimulationStates: any) {
if (item.eventData?.type === 'Conveyor') { if (item.eventData?.type === 'Conveyor') {
@ -206,9 +207,9 @@ function processEventData(item: Types.EventData, setSimulationStates: any) {
data.position = item.position; data.position = item.position;
data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z]; data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z];
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
data as Types.ConveyorEventsSchema data as SimulationTypes.ConveyorEventsSchema
]); ]);
} else if (item.eventData?.type === 'Vehicle') { } else if (item.eventData?.type === 'Vehicle') {
@ -219,22 +220,23 @@ function processEventData(item: Types.EventData, setSimulationStates: any) {
data.position = item.position; data.position = item.position;
data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z]; data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z];
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
data as Types.VehicleEventsSchema data as SimulationTypes.VehicleEventsSchema
]); ]);
} else if (item.eventData?.type === 'StaticMachine') { } else if (item.eventData?.type === 'StaticMachine') {
const data: any = item.eventData; const data: any = item.eventData;
item.eventData.points.position = [0, 1.5, 1]
data.modeluuid = item.modeluuid; data.modeluuid = item.modeluuid;
data.modelName = item.modelname; data.modelName = item.modelname;
data.position = item.position; data.position = item.position;
data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z]; data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z];
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
data as Types.StaticMachineEventsSchema data as SimulationTypes.StaticMachineEventsSchema
]); ]);
} else if (item.eventData?.type === 'ArmBot') { } else if (item.eventData?.type === 'ArmBot') {
@ -245,9 +247,9 @@ function processEventData(item: Types.EventData, setSimulationStates: any) {
data.position = item.position; data.position = item.position;
data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z]; data.rotation = [item.rotation.x, item.rotation.y, item.rotation.z];
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
data as Types.ArmBotEventsSchema data as SimulationTypes.ArmBotEventsSchema
]); ]);
} }

37
app/src/modules/scene/controls/selection/copyPasteControls.tsx
View File

@ -5,6 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore,
import { toast } from "react-toastify"; import { toast } from "react-toastify";
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
import * as Types from "../../../../types/world/worldTypes"; import * as Types from "../../../../types/world/worldTypes";
import * as SimulationTypes from "../../../../types/simulation";
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys"; import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, selectionGroup, setDuplicatedObjects, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) => { const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, selectionGroup, setDuplicatedObjects, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) => {
@ -154,7 +155,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
return updatedItems; return updatedItems;
}); });
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid); let eventData: SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.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";
@ -162,7 +163,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
if (eventData.type === 'Conveyor' && eventData) { if (eventData.type === 'Conveyor' && eventData) {
const createConveyorPoint = (index: number) => { const createConveyorPoint = (index: number) => {
const pointUUID = THREE.MathUtils.generateUUID(); const pointUUID = THREE.MathUtils.generateUUID();
const hasActions = (eventData as Types.ConveyorEventsSchema)?.points[index].actions.length > 0; const hasActions = (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].actions.length > 0;
const defaultAction = { const defaultAction = {
uuid: THREE.MathUtils.generateUUID(), uuid: THREE.MathUtils.generateUUID(),
@ -176,15 +177,15 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
return { return {
uuid: pointUUID, uuid: pointUUID,
position: (eventData as Types.ConveyorEventsSchema)?.points[index].position, position: (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].position,
rotation: (eventData as Types.ConveyorEventsSchema)?.points[index].rotation, rotation: (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].rotation,
actions: hasActions actions: hasActions
? (eventData as Types.ConveyorEventsSchema)?.points[index].actions.map(action => ({ ? (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].actions.map(action => ({
...action, ...action,
uuid: THREE.MathUtils.generateUUID() uuid: THREE.MathUtils.generateUUID()
})) }))
: [defaultAction], : [defaultAction],
triggers: (eventData as Types.ConveyorEventsSchema)?.points[index].triggers.map(trigger => ({ triggers: (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].triggers.map(trigger => ({
...trigger, ...trigger,
uuid: THREE.MathUtils.generateUUID() uuid: THREE.MathUtils.generateUUID()
})), })),
@ -202,7 +203,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
createConveyorPoint(1), // middlePoint createConveyorPoint(1), // middlePoint
createConveyorPoint(2) // point2 createConveyorPoint(2) // point2
], ],
speed: (eventData as Types.ConveyorEventsSchema)?.speed speed: (eventData as SimulationTypes.ConveyorEventsSchema)?.speed
}; };
//REST //REST
@ -240,9 +241,9 @@ 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 | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
newEventData as Types.ConveyorEventsSchema newEventData as SimulationTypes.ConveyorEventsSchema
]); ]);
socket.emit("v2:model-asset:add", data); socket.emit("v2:model-asset:add", data);
@ -250,7 +251,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
} else if (eventData.type === 'Vehicle' && eventData) { } else if (eventData.type === 'Vehicle' && eventData) {
const createVehiclePoint = () => { const createVehiclePoint = () => {
const pointUUID = THREE.MathUtils.generateUUID(); const pointUUID = THREE.MathUtils.generateUUID();
const vehiclePoint = (eventData as Types.VehicleEventsSchema)?.points; const vehiclePoint = (eventData as SimulationTypes.VehicleEventsSchema)?.points;
const hasActions = vehiclePoint?.actions !== undefined; const hasActions = vehiclePoint?.actions !== undefined;
const defaultAction = { const defaultAction = {
@ -321,9 +322,9 @@ 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 | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
newEventData as Types.VehicleEventsSchema newEventData as SimulationTypes.VehicleEventsSchema
]); ]);
socket.emit("v2:model-asset:add", data); socket.emit("v2:model-asset:add", data);
@ -331,7 +332,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
} else if (eventData.type === 'StaticMachine' && eventData) { } else if (eventData.type === 'StaticMachine' && eventData) {
const createStaticMachinePoint = () => { const createStaticMachinePoint = () => {
const pointUUID = THREE.MathUtils.generateUUID(); const pointUUID = THREE.MathUtils.generateUUID();
const vehiclePoint = (eventData as Types.StaticMachineEventsSchema)?.points; const vehiclePoint = (eventData as SimulationTypes.StaticMachineEventsSchema)?.points;
const hasActions = vehiclePoint?.actions !== undefined; const hasActions = vehiclePoint?.actions !== undefined;
const defaultAction = { const defaultAction = {
@ -399,9 +400,9 @@ 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 | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
newEventData as Types.StaticMachineEventsSchema newEventData as SimulationTypes.StaticMachineEventsSchema
]); ]);
socket.emit("v2:model-asset:add", data); socket.emit("v2:model-asset:add", data);
@ -409,7 +410,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
} else if (eventData.type === 'ArmBot' && eventData) { } else if (eventData.type === 'ArmBot' && eventData) {
const createArmBotPoint = () => { const createArmBotPoint = () => {
const pointUUID = THREE.MathUtils.generateUUID(); const pointUUID = THREE.MathUtils.generateUUID();
const vehiclePoint = (eventData as Types.ArmBotEventsSchema)?.points; const vehiclePoint = (eventData as SimulationTypes.ArmBotEventsSchema)?.points;
const hasActions = vehiclePoint?.actions !== undefined; const hasActions = vehiclePoint?.actions !== undefined;
const defaultAction = { const defaultAction = {
@ -481,9 +482,9 @@ 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 | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
newEventData as Types.ArmBotEventsSchema newEventData as SimulationTypes.ArmBotEventsSchema
]); ]);
socket.emit("v2:model-asset:add", data); socket.emit("v2:model-asset:add", data);

45
app/src/modules/scene/controls/selection/duplicationControls.tsx
View File

@ -5,6 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore,
import { toast } from "react-toastify"; import { toast } from "react-toastify";
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
import * as Types from "../../../../types/world/worldTypes"; import * as Types from "../../../../types/world/worldTypes";
import * as SimulationTypes from "../../../../types/simulation";
import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi"; import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys"; import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
@ -40,11 +41,11 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
}; };
const onKeyDown = (event: KeyboardEvent) => { const onKeyDown = (event: KeyboardEvent) => {
const keyCombination = detectModifierKeys(event); const keyCombination = detectModifierKeys(event);
if (keyCombination === "Ctrl+D" && selectedAssets.length > 0 && duplicatedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) { if (keyCombination === "Ctrl+D" && selectedAssets.length > 0 && duplicatedObjects.length === 0 && movedObjects.length === 0 && rotatedObjects.length === 0) {
duplicateSelection(); duplicateSelection();
} }
}; };
if (!toggleView) { if (!toggleView) {
@ -132,7 +133,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
return updatedItems; return updatedItems;
}); });
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid); let eventData: SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.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";
@ -141,7 +142,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
if (eventData.type === 'Conveyor' && eventData) { if (eventData.type === 'Conveyor' && eventData) {
const createConveyorPoint = (index: number) => { const createConveyorPoint = (index: number) => {
const pointUUID = THREE.MathUtils.generateUUID(); const pointUUID = THREE.MathUtils.generateUUID();
const hasActions = (eventData as Types.ConveyorEventsSchema)?.points[index].actions.length > 0; const hasActions = (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].actions.length > 0;
const defaultAction = { const defaultAction = {
uuid: THREE.MathUtils.generateUUID(), uuid: THREE.MathUtils.generateUUID(),
@ -155,15 +156,15 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
return { return {
uuid: pointUUID, uuid: pointUUID,
position: (eventData as Types.ConveyorEventsSchema)?.points[index].position, position: (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].position,
rotation: (eventData as Types.ConveyorEventsSchema)?.points[index].rotation, rotation: (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].rotation,
actions: hasActions actions: hasActions
? (eventData as Types.ConveyorEventsSchema)?.points[index].actions.map(action => ({ ? (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].actions.map(action => ({
...action, ...action,
uuid: THREE.MathUtils.generateUUID() uuid: THREE.MathUtils.generateUUID()
})) }))
: [defaultAction], : [defaultAction],
triggers: (eventData as Types.ConveyorEventsSchema)?.points[index].triggers.map(trigger => ({ triggers: (eventData as SimulationTypes.ConveyorEventsSchema)?.points[index].triggers.map(trigger => ({
...trigger, ...trigger,
uuid: THREE.MathUtils.generateUUID() uuid: THREE.MathUtils.generateUUID()
})), })),
@ -181,7 +182,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
createConveyorPoint(1), createConveyorPoint(1),
createConveyorPoint(2) createConveyorPoint(2)
], ],
speed: (eventData as Types.ConveyorEventsSchema)?.speed speed: (eventData as SimulationTypes.ConveyorEventsSchema)?.speed
}; };
//REST //REST
@ -219,9 +220,9 @@ 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 | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
newEventData as Types.ConveyorEventsSchema newEventData as SimulationTypes.ConveyorEventsSchema
]); ]);
socket.emit("v2:model-asset:add", data); socket.emit("v2:model-asset:add", data);
@ -229,7 +230,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
} else if (eventData.type === 'Vehicle' && eventData) { } else if (eventData.type === 'Vehicle' && eventData) {
const createVehiclePoint = () => { const createVehiclePoint = () => {
const pointUUID = THREE.MathUtils.generateUUID(); const pointUUID = THREE.MathUtils.generateUUID();
const vehiclePoint = (eventData as Types.VehicleEventsSchema)?.points; const vehiclePoint = (eventData as SimulationTypes.VehicleEventsSchema)?.points;
const hasActions = vehiclePoint?.actions !== undefined; const hasActions = vehiclePoint?.actions !== undefined;
const defaultAction = { const defaultAction = {
@ -300,9 +301,9 @@ 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 | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
newEventData as Types.VehicleEventsSchema newEventData as SimulationTypes.VehicleEventsSchema
]); ]);
socket.emit("v2:model-asset:add", data); socket.emit("v2:model-asset:add", data);
@ -310,7 +311,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
} else if (eventData.type === 'StaticMachine' && eventData) { } else if (eventData.type === 'StaticMachine' && eventData) {
const createStaticMachinePoint = () => { const createStaticMachinePoint = () => {
const pointUUID = THREE.MathUtils.generateUUID(); const pointUUID = THREE.MathUtils.generateUUID();
const vehiclePoint = (eventData as Types.StaticMachineEventsSchema)?.points; const vehiclePoint = (eventData as SimulationTypes.StaticMachineEventsSchema)?.points;
const hasActions = vehiclePoint?.actions !== undefined; const hasActions = vehiclePoint?.actions !== undefined;
const defaultAction = { const defaultAction = {
@ -378,9 +379,9 @@ 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 | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
newEventData as Types.StaticMachineEventsSchema newEventData as SimulationTypes.StaticMachineEventsSchema
]); ]);
socket.emit("v2:model-asset:add", data); socket.emit("v2:model-asset:add", data);
@ -388,7 +389,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
} else if (eventData.type === 'ArmBot' && eventData) { } else if (eventData.type === 'ArmBot' && eventData) {
const createArmBotPoint = () => { const createArmBotPoint = () => {
const pointUUID = THREE.MathUtils.generateUUID(); const pointUUID = THREE.MathUtils.generateUUID();
const vehiclePoint = (eventData as Types.ArmBotEventsSchema)?.points; const vehiclePoint = (eventData as SimulationTypes.ArmBotEventsSchema)?.points;
const hasActions = vehiclePoint?.actions !== undefined; const hasActions = vehiclePoint?.actions !== undefined;
const defaultAction = { const defaultAction = {
@ -460,9 +461,9 @@ 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 | Types.ArmBotEventsSchema)[]) => [ setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => [
...(prevEvents || []), ...(prevEvents || []),
newEventData as Types.ArmBotEventsSchema newEventData as SimulationTypes.ArmBotEventsSchema
]); ]);
socket.emit("v2:model-asset:add", data); socket.emit("v2:model-asset:add", data);

13
app/src/modules/scene/controls/selection/moveControls.tsx
View File

@ -5,6 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore,
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import * as Types from "../../../../types/world/worldTypes"; import * as Types from "../../../../types/world/worldTypes";
import * as SimulationTypes from "../../../../types/simulation";
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys"; import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) { function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) {
@ -183,7 +184,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
return updatedItems; return updatedItems;
}); });
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid); let eventData: SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.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";
@ -194,7 +195,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
const backendEventData = { const backendEventData = {
type: 'Conveyor', type: 'Conveyor',
points: eventData.points, points: eventData.points,
speed: (eventData as Types.ConveyorEventsSchema)?.speed speed: (eventData as SimulationTypes.ConveyorEventsSchema)?.speed
}; };
//REST //REST
@ -232,7 +233,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 | Types.ArmBotEventsSchema)[]) => { setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
const updatedEvents = (prevEvents || []).map(event => const updatedEvents = (prevEvents || []).map(event =>
event.modeluuid === newFloorItem.modeluuid event.modeluuid === newFloorItem.modeluuid
? { ...event, ...newEventData } ? { ...event, ...newEventData }
@ -284,7 +285,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 | Types.ArmBotEventsSchema)[]) => { setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
const updatedEvents = (prevEvents || []).map(event => const updatedEvents = (prevEvents || []).map(event =>
event.modeluuid === newFloorItem.modeluuid event.modeluuid === newFloorItem.modeluuid
? { ...event, ...newEventData } ? { ...event, ...newEventData }
@ -337,7 +338,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 | Types.ArmBotEventsSchema)[]) => { setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
const updatedEvents = (prevEvents || []).map(event => const updatedEvents = (prevEvents || []).map(event =>
event.modeluuid === newFloorItem.modeluuid event.modeluuid === newFloorItem.modeluuid
? { ...event, ...newEventData } ? { ...event, ...newEventData }
@ -390,7 +391,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 | Types.ArmBotEventsSchema)[]) => { setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
const updatedEvents = (prevEvents || []).map(event => const updatedEvents = (prevEvents || []).map(event =>
event.modeluuid === newFloorItem.modeluuid event.modeluuid === newFloorItem.modeluuid
? { ...event, ...newEventData } ? { ...event, ...newEventData }

13
app/src/modules/scene/controls/selection/rotateControls.tsx
View File

@ -5,6 +5,7 @@ import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore,
// import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi'; // import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import * as Types from "../../../../types/world/worldTypes"; import * as Types from "../../../../types/world/worldTypes";
import * as SimulationTypes from "../../../../types/simulation";
import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi"; import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, boundingBoxRef }: any) { function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, boundingBoxRef }: any) {
@ -184,7 +185,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
return updatedItems; return updatedItems;
}); });
let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid); let eventData: SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.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";
@ -195,7 +196,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
const backendEventData = { const backendEventData = {
type: 'Conveyor', type: 'Conveyor',
points: eventData.points, points: eventData.points,
speed: (eventData as Types.ConveyorEventsSchema)?.speed speed: (eventData as SimulationTypes.ConveyorEventsSchema)?.speed
}; };
// REST // REST
@ -233,7 +234,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
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 | Types.ArmBotEventsSchema)[]) => { setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
const updatedEvents = (prevEvents || []).map(event => const updatedEvents = (prevEvents || []).map(event =>
event.modeluuid === newFloorItem.modeluuid event.modeluuid === newFloorItem.modeluuid
? { ...event, ...newEventData } ? { ...event, ...newEventData }
@ -286,7 +287,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
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 | Types.ArmBotEventsSchema)[]) => { setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
const updatedEvents = (prevEvents || []).map(event => const updatedEvents = (prevEvents || []).map(event =>
event.modeluuid === newFloorItem.modeluuid event.modeluuid === newFloorItem.modeluuid
? { ...event, ...newEventData } ? { ...event, ...newEventData }
@ -339,7 +340,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
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 | Types.ArmBotEventsSchema)[]) => { setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
const updatedEvents = (prevEvents || []).map(event => const updatedEvents = (prevEvents || []).map(event =>
event.modeluuid === newFloorItem.modeluuid event.modeluuid === newFloorItem.modeluuid
? { ...event, ...newEventData } ? { ...event, ...newEventData }
@ -392,7 +393,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
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 | Types.ArmBotEventsSchema)[]) => { setSimulationStates((prevEvents: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
const updatedEvents = (prevEvents || []).map(event => const updatedEvents = (prevEvents || []).map(event =>
event.modeluuid === newFloorItem.modeluuid event.modeluuid === newFloorItem.modeluuid
? { ...event, ...newEventData } ? { ...event, ...newEventData }

405
app/src/modules/scene/controls/selection/selectionControls.tsx
View File

@ -3,11 +3,12 @@ import { useEffect, useMemo, useRef, useState } from "react";
import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox"; import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox";
import { SelectionHelper } from "./selectionHelper"; import { SelectionHelper } from "./selectionHelper";
import { useFrame, useThree } from "@react-three/fiber"; import { useFrame, useThree } from "@react-three/fiber";
import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore, useToggleView } from "../../../../store/store"; import { useFloorItems, useSelectedAssets, useSimulationStates, useSocketStore, useToggleView, } from "../../../../store/store";
import BoundingBox from "./boundingBoxHelper"; import BoundingBox from "./boundingBoxHelper";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
// import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi'; // import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi';
import * as Types from "../../../../types/world/worldTypes"; import * as Types from "../../../../types/world/worldTypes";
import * as SimulationTypes from "../../../../types/simulation";
import DuplicationControls from "./duplicationControls"; import DuplicationControls from "./duplicationControls";
import CopyPasteControls from "./copyPasteControls"; import CopyPasteControls from "./copyPasteControls";
@ -20,7 +21,7 @@ const SelectionControls: React.FC = () => {
const itemsGroupRef = useRef<THREE.Group | undefined>(undefined); const itemsGroupRef = useRef<THREE.Group | undefined>(undefined);
const selectionGroup = useRef() as Types.RefGroup; const selectionGroup = useRef() as Types.RefGroup;
const { toggleView } = useToggleView(); const { toggleView } = useToggleView();
const { setSimulationStates } = useSimulationStates(); const { simulationStates, setSimulationStates } = useSimulationStates();
const { selectedAssets, setSelectedAssets } = useSelectedAssets(); const { selectedAssets, setSelectedAssets } = useSelectedAssets();
const [movedObjects, setMovedObjects] = useState<THREE.Object3D[]>([]); const [movedObjects, setMovedObjects] = useState<THREE.Object3D[]>([]);
const [rotatedObjects, setRotatedObjects] = useState<THREE.Object3D[]>([]); const [rotatedObjects, setRotatedObjects] = useState<THREE.Object3D[]>([]);
@ -112,7 +113,6 @@ const SelectionControls: React.FC = () => {
} }
}; };
const onContextMenu = (event: MouseEvent) => { const onContextMenu = (event: MouseEvent) => {
event.preventDefault(); event.preventDefault();
if (!rightClickMoved) { if (!rightClickMoved) {
@ -146,7 +146,7 @@ const SelectionControls: React.FC = () => {
helper.enabled = false; helper.enabled = false;
helper.dispose(); helper.dispose();
}; };
}, [camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, socket, floorItems, rotatedObjects, activeModule]); }, [camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, socket, floorItems, rotatedObjects, activeModule,]);
useEffect(() => { useEffect(() => {
if (activeModule !== "builder") { if (activeModule !== "builder") {
@ -176,7 +176,7 @@ const SelectionControls: React.FC = () => {
} }
currentObject = currentObject.parent || null; currentObject = currentObject.parent || null;
} }
}) });
if (Objects.size === 0) { if (Objects.size === 0) {
clearSelection(); clearSelection();
@ -184,9 +184,7 @@ const SelectionControls: React.FC = () => {
} }
const updatedSelections = new Set(selectedAssets); const updatedSelections = new Set(selectedAssets);
Objects.forEach((obj) => { Objects.forEach((obj) => { updatedSelections.has(obj) ? updatedSelections.delete(obj) : updatedSelections.add(obj); });
updatedSelections.has(obj) ? updatedSelections.delete(obj) : updatedSelections.add(obj);
});
const selected = Array.from(updatedSelections); const selected = Array.from(updatedSelections);
@ -200,21 +198,328 @@ const SelectionControls: React.FC = () => {
setpastedObjects([]); setpastedObjects([]);
setDuplicatedObjects([]); setDuplicatedObjects([]);
setSelectedAssets([]); setSelectedAssets([]);
} };
const updateBackend = async (updatedPaths: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
if (updatedPaths.length === 0) return;
const email = localStorage.getItem("email");
const organization = email ? email.split("@")[1].split(".")[0] : "";
updatedPaths.forEach(async (updatedPath) => {
if (updatedPath.type === "Conveyor") {
// await setEventApi(
// organization,
// updatedPath.modeluuid,
// { type: "Conveyor", points: updatedPath.points, speed: updatedPath.speed }
// );
const data = {
organization: organization,
modeluuid: updatedPath.modeluuid,
eventData: {
type: "Conveyor",
points: updatedPath.points,
speed: updatedPath.speed,
},
};
socket.emit("v2:model-asset:updateEventData", data);
} else if (updatedPath.type === "Vehicle") {
// await setEventApi(
// organization,
// updatedPath.modeluuid,
// { type: "Vehicle", points: updatedPath.points }
// );
const data = {
organization: organization,
modeluuid: updatedPath.modeluuid,
eventData: { type: "Vehicle", points: updatedPath.points },
};
socket.emit("v2:model-asset:updateEventData", data);
} else if (updatedPath.type === "StaticMachine") {
// 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);
} else if (updatedPath.type === "ArmBot") {
// 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);
}
});
};
// const removeConnection = (modelUUID: any) => {
//
// const removedPath = simulationStates?.flatMap((state) => {
// let shouldInclude = false;
// if (state.type === "Conveyor") {
// state.points.forEach((point: any) => {
// const sourceMatch =
// point.connections?.source?.modelUUID === modelUUID;
// const targetMatch = point.connections?.targets?.some(
// (target: any) => target.modelUUID === modelUUID
// );
// if (sourceMatch || targetMatch) shouldInclude = true;
// });
// }
// if (state.type === "Vehicle") {
// const targetMatch = state.points.connections?.targets?.some(
// (target: any) => target.modelUUID === modelUUID
// );
// if (targetMatch) shouldInclude = true;
// }
// if (state.type === "StaticMachine") {
// const targetMatch = state.points.connections?.targets?.some(
// (target: any) => target.modelUUID === modelUUID
// );
// if (targetMatch) shouldInclude = true;
// }
// if (state.type === "ArmBot") {
// const sourceMatch =
// state.points.connections?.source?.modelUUID === modelUUID;
// const targetMatch = state.points.connections?.targets?.some(
// (target: any) => target.modelUUID === modelUUID
// );
// const processMatch =
// state.points.actions?.processes?.some(
// (process: any) =>
// process.startPoint === modelUUID || process.endPoint === modelUUID
// ) ?? false;
// if (sourceMatch || targetMatch || processMatch) shouldInclude = true;
// }
// return shouldInclude ? [state] : [];
// });
// updateBackend(removedPath);
//
// return removedPath;
// // updateBackend(updatedPaths);
// // setSimulationStates(updatedStates);
// };
// const removeConnection = (modelUUIDs: any[]) => {
//
// const removedPath = simulationStates?.flatMap((state) => {
// let shouldInclude = false;
// if (state.type === "Conveyor") {
// state.points.forEach((point: any) => {
// const sourceMatch = modelUUIDs.includes(
// point.connections?.source?.modelUUID
// );
// const targetMatch = point.connections?.targets?.some((target: any) =>
// modelUUIDs.includes(target.modelUUID)
// );
// if (sourceMatch || targetMatch) shouldInclude = true;
// });
// }
// if (state.type === "Vehicle") {
// const targetMatch = state.points.connections?.targets?.some(
// (target: any) => modelUUIDs.includes(target.modelUUID)
// );
// if (targetMatch) shouldInclude = true;
// }
// if (state.type === "StaticMachine") {
// const targetMatch = state.points.connections?.targets?.some(
// (target: any) => modelUUIDs.includes(target.modelUUID)
// );
// if (targetMatch) shouldInclude = true;
// }
// if (state.type === "ArmBot") {
// const sourceMatch = modelUUIDs.includes(
// state.points.connections?.source?.modelUUID
// );
// const targetMatch = state.points.connections?.targets?.some(
// (target: any) => modelUUIDs.includes(target.modelUUID)
// );
// const processMatch =
// state.points.actions?.processes?.some(
// (process: any) =>
// modelUUIDs.includes(process.startPoint) ||
// modelUUIDs.includes(process.endPoint)
// ) ?? false;
// if (sourceMatch || targetMatch || processMatch) shouldInclude = true;
// }
// return shouldInclude ? [state] : [];
// });
// updateBackend(removedPath);
//
// return removedPath;
// };
const removeConnection = (modelUUIDs: any[]) => {
const removedPath = simulationStates?.flatMap((state: any) => {
let shouldInclude = false;
// Conveyor type
if (state.type === "Conveyor") {
state.points.forEach((point: any) => {
const sourceMatch = modelUUIDs.includes(point.connections?.source?.modelUUID);
const targetMatch = point.connections?.targets?.some((target: any) => modelUUIDs.includes(target.modelUUID));
if (sourceMatch) {
point.connections.source = {};
shouldInclude = true;
}
if (targetMatch) {
point.connections.targets = [];
shouldInclude = true;
}
});
}
// Vehicle & StaticMachine types
if (state.type === "Vehicle") {
const targets = state.points?.connections?.targets || [];
const targetMatch = targets.some((target: any) => modelUUIDs.includes(target.modelUUID));
if (targetMatch) {
state.points.connections.targets = [];
shouldInclude = true;
}
}
if (state.type === "StaticMachine") {
const targets = state.points?.connections?.targets || [];
const targetMatch = targets.some((target: any) => modelUUIDs.includes(target.modelUUID));
if (targetMatch) {
state.points.connections.targets = [];
shouldInclude = true;
}
}
// ArmBot type
if (state.type === "ArmBot") {
const sourceMatch = modelUUIDs.includes(state.points.connections?.source?.modelUUID);
const targetMatch = state.points.connections?.targets?.some(
(target: any) => modelUUIDs.includes(target.modelUUID)
);
// state.points.actions.processes = state.points.actions.processes.filter(
// (process: any) =>
// console.log(
// !modelUUIDs.includes(process.startPoint),
// !modelUUIDs.includes(process.endPoint),
// modelUUIDs,
// process.startPoint,
// process.endPoint
// )
// );
// shouldInclude = true;
// const processMatches = state.points.actions?.processes?.some(
// (process: any) =>
// console.log(
// "process: ",
// process,
// modelUUIDs,
// process.startPoint,
// process.endPoint
// )
// // modelUUIDs.includes(process.startPoint) ||
// // modelUUIDs.includes(process.endPoint)
// );
// const processMatch = state.points.actions?.processes?.some(
// (process: any) =>
// modelUUIDs.includes(String(process.startPoint)) ||
// modelUUIDs.includes(String(process.endPoint))
// );
// console.log("processMatch: ", processMatch);
if (sourceMatch) {
state.points.connections.source = {};
shouldInclude = true;
}
if (targetMatch) {
state.points.connections.targets =
state.points.connections.targets.filter((target: any) => !modelUUIDs.includes(target.modelUUID));
shouldInclude = true;
}
// console.log("processMatch: ", processMatch);
// if (processMatch) {
// state.points.actions.processes =
// state.points.actions.processes.filter((process: any) => {
// const shouldRemove =
// modelUUIDs.includes(process.startPoint) ||
// modelUUIDs.includes(process.endPoint);
// console.log("shouldRemove: ", shouldRemove);
// return !shouldRemove;
// });
// shouldInclude = true;
// }
}
return shouldInclude ? [state] : [];
});
updateBackend(removedPath);
return removedPath;
};
const deleteSelection = () => { const deleteSelection = () => {
if (selectedAssets.length > 0 && duplicatedObjects.length === 0) { if (selectedAssets.length > 0 && duplicatedObjects.length === 0) {
const email = localStorage.getItem('email'); const email = localStorage.getItem("email");
const organization = (email!.split("@")[1]).split(".")[0]; const organization = email!.split("@")[1].split(".")[0];
const storedItems = JSON.parse(localStorage.getItem("FloorItems") || '[]'); const storedItems = JSON.parse(localStorage.getItem("FloorItems") || "[]");
const selectedUUIDs = selectedAssets.map((mesh: THREE.Object3D) => mesh.uuid); const selectedUUIDs = selectedAssets.map((mesh: THREE.Object3D) => mesh.uuid);
const updatedStoredItems = storedItems.filter((item: { modeluuid: string }) => !selectedUUIDs.includes(item.modeluuid)); const updatedStoredItems = storedItems.filter((item: { modeluuid: string }) => !selectedUUIDs.includes(item.modeluuid));
localStorage.setItem("FloorItems", JSON.stringify(updatedStoredItems)); localStorage.setItem("FloorItems", JSON.stringify(updatedStoredItems));
selectedAssets.forEach((selectedMesh: THREE.Object3D) => { selectedAssets.forEach((selectedMesh: THREE.Object3D) => {
//REST //REST
// const response = await deleteFloorItem(organization, selectedMesh.uuid, selectedMesh.userData.name); // const response = await deleteFloorItem(organization, selectedMesh.uuid, selectedMesh.userData.name);
@ -225,10 +530,10 @@ const SelectionControls: React.FC = () => {
organization: organization, organization: organization,
modeluuid: selectedMesh.uuid, modeluuid: selectedMesh.uuid,
modelname: selectedMesh.userData.name, modelname: selectedMesh.userData.name,
socketId: socket.id socketId: socket.id,
}; };
socket.emit('v2:model-asset:delete', data); socket.emit("v2:model-asset:delete", data);
selectedMesh.traverse((child: THREE.Object3D) => { selectedMesh.traverse((child: THREE.Object3D) => {
if (child instanceof THREE.Mesh) { if (child instanceof THREE.Mesh) {
@ -245,17 +550,67 @@ const SelectionControls: React.FC = () => {
} }
}); });
setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => { setSimulationStates((prevEvents: (| SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]) => {
const updatedEvents = (prevEvents || []).filter(event => event.modeluuid !== selectedMesh.uuid); const updatedEvents = (prevEvents || []).filter(
(event) => event.modeluuid !== selectedMesh.uuid
);
return updatedEvents; return updatedEvents;
}); }
);
itemsGroupRef.current?.remove(selectedMesh); itemsGroupRef.current?.remove(selectedMesh);
}); });
const updatedItems = floorItems.filter((item: { modeluuid: string }) => !selectedUUIDs.includes(item.modeluuid)); const allUUIDs = selectedAssets.map((val: any) => val.uuid);
setFloorItems(updatedItems); removeConnection(allUUIDs);
// const removedPath = simulationStates?.flatMap((path: any) => {
// let shouldInclude = false;
// if (Array.isArray(path.points)) {
// path.points.forEach((point: any) => {
// const sourceMatch =
// point.connections?.source?.modelUUID === selectedAssets[0].uuid;
// const targetMatch = point.connections?.targets?.some(
// (target: any) => target.modelUUID === selectedAssets[0].uuid
// );
// if (sourceMatch) {
// point.connections.source = {};
// shouldInclude = true;
// }
// if (targetMatch) {
// point.connections.targets = [];
// shouldInclude = true;
// }
// });
// } else {
// const sourceMatch =
// path.connections?.source?.modelUUID === selectedAssets[0].uuid;
// const targetMatch = path.connections?.targets?.some(
// (target: any) => target.modelUUID === selectedAssets[0].uuid
// );
// if (sourceMatch) {
// path.connections.source = {};
// shouldInclude = true;
// }
// if (targetMatch) {
// path.connections.targets = [];
// shouldInclude = true;
// }
// }
// return shouldInclude ? [path] : [];
// });
// updateBackend(removedPath);
const updatedItems = floorItems.filter(
(item: { modeluuid: string }) => !selectedUUIDs.includes(item.modeluuid)
);
setFloorItems(updatedItems);
} }
toast.success("Selected models removed!"); toast.success("Selected models removed!");
clearSelection(); clearSelection();
@ -263,17 +618,21 @@ const SelectionControls: React.FC = () => {
return ( return (
<> <>
<group name="SelectionGroup" > <group name="SelectionGroup">
<group ref={selectionGroup} name="selectionAssetGroup" > <group ref={selectionGroup} name="selectionAssetGroup">
<BoundingBox boundingBoxRef={boundingBoxRef} /> <BoundingBox boundingBoxRef={boundingBoxRef} />
</group> </group>
</group> </group>
<MoveControls movedObjects={movedObjects} setMovedObjects={setMovedObjects} itemsGroupRef={itemsGroupRef} copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} selectionGroup={selectionGroup} boundingBoxRef={boundingBoxRef} /> <MoveControls movedObjects={movedObjects} setMovedObjects={setMovedObjects} itemsGroupRef={itemsGroupRef} copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} selectionGroup={selectionGroup} boundingBoxRef={boundingBoxRef} />
<RotateControls rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} itemsGroupRef={itemsGroupRef} copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} selectionGroup={selectionGroup} boundingBoxRef={boundingBoxRef} /> <RotateControls rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} itemsGroupRef={itemsGroupRef} copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} selectionGroup={selectionGroup} boundingBoxRef={boundingBoxRef} />
<DuplicationControls itemsGroupRef={itemsGroupRef} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} setpastedObjects={setpastedObjects} selectionGroup={selectionGroup} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} /> <DuplicationControls itemsGroupRef={itemsGroupRef} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} setpastedObjects={setpastedObjects} selectionGroup={selectionGroup} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
<CopyPasteControls itemsGroupRef={itemsGroupRef} copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} selectionGroup={selectionGroup} setDuplicatedObjects={setDuplicatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} /> <CopyPasteControls itemsGroupRef={itemsGroupRef} copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} selectionGroup={selectionGroup} setDuplicatedObjects={setDuplicatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
</> </>
); );
}; };
export default SelectionControls; export default SelectionControls;

2
app/src/modules/scene/scene.tsx
View File

@ -17,7 +17,7 @@ import MeasurementTool from "./tools/measurementTool";
import Simulation from "../simulation/simulation"; import Simulation from "../simulation/simulation";
// import Simulation from "./simulationtemp/simulation"; // import Simulation from "./simulationtemp/simulation";
import ZoneCentreTarget from "../../components/ui/componets/zoneCameraTarget"; import ZoneCentreTarget from "../visualization/functions/zoneCameraTarget";
import Dropped3dWidgets from "../../modules/visualization/widgets/3d/Dropped3dWidget"; import Dropped3dWidgets from "../../modules/visualization/widgets/3d/Dropped3dWidget";
import ZoneAssets from "../visualization/zoneAssets"; import ZoneAssets from "../visualization/zoneAssets";

7
app/src/modules/scene/world/world.tsx
View File

@ -55,7 +55,6 @@ import DrieHtmlTemp from "../mqttTemp/drieHtmlTemp";
import ZoneGroup from "../../builder/groups/zoneGroup"; import ZoneGroup from "../../builder/groups/zoneGroup";
import useModuleStore from "../../../store/useModuleStore"; import useModuleStore from "../../../store/useModuleStore";
import NavMeshCreator from "../../builder/agv/navMeshCreator"; import NavMeshCreator from "../../builder/agv/navMeshCreator";
import ArmReplace from "../../simulation/ik/ArmReplace";
export default function World() { export default function World() {
const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements. const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
@ -110,8 +109,7 @@ export default function World() {
const cursorPosition = new THREE.Vector3(); // 3D vector for storing the cursor position. const cursorPosition = new THREE.Vector3(); // 3D vector for storing the cursor position.
const [selectedItemsIndex, setSelectedItemsIndex] = const [selectedItemsIndex, setSelectedItemsIndex] = useState<Types.Number | null>(null); // State for tracking the index of the selected item.
useState<Types.Number | null>(null); // State for tracking the index of the selected item.
const { activeLayer, setActiveLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx. const { activeLayer, setActiveLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx.
const { toggleView, setToggleView } = useToggleView(); // State for toggling between 2D and 3D. const { toggleView, setToggleView } = useToggleView(); // State for toggling between 2D and 3D.
const { toolMode, setToolMode } = useToolMode(); const { toolMode, setToolMode } = useToolMode();
@ -371,9 +369,6 @@ export default function World() {
<NavMeshCreator lines={lines} /> <NavMeshCreator lines={lines} />
{/* replacing exsisting arms with rigged ones */}
<ArmReplace />
</> </>
); );
} }

62
app/src/modules/simulation/armbot/ArmBot.tsx Normal file
View File

@ -0,0 +1,62 @@
import React, { useEffect, useState } from "react";
import { useThree } from "@react-three/fiber";
import useModuleStore from "../../../store/useModuleStore";
import { useSimulationStates } from "../../../store/store";
import * as SimulationTypes from '../../../types/simulation';
import { ArmbotInstances } from "./ArmBotInstances";
interface ArmBotState {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
status: string;
material: string;
triggerId: string;
connections: any
}
const ArmBot: React.FC = () => {
const { activeModule } = useModuleStore();
const { scene } = useThree();
const { simulationStates } = useSimulationStates();
const [armBots, setArmBots] = useState<ArmBotState[]>([]);
useEffect(() => {
const filtered = simulationStates.filter((s): s is SimulationTypes.ArmBotEventsSchema => s.type === "ArmBot");
const initialStates: ArmBotState[] = filtered.map(bot => ({
uuid: bot.modeluuid,
position: bot.position,
rotation: bot.rotation,
status: "idle",
material: "default",
triggerId: '',
connections: bot.points.connections
}));
setArmBots(initialStates);
}, [simulationStates]);
useEffect(() => {
armBots.forEach((bot) => {
const object = scene.getObjectByProperty("uuid", bot.uuid);
if (object) {
object.visible = activeModule !== "simulation";
}
});
}, [scene, activeModule, armBots]);
return (
<>
{activeModule === "simulation" &&
armBots.map((bot, i) => (
<ArmbotInstances
key={i}
index={i}
armBot={bot}
setArmBots={setArmBots}
/>
))}
</>
);
};
export default ArmBot;

25
app/src/modules/simulation/armbot/ArmBotInstances.tsx Normal file
View File

@ -0,0 +1,25 @@
import IkInstances from "./IkInstances";
import armModel from "../../../assets/gltf-glb/rigged/ik_arm_4.glb";
interface ArmBotState {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
status: string;
material: string;
triggerId: string;
connections: any
}
interface ArmbotInstancesProps {
index: number;
armBot: ArmBotState;
setArmBots: (armBots: ArmBotState[]) => void;
}
export const ArmbotInstances: React.FC<ArmbotInstancesProps> = ({ index, armBot, setArmBots }) => {
return (
<IkInstances key={index} modelUrl={armModel} position={armBot.position} rotation={armBot.rotation} />
);
};

101
app/src/modules/simulation/armbot/IKAnimationController.tsx Normal file
View File

@ -0,0 +1,101 @@
import { useEffect, useMemo, useState } from "react";
import { useFrame } from "@react-three/fiber";
import * as THREE from "three";
const IKAnimationController = ({
ikSolver,
process,
selectedTrigger,
targetBoneName,
}: {
ikSolver: any;
process: {
trigger: string;
start: THREE.Vector3;
end: THREE.Vector3;
speed: number;
}[];
selectedTrigger: string;
targetBoneName: string;
}) => {
const [progress, setProgress] = useState(0);
const restSpeed = 0.1;
useEffect(() => {
setProgress(0);
}, [selectedTrigger]);
const processedCurves = useMemo(() => {
const restPosition = new THREE.Vector3(0.2, 2.3, 1.6);
return process.map((p) => {
const mid = new THREE.Vector3(
(p.start.x + p.end.x) / 1,
Math.max(p.start.y, p.end.y) + 0.8,
(p.start.z + p.end.z) / 0.9
);
const points = [
restPosition.clone(),
p.start.clone(),
mid.clone(),
p.end.clone(),
restPosition.clone(),
];
const curve = new THREE.CatmullRomCurve3(points);
const restToStartDist = points[0].distanceTo(points[1]);
const startToEndDist = points[1].distanceTo(points[3]);
const endToRestDist = points[3].distanceTo(points[4]);
const totalDist = restToStartDist + startToEndDist + endToRestDist;
const restToStartRange = [0, restToStartDist / totalDist];
const startToEndRange = [
restToStartRange[1],
restToStartRange[1] + startToEndDist / totalDist,
];
const endToRestRange = [startToEndRange[1], 1];
return {
trigger: p.trigger,
curve,
speed: p.speed,
restToStartRange,
startToEndRange,
endToRestRange,
};
});
}, [process]);
const activeCurve = useMemo(() => {
return processedCurves.find((c) => c.trigger === selectedTrigger);
}, [processedCurves, selectedTrigger]);
useFrame((_, delta) => {
if (!ikSolver || !activeCurve) return;
const { curve, speed, startToEndRange } = activeCurve;
const targetBone = ikSolver.mesh.skeleton.bones.find(
(b: any) => b.name === targetBoneName
);
if (!targetBone) return;
let currentSpeed = restSpeed;
if (progress >= startToEndRange[0] && progress < startToEndRange[1]) {
currentSpeed = speed;
}
setProgress((prev) => {
const next = prev + delta * currentSpeed;
if (next >= 1) {
targetBone.position.copy(curve.getPoint(1));
return 1;
}
targetBone.position.copy(curve.getPoint(next));
return next;
});
ikSolver.update();
});
return null;
};
export default IKAnimationController;

128
app/src/modules/simulation/armbot/IkInstances.tsx Normal file
View File

@ -0,0 +1,128 @@
import * as THREE from "three";
import { useEffect, useMemo, useRef, useState } from "react";
import { useLoader } from "@react-three/fiber";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { clone } from "three/examples/jsm/utils/SkeletonUtils";
import { CCDIKSolver, CCDIKHelper, } from "three/examples/jsm/animation/CCDIKSolver";
import IKAnimationController from "./IKAnimationController";
const IkInstances = ({ modelUrl, position, rotation }: { modelUrl: string; position: [number, number, number]; rotation: [number, number, number]; }) => {
const [ikSolver, setIkSolver] = useState<any>(null);
const [selectedTrigger, setSelectedTrigger] = useState<string>("idle");
const gltf = useLoader(GLTFLoader, modelUrl, (loader) => {
const draco = new DRACOLoader();
draco.setDecoderPath(
"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/"
);
loader.setDRACOLoader(draco);
});
const cloned = useMemo(() => clone(gltf.scene), [gltf]);
const groupRef = useRef<any>(null);
const [selectedArm, setSelectedArm] = useState<THREE.Group>();
const targetBoneName = "Target";
const skinnedMeshName = "link_0";
const process = useMemo(() => [
{
trigger: "Trigger1",
start: new THREE.Vector3(-0.75, 1.5, -2.2),
end: new THREE.Vector3(0, 1.2, 2.2),
speed: 0.25,
},
{
trigger: "Trigger2",
start: new THREE.Vector3(0, 1.2, 2.2),
end: new THREE.Vector3(0.75, 1.5, -2.2),
speed: 0.22,
}
], []);
useEffect(() => {
if (!gltf) return;
const OOI: any = {};
cloned.traverse((n: any) => {
if (n.name === targetBoneName) OOI.Target_Bone = n;
if (n.name === skinnedMeshName) OOI.Skinned_Mesh = n;
});
if (!OOI.Target_Bone || !OOI.Skinned_Mesh) return;
const iks = [
{
target: 7,
effector: 6,
links: [
{
index: 5,
enabled: true,
rotationMin: new THREE.Vector3(-Math.PI / 2, 0, 0),
rotationMax: new THREE.Vector3(Math.PI / 2, 0, 0),
},
{
index: 4,
enabled: true,
rotationMin: new THREE.Vector3(-Math.PI / 2, 0, 0),
rotationMax: new THREE.Vector3(0, 0, 0),
},
{
index: 3,
enabled: true,
rotationMin: new THREE.Vector3(0, 0, 0),
rotationMax: new THREE.Vector3(2, 0, 0),
},
{ index: 1, enabled: true, limitation: new THREE.Vector3(0, 1, 0) },
{ index: 0, enabled: false, limitation: new THREE.Vector3(0, 0, 0) },
],
},
];
const solver = new CCDIKSolver(OOI.Skinned_Mesh, iks);
setIkSolver(solver);
const helper = new CCDIKHelper(OOI.Skinned_Mesh, iks, 0.05);
// groupRef.current.add(helper);
}, [gltf]);
useEffect(() => {
const triggers = ['Trigger1', 'Trigger2'];
let index = 0;
const cycleTriggers = setInterval(() => {
setSelectedTrigger(triggers[index]);
index = (index + 1) % triggers.length;
}, 10000);
return () => clearInterval(cycleTriggers);
}, []);
return (
<>
<group
ref={groupRef}
onClick={(e) => {
e.stopPropagation();
setSelectedArm(groupRef.current?.getObjectByName(targetBoneName))
}}
>
<primitive
object={cloned}
position={position}
rotation={rotation}
scale={[1, 1, 1]}
name={`arm-bot`}
/>
</group>
<IKAnimationController
ikSolver={ikSolver}
process={process}
selectedTrigger={selectedTrigger}
targetBoneName={targetBoneName}
/>
{/* {selectedArm && <TransformControls object={selectedArm} />} */}
</>
);
};
export default IkInstances;

88
app/src/modules/simulation/behaviour/behaviour.tsx
View File

@ -1,88 +0,0 @@
import { useFloorItems, useSimulationStates } from '../../../store/store';
import * as THREE from 'three';
import * as Types from '../../../types/world/worldTypes';
import { useEffect } from 'react';
function Behaviour() {
const { setSimulationStates } = useSimulationStates();
const { floorItems } = useFloorItems();
useEffect(() => {
const newPaths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[] = [];
// floorItems.forEach((item: Types.FloorItemType) => {
// if (item.modelfileID === "672a090f80d91ac979f4d0bd") {
// const point1Position = new THREE.Vector3(0, 0.85, 2.2);
// const middlePointPosition = new THREE.Vector3(0, 0.85, 0);
// const point2Position = new THREE.Vector3(0, 0.85, -2.2);
// const point1UUID = THREE.MathUtils.generateUUID();
// const middlePointUUID = THREE.MathUtils.generateUUID();
// const point2UUID = THREE.MathUtils.generateUUID();
// const newPath: Types.ConveyorEventsSchema = {
// modeluuid: item.modeluuid,
// modelName: item.modelname,
// type: 'Conveyor',
// points: [
// {
// uuid: point1UUID,
// position: [point1Position.x, point1Position.y, point1Position.z],
// rotation: [0, 0, 0],
// actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: true }],
// triggers: [],
// connections: { source: { modelUUID: item.modeluuid, pointUUID: point1UUID }, targets: [] },
// },
// {
// uuid: middlePointUUID,
// position: [middlePointPosition.x, middlePointPosition.y, middlePointPosition.z],
// rotation: [0, 0, 0],
// actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: true }],
// triggers: [],
// connections: { source: { modelUUID: item.modeluuid, pointUUID: middlePointUUID }, targets: [] },
// },
// {
// uuid: point2UUID,
// position: [point2Position.x, point2Position.y, point2Position.z],
// rotation: [0, 0, 0],
// actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: true }],
// triggers: [],
// connections: { source: { modelUUID: item.modeluuid, pointUUID: point2UUID }, targets: [] },
// },
// ],
// position: [...item.position],
// rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
// speed: 'Inherit',
// };
// newPaths.push(newPath);
// } else if (item.modelfileID === "67e3da19c2e8f37134526e6a") {
// const pointUUID = THREE.MathUtils.generateUUID();
// const pointPosition = new THREE.Vector3(0, 1.3, 0);
// const newVehiclePath: Types.VehicleEventsSchema = {
// modeluuid: item.modeluuid,
// modelName: item.modelname,
// type: 'Vehicle',
// point: {
// uuid: pointUUID,
// position: [pointPosition.x, pointPosition.y, pointPosition.z],
// actions: { uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Start', start: {}, hitCount: 1, end: {}, buffer: 0 },
// connections: { source: { modelUUID: item.modeluuid, pointUUID: pointUUID }, targets: [] },
// speed: 2,
// },
// position: [...item.position],
// };
// newPaths.push(newVehiclePath);
// }
// });
// setSimulationStates(newPaths);
// console.log('floorItems: ', floorItems);
}, [floorItems]);
return null;
}
export default Behaviour;

56
app/src/modules/simulation/ik/ArmReplace.tsx
View File

@ -1,56 +0,0 @@
import React, { useEffect } from "react";
import { useThree } from "@react-three/fiber";
// store
import useModuleStore from "../../../store/useModuleStore";
// functions
import { findLinkObjects } from "./functions/findLinkObjects";
// components
import { MultiGLTFInstances } from "./MultiGLTFInstances";
// impory model from model folder
import armModel from "../../../assets/gltf-glb/rigged/ik_arm_4.glb";
// Main component to include the logic
const ArmReplace: React.FC = () => {
const { activeModule } = useModuleStore();
const { scene } = useThree(); // Access the Three.js scene from the React Fiber context
// State to store positions, rotations, and count
const [positions, setPositions] = React.useState<[number, number, number][]>(
[]
);
const [rotations, setRotations] = React.useState<[number, number, number][]>(
[]
);
const [count, setCount] = React.useState<string[]>([]);
useEffect(() => {
// Call the function to find objects and update states
findLinkObjects(
scene,
setPositions,
setRotations,
setCount,
activeModule === "simulation" ? false : true
);
}, [scene, activeModule]); // Re-run this effect if the scene changes or activeModule changes
return (
<>
{useModuleStore.getState().activeModule === "simulation" &&
count.map((_, i: number) => (
<MultiGLTFInstances
index={i}
modelUrl={armModel}
position={positions[i]}
rotation={rotations[i]}
/>
))}
</>
);
};
export default ArmReplace;

43
app/src/modules/simulation/ik/MultiGLTFInstances.tsx
View File

@ -1,43 +0,0 @@
import { useLoader } from "@react-three/fiber";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { clone } from "three/examples/jsm/utils/SkeletonUtils";
interface MultiGLTFInstancesProps {
index: number;
modelUrl: string;
position: [number, number, number];
rotation: [number, number, number];
}
export const MultiGLTFInstances: React.FC<MultiGLTFInstancesProps> = ({
index,
modelUrl,
position,
rotation,
}) => {
// Load GLTF model with DRACO loader for compression
const originalGltf = useLoader(GLTFLoader, modelUrl, (loader) => {
const draco = new DRACOLoader();
draco.setDecoderPath(
"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/"
);
loader.setDRACOLoader(draco);
});
// Clone the model for independent transformations
const cloned = clone(originalGltf.scene);
// Render the cloned model
return (
<mesh>
<primitive
name="rigged_arm"
key={index}
object={cloned}
position={position}
rotation={rotation}
/>
</mesh>
);
};

43
app/src/modules/simulation/ik/functions/findLinkObjects.ts
View File

@ -1,43 +0,0 @@
import { Object3D, Vector3 } from "three";
// Function to find objects named 'link_0' and update positions, rotations, and count
export const findLinkObjects = (
scene: Object3D,
setPositions: React.Dispatch<
React.SetStateAction<[number, number, number][]>
>,
setRotations: React.Dispatch<
React.SetStateAction<[number, number, number][]>
>,
setCount: React.Dispatch<React.SetStateAction<string[]>>,
visibility: boolean
) => {
const positions: [number, number, number][] = [];
const rotations: [number, number, number][] = [];
const count: string[] = [];
let i = 0;
scene.traverse((object) => {
if (object.name === "link_0") {
if (object.parent && object.type !== "SkinnedMesh") {
// count
count[i] = object.uuid;
i++;
// Save the position and rotation of the parent object
const { x: px, y: py, z: pz } = object.parent.position;
positions.push([px, py, pz]);
const { x: rx, y: ry, z: rz } = object.parent.rotation;
rotations.push([rx, ry, rz]);
// Change visibility of the object
object.visible = visibility;
}
}
});
// Update the state with the collected positions, rotations, and count
setPositions(positions);
setRotations(rotations);
setCount(count);
};

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

@ -2,6 +2,7 @@ import { useFrame, useThree } from '@react-three/fiber';
import React, { useEffect, useRef, 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 * as SimulationTypes from '../../../types/simulation';
import { QuadraticBezierLine } from '@react-three/drei'; import { QuadraticBezierLine } from '@react-three/drei';
import { useDeleteTool, useIsConnecting, useRenderDistance, useSimulationStates, useSocketStore } from '../../../store/store'; import { useDeleteTool, useIsConnecting, useRenderDistance, useSimulationStates, useSocketStore } from '../../../store/store';
import useModuleStore from '../../../store/useModuleStore'; import useModuleStore from '../../../store/useModuleStore';
@ -339,7 +340,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
updateBackend(updatedPathDetails); updateBackend(updatedPathDetails);
}; };
const updateBackend = async (updatedPaths: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | Types.ArmBotEventsSchema)[]) => { const updateBackend = async (updatedPaths: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.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] : "";
@ -852,11 +853,11 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
} }
}); });
const removeConnections = (connection1: { model: string; point: string }, connection2: { model: string; point: string }) => { const removeConnection = (connection1: { model: string; point: string }, connection2: { model: string; point: string }) => {
const updatedStates = simulationStates.map(state => { const updatedStates = simulationStates.map(state => {
// Handle Conveyor (which has multiple points) // Handle Conveyor (which has multiple points)
if (state.type === 'Conveyor') { if (state.type === 'Conveyor') {
const updatedConveyor: Types.ConveyorEventsSchema = { const updatedConveyor: SimulationTypes.ConveyorEventsSchema = {
...state, ...state,
points: state.points.map(point => { points: state.points.map(point => {
// Check if this point is either connection1 or connection2 // Check if this point is either connection1 or connection2
@ -887,7 +888,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
if ((state.modeluuid === connection1.model && state.points.uuid === connection1.point) || if ((state.modeluuid === connection1.model && state.points.uuid === connection1.point) ||
(state.modeluuid === connection2.model && state.points.uuid === connection2.point)) { (state.modeluuid === connection2.model && state.points.uuid === connection2.point)) {
const updatedVehicle: Types.VehicleEventsSchema = { const updatedVehicle: SimulationTypes.VehicleEventsSchema = {
...state, ...state,
points: { points: {
...state.points, ...state.points,
@ -913,7 +914,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
if ((state.modeluuid === connection1.model && state.points.uuid === connection1.point) || if ((state.modeluuid === connection1.model && state.points.uuid === connection1.point) ||
(state.modeluuid === connection2.model && state.points.uuid === connection2.point)) { (state.modeluuid === connection2.model && state.points.uuid === connection2.point)) {
const updatedStaticMachine: Types.StaticMachineEventsSchema = { const updatedStaticMachine: SimulationTypes.StaticMachineEventsSchema = {
...state, ...state,
points: { points: {
...state.points, ...state.points,
@ -939,7 +940,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
if ((state.modeluuid === connection1.model && state.points.uuid === connection1.point) || if ((state.modeluuid === connection1.model && state.points.uuid === connection1.point) ||
(state.modeluuid === connection2.model && state.points.uuid === connection2.point)) { (state.modeluuid === connection2.model && state.points.uuid === connection2.point)) {
const updatedArmBot: Types.ArmBotEventsSchema = { const updatedArmBot: SimulationTypes.ArmBotEventsSchema = {
...state, ...state,
points: { points: {
...state.points, ...state.points,
@ -1030,10 +1031,11 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
const connection1 = { model: path.modeluuid, point: point.uuid } const connection1 = { model: path.modeluuid, point: point.uuid }
const connection2 = { model: target.modelUUID, point: target.pointUUID } const connection2 = { model: target.modelUUID, point: target.pointUUID }
removeConnections(connection1, connection2) removeConnection(connection1, connection2)
} }
}} }}
depthWrite={false}
userData={target} userData={target}
/> />
); );
@ -1082,9 +1084,10 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
const connection1 = { model: path.modeluuid, point: path.points.uuid } const connection1 = { model: path.modeluuid, point: path.points.uuid }
const connection2 = { model: target.modelUUID, point: target.pointUUID } const connection2 = { model: target.modelUUID, point: target.pointUUID }
removeConnections(connection1, connection2) removeConnection(connection1, connection2)
} }
}} }}
depthWrite={false}
userData={target} userData={target}
/> />
); );
@ -1135,10 +1138,11 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
const connection1 = { model: path.modeluuid, point: path.points.uuid } const connection1 = { model: path.modeluuid, point: path.points.uuid }
const connection2 = { model: target.modelUUID, point: target.pointUUID } const connection2 = { model: target.modelUUID, point: target.pointUUID }
removeConnections(connection1, connection2) removeConnection(connection1, connection2)
} }
}} }}
depthWrite={false}
userData={target} userData={target}
/> />
); );
@ -1160,6 +1164,7 @@ function PathConnector({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObjec
dashed dashed
dashSize={1} dashSize={1}
dashScale={20} dashScale={20}
depthWrite={false}
/> />
)} )}
</group> </group>

11
app/src/modules/simulation/path/pathCreation.tsx
View File

@ -1,5 +1,5 @@
import * as THREE from "three"; import * as THREE from "three";
import * as Types from "../../../types/world/worldTypes"; import * as SimulationTypes from "../../../types/simulation";
import { useRef, useState, useEffect, useMemo } from "react"; import { useRef, useState, useEffect, useMemo } from "react";
import { Sphere, TransformControls } from "@react-three/drei"; import { Sphere, TransformControls } from "@react-three/drei";
import { import {
@ -94,7 +94,7 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
} else { } else {
return path; return path;
} }
}) as Types.ConveyorEventsSchema[]; }) as SimulationTypes.ConveyorEventsSchema[];
const updatedPath = updatedPaths.find( const updatedPath = updatedPaths.find(
(path) => path.type === "Conveyor" && path.points.some((point) => point.uuid === selectedActionSphere.points.uuid) (path) => path.type === "Conveyor" && path.points.some((point) => point.uuid === selectedActionSphere.points.uuid)
@ -161,7 +161,7 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
}; };
}, [eyeDropMode, editingPoint, previewPosition]); }, [eyeDropMode, editingPoint, previewPosition]);
const updateBackend = async (updatedPath: Types.VehicleEventsSchema | undefined) => { const updateBackend = async (updatedPath: SimulationTypes.VehicleEventsSchema | undefined) => {
if (!updatedPath) return; if (!updatedPath) 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] : "";
@ -191,7 +191,7 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
return path; return path;
}); });
const updatedPath = updatedPaths.find((path): path is Types.VehicleEventsSchema => path.type === "Vehicle" && path.points.uuid === selectedActionSphere.points.uuid); const updatedPath = updatedPaths.find((path): path is SimulationTypes.VehicleEventsSchema => path.type === "Vehicle" && path.points.uuid === selectedActionSphere.points.uuid);
updateBackend(updatedPath); updateBackend(updatedPath);
setSimulationStates(updatedPaths); setSimulationStates(updatedPaths);
@ -282,6 +282,7 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
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}
rotation={path.rotation}
onClick={(e) => { onClick={(e) => {
if (isConnecting || eyeDropMode) return; if (isConnecting || eyeDropMode) return;
e.stopPropagation(); e.stopPropagation();
@ -335,6 +336,7 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
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}
rotation={path.rotation}
onClick={(e) => { onClick={(e) => {
if (isConnecting || eyeDropMode) return; if (isConnecting || eyeDropMode) return;
e.stopPropagation(); e.stopPropagation();
@ -388,6 +390,7 @@ function PathCreation({ pathsGroupRef, }: { pathsGroupRef: React.MutableRefObjec
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}
rotation={path.rotation}
onClick={(e) => { onClick={(e) => {
if (isConnecting || eyeDropMode) return; if (isConnecting || eyeDropMode) return;
e.stopPropagation(); e.stopPropagation();

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

@ -458,7 +458,7 @@ import { useThree } from "@react-three/fiber";
import { import {
ConveyorEventsSchema, ConveyorEventsSchema,
VehicleEventsSchema, VehicleEventsSchema,
} from "../../../types/world/worldTypes"; } from "../../../types/simulation";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
// Type definitions // Type definitions

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

@ -1,16 +1,11 @@
import { useState, useEffect, useRef, useMemo } from "react"; import { useState, useRef } from "react";
import {
useSelectedActionSphere,
useSelectedPath,
useSimulationStates,
} from "../../store/store";
import * as THREE from "three"; import * as THREE from "three";
import Behaviour from "./behaviour/behaviour";
import PathCreation from "./path/pathCreation"; import PathCreation from "./path/pathCreation";
import PathConnector from "./path/pathConnector"; import PathConnector from "./path/pathConnector";
import useModuleStore from "../../store/useModuleStore"; import useModuleStore from "../../store/useModuleStore";
import ProcessContainer from "./process/processContainer"; import ProcessContainer from "./process/processContainer";
import Agv from "../builder/agv/agv"; import Agv from "../builder/agv/agv";
import ArmBot from "./armbot/ArmBot";
function Simulation() { function Simulation() {
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
@ -21,24 +16,28 @@ function Simulation() {
return ( return (
<> <>
<Behaviour />
{activeModule === "simulation" && ( {activeModule === "simulation" && (
<> <>
<PathCreation pathsGroupRef={pathsGroupRef} /> <PathCreation pathsGroupRef={pathsGroupRef} />
<PathConnector pathsGroupRef={pathsGroupRef} /> <PathConnector pathsGroupRef={pathsGroupRef} />
<ProcessContainer <ProcessContainer
processes={processes} processes={processes}
setProcesses={setProcesses} setProcesses={setProcesses}
agvRef={agvRef} agvRef={agvRef}
MaterialRef={MaterialRef} MaterialRef={MaterialRef}
/> />
<Agv <Agv
processes={processes} processes={processes}
agvRef={agvRef} agvRef={agvRef}
MaterialRef={MaterialRef} MaterialRef={MaterialRef}
/> />
</> </>
)} )}
<ArmBot />
</> </>
); );
} }

11
app/src/modules/visualization/DisplayZone.tsx
View File

@ -97,11 +97,16 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
if (container) { if (container) {
const isOverflowing = container.scrollWidth > container.clientWidth; const isOverflowing = container.scrollWidth > container.clientWidth;
const canScrollLeft = container.scrollLeft > 0; const canScrollLeft = container.scrollLeft > 0;
const canScrollRight =
container.scrollLeft + container.clientWidth < container.scrollWidth;
const canScrollRight =
container.scrollLeft + container.clientWidth + 1 <
container.scrollWidth;
setShowLeftArrow(isOverflowing && canScrollLeft); setShowLeftArrow(isOverflowing && canScrollLeft);
setShowRightArrow(isOverflowing && canScrollRight); setShowRightArrow(isOverflowing && canScrollRight);
console.log('canScrollRight: ', canScrollRight);
console.log('isOverflowing: ', isOverflowing);
} }
}, []); }, []);
@ -166,7 +171,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
if (selectedZone?.zoneId === zoneId) { if (selectedZone?.zoneId === zoneId) {
return; return;
} }
setSelectedChartId(null); // setSelectedChartId(null);
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 response = await getSelect2dZoneData(zoneId, organization); let response = await getSelect2dZoneData(zoneId, organization);

161
app/src/modules/visualization/RealTimeVisulization.tsx
View File

@ -34,6 +34,7 @@ import {
import Dropped3dWidgets from "./widgets/3d/Dropped3dWidget"; import Dropped3dWidgets from "./widgets/3d/Dropped3dWidget";
import OuterClick from "../../utils/outerClick"; import OuterClick from "../../utils/outerClick";
import { useWidgetStore } from "../../store/useWidgetStore"; import { useWidgetStore } from "../../store/useWidgetStore";
import { getActiveProperties } from "./functions/getActiveProperties";
type Side = "top" | "bottom" | "left" | "right"; type Side = "top" | "bottom" | "left" | "right";
@ -92,6 +93,7 @@ const RealTimeVisulization: React.FC = () => {
"sidebar-right-wrapper", "sidebar-right-wrapper",
"card", "card",
"dropdown-menu", "dropdown-menu",
"dropdown-options",
], ],
setMenuVisible: () => setSelectedChartId(null), setMenuVisible: () => setSelectedChartId(null),
}); });
@ -157,96 +159,102 @@ const RealTimeVisulization: React.FC = () => {
try { try {
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
const data = event.dataTransfer.getData("text/plain"); const data = event.dataTransfer.getData("text/plain");
if (widgetSubOption === "3D") return; if (widgetSubOption === "3D") return;
if (!data || selectedZone.zoneName === "") return; if (!data || selectedZone.zoneName === "") return;
const droppedData = JSON.parse(data); const droppedData = JSON.parse(data);
const canvasElement = document.getElementById("real-time-vis-canvas"); const canvasElement = document.getElementById("real-time-vis-canvas");
if (!canvasElement) throw new Error("Canvas element not found"); if (!canvasElement) throw new Error("Canvas element not found");
// Get canvas dimensions and mouse position
const rect = canvasElement.getBoundingClientRect(); const rect = canvasElement.getBoundingClientRect();
let relativeX = (event.clientX - rect.left) ; const relativeX = event.clientX - rect.left;
let relativeY = event.clientY - rect.top; const relativeY = event.clientY - rect.top;
// Widget dimensions (with defaults) // Widget dimensions
const widgetWidth = droppedData.width || 125; // 250/2 as default const widgetWidth = droppedData.width || 125;
const widgetHeight = droppedData.height || 100; // 83/2 as default const widgetHeight = droppedData.height || 100;
// Clamp to ensure widget stays fully inside canvas // Center the widget at cursor
const clampedX = Math.max( const centerOffsetX = widgetWidth / 2;
0, // Prevent going beyond left edge const centerOffsetY = widgetHeight / 2;
Math.min(
relativeX, const adjustedX = relativeX - centerOffsetX;
rect.width - widgetWidth // Prevent going beyond right edge const adjustedY = relativeY - centerOffsetY;
)
); const finalPosition = determinePosition(rect, adjustedX, adjustedY);
const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
console.log('clampedX: ', clampedX);
const clampedY = Math.max( let finalY = 0;
0, // Prevent going beyond top edge let finalX = 0;
Math.min(
relativeY, if (activeProp1 === "top") {
rect.height - widgetHeight // Prevent going beyond bottom edge finalY = adjustedY;
) } else {
); finalY = rect.height - (adjustedY + widgetHeight);
}
// Debug logging (optional)
console.log("Drop coordinates:", { if (activeProp2 === "left") {
rawX: relativeX, finalX = adjustedX;
rawY: relativeY, } else {
clampedX, finalX = rect.width - (adjustedX + widgetWidth);
clampedY, }
canvasWidth: rect.width,
canvasHeight: rect.height, // Clamp to boundaries
widgetWidth, finalX = Math.max(0, Math.min(rect.width - widgetWidth, finalX));
widgetHeight finalY = Math.max(0, Math.min(rect.height - widgetHeight, finalY));
});
const boundedPosition = {
const finalPosition = determinePosition(rect, clampedX, clampedY); ...finalPosition,
[activeProp1]: finalY,
[activeProp2]: finalX,
[activeProp1 === "top" ? "bottom" : "top"]: "auto",
[activeProp2 === "left" ? "right" : "left"]: "auto",
};
const newObject = { const newObject = {
...droppedData, ...droppedData,
id: generateUniqueId(), id: generateUniqueId(),
position: finalPosition, position: boundedPosition,
}; };
// Zone management const existingZone =
const existingZone = useDroppedObjectsStore.getState().zones[selectedZone.zoneName]; useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
if (!existingZone) { if (!existingZone) {
useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId); useDroppedObjectsStore
.getState()
.setZone(selectedZone.zoneName, selectedZone.zoneId);
} }
// Socket emission
const addFloatingWidget = { const addFloatingWidget = {
organization, organization,
widget: newObject, widget: newObject,
zoneId: selectedZone.zoneId, zoneId: selectedZone.zoneId,
}; };
if (visualizationSocket) { if (visualizationSocket) {
visualizationSocket.emit("v2:viz-float:add", addFloatingWidget); visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
} }
// Store update useDroppedObjectsStore
useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject); .getState()
.addObject(selectedZone.zoneName, newObject);
// Post-drop verification
const droppedObjectsStore = useDroppedObjectsStore.getState(); const droppedObjectsStore = useDroppedObjectsStore.getState();
const currentZone = droppedObjectsStore.zones[selectedZone.zoneName]; const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
if (currentZone && currentZone.zoneId === selectedZone.zoneId) { if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
console.log(`Objects for Zone ${selectedZone.zoneId}:`, currentZone.objects); console.log(
`Objects for Zone ${selectedZone.zoneId}:`,
currentZone.objects
);
setFloatingWidget(currentZone.objects); setFloatingWidget(currentZone.objects);
} else { } else {
console.warn("Zone not found or zoneId mismatch"); console.warn("Zone not found or zoneId mismatch");
} }
} catch (error) { } catch (error) {
console.error("Error in handleDrop:", error); console.error("Error in handleDrop:", error);
// Consider adding user feedback here (e.g., toast notification)
} }
}; };
@ -270,8 +278,41 @@ const RealTimeVisulization: React.FC = () => {
}; };
}, [setRightClickSelected]); }, [setRightClickSelected]);
const [canvasDimensions, setCanvasDimensions] = useState({
width: 0,
height: 0,
});
useEffect(() => {
const canvas = document.getElementById("real-time-vis-canvas");
if (!canvas) return;
const updateCanvasDimensions = () => {
const rect = canvas.getBoundingClientRect();
setCanvasDimensions({
width: rect.width,
height: rect.height,
});
};
updateCanvasDimensions();
const resizeObserver = new ResizeObserver(updateCanvasDimensions);
resizeObserver.observe(canvas);
return () => resizeObserver.unobserve(canvas);
}, []);
return ( return (
<> <>
<style>
{`
:root {
--realTimeViz-container-width: ${canvasDimensions.width}px;
--realTimeViz-container-height: ${canvasDimensions.height}px;
}
`}
</style>
<div <div
ref={containerRef} ref={containerRef}
id="real-time-vis-canvas" id="real-time-vis-canvas"

188
app/src/components/ui/charts/BarGraphComponent.tsx → app/src/modules/visualization/charts/BarGraphComponent.tsx
View File

@ -1,94 +1,94 @@
import { useMemo } from "react"; import { useMemo } from "react";
import { Bar } from "react-chartjs-2"; import { Bar } from "react-chartjs-2";
interface ChartComponentProps { interface ChartComponentProps {
type: any; type: any;
title: string; title: string;
fontFamily?: string; fontFamily?: string;
fontSize?: string; fontSize?: string;
fontWeight?: "Light" | "Regular" | "Bold"; fontWeight?: "Light" | "Regular" | "Bold";
data: any; data: any;
} }
const LineGraphComponent = ({ const LineGraphComponent = ({
title, title,
fontFamily, fontFamily,
fontSize, fontSize,
fontWeight = "Regular", fontWeight = "Regular",
}: ChartComponentProps) => { }: ChartComponentProps) => {
// Memoize Font Weight Mapping // Memoize Font Weight Mapping
const chartFontWeightMap = useMemo( const chartFontWeightMap = useMemo(
() => ({ () => ({
Light: "lighter" as const, Light: "lighter" as const,
Regular: "normal" as const, Regular: "normal" as const,
Bold: "bold" as const, Bold: "bold" as const,
}), }),
[] []
); );
// Parse and Memoize Font Size // Parse and Memoize Font Size
const fontSizeValue = useMemo( const fontSizeValue = useMemo(
() => (fontSize ? parseInt(fontSize) : 12), () => (fontSize ? parseInt(fontSize) : 12),
[fontSize] [fontSize]
); );
// Determine and Memoize Font Weight // Determine and Memoize Font Weight
const fontWeightValue = useMemo( const fontWeightValue = useMemo(
() => chartFontWeightMap[fontWeight], () => chartFontWeightMap[fontWeight],
[fontWeight, chartFontWeightMap] [fontWeight, chartFontWeightMap]
); );
// Memoize Chart Font Style // Memoize Chart Font Style
const chartFontStyle = useMemo( const chartFontStyle = useMemo(
() => ({ () => ({
family: fontFamily || "Arial", family: fontFamily || "Arial",
size: fontSizeValue, size: fontSizeValue,
weight: fontWeightValue, weight: fontWeightValue,
}), }),
[fontFamily, fontSizeValue, fontWeightValue] [fontFamily, fontSizeValue, fontWeightValue]
); );
const options = useMemo( const options = useMemo(
() => ({ () => ({
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
plugins: { plugins: {
title: { title: {
display: true, display: true,
text: title, text: title,
font: chartFontStyle, font: chartFontStyle,
}, },
legend: { legend: {
display: false, display: false,
}, },
}, },
scales: { scales: {
x: { x: {
ticks: { ticks: {
display: false, // This hides the x-axis labels display: false, // This hides the x-axis labels
}, },
}, },
}, },
}), }),
[title, chartFontStyle] [title, chartFontStyle]
); );
const chartData = { const chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"], labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [ datasets: [
{ {
label: "My First Dataset", label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40], data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: "#6f42c1", backgroundColor: "#6f42c1",
borderColor: "#ffffff", borderColor: "#ffffff",
borderWidth: 2, borderWidth: 2,
fill: false, fill: false,
}, },
], ],
}; };
return <Bar data={chartData} options={options} />; return <Bar data={chartData} options={options} />;
}; };
export default LineGraphComponent; export default LineGraphComponent;

186
app/src/components/ui/charts/LineGraphComponent.tsx → app/src/modules/visualization/charts/LineGraphComponent.tsx
View File

@ -1,93 +1,93 @@
import { useMemo } from "react"; import { useMemo } from "react";
import { Line } from "react-chartjs-2"; import { Line } from "react-chartjs-2";
interface ChartComponentProps { interface ChartComponentProps {
type: any; type: any;
title: string; title: string;
fontFamily?: string; fontFamily?: string;
fontSize?: string; fontSize?: string;
fontWeight?: "Light" | "Regular" | "Bold"; fontWeight?: "Light" | "Regular" | "Bold";
data: any; data: any;
} }
const LineGraphComponent = ({ const LineGraphComponent = ({
title, title,
fontFamily, fontFamily,
fontSize, fontSize,
fontWeight = "Regular", fontWeight = "Regular",
}: ChartComponentProps) => { }: ChartComponentProps) => {
// Memoize Font Weight Mapping // Memoize Font Weight Mapping
const chartFontWeightMap = useMemo( const chartFontWeightMap = useMemo(
() => ({ () => ({
Light: "lighter" as const, Light: "lighter" as const,
Regular: "normal" as const, Regular: "normal" as const,
Bold: "bold" as const, Bold: "bold" as const,
}), }),
[] []
); );
// Parse and Memoize Font Size // Parse and Memoize Font Size
const fontSizeValue = useMemo( const fontSizeValue = useMemo(
() => (fontSize ? parseInt(fontSize) : 12), () => (fontSize ? parseInt(fontSize) : 12),
[fontSize] [fontSize]
); );
// Determine and Memoize Font Weight // Determine and Memoize Font Weight
const fontWeightValue = useMemo( const fontWeightValue = useMemo(
() => chartFontWeightMap[fontWeight], () => chartFontWeightMap[fontWeight],
[fontWeight, chartFontWeightMap] [fontWeight, chartFontWeightMap]
); );
// Memoize Chart Font Style // Memoize Chart Font Style
const chartFontStyle = useMemo( const chartFontStyle = useMemo(
() => ({ () => ({
family: fontFamily || "Arial", family: fontFamily || "Arial",
size: fontSizeValue, size: fontSizeValue,
weight: fontWeightValue, weight: fontWeightValue,
}), }),
[fontFamily, fontSizeValue, fontWeightValue] [fontFamily, fontSizeValue, fontWeightValue]
); );
const options = useMemo( const options = useMemo(
() => ({ () => ({
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
plugins: { plugins: {
title: { title: {
display: true, display: true,
text: title, text: title,
font: chartFontStyle, font: chartFontStyle,
}, },
legend: { legend: {
display: false, display: false,
}, },
}, },
scales: { scales: {
x: { x: {
ticks: { ticks: {
display: false, // This hides the x-axis labels display: false, // This hides the x-axis labels
}, },
}, },
}, },
}), }),
[title, chartFontStyle] [title, chartFontStyle]
); );
const chartData = { const chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"], labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [ datasets: [
{ {
label: "My First Dataset", label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40], data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple) backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple)
borderColor: "#ffffff", // Keeping border color white borderColor: "#ffffff", // Keeping border color white
borderWidth: 2, borderWidth: 2,
fill: false, fill: false,
}, },
], ],
}; };
return <Line data={chartData} options={options} />; return <Line data={chartData} options={options} />;
}; };
export default LineGraphComponent; export default LineGraphComponent;

180
app/src/components/ui/charts/PieGraphComponent.tsx → app/src/modules/visualization/charts/PieGraphComponent.tsx
View File

@ -1,90 +1,90 @@
import { useMemo } from "react"; import { useMemo } from "react";
import { Pie } from "react-chartjs-2"; import { Pie } from "react-chartjs-2";
interface ChartComponentProps { interface ChartComponentProps {
type: any; type: any;
title: string; title: string;
fontFamily?: string; fontFamily?: string;
fontSize?: string; fontSize?: string;
fontWeight?: "Light" | "Regular" | "Bold"; fontWeight?: "Light" | "Regular" | "Bold";
data: any; data: any;
} }
const PieChartComponent = ({ const PieChartComponent = ({
title, title,
fontFamily, fontFamily,
fontSize, fontSize,
fontWeight = "Regular", fontWeight = "Regular",
}: ChartComponentProps) => { }: ChartComponentProps) => {
// Memoize Font Weight Mapping // Memoize Font Weight Mapping
const chartFontWeightMap = useMemo( const chartFontWeightMap = useMemo(
() => ({ () => ({
Light: "lighter" as const, Light: "lighter" as const,
Regular: "normal" as const, Regular: "normal" as const,
Bold: "bold" as const, Bold: "bold" as const,
}), }),
[] []
); );
// Parse and Memoize Font Size // Parse and Memoize Font Size
const fontSizeValue = useMemo( const fontSizeValue = useMemo(
() => (fontSize ? parseInt(fontSize) : 12), () => (fontSize ? parseInt(fontSize) : 12),
[fontSize] [fontSize]
); );
// Determine and Memoize Font Weight // Determine and Memoize Font Weight
const fontWeightValue = useMemo( const fontWeightValue = useMemo(
() => chartFontWeightMap[fontWeight], () => chartFontWeightMap[fontWeight],
[fontWeight, chartFontWeightMap] [fontWeight, chartFontWeightMap]
); );
// Memoize Chart Font Style // Memoize Chart Font Style
const chartFontStyle = useMemo( const chartFontStyle = useMemo(
() => ({ () => ({
family: fontFamily || "Arial", family: fontFamily || "Arial",
size: fontSizeValue, size: fontSizeValue,
weight: fontWeightValue, weight: fontWeightValue,
}), }),
[fontFamily, fontSizeValue, fontWeightValue] [fontFamily, fontSizeValue, fontWeightValue]
); );
// Access the CSS variable for the primary accent color // Access the CSS variable for the primary accent color
const accentColor = getComputedStyle(document.documentElement) const accentColor = getComputedStyle(document.documentElement)
.getPropertyValue("--accent-color") .getPropertyValue("--accent-color")
.trim(); .trim();
const options = useMemo( const options = useMemo(
() => ({ () => ({
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
plugins: { plugins: {
title: { title: {
display: true, display: true,
text: title, text: title,
font: chartFontStyle, font: chartFontStyle,
}, },
legend: { legend: {
display: false, display: false,
}, },
}, },
}), }),
[title, chartFontStyle] [title, chartFontStyle]
); );
const chartData = { const chartData = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [ datasets: [
{ {
label: "Dataset", label: "Dataset",
data: [12, 19, 3, 5, 2, 3], data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["#6f42c1"], backgroundColor: ["#6f42c1"],
borderColor: "#ffffff", borderColor: "#ffffff",
borderWidth: 2, borderWidth: 2,
}, },
], ],
}; };
return <Pie data={chartData} options={options} />; return <Pie data={chartData} options={options} />;
}; };
export default PieChartComponent; export default PieChartComponent;

0
app/src/components/ui/componets/zoneCameraTarget.tsx → app/src/modules/visualization/functions/zoneCameraTarget.tsx
View File

36
app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
View File

@ -89,9 +89,7 @@ export const DraggableWidget = ({
width: 0, width: 0,
height: 0, height: 0,
}); });
useEffect(() => { useEffect(() => {}, [measurements, duration, name]);
console.log("changes loggggg", measurements, duration, name);
}, [measurements, duration, name])
const handlePointerDown = () => { const handlePointerDown = () => {
if (selectedChartId?.id !== widget.id) { if (selectedChartId?.id !== widget.id) {
setSelectedChartId(widget); setSelectedChartId(widget);
@ -148,7 +146,7 @@ export const DraggableWidget = ({
const getCurrentWidgetCount = (panel: Side) => const getCurrentWidgetCount = (panel: Side) =>
selectedZone.widgets.filter((w) => w.panel === panel).length; selectedZone.widgets.filter((w) => w.panel === panel).length;
// Calculate panel capacity // Calculate panel capacity
const calculatePanelCapacity = (panel: Side) => { const calculatePanelCapacity = (panel: Side) => {
const CHART_WIDTH = panelSize; const CHART_WIDTH = panelSize;
const CHART_HEIGHT = panelSize; const CHART_HEIGHT = panelSize;
@ -167,25 +165,22 @@ export const DraggableWidget = ({
const currentWidgetCount = getCurrentWidgetCount(panel); const currentWidgetCount = getCurrentWidgetCount(panel);
const panelCapacity = calculatePanelCapacity(panel); const panelCapacity = calculatePanelCapacity(panel);
return currentWidgetCount > panelCapacity; return currentWidgetCount > panelCapacity;
}; };
const duplicateWidget = async () => { const duplicateWidget = async () => {
try { try {
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
console.log("widget data sent", widget);
const duplicatedWidget: Widget = { const duplicatedWidget: Widget = {
...widget, ...widget,
Data: { Data: {
duration: duration, duration: duration,
measurements: { ...measurements } measurements: { ...measurements },
}, },
id: `${widget.id}-copy-${Date.now()}`, id: `${widget.id}-copy-${Date.now()}`,
}; };
console.log("duplicatedWidget: ", duplicatedWidget);
let duplicateWidget = { let duplicateWidget = {
organization: organization, organization: organization,
@ -193,8 +188,6 @@ export const DraggableWidget = ({
widget: duplicatedWidget, widget: duplicatedWidget,
}; };
if (visualizationSocket) { if (visualizationSocket) {
console.log("duplecate widget", duplicateWidget);
visualizationSocket.emit("v2:viz-widget:add", duplicateWidget); visualizationSocket.emit("v2:viz-widget:add", duplicateWidget);
} }
setSelectedZone((prevZone: any) => ({ setSelectedZone((prevZone: any) => ({
@ -293,20 +286,12 @@ export const DraggableWidget = ({
return ( return (
<> <>
<style>
{`
:root {
--realTimeViz-container-width: ${canvasDimensions.width}px;
--realTimeViz-container-height: ${canvasDimensions.height}px;
}
`}
</style>
<div <div
draggable draggable
key={widget.id} key={widget.id}
className={`chart-container ${selectedChartId?.id === widget.id && !isPlaying && "activeChart" className={`chart-container ${
}`} selectedChartId?.id === widget.id && !isPlaying && "activeChart"
}`}
onPointerDown={handlePointerDown} onPointerDown={handlePointerDown}
onDragStart={handleDragStart} onDragStart={handleDragStart}
onDragEnter={handleDragEnter} onDragEnter={handleDragEnter}
@ -317,7 +302,7 @@ export const DraggableWidget = ({
? `calc(${canvasDimensions.width}px / 6)` ? `calc(${canvasDimensions.width}px / 6)`
: undefined, : undefined,
height: ["left", "right"].includes(widget.panel) height: ["left", "right"].includes(widget.panel)
? `calc(${canvasDimensions.height - 10}px / 4)` ? `calc(${canvasDimensions.height - 15}px / 4)`
: undefined, : undefined,
}} }}
ref={chartWidget} ref={chartWidget}
@ -332,8 +317,9 @@ export const DraggableWidget = ({
{openKebabId === widget.id && ( {openKebabId === widget.id && (
<div className="kebab-options" ref={widgetRef}> <div className="kebab-options" ref={widgetRef}>
<div <div
className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : "" className={`edit btn ${
}`} isPanelFull(widget.panel) ? "btn-blur" : ""
}`}
onClick={duplicateWidget} onClick={duplicateWidget}
> >
<div className="icon"> <div className="icon">

22
app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useMemo, useState } from "react"; import React, { useEffect, useMemo, useState } from "react";
import { Line } from "react-chartjs-2"; import { Doughnut } from "react-chartjs-2";
import io from "socket.io-client"; import io from "socket.io-client";
import axios from "axios"; import axios from "axios";
@ -16,7 +16,7 @@ interface ChartComponentProps {
fontWeight?: "Light" | "Regular" | "Bold"; fontWeight?: "Light" | "Regular" | "Bold";
} }
const LineGraphComponent = ({ const DoughnutGraphComponent = ({
id, id,
type, type,
title, title,
@ -52,7 +52,7 @@ const LineGraphComponent = ({
}; };
useEffect(() => { useEffect(() => {
},[]) },[])
// Memoize Theme Colors // Memoize Theme Colors
@ -97,11 +97,11 @@ const LineGraphComponent = ({
}, },
}, },
scales: { scales: {
x: { // x: {
ticks: { // ticks: {
display: true, // This hides the x-axis labels // display: true, // This hides the x-axis labels
}, // },
}, // },
}, },
}), }),
[title, chartFontStyle, name] [title, chartFontStyle, name]
@ -161,8 +161,6 @@ const LineGraphComponent = ({
try { try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`); const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
if (response.status === 200) { if (response.status === 200) {
console.log('line chart res',response);
setmeasurements(response.data.Data.measurements) setmeasurements(response.data.Data.measurements)
setDuration(response.data.Data.duration) setDuration(response.data.Data.duration)
setName(response.data.widgetName) setName(response.data.widgetName)
@ -186,7 +184,7 @@ const LineGraphComponent = ({
} }
,[chartMeasurements, chartDuration, widgetName]) ,[chartMeasurements, chartDuration, widgetName])
return <Line data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />; return <Doughnut data={Object.keys(measurements).length > 0 ? chartData : defaultData} options={options} />;
}; };
export default LineGraphComponent; export default DoughnutGraphComponent;

2
app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx
View File

@ -238,7 +238,7 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
rotation={rotation} rotation={rotation}
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
transform transform
zIndexRange={[1, 0]}
sprite={false} sprite={false}
// style={{ // style={{
// transform: transformStyle.transform, // transform: transformStyle.transform,

8
app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
View File

@ -121,10 +121,12 @@ const DroppedObjects: React.FC = () => {
function handleDuplicate(zoneName: string, index: number) { function handleDuplicate(zoneName: string, index: number) {
setOpenKebabId(null); setOpenKebabId(null);
duplicateObject(zoneName, index); // Call the duplicateObject method from the store duplicateObject(zoneName, index); // Call the duplicateObject method from the store
setSelectedChartId(null);
} }
async function handleDelete(zoneName: string, id: string) { async function handleDelete(zoneName: string, id: string) {
try { try {
setSelectedChartId(null);
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
@ -532,7 +534,7 @@ const DroppedObjects: React.FC = () => {
typeof obj.position.left === "number" typeof obj.position.left === "number"
? `calc(${obj.position.left}px + ${ ? `calc(${obj.position.left}px + ${
isPlaying && selectedZone.activeSides.includes("left") isPlaying && selectedZone.activeSides.includes("left")
? `${widthMultiplier - 100}px` ? `${widthMultiplier - 150}px`
: "0px" : "0px"
})` })`
: "auto"; : "auto";
@ -541,11 +543,10 @@ const DroppedObjects: React.FC = () => {
typeof obj.position.right === "number" typeof obj.position.right === "number"
? `calc(${obj.position.right}px + ${ ? `calc(${obj.position.right}px + ${
isPlaying && selectedZone.activeSides.includes("right") isPlaying && selectedZone.activeSides.includes("right")
? `${widthMultiplier - 100}px` ? `${widthMultiplier - 150}px`
: "0px" : "0px"
})` })`
: "auto"; : "auto";
const bottomPosition = const bottomPosition =
typeof obj.position.bottom === "number" typeof obj.position.bottom === "number"
? `calc(${obj.position.bottom}px + ${ ? `calc(${obj.position.bottom}px + ${
@ -663,4 +664,3 @@ const DroppedObjects: React.FC = () => {
}; };
export default DroppedObjects; export default DroppedObjects;

214
app/src/modules/visualization/widgets/floating/cards/FleetEfficiencyComponent.tsx
View File

@ -1,113 +1,117 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from "react";
import { Line } from 'react-chartjs-2' import { Line } from "react-chartjs-2";
import useChartStore from '../../../../../store/useChartStore'; import useChartStore from "../../../../../store/useChartStore";
import { useWidgetStore } from '../../../../../store/useWidgetStore'; import { useWidgetStore } from "../../../../../store/useWidgetStore";
import axios from 'axios'; import axios from "axios";
import io from "socket.io-client"; import io from "socket.io-client";
import { usePlayButtonStore } from "../../../../../store/usePlayButtonStore";
const FleetEfficiencyComponent = ({object}: any) => { const FleetEfficiencyComponent = ({ object }: any) => {
const [ progress, setProgress ] = useState<any>(0) const [progress, setProgress] = useState<any>(0);
const [measurements, setmeasurements] = useState<any>({}); const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h") const [duration, setDuration] = useState("1h");
const [name, setName] = useState(object.header ? object.header : '') const [name, setName] = useState(object.header ? object.header : "");
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0] const organization = email?.split("@")[1]?.split(".")[0];
const { header, flotingDuration, flotingMeasurements } = useChartStore(); const { header, flotingDuration, flotingMeasurements } = useChartStore();
const { selectedChartId } = useWidgetStore(); const { selectedChartId } = useWidgetStore();
const { isPlaying } = usePlayButtonStore();
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
// Calculate the rotation angle for the progress bar // Calculate the rotation angle for the progress bar
const rotationAngle = 45 + progress * 1.8; const rotationAngle = 45 + progress * 1.8;
useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
return;
useEffect(() => { const socket = io(`http://${iotApiUrl}`);
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
const inputData = {
const socket = io(`http://${iotApiUrl}`); measurements,
duration,
const inputData = { interval: 1000,
measurements, };
duration,
interval: 1000, const startStream = () => {
}; socket.emit("lastInput", inputData);
};
const startStream = () => { socket.on("connect", startStream);
socket.emit("lastInput", inputData);
}; socket.on("lastOutput", (response) => {
const responseData = response.input1;
socket.on("connect", startStream); // console.log(responseData);
socket.on("lastOutput", (response) => { if (typeof responseData === "number") {
const responseData = response.input1; console.log("It's a number!");
// console.log(responseData); setProgress(responseData);
if (typeof responseData === "number") {
console.log("It's a number!");
setProgress(responseData);
}
});
return () => {
socket.off("lastOutput");
socket.emit("stop_stream"); // Stop streaming when component unmounts
socket.disconnect();
};
}, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => {
if (object?.id !== "") {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`);
if (response.status === 200) {
setmeasurements(response.data.Data.measurements)
setDuration(response.data.Data.duration)
setName(response.data.header)
} else {
console.log("Unexpected response:", response);
}
} catch (error) {
console.error("There was an error!", error);
}
}
} }
});
useEffect(() => {
fetchSavedInputes();
}, []);
useEffect(() => {
if (selectedChartId?.id === object?.id) {
fetchSavedInputes();
}
}
,[header, flotingDuration, flotingMeasurements])
return (
<>
<h2 className="header">{name}</h2>
<div className="progressContainer">
<div className="progress">
<div className="barOverflow">
<div
className="bar"
style={{ transform: `rotate(${rotationAngle}deg)` }}
></div>
</div>
</div>
</div>
<div className="scaleLabels">
<span>0%</span>
<div className="centerText">
<div className="percentage">{progress}%</div>
<div className="status">Optimal</div>
</div>
<span>100%</span>
</div>
</>
)
}
export default FleetEfficiencyComponent return () => {
socket.off("lastOutput");
socket.emit("stop_stream"); // Stop streaming when component unmounts
socket.disconnect();
};
}, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async () => {
if (object?.id !== "") {
try {
const response = await axios.get(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`
);
if (response.status === 200) {
setmeasurements(response.data.Data.measurements);
setDuration(response.data.Data.duration);
setName(response.data.header);
} else {
console.log("Unexpected response:", response);
}
} catch (error) {
console.error("There was an error!", error);
}
}
};
useEffect(() => {
fetchSavedInputes();
}, []);
useEffect(() => {
if (selectedChartId?.id === object?.id) {
fetchSavedInputes();
}
}, [header, flotingDuration, flotingMeasurements]);
return (
<>
<h2 className="header">{name}</h2>
<div
className="progressContainer"
style={{ transform: isPlaying ? "skew(-14deg, 0deg)" : "none" }}
>
<div className="progress">
<div className="barOverflow">
<div
className="bar"
style={{ transform: `rotate(${rotationAngle}deg)` }}
></div>
</div>
</div>
</div>
<div className="scaleLabels">
<span>0%</span>
<div className="centerText">
<div className="percentage">{progress}%</div>
<div className="status">Optimal</div>
</div>
<span>100%</span>
</div>
</>
);
};
export default FleetEfficiencyComponent;

31
app/src/modules/visualization/widgets/panel/AddButtons.tsx
View File

@ -128,6 +128,12 @@ const AddButtons: React.FC<ButtonsProps> = ({
const cleanPanel = async (side: Side) => { const cleanPanel = async (side: Side) => {
//add api //add api
// console.log('side: ', side); // console.log('side: ', side);
if (
hiddenPanels[selectedZone.zoneId]?.includes(side) ||
selectedZone.lockedPanels.includes(side)
)
return;
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
@ -197,13 +203,12 @@ const AddButtons: React.FC<ButtonsProps> = ({
} }
setSelectedZone(updatedZone); setSelectedZone(updatedZone);
if (hiddenPanels[selectedZone.zoneId]?.includes(side)) { if (hiddenPanels[selectedZone.zoneId]?.includes(side)) {
setHiddenPanels((prev) => ({
setHiddenPanels(prev => ({
...prev, ...prev,
[selectedZone.zoneId]: prev[selectedZone.zoneId].filter(s => s !== side) [selectedZone.zoneId]: prev[selectedZone.zoneId].filter(
(s) => s !== side
),
})); }));
} }
@ -284,10 +289,11 @@ const AddButtons: React.FC<ButtonsProps> = ({
<div className="extra-Bs"> <div className="extra-Bs">
{/* Hide Panel */} {/* Hide Panel */}
<div <div
className={`icon ${hiddenPanels[selectedZone.zoneId]?.includes(side) className={`icon ${
? "active" hiddenPanels[selectedZone.zoneId]?.includes(side)
: "" ? "active"
}`} : ""
}`}
title={ title={
hiddenPanels[selectedZone.zoneId]?.includes(side) hiddenPanels[selectedZone.zoneId]?.includes(side)
? "Show Panel" ? "Show Panel"
@ -309,6 +315,13 @@ const AddButtons: React.FC<ButtonsProps> = ({
className="icon" className="icon"
title="Clean Panel" title="Clean Panel"
onClick={() => cleanPanel(side)} onClick={() => cleanPanel(side)}
style={{
cursor:
hiddenPanels[selectedZone.zoneId]?.includes(side) ||
selectedZone.lockedPanels.includes(side)
? "not-allowed"
: "pointer",
}}
> >
<CleanPannel /> <CleanPannel />
</div> </div>

3
app/src/pages/Project.tsx
View File

@ -26,7 +26,7 @@ import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys";
const Project: React.FC = () => { const Project: React.FC = () => {
let navigate = useNavigate(); let navigate = useNavigate();
const { activeModule } = useModuleStore(); const { activeModule, setActiveModule } = useModuleStore();
const { loadingProgress } = useLoadingProgress(); const { loadingProgress } = useLoadingProgress();
const { setUserName } = useUserName(); const { setUserName } = useUserName();
const { setOrganization } = useOrganization(); const { setOrganization } = useOrganization();
@ -38,6 +38,7 @@ const Project: React.FC = () => {
setFloorItems([]); setFloorItems([]);
setWallItems([]); setWallItems([]);
setZones([]); setZones([]);
setActiveModule('builder')
const email = localStorage.getItem("email"); const email = localStorage.getItem("email");
if (email) { if (email) {
const Organization = email!.split("@")[1].split(".")[0]; const Organization = email!.split("@")[1].split(".")[0];

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

@ -1,500 +1,479 @@
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 * as SimulationTypes from "../types/simulation";
import { create } from "zustand"; import { create } from "zustand";
import { io } from "socket.io-client"; import { io } from "socket.io-client";
export const useSocketStore = create<any>((set: any, get: any) => ({ export const useSocketStore = create<any>((set: any, get: any) => ({
socket: null, socket: null,
initializeSocket: (email: string, organization: string) => { initializeSocket: (email: string, organization: string) => {
const existingSocket = get().socket; const existingSocket = get().socket;
if (existingSocket) { if (existingSocket) {
return; return;
} }
const socket = io( const socket = io(
`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`, `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`,
{ {
reconnection: true, reconnection: true,
auth: { email, organization }, auth: { email, organization },
} }
); );
const visualizationSocket = io( const visualizationSocket = io(
`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`, `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`,
{ {
reconnection: true, reconnection: true,
auth: { email, organization }, auth: { email, organization },
} }
); );
set({ socket, visualizationSocket }); set({ socket, visualizationSocket });
}, },
disconnectSocket: () => { disconnectSocket: () => {
set((state: any) => { set((state: any) => {
state.socket?.disconnect(); state.socket?.disconnect();
state.visualizationSocket?.disconnect(); state.visualizationSocket?.disconnect();
return { socket: null }; return { socket: null };
}); });
}, },
})); }));
export const useLoadingProgress = create<{ export const useLoadingProgress = create<{
loadingProgress: number; loadingProgress: number;
setLoadingProgress: (x: number) => void; setLoadingProgress: (x: number) => void;
}>((set) => ({ }>((set) => ({
loadingProgress: 1, loadingProgress: 1,
setLoadingProgress: (x: number) => set({ loadingProgress: x }), setLoadingProgress: (x: number) => set({ loadingProgress: x }),
})); }));
export const useOrganization = create<any>((set: any) => ({ export const useOrganization = create<any>((set: any) => ({
organization: "", organization: "",
setOrganization: (x: any) => set(() => ({ organization: x })), setOrganization: (x: any) => set(() => ({ organization: x })),
})); }));
export const useToggleView = create<any>((set: any) => ({ export const useToggleView = create<any>((set: any) => ({
toggleView: false, toggleView: false,
setToggleView: (x: any) => set(() => ({ toggleView: x })), setToggleView: (x: any) => set(() => ({ toggleView: x })),
})); }));
export const useUpdateScene = create<any>((set: any) => ({ export const useUpdateScene = create<any>((set: any) => ({
updateScene: false, updateScene: false,
setUpdateScene: (x: any) => set(() => ({ updateScene: x })), setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
})); }));
export const useWalls = create<any>((set: any) => ({ export const useWalls = create<any>((set: any) => ({
walls: [], walls: [],
setWalls: (x: any) => set(() => ({ walls: x })), setWalls: (x: any) => set(() => ({ walls: x })),
})); }));
export const useZones = create<any>((set: any) => ({ export const useZones = create<any>((set: any) => ({
zones: [], zones: [],
setZones: (callback: any) => setZones: (callback: any) =>
set((state: any) => ({ set((state: any) => ({
zones: typeof callback === "function" ? callback(state.zones) : callback, zones: typeof callback === "function" ? callback(state.zones) : callback,
})), })),
})); }));
interface ZonePointsState { interface ZonePointsState {
zonePoints: THREE.Vector3[]; zonePoints: THREE.Vector3[];
setZonePoints: (points: THREE.Vector3[]) => void; setZonePoints: (points: THREE.Vector3[]) => void;
} }
export const useZonePoints = create<ZonePointsState>((set) => ({ export const useZonePoints = create<ZonePointsState>((set) => ({
zonePoints: [], zonePoints: [],
setZonePoints: (points) => set({ zonePoints: points }), setZonePoints: (points) => set({ zonePoints: points }),
})); }));
export const useSelectedItem = create<any>((set: any) => ({ export const useSelectedItem = create<any>((set: any) => ({
selectedItem: { name: "", id: "" }, selectedItem: { name: "", id: "" },
setSelectedItem: (x: any) => set(() => ({ selectedItem: x })), setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
})); }));
export const useSelectedAssets = create<any>((set: any) => ({ export const useSelectedAssets = create<any>((set: any) => ({
selectedAssets: [], selectedAssets: [],
setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })), setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
})); }));
export const useLayers = create<any>((set: any) => ({ export const useLayers = create<any>((set: any) => ({
Layers: 1, Layers: 1,
setLayers: (x: any) => set(() => ({ Layers: x })), setLayers: (x: any) => set(() => ({ Layers: x })),
})); }));
export const useCamPosition = create<any>((set: any) => ({ export const useCamPosition = create<any>((set: any) => ({
camPosition: { x: undefined, y: undefined, z: undefined }, camPosition: { x: undefined, y: undefined, z: undefined },
setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }), setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
})); }));
export const useMenuVisible = create<any>((set: any) => ({ export const useMenuVisible = create<any>((set: any) => ({
menuVisible: false, menuVisible: false,
setMenuVisible: (x: any) => set(() => ({ menuVisible: x })), setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
})); }));
export const useDeleteTool = create<any>((set: any) => ({ export const useDeleteTool = create<any>((set: any) => ({
deleteTool: false, deleteTool: false,
setDeleteTool: (x: any) => set(() => ({ deleteTool: x })), setDeleteTool: (x: any) => set(() => ({ deleteTool: x })),
})); }));
export const useToolMode = create<any>((set: any) => ({ export const useToolMode = create<any>((set: any) => ({
toolMode: null, toolMode: null,
setToolMode: (x: any) => set(() => ({ toolMode: x })), setToolMode: (x: any) => set(() => ({ toolMode: x })),
})); }));
export const useNewLines = create<any>((set: any) => ({ export const useNewLines = create<any>((set: any) => ({
newLines: [], newLines: [],
setNewLines: (x: any) => set(() => ({ newLines: x })), setNewLines: (x: any) => set(() => ({ newLines: x })),
})); }));
export const useDeletedLines = create<any>((set: any) => ({ export const useDeletedLines = create<any>((set: any) => ({
deletedLines: [], deletedLines: [],
setDeletedLines: (x: any) => set(() => ({ deletedLines: x })), setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
})); }));
export const useMovePoint = create<any>((set: any) => ({ export const useMovePoint = create<any>((set: any) => ({
movePoint: false, movePoint: false,
setMovePoint: (x: any) => set(() => ({ movePoint: x })), setMovePoint: (x: any) => set(() => ({ movePoint: x })),
})); }));
export const useTransformMode = create<any>((set: any) => ({ export const useTransformMode = create<any>((set: any) => ({
transformMode: null, transformMode: null,
setTransformMode: (x: any) => set(() => ({ transformMode: x })), setTransformMode: (x: any) => set(() => ({ transformMode: x })),
})); }));
export const useDeletePointOrLine = create<any>((set: any) => ({ export const useDeletePointOrLine = create<any>((set: any) => ({
deletePointOrLine: false, deletePointOrLine: false,
setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })), setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
})); }));
export const useFloorItems = create<any>((set: any) => ({ export const useFloorItems = create<any>((set: any) => ({
floorItems: null, floorItems: null,
setFloorItems: (callback: any) => setFloorItems: (callback: any) =>
set((state: any) => ({ set((state: any) => ({
floorItems: floorItems:
typeof callback === "function" ? callback(state.floorItems) : callback, typeof callback === "function" ? callback(state.floorItems) : callback,
})), })),
})); }));
export const useWallItems = create<any>((set: any) => ({ export const useWallItems = create<any>((set: any) => ({
wallItems: [], wallItems: [],
setWallItems: (callback: any) => setWallItems: (callback: any) =>
set((state: any) => ({ set((state: any) => ({
wallItems: wallItems:
typeof callback === "function" ? callback(state.wallItems) : callback, typeof callback === "function" ? callback(state.wallItems) : callback,
})), })),
})); }));
export const useSelectedWallItem = create<any>((set: any) => ({ export const useSelectedWallItem = create<any>((set: any) => ({
selectedWallItem: null, selectedWallItem: null,
setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })), setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
})); }));
export const useSelectedFloorItem = create<any>((set: any) => ({ export const useSelectedFloorItem = create<any>((set: any) => ({
selectedFloorItem: null, selectedFloorItem: null,
setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })), setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
})); }));
export const useDeletableFloorItem = create<any>((set: any) => ({ export const useDeletableFloorItem = create<any>((set: any) => ({
deletableFloorItem: null, deletableFloorItem: null,
setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })), setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
})); }));
export const useSetScale = create<any>((set: any) => ({ export const useSetScale = create<any>((set: any) => ({
scale: null, scale: null,
setScale: (x: any) => set(() => ({ scale: x })), setScale: (x: any) => set(() => ({ scale: x })),
})); }));
export const useRoofVisibility = create<any>((set: any) => ({ export const useRoofVisibility = create<any>((set: any) => ({
roofVisibility: false, roofVisibility: false,
setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })), setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
})); }));
export const useWallVisibility = create<any>((set: any) => ({ export const useWallVisibility = create<any>((set: any) => ({
wallVisibility: false, wallVisibility: false,
setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })), setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
})); }));
export const useShadows = create<any>((set: any) => ({ export const useShadows = create<any>((set: any) => ({
shadows: false, shadows: false,
setShadows: (x: any) => set(() => ({ shadows: x })), setShadows: (x: any) => set(() => ({ shadows: x })),
})); }));
export const useSunPosition = create<any>((set: any) => ({ export const useSunPosition = create<any>((set: any) => ({
sunPosition: { x: undefined, y: undefined, z: undefined }, sunPosition: { x: undefined, y: undefined, z: undefined },
setSunPosition: (newSuntPosition: any) => setSunPosition: (newSuntPosition: any) =>
set({ sunPosition: newSuntPosition }), set({ sunPosition: newSuntPosition }),
})); }));
export const useRemoveLayer = create<any>((set: any) => ({ export const useRemoveLayer = create<any>((set: any) => ({
removeLayer: false, removeLayer: false,
setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })), setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
})); }));
export const useRemovedLayer = create<any>((set: any) => ({ export const useRemovedLayer = create<any>((set: any) => ({
removedLayer: null, removedLayer: null,
setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })), setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
})); }));
export const useActiveLayer = create<any>((set: any) => ({ export const useActiveLayer = create<any>((set: any) => ({
activeLayer: 1, activeLayer: 1,
setActiveLayer: (x: any) => set({ activeLayer: x }), setActiveLayer: (x: any) => set({ activeLayer: x }),
})); }));
interface RefTextUpdateState { interface RefTextUpdateState {
refTextupdate: number; refTextupdate: number;
setRefTextUpdate: ( setRefTextUpdate: (
callback: (currentValue: number) => number | number callback: (currentValue: number) => number | number
) => void; ) => void;
} }
export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({ export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({
refTextupdate: -1000, refTextupdate: -1000,
setRefTextUpdate: (callback) => setRefTextUpdate: (callback) =>
set((state) => ({ set((state) => ({
refTextupdate: refTextupdate:
typeof callback === "function" typeof callback === "function"
? callback(state.refTextupdate) ? callback(state.refTextupdate)
: callback, : callback,
})), })),
})); }));
export const useResetCamera = create<any>((set: any) => ({ export const useResetCamera = create<any>((set: any) => ({
resetCamera: false, resetCamera: false,
setResetCamera: (x: any) => set({ resetCamera: x }), setResetCamera: (x: any) => set({ resetCamera: x }),
})); }));
export const useAddAction = create<any>((set: any) => ({ export const useAddAction = create<any>((set: any) => ({
addAction: null, addAction: null,
setAddAction: (x: any) => set({ addAction: x }), setAddAction: (x: any) => set({ addAction: x }),
})); }));
export const useActiveTool = create<any>((set: any) => ({ export const useActiveTool = create<any>((set: any) => ({
activeTool: "cursor", activeTool: "cursor",
setActiveTool: (x: any) => set({ activeTool: x }), setActiveTool: (x: any) => set({ activeTool: x }),
})); }));
export const useActiveSubTool = create<any>((set: any) => ({ export const useActiveSubTool = create<any>((set: any) => ({
activeSubTool: "cursor", activeSubTool: "cursor",
setActiveSubTool: (x: any) => set({ activeSubTool: x }), setActiveSubTool: (x: any) => set({ activeSubTool: x }),
})); }));
export const use2DUndoRedo = create<any>((set: any) => ({ export const use2DUndoRedo = create<any>((set: any) => ({
is2DUndoRedo: null, is2DUndoRedo: null,
set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }), set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
})); }));
export const useElevation = create<any>((set: any) => ({ export const useElevation = create<any>((set: any) => ({
elevation: 45, elevation: 45,
setElevation: (x: any) => set({ elevation: x }), setElevation: (x: any) => set({ elevation: x }),
})); }));
export const useAzimuth = create<any>((set: any) => ({ export const useAzimuth = create<any>((set: any) => ({
azimuth: -160, azimuth: -160,
setAzimuth: (x: any) => set({ azimuth: x }), setAzimuth: (x: any) => set({ azimuth: x }),
})); }));
export const useRenderDistance = create<any>((set: any) => ({ export const useRenderDistance = create<any>((set: any) => ({
renderDistance: 40, renderDistance: 40,
setRenderDistance: (x: any) => set({ renderDistance: x }), setRenderDistance: (x: any) => set({ renderDistance: x }),
})); }));
export const useCamMode = create<any>((set: any) => ({ export const useCamMode = create<any>((set: any) => ({
camMode: "ThirdPerson", camMode: "ThirdPerson",
setCamMode: (x: any) => set({ camMode: x }), setCamMode: (x: any) => set({ camMode: x }),
})); }));
export const useUserName = create<any>((set: any) => ({ export const useUserName = create<any>((set: any) => ({
userName: "", userName: "",
setUserName: (x: any) => set({ userName: x }), setUserName: (x: any) => set({ userName: x }),
})); }));
export const useObjectPosition = create<any>((set: any) => ({ export const useObjectPosition = create<any>((set: any) => ({
objectPosition: { x: undefined, y: undefined, z: undefined }, objectPosition: { x: undefined, y: undefined, z: undefined },
setObjectPosition: (newObjectPosition: any) => setObjectPosition: (newObjectPosition: any) =>
set({ objectPosition: newObjectPosition }), set({ objectPosition: newObjectPosition }),
})); }));
export const useObjectScale = create<any>((set: any) => ({ export const useObjectScale = create<any>((set: any) => ({
objectScale: { x: undefined, y: undefined, z: undefined }, objectScale: { x: undefined, y: undefined, z: undefined },
setObjectScale: (newObjectScale: any) => set({ objectScale: newObjectScale }), setObjectScale: (newObjectScale: any) => set({ objectScale: newObjectScale }),
})); }));
export const useObjectRotation = create<any>((set: any) => ({ export const useObjectRotation = create<any>((set: any) => ({
objectRotation: { x: undefined, y: undefined, z: undefined }, objectRotation: { x: undefined, y: undefined, z: undefined },
setObjectRotation: (newObjectRotation: any) => setObjectRotation: (newObjectRotation: any) =>
set({ objectRotation: newObjectRotation }), set({ objectRotation: newObjectRotation }),
})); }));
export const useDrieTemp = create<any>((set: any) => ({ export const useDrieTemp = create<any>((set: any) => ({
drieTemp: undefined, drieTemp: undefined,
setDrieTemp: (x: any) => set({ drieTemp: x }), setDrieTemp: (x: any) => set({ drieTemp: x }),
})); }));
export const useActiveUsers = create<any>((set: any) => ({ export const useActiveUsers = create<any>((set: any) => ({
activeUsers: [], activeUsers: [],
setActiveUsers: (callback: (prev: any[]) => any[] | any[]) => setActiveUsers: (callback: (prev: any[]) => any[] | any[]) =>
set((state: { activeUsers: any[] }) => ({ set((state: { activeUsers: any[] }) => ({
activeUsers: activeUsers:
typeof callback === "function" ? callback(state.activeUsers) : callback, typeof callback === "function" ? callback(state.activeUsers) : callback,
})), })),
})); }));
export const useDrieUIValue = create<any>((set: any) => ({ export const useDrieUIValue = create<any>((set: any) => ({
drieUIValue: { touch: null, temperature: null, humidity: null }, drieUIValue: { touch: null, temperature: null, humidity: null },
setDrieUIValue: (x: any) => setDrieUIValue: (x: any) =>
set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })), set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
setTouch: (value: any) => setTouch: (value: any) =>
set((state: any) => ({ set((state: any) => ({
drieUIValue: { ...state.drieUIValue, touch: value }, drieUIValue: { ...state.drieUIValue, touch: value },
})), })),
setTemperature: (value: any) => setTemperature: (value: any) =>
set((state: any) => ({ set((state: any) => ({
drieUIValue: { ...state.drieUIValue, temperature: value }, drieUIValue: { ...state.drieUIValue, temperature: value },
})), })),
setHumidity: (value: any) => setHumidity: (value: any) =>
set((state: any) => ({ set((state: any) => ({
drieUIValue: { ...state.drieUIValue, humidity: value }, drieUIValue: { ...state.drieUIValue, humidity: value },
})), })),
})); }));
export const useDrawMaterialPath = create<any>((set: any) => ({ export const useDrawMaterialPath = create<any>((set: any) => ({
drawMaterialPath: false, drawMaterialPath: false,
setDrawMaterialPath: (x: any) => set({ drawMaterialPath: x }), setDrawMaterialPath: (x: any) => set({ drawMaterialPath: x }),
})); }));
export const useSelectedActionSphere = create<any>((set: any) => ({ export const useSelectedActionSphere = create<any>((set: any) => ({
selectedActionSphere: undefined, selectedActionSphere: undefined,
setSelectedActionSphere: (x: any) => set({ selectedActionSphere: x }), setSelectedActionSphere: (x: any) => set({ selectedActionSphere: x }),
})); }));
export const useSelectedPath = create<any>((set: any) => ({ export const useSelectedPath = create<any>((set: any) => ({
selectedPath: undefined, selectedPath: undefined,
setSelectedPath: (x: any) => set({ selectedPath: x }), setSelectedPath: (x: any) => set({ selectedPath: x }),
})); }));
interface SimulationPathsStore { interface SimulationPathsStore {
simulationStates: ( simulationStates: (SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[];
| Types.ConveyorEventsSchema setSimulationStates: (
| Types.VehicleEventsSchema paths: (| SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[]
| Types.StaticMachineEventsSchema | ((prev: (| SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[])
| Types.ArmBotEventsSchema => (| SimulationTypes.ConveyorEventsSchema | SimulationTypes.VehicleEventsSchema | SimulationTypes.StaticMachineEventsSchema | SimulationTypes.ArmBotEventsSchema)[])
)[]; ) => void;
setSimulationStates: (
paths:
| (
| Types.ConveyorEventsSchema
| Types.VehicleEventsSchema
| Types.StaticMachineEventsSchema
| Types.ArmBotEventsSchema
)[]
| ((
prev: (
| Types.ConveyorEventsSchema
| Types.VehicleEventsSchema
| Types.StaticMachineEventsSchema
| Types.ArmBotEventsSchema
)[]
) => (
| Types.ConveyorEventsSchema
| Types.VehicleEventsSchema
| Types.StaticMachineEventsSchema
| Types.ArmBotEventsSchema
)[])
) => void;
} }
export const useSimulationStates = create<SimulationPathsStore>((set) => ({ export const useSimulationStates = create<SimulationPathsStore>((set) => ({
simulationStates: [], simulationStates: [],
setSimulationStates: (paths) => setSimulationStates: (paths) =>
set((state) => ({ set((state) => ({
simulationStates: simulationStates:
typeof paths === "function" ? paths(state.simulationStates) : paths, typeof paths === "function" ? paths(state.simulationStates) : paths,
})), })),
})); }));
export const useNavMesh = create<any>((set: any) => ({ export const useNavMesh = create<any>((set: any) => ({
navMesh: null, navMesh: null,
setNavMesh: (x: any) => set({ navMesh: x }), setNavMesh: (x: any) => set({ navMesh: x }),
})); }));
export const useIsConnecting = create<any>((set: any) => ({ export const useIsConnecting = create<any>((set: any) => ({
isConnecting: false, isConnecting: false,
setIsConnecting: (x: any) => set({ isConnecting: x }), setIsConnecting: (x: any) => set({ isConnecting: x }),
})); }));
export const useStartSimulation = create<any>((set: any) => ({ export const useStartSimulation = create<any>((set: any) => ({
startSimulation: false, startSimulation: false,
setStartSimulation: (x: any) => set({ startSimulation: x }), setStartSimulation: (x: any) => set({ startSimulation: x }),
})); }));
export const useEyeDropMode = create<any>((set: any) => ({ export const useEyeDropMode = create<any>((set: any) => ({
eyeDropMode: false, eyeDropMode: false,
setEyeDropMode: (x: any) => set({ eyeDropMode: x }), setEyeDropMode: (x: any) => set({ eyeDropMode: x }),
})); }));
export const useEditingPoint = create<any>((set: any) => ({ export const useEditingPoint = create<any>((set: any) => ({
editingPoint: false, editingPoint: false,
setEditingPoint: (x: any) => set({ editingPoint: x }), setEditingPoint: (x: any) => set({ editingPoint: x }),
})); }));
export const usePreviewPosition = create<{ export const usePreviewPosition = create<{
previewPosition: { x: number; y: number } | null; previewPosition: { x: number; y: number } | null;
setPreviewPosition: (position: { x: number; y: number } | null) => void; setPreviewPosition: (position: { x: number; y: number } | null) => void;
}>((set) => ({ }>((set) => ({
previewPosition: null, previewPosition: null,
setPreviewPosition: (position) => set({ previewPosition: position }), setPreviewPosition: (position) => set({ previewPosition: position }),
})); }));
export const usezoneTarget = create<any>((set: any) => ({ export const usezoneTarget = create<any>((set: any) => ({
zoneTarget: [], zoneTarget: [],
setZoneTarget: (x: any) => set({ zoneTarget: x }), setZoneTarget: (x: any) => set({ zoneTarget: x }),
})); }));
export const usezonePosition = create<any>((set: any) => ({ export const usezonePosition = create<any>((set: any) => ({
zonePosition: [], zonePosition: [],
setZonePosition: (x: any) => set({ zonePosition: x }), setZonePosition: (x: any) => set({ zonePosition: x }),
})); }));
interface EditPositionState { interface EditPositionState {
Edit: boolean; Edit: boolean;
setEdit: (value: boolean) => void; setEdit: (value: boolean) => void;
} }
export const useEditPosition = create<EditPositionState>((set) => ({ export const useEditPosition = create<EditPositionState>((set) => ({
Edit: false, Edit: false,
setEdit: (value) => set({ Edit: value }), // Properly updating the state setEdit: (value) => set({ Edit: value }), // Properly updating the state
})); }));
export const useAsset3dWidget = create<any>((set: any) => ({ export const useAsset3dWidget = create<any>((set: any) => ({
widgetSelect: "", widgetSelect: "",
setWidgetSelect: (x: any) => set({ widgetSelect: x }), setWidgetSelect: (x: any) => set({ widgetSelect: x }),
})); }));
export const useWidgetSubOption = create<any>((set: any) => ({ export const useWidgetSubOption = create<any>((set: any) => ({
widgetSubOption: "2D", widgetSubOption: "2D",
setWidgetSubOption: (x: any) => set({ widgetSubOption: x }), setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
})); }));
export const useLimitDistance = create<any>((set: any) => ({ export const useLimitDistance = create<any>((set: any) => ({
limitDistance: true, limitDistance: true,
setLimitDistance: (x: any) => set({ limitDistance: x }), setLimitDistance: (x: any) => set({ limitDistance: x }),
})); }));
export const useTileDistance = create<any>((set: any) => ({ export const useTileDistance = create<any>((set: any) => ({
gridValue: { size: 300, divisions: 75 }, gridValue: { size: 300, divisions: 75 },
planeValue: { height: 300, width: 300 }, planeValue: { height: 300, width: 300 },
setGridValue: (value: any) => setGridValue: (value: any) =>
set((state: any) => ({ set((state: any) => ({
gridValue: { ...state.gridValue, ...value }, gridValue: { ...state.gridValue, ...value },
})), })),
setPlaneValue: (value: any) => setPlaneValue: (value: any) =>
set((state: any) => ({ set((state: any) => ({
planeValue: { ...state.planeValue, ...value }, planeValue: { ...state.planeValue, ...value },
})), })),
})); }));
export const usePlayAgv = create<any>((set, get) => ({ export const usePlayAgv = create<any>((set, get) => ({
PlayAgv: [], PlayAgv: [],
setPlayAgv: (updateFn: (prev: any[]) => any[]) => setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
set({ PlayAgv: updateFn(get().PlayAgv) }), set({ PlayAgv: updateFn(get().PlayAgv) }),
})); }));
// Define the Asset type // Define the Asset type
type Asset = { type Asset = {
id: string; id: string;
name: string; name: string;
position?: [number, number, number]; // Optional: 3D position position?: [number, number, number]; // Optional: 3D position
rotation?: { x: number; y: number; z: number }; // Optional: Euler rotation rotation?: { x: number; y: number; z: number }; // Optional: Euler rotation
}; };
// Zustand store type // Zustand store type
type ZoneAssetState = { type ZoneAssetState = {
zoneAssetId: Asset | null; zoneAssetId: Asset | null;
setZoneAssetId: (asset: Asset | null) => void; setZoneAssetId: (asset: Asset | null) => void;
}; };
// Zustand store // Zustand store
export const useZoneAssetId = create<ZoneAssetState>((set) => ({ export const useZoneAssetId = create<ZoneAssetState>((set) => ({
zoneAssetId: null, zoneAssetId: null,
setZoneAssetId: (asset) => set({ zoneAssetId: asset }), setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
})); }));

39
app/src/styles/components/input.scss
View File

@ -344,6 +344,45 @@ input {
padding: 10px; padding: 10px;
} }
.loading {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
/* slim progress bar */
width: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0.05);
/* optional track background */
}
.loading::before {
content: "";
position: absolute;
top: 0;
left: -50%;
height: 100%;
width: 50%;
background: linear-gradient(to right,
var(--accent-color),
transparent);
animation: loadingAnimation 1.2s linear infinite;
border-radius: 4px;
}
@keyframes loadingAnimation {
0% {
left: -50%;
}
100% {
left: 100%;
}
}
.dropdown-item { .dropdown-item {
display: block; display: block;
padding: 5px 10px; padding: 5px 10px;

3
app/src/styles/components/visualization/floating/common.scss
View File

@ -480,3 +480,6 @@
} }
// progress should be progress {progress} // progress should be progress {progress}

163
app/src/types/simulation.d.ts vendored Normal file
View File

@ -0,0 +1,163 @@
interface PathConnection {
fromModelUUID: string;
fromUUID: string;
toConnections: {
toModelUUID: string;
toUUID: string;
}[];
}
interface ConnectionStore {
connections: PathConnection[];
setConnections: (connections: PathConnection[]) => void;
addConnection: (newConnection: PathConnection) => void;
removeConnection: (fromUUID: string, toUUID: string) => void;
}
interface ConveyorEventsSchema {
modeluuid: string;
modelName: string;
type: "Conveyor";
points: {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
actions: { uuid: string; name: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean; }[] | [];
triggers: { uuid: string; name: string; type: string; isUsed: boolean; bufferTime: number; }[] | [];
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
}[];
position: [number, number, number];
rotation: [number, number, number];
speed: number | string;
}
interface VehicleEventsSchema {
modeluuid: string;
modelName: string;
type: "Vehicle";
points: {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
actions: { uuid: string; name: string; type: string; start: { x: number; y: number } | {}; hitCount: number; end: { x: number; y: number } | {}; buffer: number; };
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
speed: number;
isPlaying: boolean;
};
position: [number, number, number];
rotation: [number, number, number];
}
interface StaticMachineEventsSchema {
modeluuid: string;
modelName: string;
type: "StaticMachine";
points: {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
actions: { uuid: string; name: string; buffer: number | string; material: string; isUsed: boolean; };
triggers: { uuid: string; name: string; type: string };
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
};
position: [number, number, number];
rotation: [number, number, number];
}
interface ArmBotEventsSchema {
modeluuid: string;
modelName: string;
type: "ArmBot";
points: {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string }[]; };
triggers: { uuid: string; name: string; type: string };
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
};
position: [number, number, number];
rotation: [number, number, number];
}
export type EventData = {
modeluuid: string;
modelname: string;
position: [number, number, number];
rotation: { x: number; y: number; z: number };
modelfileID: string;
isLocked: boolean;
isVisible: boolean;
eventData?:
| {
type: "Conveyor";
points: {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
actions: { uuid: string; name: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean; }[] | [];
triggers: { uuid: string; name: string; type: string; isUsed: boolean; bufferTime: number; }[] | [];
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
}[];
speed: number | string;
}
| {
type: "Vehicle";
points: {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
actions: { uuid: string; name: string; type: string; start: { x: number; y: number } | {}; hitCount: number; end: { x: number; y: number } | {}; buffer: number; };
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
speed: number;
};
}
| {
type: "StaticMachine";
points: {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
actions: { uuid: string; name: string; buffer: number; material: string; };
triggers: { uuid: string; name: string; type: string };
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
};
}
| {
type: "ArmBot";
points: {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
actions: { uuid: string; name: string; speed: number; processes: { triggerId: string; startPoint: string; endPoint: string; }[]; };
triggers: { uuid: string; name: string; type: string };
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
};
};
};

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

@ -47,9 +47,7 @@ export type Shape = THREE.Shape;
export type IntersectionEvent = THREE.Intersection; export type IntersectionEvent = THREE.Intersection;
// Array type for intersections with objects in the scene // Array type for intersections with objects in the scene
export type IntersectsType = THREE.Intersection< export type IntersectsType = THREE.Intersection<THREE.Object3D<THREE.Object3DEventMap>>[];
THREE.Object3D<THREE.Object3DEventMap>
>[];
// Event type for mesh interactions // Event type for mesh interactions
export type MeshEvent = IntersectionEvent<MouseEvent>; export type MeshEvent = IntersectionEvent<MouseEvent>;
@ -107,9 +105,7 @@ export type NumberArray = number[];
export type RefRaycaster = React.MutableRefObject<THREE.Raycaster>; export type RefRaycaster = React.MutableRefObject<THREE.Raycaster>;
// Camera reference, supporting both perspective and basic cameras // Camera reference, supporting both perspective and basic cameras
export type RefCamera = React.MutableRefObject< export type RefCamera = React.MutableRefObject<THREE.Camera | THREE.PerspectiveCamera>;
THREE.Camera | THREE.PerspectiveCamera
>;
/** Three.js Root State Management **/ /** Three.js Root State Management **/
@ -134,11 +130,11 @@ export type Lines = Array<Line>;
// Defines a wall with its geometry, position, rotation, material, and layer information // Defines a wall with its geometry, position, rotation, material, and layer information
export type Wall = [ export type Wall = [
THREE.ExtrudeGeometry, THREE.ExtrudeGeometry,
[number, number, number], [number, number, number],
[number, number, number], [number, number, number],
string, string,
number number
]; ];
// Collection of walls, useful in scene construction // Collection of walls, useful in scene construction
@ -148,18 +144,10 @@ export type Walls = Array<Wall>;
export type RefWalls = React.MutableRefObject<Walls>; export type RefWalls = React.MutableRefObject<Walls>;
// Room type, containing coordinates and layer metadata for spatial management // Room type, containing coordinates and layer metadata for spatial management
export type Rooms = Array<{ export type Rooms = Array<{ coordinates: Array<{ position: THREE.Vector3; uuid: string }>; layer: number; }>;
coordinates: Array<{ position: THREE.Vector3; uuid: string }>;
layer: number;
}>;
// Reference for room objects, enabling updates within React components // Reference for room objects, enabling updates within React components
export type RefRooms = React.MutableRefObject< export type RefRooms = React.MutableRefObject<Array<{ coordinates: Array<{ position: THREE.Vector3; uuid: string }>; layer: number; }>>;
Array<{
coordinates: Array<{ position: THREE.Vector3; uuid: string }>;
layer: number;
}>
>;
// Reference for lines, supporting React-based state changes // Reference for lines, supporting React-based state changes
export type RefLines = React.MutableRefObject<Lines>; export type RefLines = React.MutableRefObject<Lines>;
@ -182,10 +170,10 @@ export type RefOnlyFloorLines = React.MutableRefObject<OnlyFloorLines>;
// Structure for representing GeoJSON lines, integrating external data sources // Structure for representing GeoJSON lines, integrating external data sources
export type GeoJsonLine = { export type GeoJsonLine = {
line: any; line: any;
uuids: [string, string]; uuids: [string, string];
layer: number; layer: number;
type: string; type: string;
}; };
/** State Management Types for React Components **/ /** State Management Types for React Components **/
@ -201,67 +189,59 @@ export type RefTubeGeometry = React.MutableRefObject<THREE.TubeGeometry | null>;
// Type for individual items placed on the floor, with positioning and rotation metadata // Type for individual items placed on the floor, with positioning and rotation metadata
export type FloorItemType = { export type FloorItemType = {
modeluuid: string; modeluuid: string;
modelname: string; modelname: string;
position: [number, number, number]; position: [number, number, number];
rotation: { x: number; y: number; z: number }; rotation: { x: number; y: number; z: number };
modelfileID: string; modelfileID: string;
isLocked: boolean; isLocked: boolean;
isVisible: boolean; isVisible: boolean;
}; };
// Array of floor items for managing multiple objects on the floor // Array of floor items for managing multiple objects on the floor
export type FloorItems = Array<FloorItemType>; export type FloorItems = Array<FloorItemType>;
// Dispatch type for setting floor item state in React // Dispatch type for setting floor item state in React
export type setFloorItemSetState = React.Dispatch< export type setFloorItemSetState = React.Dispatch<React.SetStateAction<FloorItems | null | undefined>>;
React.SetStateAction<FloorItems | null | undefined>
>;
/** Asset Configuration for Loading and Positioning **/ /** Asset Configuration for Loading and Positioning **/
// Configuration for assets, allowing model URLs, scaling, positioning, and types // Configuration for assets, allowing model URLs, scaling, positioning, and types
interface AssetConfiguration { interface AssetConfiguration {
modelUrl: string; modelUrl: string;
scale?: [number, number, number]; scale?: [number, number, number];
csgscale?: [number, number, number]; csgscale?: [number, number, number];
csgposition?: [number, number, number]; csgposition?: [number, number, number];
positionY?: (intersectionPoint: { point: THREE.Vector3 }) => number; positionY?: (intersectionPoint: { point: THREE.Vector3 }) => number;
type?: "Fixed-Move" | "Free-Move"; type?: "Fixed-Move" | "Free-Move";
} }
// Collection of asset configurations, keyed by unique identifiers // Collection of asset configurations, keyed by unique identifiers
export type AssetConfigurations = { export type AssetConfigurations = { [key: string]: AssetConfiguration; };
[key: string]: AssetConfiguration;
};
/** Wall Item Configuration **/ /** Wall Item Configuration **/
// Configuration for wall items, including model, scale, position, and rotation // Configuration for wall items, including model, scale, position, and rotation
interface WallItem { interface WallItem {
type: "Fixed-Move" | "Free-Move" | undefined; type: "Fixed-Move" | "Free-Move" | undefined;
model?: THREE.Group; model?: THREE.Group;
modeluuid?: string; modeluuid?: string;
modelname?: string; modelname?: string;
scale?: [number, number, number]; scale?: [number, number, number];
csgscale?: [number, number, number]; csgscale?: [number, number, number];
csgposition?: [number, number, number]; csgposition?: [number, number, number];
position?: [number, number, number]; position?: [number, number, number];
quaternion?: Types.QuaternionType; quaternion?: Types.QuaternionType;
} }
// Collection of wall items, allowing for multiple items in a scene // Collection of wall items, allowing for multiple items in a scene
export type wallItems = Array<WallItem>; export type wallItems = Array<WallItem>;
// Dispatch for setting wall item state in React // Dispatch for setting wall item state in React
export type setWallItemSetState = React.Dispatch< export type setWallItemSetState = React.Dispatch<React.SetStateAction<WallItem[]>>;
React.SetStateAction<WallItem[]>
>;
// Dispatch for setting vector3 state in React // Dispatch for setting vector3 state in React
export type setVector3State = React.Dispatch< export type setVector3State = React.Dispatch<React.SetStateAction<THREE.Vector3>>;
React.SetStateAction<THREE.Vector3>
>;
// Dispatch for setting euler state in React // Dispatch for setting euler state in React
export type setEulerState = React.Dispatch<React.SetStateAction<THREE.Euler>>; export type setEulerState = React.Dispatch<React.SetStateAction<THREE.Euler>>;
@ -274,245 +254,8 @@ export type RefWallItems = React.MutableRefObject<WallItem[]>;
// State management for selecting, removing, and indexing wall items // State management for selecting, removing, and indexing wall items
export type setRemoveLayerSetState = (layer: number | null) => void; export type setRemoveLayerSetState = (layer: number | null) => void;
export type setSelectedWallItemSetState = (item: THREE.Object3D | null) => void; export type setSelectedWallItemSetState = (item: THREE.Object3D | null) => void;
export type setSelectedFloorItemSetState = ( export type setSelectedFloorItemSetState = (item: THREE.Object3D | null) => void;
item: THREE.Object3D | null
) => void;
export type setSelectedItemsIndexSetState = (index: number | null) => void; export type setSelectedItemsIndexSetState = (index: number | null) => void;
export type RefCSM = React.MutableRefObject<CSM>; export type RefCSM = React.MutableRefObject<CSM>;
export type RefCSMHelper = React.MutableRefObject<CSMHelper>; export type RefCSMHelper = React.MutableRefObject<CSMHelper>;
interface PathConnection {
fromModelUUID: string;
fromUUID: string;
toConnections: {
toModelUUID: string;
toUUID: string;
}[];
}
interface ConnectionStore {
connections: PathConnection[];
setConnections: (connections: PathConnection[]) => void;
addConnection: (newConnection: PathConnection) => void;
removeConnection: (fromUUID: string, toUUID: string) => void;
}
interface ConveyorEventsSchema {
modeluuid: string;
modelName: string;
type: "Conveyor";
points: {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
actions:
| {
uuid: string;
name: string;
type: string;
material: string;
delay: number | string;
spawnInterval: number | string;
isUsed: boolean;
}[]
| [];
triggers:
| {
uuid: string;
name: string;
type: string;
isUsed: boolean;
bufferTime: number;
}[]
| [];
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
}[];
position: [number, number, number];
rotation: [number, number, number];
speed: number | string;
}
interface VehicleEventsSchema {
modeluuid: string;
modelName: string;
type: "Vehicle";
points: {
uuid: string;
position: [number, number, number];
actions: {
uuid: string;
name: string;
type: string;
start: { x: number; y: number } | {};
hitCount: number;
end: { x: number; y: number } | {};
buffer: number;
};
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
speed: number;
isPlaying: boolean;
};
position: [number, number, number];
}
interface StaticMachineEventsSchema {
modeluuid: string;
modelName: string;
type: "StaticMachine";
points: {
uuid: string;
position: [number, number, number];
actions: {
uuid: string;
name: string;
buffer: number | string;
material: string;
isUsed: boolean;
};
triggers: { uuid: string; name: string; type: string };
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
};
position: [number, number, number];
}
interface ArmBotEventsSchema {
modeluuid: string;
modelName: string;
type: "ArmBot";
points: {
uuid: string;
position: [number, number, number];
actions: {
uuid: string;
name: string;
speed: number;
processes: { triggerId: string; startPoint: string; endPoint: string }[];
};
triggers: { uuid: string; name: string; type: string };
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
};
position: [number, number, number];
}
export type EventData = {
modeluuid: string;
modelname: string;
position: [number, number, number];
rotation: { x: number; y: number; z: number };
modelfileID: string;
isLocked: boolean;
isVisible: boolean;
eventData?:
| {
type: "Conveyor";
points: {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
actions:
| {
uuid: string;
name: string;
type: string;
material: string;
delay: number | string;
spawnInterval: number | string;
isUsed: boolean;
}[]
| [];
triggers:
| {
uuid: string;
name: string;
type: string;
isUsed: boolean;
bufferTime: number;
}[]
| [];
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
}[];
speed: number | string;
}
| {
type: "Vehicle";
points: {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
actions: {
uuid: string;
name: string;
type: string;
start: { x: number; y: number } | {};
hitCount: number;
end: { x: number; y: number } | {};
buffer: number;
};
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
speed: number;
};
}
| {
type: "StaticMachine";
points: {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
actions: {
uuid: string;
name: string;
buffer: number;
material: string;
};
triggers: { uuid: string; name: string; type: string };
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
};
}
| {
type: "ArmBot";
points: {
uuid: string;
position: [number, number, number];
rotation: [number, number, number];
actions: {
uuid: string;
name: string;
speed: number;
processes: {
triggerId: string;
startPoint: string;
endPoint: string;
}[];
};
triggers: { uuid: string; name: string; type: string };
connections: {
source: { modelUUID: string; pointUUID: string };
targets: { modelUUID: string; pointUUID: string }[];
};
};
};
};