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

3d editoption api added and rotation functionality added

This commit is contained in:
Gomathi 2025-04-04 18:47:47 +05:30
parent 46d4308f9a
commit baed3cd98b
22 changed files with 637 additions and 448 deletions

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

@ -157,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);
} }
} }
} }
@ -178,7 +178,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, posit
useEffect(() => { useEffect(() => {
console.log('rotation: ', rotation);
}, [rotation]) }, [rotation])
const rotationDegrees = { const rotationDegrees = {
x: (rotation[0] * 180) / Math.PI, x: (rotation[0] * 180) / Math.PI,
@ -202,7 +202,6 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, posit
transform: transformStyle.transform, transform: transformStyle.transform,
transformStyle: 'preserve-3d', transformStyle: 'preserve-3d',
transition: 'transform 0.1s ease-out' 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 })}

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/sidebarLeft/visualization/widgets/Widgets2D.tsx
View File

@ -101,7 +101,7 @@ const ProgressBarWidget = ({
</div> </div>
); );
}; };
console.log(chartTypes, "chartTypes");
const Widgets2D = () => { const Widgets2D = () => {
return ( return (

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)

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

@ -1,10 +1,6 @@
import { useThree } from "@react-three/fiber"; import { useThree } from "@react-three/fiber";
import React, { useEffect, useRef } from "react"; import React, { useEffect, useRef } from "react";
import { import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../store/store";
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";
import * as THREE from "three"; import * as THREE from "three";
@ -17,391 +13,413 @@ 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 { import { useEditWidgetOptionsStore, useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
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 = { type WidgetData = {
id: string; id: string;
type: string; type: string;
position: [number, number, number]; position: [number, number, number];
rotation?: [number, number, number]; rotation?: [number, number, number];
tempPosition?: [number, number, number]; tempPosition?: [number, number, number];
}; };
export default function Dropped3dWidgets() { export default function Dropped3dWidgets() {
const { widgetSelect } = useAsset3dWidget(); const { widgetSelect } = useAsset3dWidget();
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
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 { setEditWidgetOptions } = useEditWidgetOptionsStore(); const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore()
const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition, updateWidgetRotation } = useZoneWidgetStore();
const { setWidgets3D } = use3DWidget();
const { visualizationSocket } = useSocketStore();
const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
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 planeIntersect = useRef(new THREE.Vector3());
// const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 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 });
const { useEffect(() => {
zoneWidgetData, if (activeModule !== "visualization") return;
setZoneWidgetData, if (!selectedZone.zoneId) return;
addWidget,
updateWidgetPosition,
updateWidgetRotation,
} = useZoneWidgetStore();
const { setWidgets3D } = use3DWidget();
const { visualizationSocket } = useSocketStore();
const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
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 planeIntersect = useRef(new THREE.Vector3());
// const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 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(() => { const email = localStorage.getItem("email") || "";
if (activeModule !== "visualization") return; const organization = email?.split("@")[1]?.split(".")[0];
if (!selectedZone.zoneId) return;
const email = localStorage.getItem("email") || ""; async function get3dWidgetData() {
const organization = email?.split("@")[1]?.split(".")[0]; const result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
console.log('result: ', result);
setWidgets3D(result);
async function get3dWidgetData() { const formattedWidgets = result.map((widget: WidgetData) => ({
const result = await get3dWidgetZoneData( id: widget.id,
selectedZone.zoneId, type: widget.type,
organization position: widget.position,
); rotation: widget.rotation || [0, 0, 0],
setWidgets3D(result); }));
const formattedWidgets = result.map((widget: WidgetData) => ({
id: widget.id,
type: widget.type,
position: widget.position,
rotation: widget.rotation || [0, 0, 0],
}));
setZoneWidgetData(selectedZone.zoneId, formattedWidgets); setZoneWidgetData(selectedZone.zoneId, formattedWidgets);
}
get3dWidgetData();
}, [selectedZone.zoneId, activeModule]);
useEffect(() => {
if (activeModule !== "visualization") return;
if (widgetSubOption === "Floating" || widgetSubOption === "2D") return;
if (selectedZone.zoneName === "") return;
const canvasElement = gl.domElement;
const onDrop = async (event: DragEvent) => {
event.preventDefault();
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
if (!widgetSelect.startsWith("ui")) return;
const group1 = scene.getObjectByName("itemsGroup");
if (!group1) return;
const intersects = raycaster
.intersectObjects(scene.children, true)
.filter(
(intersect) =>
!intersect.object.name.includes("Roof") &&
!intersect.object.name.includes("agv-collider") &&
!intersect.object.name.includes("MeasurementReference") &&
!intersect.object.userData.isPathObject &&
!(intersect.object.type === "GridHelper")
);
if (intersects.length > 0) {
const { x, y, z } = intersects[0].point;
const newWidget: WidgetData = {
id: generateUniqueId(),
type: widgetSelect,
position: [x, y, z],
rotation: [0, 0, 0],
};
const add3dWidget = {
organization: organization,
widget: newWidget,
zoneId: selectedZone.zoneId,
};
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
} }
addWidget(selectedZone.zoneId, newWidget); get3dWidgetData();
} }, [selectedZone.zoneId, activeModule]);
};
canvasElement.addEventListener("drop", onDrop); useEffect(() => {
return () => { if (activeModule !== "visualization") return;
canvasElement.removeEventListener("drop", onDrop); if (widgetSubOption === "Floating" || widgetSubOption === "2D") return;
}; if (selectedZone.zoneName === "") return;
}, [widgetSelect, activeModule, selectedZone.zoneId, widgetSubOption]);
const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || []; const canvasElement = gl.domElement;
useEffect(() => { const onDrop = async (event: DragEvent) => {
if (!rightClickSelected) return;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
if (rightSelect === "Duplicate") {
const widgetToDuplicate = activeZoneWidgets.find(
(w: WidgetData) => w.id === rightClickSelected
);
if (!widgetToDuplicate) return;
const newWidget: WidgetData = {
id: generateUniqueId(),
type: widgetToDuplicate.type,
position: [
widgetToDuplicate.position[0] + 0.5,
widgetToDuplicate.position[1],
widgetToDuplicate.position[2] + 0.5,
],
rotation: widgetToDuplicate.rotation || [0, 0, 0],
};
const add3dWidget = {
organization,
widget: newWidget,
zoneId: selectedZone.zoneId,
};
addWidget(selectedZone.zoneId, newWidget);
setRightSelect(null);
setRightClickSelected(null);
}
if (rightSelect === "Delete") {
const deleteWidget = {
organization,
widgetId: rightClickSelected,
zoneId: selectedZone.zoneId,
};
setZoneWidgetData(
selectedZone.zoneId,
activeZoneWidgets.filter((w: WidgetData) => w.id !== rightClickSelected)
);
setRightClickSelected(null);
setRightSelect(null);
}
}, [rightSelect, rightClickSelected]);
useEffect(() => {
const handleMouseDown = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return;
if (rightSelect === "RotateX" || rightSelect === "RotateY") {
mouseStartRef.current = { x: event.clientX, y: event.clientY };
const selectedZone = Object.keys(zoneWidgetData).find(
(zoneId: string) =>
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;
const selectedWidget = zoneWidgetData[selectedZone].find(
(widget: WidgetData) => widget.id === rightClickSelected
);
if (!selectedWidget) return;
const rect = gl.domElement.getBoundingClientRect();
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
if (
rightSelect === "Horizontal Move" &&
raycaster.ray.intersectPlane(plane.current, planeIntersect.current)
) {
const newPosition: [number, number, number] = [
planeIntersect.current.x,
selectedWidget.position[1],
planeIntersect.current.z,
];
updateWidgetPosition(selectedZone, rightClickSelected, newPosition);
console.log("Horizontal Move - Final Position:", newPosition);
}
if (rightSelect === "Vertical Move") {
if (
raycaster.ray.intersectPlane(
verticalPlane.current,
planeIntersect.current
)
) {
updateWidgetPosition(selectedZone, rightClickSelected, [
selectedWidget.position[0],
planeIntersect.current.y,
selectedWidget.position[2],
]);
}
}
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 = () => {
if (
rightClickSelected &&
(rightSelect === "Horizontal Move" ||
rightSelect === "Vertical Move" ||
rightSelect === "RotateX" ||
rightSelect === "RotateY" ||
rightSelect === "RotateZ")
) {
setTimeout(() => {
setRightClickSelected(null);
setRightSelect(null);
}, 50);
}
};
window.addEventListener("mousedown", handleMouseDown);
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
return () => {
window.removeEventListener("mousedown", handleMouseDown);
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp);
};
}, [rightClickSelected, rightSelect, zoneWidgetData, gl]);
return (
<>
{activeZoneWidgets.map(
({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => {
const handleRightClick = (event: React.MouseEvent, id: string) => {
event.preventDefault(); event.preventDefault();
const canvasElement = document.getElementById(
"real-time-vis-canvas" const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
if (!widgetSelect.startsWith("ui")) return;
const group1 = scene.getObjectByName("itemsGroup");
if (!group1) return;
const intersects = raycaster.intersectObjects(scene.children, true).filter(
(intersect) =>
!intersect.object.name.includes("Roof") &&
!intersect.object.name.includes("agv-collider") &&
!intersect.object.name.includes("MeasurementReference") &&
!intersect.object.userData.isPathObject &&
!(intersect.object.type === "GridHelper")
); );
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); if (intersects.length > 0) {
setLeft(relativeX); const { x, y, z } = intersects[0].point;
}; const newWidget: WidgetData = {
id: generateUniqueId(),
type: widgetSelect,
position: [x, y, z],
rotation: [0, 0, 0],
};
switch (type) { const add3dWidget = {
case "ui-Widget 1": organization: organization,
return ( widget: newWidget,
<ProductionCapacity zoneId: selectedZone.zoneId
key={id} };
id={id}
type={type} if (visualizationSocket) {
position={position} visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
rotation={rotation} }
onContextMenu={(e) => handleRightClick(e, id)}
/> addWidget(selectedZone.zoneId, newWidget);
); }
case "ui-Widget 2": };
return (
<ReturnOfInvestment canvasElement.addEventListener("drop", onDrop);
key={id} return () => {
id={id} canvasElement.removeEventListener("drop", onDrop);
type={type} };
position={position} }, [widgetSelect, activeModule, selectedZone.zoneId, widgetSubOption]);
// rotation={rotation}
onContextMenu={(e) => handleRightClick(e, id)} const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
/>
); useEffect(() => {
case "ui-Widget 3": if (!rightClickSelected) return;
return ( const email = localStorage.getItem("email") || "";
<StateWorking const organization = email?.split("@")[1]?.split(".")[0];
key={id}
id={id} if (rightSelect === "Duplicate") {
type={type} async function duplicateWidget() {
position={position}
// rotation={rotation}
onContextMenu={(e) => handleRightClick(e, id)} const widgetToDuplicate = activeZoneWidgets.find((w: WidgetData) => w.id === rightClickSelected);
/> if (!widgetToDuplicate) return;
); const newWidget: WidgetData = {
case "ui-Widget 4": id: generateUniqueId(),
return ( type: widgetToDuplicate.type,
<Throughput position: [
key={id} widgetToDuplicate.position[0] + 0.5,
id={id} widgetToDuplicate.position[1],
type={type} widgetToDuplicate.position[2] + 0.5,
position={position} ],
// rotation={rotation} rotation: widgetToDuplicate.rotation || [0, 0, 0],
onContextMenu={(e) => handleRightClick(e, id)} };
/> const adding3dWidget = {
); organization,
default: widget: newWidget,
return null; zoneId: selectedZone.zoneId
} };
let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget)
console.log('response: ', response);
addWidget(selectedZone.zoneId, newWidget);
setRightSelect(null);
setRightClickSelected(null);
}
duplicateWidget()
} }
)}
</> if (rightSelect === "Delete") {
); const deleteWidgetApi = async () => {
} try {
const deleteWidget = {
organization,
widgetId: rightClickSelected,
zoneId: selectedZone.zoneId,
};
// 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);
// }
} catch (error) {
console.error("Error deleting widget:", error);
} finally {
setRightClickSelected(null);
setRightSelect(null);
}
};
deleteWidgetApi();
}
}, [rightSelect, rightClickSelected]);
useEffect(() => {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const handleMouseDown = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return;
if (rightSelect === "RotateX" || rightSelect === "RotateY") {
mouseStartRef.current = { x: event.clientX, y: event.clientY };
const selectedZone = Object.keys(zoneWidgetData).find((zoneId: string) =>
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;
const selectedWidget = zoneWidgetData[selectedZone].find((widget: WidgetData) => widget.id === rightClickSelected);
if (!selectedWidget) return;
const rect = gl.domElement.getBoundingClientRect();
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
if (rightSelect === "Horizontal Move" && raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
const newPosition: [number, number, number] = [
planeIntersect.current.x,
selectedWidget.position[1],
planeIntersect.current.z
];
updateWidgetPosition(selectedZone, rightClickSelected, newPosition);
}
if (rightSelect === "Vertical Move") {
if (raycaster.ray.intersectPlane(verticalPlane.current, planeIntersect.current)) {
updateWidgetPosition(selectedZone, rightClickSelected, [
selectedWidget.position[0],
planeIntersect.current.y,
selectedWidget.position[2]
]);
}
}
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 = () => {
if (!rightClickSelected || !rightSelect) return;
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(() => {
setRightClickSelected(null);
setRightSelect(null);
}, 50);
};
window.addEventListener("mousedown", handleMouseDown);
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
return () => {
window.removeEventListener("mousedown", handleMouseDown);
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp);
};
}, [rightClickSelected, rightSelect, zoneWidgetData, gl]);
return (
<>
{activeZoneWidgets.map(({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => {
const handleRightClick = (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);
};
switch (type) {
case "ui-Widget 1":
return (
<ProductionCapacity
key={id}
id={id}
type={type}
position={position}
rotation={rotation}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
case "ui-Widget 2":
return (
<ReturnOfInvestment
key={id}
id={id}
type={type}
position={position}
rotation={rotation}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
case "ui-Widget 3":
return (
<StateWorking
key={id}
id={id}
type={type}
position={position}
rotation={rotation}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
case "ui-Widget 4":
return (
<Throughput
key={id}
id={id}
type={type}
position={position}
rotation={rotation}
onContextMenu={(e) => handleRightClick(e, id)}
/>
);
default:
return null;
}
})}
</>
);
}

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

@ -112,7 +112,7 @@ const DroppedObjects: React.FC = () => {
const zoneEntries = Object.entries(zones); const zoneEntries = Object.entries(zones);
if (zoneEntries.length === 0) return null; if (zoneEntries.length === 0) return null;
const [zoneName, zone] = zoneEntries[0]; const [zoneName, zone] = zoneEntries[0];
function handleDuplicate(zoneName: string, index: number) { function handleDuplicate(zoneName: string, index: number) {
setOpenKebabId(null); setOpenKebabId(null);
@ -123,14 +123,14 @@ const DroppedObjects: React.FC = () => {
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];
let deleteFloatingWidget = { let deleteFloatingWidget = {
floatWidgetID: id, floatWidgetID: id,
organization: organization, organization: organization,
zoneId: zone.zoneId zoneId: zone.zoneId
} }
if (visualizationSocket) { if (visualizationSocket) {
visualizationSocket.emit("v2:viz-float:delete", deleteFloatingWidget) visualizationSocket.emit("v2:viz-float:delete", deleteFloatingWidget)
} }
@ -143,7 +143,7 @@ const DroppedObjects: React.FC = () => {
// deleteObject(zoneName, id, index); // Call the deleteObject method from the store // deleteObject(zoneName, id, index); // Call the deleteObject method from the store
// } // }
} catch (error) { } catch (error) {
} }
} }
@ -448,7 +448,7 @@ const DroppedObjects: React.FC = () => {
// ...zone.objects[draggingIndex.index], // ...zone.objects[draggingIndex.index],
// position: boundedPosition, // position: boundedPosition,
// }); // });
let updateFloatingWidget = { let updateFloatingWidget = {
organization: organization, organization: organization,
@ -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) {
@ -464,7 +464,7 @@ const DroppedObjects: React.FC = () => {
} }
// if (response.message === "Widget updated successfully") { // if (response.message === "Widget updated successfully") {
console.log('boundedPosition: ', boundedPosition); console.log('boundedPosition: ', boundedPosition);
updateObjectPosition(zoneName, draggingIndex.index, boundedPosition); updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
// } // }
@ -479,7 +479,7 @@ const DroppedObjects: React.FC = () => {
// animationRef.current = null; // animationRef.current = null;
// } // }
} catch (error) { } catch (error) {
} finally { } finally {
// Clean up regardless of success or failure // Clean up regardless of success or failure
setDraggingIndex(null); setDraggingIndex(null);
@ -509,43 +509,37 @@ 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)`
: "auto", : "auto",
}} }}
onPointerDown={(event) => { onPointerDown={(event) => {
@ -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" ? (
<> <>

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

@ -23,11 +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 { import { useEditWidgetOptionsStore, useRightClickSelected, useRightSelected } from "../../../store/useZone3DWidgetStore";
useRightClickSelected,
useRightSelected,
useEditWidgetOptionsStore,
} from "../../../store/useZone3DWidgetStore";
type Side = "top" | "bottom" | "left" | "right"; type Side = "top" | "bottom" | "left" | "right";
@ -60,9 +57,11 @@ const RealTimeVisulization: React.FC = () => {
const [droppedObjects, setDroppedObjects] = useState<any[]>([]); const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
const [zonesData, setZonesData] = useState<FormattedZoneData>({}); const [zonesData, setZonesData] = useState<FormattedZoneData>({});
const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore();
const { rightClickSelected, setRightClickSelected } = useRightClickSelected(); const { rightSelect, setRightSelect } = useRightSelected()
const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore()
const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false); const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
const [floatingWidgets, setFloatingWidgets] = useState< const [floatingWidgets, setFloatingWidgets] = useState<
@ -71,7 +70,7 @@ const RealTimeVisulization: React.FC = () => {
const { widgetSelect, setWidgetSelect } = useAsset3dWidget(); const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption(); const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
const { visualizationSocket } = useSocketStore(); const { visualizationSocket } = useSocketStore();
const { setRightSelect } = useRightSelected();
useEffect(() => { useEffect(() => {
async function GetZoneData() { async function GetZoneData() {
@ -100,7 +99,7 @@ const RealTimeVisulization: React.FC = () => {
{} {}
); );
setZonesData(formattedData); setZonesData(formattedData);
} catch (error) {} } catch (error) { }
} }
GetZoneData(); GetZoneData();
@ -198,8 +197,27 @@ 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 // Add this useEffect hook to your component
useEffect(() => { useEffect(() => {
@ -264,14 +282,12 @@ const RealTimeVisulization: React.FC = () => {
editWidgetOptions && editWidgetOptions &&
rightClickSelected && ( rightClickSelected && (
<EditWidgetOption <EditWidgetOption
setWidgetSelect={setWidgetSelect}
options={[ options={[
"Duplicate", "Duplicate",
"Vertical Move", "Vertical Move",
"Horizontal Move", "Horizontal Move",
"RotateX", "RotateX",
"RotateY", "RotateY",
"RotateZ",
"Delete", "Delete",
]} ]}
/> />

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

@ -8,22 +8,19 @@ import {
} from "../../../store/useZone3DWidgetStore"; } from "../../../store/useZone3DWidgetStore";
interface EditWidgetOptionProps { interface EditWidgetOptionProps {
setWidgetSelect: any;
options: string[]; options: string[];
} }
const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({ const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({
setWidgetSelect,
options, options,
}) => { }) => {
const { top, setTop } = useTopData(); const { top } = useTopData();
const { left, setLeft } = useLeftData(); const { left } = useLeftData();
const { rightSelect, setRightSelect } = useRightSelected(); const { setRightSelect } = useRightSelected();
const { setEditWidgetOptions } = useEditWidgetOptionsStore(); const { setEditWidgetOptions } = useEditWidgetOptionsStore();
useEffect(() => { useEffect(() => {
console.log("left: ", left);
console.log("top: ", top);
}, [top, left]); }, [top, left]);
return ( return (

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");
}
}
};

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

@ -97,7 +97,6 @@ export const useRightSelected = create<RightSelectStore>((set) => ({
setRightSelect: (x) => set({ rightSelect: x }), setRightSelect: (x) => set({ rightSelect: x }),
})); }));
interface EditWidgetOptionsStore { interface EditWidgetOptionsStore {
editWidgetOptions: boolean; editWidgetOptions: boolean;
setEditWidgetOptions: (value: boolean) => void; setEditWidgetOptions: (value: boolean) => void;