diff --git a/app/src/components/layout/confirmationPopup/ConfirmationPopup.tsx b/app/src/components/layout/confirmationPopup/ConfirmationPopup.tsx
index 078f27d..4774bad 100644
--- a/app/src/components/layout/confirmationPopup/ConfirmationPopup.tsx
+++ b/app/src/components/layout/confirmationPopup/ConfirmationPopup.tsx
@@ -17,12 +17,12 @@ const ConfirmationPopup: React.FC = ({
diff --git a/app/src/components/layout/sidebarLeft/Outline.tsx b/app/src/components/layout/sidebarLeft/Outline.tsx
index b7d5803..417f069 100644
--- a/app/src/components/layout/sidebarLeft/Outline.tsx
+++ b/app/src/components/layout/sidebarLeft/Outline.tsx
@@ -24,22 +24,26 @@ const Outline: React.FC = () => {
{message}
-
+
-
+
+
+
-
+
+
+
)}
diff --git a/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx b/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx
index 9d09291..0e10cf1 100644
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx
@@ -1,6 +1,5 @@
import React, { useEffect, useRef, useMemo } from "react";
import { Chart } from "chart.js/auto";
-// import { useThemeStore } from "../../../../../store/useThemeStore";
// Define Props Interface
interface ChartComponentProps {
@@ -29,7 +28,6 @@ const ChartComponent = ({
data: propsData,
}: ChartComponentProps) => {
const canvasRef = useRef
- {/* {widgets.map((widget) => (
- {
const { activeUsers } = useActiveUsers();
- const userName = localStorage.getItem("userName") || "Anonymous";
+ const userName = localStorage.getItem("userName") ?? "Anonymous";
const guestUsers: ActiveUser[] = activeUsers.filter(
(user: ActiveUser) => user.userName !== userName
@@ -23,14 +23,14 @@ const Header: React.FC = () => {
)}
handleDragStart(e, widget)}
- >
- {widget.name}
-
- ))} */}
{/* Floating 1 */}
-
{
setUserManagement(true);
}}
>
Share
-
+
{/*
-
-
- )}
- {/* process builder */}
- {toggleUI &&
- subModule === "properties" &&
- activeModule !== "visualization" &&
- !selectedFloorItem && (
- setSubModule("properties")}
- >
-
- {activeModule === "simulation" && (
- <>
- setSubModule("mechanics")}
- >
-
- setSubModule("simulations")}
- >
-
- setSubModule("analysis")}
- >
-
-
- )}
-
-
- )}
- {toggleUI &&
- subModule === "properties" &&
- activeModule !== "visualization" &&
- selectedFloorItem && (
-
-
-
-
- )}
- {toggleUI &&
- subModule === "zoneProperties" &&
- (activeModule === "builder" || activeModule === "simulation") && (
-
-
-
-
- )}
- {/* simulation */}
- {toggleUI && activeModule === "simulation" && (
- <>
- {subModule === "simulations" && (
-
-
-
-
- )}
- {subModule === "mechanics" && (
-
-
-
-
- )}
- {subModule === "analysis" && (
-
-
-
-
- )}
-
- )}
- {/* realtime visualization */}
- {toggleUI && activeModule === "visualization" &&
-
-
+
+ );
};
-export default SideBarRight;
\ No newline at end of file
+export default SideBarRight;
diff --git a/app/src/components/layout/sidebarRight/analysis/Analysis.tsx b/app/src/components/layout/sidebarRight/analysis/Analysis.tsx
index d806740..9d2889f 100644
--- a/app/src/components/layout/sidebarRight/analysis/Analysis.tsx
+++ b/app/src/components/layout/sidebarRight/analysis/Analysis.tsx
@@ -100,7 +100,7 @@ const Analysis: React.FC = () => {
+ {activeModule !== "simulation" && (
+
+ )}
+ {activeModule === "simulation" && (
+ <>
+
+
+
+
+ )}
- );
+ )}
+ {/* process builder */}
+ {toggleUI &&
+ subModule === "properties" &&
+ activeModule !== "visualization" &&
+ !selectedFloorItem && (
+
+
+ )}
+ {toggleUI &&
+ subModule === "properties" &&
+ activeModule !== "visualization" &&
+ selectedFloorItem && (
+
+
+
+
+ )}
+ {toggleUI &&
+ subModule === "zoneProperties" &&
+ (activeModule === "builder" || activeModule === "simulation") && (
+
+
+
+
+ )}
+ {/* simulation */}
+ {toggleUI && activeModule === "simulation" && (
+ <>
+ {subModule === "simulations" && (
+
+
+
+
+ )}
+ {subModule === "mechanics" && (
+
+
+
+
+ )}
+ {subModule === "analysis" && (
+
+
+
+
+ )}
+
+ )}
+ {/* realtime visualization */}
+ {toggleUI && activeModule === "visualization" &&
+
+
+
diff --git a/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx b/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx
index 01b4ab3..8cc47d7 100644
--- a/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx
+++ b/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx
@@ -22,7 +22,7 @@ const PositionInput: React.FC = ({
value2 = "number",
disabled = false, // Default disabled value
isEyedrop = false, // Default isEyedrop value
- handleEyeDropClick = () => { }, // Default function for eye drop click
+ handleEyeDropClick = () => {}, // Default function for eye drop click
}) => {
return (
Create Analysis
@@ -39,6 +39,7 @@ const PositionInput: React.FC = ({
disabled={disabled} // Apply disabled prop
/>
+
Y :
{
{/* Name */}
+ {}}
+ value1={selectedFloorItem.position.x.toFixed(5)}
+ value2={selectedFloorItem.position.z.toFixed(5)}
+ />
+ {}}
+ value={parseFloat(
+ THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5)
+ )}
+ />
+
- {}}
- value1={selectedFloorItem.position.x.toFixed(5)}
- value2={selectedFloorItem.position.z.toFixed(5)}
- />
- {}}
- value={parseFloat(
- THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5)
- )}
- />
+
+
-
-
- (40);
@@ -224,66 +222,66 @@ const GlobalProperties: React.FC = () => {
// }
return (
{selectedFloorItem.userData.name}
+ Render settings
+ User Data
-
- {/* Map through userData and render InputWithDropDown for each entry */}
- {userData.map((data) => (
-
- handleUserDataChange(data.id, newValue)} // Pass the change handler
- />
-
);
};
diff --git a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
index 568783c..8b91afc 100644
--- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
@@ -32,9 +32,7 @@ const GlobalProperties: React.FC = () => {
const { renderDistance, setRenderDistance } = useRenderDistance();
const { setPlaneValue, setGridValue, planeValue, gridValue } =
useTileDistance();
- useEffect(() => {
-
- }, [gridValue, planeValue]);
+ useEffect(() => {}, [gridValue, planeValue]);
const { socket } = useSocketStore();
const { limitDistance, setLimitDistance } = useLimitDistance();
const [distance, setDistance] = useState handleRemoveUserData(data.id)}
- >
-
+
- ))}
+ ))}
- {/* Add new user data */}
- User Data
+ {userData.map((data) => (
+
+ handleUserDataChange(data.id, newValue)} // Pass the change handler
+ />
+
- handleRemoveUserData(data.id)}
+ >
+
- + Add
-
+ {/* Add new user data */}
+
+ + Add
+
+
-
+ {
- // setLimitDistance(!limitDistance);
- // // setDistance(75);
- // // setRenderDistance(75);
- // }}
- onClick={async () => {
- await limitRenderDistance(); // Call the function here
- }}
- />
- updateDistance(value)}
- onPointerUp={updatedDist}
- key={"6"}
- />
-
-
+
+ {/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */}
+ {
+ // setLimitDistance(!limitDistance);
+ // // setDistance(75);
+ // // setRenderDistance(75);
+ // }}
+ onClick={async () => {
+ await limitRenderDistance(); // Call the function here
+ }}
+ />
+ updateDistance(value)}
+ onPointerUp={updatedDist}
+ key={"6"}
+ />
+ {/*
{
max={5}
onChange={(value: number) => updateGridDistance(value)}
onPointerUp={updatedGrid}
- />
+ /> */}
+
);
};
diff --git a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
index a9f8cc0..1bb9400 100644
--- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
@@ -2,7 +2,12 @@ import React, { useEffect, useState } from "react";
import RenameInput from "../../../ui/inputs/RenameInput";
import Vector3Input from "../customInput/Vector3Input";
import { useSelectedZoneStore } from "../../../../store/visualization/useZoneStore";
-import { useEditPosition, usezonePosition, useZones, usezoneTarget } from "../../../../store/store";
+import {
+ useEditPosition,
+ usezonePosition,
+ useZones,
+ usezoneTarget,
+} from "../../../../store/store";
import { zoneCameraUpdate } from "../../../../services/visulization/zone/zoneCameraUpdation";
const ZoneProperties: React.FC = () => {
@@ -13,9 +18,9 @@ const ZoneProperties: React.FC = () => {
const { zones, setZones } = useZones();
useEffect(() => {
- setZonePosition(selectedZone.zoneViewPortPosition)
- setZoneTarget(selectedZone.zoneViewPortTarget)
- }, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget])
+ setZonePosition(selectedZone.zoneViewPortPosition);
+ setZoneTarget(selectedZone.zoneViewPortTarget);
+ }, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget]);
async function handleSetView() {
try {
@@ -25,7 +30,7 @@ const ZoneProperties: React.FC = () => {
let zonesdata = {
zoneId: selectedZone.zoneId,
viewPortposition: zonePosition,
- viewPortCenter: zoneTarget
+ viewPortCenter: zoneTarget,
};
let response = await zoneCameraUpdate(zonesdata, organization);
@@ -34,14 +39,11 @@ const ZoneProperties: React.FC = () => {
} else {
// console.log(response);
}
-
- } catch (error) {
-
- }
+ } catch (error) {}
}
function handleEditView() {
- setEdit(!Edit); // This will toggle the `Edit` state correctly
+ setEdit(!Edit); // This will toggle the `Edit` state correctly
}
async function handleZoneNameChange(newName: string) {
@@ -49,11 +51,11 @@ const ZoneProperties: React.FC = () => {
const organization = email?.split("@")[1]?.split(".")[0];
const zonesdata = {
zoneId: selectedZone.zoneId,
- zoneName: newName
+ zoneName: newName,
};
// Call your API to update the zone
let response = await zoneCameraUpdate(zonesdata, organization);
- console.log('response: ', response);
+ console.log("response: ", response);
if (response.message === "updated successfully") {
setZones((prevZones: any[]) =>
prevZones.map((zone) =>
@@ -66,7 +68,10 @@ const ZoneProperties: React.FC = () => {
// console.log(response?.message);
}
}
- function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
+ function handleVectorChange(
+ key: "zoneViewPortTarget" | "zoneViewPortPosition",
+ newValue: [number, number, number]
+ ) {
setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
}
const checkZoneNameDuplicate = (name: string) => {
@@ -79,33 +84,40 @@ const ZoneProperties: React.FC = () => {
return (
Environment
-
-
+ Environment
+
+
-
+
-
- (null);
const [assetType, setAssetType] = useState(null);
+ const { products, addEvent } = useProductStore();
+ const { selectedEventSphere } = useSelectedEventSphere();
useEffect(() => {
const event = getCurrentEventData();
@@ -20,45 +29,100 @@ const EventProperties: React.FC = () => {
const type = determineAssetType(event);
setAssetType(type);
-
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedEventData, selectedProduct]);
const getCurrentEventData = () => {
if (!selectedEventData?.data || !selectedProduct) return null;
- return getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid) || null;
+ return (
+ getEventByModelUuid(
+ selectedProduct.productId,
+ selectedEventData.data.modelUuid
+ ) ?? null
+ );
};
const determineAssetType = (event: EventsSchema | null) => {
if (!event) return null;
switch (event.type) {
- case 'transfer': return 'conveyor';
- case 'vehicle': return 'vehicle';
- case 'roboticArm': return 'roboticArm';
- case 'machine': return 'machine';
- case 'storageUnit': return 'storageUnit';
- default: return null;
+ case "transfer":
+ return "conveyor";
+ case "vehicle":
+ return "vehicle";
+ case "roboticArm":
+ return "roboticArm";
+ case "machine":
+ return "machine";
+ case "storageUnit":
+ return "storageUnit";
+ default:
+ return null;
}
};
return (
- <>
-
- handleVectorChange("zoneViewPortTarget", value)}
- header="Viewport Target"
- value={zoneTarget as [number, number, number]}
- disabled={!Edit}
- />
- handleVectorChange("zoneViewPortPosition", value)}
- header="Viewport Position"
- value={zonePosition as [number, number, number]}
- disabled={!Edit}
- />
+ handleVectorChange("zoneViewPortTarget", value)}
+ header="Viewport Target"
+ value={zoneTarget as [number, number, number]}
+ disabled={!Edit}
+ />
+
+ handleVectorChange("zoneViewPortPosition", value)
+ }
+ header="Viewport Position"
+ value={zonePosition as [number, number, number]}
+ disabled={!Edit}
+ />
- {Edit && (
-
);
};
export default ZoneProperties;
-
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
index ca32594..4fa9105 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
@@ -1,11 +1,18 @@
-import React, { useEffect, useRef, useState } from "react";
-import { useSelectedEventData, useSelectedProduct } from "../../../../../store/simulation/useSimulationStore";
+import React, { useEffect, useState } from "react";
+import {
+ useSelectedEventData,
+ useSelectedEventSphere,
+ useSelectedProduct,
+} from "../../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../../store/simulation/useProductStore";
import ConveyorMechanics from "./mechanics/conveyorMechanics";
import VehicleMechanics from "./mechanics/vehicleMechanics";
import RoboticArmMechanics from "./mechanics/roboticArmMechanics";
import MachineMechanics from "./mechanics/machineMechanics";
import StorageMechanics from "./mechanics/storageMechanics";
+import { AddIcon } from "../../../../icons/ExportCommonIcons";
+import { handleAddEventToProduct } from "../../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
+import { useEventsStore } from "../../../../../store/simulation/useEventsStore";
const EventProperties: React.FC = () => {
const { selectedEventData } = useSelectedEventData();
@@ -13,6 +20,8 @@ const EventProperties: React.FC = () => {
const { selectedProduct } = useSelectedProduct();
const [currentEventData, setCurrentEventData] = useState
- {Edit ? "Cancel" : "Edit"}
+
+
-
+
-
+ {Edit ? "Cancel" : "Edit"}
+
- Set View
-
- )}
+ {Edit && (
+
+ Set View
+
+ )}
+
- {currentEventData &&
- <>
- = ({ value, defaultValue, min, max, onChange }) => {
- return (
- <>
- { }}
- onChange={onChange}
- />
-
- );
+const DelayAction: React.FC = ({
+ value,
+ defaultValue,
+ min,
+ max,
+ onChange,
+}) => {
+ return (
+ {}}
+ onChange={onChange}
+ />
+ );
};
export default DelayAction;
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx
index 0d54476..88cbd2e 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx
@@ -1,5 +1,4 @@
import React from "react";
-import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
const DespawnAction: React.FC = () => {
return (
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SwapAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SwapAction.tsx
index 23b203f..5eaf991 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SwapAction.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SwapAction.tsx
@@ -1,27 +1,25 @@
import React from "react";
import PreviewSelectionWithUpload from "../../../../../ui/inputs/PreviewSelectionWithUpload";
-import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
interface SwapActionProps {
- onSelect: (option: string) => void;
- defaultOption: string;
- options: string[];
+ onSelect: (option: string) => void;
+ defaultOption: string;
+ options: string[];
}
-const SwapAction: React.FC = ({ onSelect, defaultOption, options }) => {
-
- return (
- <>
- {/* = ({
+ onSelect,
+ defaultOption,
+ options,
+}) => {
+ return (
+ = ({
+ setSelectedPointData,
+ selectedPointData,
+ multipleAction = false,
+}) => {
+ const actionsContainerRef = useRef(null);
+
+ // store
+ const { selectedEventData } = useSelectedEventData();
+ const { updateAction, addAction, removeAction } = useProductStore();
+ const { selectedProduct } = useSelectedProduct();
+ const { selectedAction, setSelectedAction, clearSelectedAction } =
+ useSelectedAction();
+
+ const handleAddAction = () => {
+ if (!selectedEventData || !selectedPointData) return;
+
+ const newAction = {
+ actionUuid: MathUtils.generateUUID(),
+ actionName: `Action ${selectedPointData.actions.length + 1}`,
+ actionType: "pickAndPlace" as const,
+ process: {
+ startPoint: null,
+ endPoint: null,
+ },
+ triggers: [] as TriggerSchema[],
+ };
+
+ addAction(
+ selectedProduct.productId,
+ selectedEventData.data.modelUuid,
+ selectedEventData.selectedPoint,
+ newAction
+ );
+
+ const updatedPoint = {
+ ...selectedPointData,
+ actions: [...selectedPointData.actions, newAction],
+ };
+ setSelectedPointData(updatedPoint);
+ setSelectedAction(newAction.actionUuid, newAction.actionName);
+ };
+
+ const handleDeleteAction = (actionUuid: string) => {
+ if (!selectedPointData) return;
+
+ removeAction(actionUuid);
+ const newActions = selectedPointData.actions.filter(
+ (a: any) => a.actionUuid !== actionUuid
+ );
+
+ const updatedPoint = {
+ ...selectedPointData,
+ actions: newActions,
+ };
+ setSelectedPointData(updatedPoint);
+
+ if (selectedAction.actionId === actionUuid) {
+ if (newActions.length > 0) {
+ setSelectedAction(newActions[0].actionUuid, newActions[0].actionName);
+ } else {
+ clearSelectedAction();
+ }
+ }
+ };
+
+ const handleRenameAction = (newName: string) => {
+ if (!selectedAction.actionId) return;
+ updateAction(selectedAction.actionId, { actionName: newName });
+
+ if (selectedPointData?.actions) {
+ const updatedActions = selectedPointData.actions.map((action: any) =>
+ action.actionUuid === selectedAction.actionId
+ ? { ...action, actionName: newName }
+ : action
+ );
+ setSelectedPointData({
+ ...selectedPointData,
+ actions: updatedActions,
+ });
+ } else {
+ // write logic for single action
+ return;
+ }
+ };
+
+ const handleActionSelect = (actionUuid: string, actionName: string) => {
+ setSelectedAction(actionUuid, actionName);
+ };
+
+ return (
+
-
);
};
-export default EventProperties;
\ No newline at end of file
+export default EventProperties;
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DelayAction.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DelayAction.tsx
index 2bb63d4..6c33583 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DelayAction.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DelayAction.tsx
@@ -2,29 +2,33 @@ import React from "react";
import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
interface DelayActionProps {
- value: string;
- defaultValue: string;
- min: number;
- max: number;
- onChange: (value: string) => void;
+ value: string;
+ defaultValue: string;
+ min: number;
+ max: number;
+ onChange: (value: string) => void;
}
-const DelayAction: React.FC{selectedEventData?.data.modelName}
+
+ {currentEventData && (
+ <>
+
+ {assetType === "conveyor" &&
+
-
+
+ {selectedEventData?.data.modelName}
- {assetType === 'conveyor' &&
+
+ )
+ }
+ {!selectedEventSphere && (
+ + Oops! It looks like this object doesn't have an + event assigned yet. To continue, please link it to one of the + products below. +
+ +
+
+ + Here are some products you can add it to: +
+-
+ {products.map((product) => (
+
- + + + ))} +
+
+ )}
+ + Oops! It looks like you haven't selected an event + point yet. Please select an event to view its properties. +
+
+
+ );
+};
+
+export default ActionsList;
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
index c13bd75..6437311 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
@@ -1,15 +1,16 @@
-import { useEffect, useState } from 'react'
-import InputWithDropDown from '../../../../../ui/inputs/InputWithDropDown'
-import DelayAction from '../actions/DelayAction'
-import RenameInput from '../../../../../ui/inputs/RenameInput'
-import LabledDropdown from '../../../../../ui/inputs/LabledDropdown'
-import DespawnAction from '../actions/DespawnAction'
-import SwapAction from '../actions/SwapAction'
-import SpawnAction from '../actions/SpawnAction'
-import DefaultAction from '../actions/DefaultAction'
-import Trigger from '../trigger/Trigger'
+import { useEffect, useState } from "react";
+import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
+import DelayAction from "../actions/DelayAction";
+import RenameInput from "../../../../../ui/inputs/RenameInput";
+import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
+import DespawnAction from "../actions/DespawnAction";
+import SwapAction from "../actions/SwapAction";
+import SpawnAction from "../actions/SpawnAction";
+import DefaultAction from "../actions/DefaultAction";
+import Trigger from "../trigger/Trigger";
import { useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
+import ActionsList from "../components/ActionsList";
function ConveyorMechanics() {
const [activeOption, setActiveOption] = useState<"default" | "spawn" | "swap" | "delay" | "despawn">("default");
@@ -25,71 +26,59 @@ function ConveyorMechanics() {
selectedEventData?.data.modelUuid,
selectedEventData?.selectedPoint
) as ConveyorPointSchema | undefined;
- if (point && 'action' in point) {
+ if (point && "action" in point) {
setSelectedPointData(point);
- setActiveOption(point.action.actionType as "default" | "spawn" | "swap" | "delay" | "despawn");
+ setActiveOption(point.action.actionType as | "default" | "spawn" | "swap" | "delay" | "despawn");
}
}
- }, [selectedProduct, selectedEventData])
+ }, [selectedProduct, selectedEventData, getPointByUuid]);
const handleSpeedChange = (value: string) => {
if (!selectedEventData) return;
- updateEvent(
- selectedProduct.productId,
- selectedEventData.data.modelUuid,
- { speed: parseFloat(value) }
- );
+ updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
+ speed: parseFloat(value),
+ });
};
const handleActionTypeChange = (option: string) => {
if (!selectedEventData || !selectedPointData) return;
- const validOption = option as "default" | "spawn" | "swap" | "delay" | "despawn";
+ const validOption = option as | "default" | "spawn" | "swap" | "delay" | "despawn";
setActiveOption(validOption);
- updateAction(
- selectedPointData.action.actionUuid,
- { actionType: validOption }
- );
+ updateAction(selectedPointData.action.actionUuid, {
+ actionType: validOption,
+ });
};
const handleRenameAction = (newName: string) => {
if (!selectedPointData) return;
- updateAction(
- selectedPointData.action.actionUuid,
- { actionName: newName }
- );
+ updateAction(selectedPointData.action.actionUuid, { actionName: newName });
};
const handleSpawnCountChange = (value: string) => {
if (!selectedPointData) return;
- updateAction(
- selectedPointData.action.actionUuid,
- { spawnCount: value === "inherit" ? "inherit" : parseFloat(value) }
- );
+ updateAction(selectedPointData.action.actionUuid, {
+ spawnCount: value === "inherit" ? "inherit" : parseFloat(value),
+ });
};
const handleSpawnIntervalChange = (value: string) => {
if (!selectedPointData) return;
- updateAction(
- selectedPointData.action.actionUuid,
- { spawnInterval: value === "inherit" ? "inherit" : parseFloat(value) }
- );
+ updateAction(selectedPointData.action.actionUuid, {
+ spawnInterval: value === "inherit" ? "inherit" : parseFloat(value),
+ });
};
const handleMaterialSelect = (material: string) => {
if (!selectedPointData) return;
- updateAction(
- selectedPointData.action.actionUuid,
- { material }
- );
+ updateAction(selectedPointData.action.actionUuid, { material });
};
const handleDelayChange = (value: string) => {
if (!selectedPointData) return;
- updateAction(
- selectedPointData.action.actionUuid,
- { delay: value === "inherit" ? "inherit" : parseFloat(value) }
- );
+ updateAction(selectedPointData.action.actionUuid, {
+ delay: value === "inherit" ? "inherit" : parseFloat(value),
+ });
};
const availableActions = {
@@ -124,89 +113,89 @@ function ConveyorMechanics() {
return (
<>
- {selectedEventData &&
- <>
-
+
+
+
+ Actions
+
+
+
+
+
+ {multipleAction &&
+ selectedPointData.actions.map((action: any) => (
+
+ {multipleAction && (
+
+ )}
+
+
+ {selectedPointData.actions.length > 1 && (
+
+ )}
+
+ ))}
+ {!multipleAction && selectedPointData && (
+
+
+
+ )}
+
-
+
- )
+ );
}
-export default ConveyorMechanics
\ No newline at end of file
+export default ConveyorMechanics;
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
index e131864..266eb39 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react'
-import RenameInput from '../../../../../ui/inputs/RenameInput'
-import LabledDropdown from '../../../../../ui/inputs/LabledDropdown'
-import Trigger from '../trigger/Trigger'
+import { useEffect, useState } from "react";
+import RenameInput from "../../../../../ui/inputs/RenameInput";
+import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
+import Trigger from "../trigger/Trigger";
import { useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
-import ProcessAction from '../actions/ProcessAction'
+import ProcessAction from "../actions/ProcessAction";
+import ActionsList from "../components/ActionsList";
function MachineMechanics() {
const [activeOption, setActiveOption] = useState<"default" | "process">("default");
@@ -20,46 +21,40 @@ function MachineMechanics() {
selectedEventData?.data.modelUuid,
selectedEventData?.selectedPoint
) as MachinePointSchema | undefined;
- if (point && 'action' in point) {
+ if (point && "action" in point) {
setSelectedPointData(point);
setActiveOption(point.action.actionType as "process");
}
}
- }, [selectedProduct, selectedEventData])
+ }, [selectedProduct, selectedEventData, getPointByUuid]);
const handleActionTypeChange = (option: string) => {
if (!selectedEventData || !selectedPointData) return;
const validOption = option as "process";
setActiveOption(validOption);
- updateAction(
- selectedPointData.action.actionUuid,
- { actionType: validOption }
- );
+ updateAction(selectedPointData.action.actionUuid, {
+ actionType: validOption,
+ });
};
const handleRenameAction = (newName: string) => {
if (!selectedPointData) return;
- updateAction(
- selectedPointData.action.actionUuid,
- { actionName: newName }
- );
+ updateAction(selectedPointData.action.actionUuid, { actionName: newName });
};
const handleProcessTimeChange = (value: string) => {
if (!selectedPointData) return;
- updateAction(
- selectedPointData.action.actionUuid,
- { processTime: parseFloat(value) }
- );
+ updateAction(selectedPointData.action.actionUuid, {
+ processTime: parseFloat(value),
+ });
};
const handleMaterialSelect = (material: string) => {
if (!selectedPointData) return;
- updateAction(
- selectedPointData.action.actionUuid,
- { swapMaterial: material }
- );
+ updateAction(selectedPointData.action.actionUuid, {
+ swapMaterial: material,
+ });
};
// Get current values from store
@@ -82,8 +77,8 @@ function MachineMechanics() {
return (
<>
- {selectedEventData &&
- <>
+ {selectedEventData && (
+
+ )}
- )
+ );
}
-export default MachineMechanics
\ No newline at end of file
+export default MachineMechanics;
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
index 78a32f5..faea93d 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
@@ -1,21 +1,18 @@
-import { useEffect, useRef, useState } from 'react'
-import * as THREE from 'three';
-import InputWithDropDown from '../../../../../ui/inputs/InputWithDropDown'
-import RenameInput from '../../../../../ui/inputs/RenameInput'
-import LabledDropdown from '../../../../../ui/inputs/LabledDropdown'
-import Trigger from '../trigger/Trigger'
+import { useEffect, useState } from "react";
+import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
+import RenameInput from "../../../../../ui/inputs/RenameInput";
+import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
+import Trigger from "../trigger/Trigger";
import { useSelectedEventData, useSelectedProduct, useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
-import { AddIcon, RemoveIcon, ResizeHeightIcon } from '../../../../../icons/ExportCommonIcons'
-import { handleResize } from '../../../../../../functions/handleResizePannel'
-import PickAndPlaceAction from '../actions/PickAndPlaceAction'
+import PickAndPlaceAction from "../actions/PickAndPlaceAction";
+import ActionsList from "../components/ActionsList";
function RoboticArmMechanics() {
- const actionsContainerRef = useRef(null);
const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">("default");
const [selectedPointData, setSelectedPointData] = useState();
const { selectedEventData } = useSelectedEventData();
- const { getPointByUuid, updateEvent, updateAction, addAction, removeAction } = useProductStore();
+ const { getPointByUuid, updateEvent, updateAction } = useProductStore();
const { selectedProduct } = useSelectedProduct();
const { selectedAction, setSelectedAction, clearSelectedAction } = useSelectedAction();
@@ -26,129 +23,65 @@ function RoboticArmMechanics() {
selectedEventData.data.modelUuid,
selectedEventData.selectedPoint
) as RoboticArmPointSchema | undefined;
- if (point) {
+ if (point?.actions) {
setSelectedPointData(point);
setActiveOption(point.actions[0].actionType as "default" | "pickAndPlace");
if (point.actions.length > 0 && !selectedAction.actionId) {
- setSelectedAction(point.actions[0].actionUuid, point.actions[0].actionName);
+ setSelectedAction(
+ point.actions[0].actionUuid,
+ point.actions[0].actionName
+ );
}
}
} else {
clearSelectedAction();
}
- }, [selectedEventData, selectedProduct]);
-
- const handleActionSelect = (actionUuid: string, actionName: string) => {
- setSelectedAction(actionUuid, actionName);
- };
-
- const handleAddAction = () => {
- if (!selectedEventData || !selectedPointData) return;
-
- const newAction = {
- actionUuid: THREE.MathUtils.generateUUID(),
- actionName: `Action ${selectedPointData.actions.length + 1}`,
- actionType: "pickAndPlace" as "pickAndPlace",
- process: {
- startPoint: null,
- endPoint: null
- },
- triggers: [] as TriggerSchema[]
- };
-
- addAction(
- selectedProduct.productId,
- selectedEventData.data.modelUuid,
- selectedEventData.selectedPoint,
- newAction
- );
-
- const updatedPoint = {
- ...selectedPointData,
- actions: [...selectedPointData.actions, newAction]
- };
- setSelectedPointData(updatedPoint);
- setSelectedAction(newAction.actionUuid, newAction.actionName);
- };
-
- const handleDeleteAction = (actionUuid: string) => {
- if (!selectedPointData) return;
-
- removeAction(actionUuid);
- const newActions = selectedPointData.actions.filter(a => a.actionUuid !== actionUuid);
-
- const updatedPoint = {
- ...selectedPointData,
- actions: newActions
- };
- setSelectedPointData(updatedPoint);
-
- if (selectedAction.actionId === actionUuid) {
- if (newActions.length > 0) {
- setSelectedAction(newActions[0].actionUuid, newActions[0].actionName);
- } else {
- clearSelectedAction();
- }
- }
- };
+ }, [clearSelectedAction, getPointByUuid, selectedAction.actionId, selectedEventData, selectedProduct, setSelectedAction,]);
const handleRenameAction = (newName: string) => {
if (!selectedAction.actionId) return;
- updateAction(
- selectedAction.actionId,
- { actionName: newName }
- );
+ updateAction(selectedAction.actionId, { actionName: newName });
if (selectedPointData) {
- const updatedActions = selectedPointData.actions.map(action =>
- action.actionUuid === selectedAction.actionId
- ? { ...action, actionName: newName }
- : action
+ const updatedActions = selectedPointData.actions.map((action) =>
+ action.actionUuid === selectedAction.actionId ? { ...action, actionName: newName } : action
);
setSelectedPointData({
...selectedPointData,
- actions: updatedActions
+ actions: updatedActions,
});
}
};
const handleSpeedChange = (value: string) => {
if (!selectedEventData) return;
- updateEvent(
- selectedProduct.productId,
- selectedEventData.data.modelUuid,
- { speed: parseFloat(value) }
- );
+ updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
+ speed: parseFloat(value),
+ });
};
const handlePickPointChange = (value: string) => {
if (!selectedAction.actionId || !selectedPointData) return;
- const [x, y, z] = value.split(',').map(Number);
+ const [x, y, z] = value.split(",").map(Number);
- updateAction(
- selectedAction.actionId,
- {
- process: {
- startPoint: [x, y, z] as [number, number, number],
- endPoint: selectedPointData.actions.find(a => a.actionUuid === selectedAction.actionId)?.process.endPoint || null
- }
- }
- );
+ updateAction(selectedAction.actionId, {
+ process: {
+ startPoint: [x, y, z] as [number, number, number],
+ endPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.endPoint || null,
+ },
+ });
};
const handlePlacePointChange = (value: string) => {
if (!selectedAction.actionId || !selectedPointData) return;
- const [x, y, z] = value.split(',').map(Number);
+ const [x, y, z] = value.split(",").map(Number);
- updateAction(
- selectedAction.actionId,
- {
- process: {
- startPoint: selectedPointData.actions.find(a => a.actionUuid === selectedAction.actionId)?.process.startPoint || null,
- endPoint: [x, y, z] as [number, number, number]
- }
- }
- );
+ updateAction(selectedAction.actionId, {
+ process: {
+ startPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.startPoint || null,
+ endPoint: [x, y, z] as [number, number, number],
+ },
+ });
};
const availableActions = {
@@ -160,7 +93,8 @@ function RoboticArmMechanics() {
? selectedEventData.data.speed.toString()
: "0.5";
- const currentAction = selectedPointData?.actions.find(a => a.actionUuid === selectedAction.actionId);
+ const currentAction = selectedPointData?.actions.find((a) => a.actionUuid === selectedAction.actionId);
+
const currentPickPoint = currentAction?.process.startPoint
? `${currentAction.process.startPoint[0]},${currentAction.process.startPoint[1]},${currentAction.process.startPoint[2]}`
: "";
@@ -170,107 +104,60 @@ function RoboticArmMechanics() {
return (
<>
- {selectedEventData && selectedPointData && (
- <>
-
-
+
- { }}
- onChange={handleSpeedChange}
- />
-
-
+
+
+
+
+ { }}
+ onChange={handleSpeedChange}
+ />
+
-
+
-
-
-
+
-
+
+
+
+ )}
+ {activeOption === "swap" && (
+
-
-
- }
+
+
+
-
-
+
- )
+ );
}
-export default RoboticArmMechanics
\ No newline at end of file
+export default RoboticArmMechanics;
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
index 593dcc3..f22ec37 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react'
-import RenameInput from '../../../../../ui/inputs/RenameInput'
-import LabledDropdown from '../../../../../ui/inputs/LabledDropdown'
-import Trigger from '../trigger/Trigger'
+import { useEffect, useState } from "react";
+import RenameInput from "../../../../../ui/inputs/RenameInput";
+import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
+import Trigger from "../trigger/Trigger";
import { useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
-import StorageAction from '../actions/StorageAction';
+import StorageAction from "../actions/StorageAction";
+import ActionsList from "../components/ActionsList";
function StorageMechanics() {
const [activeOption, setActiveOption] = useState<"default" | "store" | "spawn">("default");
@@ -20,38 +21,33 @@ function StorageMechanics() {
selectedEventData?.data.modelUuid,
selectedEventData?.selectedPoint
) as StoragePointSchema | undefined;
- if (point && 'action' in point) {
+ if (point && "action" in point) {
setSelectedPointData(point);
setActiveOption(point.action.actionType as "store" | "spawn");
}
}
- }, [selectedProduct, selectedEventData])
+ }, [selectedProduct, selectedEventData, getPointByUuid]);
const handleActionTypeChange = (option: string) => {
if (!selectedEventData || !selectedPointData) return;
const validOption = option as "store" | "spawn";
setActiveOption(validOption);
- updateAction(
- selectedPointData.action.actionUuid,
- { actionType: validOption }
- );
+ updateAction(selectedPointData.action.actionUuid, {
+ actionType: validOption,
+ });
};
const handleRenameAction = (newName: string) => {
if (!selectedPointData) return;
- updateAction(
- selectedPointData.action.actionUuid,
- { actionName: newName }
- );
+ updateAction(selectedPointData.action.actionUuid, { actionName: newName });
};
const handleCapacityChange = (value: string) => {
if (!selectedPointData) return;
- updateAction(
- selectedPointData.action.actionUuid,
- { storageCapacity: parseInt(value) }
- );
+ updateAction(selectedPointData.action.actionUuid, {
+ storageCapacity: parseInt(value),
+ });
};
// Get current values from store
@@ -70,8 +66,12 @@ function StorageMechanics() {
return (
<>
- {selectedEventData &&
- <>
+ {selectedEventData && (
+
+ ();
- const { selectedEventData } = useSelectedEventData();
- const { getPointByUuid, updateEvent, updateAction } = useProductStore();
- const { selectedProduct } = useSelectedProduct();
+ const [activeOption, setActiveOption] = useState<"default" | "travel">(
+ "default"
+ );
+ const [selectedPointData, setSelectedPointData] = useState<
+ VehiclePointSchema | undefined
+ >();
+ const { selectedEventData } = useSelectedEventData();
+ const { getPointByUuid, updateEvent, updateAction } = useProductStore();
+ const { selectedProduct } = useSelectedProduct();
- useEffect(() => {
- if (selectedEventData) {
- const point = getPointByUuid(
- selectedProduct.productId,
- selectedEventData.data.modelUuid,
- selectedEventData.selectedPoint
- ) as VehiclePointSchema | undefined;
+ useEffect(() => {
+ if (selectedEventData) {
+ const point = getPointByUuid(
+ selectedProduct.productId,
+ selectedEventData.data.modelUuid,
+ selectedEventData.selectedPoint
+ ) as VehiclePointSchema | undefined;
- if (point) {
- setSelectedPointData(point);
- setActiveOption(point.action.actionType as "travel");
- }
- }
- }, [selectedProduct, selectedEventData])
+ if (point) {
+ setSelectedPointData(point);
+ setActiveOption(point.action.actionType as "travel");
+ }
+ }
+ }, [selectedProduct, selectedEventData, getPointByUuid]);
- const handleSpeedChange = (value: string) => {
- if (!selectedEventData) return;
- updateEvent(
- selectedProduct.productId,
- selectedEventData.data.modelUuid,
- { speed: parseFloat(value) }
- );
- };
+ const handleSpeedChange = (value: string) => {
+ if (!selectedEventData) return;
+ updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
+ speed: parseFloat(value),
+ });
+ };
- const handleActionTypeChange = (option: string) => {
- if (!selectedEventData || !selectedPointData) return;
- const validOption = option as "travel";
- setActiveOption(validOption);
+ const handleActionTypeChange = (option: string) => {
+ if (!selectedEventData || !selectedPointData) return;
+ const validOption = option as "travel";
+ setActiveOption(validOption);
- updateAction(
- selectedPointData.action.actionUuid,
- { actionType: validOption }
- );
- };
+ updateAction(selectedPointData.action.actionUuid, {
+ actionType: validOption,
+ });
+ };
- const handleRenameAction = (newName: string) => {
- if (!selectedPointData) return;
- updateAction(
- selectedPointData.action.actionUuid,
- { actionName: newName }
- );
- };
+ const handleRenameAction = (newName: string) => {
+ if (!selectedPointData) return;
+ updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+ };
- const handleLoadCapacityChange = (value: string) => {
- if (!selectedPointData) return;
- updateAction(
- selectedPointData.action.actionUuid,
- { loadCapacity: parseFloat(value) }
- );
- };
+ const handleLoadCapacityChange = (value: string) => {
+ if (!selectedPointData) return;
+ updateAction(selectedPointData.action.actionUuid, {
+ loadCapacity: parseFloat(value),
+ });
+ };
- const handleUnloadDurationChange = (value: string) => {
- if (!selectedPointData) return;
- updateAction(
- selectedPointData.action.actionUuid,
- { unLoadDuration: parseFloat(value) }
- );
- };
+ const handleUnloadDurationChange = (value: string) => {
+ if (!selectedPointData) return;
+ updateAction(selectedPointData.action.actionUuid, {
+ unLoadDuration: parseFloat(value),
+ });
+ };
- const handlePickPointChange = (value: string) => {
- if (!selectedPointData) return;
- const [x, y, z] = value.split(',').map(Number);
- updateAction(
- selectedPointData.action.actionUuid,
- { pickUpPoint: { x, y, z } }
- );
- };
+ const handlePickPointChange = (value: string) => {
+ if (!selectedPointData) return;
+ };
- const handleUnloadPointChange = (value: string) => {
- if (!selectedPointData) return;
- const [x, y, z] = value.split(',').map(Number);
- updateAction(
- selectedPointData.action.actionUuid,
- { unLoadPoint: { x, y, z } }
- );
- };
+ const handleUnloadPointChange = (value: string) => {
+ if (!selectedPointData) return;
+ };
- // Get current values from store
- const currentSpeed = selectedEventData?.data.type === "vehicle"
- ? selectedEventData.data.speed.toString()
- : "0.5";
+ // Get current values from store
+ const currentSpeed =
+ selectedEventData?.data.type === "vehicle"
+ ? selectedEventData.data.speed.toString()
+ : "0.5";
- const currentActionName = selectedPointData
- ? selectedPointData.action.actionName
- : "Action Name";
+ const currentActionName = selectedPointData
+ ? selectedPointData.action.actionName
+ : "Action Name";
- const currentLoadCapacity = selectedPointData
- ? selectedPointData.action.loadCapacity.toString()
- : "1";
+ const currentLoadCapacity = selectedPointData
+ ? selectedPointData.action.loadCapacity.toString()
+ : "1";
- const currentUnloadDuration = selectedPointData
- ? selectedPointData.action.unLoadDuration.toString()
- : "1";
+ const currentUnloadDuration = selectedPointData
+ ? selectedPointData.action.unLoadDuration.toString()
+ : "1";
- const currentPickPoint = selectedPointData?.action.pickUpPoint
- ? `${selectedPointData.action.pickUpPoint.x},${selectedPointData.action.pickUpPoint.y},${selectedPointData.action.pickUpPoint.z}`
- : "";
+ const currentPickPoint = selectedPointData?.action.pickUpPoint;
- const currentUnloadPoint = selectedPointData?.action.unLoadPoint
- ? `${selectedPointData.action.unLoadPoint.x},${selectedPointData.action.unLoadPoint.y},${selectedPointData.action.unLoadPoint.z}`
- : "";
+ const currentUnloadPoint = selectedPointData?.action.unLoadPoint;
- const availableActions = {
- defaultOption: "travel",
- options: ["travel"],
- };
+ const availableActions = {
+ defaultOption: "travel",
+ options: ["travel"],
+ };
- return (
+ return (
+ <>
+ {selectedEventData && (
<>
- {selectedEventData &&
- <>
-
+
- )
+ )}
+
+ );
}
-export default VehicleMechanics
\ No newline at end of file
+export default VehicleMechanics;
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
index f287b63..3b2549a 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
@@ -1,11 +1,19 @@
-import React, { useState } from "react";
-import { AddIcon, RemoveIcon } from "../../../../../icons/ExportCommonIcons";
+import React, { useRef, useState } from "react";
+import {
+ AddIcon,
+ RemoveIcon,
+ ResizeHeightIcon,
+} from "../../../../../icons/ExportCommonIcons";
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
+import RenameInput from "../../../../../ui/inputs/RenameInput";
+import { handleResize } from "../../../../../../functions/handleResizePannel";
const Trigger: React.FC = () => {
// State to hold the list of triggers
- const [triggers, setTriggers] = useState([]);
+ const [triggers, setTriggers] = useState(["Trigger 1"]);
+ const [selectedTrigger, setSelectedTrigger] = useState("Trigger 1");
const [activeOption, setActiveOption] = useState("onComplete");
+ const triggersContainerRef = useRef(null);
// States for dropdowns
const [triggeredModel, setTriggeredModel] = useState([]);
@@ -35,70 +43,94 @@ const Trigger: React.FC = () => {
- { }}
- onChange={handleSpeedChange}
- />
-
+
+
+
+
+
+ { }}
+ onChange={handleSpeedChange}
+ />
+
+
+
-
-
+
+
+ { }}
+ disabled={true}
+ />
+
+
+
-
-
- {selectedAction.actionId && currentAction && (
-
-
-
-
- Actions
-
-
-
-
-
- {selectedPointData.actions.map((action) => (
-
-
-
- ))}
- handleActionSelect(action.actionUuid, action.actionName)}
- >
-
- {selectedPointData.actions.length > 1 && (
- handleDeleteAction(action.actionUuid)}
- >
-
- )}
- handleResize(e, actionsContainerRef)}
- >
-
-
-
- )}
-
- )}
+ )}
+
-
-
- { }}
- disabled={true}
- />
-
-
-
- Spawn configuration options would go here
@@ -104,10 +104,10 @@ function StorageMechanics() {
-
+
-
-
- { }}
- onChange={handleSpeedChange}
- />
-
-
+
+
+
+
+ {}}
+ onChange={handleSpeedChange}
+ />
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
- }
+ {activeOption === "travel" && (
+
+
+ Trigger
-
- {/* Map over triggers and render them */}
- {triggers.map((trigger, index) => (
-
- = ({ val }) => {
return (
(null);
- const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent } = useProductStore();
+ const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent, } = useProductStore();
const { selectedProduct, setSelectedProduct } = useSelectedProduct();
+ const { getEventByModelUuid } = useEventsStore();
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+ const [openObjects, setOpenObjects] = useState(true);
const handleAddProduct = () => {
- addProduct(`Product ${products.length + 1}`, generateUUID());
+ const id = generateUUID();
+ const name = `Product ${products.length + 1}`;
+ addProduct(name, id);
+ upsertProductOrEventApi({ productName: name, productId: id, organization: organization });
};
const handleRemoveProduct = (productId: string) => {
- const currentIndex = products.findIndex(p => p.productId === productId);
+ const currentIndex = products.findIndex((p) => p.productId === productId);
const isSelected = selectedProduct.productId === productId;
- const updatedProducts = products.filter(p => p.productId !== productId);
+ const updatedProducts = products.filter((p) => p.productId !== productId);
if (isSelected) {
if (updatedProducts.length > 0) {
@@ -59,11 +71,12 @@ const Simulations: React.FC = () => {
updatedProducts[newSelectedIndex].productName
);
} else {
- setSelectedProduct('', '');
+ setSelectedProduct("", "");
}
}
removeProduct(productId);
+ deleteProductApi(productId, organization);
};
const handleRenameProduct = (productId: string, newName: string) => {
@@ -73,20 +86,15 @@ const Simulations: React.FC = () => {
}
};
- const handleAddEventToProduct = () => {
- if (selectedAsset) {
- addEvent(selectedProduct.productId, selectedAsset);
- // upsertProductOrEventApi({
- // productName: selectedProduct.productName,
- // productId: selectedProduct.productId,
- // eventDatas: selectedAsset
- // });
- clearSelectedAsset();
- }
- };
-
const handleRemoveEventFromProduct = () => {
if (selectedAsset) {
+ const email = localStorage.getItem('email')
+ const organization = (email!.split("@")[1]).split(".")[0];
+ deleteEventDataApi({
+ productId: selectedProduct.productId,
+ modelUuid: selectedAsset.modelUuid,
+ organization: organization
+ });
removeEvent(selectedProduct.productId, selectedAsset.modelUuid);
clearSelectedAsset();
}
@@ -104,7 +112,7 @@ const Simulations: React.FC = () => {
- {trigger}
+
);
diff --git a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
index 926ce44..1280693 100644
--- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
+++ b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
import {
AddIcon,
ArrowIcon,
@@ -7,12 +7,19 @@ import {
} from "../../../icons/ExportCommonIcons";
import RenameInput from "../../../ui/inputs/RenameInput";
import { handleResize } from "../../../../functions/handleResizePannel";
-import { useSelectedAsset, useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
+import {
+ useSelectedAsset,
+ useSelectedProduct,
+} from "../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../store/simulation/useProductStore";
import { generateUUID } from "three/src/math/MathUtils";
import RenderOverlay from "../../../templates/Overlay";
import EditWidgetOption from "../../../ui/menu/EditWidgetOption";
+import { handleAddEventToProduct } from "../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
+import { useEventsStore } from "../../../../store/simulation/useEventsStore";
+import { deleteEventDataApi } from "../../../../services/simulation/deleteEventDataApi";
import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
+import { deleteProductApi } from "../../../../services/simulation/deleteProductApi";
interface Event {
pathName: string;
@@ -25,28 +32,33 @@ interface ListProps {
const List: React.FC
+
+
+ {triggers.map((trigger: any, index: number) => (
+
+ removeTrigger(index)}
- style={{ cursor: "pointer" }}
+ key={index}
+ className={`list-item ${
+ selectedTrigger === trigger ? "active" : ""
+ }`}
+ onClick={() => setSelectedTrigger(trigger)}
>
-
+ ))}
+
+ setActiveOption(option)}
+ />
+
{selectedTrigger}
+
+ setActiveOption(option)}
- />
-
+ {
+ const newModel = [...triggeredModel];
+ newModel[0] = option;
+ setTriggeredModel(newModel);
+ }}
+ />
-
-
- ))}
+
- {
- const newModel = [...triggeredModel];
- newModel[index] = option;
- setTriggeredModel(newModel);
- }}
- />
-
-
- {
- const newPoint = [...triggeredPoint];
- newPoint[index] = option;
- setTriggeredPoint(newPoint);
- }}
- />
-
-
- {
- const newAction = [...triggeredAction];
- newAction[index] = option;
- setTriggeredAction(newAction);
- }}
- />
-
+
+ {
+ const newPoint = [...triggeredPoint];
+ newPoint[0] = option;
+ setTriggeredPoint(newPoint);
+ }}
+ />
+
+
+ {
+ const newAction = [...triggeredAction];
+ newAction[0] = option;
+ setTriggeredAction(newAction);
+ }}
+ />
-
);
};
const Simulations: React.FC = () => {
const productsContainerRef = useRef
- {val.pathName}
-
+ {val.pathName}
Simulations
-
+
{
- if (option === 'Add to Product') {
- handleAddEventToProduct();
+ if (option === "Add to Product") {
+ handleAddEventToProduct({
+ event: getEventByModelUuid(selectedAsset.modelUuid),
+ addEvent,
+ selectedProduct,
+ clearSelectedAsset
+ });
} else {
handleRemoveEventFromProduct();
}
}}
/>
- }
+ )}
- );
+ )
};
export default Simulations;
diff --git a/app/src/components/templates/FollowPerson.tsx b/app/src/components/templates/FollowPerson.tsx
new file mode 100644
index 0000000..a85d0c9
--- /dev/null
+++ b/app/src/components/templates/FollowPerson.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import RenderOverlay from "./Overlay";
+import { useSelectedUserStore } from "../../store/useCollabStore";
+import { useCamMode } from "../../store/store";
+
+const FollowPerson: React.FC = () => {
+ // Get the selected user from the store
+ const { selectedUser, clearSelectedUser } = useSelectedUserStore();
+ const { setCamMode } = useCamMode();
+ return (
+
+ {selectedUser && (
+ // eslint-disable-next-line
+
+ );
+};
+
+export default FollowPerson;
diff --git a/app/src/components/ui/FileMenu.tsx b/app/src/components/ui/FileMenu.tsx
index a7c876d..da85e54 100644
--- a/app/src/components/ui/FileMenu.tsx
+++ b/app/src/components/ui/FileMenu.tsx
@@ -1,25 +1,53 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
import RenameInput from "./inputs/RenameInput";
import { ArrowIcon } from "../icons/ExportCommonIcons";
import MenuBar from "./menu/menu";
+import { ProjectIcon } from "../icons/HeaderIcons";
const FileMenu: React.FC = () => {
const [openMenu, setOpenMenu] = useState(false);
+ const containerRef = useRef(null);
+ let clickTimeout: NodeJS.Timeout | null = null;
+
+ const handleClick = () => {
+ if (clickTimeout) return;
+ setOpenMenu((prev) => !prev);
+ clickTimeout = setTimeout(() => {
+ clickTimeout = null;
+ }, 800);
+ };
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ containerRef.current &&
+ !containerRef.current.contains(event.target as Node)
+ ) {
+ setOpenMenu(false);
+ }
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, []);
+
return (
-
Products
@@ -120,11 +128,16 @@ const Simulations: React.FC = () => {
{products.map((product, index) => (
- setSelectedProduct(product.productId, product.productName)}
+ onClick={() =>
+ setSelectedProduct(product.productId, product.productName)
+ }
>
{
/>
handleRenameProduct(product.productId, newName)}
+ onRename={(newName) =>
+ handleRenameProduct(product.productId, newName)
+ }
/>
{products.length > 1 && (
@@ -158,16 +173,18 @@ const Simulations: React.FC = () => {
-
- {selectedAsset &&
+ {selectedAsset && (
+
+
- {events.map((event, index) => (
-
@@ -175,7 +192,8 @@ const Simulations: React.FC = () => {
Need to Compare Layout?
- Click 'Compare' to review and analyze the layout differences between them.
+ Click 'Compare' to review and analyze the layout
+ differences between them.
@@ -183,22 +201,27 @@ const Simulations: React.FC = () => {
{
+ clearSelectedUser();
+ setCamMode("FirstPerson");
+ }}
+ style={{ "--user-color": selectedUser.color } as React.CSSProperties}
+ >
+
+ )}
+ {selectedUser.name}
+
+
);
};
diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx
index 268ea81..192e009 100644
--- a/app/src/components/ui/analysis/ProductionCapacity.tsx
+++ b/app/src/components/ui/analysis/ProductionCapacity.tsx
@@ -1,10 +1,14 @@
-import React from "react";
+import React, { useState } from "react";
import { ProductionCapacityIcon } from "../../icons/analysis";
-const ProductionCapacity = () => {
+const ProductionCapacity = ({
+ progressPercent = 10,
+ avgProcessTime = "28.4 Secs/unit",
+ machineUtilization = "78%",
+ throughputValue = 128,
+ timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
+}) => {
const totalBars = 6;
- const progressPercent = 50;
-
const barsToFill = Math.floor((progressPercent / 100) * totalBars);
const partialFillPercent =
((progressPercent / 100) * totalBars - barsToFill) * 100;
@@ -14,8 +18,10 @@ const ProductionCapacity = () => {
-
Throughput Summary
- 08:00 - 09:00 AM
+ Production Capacity
+
+ {timeRange.startTime} - {timeRange.endTime}
+
- 128 Units/hour
+ {throughputValue} Units/hour
- {/* Progress Bar */}
+ {/* Dynamic Progress Bar */}
{[...Array(totalBars)].map((_, i) => (
@@ -47,11 +53,11 @@ const ProductionCapacity = () => {
diff --git a/app/src/components/ui/analysis/ROISummary.tsx b/app/src/components/ui/analysis/ROISummary.tsx
index 331eaaf..11101fd 100644
--- a/app/src/components/ui/analysis/ROISummary.tsx
+++ b/app/src/components/ui/analysis/ROISummary.tsx
@@ -1,10 +1,71 @@
-import React from "react";
+import React, { useState } from "react";
import { ROISummaryIcon } from "../../icons/analysis";
+import SemiCircleProgress from "./SemiCircleProgress";
+
+const ROISummary = ({
+ roiSummaryData = {
+ productName: "Product name",
+ roiPercentage: 133,
+ paybackPeriod: 50.3,
+ totalCost: "₹ 1,20,000",
+ revenueGenerated: "₹ 2,80,000",
+ netProfit: "₹ 1,60,000",
+ costBreakdown: [
+ {
+ item: "Raw Material A",
+ unitCost: "₹ 10/unit",
+ laborCost: "₹ 0",
+ totalCost: "₹ 1000",
+ sellingPrice: "₹ 1500",
+ },
+ {
+ item: "Labor",
+ unitCost: "₹ 10/unit",
+ laborCost: "₹ 500",
+ totalCost: "₹ 500",
+ sellingPrice: "N/A",
+ },
+ {
+ item: "Product 1",
+ unitCost: "₹ 10/unit",
+ laborCost: "₹ 200",
+ totalCost: "₹ 200",
+ sellingPrice: "₹ 2000",
+ },
+ {
+ item: "Machine",
+ unitCost: "-",
+ laborCost: "-",
+ totalCost: "₹ 20,000",
+ sellingPrice: "N/A",
+ },
+ {
+ item: "Total",
+ unitCost: "-",
+ laborCost: "-",
+ totalCost: "₹ 1,20,000",
+ sellingPrice: "-",
+ },
+ {
+ item: "Net Profit",
+ unitCost: "-",
+ laborCost: "-",
+ totalCost: "₹ 1,60,000",
+ sellingPrice: "-",
+ },
+ ],
+ },
+}) => {
+ const [isTableOpen, setIsTableOpen] = useState(false); // State to handle the table open/close
+
+ // Function to toggle the breakdown table visibility
+ const toggleTable = () => {
+ setIsTableOpen(!isTableOpen);
+ };
-const ROISummary = () => {
return (
-
Avg. Process Time
- 28.4 Secs/unit
+ {avgProcessTime}
Machine Utilization
- 78%
+ {machineUtilization}
-
+
= ({
- ([]);
+
+ // Generate colors on mount or when process changes
+ useEffect(() => {
+ const generatedColors = process.map(() => getRandomColor());
+ setProcessColors(generatedColors);
+ }, []);
+
+ const intervals = [10, 20, 30, 40, 50, 60]; // in minutes
+ const totalSegments = intervals.length;
+ const progress = 80; // percent (example)
+
+ const processPlayerRef = useRef(null);
+ const processWrapperRef = useRef(null);
+ const [playerPosition, setPlayerPosition] = useState(0);
+
+ const handleProcessMouseDown = (e: React.MouseEvent) => {
+ if (!processWrapperRef.current) return;
+
+ const rect = processWrapperRef.current.getBoundingClientRect();
+ let x = e.clientX - rect.left;
+ x = Math.max(0, Math.min(x, rect.width));
+ setPlayerPosition(x);
+
+ const onMouseMove = (e: MouseEvent) => {
+ if (!processWrapperRef.current) return;
+ const newRect = processWrapperRef.current.getBoundingClientRect();
+ let newX = e.clientX - newRect.left;
+ newX = Math.max(0, Math.min(newX, newRect.width));
+ setPlayerPosition(newX);
+
+ const progressPercent = (newX / newRect.width) * 100;
+ console.log(`Dragging at progress: ${progressPercent.toFixed(1)}%`);
+ };
+
+ const onMouseUp = () => {
+ document.removeEventListener("mousemove", onMouseMove);
+ document.removeEventListener("mouseup", onMouseUp);
+ };
+
+ document.addEventListener("mousemove", onMouseMove);
+ document.addEventListener("mouseup", onMouseUp);
+ };
+
return (
+
);
diff --git a/app/src/components/ui/analysis/SemiCircleProgress.tsx b/app/src/components/ui/analysis/SemiCircleProgress.tsx
new file mode 100644
index 0000000..084636b
--- /dev/null
+++ b/app/src/components/ui/analysis/SemiCircleProgress.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+const SemiCircleProgress = () => {
+ const progress = 50;
+ const clampedProgress = Math.min(Math.max(progress, 0), 100);
+ const gradientProgress = clampedProgress * 0.5;
+
+ return (
+ ROI Summary
@@ -14,6 +75,111 @@ const ROISummary = () => {
+
+ Product :
+ {roiSummaryData.productName}
+
+
+
+
+ +{roiSummaryData.roiPercentage}% ROI with payback in
+ just {roiSummaryData.paybackPeriod} months
+
+
+
+
+
+
+ you're on track to hit it by
+
+ July 2029
+
+
+
+
+
+ Total Cost Incurred
+ {roiSummaryData.totalCost}
+
+
+ Revenue Generated
+
+ {roiSummaryData.revenueGenerated}
+
+
+
+ Net Profit
+ {roiSummaryData.netProfit}
+
+
+
+
+
+
+ â‘
+ Cost Breakdown
+
+
+
+ {isTableOpen ? "⌵" : "⌵"}
+
+
+
+
+
+
+ | Item | +Unit Cost | +Labor Cost | +Total Cost | +Selling Price | +
|---|---|---|---|---|
| {row.item} | +{row.unitCost} | +{row.laborCost} | +{row.totalCost} | +{row.sellingPrice} | +
+
+ 💡
+ How to improve ROI?
+
+
+ Increase CNC utilization by 10%{" "}
+ to shave 0.5 months of payback
+ period
+
+
+
+
+ );
+};
+
+export default SemiCircleProgress;
diff --git a/app/src/components/ui/analysis/ThroughputSummary.tsx b/app/src/components/ui/analysis/ThroughputSummary.tsx
index cb4fac5..b92a82d 100644
--- a/app/src/components/ui/analysis/ThroughputSummary.tsx
+++ b/app/src/components/ui/analysis/ThroughputSummary.tsx
@@ -11,21 +11,57 @@ import { PowerIcon, ThroughputSummaryIcon } from "../../icons/analysis";
ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
+// Helper function to generate random colors
+const getRandomColor = () => {
+ const letters = "0123456789ABCDEF";
+ let color = "#";
+ for (let i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+ }
+ return color;
+};
+
const ThroughputSummary = () => {
- const data = {
+ // Define all data internally within the component
+ const timeRange = {
+ startTime: "08:00 AM",
+ endTime: "09:00 AM",
+ };
+
+ const throughputData = {
labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00"],
+ data: [100, 120, 110, 130, 125, 128, 132],
+ totalThroughput: 1240,
+ assetUsage: 85,
+ };
+
+ const energyConsumption = {
+ energyConsumed: 456,
+ unit: "KWH",
+ };
+
+ // Dynamic shift data
+ const shiftUtilization = [
+ { shift: 1, percentage: 30 },
+ { shift: 2, percentage: 40 },
+ { shift: 3, percentage: 30 },
+ ];
+
+ // Chart data configuration
+ const chartData = {
+ labels: throughputData.labels,
datasets: [
{
label: "Units/hour",
- data: [100, 120, 110, 130, 125, 128, 132],
+ data: throughputData.data,
borderColor: "#B392F0",
tension: 0.4,
- pointRadius: 0, // hide points
+ pointRadius: 0, // Hide points
},
],
};
- const options = {
+ const chartOptions = {
responsive: true,
scales: {
x: {
@@ -57,19 +93,15 @@ const ThroughputSummary = () => {
},
};
- const shiftUtilization = {
- "shift 1": 25,
- "shift 2": 45,
- "shift 3": 15,
- };
-
return (
+
+
+
+
+ {clampedProgress}%
+ Years
+ you're on track to hit it by July 2029
+ Throughput Summary
- 08:00 - 09:00 AM
+
+ {timeRange.startTime} - {timeRange.endTime}
+
- 1240 Units/hour
+ {throughputData.totalThroughput}{" "}
+ Units/hour
Asset usage
- 85%
+ {throughputData.assetUsage}%
-
456
- KWH
+ {energyConsumption.energyConsumed}
+ {energyConsumption.unit}
Shift Utilization
-
85%
+ {throughputData.assetUsage}%
-
-
-
+ {/* Dynamically create progress bars based on shiftUtilization array */}
+ {shiftUtilization.map((shift) => (
+
+ ))}
+
-
-
-
-
-
-
-
-
-
-
-
-
+ {/* Dynamically create shift indicators with random colors */}
+ {shiftUtilization.map((shift) => (
+
+
+
+
+ ))}
+
diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx
index 528fbc2..a23652b 100644
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@@ -7,6 +7,15 @@ import {
usePlayButtonStore,
useResetButtonStore,
} from "../../../store/usePlayButtonStore";
+import {
+ DailyProductionIcon,
+ EndIcon,
+ ExpandIcon,
+ HourlySimulationIcon,
+ MonthlyROI,
+ SpeedIcon,
+ StartIcon,
+} from "../../icons/ExportCommonIcons";
const SimulationPlayer: React.FC = () => {
const { speed, setSpeed } = useAnimationPlaySpeed();
@@ -21,6 +30,7 @@ const SimulationPlayer: React.FC = () => {
// Button functions
const handleReset = () => {
setReset(true);
+ // setReset(!isReset);
setSpeed(1);
};
const handlePlayStop = () => {
@@ -30,7 +40,7 @@ const SimulationPlayer: React.FC = () => {
const handleExit = () => {
setPlaySimulation(false);
setIsPlaying(false);
- setActiveTool("cursor")
+ setActiveTool("cursor");
};
// Slider functions starts
@@ -72,70 +82,277 @@ const SimulationPlayer: React.FC = () => {
}, []);
// Slider function ends
+ // UI-Part
+ const hourlySimulation = 25;
+ const dailyProduction = 75;
+ const monthlyROI = 50;
+
+ const process = [
+ { name: "process 1", completed: 0 }, // 0% completed
+ { name: "process 2", completed: 20 }, // 20% completed
+ { name: "process 3", completed: 40 }, // 40% completed
+ { name: "process 4", completed: 60 }, // 60% completed
+ { name: "process 5", completed: 80 }, // 80% completed
+ { name: "process 6", completed: 100 }, // 100% completed
+ { name: "process 7", completed: 0 }, // 0% completed
+ { name: "process 8", completed: 50 }, // 50% completed
+ { name: "process 9", completed: 90 }, // 90% completed
+ { name: "process 10", completed: 30 }, // 30% completed
+ ];
+ const [expand, setExpand] = useState(false);
+ // Move getRandomColor out of render
+ const getRandomColor = () => {
+ const letters = "0123456789ABCDEF";
+ let color = "#";
+ for (let i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+ }
+ return color;
+ };
+
+ // Store colors for each process item
+ const [processColors, setProcessColors] = useState
diff --git a/app/src/components/ui/inputs/PreviewSelectionWithUpload.tsx b/app/src/components/ui/inputs/PreviewSelectionWithUpload.tsx
index 3e14517..53e03ce 100644
--- a/app/src/components/ui/inputs/PreviewSelectionWithUpload.tsx
+++ b/app/src/components/ui/inputs/PreviewSelectionWithUpload.tsx
@@ -1,41 +1,72 @@
import React, { useState } from "react";
-import LabledDropdown from "./LabledDropdown";
import { ArrowIcon } from "../../icons/ExportCommonIcons";
+import LabledDropdown from "./LabledDropdown";
-const PreviewSelectionWithUpload: React.FC = () => {
- const [showPreview, setSetshowPreview] = useState(false);
+interface PreviewSelectionWithUploadProps {
+ preview?: boolean;
+ upload?: boolean;
+ label?: string;
+ onSelect: (option: string) => void;
+ defaultOption: string;
+ options: string[];
+}
+
+const PreviewSelectionWithUpload: React.FC = ({
+ preview = false,
+ upload = false,
+ onSelect,
+ label,
+ defaultOption,
+ options,
+}) => {
+ const [showPreview, setShowPreview] = useState(false);
return (
= ({ items = [], remove }) => {
{remove && (
- = ({
return isPointInsidePolygon([x, z], polygon2D);
})
.map((item: any) => ({
- id: item.modeluuid,
- name: item.modelname,
+ id: item.modelUuid,
+ name: item.modelName,
position: item.position,
rotation: item.rotation
}));
diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx
index ac21c5a..cdd2a53 100644
--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -10,7 +10,7 @@ import {
ArrowIcon,
EyeIcon,
LockIcon,
- RmoveIcon,
+ RemoveIcon,
} from "../../icons/ExportCommonIcons";
import { useThree } from "@react-three/fiber";
import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
@@ -136,8 +136,8 @@ const List: React.FC = ({ items = [], remove }) => {
console.log('response: ', response);
setFloorItems((prevFloorItems: any[]) =>
prevFloorItems.map((floorItems) =>
- floorItems.modeluuid === zoneAssetId.id
- ? { ...floorItems, modelname: response.modelname }
+ floorItems.modelUuid === zoneAssetId.id
+ ? { ...floorItems, modelName: response.modelName }
: floorItems
)
);
@@ -181,7 +181,7 @@ const List: React.FC = ({ items = [], remove }) => {
{remove && (
setSetshowPreview(!showPreview)}
- >
-
- {showPreview && (
- Preview
-
-
-
-
+ {preview && (
+ <>
+
+ {showPreview && (
+
);
};
diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx
index 0416a9e..d0b62e8 100644
--- a/app/src/components/ui/list/DropDownList.tsx
+++ b/app/src/components/ui/list/DropDownList.tsx
@@ -81,8 +81,8 @@ const DropDownList: React.FC
+
+
+ )}
+
+ )}
+ {upload && (
+
+
)}
-
+
Upload Product
+
+
+
-
+
-
- Upload Product
-
-
-
-
)}
{item.assets && item.assets.length > 0 && (
@@ -218,7 +218,7 @@ const List: React.FC
-
)}
-
+
-
- {
- handleReset();
- }}
- >
-
- {
- handlePlayStop();
- }}
- >
-
- {
- handleExit();
- }}
- >
-
-
- = ({
- userImage,
- userName,
- color,
-}) => {
- return (
- ((resolve) => {
- loader.load(AssetConfigurations[item.modelname!].modelUrl, (gltf) => {
+ loader.load(AssetConfigurations[item.modelName!].modelUrl, (gltf) => {
const model = gltf.scene;
- model.uuid = item.modeluuid!;
+ model.uuid = item.modelUuid!;
model.children[0].children.forEach((child: any) => {
if (child.name !== "CSG_REF") {
@@ -36,7 +36,7 @@ async function loadInitialWallItems(
resolve({
type: item.type,
model: model,
- modelname: item.modelname,
+ modelName: item.modelName,
scale: item.scale,
csgscale: item.csgscale,
csgposition: item.csgposition,
diff --git a/app/src/modules/builder/geomentries/assets/addAssetModel.ts b/app/src/modules/builder/geomentries/assets/addAssetModel.ts
index d7c278c..0bc7352 100644
--- a/app/src/modules/builder/geomentries/assets/addAssetModel.ts
+++ b/app/src/modules/builder/geomentries/assets/addAssetModel.ts
@@ -117,7 +117,7 @@ async function handleModelLoad(
socket: Socket
) {
const model = gltf.scene.clone();
- model.userData = { name: selectedItem.name, modelId: selectedItem.id, modeluuid: model.uuid };
+ model.userData = { name: selectedItem.name, modelId: selectedItem.id, modelUuid: model.uuid };
model.position.set(intersectPoint!.x, 3 + intersectPoint!.y, intersectPoint!.z);
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
@@ -137,8 +137,8 @@ async function handleModelLoad(
}
const newFloorItem: Types.FloorItemType = {
- modeluuid: model.uuid,
- modelname: selectedItem.name,
+ modelUuid: model.uuid,
+ modelName: selectedItem.name,
modelfileID: selectedItem.id,
position: [intersectPoint!.x, intersectPoint!.y, intersectPoint!.z],
rotation: { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z },
@@ -153,8 +153,8 @@ async function handleModelLoad(
// await setFloorItemApi(
// organization,
- // newFloorItem.modeluuid,
- // newFloorItem.modelname,
+ // newFloorItem.modelUuid,
+ // newFloorItem.modelName,
// newFloorItem.modelfileID,
// newFloorItem.position,
// { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z },
@@ -164,18 +164,6 @@ async function handleModelLoad(
// SOCKET
- const data = {
- organization,
- modeluuid: newFloorItem.modeluuid,
- modelname: newFloorItem.modelname,
- modelfileID: newFloorItem.modelfileID,
- position: newFloorItem.position,
- rotation: { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z },
- isLocked: false,
- isVisible: true,
- socketId: socket.id
- };
-
if (selectedItem.type) {
const data = PointsCalculator(
selectedItem.type,
@@ -185,10 +173,14 @@ async function handleModelLoad(
if (!data || !data.points) return;
+ const eventData: any = {
+ type: selectedItem.type,
+ };
+
if (selectedItem.type === "Conveyor") {
const ConveyorEvent: ConveyorEventSchema = {
- modelUuid: newFloorItem.modeluuid,
- modelName: newFloorItem.modelname,
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
position: newFloorItem.position,
rotation: [newFloorItem.rotation.x, newFloorItem.rotation.y, newFloorItem.rotation.z],
state: "idle",
@@ -209,12 +201,18 @@ async function handleModelLoad(
triggers: []
}
}))
- }
+ };
addEvent(ConveyorEvent);
+ eventData.points = ConveyorEvent.points.map(point => ({
+ uuid: point.uuid,
+ position: point.position,
+ rotation: point.rotation
+ }));
+
} else if (selectedItem.type === "Vehicle") {
const vehicleEvent: VehicleEventSchema = {
- modelUuid: newFloorItem.modeluuid,
- modelName: newFloorItem.modelname,
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
position: newFloorItem.position,
rotation: [newFloorItem.rotation.x, newFloorItem.rotation.y, newFloorItem.rotation.z],
state: "idle",
@@ -230,6 +228,7 @@ async function handleModelLoad(
actionType: "travel",
unLoadDuration: 5,
loadCapacity: 10,
+ steeringAngle:0,
pickUpPoint: null,
unLoadPoint: null,
triggers: []
@@ -237,10 +236,16 @@ async function handleModelLoad(
}
};
addEvent(vehicleEvent);
+ eventData.point = {
+ uuid: vehicleEvent.point.uuid,
+ position: vehicleEvent.point.position,
+ rotation: vehicleEvent.point.rotation
+ };
+
} else if (selectedItem.type === "ArmBot") {
const roboticArmEvent: RoboticArmEventSchema = {
- modelUuid: newFloorItem.modeluuid,
- modelName: newFloorItem.modelname,
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
position: newFloorItem.position,
rotation: [newFloorItem.rotation.x, newFloorItem.rotation.y, newFloorItem.rotation.z],
state: "idle",
@@ -265,10 +270,17 @@ async function handleModelLoad(
}
};
addEvent(roboticArmEvent);
+ console.log('roboticArmEvent: ', roboticArmEvent);
+ eventData.point = {
+ uuid: roboticArmEvent.point.uuid,
+ position: roboticArmEvent.point.position,
+ rotation: roboticArmEvent.point.rotation
+ };
+
} else if (selectedItem.type === "StaticMachine") {
const machineEvent: MachineEventSchema = {
- modelUuid: newFloorItem.modeluuid,
- modelName: newFloorItem.modelname,
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
position: newFloorItem.position,
rotation: [newFloorItem.rotation.x, newFloorItem.rotation.y, newFloorItem.rotation.z],
state: "idle",
@@ -288,19 +300,65 @@ async function handleModelLoad(
}
};
addEvent(machineEvent);
+ eventData.point = {
+ uuid: machineEvent.point.uuid,
+ position: machineEvent.point.position,
+ rotation: machineEvent.point.rotation
+ };
}
+
+ const completeData = {
+ organization,
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
+ modelfileID: newFloorItem.modelfileID,
+ position: newFloorItem.position,
+ rotation: { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z },
+ isLocked: false,
+ isVisible: true,
+ socketId: socket.id,
+ eventData: eventData
+ };
+
+ model.userData.eventData = eventData;
+
+ newFloorItem.eventData = eventData;
+
+ setFloorItems((prevItems) => {
+ const updatedItems = [...(prevItems || []), newFloorItem];
+ localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
+ return updatedItems;
+ });
+
+ socket.emit("v2:model-asset:add", completeData);
+
+ gsap.to(model.position, { y: newFloorItem.position[1], duration: 1.5, ease: "power2.out" });
+ gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: "power2.out", onComplete: () => { toast.success("Model Added!"); } });
+ } else {
+
+ const data = {
+ organization,
+ modelUuid: newFloorItem.modelUuid,
+ modelName: newFloorItem.modelName,
+ modelfileID: newFloorItem.modelfileID,
+ position: newFloorItem.position,
+ rotation: { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z },
+ isLocked: false,
+ isVisible: true,
+ socketId: socket.id
+ };
+
+ setFloorItems((prevItems) => {
+ const updatedItems = [...(prevItems || []), newFloorItem];
+ localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
+ return updatedItems;
+ });
+
+ socket.emit("v2:model-asset:add", data);
+
+ gsap.to(model.position, { y: newFloorItem.position[1], duration: 1.5, ease: "power2.out" });
+ gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: "power2.out", onComplete: () => { toast.success("Model Added!"); } });
}
-
- setFloorItems((prevItems) => {
- const updatedItems = [...(prevItems || []), newFloorItem];
- localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
- return updatedItems;
- });
-
- socket.emit("v2:model-asset:add", data);
-
- gsap.to(model.position, { y: newFloorItem.position[1], duration: 1.5, ease: "power2.out" });
- gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: "power2.out", onComplete: () => { toast.success("Model Added!"); } });
}
export default addAssetModel;
diff --git a/app/src/modules/builder/geomentries/assets/assetManager.ts b/app/src/modules/builder/geomentries/assets/assetManager.ts
index 5ff75a3..5f7798e 100644
--- a/app/src/modules/builder/geomentries/assets/assetManager.ts
+++ b/app/src/modules/builder/geomentries/assets/assetManager.ts
@@ -58,7 +58,7 @@ export default async function assetManager(
// Check Three.js Cache
const cachedModel = THREE.Cache.get(item.modelfileID!);
if (cachedModel) {
- // console.log(`[Cache] Fetching ${item.modelname}`);
+ // console.log(`[Cache] Fetching ${item.modelName}`);
processLoadedModel(cachedModel.scene.clone(), item, itemsGroup, resolve);
return;
}
@@ -66,7 +66,7 @@ export default async function assetManager(
// Check IndexedDB
const indexedDBModel = await retrieveGLTF(item.modelfileID!);
if (indexedDBModel) {
- // console.log(`[IndexedDB] Fetching ${item.modelname}`);
+ // console.log(`[IndexedDB] Fetching ${item.modelName}`);
const blobUrl = URL.createObjectURL(indexedDBModel);
loader.load(
blobUrl,
@@ -78,7 +78,7 @@ export default async function assetManager(
},
undefined,
(error) => {
- toast.error(`[IndexedDB] Error loading ${item.modelname}:`);
+ toast.error(`[IndexedDB] Error loading ${item.modelName}:`);
resolve();
}
);
@@ -86,7 +86,7 @@ export default async function assetManager(
}
// Fetch from Backend
- // console.log(`[Backend] Fetching ${item.modelname}`);
+ // console.log(`[Backend] Fetching ${item.modelName}`);
loader.load(
modelUrl,
async (gltf) => {
@@ -97,7 +97,7 @@ export default async function assetManager(
},
undefined,
(error) => {
- toast.error(`[Backend] Error loading ${item.modelname}:`);
+ toast.error(`[Backend] Error loading ${item.modelName}:`);
resolve();
}
);
@@ -112,16 +112,16 @@ export default async function assetManager(
) {
if (!activePromises.get(taskId)) return; // Stop processing if task is canceled
- const existingModel = itemsGroup?.current?.getObjectByProperty("uuid", item.modeluuid);
+ const existingModel = itemsGroup?.current?.getObjectByProperty("uuid", item.modelUuid);
if (existingModel) {
- // console.log(`Model ${item.modelname} already exists in the scene.`);
+ // console.log(`Model ${item.modelName} already exists in the scene.`);
resolve();
return;
}
const model = gltf;
- model.uuid = item.modeluuid;
- model.userData = { name: item.modelname, modelId: item.modelfileID, modeluuid: item.modeluuid };
+ model.uuid = item.modelUuid;
+ model.userData = { name: item.modelName, modelId: item.modelfileID, modelUuid: item.modelUuid };
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
model.position.set(...item.position);
model.rotation.set(item.rotation.x, item.rotation.y, item.rotation.z);
diff --git a/app/src/modules/builder/geomentries/assets/deleteFloorItems.ts b/app/src/modules/builder/geomentries/assets/deleteFloorItems.ts
index 18136b3..f13ebee 100644
--- a/app/src/modules/builder/geomentries/assets/deleteFloorItems.ts
+++ b/app/src/modules/builder/geomentries/assets/deleteFloorItems.ts
@@ -5,6 +5,8 @@ import * as Types from "../../../../types/world/worldTypes";
// import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi';
import { Socket } from 'socket.io-client';
import { getFloorAssets } from '../../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
+import { useEventsStore } from "../../../../store/simulation/useEventsStore";
+import { useProductStore } from "../../../../store/simulation/useProductStore";
async function DeleteFloorItems(
itemsGroup: Types.RefGroup,
@@ -22,7 +24,7 @@ async function DeleteFloorItems(
const items = await getFloorAssets(organization);
const removedItem = items.find(
- (item: { modeluuid: string }) => item.modeluuid === hoveredDeletableFloorItem.current?.uuid
+ (item: { modelUuid: string }) => item.modelUuid === hoveredDeletableFloorItem.current?.uuid
);
if (!removedItem) {
@@ -31,26 +33,29 @@ async function DeleteFloorItems(
//REST
- // const response = await deleteFloorItem(organization, removedItem.modeluuid, removedItem.modelname);
+ // const response = await deleteFloorItem(organization, removedItem.modelUuid, removedItem.modelName);
//SOCKET
const data = {
organization: organization,
- modeluuid: removedItem.modeluuid,
- modelname: removedItem.modelname,
+ modelUuid: removedItem.modelUuid,
+ modelName: removedItem.modelName,
socketId: socket.id
}
const response = socket.emit('v2:model-asset:delete', data)
+ useEventsStore.getState().removeEvent(removedItem.modelUuid);
+ useProductStore.getState().deleteEvent(removedItem.modelUuid);
+
if (response) {
const updatedItems = items.filter(
- (item: { modeluuid: string }) => item.modeluuid !== hoveredDeletableFloorItem.current?.uuid
+ (item: { modelUuid: string }) => item.modelUuid !== hoveredDeletableFloorItem.current?.uuid
);
const storedItems = JSON.parse(localStorage.getItem("FloorItems") || '[]');
- const updatedStoredItems = storedItems.filter((item: { modeluuid: string }) => item.modeluuid !== hoveredDeletableFloorItem.current?.uuid);
+ const updatedStoredItems = storedItems.filter((item: { modelUuid: string }) => item.modelUuid !== hoveredDeletableFloorItem.current?.uuid);
localStorage.setItem("FloorItems", JSON.stringify(updatedStoredItems));
if (hoveredDeletableFloorItem.current) {
diff --git a/app/src/modules/builder/geomentries/walls/addWallItems.ts b/app/src/modules/builder/geomentries/walls/addWallItems.ts
index 9c578aa..fd9eb48 100644
--- a/app/src/modules/builder/geomentries/walls/addWallItems.ts
+++ b/app/src/modules/builder/geomentries/walls/addWallItems.ts
@@ -43,7 +43,7 @@ async function AddWallItems(
const newWallItem = {
type: config.type,
model: model,
- modelname: selected,
+ modelName: selected,
scale: config.scale,
csgscale: config.csgscale,
csgposition: config.csgposition,
@@ -59,7 +59,7 @@ async function AddWallItems(
// await setWallItem(
// organization,
// model.uuid,
- // newWallItem.modelname,
+ // newWallItem.modelName,
// newWallItem.type!,
// newWallItem.csgposition!,
// newWallItem.csgscale!,
@@ -72,8 +72,8 @@ async function AddWallItems(
const data = {
organization: organization,
- modeluuid: model.uuid,
- modelname: newWallItem.modelname,
+ modelUuid: model.uuid,
+ modelName: newWallItem.modelName,
type: newWallItem.type!,
csgposition: newWallItem.csgposition!,
csgscale: newWallItem.csgscale!,
@@ -92,7 +92,7 @@ async function AddWallItems(
const { model, ...rest } = item;
return {
...rest,
- modeluuid: model?.uuid,
+ modelUuid: model?.uuid,
};
});
diff --git a/app/src/modules/builder/geomentries/walls/deleteWallItems.ts b/app/src/modules/builder/geomentries/walls/deleteWallItems.ts
index abbf0c8..b5d40f4 100644
--- a/app/src/modules/builder/geomentries/walls/deleteWallItems.ts
+++ b/app/src/modules/builder/geomentries/walls/deleteWallItems.ts
@@ -28,14 +28,14 @@ function DeleteWallItems(
//REST
- // await deleteWallItem(organization, removedItem?.model?.uuid!, removedItem?.modelname!)
+ // await deleteWallItem(organization, removedItem?.model?.uuid!, removedItem?.modelName!)
//SOCKET
const data = {
organization: organization,
- modeluuid: removedItem?.model?.uuid!,
- modelname: removedItem?.modelname!,
+ modelUuid: removedItem?.model?.uuid!,
+ modelName: removedItem?.modelName!,
socketId: socket.id
}
@@ -45,7 +45,7 @@ function DeleteWallItems(
const { model, ...rest } = item;
return {
...rest,
- modeluuid: model?.uuid,
+ modelUuid: model?.uuid,
};
});
diff --git a/app/src/modules/builder/groups/wallItemsGroup.tsx b/app/src/modules/builder/groups/wallItemsGroup.tsx
index 43845e7..f993754 100644
--- a/app/src/modules/builder/groups/wallItemsGroup.tsx
+++ b/app/src/modules/builder/groups/wallItemsGroup.tsx
@@ -91,7 +91,7 @@ const WallItemsGroup = ({ currentWallItem, AssetConfigurations, hoveredDeletable
const { model, ...rest } = item;
return {
...rest,
- modeluuid: model?.uuid,
+ modelUuid: model?.uuid,
};
});
@@ -110,7 +110,7 @@ const WallItemsGroup = ({ currentWallItem, AssetConfigurations, hoveredDeletable
// await setWallItem(
// organization,
// currentItem?.model?.uuid,
- // currentItem.modelname,
+ // currentItem.modelName,
// currentItem.type!,
// currentItem.csgposition!,
// currentItem.csgscale!,
@@ -123,8 +123,8 @@ const WallItemsGroup = ({ currentWallItem, AssetConfigurations, hoveredDeletable
const data = {
organization: organization,
- modeluuid: currentItem.model?.uuid!,
- modelname: currentItem.modelname!,
+ modelUuid: currentItem.model?.uuid!,
+ modelName: currentItem.modelName!,
type: currentItem.type!,
csgposition: currentItem.csgposition!,
csgscale: currentItem.csgscale!,
diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx
index d218534..1eadd24 100644
--- a/app/src/modules/builder/groups/zoneGroup.tsx
+++ b/app/src/modules/builder/groups/zoneGroup.tsx
@@ -69,7 +69,9 @@ const ZoneGroup: React.FC = () => {
},
transparent: true,
depthWrite: false,
- }), []);
+ }),
+ []
+ );
useEffect(() => {
const fetchZones = async () => {
@@ -148,6 +150,7 @@ const ZoneGroup: React.FC = () => {
}
}, [toolMode, toggleView]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
const addZoneToBackend = async (zone: {
zoneId: string;
zoneName: string;
@@ -503,6 +506,15 @@ const ZoneGroup: React.FC = () => {
draggedSphere,
movePoint,
activeLayer,
+ raycaster,
+ pointer,
+ controls,
+ plane,
+ setZones,
+ setZonePoints,
+ addZoneToBackend,
+ handleDeleteZone,
+ updateZoneToBackend,
]);
useFrame(() => {
@@ -551,6 +563,7 @@ const ZoneGroup: React.FC = () => {
key={index}
position={midpoint}
rotation={[0, -angle, 0]}
+ visible={false}
>
{
const navigate = useNavigate();
@@ -20,13 +20,14 @@ const CamModelsGroup = () => {
const { socket } = useSocketStore();
const { activeModule } = useModuleStore();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/");
loader.setDRACOLoader(dracoLoader);
const [cams, setCams] = useState([]);
- const [models, setModels] = useState>({});
+ const [models, setModels] = useState>({});
const dedupeCams = (cams: any[]) => {
const seen = new Set();
@@ -102,6 +103,7 @@ const CamModelsGroup = () => {
});
socket.on("cameraUpdateResponse", (data: any) => {
+
if (
!groupRef.current ||
socket.id === data.socketId ||
@@ -122,6 +124,11 @@ const CamModelsGroup = () => {
data.data.rotation.y,
data.data.rotation.z
),
+ target: new THREE.Vector3(
+ data.data.target.x,
+ data.data.target.y,
+ data.data.target.z
+ ),
},
}));
});
@@ -131,7 +138,7 @@ const CamModelsGroup = () => {
socket.off("userDisConnectResponse");
socket.off("cameraUpdateResponse");
};
- }, [socket]);
+ }, [email, loader, navigate, setActiveUsers, socket]);
useFrame(() => {
if (!groupRef.current) return;
@@ -217,9 +224,11 @@ const CamModelsGroup = () => {
position={[-0.015, 0, 0.7]}
>
0.5x
-
-
-
-
-
-
-
-
-
-
-
diff --git a/app/src/functions/collabUserIcon.tsx b/app/src/functions/collabUserIcon.tsx
deleted file mode 100644
index 9e6802b..0000000
--- a/app/src/functions/collabUserIcon.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import CustomAvatar from "./users/Avatar";
-
-interface CollabUserIconProps {
- userName: string;
- userImage?: string;
- color: string;
-}
-
-const CollabUserIcon: React.FC
-
- {speed.toFixed(1)}x
+
+
+ {/* hourlySimulation */}
+
-
+
+ {/* dailyProduction */}
+
+
-
+
+
+ Hourly Simulation
+
+
+
+
+ {/* monthlyROI */}
+
+
+
+
+ Daily Production
+
+
+
+
+
+
+
+
+ Monthly ROI
+
+
+
{" "}
8x
+
+
+ {
+ handleReset();
+ }}
+ >
+
+ {
+ handlePlayStop();
+ }}
+ >
+
+ {
+ handleExit();
+ }}
+ >
+
+ setExpand(!expand)}
+ >
+
+
+
+
+
+
+
+
+
+
+
+ 23 April ,25
+ 04:41 PM
+
+
+
+
+ {intervals.map((label, index) => {
+ const segmentProgress = (index / totalSegments) * 100;
+ const isFilled = progress >= segmentProgress;
+ return (
+
+
+ );
+ })}
+
+
+
+ {index < intervals.length - 1 && (
+ {label} mins
+
+ = ((index + 1) / totalSegments) * 100
+ ? "filled"
+ : ""
+ }`}
+ >
+ )}
+
+
+
+
+ 00:10:20
+
+
+
+
+
+
+
+
+ Speed
+
+
+ 0X
+
+
+
+
+
+
+
+
+
+
+
+
+ {speed.toFixed(1)}x
+
+
+ 8x
+
+
+
+ {process.map((item, index) => (
+
+ ))}
+
+
-
- );
-};
-
-export default CollabUserIcon;
diff --git a/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts b/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts
index c46c0e7..a351d73 100644
--- a/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts
+++ b/app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts
@@ -72,7 +72,7 @@ async function loadInitialFloorItems(
// Check Three.js Cache
const cachedModel = THREE.Cache.get(item.modelfileID!);
if (cachedModel) {
- // console.log(`[Cache] Fetching ${item.modelname}`);
+ // console.log(`[Cache] Fetching ${item.modelName}`);
processLoadedModel(cachedModel.scene.clone(), item, itemsGroup, setFloorItems, addEvent);
modelsLoaded++;
checkLoadingCompletion(modelsLoaded, modelsToLoad, dracoLoader, resolve);
@@ -82,7 +82,7 @@ async function loadInitialFloorItems(
// Check IndexedDB
const indexedDBModel = await retrieveGLTF(item.modelfileID!);
if (indexedDBModel) {
- // console.log(`[IndexedDB] Fetching ${item.modelname}`);
+ // console.log(`[IndexedDB] Fetching ${item.modelName}`);
const blobUrl = URL.createObjectURL(indexedDBModel);
loader.load(blobUrl, (gltf) => {
URL.revokeObjectURL(blobUrl);
@@ -94,7 +94,7 @@ async function loadInitialFloorItems(
},
undefined,
(error) => {
- toast.error(`[IndexedDB] Error loading ${item.modelname}:`);
+ toast.error(`[IndexedDB] Error loading ${item.modelName}:`);
URL.revokeObjectURL(blobUrl);
resolve();
}
@@ -103,7 +103,7 @@ async function loadInitialFloorItems(
}
// Fetch from Backend
- // console.log(`[Backend] Fetching ${item.modelname}`);
+ // console.log(`[Backend] Fetching ${item.modelName}`);
const modelUrl = `${url_Backend_dwinzo}/api/v2/AssetFile/${item.modelfileID!}`;
loader.load(modelUrl, async (gltf) => {
const modelBlob = await fetch(modelUrl).then((res) => res.blob());
@@ -115,18 +115,18 @@ async function loadInitialFloorItems(
},
undefined,
(error) => {
- toast.error(`[Backend] Error loading ${item.modelname}:`);
+ toast.error(`[Backend] Error loading ${item.modelName}:`);
resolve();
}
);
});
} else {
- // console.log(`Item ${item.modelname} is not near`);
+ // console.log(`Item ${item.modelName} is not near`);
setFloorItems((prevItems) => [
...(prevItems || []),
{
- modeluuid: item.modeluuid,
- modelname: item.modelname,
+ modelUuid: item.modelUuid,
+ modelName: item.modelName,
position: item.position,
rotation: item.rotation,
modelfileID: item.modelfileID,
@@ -154,9 +154,9 @@ function processLoadedModel(
addEvent: (event: EventsSchema) => void,
) {
const model = gltf.clone();
- model.uuid = item.modeluuid;
+ model.uuid = item.modelUuid;
model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
- model.userData = { name: item.modelname, modelId: item.modelfileID, modeluuid: item.modeluuid };
+ model.userData = { name: item.modelName, modelId: item.modelfileID, modelUuid: item.modelUuid, eventData: item.eventData };
model.position.set(...item.position);
model.rotation.set(item.rotation.x, item.rotation.y, item.rotation.z);
@@ -170,256 +170,142 @@ function processLoadedModel(
}
});
-
itemsGroup?.current?.add(model);
- setFloorItems((prevItems) => [
- ...(prevItems || []),
- {
- modeluuid: item.modeluuid,
- modelname: item.modelname,
- position: item.position,
- rotation: item.rotation,
- modelfileID: item.modelfileID,
- isLocked: item.isLocked,
- isVisible: item.isVisible,
- },
- ]);
+ if (item.eventData) {
+ setFloorItems((prevItems) => [
+ ...(prevItems || []),
+ {
+ modelUuid: item.modelUuid,
+ modelName: item.modelName,
+ position: item.position,
+ rotation: item.rotation,
+ modelfileID: item.modelfileID,
+ isLocked: item.isLocked,
+ isVisible: item.isVisible,
+ eventData: item.eventData,
+ },
+ ]);
- if (item.modelfileID === "a1ee92554935007b10b3eb05") {
- const data = PointsCalculator(
- 'Vehicle',
- gltf.clone(),
- new THREE.Vector3(...model.rotation)
- );
-
- if (!data || !data.points) return;
-
- const vehicleEvent: VehicleEventSchema = {
- modelUuid: item.modeluuid,
- modelName: item.modelname,
- position: item.position,
- rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
- state: "idle",
- type: "vehicle",
- speed: 1,
- point: {
- uuid: THREE.MathUtils.generateUUID(),
- position: [data.points[0].x, data.points[0].y, data.points[0].z],
- rotation: [0, 0, 0],
- action: {
- actionUuid: THREE.MathUtils.generateUUID(),
- actionName: "Vehicle Action",
- actionType: "travel",
- unLoadDuration: 5,
- loadCapacity: 10,
- pickUpPoint: null,
- unLoadPoint: null,
- triggers: []
- }
- }
- };
- addEvent(vehicleEvent);
- } else if (item.modelfileID === "7dc04e36882e4debbc1a8e3d") {
- const data = PointsCalculator(
- 'Conveyor',
- gltf.clone(),
- new THREE.Vector3(...model.rotation)
- );
-
- if (!data || !data.points) return;
-
- const ConveyorEvent: ConveyorEventSchema = {
- modelUuid: item.modeluuid,
- modelName: item.modelname,
- position: item.position,
- rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
- state: "idle",
- type: "transfer",
- speed: 1,
- points: data.points.map((point: THREE.Vector3, index: number) => ({
- uuid: THREE.MathUtils.generateUUID(),
- position: [point.x, point.y, point.z],
- rotation: [0, 0, 0],
- action: {
- actionUuid: THREE.MathUtils.generateUUID(),
- actionName: `Action ${index + 1}`,
- actionType: 'default',
- material: 'Default material',
- delay: 0,
- spawnInterval: 5,
- spawnCount: 1,
- triggers: []
- }
- }))
- };
- addEvent(ConveyorEvent);
- } else if (item.modelfileID === "7dc04e36882e4debbc1a8e3d") {
- // const data = PointsCalculator(
- // 'Conveyor',
- // gltf.clone(),
- // new THREE.Vector3(...model.rotation)
- // );
-
- // if (!data || !data.points) return;
-
- // const points: ConveyorPointSchema[] = data.points.map((point: THREE.Vector3, index: number) => {
- // const actionUuid = THREE.MathUtils.generateUUID();
- // return {
- // uuid: THREE.MathUtils.generateUUID(),
- // position: [point.x, point.y, point.z],
- // rotation: [0, 0, 0],
- // action: {
- // actionUuid,
- // actionName: `Action ${index}`,
- // actionType: 'default',
- // material: 'inherit',
- // delay: 0,
- // spawnInterval: 5,
- // spawnCount: 1,
- // triggers: []
- // }
- // };
- // });
-
- // points.forEach((point, index) => {
- // if (index < points.length - 1) {
- // const nextPoint = points[index + 1];
- // point.action.triggers.push({
- // triggerUuid: THREE.MathUtils.generateUUID(),
- // triggerName: `Trigger 1`,
- // triggerType: "onComplete",
- // delay: 0,
- // triggeredAsset: {
- // triggeredModel: {
- // modelName: item.modelname,
- // modelUuid: item.modeluuid
- // },
- // triggeredPoint: {
- // pointName: `Point ${index + 1}`,
- // pointUuid: nextPoint.uuid
- // },
- // triggeredAction: {
- // actionName: nextPoint.action.actionName,
- // actionUuid: nextPoint.action.actionUuid
- // }
- // }
- // });
- // }
- // });
-
- // const ConveyorEvent: ConveyorEventSchema = {
- // modelUuid: item.modeluuid,
- // modelName: item.modelname,
- // position: item.position,
- // rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
- // state: "idle",
- // type: "transfer",
- // speed: 1,
- // points
- // };
- // addEvent(ConveyorEvent);
- } else if (item.modelfileID === "7dc04e36882e4debbc1a8e3d") {
- const data = PointsCalculator(
- 'Conveyor',
- gltf.clone(),
- new THREE.Vector3(...model.rotation)
- );
-
- if (!data || !data.points) return;
-
- const ConveyorEvent: ConveyorEventSchema = {
- modelUuid: item.modeluuid,
- modelName: item.modelname,
- position: item.position,
- rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
- state: "idle",
- type: "transfer",
- speed: 1,
- points: data.points.map((point: THREE.Vector3, index: number) => ({
- uuid: THREE.MathUtils.generateUUID(),
- position: [point.x, point.y, point.z],
- rotation: [0, 0, 0],
- action: {
- actionUuid: THREE.MathUtils.generateUUID(),
- actionName: `Action ${index}`,
- actionType: 'default',
- material: 'inherit',
- delay: 0,
- spawnInterval: 5,
- spawnCount: 1,
- triggers: []
- }
- }))
- };
- addEvent(ConveyorEvent);
- } else if (item.modelfileID === "29dee78715ad5b853f5c346d") {
- const data = PointsCalculator(
- 'StaticMachine',
- gltf.clone(),
- new THREE.Vector3(...model.rotation)
- );
-
- if (!data || !data.points) return;
-
- const machineEvent: MachineEventSchema = {
- modelUuid: item.modeluuid,
- modelName: item.modelname,
- position: item.position,
- rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
- state: "idle",
- type: "machine",
- point: {
- uuid: THREE.MathUtils.generateUUID(),
- position: [data.points[0].x, data.points[0].y, data.points[0].z],
- rotation: [0, 0, 0],
- action: {
- actionUuid: THREE.MathUtils.generateUUID(),
- actionName: "Process Action",
- actionType: "process",
- processTime: 10,
- swapMaterial: "material-id",
- triggers: []
- }
- }
- };
- addEvent(machineEvent);
- } else if (item.modelfileID === "52e6681fbb743a890d96c914") {
- const data = PointsCalculator(
- 'ArmBot',
- gltf.clone(),
- new THREE.Vector3(...model.rotation)
- );
-
- if (!data || !data.points) return;
-
- const roboticArmEvent: RoboticArmEventSchema = {
- modelUuid: item.modeluuid,
- modelName: item.modelname,
- position: item.position,
- rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
- state: "idle",
- type: "roboticArm",
- speed: 1,
- point: {
- uuid: THREE.MathUtils.generateUUID(),
- position: [data.points[0].x, data.points[0].y, data.points[0].z],
- rotation: [0, 0, 0],
- actions: [
- {
+ if (item.eventData.type === "vehicle") {
+ const vehicleEvent: VehicleEventSchema = {
+ modelUuid: item.modelUuid,
+ modelName: item.modelName,
+ position: item.position,
+ rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
+ state: "idle",
+ type: "vehicle",
+ speed: 1,
+ point: {
+ uuid: item.eventData.point?.uuid || THREE.MathUtils.generateUUID(),
+ position: [item.eventData.point?.position[0] || 0, item.eventData.point?.position[1] || 0, item.eventData.point?.position[2] || 0],
+ rotation: [item.eventData.point?.rotation[0] || 0, item.eventData.point?.rotation[1] || 0, item.eventData.point?.rotation[2] || 0],
+ action: {
actionUuid: THREE.MathUtils.generateUUID(),
- actionName: "Pick and Place",
- actionType: "pickAndPlace",
- process: {
- startPoint: [0, 0, 0],
- endPoint: [0, 0, 0]
- },
+ actionName: "Vehicle Action",
+ actionType: "travel",
+ unLoadDuration: 5,
+ loadCapacity: 10,
+ steeringAngle:0,
+ pickUpPoint: null,
+ unLoadPoint: null,
triggers: []
}
- ]
- }
- };
- addEvent(roboticArmEvent);
+ }
+ };
+ addEvent(vehicleEvent);
+ } else if (item.eventData.type === "Conveyor") {
+ const ConveyorEvent: ConveyorEventSchema = {
+ modelUuid: item.modelUuid,
+ modelName: item.modelName,
+ position: item.position,
+ rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
+ state: "idle",
+ type: "transfer",
+ speed: 1,
+ points: item.eventData.points?.map((point: any, index: number) => ({
+ uuid: point.uuid || THREE.MathUtils.generateUUID(),
+ position: [point.position[0], point.position[1], point.position[2]],
+ rotation: [point.rotation[0], point.rotation[1], point.rotation[2]],
+ action: {
+ actionUuid: THREE.MathUtils.generateUUID(),
+ actionName: `Action ${index + 1}`,
+ actionType: 'default',
+ material: 'Default material',
+ delay: 0,
+ spawnInterval: 5,
+ spawnCount: 1,
+ triggers: []
+ }
+ })) || [],
+ };
+ addEvent(ConveyorEvent);
+ } else if (item.eventData.type === "StaticMachine") {
+ const machineEvent: MachineEventSchema = {
+ modelUuid: item.modelUuid,
+ modelName: item.modelName,
+ position: item.position,
+ rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
+ state: "idle",
+ type: "machine",
+ point: {
+ uuid: item.eventData.point?.uuid || THREE.MathUtils.generateUUID(),
+ position: [item.eventData.point?.position[0] || 0, item.eventData.point?.position[1] || 0, item.eventData.point?.position[2] || 0],
+ rotation: [item.eventData.point?.rotation[0] || 0, item.eventData.point?.rotation[1] || 0, item.eventData.point?.rotation[2] || 0],
+ action: {
+ actionUuid: THREE.MathUtils.generateUUID(),
+ actionName: "Process Action",
+ actionType: "process",
+ processTime: 10,
+ swapMaterial: "material-id",
+ triggers: []
+ }
+ }
+ };
+ addEvent(machineEvent);
+ } else if (item.eventData.type === "ArmBot") {
+ const roboticArmEvent: RoboticArmEventSchema = {
+ modelUuid: item.modelUuid,
+ modelName: item.modelName,
+ position: item.position,
+ rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
+ state: "idle",
+ type: "roboticArm",
+ speed: 1,
+ point: {
+ uuid: item.eventData.point?.uuid || THREE.MathUtils.generateUUID(),
+ position: [item.eventData.point?.position[0] || 0, item.eventData.point?.position[1] || 0, item.eventData.point?.position[2] || 0],
+ rotation: [item.eventData.point?.rotation[0] || 0, item.eventData.point?.rotation[1] || 0, item.eventData.point?.rotation[2] || 0],
+ actions: [
+ {
+ actionUuid: THREE.MathUtils.generateUUID(),
+ actionName: "Pick and Place",
+ actionType: "pickAndPlace",
+ process: {
+ startPoint: [0, 0, 0],
+ endPoint: [0, 0, 0]
+ },
+ triggers: []
+ }
+ ]
+ }
+ };
+ addEvent(roboticArmEvent);
+
+ }
+ } else {
+ setFloorItems((prevItems) => [
+ ...(prevItems || []),
+ {
+ modelUuid: item.modelUuid,
+ modelName: item.modelName,
+ position: item.position,
+ rotation: item.rotation,
+ modelfileID: item.modelfileID,
+ isLocked: item.isLocked,
+ isVisible: item.isVisible,
+ },
+ ]);
}
gsap.to(model.position, { y: item.position[1], duration: 1.5, ease: 'power2.out' });
diff --git a/app/src/modules/builder/IntialLoad/loadInitialWallItems.ts b/app/src/modules/builder/IntialLoad/loadInitialWallItems.ts
index 34273af..f9799a8 100644
--- a/app/src/modules/builder/IntialLoad/loadInitialWallItems.ts
+++ b/app/src/modules/builder/IntialLoad/loadInitialWallItems.ts
@@ -22,9 +22,9 @@ async function loadInitialWallItems(
const loadedWallItems = await Promise.all(storedWallItems.map(async (item) => {
const loader = new GLTFLoader();
return new Promise
- {userImage ? (
- 
- ) : (
-
-
- {userName}
-
-