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

Merge pull request 'rtViz' (#44) from rtViz into main 

Reviewed-on: http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev/pulls/44
This commit is contained in:
Vishnu 2025-04-04 13:34:40 +00:00
parent df0b4a297a 6089c5538f
commit 4418db3d5f
23 changed files with 643 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
View File

@ -30,14 +30,13 @@ interface ProductionCapacityProps {
id: string; id: string;
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
rotation: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void; onContextMenu?: (event: React.MouseEvent) => void;
// onPointerDown:any // onPointerDown:any
} }
const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, position, onContextMenu }) => { const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, position, rotation, onContextMenu }) => {
const { selectedChartId, setSelectedChartId } = useWidgetStore(); const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [measurements, setmeasurements] = useState<any>({}); const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h") const [duration, setDuration] = useState("1h")
@ -158,10 +157,10 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, posit
setDuration(response.data.Data.duration) setDuration(response.data.Data.duration)
setName(response.data.widgetName) setName(response.data.widgetName)
} else { } else {
console.log("Unexpected response:", response);
} }
} catch (error) { } catch (error) {
console.error("There was an error!", error);
} }
} }
} }
@ -177,15 +176,42 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, posit
} }
, [chartMeasurements, chartDuration, widgetName]) , [chartMeasurements, chartDuration, widgetName])
useEffect(() => {
}, [rotation])
const rotationDegrees = {
x: (rotation[0] * 180) / Math.PI,
y: (rotation[1] * 180) / Math.PI,
z: (rotation[2] * 180) / Math.PI,
};
const transformStyle = {
transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
};
return ( return (
<Html position={[position[0], position[1], position[2]]} <Html position={position}
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
zIndexRange={[1, 0]}
transform transform
sprite> sprite
zIndexRange={[1,0]}
// center
// distanceFactor={10} // Adjusted for visual balance
style={{
transform: transformStyle.transform,
transformStyle: 'preserve-3d',
transition: 'transform 0.1s ease-out'
}}>
<div className="productionCapacity-wrapper card" <div className="productionCapacity-wrapper card"
onClick={() => setSelectedChartId({ id: id, type: type })} onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu} onContextMenu={onContextMenu}
style={{
width: '300px', // Original width
height: '300px', // Original height
transform: transformStyle.transform,
transformStyle: 'preserve-3d'
}}
> >
<div className="headeproductionCapacityr-wrapper"> <div className="headeproductionCapacityr-wrapper">
<div className="header">Production Capacity</div> <div className="header">Production Capacity</div>

21
app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
View File

@ -43,9 +43,10 @@ interface ReturnOfInvestmentProps {
id: string; id: string;
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
rotation: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void; onContextMenu?: (event: React.MouseEvent) => void;
} }
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position, onContextMenu }) => { const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position, rotation, onContextMenu }) => {
const { selectedChartId, setSelectedChartId } = useWidgetStore(); const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
@ -203,13 +204,29 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
} }
} }
, [chartMeasurements, chartDuration, widgetName]) , [chartMeasurements, chartDuration, widgetName])
const rotationDegrees = {
x: (rotation[0] * 180) / Math.PI,
y: (rotation[1] * 180) / Math.PI,
z: (rotation[2] * 180) / Math.PI,
};
const transformStyle = {
transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
};
return ( return (
<Html position={[position[0], position[1], position[2]]} <Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
transform transform
zIndexRange={[1, 0]} zIndexRange={[1, 0]}
sprite> sprite
style={{
transform: transformStyle.transform,
transformStyle: 'preserve-3d',
transition: 'transform 0.1s ease-out'
}}
>
<div className="returnOfInvestment card" <div className="returnOfInvestment card"
onClick={() => setSelectedChartId({ id: id, type: type })} onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu} onContextMenu={onContextMenu}

20
app/src/components/layout/3D-cards/cards/StateWorking.tsx
View File

@ -10,9 +10,10 @@ interface StateWorkingProps {
id: string; id: string;
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
rotation: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void; onContextMenu?: (event: React.MouseEvent) => void;
} }
const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, onContextMenu }) => { const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, rotation, onContextMenu }) => {
const { selectedChartId, setSelectedChartId } = useWidgetStore(); const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
const [measurements, setmeasurements] = useState<any>({}); const [measurements, setmeasurements] = useState<any>({});
@ -89,13 +90,28 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, onConte
} }
, [chartMeasurements, chartDuration, widgetName]) , [chartMeasurements, chartDuration, widgetName])
const rotationDegrees = {
x: (rotation[0] * 180) / Math.PI,
y: (rotation[1] * 180) / Math.PI,
z: (rotation[2] * 180) / Math.PI,
};
const transformStyle = {
transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
};
return ( return (
<Html position={[position[0], position[1], position[2]]} <Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
transform transform
zIndexRange={[1, 0]} zIndexRange={[1, 0]}
sprite> sprite
style={{
transform: transformStyle.transform,
transformStyle: 'preserve-3d',
transition: 'transform 0.1s ease-out'
}}
>
<div className="stateWorking-wrapper card" <div className="stateWorking-wrapper card"
onClick={() => setSelectedChartId({ id: id, type: type })} onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu} onContextMenu={onContextMenu}

21
app/src/components/layout/3D-cards/cards/Throughput.tsx
View File

@ -45,10 +45,11 @@ interface ThroughputProps {
id: string; id: string;
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
rotation: [number, number, number];
onContextMenu?: (event: React.MouseEvent) => void; onContextMenu?: (event: React.MouseEvent) => void;
} }
const Throughput: React.FC<ThroughputProps> = ({ id, type, position, onContextMenu }) => { const Throughput: React.FC<ThroughputProps> = ({ id, type, position, rotation, onContextMenu }) => {
const { selectedChartId, setSelectedChartId } = useWidgetStore(); const { selectedChartId, setSelectedChartId } = useWidgetStore();
const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore(); const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
@ -183,13 +184,29 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position, onContextMe
} }
} }
, [chartMeasurements, chartDuration, widgetName]) , [chartMeasurements, chartDuration, widgetName])
const rotationDegrees = {
x: (rotation[0] * 180) / Math.PI,
y: (rotation[1] * 180) / Math.PI,
z: (rotation[2] * 180) / Math.PI,
};
const transformStyle = {
transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
};
return ( return (
<Html position={[position[0], position[1], position[2]]} <Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]} scale={[0.5, 0.5, 0.5]}
transform transform
zIndexRange={[1, 0]} zIndexRange={[1, 0]}
sprite> sprite
style={{
transform: transformStyle.transform,
transformStyle: 'preserve-3d',
transition: 'transform 0.1s ease-out'
}}
>
<div className="throughput-wrapper" <div className="throughput-wrapper"
onClick={() => setSelectedChartId({ id: id, type: type })} onClick={() => setSelectedChartId({ id: id, type: type })}
onContextMenu={onContextMenu} onContextMenu={onContextMenu}

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

@ -33,7 +33,7 @@ const GlobalProperties: React.FC = () => {
const { setPlaneValue, setGridValue, planeValue, gridValue } = const { setPlaneValue, setGridValue, planeValue, gridValue } =
useTileDistance(); useTileDistance();
useEffect(() => { useEffect(() => {
// console.log(gridValue, planeValue, "values");
}, [gridValue, planeValue]); }, [gridValue, planeValue]);
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const { limitDistance, setLimitDistance } = useLimitDistance(); const { limitDistance, setLimitDistance } = useLimitDistance();

2
app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx
View File

@ -45,7 +45,7 @@ const FleetEfficiencyInputComponent = (props: Props) => {
try { try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`); const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
if (response.status === 200) { if (response.status === 200) {
console.log(response.data);
setSelections(response.data.Data.measurements) setSelections(response.data.Data.measurements)
setDuration(response.data.Data.duration) setDuration(response.data.Data.duration)

2
app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx
View File

@ -45,7 +45,7 @@ const FlotingWidgetInput = (props: Props) => {
try { try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`); const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
if (response.status === 200) { if (response.status === 200) {
console.log(response.data);
setSelections(response.data.Data.measurements) setSelections(response.data.Data.measurements)
setDuration(response.data.Data.duration) setDuration(response.data.Data.duration)

2
app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx
View File

@ -45,7 +45,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
try { try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`); const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
if (response.status === 200) { if (response.status === 200) {
console.log(response.data);
setSelections(response.data.Data.measurements) setSelections(response.data.Data.measurements)
setDuration(response.data.Data.duration) setDuration(response.data.Data.duration)

3
app/src/components/ui/componets/DraggableWidget.tsx
View File

@ -239,14 +239,13 @@ export const DraggableWidget = ({
onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
} }
}; };
console.log("widget.type", widget.type);
// useClickOutside(chartWidget, () => { // useClickOutside(chartWidget, () => {
// setSelectedChartId(null); // setSelectedChartId(null);
// }); // });
const { isPlaying } = usePlayButtonStore(); const { isPlaying } = usePlayButtonStore();
console.log('isPanelHidden: ', isPanelHidden);
return ( return (
<> <>
<div <div

298
app/src/components/ui/componets/Dropped3dWidget.tsx
View File

@ -1,5 +1,5 @@
import { useThree } from "@react-three/fiber"; import { useThree } from "@react-three/fiber";
import React, { useState, useEffect, useRef } from "react"; import React, { useEffect, useRef } from "react";
import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../store/store"; import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../store/store";
import useModuleStore from "../../../store/useModuleStore"; import useModuleStore from "../../../store/useModuleStore";
import { ThreeState } from "../../../types/world/worldTypes"; import { ThreeState } from "../../../types/world/worldTypes";
@ -13,9 +13,19 @@ import { generateUniqueId } from "../../../functions/generateUniqueId";
import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget"; import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget";
import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData"; import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
import { use3DWidget } from "../../../store/useDroppedObjectsStore"; import { use3DWidget } from "../../../store/useDroppedObjectsStore";
import { useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../store/useZone3DWidgetStore"; import { useEditWidgetOptionsStore, useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
import { useWidgetStore } from "../../../store/useWidgetStore"; import { useWidgetStore } from "../../../store/useWidgetStore";
import EditWidgetOption from "../menu/EditWidgetOption"; import EditWidgetOption from "../menu/EditWidgetOption";
import { delete3dWidgetApi } from "../../../services/realTimeVisulization/zoneData/delete3dWidget";
import { update3dWidget, update3dWidgetRotation } from "../../../services/realTimeVisulization/zoneData/update3dWidget";
type WidgetData = {
id: string;
type: string;
position: [number, number, number];
rotation?: [number, number, number];
tempPosition?: [number, number, number];
};
export default function Dropped3dWidgets() { export default function Dropped3dWidgets() {
const { widgetSelect } = useAsset3dWidget(); const { widgetSelect } = useAsset3dWidget();
@ -23,22 +33,22 @@ export default function Dropped3dWidgets() {
const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree(); const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree();
const { widgetSubOption } = useWidgetSubOption(); const { widgetSubOption } = useWidgetSubOption();
const { selectedZone } = useSelectedZoneStore(); const { selectedZone } = useSelectedZoneStore();
const { top, setTop } = useTopData() const { top, setTop } = useTopData();
const { left, setLeft } = useLeftData() const { left, setLeft } = useLeftData();
const { rightSelect, setRightSelect } = useRightSelected() const { rightSelect, setRightSelect } = useRightSelected();
const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore()
// ✅ Use Zustand Store instead of useState const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition, updateWidgetRotation } = useZoneWidgetStore();
const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition } = useZoneWidgetStore();
const { setWidgets3D } = use3DWidget(); const { setWidgets3D } = use3DWidget();
const { visualizationSocket } = useSocketStore(); const { visualizationSocket } = useSocketStore();
const { rightClickSelected, setRightClickSelected } = useRightClickSelected() const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Floor plane for horizontal move const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Floor plane for horizontal move
const verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)); // Vertical plane for vertical move const verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)); // Vertical plane for vertical move
const planeIntersect = useRef(new THREE.Vector3()); const planeIntersect = useRef(new THREE.Vector3());
// let [verticalPlane, setFloorPlanesVertical] = useState( // const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
// new THREE.Plane(new THREE.Vector3(0, 1, 0)) // const verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
// ); // const planeIntersect = useRef(new THREE.Vector3());
const rotationStartRef = useRef<[number, number, number]>([0, 0, 0]);
const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
useEffect(() => { useEffect(() => {
if (activeModule !== "visualization") return; if (activeModule !== "visualization") return;
@ -48,16 +58,18 @@ export default function Dropped3dWidgets() {
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
async function get3dWidgetData() { async function get3dWidgetData() {
let result = await get3dWidgetZoneData(selectedZone.zoneId, organization); const result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
console.log('result: ', result);
setWidgets3D(result); setWidgets3D(result);
const formattedWidgets = result.map((widget: any) => ({ const formattedWidgets = result.map((widget: WidgetData) => ({
id: widget.id, id: widget.id,
type: widget.type, type: widget.type,
position: widget.position, position: widget.position,
rotation: widget.rotation || [0, 0, 0],
})); }));
setZoneWidgetData(selectedZone.zoneId, formattedWidgets); setZoneWidgetData(selectedZone.zoneId, formattedWidgets);
} }
@ -91,28 +103,24 @@ export default function Dropped3dWidgets() {
if (intersects.length > 0) { if (intersects.length > 0) {
const { x, y, z } = intersects[0].point; const { x, y, z } = intersects[0].point;
const newWidget = { const newWidget: WidgetData = {
id: generateUniqueId(), id: generateUniqueId(),
type: widgetSelect, type: widgetSelect,
position: [x, y, z] as [number, number, number], position: [x, y, z],
rotation: [0, 0, 0],
}; };
let add3dWidget = { const add3dWidget = {
organization: organization, 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);
} }
// let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget);
//
// if (response.message === "Widget created successfully") {
addWidget(selectedZone.zoneId, newWidget); addWidget(selectedZone.zoneId, newWidget);
// }
} }
}; };
@ -128,63 +136,103 @@ export default function Dropped3dWidgets() {
if (!rightClickSelected) return; if (!rightClickSelected) return;
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
if (rightSelect === "Duplicate") { if (rightSelect === "Duplicate") {
const widgetToDuplicate = activeZoneWidgets.find(w => w.id === rightClickSelected); async function duplicateWidget() {
const widgetToDuplicate = activeZoneWidgets.find((w: WidgetData) => w.id === rightClickSelected);
if (!widgetToDuplicate) return; if (!widgetToDuplicate) return;
const newWidget = { const newWidget: WidgetData = {
id: generateUniqueId(), id: generateUniqueId(),
type: widgetToDuplicate.type, type: widgetToDuplicate.type,
position: [ position: [
widgetToDuplicate.position[0] + 0.5, // Slightly shift position widgetToDuplicate.position[0] + 0.5,
widgetToDuplicate.position[1], widgetToDuplicate.position[1],
widgetToDuplicate.position[2] + 0.5, widgetToDuplicate.position[2] + 0.5,
] as [number, number, number], ],
rotation: widgetToDuplicate.rotation || [0, 0, 0],
}; };
let add3dWidget = { const adding3dWidget = {
organization, organization,
widget: newWidget, widget: newWidget,
zoneId: selectedZone.zoneId zoneId: selectedZone.zoneId
}; };
// if (visualizationSocket) { let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget)
// visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget); console.log('response: ', response);
// }
addWidget(selectedZone.zoneId, newWidget); addWidget(selectedZone.zoneId, newWidget);
setRightSelect(null); setRightSelect(null);
setRightClickSelected(null); setRightClickSelected(null);
} }
duplicateWidget()
}
if (rightSelect === "Delete") { if (rightSelect === "Delete") {
let deleteWidget = { const deleteWidgetApi = async () => {
try {
const deleteWidget = {
organization, organization,
widgetId: rightClickSelected, widgetId: rightClickSelected,
zoneId: selectedZone.zoneId zoneId: selectedZone.zoneId,
}; };
// if (visualizationSocket) {
// visualizationSocket.emit("v2:viz-3D-widget:delete", deleteWidget); // Call the API to delete the widget
const response = await delete3dWidgetApi(selectedZone.zoneId, organization, rightClickSelected);
// if (response?.success) {
// Remove from state only if API call succeeds
setZoneWidgetData(
selectedZone.zoneId,
activeZoneWidgets.filter((w: WidgetData) => w.id !== rightClickSelected)
);
// } else {
// console.error("Failed to delete widget:", response?.message);
// } // }
setZoneWidgetData(selectedZone.zoneId, activeZoneWidgets.filter(w => w.id !== rightClickSelected)); } catch (error) {
console.error("Error deleting widget:", error);
} finally {
setRightClickSelected(null); setRightClickSelected(null);
setRightSelect(null); setRightSelect(null);
} }
if (rightSelect === "Horizontal Move") { };
deleteWidgetApi();
} }
if (rightSelect === "Vertical Move") {
}
}, [rightSelect, rightClickSelected]); }, [rightSelect, rightClickSelected]);
useEffect(() => { useEffect(() => {
const handleMouseMove = (event: MouseEvent) => {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const handleMouseDown = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return; if (!rightClickSelected || !rightSelect) return;
if (rightSelect === "RotateX" || rightSelect === "RotateY") {
mouseStartRef.current = { x: event.clientX, y: event.clientY };
const selectedZone = Object.keys(zoneWidgetData).find(zoneId => const selectedZone = Object.keys(zoneWidgetData).find((zoneId: string) =>
zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected) zoneWidgetData[zoneId].some((widget: WidgetData) => widget.id === rightClickSelected)
);
if (!selectedZone) return;
const selectedWidget = zoneWidgetData[selectedZone].find((widget: WidgetData) => widget.id === rightClickSelected);
if (selectedWidget) {
rotationStartRef.current = selectedWidget.rotation || [0, 0, 0];
}
}
};
const handleMouseMove = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return;
const selectedZone = Object.keys(zoneWidgetData).find((zoneId: string) =>
zoneWidgetData[zoneId].some((widget: WidgetData) => widget.id === rightClickSelected)
); );
if (!selectedZone) return; if (!selectedZone) return;
const selectedWidget = zoneWidgetData[selectedZone].find(widget => widget.id === rightClickSelected); const selectedWidget = zoneWidgetData[selectedZone].find((widget: WidgetData) => widget.id === rightClickSelected);
if (!selectedWidget) return; if (!selectedWidget) return;
const rect = gl.domElement.getBoundingClientRect(); const rect = gl.domElement.getBoundingClientRect();
@ -194,72 +242,184 @@ 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" && raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
const newPosition: [number, number, number] = [
updateWidgetPosition(selectedZone, rightClickSelected, [
planeIntersect.current.x, planeIntersect.current.x,
selectedWidget.position[1], selectedWidget.position[1],
planeIntersect.current.z planeIntersect.current.z
]); ];
updateWidgetPosition(selectedZone, rightClickSelected, newPosition);
} }
if (rightSelect === "Vertical Move") { if (rightSelect === "Vertical Move") {
if (raycaster.ray.intersectPlane(verticalPlane.current, planeIntersect.current)) { if (raycaster.ray.intersectPlane(verticalPlane.current, planeIntersect.current)) {
updateWidgetPosition(selectedZone, rightClickSelected, [ updateWidgetPosition(selectedZone, rightClickSelected, [
selectedWidget.position[0], selectedWidget.position[0],
planeIntersect.current.y, // Ensure Y value updates correctly planeIntersect.current.y,
selectedWidget.position[2] selectedWidget.position[2]
]); ]);
} else {
console.log("No Intersection with Vertical Plane");
} }
} }
if (rightSelect === "RotateX") {
const deltaX = event.clientX - mouseStartRef.current.x;
const rotationSpeed = 0.03;
const newRotation: [number, number, number] = [
rotationStartRef.current[0] + deltaX * rotationSpeed,
rotationStartRef.current[1],
rotationStartRef.current[2]
];
updateWidgetRotation(selectedZone, rightClickSelected, newRotation);
}
if (rightSelect === "RotateY") {
const deltaY = event.clientY - mouseStartRef.current.y;
const rotationSpeed = 0.03;
const newRotation: [number, number, number] = [
rotationStartRef.current[0],
rotationStartRef.current[1] + deltaY * rotationSpeed,
rotationStartRef.current[2]
];
updateWidgetRotation(selectedZone, rightClickSelected, newRotation);
}
if (rightSelect === "RotateZ") {
const deltaX = event.movementX;
const rotationSpeed = 0.03;
const currentRotation = selectedWidget.rotation || [0, 0, 0];
const newRotation: [number, number, number] = [
currentRotation[0],
currentRotation[1],
currentRotation[2] + deltaX * rotationSpeed
];
updateWidgetRotation(selectedZone, rightClickSelected, newRotation);
}
}; };
const handleMouseUp = () => { const handleMouseUp = () => {
if (!rightClickSelected || !rightSelect) return;
if (rightClickSelected && (rightSelect === "Horizontal Move" || rightSelect === "Vertical Move")) { const selectedZone = Object.keys(zoneWidgetData).find(zoneId =>
zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
);
if (!selectedZone) return;
const selectedWidget = zoneWidgetData[selectedZone].find(widget => widget.id === rightClickSelected);
if (!selectedWidget) return;
// Format values to 2 decimal places
const formatValues = (vals: number[]) => vals.map(val => parseFloat(val.toFixed(2)));
if (rightSelect === "Horizontal Move" || rightSelect === "Vertical Move") {
console.log(`${rightSelect} Completed - Full Position:`, formatValues(selectedWidget.position));
let lastPosition = formatValues(selectedWidget.position) as [number, number, number];
(async () => {
let response = await update3dWidget(selectedZone, organization, rightClickSelected, lastPosition);
console.log('response: ', response);
if (response) {
console.log("Widget position updated in API:", response);
}
})();
}
else if (rightSelect.includes("Rotate")) {
const rotation = selectedWidget.rotation || [0, 0, 0];
console.log(`${rightSelect} Completed - Full Rotation:`, formatValues(rotation));
let lastPosition = formatValues(rotation) as [number, number, number];
console.log('lastPosition: ', lastPosition);
(async () => {
let response = await update3dWidgetRotation(selectedZone, organization, rightClickSelected, lastPosition);
console.log('response: ', response);
if (response) {
console.log("Widget position updated in API:", response);
}
})();
}
// Reset selection
setTimeout(() => { setTimeout(() => {
setRightClickSelected(null); setRightClickSelected(null);
setRightSelect(null); setRightSelect(null);
}, 50); }, 50);
}
}; };
window.addEventListener("mousedown", handleMouseDown);
// Attach events to window instead of gl.domElement
window.addEventListener("mousemove", handleMouseMove); window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp); window.addEventListener("mouseup", handleMouseUp);
return () => { return () => {
window.removeEventListener("mousedown", handleMouseDown);
window.removeEventListener("mousemove", handleMouseMove); window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp); window.removeEventListener("mouseup", handleMouseUp);
}; };
}, [rightClickSelected, rightSelect, zoneWidgetData, gl]); }, [rightClickSelected, rightSelect, zoneWidgetData, gl]);
return ( return (
<> <>
{activeZoneWidgets.map(({ id, type, position }) => { {activeZoneWidgets.map(({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => {
const handleRightClick = (event: React.MouseEvent) => { const handleRightClick = (event: React.MouseEvent, id: string) => {
event.preventDefault(); event.preventDefault();
setRightClickSelected(id) 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);
}; };
switch (type) { switch (type) {
case "ui-Widget 1": case "ui-Widget 1":
return <ProductionCapacity key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />; return (
<ProductionCapacity
key={id}
id={id}
type={type}
position={position}
rotation={rotation}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
case "ui-Widget 2": case "ui-Widget 2":
return <ReturnOfInvestment key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />; return (
<ReturnOfInvestment
key={id}
id={id}
type={type}
position={position}
rotation={rotation}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
case "ui-Widget 3": case "ui-Widget 3":
return <StateWorking key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />; return (
<StateWorking
key={id}
id={id}
type={type}
position={position}
rotation={rotation}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
case "ui-Widget 4": case "ui-Widget 4":
return <Throughput key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />; return (
<Throughput
key={id}
id={id}
type={type}
position={position}
rotation={rotation}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
default: default:
return null; return null;
} }
})} })}
</> </>
); );
} }

20
app/src/components/ui/componets/DroppedFloatingWidgets.tsx
View File

@ -456,7 +456,7 @@ const DroppedObjects: React.FC = () => {
...zone.objects[draggingIndex.index], ...zone.objects[draggingIndex.index],
position: boundedPosition, position: boundedPosition,
}, },
index:draggingIndex.index, index: draggingIndex.index,
zoneId: zone.zoneId zoneId: zone.zoneId
} }
if (visualizationSocket) { if (visualizationSocket) {
@ -509,40 +509,34 @@ const DroppedObjects: React.FC = () => {
{zone.objects.map((obj, index) => ( {zone.objects.map((obj, index) => (
<div <div
key={`${zoneName}-${index}`} key={`${zoneName}-${index}`}
className={`${obj.className} ${ className={`${obj.className} ${selectedChartId?.id === obj.id && "activeChart"}`}
selectedChartId?.id === obj.id && "activeChart"
}`}
ref={chartWidget} ref={chartWidget}
style={{ style={{
position: "absolute", position: "absolute",
top: top:
typeof obj.position.top === "number" typeof obj.position.top === "number"
? `calc(${obj.position.top}px + ${ ? `calc(${obj.position.top}px + ${isPlaying && selectedZone.activeSides.includes("top")
isPlaying && selectedZone.activeSides.includes("top")
? 90 ? 90
: 0 : 0
}px)` }px)`
: "auto", : "auto",
left: left:
typeof obj.position.left === "number" typeof obj.position.left === "number"
? `calc(${obj.position.left}px + ${ ? `calc(${obj.position.left}px + ${isPlaying && selectedZone.activeSides.includes("left")
isPlaying && selectedZone.activeSides.includes("left")
? 90 ? 90
: 0 : 0
}px)` }px)`
: "auto", : "auto",
right: right:
typeof obj.position.right === "number" typeof obj.position.right === "number"
? `calc(${obj.position.right}px + ${ ? `calc(${obj.position.right}px + ${isPlaying && selectedZone.activeSides.includes("right")
isPlaying && selectedZone.activeSides.includes("right")
? 90 ? 90
: 0 : 0
}px)` }px)`
: "auto", : "auto",
bottom: bottom:
typeof obj.position.bottom === "number" typeof obj.position.bottom === "number"
? `calc(${obj.position.bottom}px + ${ ? `calc(${obj.position.bottom}px + ${isPlaying && selectedZone.activeSides.includes("bottom")
isPlaying && selectedZone.activeSides.includes("bottom")
? 90 ? 90
: 0 : 0
}px)` }px)`
@ -559,7 +553,7 @@ const DroppedObjects: React.FC = () => {
</> </>
) : obj.className === "warehouseThroughput floating" ? ( ) : obj.className === "warehouseThroughput floating" ? (
<> <>
<WarehouseThroughputComponent object={obj}/> <WarehouseThroughputComponent object={obj} />
</> </>
) : obj.className === "fleetEfficiency floating" ? ( ) : obj.className === "fleetEfficiency floating" ? (
<> <>

81
app/src/components/ui/componets/RealTimeVisulization.tsx
View File

@ -7,7 +7,6 @@ import DisplayZone from "./DisplayZone";
import Scene from "../../../modules/scene/scene"; import Scene from "../../../modules/scene/scene";
import useModuleStore from "../../../store/useModuleStore"; import useModuleStore from "../../../store/useModuleStore";
import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore"; import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
import { import {
useAsset3dWidget, useAsset3dWidget,
@ -24,7 +23,8 @@ import RenderOverlay from "../../templates/Overlay";
import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup"; import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup";
import DroppedObjects from "./DroppedFloatingWidgets"; import DroppedObjects from "./DroppedFloatingWidgets";
import EditWidgetOption from "../menu/EditWidgetOption"; import EditWidgetOption from "../menu/EditWidgetOption";
import { useRightClickSelected } from "../../../store/useZone3DWidgetStore"; import { useEditWidgetOptionsStore, useRightClickSelected, useRightSelected } from "../../../store/useZone3DWidgetStore";
type Side = "top" | "bottom" | "left" | "right"; type Side = "top" | "bottom" | "left" | "right";
@ -59,6 +59,8 @@ const RealTimeVisulization: React.FC = () => {
const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { rightSelect, setRightSelect } = useRightSelected()
const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore()
const { rightClickSelected, setRightClickSelected } = useRightClickSelected() const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false); const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
@ -69,6 +71,7 @@ const RealTimeVisulization: React.FC = () => {
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption(); const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
const { visualizationSocket } = useSocketStore(); const { visualizationSocket } = useSocketStore();
useEffect(() => { useEffect(() => {
async function GetZoneData() { async function GetZoneData() {
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
@ -142,8 +145,8 @@ const RealTimeVisulization: React.FC = () => {
const relativeX = event.clientX - canvasRect.left; const relativeX = event.clientX - canvasRect.left;
const relativeY = event.clientY - canvasRect.top; const relativeY = event.clientY - canvasRect.top;
const newPosition = determinePosition(canvasRect, relativeX, relativeY) const newPosition = determinePosition(canvasRect, relativeX, relativeY);
console.log('newPosition: ', newPosition); console.log("newPosition: ", newPosition);
const newObject = { const newObject = {
...droppedData, ...droppedData,
id: generateUniqueId(), id: generateUniqueId(),
@ -162,12 +165,12 @@ const RealTimeVisulization: React.FC = () => {
let addFloatingWidget = { let addFloatingWidget = {
organization: organization, organization: organization,
widget: newObject, widget: newObject,
zoneId: selectedZone.zoneId zoneId: selectedZone.zoneId,
} };
console.log('newObject: ', newObject); console.log("newObject: ", newObject);
if (visualizationSocket) { if (visualizationSocket) {
visualizationSocket.emit("v2:viz-float:add", addFloatingWidget) visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
} }
// let response = await addingFloatingWidgets( // let response = await addingFloatingWidgets(
@ -196,8 +199,47 @@ const RealTimeVisulization: React.FC = () => {
})); }));
} catch (error) { } } catch (error) { }
}; };
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
const editWidgetOptions = document.querySelector(
".editWidgetOptions-wrapper"
);
if (
editWidgetOptions &&
!editWidgetOptions.contains(event.target as Node)
) {
setRightClickSelected(null);
setRightSelect(null);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [setRightClickSelected]);
// Add this useEffect hook to your component
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
const editWidgetOptions = document.querySelector(
".editWidgetOptions-wrapper"
);
if (
editWidgetOptions &&
!editWidgetOptions.contains(event.target as Node)
) {
setRightClickSelected(null);
setRightSelect(null);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [setRightClickSelected]);
function handleRightClickSel(){}
return ( return (
<div <div
ref={containerRef} ref={containerRef}
@ -231,12 +273,25 @@ const RealTimeVisulization: React.FC = () => {
> >
<Scene /> <Scene />
</div> </div>
{activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />} {activeModule === "visualization" && selectedZone.zoneName !== "" && (
<DroppedObjects />
)}
{activeModule === "visualization" && <SocketRealTimeViz />} {activeModule === "visualization" && <SocketRealTimeViz />}
{activeModule === "visualization" && widgetSubOption === "3D" && rightClickSelected && <EditWidgetOption {activeModule === "visualization" &&
options={["Duplicate", "Vertical Move", "Horizontal Move", "Delete"]} editWidgetOptions &&
/>} rightClickSelected && (
<EditWidgetOption
options={[
"Duplicate",
"Vertical Move",
"Horizontal Move",
"RotateX",
"RotateY",
"Delete",
]}
/>
)}
{activeModule === "visualization" && ( {activeModule === "visualization" && (
<> <>

42
app/src/components/ui/menu/EditWidgetOption.tsx
View File

@ -1,26 +1,48 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { useLeftData, useRightSelected, useTopData } from "../../../store/useZone3DWidgetStore"; import {
useEditWidgetOptionsStore,
useLeftData,
useRightClickSelected,
useRightSelected,
useTopData,
} from "../../../store/useZone3DWidgetStore";
interface EditWidgetOptionProps { interface EditWidgetOptionProps {
options: string[]; options: string[];
} }
const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({ options }) => { const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({
const { top, setTop } = useTopData() options,
const { left, setLeft } = useLeftData() }) => {
const { rightSelect, setRightSelect } = useRightSelected() const { top } = useTopData();
const { left } = useLeftData();
const { setRightSelect } = useRightSelected();
const { setEditWidgetOptions } = useEditWidgetOptionsStore();
useEffect(() => { useEffect(() => {
console.log('left: ', left); }, [top, left]);
console.log('top: ', top);
}, [top, left])
return ( return (
<div className="editWidgetOptions-wrapper" style={{ top: top + "px", left: left + "px" }}> <div
className="editWidgetOptions-wrapper"
style={{
position: "absolute",
top: `${top}px`,
left: `${left}px`,
zIndex: 10000,
}}
>
<div className="editWidgetOptions"> <div className="editWidgetOptions">
{options.map((option, index) => ( {options.map((option, index) => (
<div className="option" key={index} onClick={(e) => setRightSelect(option)}> <div
className="option"
key={index}
onClick={(e) => {
setRightSelect(option);
setEditWidgetOptions(false);
}}
>
{option} {option}
</div> </div>
))} ))}

2
app/src/components/ui/realTimeVis/charts/BarGraphComponent.tsx
View File

@ -238,7 +238,7 @@ const BarGraphComponent = ({
}; };
useEffect(() => { useEffect(() => {
console.log("titleeeeeeeeeeeeeeeeeee",title);
},[]) },[])
// Memoize Theme Colors // Memoize Theme Colors

2
app/src/components/ui/realTimeVis/charts/DoughnutGraphComponent.tsx
View File

@ -51,7 +51,7 @@ const DoughnutGraphComponent = ({
}; };
useEffect(() => { useEffect(() => {
console.log("titleeeeeeeeeeeeeeeeeee",title);
},[]) },[])
// Memoize Theme Colors // Memoize Theme Colors

2
app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx
View File

@ -51,7 +51,7 @@ const LineGraphComponent = ({
}; };
useEffect(() => { useEffect(() => {
console.log("titleeeeeeeeeeeeeeeeeee",title);
},[]) },[])
// Memoize Theme Colors // Memoize Theme Colors

2
app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx
View File

@ -237,7 +237,7 @@ const PieChartComponent = ({
}; };
useEffect(() => { useEffect(() => {
console.log("titleeeeeeeeeeeeeeeeeee",title);
},[]) },[])
// Memoize Theme Colors // Memoize Theme Colors

2
app/src/components/ui/realTimeVis/charts/PolarAreaGraphComponent.tsx
View File

@ -51,7 +51,7 @@ const PolarAreaGraphComponent = ({
}; };
useEffect(() => { useEffect(() => {
console.log("titleeeeeeeeeeeeeeeeeee",title);
},[]) },[])
// Memoize Theme Colors // Memoize Theme Colors

3
app/src/services/realTimeVisulization/zoneData/add3dWidget.ts
View File

@ -5,9 +5,6 @@ export const adding3dWidgets = async (
organization: string, organization: string,
widget: {} widget: {}
) => { ) => {
console.log('widget: ', widget);
console.log('organization: ', organization);
console.log('zoneId: ', zoneId);
try { try {
const response = await fetch( const response = await fetch(
`${url_Backend_dwinzo}/api/v2/3dwidget/save`, `${url_Backend_dwinzo}/api/v2/3dwidget/save`,

38
app/src/services/realTimeVisulization/zoneData/delete3dWidget.ts Normal file
View File

@ -0,0 +1,38 @@
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
// let url_Backend_dwinzo = `http://192.168.0.102:5000`;
export const delete3dWidgetApi = async (
zoneId: string,
organization: string,
id: string
) => {
console.log("zoneId: ", zoneId);
console.log("organization: ", organization);
console.log("id: ", id);
try {
const response = await fetch(
`${url_Backend_dwinzo}/api/v2/widget3D/delete`,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ organization, zoneId, id }),
}
);
if (!response.ok) {
throw new Error("Failed to delete floating widget in the zone");
}
const result = await response.json();
return result;
} catch (error) {
if (error instanceof Error) {
throw new Error(error.message);
} else {
throw new Error("An unknown error occurred");
}
}
};

81
app/src/services/realTimeVisulization/zoneData/update3dWidget.ts Normal file
View File

@ -0,0 +1,81 @@
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
// let url_Backend_dwinzo = `http://192.168.0.102:5000`;
export const update3dWidget = async (
zoneId: string,
organization: string,
id: string,
position?: [number, number, number]
) => {
console.log("organization: ", organization);
console.log("zoneId: ", zoneId);
try {
const response = await fetch(
`${url_Backend_dwinzo}/api/v2/modifyPR/widget3D`,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
organization,
zoneId,
id,
position,
}),
}
);
if (!response.ok) {
throw new Error("Failed to add 3dwidget in the zone");
}
const result = await response.json();
return result;
} catch (error) {
if (error instanceof Error) {
throw new Error(error.message);
} else {
throw new Error("An unknown error occurred");
}
}
};
export const update3dWidgetRotation = async (
zoneId: string,
organization: string,
id: string,
rotation?: [number, number, number]
) => {
console.log("organization: ", organization);
console.log("zoneId: ", zoneId);
try {
const response = await fetch(
`${url_Backend_dwinzo}/api/v2/modifyPR/widget3D`,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
organization,
zoneId,
id,
rotation,
}),
}
);
if (!response.ok) {
throw new Error("Failed to add 3dwidget in the zone");
}
const result = await response.json();
return result;
} catch (error) {
if (error instanceof Error) {
throw new Error(error.message);
} else {
throw new Error("An unknown error occurred");
}
}
};

49
app/src/store/useZone3DWidgetStore.ts
View File

@ -1,10 +1,10 @@
import { create } from "zustand"; import { create } from "zustand";
type WidgetData = { type WidgetData = {
id: string; id: string;
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
rotation?: [number, number, number];
tempPosition?: [number, number, number]; tempPosition?: [number, number, number];
}; };
@ -13,38 +13,59 @@ type ZoneWidgetStore = {
setZoneWidgetData: (zoneId: string, widgets: WidgetData[]) => void; setZoneWidgetData: (zoneId: string, widgets: WidgetData[]) => void;
addWidget: (zoneId: string, widget: WidgetData) => void; addWidget: (zoneId: string, widget: WidgetData) => void;
updateWidgetPosition: (zoneId: string, widgetId: string, newPosition: [number, number, number]) => void; updateWidgetPosition: (zoneId: string, widgetId: string, newPosition: [number, number, number]) => void;
updateWidgetRotation: (zoneId: string, widgetId: string, newRotation: [number, number, number]) => void;
}; };
export const useZoneWidgetStore = create<ZoneWidgetStore>((set) => ({ export const useZoneWidgetStore = create<ZoneWidgetStore>((set) => ({
zoneWidgetData: {}, zoneWidgetData: {},
setZoneWidgetData: (zoneId, widgets) => setZoneWidgetData: (zoneId: string, widgets: WidgetData[]) =>
set((state) => ({ set((state: ZoneWidgetStore) => ({
zoneWidgetData: { ...state.zoneWidgetData, [zoneId]: widgets }, zoneWidgetData: { ...state.zoneWidgetData, [zoneId]: widgets },
})), })),
addWidget: (zoneId, widget) => addWidget: (zoneId: string, widget: WidgetData) =>
set((state) => ({ set((state: ZoneWidgetStore) => ({
zoneWidgetData: { zoneWidgetData: {
...state.zoneWidgetData, ...state.zoneWidgetData,
[zoneId]: [...(state.zoneWidgetData[zoneId] || []), widget], [zoneId]: [...(state.zoneWidgetData[zoneId] || []), { ...widget, rotation: widget.rotation || [0, 0, 0] }],
}, },
})), })),
updateWidgetPosition: (zoneId, widgetId, newPosition) => updateWidgetPosition: (zoneId: string, widgetId: string, newPosition: [number, number, number]) =>
set((state) => { set((state: ZoneWidgetStore) => {
const widgets = state.zoneWidgetData[zoneId] || []; const widgets = state.zoneWidgetData[zoneId] || [];
return { return {
zoneWidgetData: { zoneWidgetData: {
...state.zoneWidgetData, ...state.zoneWidgetData,
[zoneId]: widgets.map((widget) => [zoneId]: widgets.map((widget: WidgetData) =>
widget.id === widgetId ? { ...widget, position: newPosition } : widget widget.id === widgetId ? { ...widget, position: newPosition } : widget
), ),
}, },
}; };
}), }),
updateWidgetRotation: (zoneId: string, widgetId: string, newRotation: [number, number, number]) =>
set((state: ZoneWidgetStore) => {
const widgets = state.zoneWidgetData[zoneId] || [];
return {
zoneWidgetData: {
...state.zoneWidgetData,
[zoneId]: widgets.map((widget: WidgetData) =>
widget.id === widgetId ? { ...widget, rotation: newRotation } : widget
),
},
};
}),
})); }));
// export type WidgetData = {
// id: string;
// type: string;
// position: [number, number, number];
// rotation?: [number, number, number];
// tempPosition?: [number, number, number];
// };
interface RightClickStore { interface RightClickStore {
rightClickSelected: string | null; rightClickSelected: string | null;
@ -75,3 +96,13 @@ export const useRightSelected = create<RightSelectStore>((set) => ({
rightSelect: null, // Default state is null rightSelect: null, // Default state is null
setRightSelect: (x) => set({ rightSelect: x }), setRightSelect: (x) => set({ rightSelect: x }),
})); }));
interface EditWidgetOptionsStore {
editWidgetOptions: boolean;
setEditWidgetOptions: (value: boolean) => void;
}
export const useEditWidgetOptionsStore = create<EditWidgetOptionsStore>((set) => ({
editWidgetOptions: false, // Initial state
setEditWidgetOptions: (value: boolean) => set({ editWidgetOptions: value }),
}));

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

@ -729,9 +729,9 @@
.editWidgetOptions { .editWidgetOptions {
position: absolute; position: absolute;
top: 50%; // top: 50%;
left: 50%; // left: 50%;
transform: translate(-50%, -50%); // transform: translate(-50%, -50%);
background-color: var(--background-color); background-color: var(--background-color);
z-index: 3; z-index: 3;
display: flex; display: flex;
@ -739,6 +739,7 @@
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
min-width: 150px;
.option { .option {
padding: 8px 10px; padding: 8px 10px;
color: var(--text-color); color: var(--text-color);