-
+
+
+
)}
diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx
index f9f48fb..a88baee 100644
--- a/app/src/components/layout/sidebarRight/Header.tsx
+++ b/app/src/components/layout/sidebarRight/Header.tsx
@@ -1,14 +1,14 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
import { AppDockIcon } from "../../icons/HeaderIcons";
import orgImg from "../../../assets/orgTemp.png";
import { useActiveUsers } from "../../../store/store";
-import { getAvatarColor } from "../../../functions/users/functions/getAvatarColor";
import { ActiveUser } from "../../../types/users";
import CollaborationPopup from "../../templates/CollaborationPopup";
+import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
const Header: React.FC = () => {
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 = () => {
)}
-
{
setUserManagement(true);
}}
>
Share
-
+
{/*
+
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 { products } = useProductStore();
+ const { products, addEvent } = useProductStore();
const { selectedEventSphere } = useSelectedEventSphere();
+
+ const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
useEffect(() => {
const event = getCurrentEventData();
setCurrentEventData(event);
@@ -77,7 +81,7 @@ const EventProperties: React.FC = () => {
)}
{!currentEventData && selectedEventSphere && (
-
- 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 847d035..88ae240 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
@@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react";
import {
+ useSelectedAsset,
useSelectedEventData,
useSelectedEventSphere,
useSelectedProduct,
@@ -11,6 +12,7 @@ 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";
const EventProperties: React.FC = () => {
const { selectedEventData } = useSelectedEventData();
@@ -20,8 +22,10 @@ const EventProperties: React.FC = () => {
null
);
const [assetType, setAssetType] = useState
- {Edit ? "Cancel" : "Edit"}
+
+
-
+
-
+ {Edit ? "Cancel" : "Edit"}
+
- Set View
-
- )}
+ {Edit && (
+
+ Set View
+
+ )}
+
+
)}
{!selectedEventSphere && (
-
Oops! It looks like this object doesn't have an event assigned yet. To continue, please link it to one of the @@ -91,7 +95,19 @@ const EventProperties: React.FC = () => {
-
{products.map((product) => (
- -
+
Oops! It looks like you haven't selected an event point yet. Please select an event to view its properties. 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 b370b3e..7a0bc07 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx @@ -135,7 +135,7 @@ function ConveyorMechanics() { <> {selectedEventData && ( <> -
+
+
+
-
-
-
+
)}
);
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 7c20ce5..acf65ae 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
@@ -134,7 +134,7 @@ function RoboticArmMechanics() {
<>
{selectedEventData && selectedPointData && (
<>
-
+
-
+
+
+
-
-
+
-
-
+
)}
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 fa2cfdf..db785da 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
@@ -85,7 +85,7 @@ function MachineMechanics() {
return (
<>
{selectedEventData && (
- <>
+
+
+
+
)}
);
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
index 4524ceb..d8456e5 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
@@ -75,18 +75,10 @@ function VehicleMechanics() {
const handlePickPointChange = (value: string) => {
if (!selectedPointData) return;
- const [x, y, z] = value.split(",").map(Number);
- updateAction(selectedPointData.action.actionUuid, {
- pickUpPoint: { x, y, z },
- });
};
const handleUnloadPointChange = (value: string) => {
if (!selectedPointData) return;
- const [x, y, z] = value.split(",").map(Number);
- updateAction(selectedPointData.action.actionUuid, {
- unLoadPoint: { x, y, z },
- });
};
// Get current values from store
@@ -107,13 +99,9 @@ function VehicleMechanics() {
? 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",
@@ -124,7 +112,7 @@ function VehicleMechanics() {
<>
{selectedEventData && (
<>
-
-
-
+
-
- )}
+ )}
+
)}
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 d92ed80..ae7a498 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
@@ -74,7 +74,7 @@ function StorageMechanics() {
return (
<>
{selectedEventData && (
- <>
+
+
-
+
+
+ {}}
+ disabled={true}
+ />
+
+
+
- {}}
- disabled={true}
- />
-
-
-
-
+
-
- = ({ val }) => {
- return (
- (null);
- const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent } = useProductStore();
- const { selectedProduct, setSelectedProduct } = useSelectedProduct();
- const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
+ const productsContainerRef = useRef(null);
+ const {
+ products,
+ addProduct,
+ removeProduct,
+ renameProduct,
+ addEvent,
+ removeEvent,
+ } = useProductStore();
+ const { selectedProduct, setSelectedProduct } = useSelectedProduct();
+ const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
- const handleAddProduct = () => {
- addProduct(`Product ${products.length + 1}`, generateUUID());
- };
+ const [openObjects, setOpenObjects] = useState(true);
- const handleRemoveProduct = (productId: string) => {
- const currentIndex = products.findIndex(p => p.productId === productId);
- const isSelected = selectedProduct.productId === productId;
+ const handleAddProduct = () => {
+ addProduct(`Product ${products.length + 1}`, generateUUID());
+ };
- const updatedProducts = products.filter(p => p.productId !== productId);
+ const handleRemoveProduct = (productId: string) => {
+ const currentIndex = products.findIndex((p) => p.productId === productId);
+ const isSelected = selectedProduct.productId === productId;
- if (isSelected) {
- if (updatedProducts.length > 0) {
- let newSelectedIndex = currentIndex;
- if (currentIndex >= updatedProducts.length) {
- newSelectedIndex = updatedProducts.length - 1;
- }
- setSelectedProduct(
- updatedProducts[newSelectedIndex].productId,
- updatedProducts[newSelectedIndex].productName
- );
- } else {
- setSelectedProduct('', '');
- }
+ const updatedProducts = products.filter((p) => p.productId !== productId);
+
+ if (isSelected) {
+ if (updatedProducts.length > 0) {
+ let newSelectedIndex = currentIndex;
+ if (currentIndex >= updatedProducts.length) {
+ newSelectedIndex = updatedProducts.length - 1;
}
+ setSelectedProduct(
+ updatedProducts[newSelectedIndex].productId,
+ updatedProducts[newSelectedIndex].productName
+ );
+ } else {
+ setSelectedProduct("", "");
+ }
+ }
- removeProduct(productId);
- };
+ removeProduct(productId);
+ };
- const handleRenameProduct = (productId: string, newName: string) => {
- renameProduct(productId, newName);
- if (selectedProduct.productId === productId) {
- setSelectedProduct(productId, newName);
- }
- };
+ const handleRenameProduct = (productId: string, newName: string) => {
+ renameProduct(productId, newName);
+ if (selectedProduct.productId === productId) {
+ setSelectedProduct(productId, newName);
+ }
+ };
- const handleAddEventToProduct = () => {
- if (selectedAsset) {
- addEvent(selectedProduct.productId, selectedAsset);
- // upsertProductOrEventApi({
- // productName: selectedProduct.productName,
- // productId: selectedProduct.productId,
- // eventDatas: selectedAsset
- // });
- clearSelectedAsset();
- }
- };
+ const handleRemoveEventFromProduct = () => {
+ if (selectedAsset) {
+ removeEvent(selectedProduct.productId, selectedAsset.modelUuid);
+ clearSelectedAsset();
+ }
+ };
- const handleRemoveEventFromProduct = () => {
- if (selectedAsset) {
- removeEvent(selectedProduct.productId, selectedAsset.modelUuid);
- clearSelectedAsset();
- }
- };
+ const selectedProductData = products.find(
+ (product) => product.productId === selectedProduct.productId
+ );
- const selectedProductData = products.find(
- (product) => product.productId === selectedProduct.productId
- );
-
- const events: Event[] = selectedProductData?.eventDatas.map((event) => ({
- pathName: event.modelName,
+ const events: Event[] =
+ selectedProductData?.eventDatas.map((event) => ({
+ pathName: event.modelName,
})) || [];
- return (
-
-
-
-
+
-
+
-
+
+
+
-
+
+
+
)}
diff --git a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
index 926ce44..a8957d1 100644
--- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
+++ b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
@@ -1,204 +1,220 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
import {
- AddIcon,
- ArrowIcon,
- RemoveIcon,
- ResizeHeightIcon,
+ AddIcon,
+ ArrowIcon,
+ RemoveIcon,
+ ResizeHeightIcon,
} 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 { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
+import { handleAddEventToProduct } from "../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
interface Event {
- pathName: string;
+ pathName: string;
}
interface ListProps {
- val: Event;
+ val: Event;
}
const List: React.FC
-
- );
+ return (
+
- {val.pathName}
-
-
+
+ );
};
const Simulations: React.FC = () => {
- const productsContainerRef = useRef{val.pathName}
+
-
Simulations
-
-
+ {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
-
-
-
-
-
- {products.map((product, index) => (
-
-
-
- ))}
- setSelectedProduct(product.productId, product.productName)}
- >
-
- handleRenameProduct(product.productId, newName)}
- />
-
- {products.length > 1 && (
- handleRemoveProduct(product.productId)}
- >
-
- )}
- handleResize(e, productsContainerRef)}
- >
-
-
-
-
-
-
- {events.map((event, index) => (
- Events
-
-
-
-
+ return (
+
- Need to Compare Layout?
-
-
- Click 'Compare' to review and analyze the layout differences between them.
-
-
-
-
-
+
+ {
+ if (option === "Add to Product") {
+ handleAddEventToProduct({
+ selectedAsset,
+ 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 (
+ Simulations
+
+
+
+ {selectedAsset && (
+
+
- );
+
+
+
- {
- if (option === 'Add to Product') {
- handleAddEventToProduct();
- } else {
- handleRemoveEventFromProduct();
- }
- }}
+
+ Products
+
+
-
- {selectedAsset &&
-
+
+ {products.map((product, index) => (
+
+
+
+ ))}
+
+ setSelectedProduct(product.productId, product.productName)
+ }
+ >
+
-
- }
+
+ handleRenameProduct(product.productId, newName)
+ }
+ />
+
+ {products.length > 1 && (
+ handleRemoveProduct(product.productId)}
+ >
+
+ )}
+ handleResize(e, productsContainerRef)}
+ >
+
+
+
+ {openObjects &&
+ events.map((event, index) =>
+
+
+
+
+ Need to Compare Layout?
+
+
+ Click 'Compare' to review and analyze the layout
+ differences between them.
+
+
+
+
+ {
+ 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
new file mode 100644
index 0000000..192e009
--- /dev/null
+++ b/app/src/components/ui/analysis/ProductionCapacity.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { ProductionCapacityIcon } from "../../icons/analysis";
+
+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 barsToFill = Math.floor((progressPercent / 100) * totalBars);
+ const partialFillPercent =
+ ((progressPercent / 100) * totalBars - barsToFill) * 100;
+
+ return (
+ = ({
-
+
+ );
+};
+
+export default ProductionCapacity;
diff --git a/app/src/components/ui/analysis/ROISummary.tsx b/app/src/components/ui/analysis/ROISummary.tsx
new file mode 100644
index 0000000..11101fd
--- /dev/null
+++ b/app/src/components/ui/analysis/ROISummary.tsx
@@ -0,0 +1,188 @@
+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);
+ };
+
+ return (
+
+
+
+
+
+
+
+ Production Capacity
+
+ {timeRange.startTime} - {timeRange.endTime}
+
+
+
+
+
+
+
+ {throughputValue} Units/hour
+
+
+ {/* Dynamic Progress Bar */}
+
+ {[...Array(totalBars)].map((_, i) => (
+
+
+ {i < barsToFill ? (
+
+ ) : i === barsToFill ? (
+
+ ) : null}
+
+ ))}
+
+
+
+ Avg. Process Time
+ {avgProcessTime}
+
+
+ Machine Utilization
+ {machineUtilization}
+
+
+
+ );
+};
+
+export default ROISummary;
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
+ From 24 November, 2025
+
+
+
+
+ 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
new file mode 100644
index 0000000..b92a82d
--- /dev/null
+++ b/app/src/components/ui/analysis/ThroughputSummary.tsx
@@ -0,0 +1,177 @@
+import React from "react";
+import { Line } from "react-chartjs-2";
+import {
+ Chart as ChartJS,
+ LineElement,
+ CategoryScale,
+ LinearScale,
+ PointElement,
+} from "chart.js";
+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 = () => {
+ // 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: throughputData.data,
+ borderColor: "#B392F0",
+ tension: 0.4,
+ pointRadius: 0, // Hide points
+ },
+ ],
+ };
+
+ const chartOptions = {
+ responsive: true,
+ scales: {
+ x: {
+ grid: {
+ display: false,
+ },
+ ticks: {
+ display: false,
+ color: "#fff",
+ },
+ },
+ y: {
+ grid: {
+ display: false,
+ },
+ ticks: {
+ display: false,
+ color: "#fff",
+ },
+ },
+ },
+ plugins: {
+ legend: {
+ display: false,
+ },
+ tooltip: {
+ enabled: true,
+ },
+ },
+ };
+
+ return (
+
+
+
+
+
+ {clampedProgress}%
+ Years
+ you're on track to hit it by July 2029
+
+
+ );
+};
+
+export default ThroughputSummary;
diff --git a/app/src/components/ui/inputs/InputToggle.tsx b/app/src/components/ui/inputs/InputToggle.tsx
index 941d486..5e69291 100644
--- a/app/src/components/ui/inputs/InputToggle.tsx
+++ b/app/src/components/ui/inputs/InputToggle.tsx
@@ -24,11 +24,16 @@ const InputToggle: React.FC
+
+
+
+
+
+
+ Throughput Summary
+
+ {timeRange.startTime} - {timeRange.endTime}
+
+
+
+
+
+
+
+ {throughputData.totalThroughput}{" "}
+ Units/hour
+
+
+
+
+
+ Asset usage
+ {throughputData.assetUsage}%
+
+
+
+
+ Energy Consumption
+
+
+
+
+
+
+ {energyConsumption.energyConsumed}
+ {energyConsumption.unit}
+
+
+ Shift Utilization
+
+
+ {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..5313710 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();
@@ -30,7 +39,7 @@ const SimulationPlayer: React.FC = () => {
const handleExit = () => {
setPlaySimulation(false);
setIsPlaying(false);
- setActiveTool("cursor")
+ setActiveTool("cursor");
};
// Slider functions starts
@@ -72,70 +81,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([]);
+
+ // 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 (
-
+
-
- {
- handleReset();
- }}
- >
-
- {
- handlePlayStop();
- }}
- >
-
- {
- handleExit();
- }}
- >
-
-
- = ({
- userImage,
- userName,
- color,
-}) => {
- return (
- (); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
- const csg = useRef(); // Reference for CSG object, used for 3D modeling.
- const CSGGroup = useRef() as Types.RefMesh; // Reference to a group of CSG objects.
- const scene = useRef() as Types.RefScene; // Reference to the scene.
- const camera = useRef() as Types.RefCamera; // Reference to the camera object.
- const controls = useRef(); // Reference to the controls object.
- const raycaster = useRef() as Types.RefRaycaster; // Reference for raycaster used for detecting objects being pointed at in the scene.
- const dragPointControls = useRef() as Types.RefDragControl; // Reference for drag point controls, an array for drag control.
+ const state = useThree(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
+ const csg = useRef(); // Reference for CSG object, used for 3D modeling.
+ const CSGGroup = useRef() as Types.RefMesh; // Reference to a group of CSG objects.
+ const scene = useRef() as Types.RefScene; // Reference to the scene.
+ const camera = useRef() as Types.RefCamera; // Reference to the camera object.
+ const controls = useRef(); // Reference to the controls object.
+ const raycaster = useRef() as Types.RefRaycaster; // Reference for raycaster used for detecting objects being pointed at in the scene.
+ const dragPointControls = useRef() as Types.RefDragControl; // Reference for drag point controls, an array for drag control.
- // Assigning the scene and camera from the Three.js state to the references.
+ // Assigning the scene and camera from the Three.js state to the references.
- scene.current = state.scene;
- camera.current = state.camera;
- controls.current = state.controls;
- raycaster.current = state.raycaster;
+ scene.current = state.scene;
+ camera.current = state.camera;
+ controls.current = state.controls;
+ raycaster.current = state.raycaster;
- const plane = useRef(null); // Reference for a plane object for raycaster reference.
- const grid = useRef() as any; // Reference for a grid object for raycaster reference.
- const snappedPoint = useRef() as Types.RefVector3; // Reference for storing a snapped point at the (end = isSnapped) and (start = ispreSnapped) of the line.
- const isSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (end).
- const anglesnappedPoint = useRef() as Types.RefVector3; // Reference for storing an angle-snapped point when the line is in 90 degree etc...
- const isAngleSnapped = useRef(false) as Types.RefBoolean; // Boolean to indicate if angle snapping is active.
- const isSnappedUUID = useRef() as Types.RefString; // UUID reference to identify the snapped point.
- const ispreSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (start).
- const tempLoader = useRef() as Types.RefMesh; // Reference for a temporary loader for the floor items.
- const isTempLoader = useRef() as Types.RefBoolean; // Reference to check if a temporary loader is active.
- const Tube = useRef() as Types.RefTubeGeometry; // Reference for tubes used for reference line creation and updation.
- const line = useRef([]) as Types.RefLine; // Reference for line which stores the current line that is being drawn.
- const lines = useRef([]) as Types.RefLines; // Reference for lines which stores all the lines that are ever drawn.
- const onlyFloorline = useRef([]); // Reference for floor lines which does not have walls or roof and have only floor used to store the current line that is being drawn.
- const onlyFloorlines = useRef([]); // Reference for all the floor lines that are ever drawn.
- const ReferenceLineMesh = useRef() as Types.RefMesh; // Reference for storing the mesh of the reference line for moving it during draw.
- const LineCreated = useRef(false) as Types.RefBoolean; // Boolean to track whether the reference line is created or not.
- const referencePole = useRef() as Types.RefMesh; // Reference for a pole that is used as the reference for the user to show where it is placed.
- const itemsGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the floor items (Gltf).
- const floorGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the roofs and the floors.
- const AttachedObject = useRef() as Types.RefMesh; // Reference for an object that is attached using dbl click for transform controls rotation.
- const floorPlanGroup = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines group and the points group.
- const floorPlanGroupLine = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines that are drawn.
- const floorPlanGroupPoint = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the points that are created.
- const floorGroupAisle = useRef() as Types.RefGroup;
- const zoneGroup = useRef() as Types.RefGroup;
- const currentLayerPoint = useRef([]) as Types.RefMeshArray; // Reference for points that re in the current layer used to update the points in drag controls.
- const hoveredDeletablePoint = useRef() as Types.RefMesh; // Reference for the currently hovered point that can be deleted.
- const hoveredDeletableLine = useRef() as Types.RefMesh; // Reference for the currently hovered line that can be deleted.
- const hoveredDeletableFloorItem = useRef() as Types.RefMesh; // Reference for the currently hovered floor item that can be deleted.
- const hoveredDeletableWallItem = useRef() as Types.RefMesh; // Reference for the currently hovered wall item that can be deleted.
- const hoveredDeletablePillar = useRef() as Types.RefMesh; // Reference for the currently hovered pillar that can be deleted.
- const currentWallItem = useRef() as Types.RefMesh; // Reference for the currently selected wall item that can be scaled, dragged etc...
+ const plane = useRef(null); // Reference for a plane object for raycaster reference.
+ const grid = useRef() as any; // Reference for a grid object for raycaster reference.
+ const snappedPoint = useRef() as Types.RefVector3; // Reference for storing a snapped point at the (end = isSnapped) and (start = ispreSnapped) of the line.
+ const isSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (end).
+ const anglesnappedPoint = useRef() as Types.RefVector3; // Reference for storing an angle-snapped point when the line is in 90 degree etc...
+ const isAngleSnapped = useRef(false) as Types.RefBoolean; // Boolean to indicate if angle snapping is active.
+ const isSnappedUUID = useRef() as Types.RefString; // UUID reference to identify the snapped point.
+ const ispreSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (start).
+ const tempLoader = useRef() as Types.RefMesh; // Reference for a temporary loader for the floor items.
+ const isTempLoader = useRef() as Types.RefBoolean; // Reference to check if a temporary loader is active.
+ const Tube = useRef() as Types.RefTubeGeometry; // Reference for tubes used for reference line creation and updation.
+ const line = useRef([]) as Types.RefLine; // Reference for line which stores the current line that is being drawn.
+ const lines = useRef([]) as Types.RefLines; // Reference for lines which stores all the lines that are ever drawn.
+ const onlyFloorline = useRef([]); // Reference for floor lines which does not have walls or roof and have only floor used to store the current line that is being drawn.
+ const onlyFloorlines = useRef([]); // Reference for all the floor lines that are ever drawn.
+ const ReferenceLineMesh = useRef() as Types.RefMesh; // Reference for storing the mesh of the reference line for moving it during draw.
+ const LineCreated = useRef(false) as Types.RefBoolean; // Boolean to track whether the reference line is created or not.
+ const referencePole = useRef() as Types.RefMesh; // Reference for a pole that is used as the reference for the user to show where it is placed.
+ const itemsGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the floor items (Gltf).
+ const floorGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the roofs and the floors.
+ const AttachedObject = useRef() as Types.RefMesh; // Reference for an object that is attached using dbl click for transform controls rotation.
+ const floorPlanGroup = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines group and the points group.
+ const floorPlanGroupLine = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines that are drawn.
+ const floorPlanGroupPoint = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the points that are created.
+ const floorGroupAisle = useRef() as Types.RefGroup;
+ const zoneGroup = useRef() as Types.RefGroup;
+ const currentLayerPoint = useRef([]) as Types.RefMeshArray; // Reference for points that re in the current layer used to update the points in drag controls.
+ const hoveredDeletablePoint = useRef() as Types.RefMesh; // Reference for the currently hovered point that can be deleted.
+ const hoveredDeletableLine = useRef() as Types.RefMesh; // Reference for the currently hovered line that can be deleted.
+ const hoveredDeletableFloorItem = useRef() as Types.RefMesh; // Reference for the currently hovered floor item that can be deleted.
+ const hoveredDeletableWallItem = useRef() as Types.RefMesh; // Reference for the currently hovered wall item that can be deleted.
+ const hoveredDeletablePillar = useRef() as Types.RefMesh; // Reference for the currently hovered pillar that can be deleted.
+ const currentWallItem = useRef() as Types.RefMesh; // Reference for the currently selected wall item that can be scaled, dragged etc...
- const cursorPosition = new THREE.Vector3(); // 3D vector for storing the cursor position.
+ const cursorPosition = new THREE.Vector3(); // 3D vector for storing the cursor position.
- const [selectedItemsIndex, setSelectedItemsIndex] = useState(null); // State for tracking the index of the selected item.
- const { activeLayer, setActiveLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx.
- const { toggleView, setToggleView } = useToggleView(); // State for toggling between 2D and 3D.
- const { toolMode, setToolMode } = useToolMode();
- const { movePoint, setMovePoint } = useMovePoint(); // State that stores a boolean which represents whether the move mode is active or not.
- const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
- const { socket } = useSocketStore();
- const { roofVisibility, setRoofVisibility } = useRoofVisibility();
- const { wallVisibility, setWallVisibility } = useWallVisibility();
- const { shadows, setShadows } = useShadows();
- const { renderDistance, setRenderDistance } = useRenderDistance();
- const { limitDistance, setLimitDistance } = useLimitDistance();
- const { updateScene, setUpdateScene } = useUpdateScene();
- const { walls, setWalls } = useWalls();
- const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
- const { activeModule } = useModuleStore();
+ const [selectedItemsIndex, setSelectedItemsIndex] =
+ useState(null); // State for tracking the index of the selected item.
+ const { activeLayer, setActiveLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx.
+ const { toggleView, setToggleView } = useToggleView(); // State for toggling between 2D and 3D.
+ const { toolMode, setToolMode } = useToolMode();
+ const { movePoint, setMovePoint } = useMovePoint(); // State that stores a boolean which represents whether the move mode is active or not.
+ const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
+ const { socket } = useSocketStore();
+ const { roofVisibility, setRoofVisibility } = useRoofVisibility();
+ const { wallVisibility, setWallVisibility } = useWallVisibility();
+ const { shadows, setShadows } = useShadows();
+ const { renderDistance, setRenderDistance } = useRenderDistance();
+ const { limitDistance, setLimitDistance } = useLimitDistance();
+ const { updateScene, setUpdateScene } = useUpdateScene();
+ const { walls, setWalls } = useWalls();
+ const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
+ const { activeModule } = useModuleStore();
- // const loader = new GLTFLoader();
- // const dracoLoader = new DRACOLoader();
+ // const loader = new GLTFLoader();
+ // const dracoLoader = new DRACOLoader();
- // dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/');
- // loader.setDRACOLoader(dracoLoader);
+ // dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/');
+ // loader.setDRACOLoader(dracoLoader);
- ////////// Assest Configuration Values //////////
+ ////////// Assest Configuration Values //////////
- const AssetConfigurations: Types.AssetConfigurations = {
- arch: {
- modelUrl: arch,
- scale: [0.75, 0.75, 0.75],
- csgscale: [2, 4, 0.5],
- csgposition: [0, 2, 0],
- positionY: () => 0,
- type: "Fixed-Move",
- },
- door: {
- modelUrl: door,
- scale: [0.75, 0.75, 0.75],
- csgscale: [2, 4, 0.5],
- csgposition: [0, 2, 0],
- positionY: () => 0,
- type: "Fixed-Move",
- },
- window: {
- modelUrl: Window,
- scale: [0.75, 0.75, 0.75],
- csgscale: [5, 3, 0.5],
- csgposition: [0, 1.5, 0],
- positionY: (intersectionPoint) => intersectionPoint.point.y,
- type: "Free-Move",
- },
- };
+ const AssetConfigurations: Types.AssetConfigurations = {
+ arch: {
+ modelUrl: arch,
+ scale: [0.75, 0.75, 0.75],
+ csgscale: [2, 4, 0.5],
+ csgposition: [0, 2, 0],
+ positionY: () => 0,
+ type: "Fixed-Move",
+ },
+ door: {
+ modelUrl: door,
+ scale: [0.75, 0.75, 0.75],
+ csgscale: [2, 4, 0.5],
+ csgposition: [0, 2, 0],
+ positionY: () => 0,
+ type: "Fixed-Move",
+ },
+ window: {
+ modelUrl: Window,
+ scale: [0.75, 0.75, 0.75],
+ csgscale: [5, 3, 0.5],
+ csgposition: [0, 1.5, 0],
+ positionY: (intersectionPoint) => intersectionPoint.point.y,
+ type: "Free-Move",
+ },
+ };
- ////////// All Toggle's //////////
+ ////////// All Toggle's //////////
- useEffect(() => {
- setRefTextUpdate((prevUpdate: number) => prevUpdate - 1);
- if (dragPointControls.current) {
- dragPointControls.current.enabled = false;
- }
- if (toggleView) {
- Layer2DVisibility(
- activeLayer,
- floorPlanGroup,
- floorPlanGroupLine,
- floorPlanGroupPoint,
- currentLayerPoint,
- dragPointControls
- );
- } else {
- setToolMode(null);
- setDeletePointOrLine(false);
- setMovePoint(false);
- loadWalls(lines, setWalls);
- setUpdateScene(true);
- line.current = [];
- }
- }, [toggleView]);
+ useEffect(() => {
+ setRefTextUpdate((prevUpdate: number) => prevUpdate - 1);
+ if (dragPointControls.current) {
+ dragPointControls.current.enabled = false;
+ }
+ if (toggleView) {
+ Layer2DVisibility(
+ activeLayer,
+ floorPlanGroup,
+ floorPlanGroupLine,
+ floorPlanGroupPoint,
+ currentLayerPoint,
+ dragPointControls
+ );
+ } else {
+ setToolMode(null);
+ setDeletePointOrLine(false);
+ setMovePoint(false);
+ loadWalls(lines, setWalls);
+ setUpdateScene(true);
+ line.current = [];
+ }
+ }, [toggleView]);
- useEffect(() => {
- THREE.Cache.clear();
- THREE.Cache.enabled = true;
- }, []);
+ useEffect(() => {
+ THREE.Cache.clear();
+ THREE.Cache.enabled = true;
+ }, []);
- useEffect(() => {
- const email = localStorage.getItem("email");
- const organization = email!.split("@")[1].split(".")[0];
+ useEffect(() => {
+ const email = localStorage.getItem("email");
+ const organization = email!.split("@")[1].split(".")[0];
- async function fetchVisibility() {
- const visibility = await findEnvironment(
- organization,
- localStorage.getItem("userId")!
- );
- if (visibility) {
- setRoofVisibility(visibility.roofVisibility);
- setWallVisibility(visibility.wallVisibility);
- setShadows(visibility.shadowVisibility);
- setRenderDistance(visibility.renderDistance);
- setLimitDistance(visibility.limitDistance);
- }
- }
- fetchVisibility();
- }, []);
+ async function fetchVisibility() {
+ const visibility = await findEnvironment(
+ organization,
+ localStorage.getItem("userId")!
+ );
+ if (visibility) {
+ setRoofVisibility(visibility.roofVisibility);
+ setWallVisibility(visibility.wallVisibility);
+ setShadows(visibility.shadowVisibility);
+ setRenderDistance(visibility.renderDistance);
+ setLimitDistance(visibility.limitDistance);
+ }
+ }
+ fetchVisibility();
+ }, []);
- ////////// UseFrame is Here //////////
+ ////////// UseFrame is Here //////////
- useFrame(() => {
- if (toolMode) {
- Draw(
- state,
- plane,
- cursorPosition,
- floorPlanGroupPoint,
- floorPlanGroupLine,
- snappedPoint,
- isSnapped,
- isSnappedUUID,
- line,
- lines,
- ispreSnapped,
- floorPlanGroup,
- ReferenceLineMesh,
- LineCreated,
- setRefTextUpdate,
- Tube,
- anglesnappedPoint,
- isAngleSnapped,
- toolMode
- );
- }
- });
+ useFrame(() => {
+ if (toolMode) {
+ Draw(
+ state,
+ plane,
+ cursorPosition,
+ floorPlanGroupPoint,
+ floorPlanGroupLine,
+ snappedPoint,
+ isSnapped,
+ isSnappedUUID,
+ line,
+ lines,
+ ispreSnapped,
+ floorPlanGroup,
+ ReferenceLineMesh,
+ LineCreated,
+ setRefTextUpdate,
+ Tube,
+ anglesnappedPoint,
+ isAngleSnapped,
+ toolMode
+ );
+ }
+ });
- ////////// Return //////////
+ ////////// Return //////////
- return (
- <>
- {
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/builder.tsx b/app/src/modules/builder/builder.tsx
index e5ff1c1..d367493 100644
--- a/app/src/modules/builder/builder.tsx
+++ b/app/src/modules/builder/builder.tsx
@@ -18,20 +18,20 @@ import Window from "../../assets/gltf-glb/window.glb";
////////// Zustand State Imports //////////
import {
- useToggleView,
- useDeletePointOrLine,
- useMovePoint,
- useActiveLayer,
- useSocketStore,
- useWallVisibility,
- useRoofVisibility,
- useShadows,
- useUpdateScene,
- useWalls,
- useToolMode,
- useRefTextUpdate,
- useRenderDistance,
- useLimitDistance,
+ useToggleView,
+ useDeletePointOrLine,
+ useMovePoint,
+ useActiveLayer,
+ useSocketStore,
+ useWallVisibility,
+ useRoofVisibility,
+ useShadows,
+ useUpdateScene,
+ useWalls,
+ useToolMode,
+ useRefTextUpdate,
+ useRenderDistance,
+ useLimitDistance,
} from "../../store/store";
////////// 3D Function Imports //////////
@@ -56,300 +56,301 @@ import ZoneGroup from "./groups/zoneGroup";
import useModuleStore from "../../store/useModuleStore";
import MeasurementTool from "../scene/tools/measurementTool";
import NavMesh from "../simulation/vehicle/navMesh/navMesh";
+import ProductionCapacity from "../../components/ui/analysis/ProductionCapacity";
export default function Builder() {
- const state = useThree
- {userImage ? (
- 
- ) : (
-
-
- {userName}
-
-