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

Merge branch 'main' into simulation

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-04-04 19:05:04 +05:30
parent 99a478f2e4 4418db3d5f
commit 748a3d5eb0
37 changed files with 1188 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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
}
};
console.log("widget.type", widget.type);
// useClickOutside(chartWidget, () => {
// setSelectedChartId(null);
// });
const { isPlaying } = usePlayButtonStore();
console.log('isPanelHidden: ', isPanelHidden);
return (
<>
<div

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

@@ -1,5 +1,5 @@
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 useModuleStore from "../../../store/useModuleStore";
import { ThreeState } from "../../../types/world/worldTypes";
@@ -13,9 +13,19 @@ import { generateUniqueId } from "../../../functions/generateUniqueId";
import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget";
import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
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 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() {
const { widgetSelect } = useAsset3dWidget();
@@ -23,22 +33,22 @@ export default function Dropped3dWidgets() {
const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree();
const { widgetSubOption } = useWidgetSubOption();
const { selectedZone } = useSelectedZoneStore();
const { top, setTop } = useTopData()
const { left, setLeft } = useLeftData()
const { rightSelect, setRightSelect } = useRightSelected()
// ✅ Use Zustand Store instead of useState
const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition } = useZoneWidgetStore();
const { top, setTop } = useTopData();
const { left, setLeft } = useLeftData();
const { rightSelect, setRightSelect } = useRightSelected();
const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore()
const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition, updateWidgetRotation } = useZoneWidgetStore();
const { setWidgets3D } = use3DWidget();
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 verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)); // Vertical plane for vertical move
const planeIntersect = useRef(new THREE.Vector3());
// let [verticalPlane, setFloorPlanesVertical] = useState(
// new THREE.Plane(new THREE.Vector3(0, 1, 0))
// );
// 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(() => {
if (activeModule !== "visualization") return;
@@ -48,16 +58,18 @@ export default function Dropped3dWidgets() {
const organization = email?.split("@")[1]?.split(".")[0];
async function get3dWidgetData() {
let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
const result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
console.log('result: ', result);
setWidgets3D(result);
const formattedWidgets = result.map((widget: any) => ({
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);
}
@@ -91,28 +103,24 @@ export default function Dropped3dWidgets() {
if (intersects.length > 0) {
const { x, y, z } = intersects[0].point;
const newWidget = {
const newWidget: WidgetData = {
id: generateUniqueId(),
type: widgetSelect,
position: [x, y, z] as [number, number, number],
position: [x, y, z],
rotation: [0, 0, 0],
};
let add3dWidget = {
const add3dWidget = {
organization: organization,
widget: newWidget,
zoneId: selectedZone.zoneId
}
};
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);
// }
}
};
@@ -128,63 +136,103 @@ export default function Dropped3dWidgets() {
if (!rightClickSelected) return;
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
if (rightSelect === "Duplicate") {
const widgetToDuplicate = activeZoneWidgets.find(w => w.id === rightClickSelected);
if (!widgetToDuplicate) return;
const newWidget = {
id: generateUniqueId(),
type: widgetToDuplicate.type,
position: [
widgetToDuplicate.position[0] + 0.5, // Slightly shift position
widgetToDuplicate.position[1],
widgetToDuplicate.position[2] + 0.5,
] as [number, number, number],
};
let add3dWidget = {
organization,
widget: newWidget,
zoneId: selectedZone.zoneId
};
// if (visualizationSocket) {
// visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
// }
addWidget(selectedZone.zoneId, newWidget);
setRightSelect(null);
setRightClickSelected(null);
async function duplicateWidget() {
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 adding3dWidget = {
organization,
widget: newWidget,
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") {
let deleteWidget = {
organization,
widgetId: rightClickSelected,
zoneId: selectedZone.zoneId
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);
}
};
// if (visualizationSocket) {
// visualizationSocket.emit("v2:viz-3D-widget:delete", deleteWidget);
// }
setZoneWidgetData(selectedZone.zoneId, activeZoneWidgets.filter(w => w.id !== rightClickSelected));
setRightClickSelected(null);
setRightSelect(null);
}
if (rightSelect === "Horizontal Move") {
deleteWidgetApi();
}
if (rightSelect === "Vertical Move") {
}
}, [rightSelect, rightClickSelected]);
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 (rightSelect === "RotateX" || rightSelect === "RotateY") {
mouseStartRef.current = { x: event.clientX, y: event.clientY };
const selectedZone = Object.keys(zoneWidgetData).find(zoneId =>
zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
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 => widget.id === rightClickSelected);
const selectedWidget = zoneWidgetData[selectedZone].find((widget: WidgetData) => widget.id === rightClickSelected);
if (!selectedWidget) return;
const rect = gl.domElement.getBoundingClientRect();
@@ -194,72 +242,184 @@ export default function Dropped3dWidgets() {
raycaster.setFromCamera(mouse, camera);
if (rightSelect === "Horizontal Move" && raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
updateWidgetPosition(selectedZone, rightClickSelected, [
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, // Ensure Y value updates correctly
planeIntersect.current.y,
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 = () => {
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)
);
setTimeout(() => {
setRightClickSelected(null);
setRightSelect(null);
}, 50);
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);
// Attach events to window instead of gl.domElement
(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 }) => {
const handleRightClick = (event: React.MouseEvent) => {
{activeZoneWidgets.map(({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => {
const handleRightClick = (event: React.MouseEvent, id: string) => {
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) {
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":
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":
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":
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:
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);
if (zoneEntries.length === 0) return null;
const [zoneName, zone] = zoneEntries[0];
function handleDuplicate(zoneName: string, index: number) {
setOpenKebabId(null);
@@ -123,14 +123,14 @@ const DroppedObjects: React.FC = () => {
try {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
let deleteFloatingWidget = {
floatWidgetID: id,
organization: organization,
zoneId: zone.zoneId
}
if (visualizationSocket) {
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
// }
} catch (error) {
}
}
@@ -448,7 +448,7 @@ const DroppedObjects: React.FC = () => {
// ...zone.objects[draggingIndex.index],
// position: boundedPosition,
// });
let updateFloatingWidget = {
organization: organization,
@@ -456,7 +456,7 @@ const DroppedObjects: React.FC = () => {
...zone.objects[draggingIndex.index],
position: boundedPosition,
},
index:draggingIndex.index,
index: draggingIndex.index,
zoneId: zone.zoneId
}
if (visualizationSocket) {
@@ -464,7 +464,7 @@ const DroppedObjects: React.FC = () => {
}
// if (response.message === "Widget updated successfully") {
console.log('boundedPosition: ', boundedPosition);
updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
// }
@@ -479,7 +479,7 @@ const DroppedObjects: React.FC = () => {
// animationRef.current = null;
// }
} catch (error) {
} finally {
// Clean up regardless of success or failure
setDraggingIndex(null);
@@ -509,43 +509,37 @@ const DroppedObjects: React.FC = () => {
{zone.objects.map((obj, index) => (
<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",
top:
typeof obj.position.top === "number"
? `calc(${obj.position.top}px + ${
isPlaying && selectedZone.activeSides.includes("top")
? 90
: 0
}px)`
? `calc(${obj.position.top}px + ${isPlaying && selectedZone.activeSides.includes("top")
? 90
: 0
}px)`
: "auto",
left:
typeof obj.position.left === "number"
? `calc(${obj.position.left}px + ${
isPlaying && selectedZone.activeSides.includes("left")
? 90
: 0
}px)`
? `calc(${obj.position.left}px + ${isPlaying && selectedZone.activeSides.includes("left")
? 90
: 0
}px)`
: "auto",
right:
typeof obj.position.right === "number"
? `calc(${obj.position.right}px + ${
isPlaying && selectedZone.activeSides.includes("right")
? 90
: 0
}px)`
? `calc(${obj.position.right}px + ${isPlaying && selectedZone.activeSides.includes("right")
? 90
: 0
}px)`
: "auto",
bottom:
typeof obj.position.bottom === "number"
? `calc(${obj.position.bottom}px + ${
isPlaying && selectedZone.activeSides.includes("bottom")
? 90
: 0
}px)`
? `calc(${obj.position.bottom}px + ${isPlaying && selectedZone.activeSides.includes("bottom")
? 90
: 0
}px)`
: "auto",
}}
onPointerDown={(event) => {
@@ -559,7 +553,7 @@ const DroppedObjects: React.FC = () => {
</>
) : obj.className === "warehouseThroughput floating" ? (
<>
<WarehouseThroughputComponent object={obj}/>
<WarehouseThroughputComponent object={obj} />
</>
) : obj.className === "fleetEfficiency floating" ? (
<>

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

@@ -124,8 +124,8 @@ const Panel: React.FC<PanelProps> = ({
selectedZone.widgets.filter((w) => w.panel === panel).length;
const calculatePanelCapacity = (panel: Side) => {
const CHART_WIDTH = 150;
const CHART_HEIGHT = 150;
const CHART_WIDTH = 170;
const CHART_HEIGHT = 170;
const FALLBACK_HORIZONTAL_CAPACITY = 5;
const FALLBACK_VERTICAL_CAPACITY = 3;

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

28
app/src/components/ui/componets/functions/determinePosition.ts
View File

@@ -1,4 +1,3 @@
export function determinePosition(
canvasRect: DOMRect,
relativeX: number,
@@ -12,6 +11,23 @@ export function determinePosition(
const centerX = canvasRect.width / 2;
const centerY = canvasRect.height / 2;
// Define a threshold for considering a point as "centered"
const centerThreshold = 10; // Adjust this value as needed
// Check if the point is within the center threshold
const isCenterX = Math.abs(relativeX - centerX) <= centerThreshold;
const isCenterY = Math.abs(relativeY - centerY) <= centerThreshold;
// If the point is centered, return a special "centered" position
if (isCenterX && isCenterY) {
return {
top: "auto",
left: "auto",
right: "auto",
bottom: "auto",
};
}
let position: {
top: number | "auto";
left: number | "auto";
@@ -21,7 +37,7 @@ export function determinePosition(
if (relativeY < centerY) {
if (relativeX < centerX) {
// Top-left quadrant
position = {
top: relativeY - 41.5,
left: relativeX - 125,
@@ -29,7 +45,7 @@ export function determinePosition(
bottom: "auto",
};
} else {
// Top-right quadrant
position = {
top: relativeY - 41.5,
right: canvasRect.width - relativeX - 125,
@@ -39,7 +55,7 @@ export function determinePosition(
}
} else {
if (relativeX < centerX) {
// Bottom-left quadrant
position = {
bottom: canvasRect.height - relativeY - 41.5,
left: relativeX - 125,
@@ -47,7 +63,7 @@ export function determinePosition(
top: "auto",
};
} else {
// Bottom-right quadrant
position = {
bottom: canvasRect.height - relativeY - 41.5,
right: canvasRect.width - relativeX - 125,
@@ -58,4 +74,4 @@ export function determinePosition(
}
return position;
}
}

80
app/src/components/ui/list/DropDownList.tsx
View File

@@ -32,14 +32,22 @@ const DropDownList: React.FC<DropDownListProps> = ({
listType = "default",
remove,
}) => {
const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
const { zones, setZones } = useZones()
const { zones, setZones } = useZones();
const handleToggle = () => {
setIsOpen((prev) => !prev); // Toggle the state
};
const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
interface Asset {
id: string;
name: string;
}
const [zoneDataList, setZoneDataList] = useState<
{ id: string; name: string; assets: Asset[] }[]
>([]);
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
useEffect(() => {
@@ -53,12 +61,65 @@ const DropDownList: React.FC<DropDownListProps> = ({
// { id: "70fa55cd-b5c9-4f80-a8c4-6319af3bfb4e", name: "zone6" },
// ])
const value = (zones || []).map((val: { zoneId: string; zoneName: string }) => ({
id: val.zoneId,
name: val.zoneName
}));
setZoneDataList(prev => (JSON.stringify(prev) !== JSON.stringify(value) ? value : prev));
const value = (zones || []).map(
(val: { zoneId: string; zoneName: string }) => ({
id: val.zoneId,
name: val.zoneName,
})
);
setZoneDataList([
{
id: "zone1",
name: "Zone 1",
assets: [
{
id: "asset1",
name: "Asset 1",
},
{
id: "asset2",
name: "Asset 2",
},
{
id: "asset3",
name: "Asset 3",
},
],
},
{
id: "zone2",
name: "Zone 2",
assets: [
{
id: "asset4",
name: "Asset 4",
},
{
id: "asset5",
name: "Asset 5",
},
{
id: "asset6",
name: "Asset 6",
},
],
},
{
id: "zone3",
name: "Zone 3",
assets: [
{
id: "asset7",
name: "Asset 7",
},
{
id: "asset8",
name: "Asset 8",
},
],
},
]);
}, [zones]);
return (
@@ -101,6 +162,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
value="Buildings"
showKebabMenu={false}
showAddIcon={false}
items={zoneDataList}
/>
<DropDownList
value="Zones"

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

@@ -1,20 +1,44 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import RenameInput from "../inputs/RenameInput";
import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
import { useSelectedZoneStore } from "../../../store/useZoneStore";
import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
import useModuleStore, {
useSubModuleStore,
} from "../../../store/useModuleStore";
import {
ArrowIcon,
EyeIcon,
LockIcon,
RmoveIcon,
} from "../../icons/ExportCommonIcons";
interface Asset {
id: string;
name: string;
}
interface ZoneItem {
id: string;
name: string;
assets?: Asset[];
}
interface ListProps {
items?: { id: string; name: string }[]; // Optional array of items to render
placeholder?: string; // Optional placeholder text
items?: ZoneItem[];
placeholder?: string;
remove?: boolean;
}
const List: React.FC<ListProps> = ({ items = [], remove }) => {
console.log("items: ", items);
const { activeModule, setActiveModule } = useModuleStore();
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { setSubModule } = useSubModuleStore();
const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
{}
);
useEffect(() => {
useSelectedZoneStore.getState().setSelectedZone({
zoneName: "",
@@ -27,11 +51,16 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
widgets: [],
});
}, [activeModule]);
const toggleZoneExpansion = (zoneId: string) => {
setExpandedZones((prev) => ({
...prev,
[zoneId]: !prev[zoneId],
}));
};
async function handleSelectZone(id: string) {
try {
// Avoid re-fetching if the same zone is already selected
if (selectedZone?.zoneId === id) {
console.log("Zone is already selected:", selectedZone.zoneName);
return;
@@ -65,27 +94,74 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
<>
{items.length > 0 ? (
<ul className="list-wrapper">
{items.map((item, index) => (
<li key={index} className="list-container">
<div className="list-item">
<div className="value" onClick={() => handleSelectZone(item.id)}>
<RenameInput value={item.name} />
</div>
<div className="options-container">
<div className="lock option">
<LockIcon isLocked />
</div>
<div className="visibe option">
<EyeIcon isClosed />
</div>
{remove && (
<div className="remove option">
<RmoveIcon />
{items.map((item) => (
<React.Fragment key={`zone-${item.id}`}>
<li className="list-container">
<div className="list-item">
<div className="zone-header">
<div
className="value"
onClick={() => handleSelectZone(item.id)}
>
<RenameInput value={item.name} />
</div>
)}
</div>
<div className="options-container">
<div className="lock option">
<LockIcon isLocked />
</div>
<div className="visibe option">
<EyeIcon isClosed />
</div>
{remove && (
<div className="remove option">
<RmoveIcon />
</div>
)}
{item.assets && item.assets.length > 0 && (
<div
className="expand-icon option"
onClick={() => toggleZoneExpansion(item.id)}
>
<ArrowIcon />
</div>
)}
</div>
</div>
</div>
</li>
</li>
{/* Nested assets list - only shown when expanded */}
{item.assets &&
item.assets.length > 0 &&
expandedZones[item.id] && (
<ul className="asset-list">
{item.assets.map((asset) => (
<li
key={`asset-${asset.id}`}
className="list-container asset-item"
>
<div className="list-item">
<div className="value">
<RenameInput value={asset.name} />
</div>
<div className="options-container">
<div className="lock option">
<LockIcon isLocked />
</div>
<div className="visibe option">
<EyeIcon isClosed />
</div>
{remove && (
<div className="remove option">
<RmoveIcon />
</div>
)}
</div>
</div>
</li>
))}
</ul>
)}
</React.Fragment>
))}
</ul>
) : (

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

@@ -1,26 +1,48 @@
import React, { useEffect } from "react";
import { useLeftData, useRightSelected, useTopData } from "../../../store/useZone3DWidgetStore";
import {
useEditWidgetOptionsStore,
useLeftData,
useRightClickSelected,
useRightSelected,
useTopData,
} from "../../../store/useZone3DWidgetStore";
interface EditWidgetOptionProps {
options: string[];
}
const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({ options }) => {
const { top, setTop } = useTopData()
const { left, setLeft } = useLeftData()
const { rightSelect, setRightSelect } = useRightSelected()
const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({
options,
}) => {
const { top } = useTopData();
const { left } = useLeftData();
const { setRightSelect } = useRightSelected();
const { setEditWidgetOptions } = useEditWidgetOptionsStore();
useEffect(() => {
console.log('left: ', left);
console.log('top: ', top);
}, [top, left])
}, [top, left]);
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">
{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}
</div>
))}

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

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

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

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

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

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

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

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

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

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