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

Merge branch 'main' into realTimeVisulization

Browse Source
This commit is contained in:
gabriel
2025-04-11 18:07:36 +05:30
parent 8f5837ec9f dd91620a5c
commit c059fc8fd2
68 changed files with 3727 additions and 2672 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -168,7 +168,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
const response = await axios.get(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`
);
if (response.status === 200) {
setmeasurements(response.data.Data.measurements);
setDuration(response.data.Data.duration);
@@ -190,29 +190,23 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
}, [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) translate(-50%, -50%)`,
};
return (
<Html
position={position}
scale={[0.5, 0.5, 0.5]}
rotation={rotation}
transform
sprite
sprite={false}
zIndexRange={[1, 0]}
style={{
transform: transformStyle.transform,
transformStyle: "preserve-3d",
transition: "transform 0.1s ease-out",
}}
// style={{
// transform: transformStyle.transform,
// transformStyle: "preserve-3d",
// transition: "transform 0.1s ease-out",
// }}
onDragOver={(e) => {
e.preventDefault();
e.stopPropagation();
@@ -223,7 +217,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
}}
wrapperClass="pointer-none"
>
>
<div
className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""}`}
onClick={() => setSelectedChartId({ id: id, type: type })}
@@ -232,7 +226,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
style={{
width: "300px", // Original width
height: "300px", // Original height
transform: transformStyle.transform,
// transform: transformStyle.transform,
transformStyle: "preserve-3d",
position: "absolute",
}}

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

@@ -233,15 +233,16 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
return (
<Html
position={[position[0], position[1], position[2]]}
rotation={rotation}
scale={[0.5, 0.5, 0.5]}
transform
zIndexRange={[1, 0]}
sprite
style={{
transform: transformStyle.transform,
transformStyle: "preserve-3d",
transition: "transform 0.1s ease-out",
}}
sprite={false}
// style={{
// transform: transformStyle.transform,
// transformStyle: "preserve-3d",
// transition: "transform 0.1s ease-out",
// }}
>
<div
className={`returnOfInvestment card ${

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

@@ -111,15 +111,16 @@ const StateWorking: React.FC<StateWorkingProps> = ({
return (
<Html
position={[position[0], position[1], position[2]]}
rotation={rotation}
scale={[0.5, 0.5, 0.5]}
transform
zIndexRange={[1, 0]}
sprite
style={{
transform: transformStyle.transform,
transformStyle: "preserve-3d",
transition: "transform 0.1s ease-out",
}}
sprite={false}
// style={{
// transform: transformStyle.transform,
// transformStyle: "preserve-3d",
// transition: "transform 0.1s ease-out",
// }}
>
<div
className={`stateWorking-wrapper card ${

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

@@ -211,15 +211,16 @@ const Throughput: React.FC<ThroughputProps> = ({
return (
<Html
position={[position[0], position[1], position[2]]}
rotation={rotation}
scale={[0.5, 0.5, 0.5]}
transform
zIndexRange={[1, 0]}
sprite
style={{
transform: transformStyle.transform,
transformStyle: "preserve-3d",
transition: "transform 0.1s ease-out",
}}
sprite={false}
// style={{
// transform: transformStyle.transform,
// transformStyle: "preserve-3d",
// transition: "transform 0.1s ease-out",
// }}
>
<div
className={`throughput-wrapper card ${

14
app/src/components/layout/sidebarLeft/Assets.tsx
View File

@@ -1,16 +1,20 @@
import React, { useEffect, useMemo, useState } from "react";
import Search from "../../ui/inputs/Search";
import vehicle from "../../../assets/image/vehicles.png";
import workStation from "../../../assets/image/workStation.png";
import machines from "../../../assets/image/machines.png";
import feneration from "../../../assets/image/feneration.png";
import worker from "../../../assets/image/worker.png";
import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
import arch from "../../../assets/gltf-glb/arch.glb";
import door from "../../../assets/gltf-glb/door.glb";
import window from "../../../assets/gltf-glb/window.glb";
import { fetchAssets } from "../../../services/marketplace/fetchAssets";
import { useSelectedItem } from "../../../store/store";
// images -------------------
import vehicle from "../../../assets/image/categories/vehicles.png";
import workStation from "../../../assets/image/categories/workStation.png";
import machines from "../../../assets/image/categories/machines.png";
import feneration from "../../../assets/image/categories/feneration.png";
import worker from "../../../assets/image/categories/worker.png";
// -------------------------------------
interface AssetProp {
filename: string;
thumbnail?: string;

22
app/src/components/layout/sidebarLeft/visualization/Templates.tsx
View File

@@ -26,9 +26,14 @@ const Templates = () => {
templateData();
}, []);
const handleDeleteTemplate = async (id: string) => {
const handleDeleteTemplate = async (
e: React.MouseEvent<HTMLButtonElement>,
id: string
) => {
try {
e.stopPropagation();
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
let deleteTemplate = {
organization: organization,
@@ -49,7 +54,6 @@ const Templates = () => {
const handleLoadTemplate = async (template: any) => {
try {
if (selectedZone.zoneName === "") return;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
@@ -88,27 +92,27 @@ const Templates = () => {
return (
<div className="template-list">
{templates.map((template, index) => (
<div key={template.id} className="template-item">
<div
key={template.id}
className="template-item"
onClick={() => handleLoadTemplate(template)}
>
{template?.snapshot && (
<div className="template-image-container">
<img
src={template.snapshot}
alt={`${template.name} preview`}
className="template-image"
onClick={() => handleLoadTemplate(template)}
/>
</div>
)}
<div className="template-details">
<div
onClick={() => handleLoadTemplate(template)}
className="template-name"
>
<div className="template-name">
{/* {`Template ${index + 1}`} */}
<RenameInput value={`Template ${index + 1}`} />
</div>
<button
onClick={() => handleDeleteTemplate(template.id)}
onClick={(e) => handleDeleteTemplate(e, template.id)}
className="delete-button"
aria-label="Delete template"
>

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

@@ -107,7 +107,7 @@ const ProgressBarWidget = ({
const Widgets2D = () => {
return (
<div className="widget2D">
<div className="widget2D widgets-wrapper">
<div className="chart-container">
{chartTypes.map((type, index) => {
const widgetTitle = `Widget ${index + 1}`;

15
app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx
View File

@@ -12,22 +12,21 @@ const Widgets3D = () => {
];
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
return (
<div className="widgets-container widget3D">
<div className="widgets-container widgets-wrapper widget3D">
{widgets?.map((widget, index) => (
<div
key={index}
className="widget-item"
draggable
onDragStart={(e) => {
let name = widget.name
let crt = e.target
let name = widget.name;
let crt = e.target;
if (crt instanceof HTMLElement) {
const widget = crt.cloneNode(true) as HTMLElement;
e.dataTransfer.setDragImage(widget, 0, 0)
e.dataTransfer.effectAllowed = "move"
e.dataTransfer.setData("text/plain", "ui-" + name)
e.dataTransfer.setDragImage(widget, 0, 0);
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text/plain", "ui-" + name);
}
}}
onPointerDown={() => {
@@ -42,7 +41,7 @@ const Widgets3D = () => {
className="widget-image"
src={widget.img}
alt={widget.name}
draggable={false}
draggable={false}
/>
</div>
))}

2
app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx
View File

@@ -33,7 +33,7 @@ const WidgetsFloating = () => {
};
return (
<div className="floatingWidgets-wrapper">
<div className="floatingWidgets-wrapper widgets-wrapper">
{/* {widgets.map((widget) => (
<div
key={widget.id}

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

@@ -115,17 +115,10 @@ const Tools: React.FC = () => {
setOpenDrop(false); // Close the dropdown
}
};
const handleEscKeyPress = (event: KeyboardEvent) => {
if (event.key === "Escape") {
setIsPlaying(false); // Set isPlaying to false when Escape key is pressed
}
};
document.addEventListener("mousedown", handleOutsideClick);
document.addEventListener("keydown", handleEscKeyPress); // Listen for ESC key
return () => {
document.removeEventListener("mousedown", handleOutsideClick);
document.removeEventListener("keydown", handleEscKeyPress); // Clean up the event listener
};
}, []);
useEffect(() => {

37
app/src/components/ui/componets/AddButtons.tsx
View File

@@ -24,6 +24,7 @@ interface ButtonsProps {
activeSides: Side[];
panelOrder: Side[];
lockedPanels: Side[];
points: [];
zoneId: string;
zoneViewPortTarget: number[];
zoneViewPortPosition: number[];
@@ -41,6 +42,7 @@ interface ButtonsProps {
activeSides: Side[];
panelOrder: Side[];
lockedPanels: Side[];
points: [];
zoneId: string;
zoneViewPortTarget: number[];
zoneViewPortPosition: number[];
@@ -120,7 +122,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
// // Update the selectedZone state
// setSelectedZone(updatedZone);
// }
};
// Function to clean all widgets from a panel
@@ -168,6 +169,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
// Function to handle "+" button click
const handlePlusButtonClick = async (side: Side) => {
if (selectedZone.activeSides.includes(side)) {
console.log("open");
// Panel already exists: Remove widgets from that side and update activeSides
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
@@ -195,6 +197,18 @@ const AddButtons: React.FC<ButtonsProps> = ({
}
setSelectedZone(updatedZone);
if (hiddenPanels[selectedZone.zoneId]?.includes(side)) {
setHiddenPanels(prev => ({
...prev,
[selectedZone.zoneId]: prev[selectedZone.zoneId].filter(s => s !== side)
}));
}
// if(hiddenPanels[selectedZone.zoneId].includes(side))
// API call to delete the panel
// try {
// const response = await deletePanelApi(selectedZone.zoneId, side, organization);
@@ -240,7 +254,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
// } else {
//
// }
} catch (error) { }
} catch (error) {}
}
};
return (
@@ -250,8 +264,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
<div key={side} className={`side-button-container ${side}`}>
{/* "+" Button */}
<button
className={`side-button ${side}${selectedZone.activeSides.includes(side) ? " active" : ""
}`}
className={`side-button ${side}${
selectedZone.activeSides.includes(side) ? " active" : ""
}`}
onClick={() => handlePlusButtonClick(side)}
title={
selectedZone.activeSides.includes(side)
@@ -269,11 +284,10 @@ const AddButtons: React.FC<ButtonsProps> = ({
<div className="extra-Bs">
{/* Hide Panel */}
<div
className={`icon ${
hiddenPanels[selectedZone.zoneId]?.includes(side)
? "active"
: ""
}`}
className={`icon ${hiddenPanels[selectedZone.zoneId]?.includes(side)
? "active"
: ""
}`}
title={
hiddenPanels[selectedZone.zoneId]?.includes(side)
? "Show Panel"
@@ -301,8 +315,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
{/* Lock/Unlock Panel */}
<div
className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : ""
}`}
className={`icon ${
selectedZone.lockedPanels.includes(side) ? "active" : ""
}`}
title={
selectedZone.lockedPanels.includes(side)
? "Unlock Panel"

44
app/src/components/ui/componets/DisplayZone.tsx
View File

@@ -13,12 +13,17 @@ import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zone
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
interface HiddenPanels {
[zoneId: string]: Side[];
}
interface DisplayZoneProps {
zonesData: {
[key: string]: {
activeSides: Side[];
panelOrder: Side[];
lockedPanels: Side[];
points: [];
widgets: Widget[];
zoneId: string;
zoneViewPortTarget: number[];
@@ -31,6 +36,7 @@ interface DisplayZoneProps {
panelOrder: Side[];
lockedPanels: Side[];
zoneId: string;
points: [];
zoneViewPortTarget: number[];
zoneViewPortPosition: number[];
widgets: {
@@ -47,6 +53,7 @@ interface DisplayZoneProps {
activeSides: Side[];
panelOrder: Side[];
lockedPanels: Side[];
points: [];
zoneId: string;
zoneViewPortTarget: number[];
zoneViewPortPosition: number[];
@@ -59,12 +66,15 @@ interface DisplayZoneProps {
}[];
}>
>;
hiddenPanels: HiddenPanels; // Updated prop type
setHiddenPanels: React.Dispatch<React.SetStateAction<HiddenPanels>>; // Updated prop type
}
const DisplayZone: React.FC<DisplayZoneProps> = ({
zonesData,
selectedZone,
setSelectedZone,
hiddenPanels,
}) => {
// Ref for the container element
const containerRef = useRef<HTMLDivElement | null>(null);
@@ -74,8 +84,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
const [showLeftArrow, setShowLeftArrow] = useState(false);
const [showRightArrow, setShowRightArrow] = useState(false);
const { floatingWidget, setFloatingWidget } = useFloatingWidget()
const{setSelectedChartId}=useWidgetStore()
const { setSelectedChartId } = useWidgetStore()
// Function to calculate overflow state
const updateOverflowState = useCallback(() => {
@@ -152,13 +162,13 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
if (selectedZone?.zoneId === zoneId) {
return;
}
setSelectedChartId(null)
setSelectedChartId(null);
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
let response = await getSelect2dZoneData(zoneId, organization);
console.log('response: ', response);
let res = await getFloatingZoneData(zoneId, organization);
console.log('res: ', res);
setFloatingWidget(res);
// Set the selected zone in the store
@@ -168,26 +178,32 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
useDroppedObjectsStore.getState().addObject(zoneName, val);
});
}
setSelectedZone({
zoneName,
activeSides: response.activeSides || [],
panelOrder: response.panelOrder || [],
lockedPanels: response.lockedPanels || [],
widgets: response.widgets || [],
points: response.points || [],
zoneId: zoneId,
zoneViewPortTarget: response.viewPortCenter || {},
zoneViewPortPosition: response.viewPortposition || {},
});
} catch (error) {
}
}
return (
<div
ref={containerRef}
className={`zone-wrapper ${selectedZone?.activeSides?.includes("bottom") ? "bottom" : ""}`}
className={`zone-wrapper ${
selectedZone?.activeSides?.includes("bottom") &&
!hiddenPanels[selectedZone.zoneId]?.includes("bottom")
? "bottom"
: ""
}`}
>
{/* Left Arrow */}
{showLeftArrow && (
@@ -197,8 +213,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
)}
{/* Scrollable Zones Container */}
<div
ref={scrollContainerRef}
<div
ref={scrollContainerRef}
className="zones-wrapper"
style={{ overflowX: "auto", whiteSpace: "nowrap" }}
>
@@ -207,8 +223,12 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
{Object.keys(zonesData).map((zoneName, index) => (
<div
key={index}
className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""}`}
onClick={() => handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)}
className={`zone ${
selectedZone.zoneName === zoneName ? "active" : ""
}`}
onClick={() =>
handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)
}
>
{zoneName}
</div>

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

@@ -45,6 +45,7 @@ export const DraggableWidget = ({
zoneName: string;
zoneId: string;
activeSides: Side[];
points:[];
panelOrder: Side[];
lockedPanels: Side[];
widgets: Widget[];
@@ -54,7 +55,7 @@ export const DraggableWidget = ({
zoneName: string;
activeSides: Side[];
panelOrder: Side[];
points:[];
lockedPanels: Side[];
zoneId: string;
zoneViewPortTarget: number[];
@@ -197,6 +198,7 @@ export const DraggableWidget = ({
},
id: `${widget.id}-copy-${Date.now()}`,
};
console.log('duplicatedWidget: ', duplicatedWidget);
let duplicateWidget = {
organization: organization,

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

@@ -1,5 +1,5 @@
import { useThree } from "@react-three/fiber";
import React, { useEffect, useRef } from "react";
import React, { useEffect, useRef, useState } from "react";
import {
useAsset3dWidget,
useSocketStore,
@@ -61,6 +61,10 @@ export default function Dropped3dWidgets() {
const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
const { setSelectedChartId } = useWidgetStore();
const { measurements, duration} = useChartStore();
let [floorPlanesVertical, setFloorPlanesVertical] = useState(
new THREE.Plane(new THREE.Vector3(0, 1, 0))
);
const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
useEffect(() => {
@@ -77,8 +81,9 @@ export default function Dropped3dWidgets() {
);
setWidgets3D(result);
if (result.length < 0) return
const formattedWidgets = result.map((widget: WidgetData) => ({
const formattedWidgets = result?.map((widget: WidgetData) => ({
id: widget.id,
type: widget.type,
position: widget.position,
@@ -176,7 +181,7 @@ export default function Dropped3dWidgets() {
};
const onDrop = (event: any) => {
console.log("onDrop called. hasEntered: ", hasEntered.current);
event.preventDefault();
event.stopPropagation();
@@ -188,7 +193,15 @@ export default function Dropped3dWidgets() {
const newWidget = createdWidgetRef.current;
if (!newWidget || !widgetSelect.startsWith("ui")) return;
// ✅ Manual removal of the temp widget (same ID)
// ✅ Extract 2D drop position
const [x, , z] = newWidget.position;
// ✅ Prepare polygon from selectedZone.points
const points3D = selectedZone.points as Array<[number, number, number]>;
const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]);
const isInside = isPointInPolygon([x, z], zonePolygonXZ);
// ✅ Remove temp widget
const prevWidgets = useZoneWidgetStore.getState().zoneWidgetData[selectedZone.zoneId] || [];
const cleanedWidgets = prevWidgets.filter(w => w.id !== newWidget.id);
useZoneWidgetStore.setState((state) => ({
@@ -197,8 +210,12 @@ export default function Dropped3dWidgets() {
[selectedZone.zoneId]: cleanedWidgets,
},
}));
// ✅ Now re-add it as final
// if (!isInside) {
// createdWidgetRef.current = null;
// return; // Stop here
// }
// ✅ Add widget if inside polygon
addWidget(selectedZone.zoneId, newWidget);
const add3dWidget = {
@@ -211,16 +228,10 @@ export default function Dropped3dWidgets() {
visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
}
setTimeout(() => {
let pointerDivs = document.getElementsByClassName("pointer-none");
Array.from(pointerDivs).forEach((el) => {
el.classList.remove("pointer-none");
});
}, 1000);
createdWidgetRef.current = null;
};
canvasElement.addEventListener("dragenter", handleDragEnter);
canvasElement.addEventListener("dragover", handleDragOver);
canvasElement.addEventListener("drop", onDrop);
@@ -232,8 +243,6 @@ export default function Dropped3dWidgets() {
};
}, [widgetSelect, activeModule, selectedZone.zoneId, widgetSubOption, camera,]);
useEffect(() => {
if (!rightClickSelected) return;
const email = localStorage.getItem("email") || "";
@@ -310,25 +319,61 @@ export default function Dropped3dWidgets() {
}
}, [rightSelect, rightClickSelected]);
function isPointInPolygon(
point: [number, number],
polygon: Array<[number, number]>
): boolean {
const [x, z] = point;
let inside = false;
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
const [xi, zi] = polygon[i];
const [xj, zj] = polygon[j];
const intersect =
zi > z !== zj > z &&
x < ((xj - xi) * (z - zi)) / (zj - zi) + xi;
if (intersect) inside = !inside;
}
return inside;
}
const [prevX, setPrevX] = useState(0);
useEffect(() => {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const handleMouseDown = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return;
const cameraDirection = new THREE.Vector3();
camera.getWorldDirection(cameraDirection);
// Plane normal should be perpendicular to screen (XZ move), so use screen right direction
const right = new THREE.Vector3();
camera.getWorldDirection(cameraDirection);
cameraDirection.y = 0;
cameraDirection.normalize();
right.crossVectors(new THREE.Vector3(0, 1, 0), cameraDirection).normalize();
// Create a plane that allows vertical movement
const verticalPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(right, new THREE.Vector3(0, 0, 0));
setFloorPlanesVertical(verticalPlane);
if (rightSelect === "RotateX" || rightSelect === "RotateY") {
mouseStartRef.current = { x: event.clientX, y: event.clientY };
const selectedZone = Object.keys(zoneWidgetData).find(
const selectedZoneId = Object.keys(zoneWidgetData).find(
(zoneId: string) =>
zoneWidgetData[zoneId].some(
(widget: WidgetData) => widget.id === rightClickSelected
)
);
if (!selectedZone) return;
const selectedWidget = zoneWidgetData[selectedZone].find(
if (!selectedZoneId) return;
const selectedWidget = zoneWidgetData[selectedZoneId].find(
(widget: WidgetData) => widget.id === rightClickSelected
);
if (selectedWidget) {
@@ -339,14 +384,14 @@ export default function Dropped3dWidgets() {
const handleMouseMove = (event: MouseEvent) => {
if (!rightClickSelected || !rightSelect) return;
const selectedZone = Object.keys(zoneWidgetData).find((zoneId: string) =>
const selectedZoneId = Object.keys(zoneWidgetData).find((zoneId: string) =>
zoneWidgetData[zoneId].some(
(widget: WidgetData) => widget.id === rightClickSelected
)
);
if (!selectedZone) return;
if (!selectedZoneId) return;
const selectedWidget = zoneWidgetData[selectedZone].find(
const selectedWidget = zoneWidgetData[selectedZoneId].find(
(widget: WidgetData) => widget.id === rightClickSelected
);
if (!selectedWidget) return;
@@ -357,77 +402,101 @@ export default function Dropped3dWidgets() {
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 points3D = selectedZone.points as Array<[number, number, number]>;
const zonePolygonXZ = points3D.map(([x, , z]) => [x, z] as [number, number]);
const newPosition: [number, number, number] = [
planeIntersect.current.x,
selectedWidget.position[1],
planeIntersect.current.z,
];
updateWidgetPosition(selectedZone, rightClickSelected, newPosition);
const isInside = isPointInPolygon(
[newPosition[0], newPosition[2]],
zonePolygonXZ
);
// if (isInside) {
updateWidgetPosition(selectedZoneId, 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 (raycaster.ray.intersectPlane(floorPlanesVertical, planeIntersect.current)) {
const currentY = selectedWidget.position[1];
const newY = planeIntersect.current.y;
console.log('planeIntersect.current: ', planeIntersect.current);
const deltaY = newY - currentY;
// Reject if jump is too large (safety check)
if (Math.abs(deltaY) > 200) return;
// Clamp jump or apply smoothing
const clampedY = currentY + THREE.MathUtils.clamp(deltaY, -10, 10);
if (clampedY > 0) {
updateWidgetPosition(selectedZoneId, rightClickSelected, [
selectedWidget.position[0],
clampedY,
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);
const currentX = event.pageX;
const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
setPrevX(currentX);
if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
const newRotation: [number, number, number] = [
selectedWidget.rotation[0] + 0.05 * sign,
selectedWidget.rotation[1],
selectedWidget.rotation[2],
];
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
}
}
if (rightSelect === "RotateY") {
const 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);
const currentX = event.pageX;
const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
setPrevX(currentX);
if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
const newRotation: [number, number, number] = [
selectedWidget.rotation[0] ,
selectedWidget.rotation[1]+ 0.05 * sign,
selectedWidget.rotation[2],
];
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
}
}
if (rightSelect === "RotateZ") {
const 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 currentX = event.pageX;
const sign = currentX > prevX ? 1 : currentX < prevX ? -1 : 0;
setPrevX(currentX);
if (selectedWidget?.rotation && selectedWidget.rotation.length >= 3) {
const newRotation: [number, number, number] = [
selectedWidget.rotation[0] ,
selectedWidget.rotation[1],
selectedWidget.rotation[2]+ 0.05 * sign,
];
updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
}
}
};
const handleMouseUp = () => {
if (!rightClickSelected || !rightSelect) return;
const selectedZone = Object.keys(zoneWidgetData).find((zoneId) =>
const selectedZoneId = Object.keys(zoneWidgetData).find((zoneId) =>
zoneWidgetData[zoneId].some(
(widget) => widget.id === rightClickSelected
)
);
if (!selectedZone) return;
if (!selectedZoneId) return;
const selectedWidget = zoneWidgetData[selectedZone].find(
const selectedWidget = zoneWidgetData[selectedZoneId].find(
(widget) => widget.id === rightClickSelected
);
if (!selectedWidget) return;
@@ -444,7 +513,7 @@ export default function Dropped3dWidgets() {
number
];
// (async () => {
// let response = await update3dWidget(selectedZone, organization, rightClickSelected, lastPosition);
// let response = await update3dWidget(selectedZoneId, organization, rightClickSelected, lastPosition);
//
// if (response) {
//
@@ -452,7 +521,7 @@ export default function Dropped3dWidgets() {
// })();
let updatingPosition = {
organization: organization,
zoneId: selectedZone,
zoneId: selectedZoneId,
id: rightClickSelected,
position: lastPosition,
};
@@ -466,8 +535,9 @@ export default function Dropped3dWidgets() {
const rotation = selectedWidget.rotation || [0, 0, 0];
let lastRotation = formatValues(rotation) as [number, number, number];
// (async () => {
// let response = await update3dWidgetRotation(selectedZone, organization, rightClickSelected, lastRotation);
// let response = await update3dWidgetRotation(selectedZoneId, organization, rightClickSelected, lastRotation);
//
// if (response) {
//
@@ -475,7 +545,7 @@ export default function Dropped3dWidgets() {
// })();
let updatingRotation = {
organization: organization,
zoneId: selectedZone,
zoneId: selectedZoneId,
id: rightClickSelected,
rotation: lastRotation,
};

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

@@ -49,6 +49,7 @@ const DroppedObjects: React.FC = () => {
const { visualizationSocket } = useSocketStore();
const { isPlaying } = usePlayButtonStore();
const zones = useDroppedObjectsStore((state) => state.zones);
const [openKebabId, setOpenKebabId] = useState<string | null>(null);
const updateObjectPosition = useDroppedObjectsStore(
(state) => state.updateObjectPosition
@@ -70,6 +71,7 @@ const DroppedObjects: React.FC = () => {
vertical: "top" | "bottom";
horizontal: "left" | "right";
} | null>(null); // State to track active edges for distance lines
const [currentPosition, setCurrentPosition] = useState<{
top: number | "auto";
left: number | "auto";
@@ -143,7 +145,7 @@ const DroppedObjects: React.FC = () => {
// if (res.message === "FloatingWidget deleted successfully") {
// deleteObject(zoneName, id, index); // Call the deleteObject method from the store
// }
} catch (error) { }
} catch (error) {}
}
const handlePointerDown = (event: React.PointerEvent, index: number) => {
@@ -519,41 +521,46 @@ const DroppedObjects: React.FC = () => {
{zone.objects.map((obj, index) => {
const topPosition =
typeof obj.position.top === "number"
? `calc(${obj.position.top}px + ${isPlaying && selectedZone.activeSides.includes("top")
? `${heightMultiplier - 55}px`
: "0px"
})`
? `calc(${obj.position.top}px + ${
isPlaying && selectedZone.activeSides.includes("top")
? `${heightMultiplier - 55}px`
: "0px"
})`
: "auto";
const leftPosition =
typeof obj.position.left === "number"
? `calc(${obj.position.left}px + ${isPlaying && selectedZone.activeSides.includes("left")
? `${widthMultiplier - 100}px`
: "0px"
})`
? `calc(${obj.position.left}px + ${
isPlaying && selectedZone.activeSides.includes("left")
? `${widthMultiplier - 100}px`
: "0px"
})`
: "auto";
const rightPosition =
typeof obj.position.right === "number"
? `calc(${obj.position.right}px + ${isPlaying && selectedZone.activeSides.includes("right")
? `${widthMultiplier - 100}px`
: "0px"
})`
? `calc(${obj.position.right}px + ${
isPlaying && selectedZone.activeSides.includes("right")
? `${widthMultiplier - 100}px`
: "0px"
})`
: "auto";
const bottomPosition =
typeof obj.position.bottom === "number"
? `calc(${obj.position.bottom}px + ${isPlaying && selectedZone.activeSides.includes("bottom")
? `${heightMultiplier - 55}px`
: "0px"
})`
? `calc(${obj.position.bottom}px + ${
isPlaying && selectedZone.activeSides.includes("bottom")
? `${heightMultiplier - 55}px`
: "0px"
})`
: "auto";
return (
<div
key={`${zoneName}-${index}`}
className={`${obj.className} ${selectedChartId?.id === obj.id && "activeChart"
}`}
className={`${obj.className} ${
selectedChartId?.id === obj.id && "activeChart"
}`}
ref={chartWidget}
style={{
position: "absolute",
@@ -561,6 +568,8 @@ const DroppedObjects: React.FC = () => {
left: leftPosition,
right: rightPosition,
bottom: bottomPosition,
pointerEvents: isPlaying ? "none" : "auto",
minHeight: `${obj.className === "warehouseThroughput" && "150px !important"} `
}}
onPointerDown={(event) => {
setSelectedChartId(obj);

6
app/src/components/ui/componets/Panel.tsx
View File

@@ -22,6 +22,7 @@ interface PanelProps {
activeSides: Side[];
panelOrder: Side[];
lockedPanels: Side[];
points:[];
zoneId: string;
zoneViewPortTarget: number[];
zoneViewPortPosition: number[];
@@ -33,6 +34,7 @@ interface PanelProps {
activeSides: Side[];
panelOrder: Side[];
lockedPanels: Side[];
points:[];
zoneId: string;
zoneViewPortTarget: number[];
zoneViewPortPosition: number[];
@@ -163,8 +165,8 @@ const Panel: React.FC<PanelProps> = ({
// Calculate panel capacity
const calculatePanelCapacity = (panel: Side) => {
const CHART_WIDTH = panelSize;
const CHART_HEIGHT = panelSize;
const CHART_WIDTH = panelSize - 10;
const CHART_HEIGHT = panelSize - 10;
const dimensions = panelDimensions[panel];
if (!dimensions) {

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

@@ -37,7 +37,7 @@ type FormattedZoneData = Record<
{
activeSides: Side[];
panelOrder: Side[];
points: [];
lockedPanels: Side[];
zoneId: string;
zoneViewPortTarget: number[];
@@ -85,6 +85,7 @@ const RealTimeVisulization: React.FC = () => {
const organization = email?.split("@")[1]?.split(".")[0];
try {
const response = await getZone2dData(organization);
console.log('response: ', response);
if (!Array.isArray(response)) {
return;
@@ -95,6 +96,7 @@ const RealTimeVisulization: React.FC = () => {
activeSides: [],
panelOrder: [],
lockedPanels: [],
points: zone.points,
zoneId: zone.zoneId,
zoneViewPortTarget: zone.viewPortCenter,
zoneViewPortPosition: zone.viewPortposition,
@@ -105,7 +107,7 @@ const RealTimeVisulization: React.FC = () => {
{}
);
setZonesData(formattedData);
} catch (error) {}
} catch (error) { }
}
GetZoneData();
@@ -121,6 +123,7 @@ const RealTimeVisulization: React.FC = () => {
activeSides: selectedZone.activeSides || [],
panelOrder: selectedZone.panelOrder || [],
lockedPanels: selectedZone.lockedPanels || [],
points:selectedZone.points||[],
zoneId: selectedZone.zoneId || "",
zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
@@ -283,6 +286,7 @@ const RealTimeVisulization: React.FC = () => {
"Horizontal Move",
"RotateX",
"RotateY",
"RotateZ",
"Delete",
]}
/>
@@ -294,6 +298,8 @@ const RealTimeVisulization: React.FC = () => {
zonesData={zonesData}
selectedZone={selectedZone}
setSelectedZone={setSelectedZone}
hiddenPanels={hiddenPanels}
setHiddenPanels={setHiddenPanels}
/>
{!isPlaying && selectedZone?.zoneName !== "" && (

181
app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx
View File

@@ -1,105 +1,96 @@
import React, { useState, useEffect } from 'react'
import { Line } from 'react-chartjs-2'
import useChartStore from '../../../../store/useChartStore';
import { useWidgetStore } from '../../../../store/useWidgetStore';
import axios from 'axios';
import React, { useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
import useChartStore from "../../../../store/useChartStore";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import axios from "axios";
import io from "socket.io-client";
import { WalletIcon } from '../../../icons/3dChartIcons';
import { WalletIcon } from "../../../icons/3dChartIcons";
const TotalCardComponent = ({ object }: any) => {
const [progress, setProgress] = useState<any>(0);
const [measurements, setmeasurements] = useState<any>({});
const [duration, setDuration] = useState("1h");
const [name, setName] = useState(object.header ? object.header : "");
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
const { header, flotingDuration, flotingMeasurements } = useChartStore();
const { selectedChartId } = useWidgetStore();
const TotalCardComponent = ({
object
}: any) => {
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const [ progress, setProgress ] = useState<any>(0)
const [measurements, setmeasurements] = useState<any>(object?.Data?.measurements ? object.Data.measurements : {});
const [duration, setDuration] = useState("1h")
const [name, setName] = useState(object.header ? object.header : '')
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]
const { header, flotingDuration, flotingMeasurements } = useChartStore();
const { selectedChartId } = useWidgetStore();
useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0)
return;
const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
const socket = io(`http://${iotApiUrl}`);
useEffect(() => {
if (!iotApiUrl || !measurements || Object.keys(measurements).length === 0) return;
const socket = io(`http://${iotApiUrl}`);
const inputData = {
measurements,
duration,
interval: 1000,
};
const startStream = () => {
socket.emit("lastInput", inputData);
};
socket.on("connect", startStream);
socket.on("lastOutput", (response) => {
const responseData = response.input1;
if (typeof responseData === "number") {
setProgress(responseData);
}
});
return () => {
socket.off("lastOutput");
socket.emit("stop_stream"); // Stop streaming when component unmounts
socket.disconnect();
};
}, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async() => {
if (object?.id !== "") {
try {
const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`);
if (response.status === 200) {
console.log(response);
setmeasurements(response.data.Data.measurements)
setDuration(response.data.Data.duration)
setName(response.data.header)
} else {
console.log("Unexpected response:", response);
}
} catch (error) {
console.error("There was an error!", error);
}
}
const inputData = {
measurements,
duration,
interval: 1000,
};
const startStream = () => {
socket.emit("lastInput", inputData);
};
socket.on("connect", startStream);
socket.on("lastOutput", (response) => {
const responseData = response.input1;
if (typeof responseData === "number") {
setProgress(responseData);
}
useEffect(() => {
fetchSavedInputes();
}, []);
useEffect(() => {
if (selectedChartId?.id === object?.id) {
fetchSavedInputes();
});
return () => {
socket.off("lastOutput");
socket.emit("stop_stream"); // Stop streaming when component unmounts
socket.disconnect();
};
}, [measurements, duration, iotApiUrl]);
const fetchSavedInputes = async () => {
if (object?.id !== "") {
try {
const response = await axios.get(
`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${object?.id}/${organization}`
);
if (response.status === 200) {
setmeasurements(response.data.Data.measurements);
setDuration(response.data.Data.duration);
setName(response.data.header);
} else {
}
}
,[header, flotingDuration, flotingMeasurements])
} catch (error) {}
}
};
return (
<>
<div className="header-wrapper" >
<div className="header">{name}</div>
<div className="data-values">
<div className="value">{progress}</div>
<div className="per">{object.per}</div>
</div>
</div>
<div className="icon">
<WalletIcon />
</div>
</>
)
}
useEffect(() => {
fetchSavedInputes();
}, []);
export default TotalCardComponent
useEffect(() => {
if (selectedChartId?.id === object?.id) {
fetchSavedInputes();
}
}, [header, flotingDuration, flotingMeasurements]);
return (
<>
<div className="header-wrapper">
<div className="header">{name}</div>
<div className="data-values">
<div className="value">{progress}</div>
<div className="per">{object.per}</div>
</div>
</div>
<div className="icon">
<WalletIcon />
</div>
</>
);
};
export default TotalCardComponent;

4
app/src/components/ui/realTimeVis/floating/WarehouseThroughput.tsx
View File

@@ -125,13 +125,13 @@ const WarehouseThroughput = () => {
lineGraphOptions, // ✅ Include chart options
});
event.dataTransfer.setData("text/plain", cardData);
// event.dataTransfer.effectAllowed = "move"; // Improve drag effect
};
return (
<div className="warehouseThroughput floating" draggable onDragStart={handleDragStart}>
<div className="warehouseThroughput floating" style={{ minHeight: "160px !important" }} draggable onDragStart={handleDragStart}>
<div className="header">
<h2>Warehouse Throughput</h2>
<p>