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

merged to main

This commit is contained in:
Nalvazhuthi 2025-04-11 18:44:48 +05:30
parent 4edb3cfd7d c7c35e288a
commit 513d4d0958
30 changed files with 1273 additions and 1079 deletions

60
app/package-lock.json generated
View File

@ -48,6 +48,7 @@
"zustand": "^5.0.0-rc.2" "zustand": "^5.0.0-rc.2"
}, },
"devDependencies": { "devDependencies": {
"@types/html2canvas": "^1.0.0",
"@types/node": "^22.9.1", "@types/node": "^22.9.1",
"@types/three": "^0.169.0", "@types/three": "^0.169.0",
"axios": "^1.8.4", "axios": "^1.8.4",
@ -2020,7 +2021,7 @@
"version": "0.8.1", "version": "0.8.1",
"resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
"integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"@jridgewell/trace-mapping": "0.3.9" "@jridgewell/trace-mapping": "0.3.9"
}, },
@ -2032,7 +2033,7 @@
"version": "0.3.9", "version": "0.3.9",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
"integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/resolve-uri": "^3.0.3",
"@jridgewell/sourcemap-codec": "^1.4.10" "@jridgewell/sourcemap-codec": "^1.4.10"
@ -4135,6 +4136,26 @@
"url": "https://github.com/sponsors/gregberge" "url": "https://github.com/sponsors/gregberge"
} }
}, },
"node_modules/@testing-library/dom": {
"version": "10.4.0",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
"integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
"@types/aria-query": "^5.0.1",
"aria-query": "5.3.0",
"chalk": "^4.1.0",
"dom-accessibility-api": "^0.5.9",
"lz-string": "^1.5.0",
"pretty-format": "^27.0.2"
},
"engines": {
"node": ">=18"
}
},
"node_modules/@testing-library/jest-dom": { "node_modules/@testing-library/jest-dom": {
"version": "5.17.0", "version": "5.17.0",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@ -4246,25 +4267,25 @@
"version": "1.0.11", "version": "1.0.11",
"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
"integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==", "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
"dev": true "devOptional": true
}, },
"node_modules/@tsconfig/node12": { "node_modules/@tsconfig/node12": {
"version": "1.0.11", "version": "1.0.11",
"resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
"integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
"dev": true "devOptional": true
}, },
"node_modules/@tsconfig/node14": { "node_modules/@tsconfig/node14": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
"integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
"dev": true "devOptional": true
}, },
"node_modules/@tsconfig/node16": { "node_modules/@tsconfig/node16": {
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
"integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
"dev": true "devOptional": true
}, },
"node_modules/@turf/along": { "node_modules/@turf/along": {
"version": "7.2.0", "version": "7.2.0",
@ -6470,6 +6491,17 @@
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
"integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==" "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg=="
}, },
"node_modules/@types/html2canvas": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@types/html2canvas/-/html2canvas-1.0.0.tgz",
"integrity": "sha512-BJpVf+FIN9UERmzhbtUgpXj6XBZpG67FMgBLLoj9HZKd9XifcCpSV+UnFcwTZfEyun4U/KmCrrVOG7829L589w==",
"deprecated": "This is a stub types definition. html2canvas provides its own type definitions, so you do not need this installed.",
"dev": true,
"license": "MIT",
"dependencies": {
"html2canvas": "*"
}
},
"node_modules/@types/http-errors": { "node_modules/@types/http-errors": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
@ -9007,7 +9039,7 @@
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
"integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
"dev": true "devOptional": true
}, },
"node_modules/cross-env": { "node_modules/cross-env": {
"version": "7.0.3", "version": "7.0.3",
@ -9884,7 +9916,7 @@
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
"integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
"dev": true, "devOptional": true,
"engines": { "engines": {
"node": ">=0.3.1" "node": ">=0.3.1"
} }
@ -15247,7 +15279,7 @@
"version": "1.3.6", "version": "1.3.6",
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
"integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
"dev": true "devOptional": true
}, },
"node_modules/makeerror": { "node_modules/makeerror": {
"version": "1.0.12", "version": "1.0.12",
@ -20715,7 +20747,7 @@
"version": "10.9.2", "version": "10.9.2",
"resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
"integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"@cspotcode/source-map-support": "^0.8.0", "@cspotcode/source-map-support": "^0.8.0",
"@tsconfig/node10": "^1.0.7", "@tsconfig/node10": "^1.0.7",
@ -20758,7 +20790,7 @@
"version": "8.3.4", "version": "8.3.4",
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
"integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==", "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"acorn": "^8.11.0" "acorn": "^8.11.0"
}, },
@ -20770,7 +20802,7 @@
"version": "4.1.3", "version": "4.1.3",
"resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
"integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
"dev": true "devOptional": true
}, },
"node_modules/tsconfig-paths": { "node_modules/tsconfig-paths": {
"version": "3.15.0", "version": "3.15.0",
@ -21266,7 +21298,7 @@
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
"integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
"dev": true "devOptional": true
}, },
"node_modules/v8-to-istanbul": { "node_modules/v8-to-istanbul": {
"version": "8.1.1", "version": "8.1.1",
@ -22325,7 +22357,7 @@
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
"integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
"dev": true, "devOptional": true,
"engines": { "engines": {
"node": ">=6" "node": ">=6"
} }

1
app/package.json
View File

@ -70,6 +70,7 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"@types/html2canvas": "^1.0.0",
"@types/node": "^22.9.1", "@types/node": "^22.9.1",
"@types/three": "^0.169.0", "@types/three": "^0.169.0",
"axios": "^1.8.4", "axios": "^1.8.4",

5
app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
View File

@ -45,7 +45,10 @@ const ChartWidget: React.FC<WidgetProps> = ({ type, index, title }) => {
), ),
title, title,
panel: "top", panel: "top",
data: sampleData, Data: {
measurements:{},
duration:'1h'
},
}); });
}} }}
onDragEnd={() => setDraggedAsset(null)} onDragEnd={() => setDraggedAsset(null)}

2
app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
View File

@ -98,7 +98,7 @@ const GlobalProperties: React.FC = () => {
// setPlaneValue({ height: value * 100, width: value * 100 }); // setPlaneValue({ height: value * 100, width: value * 100 });
} }
function updatedGrid(value: number) { function updatedGrid(value: number) {
console.log(" (value * 100) / 4 : ", (value * 100) / 4); // console.log(" (value * 100) / 4 : ", (value * 100) / 4);
setGridValue({ size: value * 100, divisions: (value * 100) / 4 }); setGridValue({ size: value * 100, divisions: (value * 100) / 4 });
setPlaneValue({ height: value * 100, width: value * 100 }); setPlaneValue({ height: value * 100, width: value * 100 });
} }

4
app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
View File

@ -32,7 +32,7 @@ const ZoneProperties: React.FC = () => {
if (response.message === "updated successfully") { if (response.message === "updated successfully") {
setEdit(false); setEdit(false);
} else { } else {
console.log(response); // console.log(response);
} }
} catch (error) { } catch (error) {
@ -63,7 +63,7 @@ const ZoneProperties: React.FC = () => {
) )
); );
}else{ }else{
console.log(response?.message); // console.log(response?.message);
} }
} }
function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) { function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {

175
app/src/modules/builder/agv/agv.tsx
View File

@ -1,111 +1,108 @@
import { useEffect, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { Line } from "@react-three/drei"; import { Line } from "@react-three/drei";
import { import {
useNavMesh, useNavMesh,
usePlayAgv, usePlayAgv,
useSimulationStates, useSimulationStates,
} from "../../../store/store"; } from "../../../store/store";
import PathNavigator from "./pathNavigator"; import PathNavigator from "./pathNavigator";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; import { useAnimationPlaySpeed, usePlayButtonStore, useResetButtonStore } from "../../../store/usePlayButtonStore";
type PathPoints = { type PathPoints = {
modelUuid: string; modelUuid: string;
modelSpeed: number; modelSpeed: number;
bufferTime: number; bufferTime: number;
points: { x: number; y: number; z: number }[]; points: { x: number; y: number; z: number }[];
hitCount: number; hitCount: number;
}; };
interface ProcessContainerProps { interface ProcessContainerProps {
processes: any[]; processes: any[];
agvRef: any; agvRef: any;
MaterialRef: any; MaterialRef: any;
} }
const Agv: React.FC<ProcessContainerProps> = ({ const Agv: React.FC<ProcessContainerProps> = ({
processes, processes,
agvRef, agvRef,
MaterialRef, MaterialRef,
}) => { }) => {
const [pathPoints, setPathPoints] = useState<PathPoints[]>([]); const [pathPoints, setPathPoints] = useState<PathPoints[]>([]);
const { simulationStates } = useSimulationStates(); const { simulationStates } = useSimulationStates();
const { navMesh } = useNavMesh(); const { navMesh } = useNavMesh();
const { isPlaying } = usePlayButtonStore(); const { isPlaying } = usePlayButtonStore();
const { PlayAgv, setPlayAgv } = usePlayAgv(); const { isReset, setReset } = useResetButtonStore();
const { speed } = useAnimationPlaySpeed();
const globalSpeed = useRef(1);
useEffect(() => { globalSpeed.current = speed }, [speed])
useEffect(() => {
if (!isPlaying || isReset) {
agvRef.current = [];
}
}, [isPlaying, isReset])
useEffect(() => { useEffect(() => {
if (simulationStates.length > 0) { if (simulationStates.length > 0) {
const agvModels = simulationStates.filter( const agvModels = simulationStates.filter(
(val) => val.modelName === "agv" && val.type === "Vehicle" (val) => val.modelName === "agv" && val.type === "Vehicle"
); );
const newPathPoints = agvModels const newPathPoints = agvModels
.filter( .filter(
(model: any) => (model: any) =>
model.points && model.points &&
model.points.actions && model.points.actions &&
typeof model.points.actions.start === "object" && typeof model.points.actions.start === "object" &&
typeof model.points.actions.end === "object" && typeof model.points.actions.end === "object" &&
"x" in model.points.actions.start && "x" in model.points.actions.start &&
"y" in model.points.actions.start && "y" in model.points.actions.start &&
"x" in model.points.actions.end && "x" in model.points.actions.end &&
"y" in model.points.actions.end "y" in model.points.actions.end
) )
.map((model: any) => ({ .map((model: any) => ({
modelUuid: model.modeluuid, modelUuid: model.modeluuid,
modelSpeed: model.points.speed, modelSpeed: model.points.speed,
bufferTime: model.points.actions.buffer, bufferTime: model.points.actions.buffer,
hitCount: model.points.actions.hitCount, hitCount: model.points.actions.hitCount,
points: [ points: [
{ { x: model.position[0], y: model.position[1], z: model.position[2], },
x: model.position[0], { x: model.points.actions.start.x, y: 0, z: model.points.actions.start.y, },
y: model.position[1], { x: model.points.actions.end.x, y: 0, z: model.points.actions.end.y, },
z: model.position[2], ],
}, }));
{
x: model.points.actions.start.x,
y: 0,
z: model.points.actions.start.y,
},
{
x: model.points.actions.end.x,
y: 0,
z: model.points.actions.end.y,
},
],
}));
setPathPoints(newPathPoints); setPathPoints(newPathPoints);
} }
}, [simulationStates]); }, [simulationStates]);
return ( return (
<> <>
{pathPoints.map((pair, i) => ( {pathPoints.map((pair, i) => (
<group key={i} visible={!isPlaying}> <group key={i} visible={!isPlaying}>
<PathNavigator <PathNavigator
navMesh={navMesh} navMesh={navMesh}
pathPoints={pair.points} pathPoints={pair.points}
id={pair.modelUuid} id={pair.modelUuid}
speed={pair.modelSpeed} speed={pair.modelSpeed}
bufferTime={pair.bufferTime} globalSpeed={globalSpeed.current}
hitCount={pair.hitCount} bufferTime={pair.bufferTime}
processes={processes} hitCount={pair.hitCount}
agvRef={agvRef} processes={processes}
MaterialRef={MaterialRef} agvRef={agvRef}
/> MaterialRef={MaterialRef}
/>
{pair.points.slice(1).map((point, idx) => ( {pair.points.slice(1).map((point, idx) => (
<mesh position={[point.x, point.y, point.z]} key={idx}> <mesh position={[point.x, point.y, point.z]} key={idx}>
<sphereGeometry args={[0.3, 15, 15]} /> <sphereGeometry args={[0.3, 15, 15]} />
<meshStandardMaterial color="red" /> <meshStandardMaterial color="red" />
</mesh> </mesh>
))} ))}
</group> </group>
))} ))}
</> </>
); );
}; };
export default Agv; export default Agv;

349
app/src/modules/builder/agv/pathNavigator.tsx
View File

@ -3,15 +3,15 @@ import * as THREE from "three";
import { useFrame, useThree } from "@react-three/fiber"; import { useFrame, useThree } from "@react-three/fiber";
import { NavMeshQuery } from "@recast-navigation/core"; import { NavMeshQuery } from "@recast-navigation/core";
import { Line } from "@react-three/drei"; import { Line } from "@react-three/drei";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; import { useAnimationPlaySpeed, usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { usePlayAgv } from "../../../store/store"; import { usePlayAgv } from "../../../store/store";
import crate from "../../../assets/gltf-glb/crate_box.glb";
interface PathNavigatorProps { interface PathNavigatorProps {
navMesh: any; navMesh: any;
pathPoints: any; pathPoints: any;
id: string; id: string;
speed: number; speed: number;
globalSpeed: number,
bufferTime: number; bufferTime: number;
hitCount: number; hitCount: number;
processes: any[]; processes: any[];
@ -31,6 +31,7 @@ export default function PathNavigator({
pathPoints, pathPoints,
id, id,
speed, speed,
globalSpeed,
bufferTime, bufferTime,
hitCount, hitCount,
processes, processes,
@ -38,30 +39,12 @@ export default function PathNavigator({
MaterialRef, MaterialRef,
}: PathNavigatorProps) { }: PathNavigatorProps) {
const [currentPhase, setCurrentPhase] = useState<Phase>("initial"); const [currentPhase, setCurrentPhase] = useState<Phase>("initial");
//
const [path, setPath] = useState<[number, number, number][]>([]); const [path, setPath] = useState<[number, number, number][]>([]);
const PickUpDrop = useRef([]); const [toPickupPath, setToPickupPath] = useState<[number, number, number][]>([]);
const [pickupDropPath, setPickupDropPath] = useState<[number, number, number][]>([]);
// const [currentPhase, setCurrentPhase] = useState<"initial" | "loop">( const [dropPickupPath, setDropPickupPath] = useState<[number, number, number][]>([]);
// "initial" const [initialPosition, setInitialPosition] = useState<THREE.Vector3 | null>(null);
// ); const [initialRotation, setInitialRotation] = useState<THREE.Euler | null>(null);
const [toPickupPath, setToPickupPath] = useState<[number, number, number][]>(
[]
);
const [pickupDropPath, setPickupDropPath] = useState<
[number, number, number][]
>([]);
const [dropPickupPath, setDropPickupPath] = useState<
[number, number, number][]
>([]);
const [initialPosition, setInitialPosition] = useState<THREE.Vector3 | null>(
null
);
const [initialRotation, setInitialRotation] = useState<THREE.Euler | null>(
null
);
const [boxVisible, setBoxVisible] = useState(false); const [boxVisible, setBoxVisible] = useState(false);
const distancesRef = useRef<number[]>([]); const distancesRef = useRef<number[]>([]);
@ -70,11 +53,20 @@ export default function PathNavigator({
const isWaiting = useRef(false); const isWaiting = useRef(false);
const timeoutRef = useRef<NodeJS.Timeout | null>(null); const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const hasStarted = useRef(false); const hasStarted = useRef(false);
const hasReachedPickup = useRef(false);
const { scene } = useThree(); const { scene } = useThree();
const { isPlaying } = usePlayButtonStore(); const { isPlaying } = usePlayButtonStore();
const { PlayAgv, setPlayAgv } = usePlayAgv(); const { PlayAgv, setPlayAgv } = usePlayAgv();
const boxRef = useRef<THREE.Mesh | null>(null);
const baseMaterials = useMemo(() => ({
Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
Crate: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
Default: new THREE.MeshStandardMaterial({ color: 0xcccccc })
}), []);
useEffect(() => { useEffect(() => {
const object = scene.getObjectByProperty("uuid", id); const object = scene.getObjectByProperty("uuid", id);
if (object) { if (object) {
@ -105,12 +97,16 @@ export default function PathNavigator({
setPath([]); setPath([]);
setCurrentPhase("initial"); setCurrentPhase("initial");
setToPickupPath([]);
setPickupDropPath([]); setPickupDropPath([]);
setDropPickupPath([]); setDropPickupPath([]);
setBoxVisible(false);
distancesRef.current = []; distancesRef.current = [];
totalDistanceRef.current = 0; totalDistanceRef.current = 0;
progressRef.current = 0; progressRef.current = 0;
isWaiting.current = false; isWaiting.current = false;
hasStarted.current = false;
hasReachedPickup.current = false;
if (initialPosition && initialRotation) { if (initialPosition && initialRotation) {
const object = scene.getObjectByProperty("uuid", id); const object = scene.getObjectByProperty("uuid", id);
@ -130,27 +126,16 @@ export default function PathNavigator({
const [pickup, drop] = pathPoints.slice(-2); const [pickup, drop] = pathPoints.slice(-2);
PickUpDrop.current = pathPoints.slice(-2);
const object = scene.getObjectByProperty("uuid", id); const object = scene.getObjectByProperty("uuid", id);
if (!object) return; if (!object) return;
const currentPosition = { const currentPosition = object.position;
x: object.position.x,
y: object.position.y,
z: object.position.z,
};
const toPickupPath = computePath(currentPosition, pickup); const toPickupPath = computePath(currentPosition, pickup);
const pickupToDropPath = computePath(pickup, drop); const pickupToDropPath = computePath(pickup, drop);
const dropToPickupPath = computePath(drop, pickup); const dropToPickupPath = computePath(drop, pickup);
if ( if (toPickupPath.length && pickupToDropPath.length && dropToPickupPath.length) {
toPickupPath.length &&
pickupToDropPath.length &&
dropToPickupPath.length
) {
setPickupDropPath(pickupToDropPath); setPickupDropPath(pickupToDropPath);
setDropPickupPath(dropToPickupPath); setDropPickupPath(dropToPickupPath);
setToPickupPath(toPickupPath); setToPickupPath(toPickupPath);
@ -177,25 +162,9 @@ export default function PathNavigator({
isWaiting.current = false; isWaiting.current = false;
}, [path]); }, [path]);
// Add these refs outside the useFrame if not already present: function logAgvStatus(id: string, status: string) {
const startPointReached = useRef(false); // console.log(`AGV ${id}: ${status}`);
}
const baseMaterials = useMemo(
() => ({
Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
Crate: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
// Default: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
Default: new THREE.MeshStandardMaterial(),
}),
[]
);
// Example usage:
const targetModelUUID = id; // Replace with your target ID
const matchedProcess = findProcessByTargetModelUUID(
processes,
targetModelUUID
);
function findProcessByTargetModelUUID(processes: any, targetModelUUID: any) { function findProcessByTargetModelUUID(processes: any, targetModelUUID: any) {
for (const process of processes) { for (const process of processes) {
@ -206,75 +175,55 @@ export default function PathNavigator({
(target: any) => target.modelUUID === targetModelUUID (target: any) => target.modelUUID === targetModelUUID
) )
) { ) {
// return process.id;
return process.id; // Return the process if a match is found
} }
} }
} }
} }
return null; // Return null if no match is found return null;
} }
useFrame((_, delta) => {});
const boxRef = useRef<THREE.Mesh | null>(null);
useEffect(() => { useEffect(() => {
if (!scene || !boxRef || !processes) return; if (!scene || !boxRef || !processes || !MaterialRef.current) return;
// 1. Find the existing object by UUID
const existingObject = scene.getObjectByProperty("uuid", id); const existingObject = scene.getObjectByProperty("uuid", id);
if (!existingObject) return; if (!existingObject) return;
// 2. Find the process that targets this object's modelUUID if (boxRef.current?.parent) {
boxRef.current.parent.remove(boxRef.current);
boxRef.current = null;
}
if (boxVisible) { if (boxVisible) {
const matchedProcess = findProcessByTargetModelUUID(processes, id); const matchedProcess = findProcessByTargetModelUUID(processes, id);
let materialType: "Box" | "Crate" | "Default" = "Default";
// 3. Determine the material (from materialref) if a process is matched
let materialType = "Default";
if (matchedProcess) { if (matchedProcess) {
const materialEntry = MaterialRef.current.find((item: any) => const materialEntry = MaterialRef.current.find((item: any) =>
item.objects.some((obj: any) => obj.processId === matchedProcess) item.objects.some((obj: any) => obj.processId === matchedProcess)
); );
console.log("materialEntry: ", materialEntry);
if (materialEntry) { if (materialEntry) {
materialType = materialEntry.material; // "Box" or "Crate" materialType = materialEntry.material;
} }
} }
// 4. Create the box mesh with the assigned material
const boxGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); const boxGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
const boxMaterial = baseMaterials[materialType as MaterialType]; const boxMesh = new THREE.Mesh(boxGeometry, baseMaterials[materialType]);
const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
boxMesh.position.y = 1; boxMesh.position.y = 1;
boxMesh.name = `box-${id}`; boxMesh.name = `box-${id}`;
// 5. Add to scene and cleanup
existingObject.add(boxMesh); existingObject.add(boxMesh);
boxRef.current = boxMesh; boxRef.current = boxMesh;
} }
if (!startPointReached.current && boxVisible) {
setBoxVisible(false);
}
return () => { return () => {
if (boxRef.current?.parent) { if (boxRef.current?.parent) {
boxRef.current.parent.remove(boxRef.current); boxRef.current.parent.remove(boxRef.current);
} }
boxRef.current = null;
}; };
}, [ }, [processes, MaterialRef, boxVisible, scene, id, baseMaterials]);
processes,
MaterialRef,
boxVisible,
findProcessByTargetModelUUID,
startPointReached,
]);
useFrame((_, delta) => { useFrame((_, delta) => {
const currentAgv = (agvRef.current || []).find( const currentAgv = (agvRef.current || []).find((agv: AGVData) => agv.vehicleId === id);
(agv: AGVData) => agv.vehicleId === id
);
if (!scene || !id || !isPlaying) return; if (!scene || !id || !isPlaying) return;
@ -283,7 +232,6 @@ export default function PathNavigator({
if (isPlaying && !hasStarted.current) { if (isPlaying && !hasStarted.current) {
hasStarted.current = false; hasStarted.current = false;
startPointReached.current = false;
progressRef.current = 0; progressRef.current = 0;
isWaiting.current = false; isWaiting.current = false;
if (timeoutRef.current) { if (timeoutRef.current) {
@ -295,10 +243,9 @@ export default function PathNavigator({
const isAgvReady = () => { const isAgvReady = () => {
if (!agvRef.current || agvRef.current.length === 0) return false; if (!agvRef.current || agvRef.current.length === 0) return false;
if (!currentAgv) return false; if (!currentAgv) return false;
return hitCount === currentAgv.expectedHitCount; return currentAgv.isActive && hitCount >= currentAgv.maxHitCount;
}; };
// Step 1: Snap to start point on first play
if (isPlaying && !hasStarted.current && toPickupPath.length > 0) { if (isPlaying && !hasStarted.current && toPickupPath.length > 0) {
setBoxVisible(false); setBoxVisible(false);
const startPoint = new THREE.Vector3(...toPickupPath[0]); const startPoint = new THREE.Vector3(...toPickupPath[0]);
@ -311,146 +258,132 @@ export default function PathNavigator({
} }
hasStarted.current = true; hasStarted.current = true;
startPointReached.current = true;
progressRef.current = 0; progressRef.current = 0;
hasReachedPickup.current = false;
setToPickupPath(toPickupPath.slice(-1)); setToPickupPath(toPickupPath.slice(-1));
logAgvStatus(id, "Started from station, heading to pickup");
return; return;
} }
// Step 2: Wait at start point for AGV readiness if (isPlaying && currentPhase === "initial" && !hasReachedPickup.current) {
if (isPlaying && startPointReached.current && path.length === 0) { const reached = moveAlongPath(object, path, distancesRef.current, speed, delta, progressRef);
if (!isAgvReady()) {
return; // Prevent transitioning to the next phase if AGV is not ready if (reached) {
hasReachedPickup.current = true;
if (currentAgv) {
currentAgv.status = 'picking';
}
logAgvStatus(id, "Reached pickup point, Waiting for material");
} }
setBoxVisible(true);
setPath([...toPickupPath]); // Start path transition once the AGV is ready
setCurrentPhase("toDrop");
progressRef.current = 0;
console.log("startPointReached: ", startPointReached.current);
startPointReached.current = false;
return; return;
} }
if (path.length < 2) return; if (isPlaying && currentAgv?.isActive && currentPhase === "initial") {
if (!isAgvReady()) return;
setTimeout(() => {
setBoxVisible(true);
setPath([...pickupDropPath]);
setCurrentPhase("toDrop");
progressRef.current = 0;
logAgvStatus(id, "Started from pickup point, heading to drop point");
if (currentAgv) {
currentAgv.status = 'toDrop';
}
}, 0)
return;
}
progressRef.current += delta * speed; if (isPlaying && currentPhase === "toDrop") {
const reached = moveAlongPath(object, path, distancesRef.current, speed, delta, progressRef);
if (reached && !isWaiting.current) {
isWaiting.current = true;
logAgvStatus(id, "Reached drop point");
if (currentAgv) {
currentAgv.status = 'droping';
}
timeoutRef.current = setTimeout(() => {
setPath([...dropPickupPath]);
setCurrentPhase("toPickup");
progressRef.current = 0;
isWaiting.current = false;
setBoxVisible(false);
if (currentAgv) {
currentAgv.status = 'toPickup';
}
logAgvStatus(id, "Started from droping point, heading to pickup point");
}, bufferTime * 1000);
}
return;
}
if (isPlaying && currentPhase === "toPickup") {
const reached = moveAlongPath(object, path, distancesRef.current, speed, delta, progressRef);
if (reached) {
if (currentAgv) {
currentAgv.isActive = false;
}
setCurrentPhase("initial");
if (currentAgv) {
currentAgv.status = 'picking';
}
logAgvStatus(id, "Reached pickup point again, cycle complete");
}
return;
}
moveAlongPath(object, path, distancesRef.current, speed, delta, progressRef);
});
function moveAlongPath(
object: THREE.Object3D,
path: [number, number, number][],
distances: number[],
speed: number,
delta: number,
progressRef: React.MutableRefObject<number>
): boolean {
if (path.length < 2) return false;
progressRef.current += delta * (speed * globalSpeed);
let covered = progressRef.current; let covered = progressRef.current;
let accumulated = 0; let accumulated = 0;
let index = 0; let index = 0;
if (distancesRef.current.length !== path.length - 1) { for (; index < distances.length; index++) {
distancesRef.current = []; const dist = distances[index];
totalDistanceRef.current = 0; if (accumulated + dist >= covered) break;
accumulated += dist;
}
for (let i = 0; i < path.length - 1; i++) { if (index >= path.length - 1) {
const start = new THREE.Vector3(...path[i]); if (path.length > 1) {
const end = new THREE.Vector3(...path[i + 1]); const lastDirection = new THREE.Vector3(...path[path.length - 1])
const distance = start.distanceTo(end); .sub(new THREE.Vector3(...path[path.length - 2]))
distancesRef.current.push(distance); .normalize();
totalDistanceRef.current += distance; object.rotation.y = Math.atan2(lastDirection.x, lastDirection.z);
} }
return true;
} }
while (
index < distancesRef.current.length &&
covered > accumulated + distancesRef.current[index]
) {
accumulated += distancesRef.current[index];
index++;
}
// AGV has completed its path
if (index >= distancesRef.current.length) {
progressRef.current = totalDistanceRef.current;
timeoutRef.current = setTimeout(() => {
if (!isAgvReady()) {
isWaiting.current = false;
return;
}
let nextPath = [];
let nextPhase = currentPhase;
if (currentPhase === "toDrop") {
nextPath = dropPickupPath;
nextPhase = "toPickup";
setBoxVisible(false);
} else if (currentPhase === "toPickup") {
// When returning to start point (toPickup phase completed)
// Set position to toPickupPath[1] instead of [0]
if (toPickupPath.length > 1) {
object.position.copy(new THREE.Vector3(...toPickupPath[1]));
// Also set rotation towards the next point if available
if (toPickupPath.length > 2) {
const nextPoint = new THREE.Vector3(...toPickupPath[2]);
const direction = nextPoint
.clone()
.sub(object.position)
.normalize();
object.rotation.y = Math.atan2(direction.x, direction.z);
}
}
// Reset the path and mark start point as reached
setPath([]);
startPointReached.current = true;
progressRef.current = 0;
distancesRef.current = [];
// Stop the AGV by setting isplaying to false
if (currentAgv) {
currentAgv.isplaying = false;
}
// Clear timeout and return to prevent further movement
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
timeoutRef.current = null;
}
return;
} else {
nextPath = pickupDropPath;
nextPhase = "toDrop";
setBoxVisible(true);
}
setPath([...nextPath]);
setCurrentPhase(nextPhase);
progressRef.current = 0;
isWaiting.current = false;
distancesRef.current = [];
// Reset hit count for the next cycle
if (agvRef.current) {
agvRef.current = agvRef.current.map((agv: AGVData) =>
agv.vehicleId === id ? { ...agv, hitCount: 0 } : agv
);
}
}, bufferTime * 1000);
return;
}
// Step 4: Interpolate position and rotation
const start = new THREE.Vector3(...path[index]); const start = new THREE.Vector3(...path[index]);
const end = new THREE.Vector3(...path[index + 1]); const end = new THREE.Vector3(...path[index + 1]);
const dist = distancesRef.current[index]; const dist = distances[index];
if (!dist || dist === 0) return;
const t = THREE.MathUtils.clamp((covered - accumulated) / dist, 0, 1); const t = THREE.MathUtils.clamp((covered - accumulated) / dist, 0, 1);
object.position.copy(start.clone().lerp(end, t)); object.position.copy(start.clone().lerp(end, t));
const direction = new THREE.Vector3().subVectors(end, start).normalize(); if (dist > 0.1) {
object.rotation.y = Math.atan2(direction.x, direction.z); const targetDirection = end.clone().sub(start).normalize();
}); const targetRotationY = Math.atan2(targetDirection.x, targetDirection.z);
const rotationSpeed = Math.min(5 * delta, 1);
object.rotation.y = THREE.MathUtils.lerp(object.rotation.y, targetRotationY, rotationSpeed);
}
return false;
}
useEffect(() => { useEffect(() => {
return () => { return () => {

33
app/src/modules/builder/groups/zoneGroup.tsx
View File

@ -50,39 +50,26 @@ const ZoneGroup: React.FC = () => {
new THREE.ShaderMaterial({ new THREE.ShaderMaterial({
side: THREE.DoubleSide, side: THREE.DoubleSide,
vertexShader: ` vertexShader: `
varying vec2 vUv; varying vec2 vUv;
void main() { void main(){
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
} vUv = uv;
}
`, `,
fragmentShader: ` fragmentShader: `
varying vec2 vUv; varying vec2 vUv;
uniform vec3 uColor; uniform vec3 uColor;
void main(){
// Simple function for stripes
float stripePattern(vec2 uv, float thickness) {
return step(0.5, abs(sin((uv.x + uv.y) * 40.0)) - thickness);
}
void main() {
float alpha = 1.0 - vUv.y; float alpha = 1.0 - vUv.y;
gl_FragColor = vec4(uColor, alpha);
// Stripe pattern }
float stripes = stripePattern(vUv, 0.3);
vec3 color = uColor * 1.5; // brighten the color
gl_FragColor = vec4(color, alpha * stripes);
}
`, `,
uniforms: { uniforms: {
uColor: { value: new THREE.Color(CONSTANTS.zoneConfig.color) }, uColor: { value: new THREE.Color(CONSTANTS.zoneConfig.color) },
}, },
transparent: true, transparent: true,
depthWrite: false, depthWrite: false,
}), }), []);
[]
);
useEffect(() => { useEffect(() => {
const fetchZones = async () => { const fetchZones = async () => {

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

@ -20,7 +20,6 @@ async function loadInitialFloorItems(
const organization = (email!.split("@")[1]).split(".")[0]; const organization = (email!.split("@")[1]).split(".")[0];
const items = await getFloorAssets(organization); const items = await getFloorAssets(organization);
console.log('items: ', items);
localStorage.setItem("FloorItems", JSON.stringify(items)); localStorage.setItem("FloorItems", JSON.stringify(items));
await initializeDB(); await initializeDB();

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

@ -14,7 +14,6 @@ import CopyPasteControls from "./copyPasteControls";
import MoveControls from "./moveControls"; import MoveControls from "./moveControls";
import RotateControls from "./rotateControls"; import RotateControls from "./rotateControls";
import useModuleStore from "../../../../store/useModuleStore"; import useModuleStore from "../../../../store/useModuleStore";
import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
const SelectionControls: React.FC = () => { const SelectionControls: React.FC = () => {
const { camera, controls, gl, scene, pointer } = useThree(); const { camera, controls, gl, scene, pointer } = useThree();
@ -102,13 +101,12 @@ const SelectionControls: React.FC = () => {
}; };
const onKeyDown = (event: KeyboardEvent) => { const onKeyDown = (event: KeyboardEvent) => {
const keyCombination = detectModifierKeys(event);
if (movedObjects.length > 0 || rotatedObjects.length > 0) return; if (movedObjects.length > 0 || rotatedObjects.length > 0) return;
if (keyCombination === "ESCAPE") { if (event.key.toLowerCase() === "escape") {
event.preventDefault(); event.preventDefault();
clearSelection(); clearSelection();
} }
if (keyCombination === "DELETE") { if (event.key.toLowerCase() === "delete") {
event.preventDefault(); event.preventDefault();
deleteSelection(); deleteSelection();
} }

121
app/src/modules/simulation/process/processAnimator.tsx
View File

@ -26,6 +26,7 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
}) => { }) => {
const gltf = useLoader(GLTFLoader, crate) as GLTF; const gltf = useLoader(GLTFLoader, crate) as GLTF;
const groupRef = useRef<THREE.Group>(null); const groupRef = useRef<THREE.Group>(null);
const tempStackedObjectsRef = useRef<Record<string, boolean>>({});
const { const {
animationStates, animationStates,
@ -43,27 +44,19 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
checkAndCountTriggers, checkAndCountTriggers,
} = useProcessAnimation(processes, setProcesses, agvRef); } = useProcessAnimation(processes, setProcesses, agvRef);
const baseMaterials = useMemo( const baseMaterials = useMemo(() => ({
() => ({ Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
Box: new THREE.MeshStandardMaterial({ color: 0x8b4513 }), Crate: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
Crate: new THREE.MeshStandardMaterial({ color: 0x00ff00 }), Default: new THREE.MeshStandardMaterial(),
// Default: new THREE.MeshStandardMaterial({ color: 0x00ff00 }), }), []);
Default: new THREE.MeshStandardMaterial(),
}),
[]
);
useEffect(() => { useEffect(() => {
// Update material references for all spawned objects // Update material references for all spawned objects
Object.entries(animationStates).forEach(([processId, processState]) => { Object.entries(animationStates).forEach(([processId, processState]) => {
Object.keys(processState.spawnedObjects).forEach((objectId) => { Object.keys(processState.spawnedObjects).forEach((objectId) => {
const entry = { const entry = { processId, objectId, };
processId,
objectId,
};
const materialType = const materialType = processState.spawnedObjects[objectId]?.currentMaterialType;
processState.spawnedObjects[objectId]?.currentMaterialType;
if (!materialType) { if (!materialType) {
return; return;
@ -72,17 +65,13 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
const matRefArray = MaterialRef.current; const matRefArray = MaterialRef.current;
// Find existing material group // Find existing material group
const existing = matRefArray.find( const existing = matRefArray.find((entryGroup: { material: string; objects: any[] }) =>
(entryGroup: { material: string; objects: any[] }) => entryGroup.material === materialType
entryGroup.material === materialType
); );
if (existing) { if (existing) {
// Check if this processId + objectId already exists // Check if this processId + objectId already exists
const alreadyExists = existing.objects.some( const alreadyExists = existing.objects.some((o: any) => o.processId === entry.processId && o.objectId === entry.objectId);
(o: any) =>
o.processId === entry.processId && o.objectId === entry.objectId
);
if (!alreadyExists) { if (!alreadyExists) {
existing.objects.push(entry); existing.objects.push(entry);
@ -102,8 +91,7 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
useFrame(() => { useFrame(() => {
// Spawn logic frame // Spawn logic frame
const currentTime = const currentTime = clockRef.current.getElapsedTime() - elapsedBeforePauseRef.current;
clockRef.current.getElapsedTime() - elapsedBeforePauseRef.current;
setAnimationStates((prev) => { setAnimationStates((prev) => {
const newStates = { ...prev }; const newStates = { ...prev };
@ -131,10 +119,7 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
: parseFloat(spawnAction.spawnInterval as string) || 0; : parseFloat(spawnAction.spawnInterval as string) || 0;
// Check if this is a zero interval spawn and we already spawned an object // Check if this is a zero interval spawn and we already spawned an object
if ( if (spawnInterval === 0 && processState.hasSpawnedZeroIntervalObject === true) {
spawnInterval === 0 &&
processState.hasSpawnedZeroIntervalObject === true
) {
return; // Don't spawn more objects for zero interval return; // Don't spawn more objects for zero interval
} }
@ -312,35 +297,87 @@ const ProcessAnimator: React.FC<ProcessContainerProps> = ({
// } // }
// } // }
// if (isLastPoint) {
// if (currentPointData?.actions) {
// const hasNonInherit = hasNonInheritActions(
// currentPointData.actions
// );
// if (!hasNonInherit) {
// // Remove the object if all actions are inherit
// updatedObjects[objectId] = {
// ...obj,
// visible: false,
// state: { ...stateRef, isAnimating: false },
// };
// return;
// }
// } else {
// // No actions at last point - remove the object
// updatedObjects[objectId] = {
// ...obj,
// visible: false,
// state: { ...stateRef, isAnimating: false },
// };
// return;
// }
// }
if (isLastPoint) { if (isLastPoint) {
if (currentPointData?.actions) { const isAgvPicking = agvRef.current.some(
const hasNonInherit = hasNonInheritActions( (agv: any) => agv.processId === process.id && agv.status === "picking"
currentPointData.actions );
);
if (!hasNonInherit) { const shouldHide = !currentPointData?.actions || !hasNonInheritActions(currentPointData.actions);
// Remove the object if all actions are inherit
if (shouldHide) {
if (isAgvPicking) {
updatedObjects[objectId] = { updatedObjects[objectId] = {
...obj, ...obj,
visible: false, visible: false,
state: { ...stateRef, isAnimating: false }, state: {
...stateRef,
isAnimating: false,
},
};
} else {
tempStackedObjectsRef.current[objectId] = true;
updatedObjects[objectId] = {
...obj,
visible: true,
state: {
...stateRef,
isAnimating: true,
},
}; };
return;
} }
} else {
// No actions at last point - remove the object return;
}
}
if (tempStackedObjectsRef.current[objectId]) {
const isAgvPicking = agvRef.current.some(
(agv: any) => agv.processId === process.id && agv.status === "picking"
);
if (isAgvPicking) {
delete tempStackedObjectsRef.current[objectId];
updatedObjects[objectId] = { updatedObjects[objectId] = {
...obj, ...obj,
visible: false, visible: false,
state: { ...stateRef, isAnimating: false }, state: {
...stateRef,
isAnimating: false,
},
}; };
return;
} }
} }
if (!isLastPoint) { if (!isLastPoint) {
const nextPoint = path[nextPointIdx]; const nextPoint = path[nextPointIdx];
const distance = const distance = path[stateRef.currentIndex].distanceTo(nextPoint);
path[stateRef.currentIndex].distanceTo(nextPoint);
const effectiveSpeed = stateRef.speed * speedRef.current; const effectiveSpeed = stateRef.speed * speedRef.current;
const movement = effectiveSpeed * delta; const movement = effectiveSpeed * delta;

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

@ -57,7 +57,7 @@
// pointActions: PointAction[][]; // pointActions: PointAction[][];
// pointTriggers: PointTrigger[][]; // pointTriggers: PointTrigger[][];
// speed: number; // speed: number;
// isplaying: boolean; // isActive: boolean;
// } // }
// interface ProcessCreatorProps { // interface ProcessCreatorProps {
@ -147,7 +147,7 @@
// pointActions: [], // pointActions: [],
// pointTriggers: [], // Added point triggers array // pointTriggers: [], // Added point triggers array
// speed: 1, // speed: 1,
// isplaying: false, // isActive: false,
// }); // });
// // Enhanced connection checking function // // Enhanced connection checking function
@ -283,7 +283,7 @@
// pointActions, // pointActions,
// pointTriggers, // pointTriggers,
// speed: processSpeed, // speed: processSpeed,
// isplaying: false, // isActive: false,
// }; // };
// }, // },
// [scene] // [scene]
@ -410,7 +410,7 @@
// p.connections.targets.map((t: { modelUUID: string }) => t.modelUUID) // p.connections.targets.map((t: { modelUUID: string }) => t.modelUUID)
// ) // )
// .join(","), // .join(","),
// isplaying: false, // isActive: false,
// })); // }));
// }, [convertedPaths]); // }, [convertedPaths]);
@ -459,6 +459,7 @@ import {
ConveyorEventsSchema, ConveyorEventsSchema,
VehicleEventsSchema, VehicleEventsSchema,
} from "../../../types/world/worldTypes"; } from "../../../types/world/worldTypes";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
// Type definitions // Type definitions
export interface PointAction { export interface PointAction {
@ -495,7 +496,7 @@ export interface SimulationPath {
points: PathPoint[]; points: PathPoint[];
pathPosition: [number, number, number]; pathPosition: [number, number, number];
speed?: number; speed?: number;
isplaying: boolean; isActive: boolean;
} }
export interface Process { export interface Process {
@ -505,7 +506,7 @@ export interface Process {
pointActions: PointAction[][]; pointActions: PointAction[][];
pointTriggers: PointTrigger[][]; pointTriggers: PointTrigger[][];
speed: number; speed: number;
isplaying: boolean; isActive: boolean;
} }
interface ProcessCreatorProps { interface ProcessCreatorProps {
@ -538,13 +539,13 @@ function convertToSimulationPath(
actions: Array.isArray(point.actions) actions: Array.isArray(point.actions)
? point.actions.map(normalizeAction) ? point.actions.map(normalizeAction)
: point.actions : point.actions
? [normalizeAction(point.actions)] ? [normalizeAction(point.actions)]
: [], : [],
triggers: Array.isArray(point.triggers) triggers: Array.isArray(point.triggers)
? point.triggers.map(normalizeTrigger) ? point.triggers.map(normalizeTrigger)
: point.triggers : point.triggers
? [normalizeTrigger(point.triggers)] ? [normalizeTrigger(point.triggers)]
: [], : [],
connections: { connections: {
targets: point.connections.targets.map((target) => ({ targets: point.connections.targets.map((target) => ({
modelUUID: target.modelUUID, modelUUID: target.modelUUID,
@ -556,7 +557,7 @@ function convertToSimulationPath(
typeof path.speed === "string" typeof path.speed === "string"
? parseFloat(path.speed) || 1 ? parseFloat(path.speed) || 1
: path.speed || 1, : path.speed || 1,
isplaying: false, // Added missing property isActive: false, // Added missing property
}; };
} else { } else {
// For vehicle paths, handle the case where triggers might not exist // For vehicle paths, handle the case where triggers might not exist
@ -570,8 +571,8 @@ function convertToSimulationPath(
actions: Array.isArray(path.points.actions) actions: Array.isArray(path.points.actions)
? path.points.actions.map(normalizeAction) ? path.points.actions.map(normalizeAction)
: path.points.actions : path.points.actions
? [normalizeAction(path.points.actions)] ? [normalizeAction(path.points.actions)]
: [], : [],
triggers: [], triggers: [],
connections: { connections: {
targets: path.points.connections.targets.map((target) => ({ targets: path.points.connections.targets.map((target) => ({
@ -582,7 +583,7 @@ function convertToSimulationPath(
], ],
pathPosition: path.position, pathPosition: path.position,
speed: path.points.speed || 1, speed: path.points.speed || 1,
isplaying: false, isActive: false,
}; };
} }
} }
@ -595,7 +596,7 @@ const createEmptyProcess = (): Process => ({
pointActions: [], pointActions: [],
pointTriggers: [], // Added point triggers array pointTriggers: [], // Added point triggers array
speed: 1, speed: 1,
isplaying: false, isActive: false,
}); });
// Enhanced connection checking function // Enhanced connection checking function
@ -731,7 +732,7 @@ export function useProcessCreation() {
pointActions, pointActions,
pointTriggers, pointTriggers,
speed: processSpeed, speed: processSpeed,
isplaying: false, isActive: false,
}; };
}, },
[scene] [scene]
@ -824,6 +825,7 @@ const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
const { createProcessesFromPaths } = useProcessCreation(); const { createProcessesFromPaths } = useProcessCreation();
const prevPathsRef = useRef<SimulationPath[]>([]); const prevPathsRef = useRef<SimulationPath[]>([]);
const prevProcessesRef = useRef<Process[]>([]); const prevProcessesRef = useRef<Process[]>([]);
const { isPlaying } = usePlayButtonStore();
const convertedPaths = useMemo((): SimulationPath[] => { const convertedPaths = useMemo((): SimulationPath[] => {
if (!simulationStates) return []; if (!simulationStates) return [];
@ -858,7 +860,7 @@ const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
p.connections.targets.map((t: { modelUUID: string }) => t.modelUUID) p.connections.targets.map((t: { modelUUID: string }) => t.modelUUID)
) )
.join(","), .join(","),
isplaying: false, isActive: false,
})); }));
}, [convertedPaths]); }, [convertedPaths]);

2
app/src/modules/simulation/process/types.ts
View File

@ -39,7 +39,7 @@ export interface ProcessPath {
pathRotation: number[]; pathRotation: number[];
speed: number; speed: number;
type: "Conveyor" | "Vehicle"; type: "Conveyor" | "Vehicle";
isplaying: boolean isActive: boolean
} }
export interface ProcessData { export interface ProcessData {

1027
app/src/modules/simulation/process/useProcessAnimations.tsx
View File

File diff suppressed because it is too large Load Diff

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

@ -15,7 +15,6 @@ import Agv from "../builder/agv/agv";
function Simulation() { function Simulation() {
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const pathsGroupRef = useRef() as React.MutableRefObject<THREE.Group>; const pathsGroupRef = useRef() as React.MutableRefObject<THREE.Group>;
const { simulationStates, setSimulationStates } = useSimulationStates();
const [processes, setProcesses] = useState<any[]>([]); const [processes, setProcesses] = useState<any[]>([]);
const agvRef = useRef([]); const agvRef = useRef([]);
const MaterialRef = useRef([]); const MaterialRef = useRef([]);

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

@ -102,6 +102,7 @@ const RealTimeVisulization: React.FC = () => {
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
try { try {
const response = await getZone2dData(organization); const response = await getZone2dData(organization);
// console.log('response: ', response);
if (!Array.isArray(response)) { if (!Array.isArray(response)) {
return; return;
@ -319,7 +320,6 @@ const RealTimeVisulization: React.FC = () => {
"Horizontal Move", "Horizontal Move",
"RotateX", "RotateX",
"RotateY", "RotateY",
"RotateZ",
"Delete", "Delete",
]} ]}
/> />

12
app/src/modules/visualization/template/Templates.tsx
View File

@ -1,11 +1,13 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
import useTemplateStore from "../../../store/useTemplateStore"; import useTemplateStore from "../../../store/useTemplateStore";
import { useSelectedZoneStore } from "../../../store/useZoneStore"; import { useSelectedZoneStore } from "../../../store/useZoneStore";
import { getTemplateData } from "../../../services/realTimeVisulization/zoneData/getTemplate";
import { useSocketStore } from "../../../store/store"; import { useSocketStore } from "../../../store/store";
import { getTemplateData } from "../../../services/realTimeVisulization/zoneData/getTemplate";
import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
import RenameInput from "../../../components/ui/inputs/RenameInput"; import RenameInput from "../../../components/ui/inputs/RenameInput";
const Templates = () => { const Templates = () => {
const { templates, removeTemplate, setTemplates } = useTemplateStore(); const { templates, removeTemplate, setTemplates } = useTemplateStore();
const { setSelectedZone, selectedZone } = useSelectedZoneStore(); const { setSelectedZone, selectedZone } = useSelectedZoneStore();
@ -90,15 +92,15 @@ const Templates = () => {
}; };
return ( return (
<div className="template-list widgets-wrapper"> <div className="template-list">
{templates.map((template, index) => ( {templates.map((template, index) => (
<div <div
key={template.id} key={template.id}
className="template-item" className="template-item"
onClick={() => handleLoadTemplate(template)}
> >
{template?.snapshot && ( {template?.snapshot && (
<div className="template-image-container"> <div className="template-image-container" onClick={() => handleLoadTemplate(template)}>
<img <img
src={template.snapshot} src={template.snapshot}
alt={`${template.name} preview`} alt={`${template.name} preview`}

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

@ -19,6 +19,7 @@ import { useClickOutside } from "../../functions/handleWidgetsOuterClick";
import { useSocketStore } from "../../../../store/store"; import { useSocketStore } from "../../../../store/store";
import { usePlayButtonStore } from "../../../../store/usePlayButtonStore"; import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
import OuterClick from "../../../../utils/outerClick"; import OuterClick from "../../../../utils/outerClick";
import useChartStore from "../../../../store/useChartStore";
type Side = "top" | "bottom" | "left" | "right"; type Side = "top" | "bottom" | "left" | "right";
@ -81,6 +82,16 @@ export const DraggableWidget = ({
const [panelDimensions, setPanelDimensions] = useState<{ const [panelDimensions, setPanelDimensions] = useState<{
[side in Side]?: { width: number; height: number }; [side in Side]?: { width: number; height: number };
}>({}); }>({});
const { measurements, duration, name } = useChartStore();
const { isPlaying } = usePlayButtonStore();
const [canvasDimensions, setCanvasDimensions] = useState({
width: 0,
height: 0,
});
useEffect(() => {
console.log("changes loggggg", measurements, duration, name);
}, [measurements, duration, name])
const handlePointerDown = () => { const handlePointerDown = () => {
if (selectedChartId?.id !== widget.id) { if (selectedChartId?.id !== widget.id) {
setSelectedChartId(widget); setSelectedChartId(widget);
@ -128,40 +139,50 @@ export const DraggableWidget = ({
} }
}; };
// Calculate panel size
const panelSize = Math.max(
Math.min(canvasDimensions.width * 0.25, canvasDimensions.height * 0.25),
170 // Min 170px
);
const getCurrentWidgetCount = (panel: Side) => const getCurrentWidgetCount = (panel: Side) =>
selectedZone.widgets.filter((w) => w.panel === panel).length; selectedZone.widgets.filter((w) => w.panel === panel).length;
// Calculate panel capacity
const calculatePanelCapacity = (panel: Side) => { const calculatePanelCapacity = (panel: Side) => {
const CHART_WIDTH = 150; const CHART_WIDTH = panelSize;
const CHART_HEIGHT = 150; const CHART_HEIGHT = panelSize;
const FALLBACK_HORIZONTAL_CAPACITY = 5;
const FALLBACK_VERTICAL_CAPACITY = 3;
const dimensions = panelDimensions[panel]; const dimensions = panelDimensions[panel];
if (!dimensions) { if (!dimensions) {
return panel === "top" || panel === "bottom" return panel === "top" || panel === "bottom" ? 5 : 3; // Fallback capacities
? FALLBACK_HORIZONTAL_CAPACITY
: FALLBACK_VERTICAL_CAPACITY;
} }
return panel === "top" || panel === "bottom" return panel === "top" || panel === "bottom"
? Math.floor(dimensions.width / CHART_WIDTH) ? Math.max(1, Math.floor(dimensions.width / CHART_WIDTH))
: Math.floor(dimensions.height / CHART_HEIGHT); : Math.max(1, Math.floor(dimensions.height / CHART_HEIGHT));
}; };
const isPanelFull = (panel: Side) => { const isPanelFull = (panel: Side) => {
const currentWidgetCount = getCurrentWidgetCount(panel); const currentWidgetCount = getCurrentWidgetCount(panel);
const panelCapacity = calculatePanelCapacity(panel); const panelCapacity = calculatePanelCapacity(panel);
return currentWidgetCount >= panelCapacity;
return currentWidgetCount > panelCapacity;
}; };
const duplicateWidget = async () => { const duplicateWidget = async () => {
try { try {
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
console.log("widget data sent", widget);
const duplicatedWidget: Widget = { const duplicatedWidget: Widget = {
...widget, ...widget,
Data: {
duration: duration,
measurements: { ...measurements }
},
id: `${widget.id}-copy-${Date.now()}`, id: `${widget.id}-copy-${Date.now()}`,
}; };
console.log("duplicatedWidget: ", duplicatedWidget); console.log("duplicatedWidget: ", duplicatedWidget);
@ -172,6 +193,8 @@ export const DraggableWidget = ({
widget: duplicatedWidget, widget: duplicatedWidget,
}; };
if (visualizationSocket) { if (visualizationSocket) {
console.log("duplecate widget", duplicateWidget);
visualizationSocket.emit("v2:viz-widget:add", duplicateWidget); visualizationSocket.emit("v2:viz-widget:add", duplicateWidget);
} }
setSelectedZone((prevZone: any) => ({ setSelectedZone((prevZone: any) => ({
@ -244,12 +267,7 @@ export const DraggableWidget = ({
// useClickOutside(chartWidget, () => { // useClickOutside(chartWidget, () => {
// setSelectedChartId(null); // setSelectedChartId(null);
// }); // });
const { isPlaying } = usePlayButtonStore();
const [canvasDimensions, setCanvasDimensions] = useState({
width: 0,
height: 0,
});
// Track canvas dimensions // Track canvas dimensions
// Current: Two identical useEffect hooks for canvas dimensions // Current: Two identical useEffect hooks for canvas dimensions
@ -287,9 +305,8 @@ export const DraggableWidget = ({
<div <div
draggable draggable
key={widget.id} key={widget.id}
className={`chart-container ${ className={`chart-container ${selectedChartId?.id === widget.id && !isPlaying && "activeChart"
selectedChartId?.id === widget.id && !isPlaying && "activeChart" }`}
}`}
onPointerDown={handlePointerDown} onPointerDown={handlePointerDown}
onDragStart={handleDragStart} onDragStart={handleDragStart}
onDragEnter={handleDragEnter} onDragEnter={handleDragEnter}
@ -315,10 +332,9 @@ export const DraggableWidget = ({
{openKebabId === widget.id && ( {openKebabId === widget.id && (
<div className="kebab-options" ref={widgetRef}> <div className="kebab-options" ref={widgetRef}>
<div <div
className={`edit btn ${ className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""
isPanelFull(widget.panel) ? "btn-blur" : "" }`}
}`} onClick={duplicateWidget}
onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
> >
<div className="icon"> <div className="icon">
<DublicateIcon /> <DublicateIcon />

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

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

326
app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
View File

@ -13,6 +13,8 @@ import ProductionCapacity from "./cards/ProductionCapacity";
import ReturnOfInvestment from "./cards/ReturnOfInvestment"; import ReturnOfInvestment from "./cards/ReturnOfInvestment";
import StateWorking from "./cards/StateWorking"; import StateWorking from "./cards/StateWorking";
import Throughput from "./cards/Throughput"; import Throughput from "./cards/Throughput";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import useChartStore from "../../../../store/useChartStore";
@ -45,10 +47,14 @@ export default function Dropped3dWidgets() {
const planeIntersect = useRef(new THREE.Vector3()); const planeIntersect = useRef(new THREE.Vector3());
const rotationStartRef = useRef<[number, number, number]>([0, 0, 0]); const rotationStartRef = useRef<[number, number, number]>([0, 0, 0]);
const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 }); const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
const { setSelectedChartId } = useWidgetStore();
const { measurements, duration} = useChartStore();
let [floorPlanesVertical, setFloorPlanesVertical] = useState( let [floorPlanesVertical, setFloorPlanesVertical] = useState(
new THREE.Plane(new THREE.Vector3(0, 1, 0)) new THREE.Plane(new THREE.Vector3(0, 1, 0))
); );
const [intersectcontextmenu, setintersectcontextmenu] = useState<number | undefined>();
const [horizontalX, setHorizontalX] = useState<number | undefined>();
const [horizontalZ, setHorizontalZ] = useState<number | undefined>();
const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || []; const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
useEffect(() => { useEffect(() => {
@ -165,26 +171,30 @@ export default function Dropped3dWidgets() {
}; };
const onDrop = (event: any) => { const onDrop = (event: any) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
hasEntered.current = false; hasEntered.current = false;
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
const newWidget = createdWidgetRef.current; const newWidget = createdWidgetRef.current;
if (!newWidget || !widgetSelect.startsWith("ui")) return; if (!newWidget || !widgetSelect.startsWith("ui")) return;
// ✅ Extract 2D drop position // ✅ Extract 2D drop position
const [x, , z] = newWidget.position; let [x, y, z] = newWidget.position;
// ✅ Clamp Y to at least 0
y = Math.max(y, 0);
newWidget.position = [x, y, z];
// ✅ Prepare polygon from selectedZone.points // ✅ Prepare polygon from selectedZone.points
const points3D = selectedZone.points as Array<[number, number, number]>; const points3D = selectedZone.points as Array<[number, number, number]>;
const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]); const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]);
const isInside = isPointInPolygon([x, z], zonePolygonXZ); const isInside = isPointInPolygon([x, z], zonePolygonXZ);
// ✅ Remove temp widget // ✅ Remove temp widget
const prevWidgets = useZoneWidgetStore.getState().zoneWidgetData[selectedZone.zoneId] || []; const prevWidgets = useZoneWidgetStore.getState().zoneWidgetData[selectedZone.zoneId] || [];
const cleanedWidgets = prevWidgets.filter(w => w.id !== newWidget.id); const cleanedWidgets = prevWidgets.filter(w => w.id !== newWidget.id);
@ -194,26 +204,29 @@ export default function Dropped3dWidgets() {
[selectedZone.zoneId]: cleanedWidgets, [selectedZone.zoneId]: cleanedWidgets,
}, },
})); }));
// (Optional) Prevent adding if dropped outside zone
// if (!isInside) { // if (!isInside) {
// createdWidgetRef.current = null; // createdWidgetRef.current = null;
// return; // Stop here // return;
// } // }
// ✅ Add widget if inside polygon
// ✅ Add widget
addWidget(selectedZone.zoneId, newWidget); addWidget(selectedZone.zoneId, newWidget);
const add3dWidget = { const add3dWidget = {
organization, organization,
widget: newWidget, widget: newWidget,
zoneId: selectedZone.zoneId, zoneId: selectedZone.zoneId,
}; };
if (visualizationSocket) { if (visualizationSocket) {
visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget); visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
} }
createdWidgetRef.current = null; createdWidgetRef.current = null;
}; };
canvasElement.addEventListener("dragenter", handleDragEnter); canvasElement.addEventListener("dragenter", handleDragEnter);
@ -237,8 +250,10 @@ export default function Dropped3dWidgets() {
const widgetToDuplicate = activeZoneWidgets.find( const widgetToDuplicate = activeZoneWidgets.find(
(w: WidgetData) => w.id === rightClickSelected (w: WidgetData) => w.id === rightClickSelected
); );
console.log("3d widget to duplecate", widgetToDuplicate);
if (!widgetToDuplicate) return; if (!widgetToDuplicate) return;
const newWidget: WidgetData = { const newWidget: any = {
id: generateUniqueId(), id: generateUniqueId(),
type: widgetToDuplicate.type, type: widgetToDuplicate.type,
position: [ position: [
@ -247,6 +262,10 @@ export default function Dropped3dWidgets() {
widgetToDuplicate.position[2] + 0.5, widgetToDuplicate.position[2] + 0.5,
], ],
rotation: widgetToDuplicate.rotation || [0, 0, 0], rotation: widgetToDuplicate.rotation || [0, 0, 0],
Data:{
measurements: measurements,
duration: duration
},
}; };
const adding3dWidget = { const adding3dWidget = {
organization: organization, organization: organization,
@ -319,28 +338,40 @@ export default function Dropped3dWidgets() {
return inside; return inside;
} }
const [prevX, setPrevX] = useState(0); const [prevX, setPrevX] = useState(0);
useEffect(() => { useEffect(() => {
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
const handleMouseDown = (event: MouseEvent) => { const handleMouseDown = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return; if (!rightClickSelected || !rightSelect) return;
const selectedZoneId = Object.keys(zoneWidgetData).find(
(zoneId: string) =>
zoneWidgetData[zoneId].some(
(widget: WidgetData) => widget.id === rightClickSelected
)
);
if (!selectedZoneId) return;
const selectedWidget = zoneWidgetData[selectedZoneId].find(
(widget: WidgetData) => widget.id === rightClickSelected
);
if (!selectedWidget) return
// let points = [];
// points.push(new THREE.Vector3(0, 0, 0));
// points.push(new THREE.Vector3(0, selectedWidget.position[1], 0));
// const newgeometry = new THREE.BufferGeometry().setFromPoints(points);
// let vector = new THREE.Vector3();
// camera.getWorldDirection(vector);
// let cameraDirection = vector;
// let newPlane = new THREE.Plane(cameraDirection);
// floorPlanesVertical = newPlane;
// setFloorPlanesVertical(newPlane);
// const intersect1 = raycaster?.ray?.intersectPlane(
// floorPlanesVertical,
// planeIntersect.current
// );
// setintersectcontextmenu(intersect1.y);
const cameraDirection = new THREE.Vector3();
camera.getWorldDirection(cameraDirection);
// Plane normal should be perpendicular to screen (XZ move), so use screen right direction
const right = new THREE.Vector3();
camera.getWorldDirection(cameraDirection);
cameraDirection.y = 0;
cameraDirection.normalize();
right.crossVectors(new THREE.Vector3(0, 1, 0), cameraDirection).normalize();
// Create a plane that allows vertical movement
const verticalPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(right, new THREE.Vector3(0, 0, 0));
setFloorPlanesVertical(verticalPlane);
if (rightSelect === "RotateX" || rightSelect === "RotateY") { if (rightSelect === "RotateX" || rightSelect === "RotateY") {
mouseStartRef.current = { x: event.clientX, y: event.clientY }; mouseStartRef.current = { x: event.clientX, y: event.clientY };
@ -358,6 +389,7 @@ export default function Dropped3dWidgets() {
rotationStartRef.current = selectedWidget.rotation || [0, 0, 0]; rotationStartRef.current = selectedWidget.rotation || [0, 0, 0];
} }
} }
}; };
const handleMouseMove = (event: MouseEvent) => { const handleMouseMove = (event: MouseEvent) => {
@ -380,90 +412,110 @@ export default function Dropped3dWidgets() {
raycaster.setFromCamera(mouse, camera); raycaster.setFromCamera(mouse, camera);
if (rightSelect === "Horizontal Move" &&raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) { if (rightSelect === "Horizontal Move") {
const points3D = selectedZone.points as Array<[number, number, number]>; const intersect = raycaster.ray.intersectPlane(plane.current, planeIntersect.current);
const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]); if (
const newPosition: [number, number, number] = [ intersect &&
planeIntersect.current.x, typeof horizontalX === "number" &&
selectedWidget.position[1], typeof horizontalZ === "number"
planeIntersect.current.z, ) {
]; const selectedZoneId = Object.keys(zoneWidgetData).find(zoneId =>
const isInside = isPointInPolygon( zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
[newPosition[0], newPosition[2]], );
zonePolygonXZ if (!selectedZoneId) return;
);
// if (isInside) { const selectedWidget = zoneWidgetData[selectedZoneId].find(widget => widget.id === rightClickSelected);
if (!selectedWidget) return;
const newPosition: [number, number, number] = [
intersect.x + horizontalX,
selectedWidget.position[1],
intersect.z + horizontalZ,
];
updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition); updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
// } }
} }
if (rightSelect === "Vertical Move") { if (rightSelect === "Vertical Move") {
if (raycaster.ray.intersectPlane(floorPlanesVertical, planeIntersect.current)) { const intersect = raycaster.ray.intersectPlane(floorPlanesVertical, planeIntersect.current);
const currentY = selectedWidget.position[1];
const newY = planeIntersect.current.y; if (intersect && typeof intersectcontextmenu === "number") {
console.log('planeIntersect.current: ', planeIntersect.current); const diff = intersect.y - intersectcontextmenu;
const unclampedY = selectedWidget.position[1] + diff;
const deltaY = newY - currentY; const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
// Reject if jump is too large (safety check) setintersectcontextmenu(intersect.y);
if (Math.abs(deltaY) > 200) return;
const newPosition: [number, number, number] = [
// Clamp jump or apply smoothing selectedWidget.position[0],
const clampedY = currentY + THREE.MathUtils.clamp(deltaY, -10, 10); newY,
selectedWidget.position[2],
if (clampedY > 0) { ];
updateWidgetPosition(selectedZoneId, rightClickSelected, [
selectedWidget.position[0], updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
clampedY,
selectedWidget.position[2],
]);
}
} }
} }
if (rightSelect?.startsWith("Rotate")) {
const axis = rightSelect.slice(-1).toLowerCase(); // "x", "y", or "z"
const currentX = event.pageX;
const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
setPrevX(currentX);
if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
const index = axis === "x" ? 0 : axis === "y" ? 1 : 2;
const currentRotation = selectedWidget.rotation as [number, number, number]; // assert type
const newRotation: [number, number, number] = [...currentRotation];
newRotation[index] += 0.05 * sign;
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
}
}
// if (rightSelect === "RotateX") {
//
// const currentX = event.pageX;
// const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
//
// setPrevX(currentX);
// if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
//
// const newRotation: [number, number, number] = [
// selectedWidget.rotation[0] + 0.05 * sign,
// selectedWidget.rotation[1],
// selectedWidget.rotation[2],
// ];
// updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
// }
// }
// if (rightSelect === "RotateY") {
// const currentX = event.pageX;
// const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
// setPrevX(currentX);
// if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
// const newRotation: [number, number, number] = [
// selectedWidget.rotation[0],
// selectedWidget.rotation[1] + 0.05 * sign,
// selectedWidget.rotation[2],
// ];
if (rightSelect === "RotateX") { // updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
const currentX = event.pageX; // }
const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0; // }
setPrevX(currentX); // if (rightSelect === "RotateZ") {
if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) { // const currentX = event.pageX;
const newRotation: [number, number, number] = [ // const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
selectedWidget.rotation[0] + 0.05 * sign, // setPrevX(currentX);
selectedWidget.rotation[1], // if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
selectedWidget.rotation[2], // const newRotation: [number, number, number] = [
]; // selectedWidget.rotation[0],
// selectedWidget.rotation[1],
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation); // selectedWidget.rotation[2] + 0.05 * sign,
} // ];
}
if (rightSelect === "RotateY") { // updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
const currentX = event.pageX; // }
const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0; // }
setPrevX(currentX);
if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
const newRotation: [number, number, number] = [
selectedWidget.rotation[0] ,
selectedWidget.rotation[1]+ 0.05 * sign,
selectedWidget.rotation[2],
];
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
}
}
if (rightSelect === "RotateZ") {
const currentX = event.pageX;
const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
setPrevX(currentX);
if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
const newRotation: [number, number, number] = [
selectedWidget.rotation[0] ,
selectedWidget.rotation[1],
selectedWidget.rotation[2]+ 0.05 * sign,
];
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
}
}
}; };
const handleMouseUp = () => { const handleMouseUp = () => {
if (!rightClickSelected || !rightSelect) return; if (!rightClickSelected || !rightSelect) return;
@ -513,7 +565,7 @@ export default function Dropped3dWidgets() {
const rotation = selectedWidget.rotation || [0, 0, 0]; const rotation = selectedWidget.rotation || [0, 0, 0];
let lastRotation = formatValues(rotation) as [number, number, number]; let lastRotation = formatValues(rotation) as [number, number, number];
// (async () => { // (async () => {
// let response = await update3dWidgetRotation(selectedZoneId, organization, rightClickSelected, lastRotation); // let response = await update3dWidgetRotation(selectedZoneId, organization, rightClickSelected, lastRotation);
// //
@ -552,11 +604,60 @@ export default function Dropped3dWidgets() {
}; };
}, [rightClickSelected, rightSelect, zoneWidgetData, gl]); }, [rightClickSelected, rightSelect, zoneWidgetData, gl]);
const handleRightClick3d = (event: React.MouseEvent, id: string) => {
event.preventDefault();
const canvasElement = document.getElementById("real-time-vis-canvas");
if (!canvasElement) throw new Error("Canvas element not found");
const canvasRect = canvasElement.getBoundingClientRect();
const relativeX = event.clientX - canvasRect.left;
const relativeY = event.clientY - canvasRect.top;
setEditWidgetOptions(true);
setRightClickSelected(id);
setTop(relativeY);
setLeft(relativeX);
const selectedZoneId = Object.keys(zoneWidgetData).find(zoneId =>
zoneWidgetData[zoneId].some(widget => widget.id === id)
);
if (!selectedZoneId) return;
const selectedWidget = zoneWidgetData[selectedZoneId].find(widget => widget.id === id);
if (!selectedWidget) return;
const { top, left, width, height } = canvasElement.getBoundingClientRect();
mouse.x = ((event.clientX - left) / width) * 2 - 1;
mouse.y = -((event.clientY - top) / height) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const cameraDirection = new THREE.Vector3();
camera.getWorldDirection(cameraDirection);
const verticalPlane = new THREE.Plane(cameraDirection);
setFloorPlanesVertical(verticalPlane);
const intersectPoint = raycaster.ray.intersectPlane(verticalPlane, planeIntersect.current);
if (intersectPoint) {
setintersectcontextmenu(intersectPoint.y);
}
const intersect2 = raycaster.ray.intersectPlane(plane.current, planeIntersect.current);
if (intersect2) {
const xDiff = -intersect2.x + selectedWidget.position[0];
const zDiff = -intersect2.z + selectedWidget.position[2];
setHorizontalX(xDiff);
setHorizontalZ(zDiff);
}
};
return ( return (
<> <>
{activeZoneWidgets.map( {activeZoneWidgets.map(
({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => { ({ id, type, position, Data, rotation = [0, 0, 0] }: any) => {
const handleRightClick = (event: React.MouseEvent, id: string) => { const handleRightClick = (event: React.MouseEvent, id: string) => {
setSelectedChartId({ id: id, type: type })
event.preventDefault(); event.preventDefault();
const canvasElement = document.getElementById( const canvasElement = document.getElementById(
"real-time-vis-canvas" "real-time-vis-canvas"
@ -569,6 +670,7 @@ export default function Dropped3dWidgets() {
setRightClickSelected(id); setRightClickSelected(id);
setTop(relativeY); setTop(relativeY);
setLeft(relativeX); setLeft(relativeX);
handleRightClick3d(event, id)
}; };
switch (type) { switch (type) {
@ -580,6 +682,7 @@ export default function Dropped3dWidgets() {
type={type} type={type}
position={position} position={position}
rotation={rotation} rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)} onContextMenu={(e) => handleRightClick(e, id)}
/> />
); );
@ -591,6 +694,7 @@ export default function Dropped3dWidgets() {
type={type} type={type}
position={position} position={position}
rotation={rotation} rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)} onContextMenu={(e) => handleRightClick(e, id)}
/> />
); );
@ -602,6 +706,7 @@ export default function Dropped3dWidgets() {
type={type} type={type}
position={position} position={position}
rotation={rotation} rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)} onContextMenu={(e) => handleRightClick(e, id)}
/> />
); );
@ -613,6 +718,7 @@ export default function Dropped3dWidgets() {
type={type} type={type}
position={position} position={position}
rotation={rotation} rotation={rotation}
Data={Data}
onContextMenu={(e) => handleRightClick(e, id)} onContextMenu={(e) => handleRightClick(e, id)}
/> />
); );

22
app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
View File

@ -31,6 +31,7 @@ interface ProductionCapacityProps {
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
rotation: [number, number, number]; rotation: [number, number, number];
Data?: any,
onContextMenu?: (event: React.MouseEvent) => void; onContextMenu?: (event: React.MouseEvent) => void;
// onPointerDown:any // onPointerDown:any
} }
@ -38,6 +39,7 @@ interface ProductionCapacityProps {
const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
id, id,
type, type,
Data,
position, position,
rotation, rotation,
onContextMenu, onContextMenu,
@ -48,8 +50,8 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
duration: chartDuration, duration: chartDuration,
name: widgetName, name: widgetName,
} = useChartStore(); } = useChartStore();
const [measurements, setmeasurements] = useState<any>({}); const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [duration, setDuration] = useState("1h"); const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
const [name, setName] = useState("Widget"); const [name, setName] = useState("Widget");
const [chartData, setChartData] = useState<{ const [chartData, setChartData] = useState<{
labels: string[]; labels: string[];
@ -173,7 +175,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
setName(response.data.widgetName); setName(response.data.widgetName);
} else { } else {
} }
} catch (error) {} } catch (error) { }
} }
}; };
@ -187,9 +189,12 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
} }
}, [chartMeasurements, chartDuration, widgetName]); }, [chartMeasurements, chartDuration, widgetName]);
useEffect(() => {}, [rotation]); useEffect(() => { }, [rotation]);
return ( return (
<Html <Html
position={position} position={position}
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
@ -211,20 +216,20 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
// e.stopPropagation(); // e.stopPropagation();
}} }}
wrapperClass="pointer-none" wrapperClass="pointer-none"
> >
<div <div
className={`productionCapacity-wrapper card ${ className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""}`}
selectedChartId?.id === id ? "activeChart" : ""
}`}
onClick={() => setSelectedChartId({ id: id, type: type })} onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu} onContextMenu={onContextMenu}
style={{ style={{
width: "300px", // Original width width: "300px", // Original width
height: "300px", // Original height height: "300px", // Original height
// transform: transformStyle.transform, // transform: transformStyle.transform,
transformStyle: "preserve-3d", transformStyle: "preserve-3d",
position: "absolute", position: "absolute",
transform: "translate(-50%, -50%)", transform:'translate(-50%, -50%)',
}} }}
> >
<div className="headeproductionCapacityr-wrapper"> <div className="headeproductionCapacityr-wrapper">
@ -258,6 +263,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
</div> </div>
</div> </div>
</Html> </Html>
); );
}; };

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

@ -12,6 +12,7 @@ import {
ChartOptions, ChartOptions,
} from "chart.js"; } from "chart.js";
import axios from "axios"; import axios from "axios";
import io from "socket.io-client"; import io from "socket.io-client";
import { useWidgetStore } from "../../../../../store/useWidgetStore"; import { useWidgetStore } from "../../../../../store/useWidgetStore";
@ -45,11 +46,13 @@ interface ReturnOfInvestmentProps {
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
rotation: [number, number, number]; rotation: [number, number, number];
Data?: any;
onContextMenu?: (event: React.MouseEvent) => void; onContextMenu?: (event: React.MouseEvent) => void;
} }
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
id, id,
type, type,
Data,
position, position,
rotation, rotation,
onContextMenu, onContextMenu,
@ -60,8 +63,8 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
duration: chartDuration, duration: chartDuration,
name: widgetName, name: widgetName,
} = useChartStore(); } = useChartStore();
const [measurements, setmeasurements] = useState<any>({}); const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [duration, setDuration] = useState("1h"); const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
const [name, setName] = useState("Widget"); const [name, setName] = useState("Widget");
const [chartData, setChartData] = useState<{ const [chartData, setChartData] = useState<{
labels: string[]; labels: string[];

8
app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx
View File

@ -12,11 +12,13 @@ interface StateWorkingProps {
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
rotation: [number, number, number]; rotation: [number, number, number];
Data?:any;
onContextMenu?: (event: React.MouseEvent) => void; onContextMenu?: (event: React.MouseEvent) => void;
} }
const StateWorking: React.FC<StateWorkingProps> = ({ const StateWorking: React.FC<StateWorkingProps> = ({
id, id,
type, type,
Data,
position, position,
rotation, rotation,
onContextMenu, onContextMenu,
@ -27,8 +29,8 @@ const StateWorking: React.FC<StateWorkingProps> = ({
duration: chartDuration, duration: chartDuration,
name: widgetName, name: widgetName,
} = useChartStore(); } = useChartStore();
const [measurements, setmeasurements] = useState<any>({}); const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [duration, setDuration] = useState("1h"); const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
const [name, setName] = useState("Widget"); const [name, setName] = useState("Widget");
const [datas, setDatas] = useState<any>({}); const [datas, setDatas] = useState<any>({});
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL; const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
@ -114,7 +116,7 @@ const StateWorking: React.FC<StateWorkingProps> = ({
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
transform transform
zIndexRange={[1, 0]} zIndexRange={[1, 0]}
sprite={false} sprite={false}
// style={{ // style={{
// transform: transformStyle.transform, // transform: transformStyle.transform,
// transformStyle: "preserve-3d", // transformStyle: "preserve-3d",

7
app/src/modules/visualization/widgets/3d/cards/Throughput.tsx
View File

@ -14,6 +14,7 @@ import {
ChartOptions, ChartOptions,
} from "chart.js"; } from "chart.js";
import axios from "axios"; import axios from "axios";
import io from "socket.io-client"; import io from "socket.io-client";
import { useWidgetStore } from "../../../../../store/useWidgetStore"; import { useWidgetStore } from "../../../../../store/useWidgetStore";
@ -47,12 +48,14 @@ interface ThroughputProps {
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
rotation: [number, number, number]; rotation: [number, number, number];
Data?:any;
onContextMenu?: (event: React.MouseEvent) => void; onContextMenu?: (event: React.MouseEvent) => void;
} }
const Throughput: React.FC<ThroughputProps> = ({ const Throughput: React.FC<ThroughputProps> = ({
id, id,
type, type,
Data,
position, position,
rotation, rotation,
onContextMenu, onContextMenu,
@ -63,8 +66,8 @@ const Throughput: React.FC<ThroughputProps> = ({
duration: chartDuration, duration: chartDuration,
name: widgetName, name: widgetName,
} = useChartStore(); } = useChartStore();
const [measurements, setmeasurements] = useState<any>({}); const [measurements, setmeasurements] = useState<any>(Data?.measurements ? Data.measurements : {});
const [duration, setDuration] = useState("1h"); const [duration, setDuration] = useState(Data?.duration ? Data.duration : "1h");
const [name, setName] = useState("Widget"); const [name, setName] = useState("Widget");
const [chartData, setChartData] = useState<{ const [chartData, setChartData] = useState<{
labels: string[]; labels: string[];

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

@ -41,7 +41,7 @@ const FleetEfficiencyComponent = ({object}: any) => {
socket.on("lastOutput", (response) => { socket.on("lastOutput", (response) => {
const responseData = response.input1; const responseData = response.input1;
console.log(responseData); // console.log(responseData);
if (typeof responseData === "number") { if (typeof responseData === "number") {
console.log("It's a number!"); console.log("It's a number!");

18
app/src/modules/visualization/widgets/panel/Panel.tsx
View File

@ -108,9 +108,8 @@ const Panel: React.FC<PanelProps> = ({
case "bottom": case "bottom":
return { return {
minWidth: "170px", minWidth: "170px",
width: `calc(100% - ${ width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0) }px)`,
}px)`,
minHeight: "170px", minHeight: "170px",
height: `${panelSize}px`, height: `${panelSize}px`,
left: leftActive ? `${panelSize}px` : "0", left: leftActive ? `${panelSize}px` : "0",
@ -123,9 +122,8 @@ const Panel: React.FC<PanelProps> = ({
minWidth: "170px", minWidth: "170px",
width: `${panelSize}px`, width: `${panelSize}px`,
minHeight: "170px", minHeight: "170px",
height: `calc(100% - ${ height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0) }px)`,
}px)`,
top: topActive ? `${panelSize}px` : "0", top: topActive ? `${panelSize}px` : "0",
bottom: bottomActive ? `${panelSize}px` : "0", bottom: bottomActive ? `${panelSize}px` : "0",
[side]: "0", [side]: "0",
@ -151,6 +149,7 @@ const Panel: React.FC<PanelProps> = ({
const currentWidgetsCount = getCurrentWidgetCount(panel); const currentWidgetsCount = getCurrentWidgetCount(panel);
const maxCapacity = calculatePanelCapacity(panel); const maxCapacity = calculatePanelCapacity(panel);
if (currentWidgetsCount < maxCapacity) { if (currentWidgetsCount < maxCapacity) {
addWidgetToPanel(draggedAsset, panel); addWidgetToPanel(draggedAsset, panel);
} }
@ -284,9 +283,8 @@ const Panel: React.FC<PanelProps> = ({
<div <div
key={side} key={side}
id="panel-wrapper" id="panel-wrapper"
className={`panel ${side}-panel absolute ${ className={`panel ${side}-panel absolute ${hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : "" }`}
}`}
style={getPanelStyle(side)} style={getPanelStyle(side)}
onDrop={(e) => handleDrop(e, side)} onDrop={(e) => handleDrop(e, side)}
onDragOver={(e) => e.preventDefault()} onDragOver={(e) => e.preventDefault()}
@ -303,7 +301,7 @@ const Panel: React.FC<PanelProps> = ({
style={{ style={{
pointerEvents: pointerEvents:
selectedZone.lockedPanels.includes(side) || selectedZone.lockedPanels.includes(side) ||
hiddenPanels[selectedZone.zoneId]?.includes(side) hiddenPanels[selectedZone.zoneId]?.includes(side)
? "none" ? "none"
: "auto", : "auto",
opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1", opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",

2
app/src/services/realTimeVisulization/zoneData/addFloatingWidgets.ts
View File

@ -8,7 +8,7 @@ export const addingFloatingWidgets = async (
) => { ) => {
try { try {
const response = await fetch( const response = await fetch(
`${url_Backend_dwinzo}/api/v2/floatwidget/save`, `${url_Backend_dwinzo}/api/v2/floatwidget/save`,

11
app/src/store/useDroppedObjectsStore.ts
View File

@ -1,6 +1,7 @@
import { create } from "zustand"; import { create } from "zustand";
import { addingFloatingWidgets } from "../services/realTimeVisulization/zoneData/addFloatingWidgets"; import { addingFloatingWidgets } from "../services/realTimeVisulization/zoneData/addFloatingWidgets";
import { useSocketStore } from "./store"; import { useSocketStore } from "./store";
import useChartStore from "./useChartStore";
type DroppedObject = { type DroppedObject = {
className: string; className: string;
@ -96,7 +97,10 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
const state = useDroppedObjectsStore.getState(); // Get the current state const state = useDroppedObjectsStore.getState(); // Get the current state
const zone = state.zones[zoneName]; const zone = state.zones[zoneName];
let socketState = useSocketStore.getState(); let socketState = useSocketStore.getState();
let iotData = useChartStore.getState();
let visualizationSocket = socketState.visualizationSocket; let visualizationSocket = socketState.visualizationSocket;
let iotMeasurements = iotData.flotingMeasurements;
let iotDuration = iotData.flotingDuration;
if (!zone) return; if (!zone) return;
@ -109,6 +113,10 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
// Create a shallow copy of the object with a unique ID and slightly adjusted position // Create a shallow copy of the object with a unique ID and slightly adjusted position
const duplicatedObject: DroppedObject = { const duplicatedObject: DroppedObject = {
...originalObject, ...originalObject,
Data:{
measurements: iotMeasurements,
duration: iotDuration,
},
id: `${originalObject.id}-copy-${Date.now()}`, // Unique ID id: `${originalObject.id}-copy-${Date.now()}`, // Unique ID
position: { position: {
...originalObject.position, ...originalObject.position,
@ -122,7 +130,8 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
: originalObject.position.left, : originalObject.position.left,
}, },
}; };
console.log("duplicated object",duplicatedObject);
let duplicateFloatingWidget = { let duplicateFloatingWidget = {
organization: organization, organization: organization,
widget: duplicatedObject, widget: duplicatedObject,

18
app/src/store/useWidgetStore.ts
View File

@ -8,22 +8,8 @@ export interface Widget {
fontFamily?: string; fontFamily?: string;
fontSize?: string; fontSize?: string;
fontWeight?: string; fontWeight?: string;
data: { data?: any;
// Chart data Data?:any;
labels?: string[];
datasets?: Array<{
data: number[];
backgroundColor: string;
borderColor: string;
borderWidth: number;
}>;
// Progress card data
stocks?: Array<{
key: string;
value: number;
description: string;
}>;
};
} }
interface WidgetStore { interface WidgetStore {

10
app/src/styles/pages/realTimeViz.scss
View File

@ -285,9 +285,6 @@
} }
} }
.chart-container.notLinked {
border-color: red;
}
.close-btn { .close-btn {
position: absolute; position: absolute;
@ -755,6 +752,13 @@
z-index: 2 !important; z-index: 2 !important;
} }
.chart-container.notLinked {
outline: 1px solid red;
}
.connectionSuccess { .connectionSuccess {
outline-color: #43c06d; outline-color: #43c06d;
} }