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

Merge remote-tracking branch 'origin/main-demo' into main-dev

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-08-26 09:24:05 +05:30
parent 67b942ac16 e813f194c7
commit ed099c7f75
29 changed files with 1694 additions and 1099 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/src/components/footer/shortcutHelper.tsx
View File

@@ -55,6 +55,7 @@ interface ShortcutHelperProps {
const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
setShowShortcuts,
}) => {
const shortcuts: ShortcutGroup[] = [
// Essential
{
@@ -310,6 +311,7 @@ const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
>
<CloseIcon />
</button>
<div className="header">
<div className="header-wrapper">
{shortcuts.map((group) => (
@@ -326,9 +328,8 @@ const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
</div>
<div
className={`shortcut-wrapper ${
activeShortcuts.length === 1 ? "single-item" : ""
}`}
className={`shortcut-wrapper ${activeShortcuts.length === 1 ? "single-item" : ""
}`}
>
{activeShortcuts.map((item) => (
<div

6
app/src/components/layout/scenes/MainScene.tsx
View File

@@ -212,7 +212,11 @@ function MainScene() {
{activeModule !== "market" && !selectedUser && <Footer />}
<VersionSaved />
{(commentPositionState !== null || selectedComment !== null) && <ThreadChat />}
{
(commentPositionState !== null || selectedComment !== null) &&
<ThreadChat />
}
</>
);

15
app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
View File

@@ -78,8 +78,8 @@ const AssetProperties: React.FC = () => {
<section>
<div className="header">User Data</div>
{userData.map((data) => (
<div className="input-container">
{userData.map((data, i) => (
<div className="input-container" key={i}>
<InputWithDropDown
key={data.id}
label={data.label}
@@ -103,9 +103,16 @@ const AssetProperties: React.FC = () => {
</section>
<div className="header">Animations</div>
<section className="animations-lists">
{assets.map((asset) => {
{assets.map((asset, i) => {
if (asset.modelUuid !== selectedFloorItem.uuid || !asset.animations)
return null;
return (
i === 0 && (
<div className="no-animation">
Looks like there are no preset animations yet. Stay tuned for
future additions!
</div>
)
);
return asset.animations.map((animation, index) => (
<div key={index} className="animations-list-wrapper">

8
app/src/components/layout/sidebarRight/resourceManagement/ResourceManagement.tsx
View File

@@ -30,14 +30,6 @@ const ResourceManagement = () => {
<div className="search-container">
<Search onChange={() => { }} />
<div className="select-catagory">
<RegularDropDown
header={"floor"}
options={["floor"]} // Pass layout names as options
onSelect={() => { }}
search={false}
/>
</div>
</div>
{selectType === "assetManagement" ? <AssetManagement /> : <Hrm />}

246
app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx
View File

@@ -1,96 +1,165 @@
import { useState } from 'react'
import { useEffect, useState } from 'react'
import { ClockThreeIcon, LocationPinIcon, TargetIcon } from '../../../../icons/ExportCommonIcons'
import { useSceneContext } from '../../../../../modules/scene/sceneContext';
import { useProductContext } from '../../../../../modules/simulation/products/productContext';
import RenameInput from '../../../../ui/inputs/RenameInput';
import { useResourceManagementId } from '../../../../../store/builder/store';
import { set } from 'immer/dist/internal';
// import NavigateCatagory from '../NavigateCatagory'
const Hrm = () => {
const [selectedCard, setSelectedCard] = useState(0);
const [workers, setWorkers] = useState<any[]>([]);
const employee_details = [
{
"employee": {
image: "",
"name": "John Doe",
"employee_id": "HR-204",
"status": "Active",
const { productStore } = useSceneContext();
const { products, getProductById } = productStore();
const { selectedProductStore } = useProductContext();
const { selectedProduct } = selectedProductStore();
const { setResourceManagementId } = useResourceManagementId();
},
"task": {
"status": "Ongoing",
"title": "Inspecting Machine X",
"location": {
"floor": 4,
"zone": "B"
},
"planned_time_hours": 6,
"time_spent_hours": 2,
"total_tasks": 12,
"completed_tasks": 3
},
"actions": [
"Assign Task",
"Reassign Task",
"Pause",
"Emergency Stop"
],
"location": "Floor 4 . Zone B"
},
{
"employee": {
image: "",
"name": "Alice Smith",
"employee_id": "HR-205",
"status": "Active",
useEffect(() => {
if (selectedProduct) {
const productDetails = getProductById(selectedProduct.productUuid);
const workerDetails = productDetails?.eventDatas || [];
},
"task": {
"status": "Ongoing",
"title": "Calibrating Sensor Y",
"location": {
"floor": 2,
"zone": "A"
},
"planned_time_hours": 4,
"time_spent_hours": 1.5,
"total_tasks": 10,
"completed_tasks": 2
},
"actions": [
"Assign Task",
"Reassign Task",
"Pause",
"Emergency Stop"
],
"location": "Floor 4 . Zone B"
},
{
"employee": {
image: "",
"name": "Michael Lee",
"employee_id": "HR-206",
"status": "Active",
const formattedWorkers = workerDetails
.filter((worker: any) => worker.type === "human")
.map((worker: any, index: number) => ({
employee: {
image: "",
name: worker.modelName,
modelId: worker.modelUuid,
employee_id: `HR-${204 + index}`,
status: "Active",
},
task: {
status: "Ongoing",
title: worker.taskTitle || "No Task Assigned",
location: {
floor: worker.floor || 0,
zone: worker.zone || "N/A"
},
planned_time_hours: worker.plannedTime || 0,
time_spent_hours: worker.timeSpent || 0,
total_tasks: worker.totalTasks || 0,
completed_tasks: worker.completedTasks || 0
},
actions: [
"Assign Task",
"Reassign Task",
"Pause",
"Emergency Stop"
],
location: `Floor ${worker.floor || "-"} . Zone ${worker.zone || "-"}`
}));
setWorkers(formattedWorkers);
}
}, [selectedProduct, getProductById]);
useEffect(() => {
//
}, [workers]);
// const employee_details = [
// {
// "employee": {
// image: "",
// "name": "John Doe",
// "employee_id": "HR-204",
// "status": "Active",
// },
// "task": {
// "status": "Ongoing",
// "title": "Inspecting Machine X",
// "location": {
// "floor": 4,
// "zone": "B"
// },
// "planned_time_hours": 6,
// "time_spent_hours": 2,
// "total_tasks": 12,
// "completed_tasks": 3
// },
// "actions": [
// "Assign Task",
// "Reassign Task",
// "Pause",
// "Emergency Stop"
// ],
// "location": "Floor 4 . Zone B"
// },
// {
// "employee": {
// image: "",
// "name": "Alice Smith",
// "employee_id": "HR-205",
// "status": "Active",
// },
// "task": {
// "status": "Ongoing",
// "title": "Calibrating Sensor Y",
// "location": {
// "floor": 2,
// "zone": "A"
// },
// "planned_time_hours": 4,
// "time_spent_hours": 1.5,
// "total_tasks": 10,
// "completed_tasks": 2
// },
// "actions": [
// "Assign Task",
// "Reassign Task",
// "Pause",
// "Emergency Stop"
// ],
// "location": "Floor 4 . Zone B"
// },
// {
// "employee": {
// image: "",
// "name": "Michael Lee",
// "employee_id": "HR-206",
// "status": "Active",
// },
// "task": {
// "status": "Ongoing",
// "title": "Testing Conveyor Belt Z",
// "location": {
// "floor": 5,
// "zone": "C"
// },
// "planned_time_hours": 5,
// "time_spent_hours": 3,
// "total_tasks": 8,
// "completed_tasks": 5
// },
// "actions": [
// "Assign Task",
// "Reassign Task",
// "Pause",
// "Emergency Stop"
// ],
// "location": "Floor 4 . Zone B"
// },
// ]
function handleRenameWorker(newName: string) {
//
}
function handleHumanClick(employee: any) {
if (employee.modelId) {
setResourceManagementId(employee.modelId);
}
}
},
"task": {
"status": "Ongoing",
"title": "Testing Conveyor Belt Z",
"location": {
"floor": 5,
"zone": "C"
},
"planned_time_hours": 5,
"time_spent_hours": 3,
"total_tasks": 8,
"completed_tasks": 5
},
"actions": [
"Assign Task",
"Reassign Task",
"Pause",
"Emergency Stop"
],
"location": "Floor 4 . Zone B"
},
]
return (
<>
@@ -101,7 +170,7 @@ const Hrm = () => {
/> */}
<div className='hrm-container assetManagement-wrapper'>
{employee_details.map((employee, index) => (
{workers.map((employee, index) => (
<div
className={`analysis-wrapper ${selectedCard === index ? "active" : ""}`}
onClick={() => setSelectedCard(index)}
@@ -113,13 +182,14 @@ const Hrm = () => {
<img className='user-image' src={employee.employee.image} alt="" />
<div className={`status ${employee.employee.status}`}></div>
</div>
<div className="details">
<div className="employee-name">{employee.employee.name}</div>
<div className="details" >
{/* <div className="employee-name">{employee.employee.name}</div> */}
<RenameInput value={employee.employee.name} onRename={handleRenameWorker} />
<div className="employee-id">{employee.employee.employee_id}</div>
</div>
</div>
<div className="see-more">View more</div>
<div className="see-more" onClick={() => { handleHumanClick(employee.employee) }}>View in Scene</div>
</header>
<div className="content">

170
app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx
View File

@@ -1,73 +1,145 @@
import { useState } from 'react'
import { useEffect, useState } from 'react'
// import NavigateCatagory from '../../NavigateCatagory'
import { EyeIcon, ForkLiftIcon, KebabIcon, LocationPinIcon, RightHalfFillCircleIcon } from '../../../../../icons/ExportCommonIcons';
import assetImage from "../../../../../../assets/image/asset-image.png"
import { useSceneContext } from '../../../../../../modules/scene/sceneContext';
import { useProductContext } from '../../../../../../modules/simulation/products/productContext';
import RenameInput from '../../../../../ui/inputs/RenameInput';
import { useResourceManagementId } from '../../../../../../store/builder/store';
const AssetManagement = () => {
// const [selectedCategory, setSelectedCategory] = useState("All Assets");
const [expandedAssetId, setExpandedAssetId] = useState<string | null>(null);
const [assets, setAssets] = useState<any[]>([]);
const dummyAssets = [
{
id: '1',
name: 'Forklift Model X200',
model: 'FLK-0025',
status: 'Online',
usageRate: 15,
level: 'Level 1',
image: assetImage,
description: 'Electric forklift used for moving goods and materials in warehouse operations.',
cost: 122000,
count: 5,
},
{
id: '2',
name: 'Warehouse Robot WR-300',
model: 'WRB-3001',
status: 'Online',
usageRate: 50,
level: 'Level 2',
image: assetImage,
description: 'Automated robot for handling packages and inventory in the warehouse.',
cost: 85000,
count: 3,
},
{
id: '3',
name: 'Conveyor Belt System CB-150',
model: 'CBS-150X',
status: 'Online',
usageRate: 95,
level: 'Level 3',
image: assetImage,
description: 'High-speed conveyor belt system for efficient material handling.',
cost: 45000,
count: 2,
},
];
const { productStore } = useSceneContext();
const { products, getProductById } = productStore();
const { selectedProductStore } = useProductContext();
const { selectedProduct } = selectedProductStore();
const { setResourceManagementId } = useResourceManagementId();
useEffect(() => {
if (selectedProduct) {
const productDetails = getProductById(selectedProduct.productUuid);
const productAssets = productDetails?.eventDatas || [];
const grouped: Record<string, any> = {};
productAssets.forEach((asset: any) => {
if (asset.type === "storageUnit" || asset.type === "human") return;
if (!grouped[asset.modelName]) {
grouped[asset.modelName] = {
id: asset.modelUuid,
name: asset.modelName,
model: asset.modelCode || "N/A",
status: asset.status || "Online",
usageRate: asset.usageRate || 15,
level: asset.level || "Level 1",
image: assetImage,
description: asset.description || "No description",
cost: asset.cost || 0,
count: 1,
};
} else {
grouped[asset.modelName].count += 1;
}
});
setAssets(Object.values(grouped));
}
}, [selectedProduct]);
function handleRenameAsset(newName: string) {
//
// if (expandedAssetId) {
// setAssets(prevAssets =>
// prevAssets.map(asset =>
// asset.id === expandedAssetId ? { ...asset, name: newName } : asset
// )
// );
// }
}
useEffect(() => {
}, [assets]);
function handleAssetClick(id: string) {
setResourceManagementId(id);
}
// const dummyAssets = [
// {
// id: '1',
// name: 'Forklift Model X200',
// model: 'FLK-0025',
// status: 'Online',
// usageRate: 15,
// level: 'Level 1',
// image: assetImage,
// description: 'Electric forklift used for moving goods and materials in warehouse operations.',
// cost: 122000,
// count: 5,
// },
// {
// id: '2',
// name: 'Warehouse Robot WR-300',
// model: 'WRB-3001',
// status: 'Online',
// usageRate: 50,
// level: 'Level 2',
// image: assetImage,
// description: 'Automated robot for handling packages and inventory in the warehouse.',
// cost: 85000,
// count: 3,
// },
// {
// id: '3',
// name: 'Conveyor Belt System CB-150',
// model: 'CBS-150X',
// status: 'Online',
// usageRate: 95,
// level: 'Level 3',
// image: assetImage,
// description: 'High-speed conveyor belt system for efficient material handling.',
// cost: 45000,
// count: 2,
// },
// ];
return (
<>
{/* <NavigateCatagory
category={["All Assets", "Machines", "Workstation", "Vehicles"]}
selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory}
/> */}
category={["All Assets", "Machines", "Workstation", "Vehicles"]}
selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory}
/> */}
<div className='assetManagement-container assetManagement-wrapper'>
{dummyAssets.map((asset, index) => (
{assets.map((asset, index) => (
<div className={`assetManagement-card-wrapper ${expandedAssetId === asset.id ? "openViewMore" : ""}`} key={index}>
<header>
<div className="header-wrapper">
{expandedAssetId === asset.id ?
<img className='asset-image' src={asset.image} alt="" />
<>
<div className="drop-icon" onClick={() => setExpandedAssetId(null)}>▾</div>
<img className='asset-image' src={asset.image} alt="" />
</>
:
<div className="icon"><ForkLiftIcon /></div>
}
<div className="asset-details-container">
<div className="asset-details">
<div className="asset-name">{asset.name}</div>
<div className="asset-details" >
{/* <div className="asset-name">{asset.name}</div> */}
<RenameInput value={asset.name} onRename={handleRenameAsset} />
{asset.count !== 1 && <div>
<span className="asset-id-label">x</span>
<span className="asset-id">{asset.count}</span>
</div>}
<div className="asset-model">{asset.model}</div>
</div>
<div className="asset-status-wrapper">
@@ -98,9 +170,9 @@ const AssetManagement = () => {
</div>
</div>
<div className="asset-estimate__view-button" onClick={() => setExpandedAssetId(null)}>
<div className="asset-estimate__view-button">
<EyeIcon isClosed={false} />
<div className="asset-estimate__view-text">View in Scene</div>
<div className="asset-estimate__view-text" onClick={() => handleAssetClick(asset.id)}>View in Scene</div>
</div>
</div>

46
app/src/components/ui/Tools.tsx
View File

@@ -36,6 +36,7 @@ import {
} from "../../store/visualization/useDroppedObjectsStore";
import { useParams } from "react-router-dom";
import { useVersionContext } from "../../modules/builder/version/versionContext";
import { MoveIcon, RotateIcon } from "../icons/ShortcutIcons";
// Utility component
const ToolButton = ({
@@ -65,12 +66,8 @@ const Tools: React.FC = () => {
const { isPlaying, setIsPlaying } = usePlayButtonStore();
const { showShortcuts } = useShortcutStore();
const {
activeTool,
setActiveTool,
setToolMode,
setAddAction,
} = useStoreHooks();
const { activeTool, setActiveTool, setToolMode, setAddAction } =
useStoreHooks();
const { setActiveSubTool, activeSubTool } = useActiveSubTool();
const { setSelectedWallItem } = useSelectedWallItem();
@@ -81,14 +78,15 @@ const Tools: React.FC = () => {
const { selectedZone } = useSelectedZoneStore();
const { floatingWidget } = useFloatingWidget();
const { widgets3D } = use3DWidget();
const { visualizationSocket } = useSocketStore();
const dropdownRef = useRef<HTMLButtonElement>(null);
const [openDrop, setOpenDrop] = useState(false);
const { visualizationSocket } = useSocketStore();
const { selectedVersionStore } = useVersionContext();
const { selectedVersion } = selectedVersionStore();
const { projectId } = useParams();
const dropdownRef = useRef<HTMLButtonElement>(null);
const [openDrop, setOpenDrop] = useState(false);
// 1. Set UI toggles on initial render
useEffect(() => {
setToggleUI(
@@ -155,7 +153,7 @@ const Tools: React.FC = () => {
if (!is2D) setAddAction("Pillar");
break;
case "delete":
is2D ? setToolMode('2D-Delete') : setToolMode('3D-Delete');
is2D ? setToolMode("2D-Delete") : setToolMode("3D-Delete");
break;
}
};
@@ -251,7 +249,7 @@ const Tools: React.FC = () => {
templates,
visualizationSocket,
projectId,
versionId: selectedVersion?.versionId || ''
versionId: selectedVersion?.versionId || "",
})
}
/>
@@ -278,6 +276,10 @@ const Tools: React.FC = () => {
return FreeMoveIcon;
case "delete":
return DeleteIcon;
case "move":
return MoveIcon;
case "rotate":
return RotateIcon;
default:
return CursorIcon;
}
@@ -304,6 +306,10 @@ const Tools: React.FC = () => {
return <FreeMoveIcon isActive={false} />;
case "delete":
return <DeleteIcon isActive={false} />;
case "move":
return <MoveIcon />;
case "rotate":
return <RotateIcon />;
default:
return null;
}
@@ -362,6 +368,24 @@ const Tools: React.FC = () => {
)}
</div>
{activeModule !== "visualization" && (
<>
<div className="split"></div>
<div className="transform-tools">
{["move", "rotate"].map((tool) => (
<ToolButton
key={tool}
toolId={tool}
icon={getIconByTool(tool)}
tooltip={`${tool}`}
active={activeTool === tool}
onClick={() => setActiveTool(tool)}
/>
))}
</div>
</>
)}
<div className="split"></div>
{activeModule === "builder" && renderBuilderTools()}
{activeModule === "simulation" && renderSimulationTools()}

31
app/src/components/ui/collaboration/Messages.tsx
View File

@@ -231,7 +231,10 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
<div className="time">{isEditableThread ? getRelativeTime(val.createdAt) : val.createdAt}</div>
</div>
{(val as Reply).creatorId === userId && (
<div className="more-options">
<div
className="more-options"
onMouseLeave={() => setOpenOptions(false)}
>
<button
className="more-options-button"
onClick={() => {
@@ -240,35 +243,41 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
>
<KebabIcon />
</button>
{openOptions && (
<div className="options-list">
<button
className="option"
onClick={(e) => {
e.preventDefault();
setMode && setMode("edit")
setMode && setMode("edit");
setOpenOptions(false);
setEditedThread && setEditedThread(true);
setIsEditComment(true)
setIsEditComment(true);
}}
>
Edit
</button>
{!(isEditableThread) && <button
className="option"
onClick={() => {
handleDeleteAction((val as Reply).replyId);
}}
>
Delete
</button>}
{!isEditableThread && (
<button
className="option"
onClick={() => {
handleDeleteAction((val as Reply).replyId);
}}
>
Delete
</button>
)}
</div>
)}
</div>
)}
<div className="message">
{"comment" in val ? val.comment : val.threadTitle}
</div>
</div>
</div >
)}

16
app/src/components/ui/collaboration/ThreadChat.tsx
View File

@@ -131,9 +131,10 @@ const ThreadChat: React.FC = () => {
if (dragging) updatePosition(e, true);
};
useEffect(() => {
updatePosition({ clientX: position.x, clientY: position.y }, true);
}, [selectedComment]);
// Commented this useEffect to prevent offset after user saved the comment
// useEffect(() => {
// updatePosition({ clientX: position.x, clientY: position.y }, true);
// }, [selectedComment]);
const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
@@ -144,6 +145,10 @@ const ThreadChat: React.FC = () => {
};
const handleCreateComments = async (e: any) => {
// Continue send or create message only there is only value avalibale
// To prevent empty value
if (!value) return;
e.preventDefault();
try {
// const createComments = await addCommentsApi(projectId, value, selectedComment?.threadId, selectedVersion?.versionId || "")/
@@ -163,6 +168,7 @@ const ThreadChat: React.FC = () => {
// }
if (threadSocket && mode === "create") {
const addComment = {
versionId: selectedVersion?.versionId || "",
@@ -190,7 +196,7 @@ const ThreadChat: React.FC = () => {
// removeComment(selectedComment?.threadId)
// setSelectedComment([])
// }
console.log('threadSocket:threadChat ', threadSocket);
if (threadSocket) {
// projectId, userId, organization, threadId
const deleteThread = {
@@ -258,7 +264,7 @@ const ThreadChat: React.FC = () => {
};
if (threadSocket) {
console.log('createThread: ', createThread);
setInputActive(false);
threadSocket.emit("v1:thread:create", createThread);

15
app/src/components/ui/list/List.tsx
View File

@@ -57,6 +57,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
const { zoneStore } = useSceneContext();
const { zones, setZoneName } = zoneStore();
useEffect(() => {
useSelectedZoneStore.getState().setSelectedZone({
zoneName: "",
@@ -121,6 +122,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
}
function handleAssetClick(asset: Asset) {
setZoneAssetId(asset);
}
@@ -157,8 +159,9 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
modelUuid: zoneAssetId.id,
modelName: newName,
projectId,
versionId: selectedVersion?.versionId || ''
});
// console.log("response: ", response);
setName(zoneAssetId.id, response.modelName);
}
@@ -255,9 +258,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
}}
>
<div
className={`list-item ${
selectedZone.zoneUuid === item.id ? "active" : ""
}`}
className={`list-item ${selectedZone.zoneUuid === item.id ? "active" : ""
}`}
>
<div className="zone-header">
<button className="value" id="zone-name">
@@ -301,9 +303,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
{item.assets.map((asset) => (
<li
key={`asset-${asset.id}`}
className={`list-container asset-item ${
zoneAssetId?.id === asset.id ? "active" : ""
}`}
className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""
}`}
onClick={() => handleAssetClick(asset)}
>
<div className="list-item">

47
app/src/hooks/useCameraShortcuts.ts Normal file
View File

@@ -0,0 +1,47 @@
import { useEffect } from "react";
import { useThree } from "@react-three/fiber";
import * as THREE from "three";
import type { CameraControls } from "@react-three/drei";
export const useCameraShortcuts = (controlsRef: React.RefObject<CameraControls>) => {
const { camera } = useThree();
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (!controlsRef.current) return;
// get current distance from camera to target
const target = new THREE.Vector3();
controlsRef.current.getTarget(target);
const distance = camera.position.distanceTo(target);
let pos: THREE.Vector3 | null = null;
switch (e.key) {
case "1": // Front
pos = new THREE.Vector3(0, 0, distance).add(target);
break;
case "3": // Right
pos = new THREE.Vector3(distance, 0, 0).add(target);
break;
case "7": // Top
pos = new THREE.Vector3(0, distance, 0).add(target);
break;
case "9": // Back
pos = new THREE.Vector3(0, 0, -distance).add(target);
break;
}
if (pos) {
controlsRef.current.setLookAt(
pos.x, pos.y, pos.z, // camera position
target.x, target.y, target.z, // keep same target
true // smooth transition
);
}
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [controlsRef, camera]);
};

19
app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts
View File

@@ -3,7 +3,7 @@ import { CameraControls } from '@react-three/drei';
import { ThreeEvent, useThree } from '@react-three/fiber';
import { useCallback, useEffect, useRef } from 'react';
import { useActiveTool, useDeletableFloorItem, useSelectedFloorItem, useToggleView, useZoneAssetId } from '../../../../../../store/builder/store';
import { useActiveTool, useDeletableFloorItem, useResourceManagementId, useSelectedFloorItem, useToggleView, useZoneAssetId } from '../../../../../../store/builder/store';
import useModuleStore, { useSubModuleStore } from '../../../../../../store/useModuleStore';
import { useSocketStore } from '../../../../../../store/builder/store';
import { useSceneContext } from '../../../../../scene/sceneContext';
@@ -36,6 +36,7 @@ export function useModelEventHandlers({
const { push3D } = undoRedo3DStore();
const { getAssetById, removeAsset } = assetStore();
const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
const { resourceManagementId, setResourceManagementId } = useResourceManagementId();
const { removeEvent, getEventByModelUuid } = eventStore();
const { getIsEventInProduct, addPoint, deleteEvent } = productStore();
const { setSelectedAsset, clearSelectedAsset } = useSelectedAsset();
@@ -74,7 +75,17 @@ export function useModelEventHandlers({
if (zoneAssetId.id === asset.modelUuid) {
handleDblClick(asset);
}
}, [zoneAssetId])
useEffect(() => {
if (!resourceManagementId) return
if (resourceManagementId === asset.modelUuid) {
handleDblClick(asset);
}
}, [resourceManagementId])
useEffect(() => {
if (!selectedFloorItem) {
@@ -83,10 +94,8 @@ export function useModelEventHandlers({
}, [selectedFloorItem])
const handleDblClick = (asset: Asset) => {
if (asset && activeTool === "cursor" && boundingBox && groupRef.current && activeModule === 'builder') {
if (asset && activeTool === "cursor" && boundingBox && groupRef.current && (activeModule === 'builder' || (activeModule === 'simulation' && resourceManagementId))) {
const frontView = false;
if (frontView) {
const size = boundingBox.getSize(new THREE.Vector3());
const center = boundingBox.getCenter(new THREE.Vector3());
@@ -107,6 +116,7 @@ export function useModelEventHandlers({
paddingBottom: 5,
paddingRight: 5,
});
} else {
const collisionPos = new THREE.Vector3();
@@ -127,6 +137,7 @@ export function useModelEventHandlers({
}
setSelectedFloorItem(groupRef.current);
setResourceManagementId("");
}
};

1
app/src/modules/builder/builder.tsx
View File

@@ -57,6 +57,7 @@ export default function Builder() {
const { setHoveredPoint, setHoveredLine } = useBuilderStore();
const { userId, organization } = getUserData();
useEffect(() => {
if (!toggleView) {
setHoveredLine(null);

441
app/src/modules/scene/controls/contextControls/contextControls.tsx
View File

@@ -1,222 +1,243 @@
import { useEffect, useRef, useState } from 'react';
import { useThree } from '@react-three/fiber';
import { CameraControls, Html, ScreenSpace } from '@react-three/drei';
import { useContextActionStore, useRenameModeStore, useSelectedAssets } from '../../../../store/builder/store';
import ContextMenu from '../../../../components/ui/menu/contextMenu';
import { useEffect, useRef, useState } from "react";
import { useThree } from "@react-three/fiber";
import { CameraControls, Html, ScreenSpace } from "@react-three/drei";
import {
useContextActionStore,
useRenameModeStore,
useSelectedAssets,
} from "../../../../store/builder/store";
import ContextMenu from "../../../../components/ui/menu/contextMenu";
function ContextControls() {
const { gl, controls } = useThree();
const [canRender, setCanRender] = useState(false);
const [visibility, setVisibility] = useState({ rename: true, focus: true, flipX: true, flipZ: true, move: true, rotate: true, duplicate: true, copy: true, paste: true, modifier: false, group: false, array: false, delete: true, });
const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
const { selectedAssets } = useSelectedAssets();
const { setContextAction } = useContextActionStore();
const { setIsRenameMode } = useRenameModeStore();
const rightDrag = useRef(false);
const isRightMouseDown = useRef(false);
const { gl, controls } = useThree();
const [canRender, setCanRender] = useState(false);
const [visibility, setVisibility] = useState({
rename: true,
focus: true,
flipX: true,
flipZ: true,
move: true,
rotate: true,
duplicate: true,
copy: true,
paste: true,
modifier: false,
group: false,
array: false,
delete: true,
});
const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
const { selectedAssets } = useSelectedAssets();
const { setContextAction } = useContextActionStore();
const { setIsRenameMode } = useRenameModeStore();
const rightDrag = useRef(false);
const isRightMouseDown = useRef(false);
useEffect(() => {
if (selectedAssets.length === 1) {
setVisibility({
rename: true,
focus: true,
flipX: true,
flipZ: true,
move: true,
rotate: true,
duplicate: true,
copy: true,
paste: true,
modifier: false,
group: false,
array: false,
delete: true,
});
} else if (selectedAssets.length > 1) {
setVisibility({
rename: false,
focus: true,
flipX: true,
flipZ: true,
move: true,
rotate: true,
duplicate: true,
copy: true,
paste: true,
modifier: false,
group: true,
array: false,
delete: true,
});
} else {
setVisibility({
rename: false,
focus: false,
flipX: false,
flipZ: false,
move: false,
rotate: false,
duplicate: false,
copy: false,
paste: false,
modifier: false,
group: false,
array: false,
delete: false,
});
useEffect(() => {
if (selectedAssets.length === 1) {
setVisibility({
rename: true,
focus: true,
flipX: true,
flipZ: true,
move: true,
rotate: true,
duplicate: true,
copy: true,
paste: true,
modifier: false,
group: false,
array: false,
delete: true,
});
} else if (selectedAssets.length > 1) {
setVisibility({
rename: false,
focus: true,
flipX: true,
flipZ: true,
move: true,
rotate: true,
duplicate: true,
copy: true,
paste: true,
modifier: false,
group: true,
array: false,
delete: true,
});
} else {
setVisibility({
rename: false,
focus: false,
flipX: false,
flipZ: false,
move: false,
rotate: false,
duplicate: false,
copy: false,
paste: false,
modifier: false,
group: false,
array: false,
delete: false,
});
}
}, [selectedAssets]);
useEffect(() => {
const canvasElement = gl.domElement;
const onPointerDown = (evt: any) => {
if (evt.button === 2) {
isRightMouseDown.current = true;
rightDrag.current = false;
}
};
const onPointerMove = () => {
if (isRightMouseDown.current) {
rightDrag.current = true;
}
};
const onPointerUp = (evt: any) => {
if (evt.button === 2) {
isRightMouseDown.current = false;
}
};
const handleContextClick = (event: MouseEvent) => {
event.preventDefault();
if (rightDrag.current) return;
if (selectedAssets.length > 0) {
setMenuPosition({
x: event.clientX - gl.domElement.width / 2,
y: event.clientY - gl.domElement.height / 2,
});
setCanRender(true);
if (controls) {
(controls as CameraControls).enabled = false;
}
}, [selectedAssets]);
useEffect(() => {
const canvasElement = gl.domElement;
const onPointerDown = (evt: any) => {
if (evt.button === 2) {
isRightMouseDown.current = true;
rightDrag.current = false;
}
};
const onPointerMove = () => {
if (isRightMouseDown.current) {
rightDrag.current = true;
}
};
const onPointerUp = (evt: any) => {
if (evt.button === 2) {
isRightMouseDown.current = false;
}
};
const handleContextClick = (event: MouseEvent) => {
event.preventDefault();
if (rightDrag.current) return;
if (selectedAssets.length > 0) {
setMenuPosition({ x: event.clientX - gl.domElement.width / 2, y: event.clientY - gl.domElement.height / 2 });
setCanRender(true);
if (controls) {
(controls as CameraControls).enabled = false;
}
} else {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
}
};
if (selectedAssets.length > 0) {
canvasElement.addEventListener('pointerdown', onPointerDown);
canvasElement.addEventListener('pointermove', onPointerMove);
canvasElement.addEventListener('pointerup', onPointerUp);
canvasElement.addEventListener('contextmenu', handleContextClick)
} else {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setMenuPosition({ x: 0, y: 0 });
}
return () => {
canvasElement.removeEventListener('pointerdown', onPointerDown);
canvasElement.removeEventListener('pointermove', onPointerMove);
canvasElement.removeEventListener('pointerup', onPointerUp);
canvasElement.removeEventListener('contextmenu', handleContextClick);
};
}, [gl, selectedAssets]);
const handleAssetRename = () => {
} else {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
(controls as CameraControls).enabled = true;
}
setContextAction("renameAsset");
setIsRenameMode(true);
}
const handleAssetFocus = () => {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setContextAction("focusAsset");
}
const handleAssetMove = () => {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setContextAction("moveAsset")
}
const handleAssetRotate = () => {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setContextAction("rotateAsset")
}
const handleAssetCopy = () => {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setContextAction("copyAsset")
}
const handleAssetPaste = () => {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setContextAction("pasteAsset")
}
const handleAssetDelete = () => {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setContextAction("deleteAsset")
}
const handleAssetDuplicate = () => {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setContextAction("duplicateAsset")
}
};
if (selectedAssets.length > 0) {
canvasElement.addEventListener("pointerdown", onPointerDown);
canvasElement.addEventListener("pointermove", onPointerMove);
canvasElement.addEventListener("pointerup", onPointerUp);
canvasElement.addEventListener("contextmenu", handleContextClick);
} else {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setMenuPosition({ x: 0, y: 0 });
}
return (
<>
{canRender && (
<ScreenSpace depth={1} >
<Html
style={{
position: 'fixed',
top: menuPosition.y,
left: menuPosition.x,
zIndex: 1000
}}
>
<ContextMenu
visibility={visibility}
onRename={() => handleAssetRename()}
onFocus={() => handleAssetFocus()}
onFlipX={() => console.log("Flip to X")}
onFlipZ={() => console.log("Flip to Z")}
onMove={() => handleAssetMove()}
onRotate={() => handleAssetRotate()}
onDuplicate={() => handleAssetDuplicate()}
onCopy={() => handleAssetCopy()}
onPaste={() => handleAssetPaste()}
onGroup={() => console.log("Group")}
onArray={() => console.log("Array")}
onDelete={() => handleAssetDelete()}
/>
</Html>
</ScreenSpace>
)}
</>
);
return () => {
canvasElement.removeEventListener("pointerdown", onPointerDown);
canvasElement.removeEventListener("pointermove", onPointerMove);
canvasElement.removeEventListener("pointerup", onPointerUp);
canvasElement.removeEventListener("contextmenu", handleContextClick);
};
}, [controls, gl, selectedAssets]);
const handleAssetRename = () => {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setContextAction("renameAsset");
setIsRenameMode(true);
};
const handleAssetFocus = () => {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setContextAction("focusAsset");
};
const handleAssetMove = () => {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setContextAction("moveAsset");
};
const handleAssetRotate = () => {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setContextAction("rotateAsset");
};
const handleAssetCopy = () => {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setContextAction("copyAsset");
};
const handleAssetPaste = () => {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setContextAction("pasteAsset");
};
const handleAssetDelete = () => {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setContextAction("deleteAsset");
};
const handleAssetDuplicate = () => {
setCanRender(false);
if (controls) {
(controls as CameraControls).enabled = true;
}
setContextAction("duplicateAsset");
};
return (
<>
{canRender && (
<ScreenSpace depth={1}>
<Html
style={{
position: "fixed",
top: menuPosition.y,
left: menuPosition.x,
zIndex: 1000,
}}
>
<ContextMenu
visibility={visibility}
onRename={() => handleAssetRename()}
onFocus={() => handleAssetFocus()}
onFlipX={() => console.log("Flip to X")}
onFlipZ={() => console.log("Flip to Z")}
onMove={() => handleAssetMove()}
onRotate={() => handleAssetRotate()}
onDuplicate={() => handleAssetDuplicate()}
onCopy={() => handleAssetCopy()}
onPaste={() => handleAssetPaste()}
onGroup={() => console.log("Group")}
onArray={() => console.log("Array")}
onDelete={() => handleAssetDelete()}
/>
</Html>
</ScreenSpace>
)}
</>
);
}
export default ContextControls;

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

@@ -18,6 +18,7 @@ import ContextControls from "./contextControls/contextControls";
import SelectionControls2D from "./selectionControls/selection2D/selectionControls2D";
import UndoRedo2DControls from "./undoRedoControls/undoRedo2D/undoRedo2DControls";
import UndoRedo3DControls from "./undoRedoControls/undoRedo3D/undoRedo3DControls";
import { useCameraShortcuts } from "../../../hooks/useCameraShortcuts";
export default function Controls() {
const controlsRef = useRef<CameraControls>(null);
@@ -116,6 +117,7 @@ export default function Controls() {
stopInterval();
};
}, [toggleView, state, socket]);
useCameraShortcuts(controlsRef);
return (
<>

3
app/src/modules/scene/controls/selectionControls/selection3D/moveControls3D.tsx
View File

@@ -64,6 +64,7 @@ function MoveControls3D({ boundingBoxRef }: any) {
setContextAction(null);
moveAssets()
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [contextAction])
useEffect(() => {
@@ -176,6 +177,7 @@ function MoveControls3D({ boundingBoxRef }: any) {
canvasElement.removeEventListener("keydown", onKeyDown);
canvasElement?.removeEventListener("keyup", onKeyUp);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [camera, controls, scene, toggleView, selectedAssets, socket, pastedObjects, duplicatedObjects, movedObjects, rotatedObjects, keyEvent, initialStates]);
const calculateDragOffset = useCallback((point: THREE.Object3D, hitPoint: THREE.Vector3) => {
@@ -223,6 +225,7 @@ function MoveControls3D({ boundingBoxRef }: any) {
setDragOffset(newOffset);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [axisConstraint, camera, movedObjects])
useFrame(() => {

5
app/src/modules/scene/controls/selectionControls/selection3D/selectionControls3D.tsx
View File

@@ -67,6 +67,7 @@ const SelectionControls3D: React.FC = () => {
setContextAction(null);
deleteSelection()
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [contextAction])
useEffect(() => {
@@ -222,12 +223,14 @@ const SelectionControls3D: React.FC = () => {
helper.enabled = false;
helper.dispose();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, socket, rotatedObjects, activeModule, toolMode]);
useEffect(() => {
if (activeModule !== "builder" || toolMode !== 'cursor' || toggleView) {
clearSelection();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeModule, toolMode, toggleView]);
const selectAssets = useCallback(() => {
@@ -362,7 +365,7 @@ const SelectionControls3D: React.FC = () => {
removeAsset(uuid);
});
echo.success("Selected models removed!");
echo.warn("Selected models removed!");
clearSelection();
}
};

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

@@ -14,6 +14,7 @@ import { getAllProjects } from "../../services/dashboard/getAllProjects";
import { getUserData } from "../../functions/getUserData";
import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
import { Color, SRGBColorSpace } from "three";
import { compressImage } from "../../utils/compressImage";
export default function Scene({ layout }: { readonly layout: "Main Layout" | "Comparison Layout"; }) {
const map = useMemo(() => [
@@ -31,23 +32,24 @@ export default function Scene({ layout }: { readonly layout: "Main Layout" | "Co
const { loadingProgress } = useLoadingProgress();
useEffect(() => {
if (!projectId && loadingProgress > 1) return;
if (!projectId || loadingProgress !== 0) return;
getAllProjects(userId, organization).then((projects) => {
if (!projects || !projects.Projects) return;
let project = projects.Projects.find((val: any) => val.projectUuid === projectId || val._id === projectId);
const canvas = document.getElementById("sceneCanvas")?.getElementsByTagName("canvas")[0];
if (!canvas) return;
const screenshotDataUrl = (canvas as HTMLCanvasElement)?.toDataURL("image/png");
const updateProjects = {
projectId: project?._id,
organization,
userId,
projectName: project?.projectName,
thumbnail: screenshotDataUrl,
};
if (projectSocket) {
projectSocket.emit("v1:project:update", updateProjects);
}
compressImage((canvas as HTMLCanvasElement)?.toDataURL("image/png")).then((screenshotDataUrl) => {
const updateProjects = {
projectId: project?._id,
organization,
userId,
projectName: project?.projectName,
thumbnail: screenshotDataUrl,
};
if (projectSocket) {
projectSocket.emit("v1:project:update", updateProjects);
}
});
}).catch((err) => {
console.error(err);
});
@@ -64,7 +66,7 @@ export default function Scene({ layout }: { readonly layout: "Main Layout" | "Co
onContextMenu={(e) => { e.preventDefault(); }}
performance={{ min: 0.9, max: 1.0 }}
onCreated={(e) => { e.scene.background = layout === "Main Layout" ? null : new Color(0x19191d); }}
gl={{ outputColorSpace: SRGBColorSpace, powerPreference: "high-performance", antialias: true }}
gl={{ outputColorSpace: SRGBColorSpace, powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
>
<Setup />
<Collaboration />

473
app/src/modules/scene/tools/measurementTool.tsx
View File

@@ -1,241 +1,272 @@
import * as THREE from "three";
import { useEffect, useRef, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { useThree, useFrame } from "@react-three/fiber";
import { useToolMode } from "../../../store/builder/store";
import { Html } from "@react-three/drei";
import { Html, Line } from "@react-three/drei";
const MeasurementTool = () => {
const { gl, raycaster, pointer, camera, scene } = useThree();
const { toolMode } = useToolMode();
const { gl, raycaster, pointer, camera, scene } = useThree();
const { toolMode } = useToolMode();
const [points, setPoints] = useState<THREE.Vector3[]>([]);
const [tubeGeometry, setTubeGeometry] = useState<THREE.TubeGeometry | null>(
null
);
const groupRef = useRef<THREE.Group>(null);
const [startConePosition, setStartConePosition] =
useState<THREE.Vector3 | null>(null);
const [endConePosition, setEndConePosition] = useState<THREE.Vector3 | null>(
null
);
const [startConeQuaternion, setStartConeQuaternion] = useState(
new THREE.Quaternion()
);
const [endConeQuaternion, setEndConeQuaternion] = useState(
new THREE.Quaternion()
);
const [coneSize, setConeSize] = useState({ radius: 0.2, height: 0.5 });
const [points, setPoints] = useState<THREE.Vector3[]>([]);
const [linePoints, setLinePoints] = useState<THREE.Vector3[] | null>(null);
const [axisLock, setAxisLock] = useState<"x" | "y" | "z" | null>(null);
const groupRef = useRef<THREE.Group>(null);
const keysPressed = useRef<Set<string>>(new Set());
const MIN_RADIUS = 0.001, MAX_RADIUS = 0.1;
const MIN_CONE_RADIUS = 0.01, MAX_CONE_RADIUS = 0.4;
const MIN_CONE_HEIGHT = 0.035, MAX_CONE_HEIGHT = 2.0;
// Axis lock key handling
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.altKey) {
if (e.key.toLowerCase() === "x") keysPressed.current.add("x");
else if (e.key.toLowerCase() === "y") keysPressed.current.add("y");
else if (e.key.toLowerCase() === "z") keysPressed.current.add("z");
useEffect(() => {
const canvasElement = gl.domElement;
let drag = false;
let isLeftMouseDown = false;
const onMouseDown = () => {
isLeftMouseDown = true;
drag = false;
};
const onMouseUp = (evt: any) => {
isLeftMouseDown = false;
if (evt.button === 0 && !drag) {
raycaster.setFromCamera(pointer, camera);
const intersects = raycaster
.intersectObjects(scene.children, true)
.filter(
(intersect) =>
!intersect.object.name.includes("Roof") &&
!intersect.object.name.includes("MeasurementReference") &&
!intersect.object.name.includes("agv-collider") &&
!intersect.object.name.includes("zonePlane") &&
!intersect.object.name.includes("SelectionGroup") &&
!intersect.object.name.includes("selectionAssetGroup") &&
!intersect.object.name.includes("SelectionGroupBoundingBoxLine") &&
!intersect.object.name.includes("SelectionGroupBoundingBox") &&
!intersect.object.name.includes("SelectionGroupBoundingLine") &&
intersect.object.type !== "GridHelper"
);
if (intersects.length > 0) {
const intersectionPoint = intersects[0].point.clone();
if (points.length < 2) {
setPoints([...points, intersectionPoint]);
} else {
setPoints([intersectionPoint]);
}
}
}
};
const onMouseMove = () => {
if (isLeftMouseDown) drag = true;
};
const onContextMenu = (evt: any) => {
evt.preventDefault();
if (!drag) {
evt.preventDefault();
setPoints([]);
setTubeGeometry(null);
}
};
if (toolMode === "MeasurementScale") {
canvasElement.addEventListener("pointerdown", onMouseDown);
canvasElement.addEventListener("pointermove", onMouseMove);
canvasElement.addEventListener("pointerup", onMouseUp);
canvasElement.addEventListener("contextmenu", onContextMenu);
} else {
resetMeasurement();
setPoints([]);
}
return () => {
canvasElement.removeEventListener("pointerdown", onMouseDown);
canvasElement.removeEventListener("pointermove", onMouseMove);
canvasElement.removeEventListener("pointerup", onMouseUp);
canvasElement.removeEventListener("contextmenu", onContextMenu);
};
}, [toolMode, camera, raycaster, pointer, scene, points]);
useFrame(() => {
if (points.length === 1) {
raycaster.setFromCamera(pointer, camera);
const intersects = raycaster
.intersectObjects(scene.children, true)
.filter(
(intersect) =>
!intersect.object.name.includes("Roof") &&
!intersect.object.name.includes("MeasurementReference") &&
!intersect.object.name.includes("agv-collider") &&
!intersect.object.name.includes("zonePlane") &&
!intersect.object.name.includes("SelectionGroup") &&
!intersect.object.name.includes("selectionAssetGroup") &&
!intersect.object.name.includes("SelectionGroupBoundingBoxLine") &&
!intersect.object.name.includes("SelectionGroupBoundingBox") &&
!intersect.object.name.includes("SelectionGroupBoundingLine") &&
intersect.object.type !== "GridHelper"
);
if (intersects.length > 0) {
updateMeasurement(points[0], intersects[0].point);
}
} else if (points.length === 2) {
updateMeasurement(points[0], points[1]);
} else {
resetMeasurement();
}
});
const updateMeasurement = (start: THREE.Vector3, end: THREE.Vector3) => {
const distance = start.distanceTo(end);
const radius = THREE.MathUtils.clamp(distance * 0.02, MIN_RADIUS, MAX_RADIUS);
const coneRadius = THREE.MathUtils.clamp(distance * 0.05, MIN_CONE_RADIUS, MAX_CONE_RADIUS);
const coneHeight = THREE.MathUtils.clamp(distance * 0.2, MIN_CONE_HEIGHT, MAX_CONE_HEIGHT);
setConeSize({ radius: coneRadius, height: coneHeight });
const direction = new THREE.Vector3().subVectors(end, start).normalize();
const offset = direction.clone().multiplyScalar(coneHeight * 0.5);
let tubeStart = start.clone().add(offset);
let tubeEnd = end.clone().sub(offset);
tubeStart.y = Math.max(tubeStart.y, 0);
tubeEnd.y = Math.max(tubeEnd.y, 0);
const curve = new THREE.CatmullRomCurve3([tubeStart, tubeEnd]);
setTubeGeometry(new THREE.TubeGeometry(curve, 20, radius, 8, false));
setStartConePosition(tubeStart);
setEndConePosition(tubeEnd);
setStartConeQuaternion(getArrowOrientation(start, end));
setEndConeQuaternion(getArrowOrientation(end, start));
if (keysPressed.current.has("x")) setAxisLock("x");
else if (keysPressed.current.has("y")) setAxisLock("y");
else if (keysPressed.current.has("z")) setAxisLock("z");
} else if (e.key === "Escape") {
setPoints([]);
setLinePoints(null);
setAxisLock(null);
}
};
const resetMeasurement = () => {
setTubeGeometry(null);
setStartConePosition(null);
setEndConePosition(null);
const handleKeyUp = (e: KeyboardEvent) => {
keysPressed.current.delete(e.key.toLowerCase());
if (keysPressed.current.has("x")) setAxisLock("x");
else if (keysPressed.current.has("y")) setAxisLock("y");
else if (keysPressed.current.has("z")) setAxisLock("z");
else setAxisLock(null);
};
const getArrowOrientation = (start: THREE.Vector3, end: THREE.Vector3) => {
const direction = new THREE.Vector3()
.subVectors(end, start)
.normalize()
.negate();
const quaternion = new THREE.Quaternion();
quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction);
return quaternion;
window.addEventListener("keydown", handleKeyDown);
window.addEventListener("keyup", handleKeyUp);
return () => {
window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener("keyup", handleKeyUp);
};
}, []);
const getLineColor = useCallback(() => {
switch (axisLock) {
case "x":
return "#d94522"; // Red for X axis
case "y":
return "#22ab2e"; // Green for Y axis
case "z":
return "#227bd9"; // Blue for Z axis
default:
return "#b18ef1"; // Default purple
}
}, [axisLock]);
// Apply axis lock to a point
const applyAxisLock = useCallback(
(point: THREE.Vector3, referencePoint: THREE.Vector3) => {
const lockedPoint = point.clone();
switch (axisLock) {
case "x":
lockedPoint.y = referencePoint.y;
lockedPoint.z = referencePoint.z;
break;
case "y":
lockedPoint.x = referencePoint.x;
lockedPoint.z = referencePoint.z;
break;
case "z":
lockedPoint.x = referencePoint.x;
lockedPoint.y = referencePoint.y;
break;
}
return lockedPoint;
},
[axisLock]
);
useEffect(() => {
const canvasElement = gl.domElement;
let drag = false;
let isLeftMouseDown = false;
const onMouseDown = () => {
isLeftMouseDown = true;
drag = false;
};
useEffect(() => {
if (points.length === 2) {
// console.log(points[0].distanceTo(points[1]));
const onMouseUp = (evt: any) => {
isLeftMouseDown = false;
if (evt.button === 0 && !drag) {
raycaster.setFromCamera(pointer, camera);
const intersects = raycaster
.intersectObjects(scene.children, true)
.filter(
(intersect) =>
!intersect.object.name.includes("Roof") &&
!intersect.object.name.includes("MeasurementReference") &&
!intersect.object.name.includes("agv-collider") &&
!intersect.object.name.includes("zonePlane") &&
!intersect.object.name.includes("SelectionGroup") &&
!intersect.object.name.includes("selectionAssetGroup") &&
!intersect.object.name.includes(
"SelectionGroupBoundingBoxLine"
) &&
!intersect.object.name.includes("SelectionGroupBoundingBox") &&
!intersect.object.name.includes("SelectionGroupBoundingLine") &&
intersect.object.type !== "GridHelper"
);
if (intersects.length > 0) {
let intersectionPoint = intersects[0].point.clone();
if (axisLock && points.length > 0) {
intersectionPoint = applyAxisLock(
intersectionPoint,
points[points.length - 1]
);
}
if (points.length < 2) {
setPoints([...points, intersectionPoint]);
} else {
setPoints([intersectionPoint]);
}
}
}, [points]);
}
};
return (
<group ref={groupRef} name="MeasurementGroup">
{startConePosition && (
<mesh
name="MeasurementReference"
position={startConePosition}
quaternion={startConeQuaternion}
>
<coneGeometry args={[coneSize.radius, coneSize.height, 16]} />
<meshBasicMaterial color="yellow" />
</mesh>
)}
{endConePosition && (
<mesh
name="MeasurementReference"
position={endConePosition}
quaternion={endConeQuaternion}
>
<coneGeometry args={[coneSize.radius, coneSize.height, 16]} />
<meshBasicMaterial color="yellow" />
</mesh>
)}
{tubeGeometry && (
<mesh name="MeasurementReference" geometry={tubeGeometry}>
<meshBasicMaterial color="yellow" />
</mesh>
)}
const onMouseMove = () => {
if (isLeftMouseDown) drag = true;
};
{startConePosition && endConePosition && (
<Html
scale={THREE.MathUtils.clamp(
startConePosition.distanceTo(endConePosition) * 0.25,
0,
10
)}
position={[
(startConePosition.x + endConePosition.x) / 2,
(startConePosition.y + endConePosition.y) / 2,
(startConePosition.z + endConePosition.z) / 2,
]}
// class
wrapperClass="distance-text-wrapper"
className="distance-text"
// other
zIndexRange={[1, 0]}
prepend
sprite
>
<div>
{(startConePosition.distanceTo(endConePosition) + (coneSize.height)).toFixed(2)} m
</div>
</Html>
)}
</group>
);
const onContextMenu = (evt: any) => {
evt.preventDefault();
if (!drag) {
setPoints([]);
setLinePoints(null);
}
};
if (toolMode === "MeasurementScale") {
canvasElement.addEventListener("pointerdown", onMouseDown);
canvasElement.addEventListener("pointermove", onMouseMove);
canvasElement.addEventListener("pointerup", onMouseUp);
canvasElement.addEventListener("contextmenu", onContextMenu);
} else {
setPoints([]);
setLinePoints(null);
}
return () => {
canvasElement.removeEventListener("pointerdown", onMouseDown);
canvasElement.removeEventListener("pointermove", onMouseMove);
canvasElement.removeEventListener("pointerup", onMouseUp);
canvasElement.removeEventListener("contextmenu", onContextMenu);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [toolMode, camera, raycaster, pointer, scene, points, axisLock]);
useFrame(() => {
if (points.length === 1) {
// live preview for second point
raycaster.setFromCamera(pointer, camera);
const intersects = raycaster
.intersectObjects(scene.children, true)
.filter(
(intersect) =>
!intersect.object.name.includes("Roof") &&
!intersect.object.name.includes("MeasurementReference") &&
!intersect.object.name.includes("agv-collider") &&
!intersect.object.name.includes("zonePlane") &&
!intersect.object.name.includes("SelectionGroup") &&
!intersect.object.name.includes("selectionAssetGroup") &&
!intersect.object.name.includes("SelectionGroupBoundingBoxLine") &&
!intersect.object.name.includes("SelectionGroupBoundingBox") &&
!intersect.object.name.includes("SelectionGroupBoundingLine") &&
intersect.object.type !== "GridHelper"
);
if (intersects.length > 0) {
let tempEnd = intersects[0].point.clone();
if (axisLock) {
tempEnd = applyAxisLock(tempEnd, points[0]);
}
updateMeasurement(points[0], tempEnd);
}
} else if (points.length === 2) {
// second point already fixed
updateMeasurement(points[0], points[1]);
} else {
setLinePoints(null);
}
});
const updateMeasurement = (start: THREE.Vector3, end: THREE.Vector3) => {
setLinePoints([start.clone(), end.clone()]);
};
return (
<group ref={groupRef} name="MeasurementGroup">
{linePoints && (
<>
{/* Outline line */}
<Line
points={linePoints}
color="black"
lineWidth={6} // thicker than main line
depthTest={false}
depthWrite={false}
renderOrder={998} // render behind main line
/>
{/* Main line */}
<Line
points={linePoints}
color={getLineColor()}
lineWidth={2} // actual line width
depthTest={false}
depthWrite={false}
transparent={false}
opacity={1}
renderOrder={999} // render on top
/>
</>
)}
{points.map((point, index) => (
<Html
key={index}
position={point}
scale={0.5}
wrapperClass="measurement-label-wrapper"
className="measurement-label"
zIndexRange={[1, 0]}
prepend
sprite
>
<div className="measurement-point"></div>
</Html>
))}
{linePoints && linePoints.length === 2 && (
<Html
position={[
(linePoints[0].x + linePoints[1].x) / 2,
(linePoints[0].y + linePoints[1].y) / 2,
(linePoints[0].z + linePoints[1].z) / 2,
]}
scale={0.5}
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[2, 1]}
prepend
sprite
>
<div>{linePoints[0].distanceTo(linePoints[1]).toFixed(2)} m</div>
</Html>
)}
</group>
);
};
export default MeasurementTool;

25
app/src/modules/visualization/zone/DisplayZone.tsx
View File

@@ -241,21 +241,18 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
{Object.keys(zonesData).length !== 0 ? (
<>
{Object.values(zonesData).map((zone, index) => (
<>
{ }
<div
key={index}
className={`zone ${selectedZone.zoneUuid === zone.zoneUuid ? "active" : ""
}`}
onClick={() => {
<div
key={`${index}_${zone.zoneName}`}
className={`zone ${selectedZone.zoneUuid === zone.zoneUuid ? "active" : ""
}`}
onClick={() => {
handleSelect2dZoneData(zonesData[zone.zoneUuid]?.zoneUuid, zone.zoneName)
}
}
>
{zone.zoneName}
</div>
</>
handleSelect2dZoneData(zonesData[zone.zoneUuid]?.zoneUuid, zone.zoneName)
}
}
>
{zone.zoneName}
</div>
))}
</>
) : (

10
app/src/store/builder/store.ts
View File

@@ -436,6 +436,16 @@ export const useZoneAssetId = create<ZoneAssetState>((set) => ({
setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
}));
interface ResourceManagementState {
resourceManagementId: string;
setResourceManagementId: (id: string) => void;
}
export const useResourceManagementId = create<ResourceManagementState>((set) => ({
resourceManagementId: "", // default value
setResourceManagementId: (id: string) => set({ resourceManagementId: id }),
}));
// version visible hidden
interface VersionHistoryState {
viewVersionHistory: boolean;

1
app/src/styles/components/form.scss
View File

@@ -9,6 +9,7 @@
border-radius: #{$border-radius-large};
outline: 1px solid var(--border-color);
z-index: 100;
backdrop-filter: blur(4px);
.header {
@include flex-center;
gap: 8px;

1
app/src/styles/components/tools.scss
View File

@@ -31,6 +31,7 @@
}
.draw-tools,
.transform-tools,
.general-options,
.activeDropicon {
@include flex-center;

1098
app/src/styles/layout/resourceManagement.scss
View File

File diff suppressed because it is too large Load Diff

16
app/src/styles/layout/sidebar.scss
View File

@@ -516,6 +516,7 @@
width: 50px;
border-radius: 100px;
cursor: pointer;
&:hover {
outline: 1px solid var(--accent-color);
}
@@ -586,6 +587,7 @@
align-items: center;
justify-content: center;
border-radius: 8px;
&:hover {
background: var(--background-color);
outline: 1px solid #aaaaaa29;
@@ -600,6 +602,7 @@
.kebab-icon {
display: flex;
svg {
transform: rotate(90deg) scale(0.8);
}
@@ -1434,6 +1437,11 @@
padding: 12px;
border-radius: #{$border-radius-large};
outline: 1px solid var(--border-color);
outline-offset: -1px;
border-radius: 12px;
background: var(--background-color);
.compare-simulations-header {
font-weight: var(--font-weight-medium);
}
@@ -1598,8 +1606,13 @@
.animations-lists {
max-height: 210px;
overflow: auto;
.no-animation {
padding: 6px 8px;
line-height: 20px;
}
.animations-list-wrapper {
padding: 0 4px;
.animations-list {
margin: 2px 0;
padding: 4px 12px;
@@ -1789,7 +1802,8 @@
padding: 14px;
padding-bottom: 0;
margin-bottom: 8px;
.input-toggle-container{
.input-toggle-container {
padding: 4px 0;
margin-bottom: 8px;
}

4
app/src/styles/scene/comments.scss
View File

@@ -171,8 +171,8 @@
.messages-wrapper {
padding: 12px;
padding-top: 0;
max-height: 50vh;
overflow-y: auto;
max-height: 36vh;
overflow: auto;
.edit-container {
.input-container {
textarea {

14
app/src/styles/scene/scene.scss
View File

@@ -130,15 +130,25 @@
svg {
display: none;
}
.c-jiwtRJ{
.c-jiwtRJ {
align-items: center;
}
}
.stats{
.stats {
top: auto !important;
bottom: 36px !important;
left: 12px !important;
border-radius: 6px;
overflow: hidden;
}
.measurement-point {
height: 12px;
width: 12px;
border-radius: 50%;
background: #b18ef1;
outline: 2px solid black;
outline-offset: -1px;
transform: translate(-50%, -50%);
}

39
app/src/utils/compressImage.ts Normal file
View File

@@ -0,0 +1,39 @@
export async function compressImage(
dataUrl: string,
maxWidth = 400,
maxHeight = 400
): Promise<string> {
return new Promise((resolve) => {
const img = new Image();
img.src = dataUrl;
img.onload = () => {
const { width, height } = img;
// Calculate aspect ratio preserving resize
let newWidth = width;
let newHeight = height;
if (width > height) {
if (width > maxWidth) {
newWidth = maxWidth;
newHeight = (height * maxWidth) / width;
}
} else {
if (height > maxHeight) {
newHeight = maxHeight;
newWidth = (width * maxHeight) / height;
}
}
const offCanvas = document.createElement("canvas");
const ctx = offCanvas.getContext("2d");
offCanvas.width = newWidth;
offCanvas.height = newHeight;
ctx?.drawImage(img, 0, 0, newWidth, newHeight);
resolve(offCanvas.toDataURL("image/png"));
};
});
}

6
app/src/utils/shortcutkeys/handleShortcutKeys.ts
View File

@@ -221,8 +221,12 @@ const KeyPressListener: React.FC = () => {
// Shortcuts specific for sidebar visibility toggle and others specific to sidebar if added
handleSidebarShortcuts(keyCombination);
// Active module selection (builder, simulation, etc.)
handleModuleSwitch(keyCombination);
if (event.location === 0) { // Location 0 = standard keyboard (not numpad)
handleModuleSwitch(keyCombination);
}
// Common editing tools: cursor | delete | free-hand
handlePrimaryTools(keyCombination);
// Shortcuts specific to the builder module (e.g., drawing and measurement tools)