diff --git a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
index 4da32bc..b932417 100644
--- a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
+++ b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
@@ -25,7 +25,7 @@ interface ProductionCapacityProps {
position: [number, number, number];
}
-const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ position }) => {
+const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ position }) => {
// Chart data for a week
const chartData = {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week
@@ -79,10 +79,11 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ position }) =>
};
return (
- <Html position={[position[0], position[1], position[2]]}
- scale={[0.5, 0.5, 0.5]}
- transform
- sprite>
+ <Html position={[position[0], position[1], position[2]] }
+ scale={[0.5, 0.5, 0.5]}
+ transform
+ zIndexRange={[1,0]}
+ sprite>
<div className="productionCapacity-wrapper card">
<div className="headeproductionCapacityr-wrapper">
<div className="header">Production Capacity</div>
diff --git a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
index 8e8c444..740c7be 100644
--- a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
+++ b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
@@ -111,6 +111,7 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ position }) =>
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
+ zIndexRange={[1,0]}
sprite>
<div className="returnOfInvestment card">
<div className="header">Return of Investment</div>
diff --git a/app/src/components/layout/3D-cards/cards/StateWorking.tsx b/app/src/components/layout/3D-cards/cards/StateWorking.tsx
index 25ee39b..1c3ac4e 100644
--- a/app/src/components/layout/3D-cards/cards/StateWorking.tsx
+++ b/app/src/components/layout/3D-cards/cards/StateWorking.tsx
@@ -16,6 +16,7 @@ const StateWorking: React.FC<StateWorkingProps> = ({ position }) => {
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
+ zIndexRange={[1,0]}
sprite>
<div className="stateWorking-wrapper card">
<div className="header-wrapper">
diff --git a/app/src/components/layout/3D-cards/cards/Throughput.tsx b/app/src/components/layout/3D-cards/cards/Throughput.tsx
index 220c2a2..543d5f1 100644
--- a/app/src/components/layout/3D-cards/cards/Throughput.tsx
+++ b/app/src/components/layout/3D-cards/cards/Throughput.tsx
@@ -94,6 +94,7 @@ const Throughput: React.FC<ThroughputProps> = ({ position }) => {
<Html position={[position[0], position[1], position[2]]}
scale={[0.5, 0.5, 0.5]}
transform
+ zIndexRange={[1, 0]}
sprite>
<div className="throughput-wrapper">
<div className="header">Throughput</div>
diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx
index e0ca342..d5bfb29 100644
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
import {
CleanPannel,
EyeIcon,
@@ -6,6 +6,8 @@ import {
} from "../../icons/RealTimeVisulationIcons";
import { panelData } from "../../../services/realTimeVisulization/zoneData/panel";
import { AddIcon } from "../../icons/ExportCommonIcons";
+import { deletePanelApi } from "../../../services/realTimeVisulization/zoneData/deletePanel";
+import { useSocketStore } from "../../../store/store";
// Define the type for `Side`
type Side = "top" | "bottom" | "left" | "right";
@@ -16,7 +18,6 @@ interface ButtonsProps {
zoneName: string;
activeSides: Side[];
panelOrder: Side[];
-
lockedPanels: Side[];
zoneId: string;
zoneViewPortTarget: number[];
@@ -34,7 +35,7 @@ interface ButtonsProps {
zoneName: string;
activeSides: Side[];
panelOrder: Side[];
-
+
lockedPanels: Side[];
zoneId: string;
zoneViewPortTarget: number[];
@@ -58,6 +59,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
setHiddenPanels,
hiddenPanels,
}) => {
+
+ const { visualizationSocket } = useSocketStore();
+
// Local state to track hidden panels
// Function to toggle lock/unlock a panel
@@ -103,9 +107,13 @@ const AddButtons: React.FC<ButtonsProps> = ({
};
// Function to handle "+" button click
- const handlePlusButtonClick = (side: Side) => {
+ const handlePlusButtonClick = async (side: Side) => {
if (selectedZone.activeSides.includes(side)) {
- // If the panel is already active, remove all widgets and close the panel
+ // 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
+
+ // Remove all widgets associated with the side and update active sides
const cleanedWidgets = selectedZone.widgets.filter(
(widget) => widget.panel !== side
);
@@ -118,44 +126,68 @@ const AddButtons: React.FC<ButtonsProps> = ({
panelOrder: newActiveSides,
};
- // Delete the selectedZone state
+ let deletePanel = {
+ organization: organization,
+ panelName: side,
+ zoneId: selectedZone.zoneId
+ }
+ if (visualizationSocket) {
+ visualizationSocket.emit("v2:viz-panel:delete", deletePanel)
+ }
setSelectedZone(updatedZone);
+
+ // API call to delete the panel
+ // try {
+ // const response = await deletePanelApi(selectedZone.zoneId, side, organization);
+ //
+ // if (response.message === "Panel deleted successfully") {
+ // } else {
+ //
+ // }
+ // } catch (error) {
+ //
+ // }
} else {
- const updatePanelData = async () => {
- try {
- // Get email and organization safely
- const email = localStorage.getItem("email") || "";
- const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg"; // Fallback value
+ // Panel does not exist: Create panel
+ try {
+ // Get email and organization safely with a default fallback
+ const email = localStorage.getItem("email") || "";
+ const organization = email?.split("@")[1]?.split(".")[0];
- // Prevent duplicate side entries
- const newActiveSides = selectedZone.activeSides.includes(side)
- ? [...selectedZone.activeSides]
- : [...selectedZone.activeSides, side];
+ // Prevent duplicate side entries
+ const newActiveSides = selectedZone.activeSides.includes(side)
+ ? [...selectedZone.activeSides]
+ : [...selectedZone.activeSides, side];
- const updatedZone = {
- ...selectedZone,
- activeSides: newActiveSides,
- panelOrder: newActiveSides,
- };
-
- // API call
- const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
-
-
- // Update state
-
- setSelectedZone(updatedZone);
- } catch (error) {
-
+ const updatedZone = {
+ ...selectedZone,
+ activeSides: newActiveSides,
+ panelOrder: newActiveSides,
+ };
+ let addPanel = {
+ organization: organization,
+ zoneId: selectedZone.zoneId,
+ panelOrder: newActiveSides
}
- };
+ if (visualizationSocket) {
+ visualizationSocket.emit("v2:viz-panel:add", addPanel)
+ }
+ setSelectedZone(updatedZone);
+ // API call to create panels
+ // const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
+ //
- updatePanelData(); // Call the async function
+ // if (response.message === "Panels created successfully") {
+ // } else {
+ //
+ // }
+ } catch (error) {
+
+ }
}
-
-
};
+
return (
<>
<div>
diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx
index 1a2d545..45c8882 100644
--- a/app/src/components/ui/componets/DisplayZone.tsx
+++ b/app/src/components/ui/componets/DisplayZone.tsx
@@ -2,7 +2,10 @@ import React, { useEffect, useRef, useState, useCallback } from "react";
import { Widget } from "../../../store/useWidgetStore";
import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
import { InfoIcon } from "../../icons/ExportCommonIcons";
-import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore";
+import {
+ useDroppedObjectsStore,
+ useFloatingWidget,
+} from "../../../store/useDroppedObjectsStore";
import { getSelect2dZoneData } from "../../../services/realTimeVisulization/zoneData/getSelect2dZoneData";
import { getFloatingZoneData } from "../../../services/realTimeVisulization/zoneData/getFloatingData";
import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
@@ -63,7 +66,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
selectedZone,
setSelectedZone,
}) => {
- // Refs
+ // Ref for the container element
const containerRef = useRef<HTMLDivElement | null>(null);
const scrollContainerRef = useRef<HTMLDivElement | null>(null);
@@ -150,10 +153,11 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
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);
+
setFloatingWidget(res);
-
+ // Set the selected zone in the store
useDroppedObjectsStore.getState().setZone(zoneName, zoneId);
if (Array.isArray(res)) {
res.forEach((val) => {
diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx
index 97d6119..76c3264 100644
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -14,6 +14,7 @@ import { useEffect, useRef, useState } from "react";
import { duplicateWidgetApi } from "../../../services/realTimeVisulization/zoneData/duplicateWidget";
import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
import { useClickOutside } from "./functions/handleWidgetsOuterClick";
+import { useSocketStore } from "../../../store/store";
type Side = "top" | "bottom" | "left" | "right";
@@ -70,6 +71,7 @@ export const DraggableWidget = ({
openKebabId: string | null;
setOpenKebabId: (id: string | null) => void;
}) => {
+ const { visualizationSocket } = useSocketStore();
const { selectedChartId, setSelectedChartId } = useWidgetStore();
const [panelDimensions, setPanelDimensions] = useState<{
[side in Side]?: { width: number; height: number };
@@ -88,16 +90,34 @@ export const DraggableWidget = ({
try {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
- const response = await deleteWidgetApi(widget.id, organization);
- if (response?.message === "Widget deleted successfully") {
- const updatedWidgets = selectedZone.widgets.filter(
- (w: Widget) => w.id !== widget.id
- );
- setSelectedZone((prevZone: any) => ({
- ...prevZone,
- widgets: updatedWidgets,
- }));
+ let deleteWidget = {
+ zoneId: selectedZone.zoneId,
+ widgetID: widget.id,
+ organization: organization
}
+ if (visualizationSocket) {
+ visualizationSocket.emit("v2:viz-widget:delete", deleteWidget)
+ }
+ const updatedWidgets = selectedZone.widgets.filter(
+ (w: Widget) => w.id !== widget.id
+ );
+ console.log('updatedWidgets: ', updatedWidgets);
+ setSelectedZone((prevZone: any) => ({
+ ...prevZone,
+ widgets: updatedWidgets,
+ }));
+ setOpenKebabId(null);
+
+ // const response = await deleteWidgetApi(widget.id, organization);
+ // if (response?.message === "Widget deleted successfully") {
+ // const updatedWidgets = selectedZone.widgets.filter(
+ // (w: Widget) => w.id !== widget.id
+ // );
+ // setSelectedZone((prevZone: any) => ({
+ // ...prevZone,
+ // widgets: updatedWidgets,
+ // }));
+ // }
} catch (error) {
} finally {
setOpenKebabId(null);
@@ -271,14 +291,14 @@ export const DraggableWidget = ({
title={widget.title}
fontSize={widget.fontSize}
fontWeight={widget.fontWeight}
- // data={{
- // measurements: [
- // { name: "testDevice", fields: "powerConsumption" },
- // { name: "furnace", fields: "powerConsumption" },
- // ],
- // interval: 1000,
- // duration: "1h",
- // }}
+ // data={{
+ // measurements: [
+ // { name: "testDevice", fields: "powerConsumption" },
+ // { name: "furnace", fields: "powerConsumption" },
+ // ],
+ // interval: 1000,
+ // duration: "1h",
+ // }}
/>
)}
{widget.type === "bar" && (
@@ -288,14 +308,14 @@ export const DraggableWidget = ({
title={widget.title}
fontSize={widget.fontSize}
fontWeight={widget.fontWeight}
- // data={{
- // measurements: [
- // { name: "testDevice", fields: "powerConsumption" },
- // { name: "furnace", fields: "powerConsumption" },
- // ],
- // interval: 1000,
- // duration: "1h",
- // }}
+ // data={{
+ // measurements: [
+ // { name: "testDevice", fields: "powerConsumption" },
+ // { name: "furnace", fields: "powerConsumption" },
+ // ],
+ // interval: 1000,
+ // duration: "1h",
+ // }}
/>
)}
{widget.type === "pie" && (
@@ -305,14 +325,14 @@ export const DraggableWidget = ({
title={widget.title}
fontSize={widget.fontSize}
fontWeight={widget.fontWeight}
- // data={{
- // measurements: [
- // { name: "testDevice", fields: "powerConsumption" },
- // { name: "furnace", fields: "powerConsumption" },
- // ],
- // interval: 1000,
- // duration: "1h",
- // }}
+ // data={{
+ // measurements: [
+ // { name: "testDevice", fields: "powerConsumption" },
+ // { name: "furnace", fields: "powerConsumption" },
+ // ],
+ // interval: 1000,
+ // duration: "1h",
+ // }}
/>
)}
{widget.type === "doughnut" && (
diff --git a/app/src/components/ui/componets/Dropped3dWidget.tsx b/app/src/components/ui/componets/Dropped3dWidget.tsx
index 7e1042e..ac2958f 100644
--- a/app/src/components/ui/componets/Dropped3dWidget.tsx
+++ b/app/src/components/ui/componets/Dropped3dWidget.tsx
@@ -35,15 +35,16 @@ export default function Dropped3dWidgets() {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
- async function get3dWidgetData() {
- let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
- setWidgets3D(result);
- // Ensure the extracted data has id, type, and position correctly mapped
- const formattedWidgets = result.map((widget: any) => ({
- id: widget.id,
- type: widget.type,
- position: widget.position,
- }));
+ async function get3dWidgetData() {
+ let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
+ console.log('result: ', result);
+ setWidgets3D(result)
+ // Ensure the extracted data has id, type, and position correctly mapped
+ const formattedWidgets = result.map((widget: any) => ({
+ id: widget.id,
+ type: widget.type,
+ position: widget.position,
+ }));
setZoneWidgetData((prev) => ({
...prev,
diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
index 96a3417..e5f8acb 100644
--- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
+++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
@@ -80,6 +80,8 @@ const DroppedObjects: React.FC = () => {
// useClickOutside(chartWidget, () => {
// setSelectedChartId(null);
// });
+ const kebabRef = useRef<HTMLDivElement>(null);
+
// Clean up animation frame on unmount
useEffect(() => {
@@ -89,6 +91,21 @@ const DroppedObjects: React.FC = () => {
}
};
}, []);
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (kebabRef.current && !kebabRef.current.contains(event.target as Node)) {
+ setOpenKebabId(null);
+ }
+ };
+
+ // Add event listener when component mounts
+ document.addEventListener("mousedown", handleClickOutside);
+
+ // Clean up event listener when component unmounts
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, []);
const zoneEntries = Object.entries(zones);
if (zoneEntries.length === 0) return null;
@@ -107,25 +124,18 @@ const DroppedObjects: React.FC = () => {
let res = await deleteFloatingWidgetApi(id, organization);
if (res.message === "FloatingWidget deleted successfully") {
- deleteObject(zoneName, index); // Call the deleteObject method from the store
+ deleteObject(zoneName, id, index); // Call the deleteObject method from the store
}
} catch (error) {}
}
const handlePointerDown = (event: React.PointerEvent, index: number) => {
- if (
- (event.target as HTMLElement).closest(".kebab-options") ||
- (event.target as HTMLElement).closest(".kebab")
- ) {
- return;
+ if ((event.target as HTMLElement).closest(".kebab-options") || (event.target as HTMLElement).closest(".kebab")) {
+ return; // Prevent dragging when clicking on the kebab menu or its options
}
- if (isPlaying === true) return;
const obj = zone.objects[index];
const element = event.currentTarget as HTMLElement;
-
- // Set pointer capture to ensure we get all move events
element.setPointerCapture(event.pointerId);
-
const container = document.getElementById("real-time-vis-canvas");
if (!container) return;
@@ -169,6 +179,7 @@ const DroppedObjects: React.FC = () => {
// Add native event listeners for smoother tracking
const handlePointerMoveNative = (e: PointerEvent) => {
if (!draggingIndex || !offset) return;
+ if (isPlaying === true) return;
const rect = container.getBoundingClientRect();
const relativeX = e.clientX - rect.left;
@@ -356,14 +367,21 @@ const DroppedObjects: React.FC = () => {
// Update the current position state for DistanceLines
setCurrentPosition(newPosition);
-
// Update position immediately without animation frame
updateObjectPosition(zoneName, draggingIndex.index, newPosition);
+
+ // if (!animationRef.current) {
+ // animationRef.current = requestAnimationFrame(() => {
+ // updateObjectPosition(zoneName, draggingIndex.index, newPosition);
+ // animationRef.current = null;
+ // });
+ // }
};
const handlePointerUp = async (event: React.PointerEvent<HTMLDivElement>) => {
try {
if (!draggingIndex || !offset) return;
+ if (isPlaying === true) return;
const container = document.getElementById("real-time-vis-canvas");
if (!container) return;
@@ -412,11 +430,23 @@ const DroppedObjects: React.FC = () => {
...zone.objects[draggingIndex.index],
position: boundedPosition,
});
+ console.log('response: ', response);
if (response.message === "Widget updated successfully") {
updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
}
+
+ // // Clean up
+ // setDraggingIndex(null);
+ // setOffset(null);
+ // setActiveEdges(null); // Clear active edges
+ // setCurrentPosition(null); // Reset current position
+ // if (animationRef.current) {
+ // cancelAnimationFrame(animationRef.current);
+ // animationRef.current = null;
+ // }
} catch (error) {
+ console.error("Error in handlePointerUp:", error);
} finally {
// Clean up regardless of success or failure
setDraggingIndex(null);
@@ -505,19 +535,20 @@ const DroppedObjects: React.FC = () => {
) : null}
<div
className="icon kebab"
- onClick={(event) => handleKebabClick(obj.id, event)}
+ ref={kebabRef}
+ onClick={(event) => {
+ event.stopPropagation();
+ handleKebabClick(obj.id, event)
+ }}
>
<KebabIcon />
</div>
{openKebabId === obj.id && (
- <div className="kebab-options">
- <div
- className="dublicate btn"
- onClick={(event) => {
- event.stopPropagation();
- handleDuplicate(zoneName, index); // Call the duplicate handler
- }}
- >
+ <div className="kebab-options" ref={kebabRef}>
+ <div className="dublicate btn" onClick={(event) => {
+ event.stopPropagation();
+ handleDuplicate(zoneName, index); // Call the duplicate handler
+ }}>
<div className="icon">
<DublicateIcon />
</div>
@@ -537,6 +568,7 @@ const DroppedObjects: React.FC = () => {
</div>
</div>
)}
+
</div>
))}
diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx
index 027bdaa..a25630a 100644
--- a/app/src/components/ui/componets/Panel.tsx
+++ b/app/src/components/ui/componets/Panel.tsx
@@ -4,6 +4,7 @@ import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { DraggableWidget } from "./DraggableWidget";
import { arrayMove } from "@dnd-kit/sortable";
import { addingWidgets } from "../../../services/realTimeVisulization/zoneData/addWidgets";
+import { useAsset3dWidget, useSocketStore } from "../../../store/store";
type Side = "top" | "bottom" | "left" | "right";
@@ -53,6 +54,7 @@ const Panel: React.FC<PanelProps> = ({
hiddenPanels,
setZonesData,
}) => {
+ const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
const [panelDimensions, setPanelDimensions] = useState<{
[side in Side]?: { width: number; height: number };
@@ -60,14 +62,7 @@ const Panel: React.FC<PanelProps> = ({
const [openKebabId, setOpenKebabId] = useState<string | null>(null);
const { isPlaying } = usePlayButtonStore();
- console.log("selectedZone: ", selectedZone.panelOrder);
- console.log("hiddenPanels: ", hiddenPanels);
-
- // Check if any hidden panel is in the panelOrder of selectedZone
- const isPanelInSelectedZone = hiddenPanels.some(
- (panel) => selectedZone.panelOrder.includes(panel as Side) // Typecast to Side
- );
- console.log("Is panel in selectedZone: ", isPanelInSelectedZone);
+ const { visualizationSocket } = useSocketStore();
const getPanelStyle = useMemo(
() => (side: Side) => {
@@ -119,7 +114,6 @@ const Panel: React.FC<PanelProps> = ({
const maxCapacity = calculatePanelCapacity(panel);
if (currentWidgetsCount >= maxCapacity) return;
-
addWidgetToPanel(draggedAsset, panel);
};
@@ -156,22 +150,34 @@ const Panel: React.FC<PanelProps> = ({
id: generateUniqueId(),
panel,
};
- try {
- let response = await addingWidgets(
- selectedZone.zoneId,
- organization,
- newWidget
- );
-
- if (response.message === "Widget created successfully") {
- setSelectedZone((prev) => ({
- ...prev,
- widgets: [...prev.widgets, newWidget],
- }));
- }
- } catch (error) {
- console.error("Error adding widget:", error);
+ let addWidget = {
+ organization: organization,
+ zoneId: selectedZone.zoneId,
+ widget: newWidget
}
+ console.log('newWidget: ', newWidget);
+ console.log('addWidget: ', addWidget);
+ if (visualizationSocket) {
+ visualizationSocket.emit("v2:viz-widget:add", addWidget)
+ }
+ setSelectedZone((prev) => ({
+ ...prev,
+ widgets: [...prev.widgets, newWidget],
+ }));
+
+ // try {
+ // let response = await addingWidgets(selectedZone.zoneId, organization, newWidget);
+
+ // if (response.message === "Widget created successfully") {
+ // setSelectedZone((prev) => ({
+ // ...prev,
+ // widgets: [...prev.widgets, newWidget],
+ // }));
+ // }
+ // } catch (error) {
+ // console.error("Error adding widget:", error);
+ // }
+
};
useEffect(() => {
diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx
index cb59d1a..a0bd711 100644
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -7,10 +7,11 @@ import DisplayZone from "./DisplayZone";
import Scene from "../../../modules/scene/scene";
import useModuleStore from "../../../store/useModuleStore";
-import DroppedObjects from "./DroppedFloatingWidgets";
+
import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
import {
useAsset3dWidget,
+ useSocketStore,
useWidgetSubOption,
useZones,
} from "../../../store/store";
@@ -18,9 +19,10 @@ import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/g
import { generateUniqueId } from "../../../functions/generateUniqueId";
import { determinePosition } from "./functions/determinePosition";
import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
-import EditWidgetOption from "../menu/EditWidgetOption";
+import SocketRealTimeViz from "../../../modules/visualization/realTimeVizSocket.dev";
import RenderOverlay from "../../templates/Overlay";
import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup";
+import DroppedObjects from "./DroppedFloatingWidgets";
type Side = "top" | "bottom" | "left" | "right";
@@ -62,6 +64,7 @@ const RealTimeVisulization: React.FC = () => {
>({});
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
+ const { visualizationSocket } = useSocketStore();
useEffect(() => {
async function GetZoneData() {
@@ -136,6 +139,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 newObject = {
...droppedData,
id: generateUniqueId(),
@@ -216,11 +221,10 @@ const RealTimeVisulization: React.FC = () => {
onDrop={(event) => handleDrop(event)}
onDragOver={(event) => event.preventDefault()}
>
- {/* <Scene /> */}
+ <Scene />
</div>
- {activeModule === "visualization" && selectedZone.zoneName !== "" && (
- <DroppedObjects />
- )}
+ {activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
+ {activeModule === "visualization" && <SocketRealTimeViz />}
{/* <DroppedObjects /> */}
{activeModule === "visualization" && (
<>
diff --git a/app/src/components/ui/componets/functions/determinePosition.ts b/app/src/components/ui/componets/functions/determinePosition.ts
index 1d40236..5e3db3f 100644
--- a/app/src/components/ui/componets/functions/determinePosition.ts
+++ b/app/src/components/ui/componets/functions/determinePosition.ts
@@ -1,69 +1,3 @@
-// export function determinePosition(
-// canvasRect: DOMRect,
-// relativeX: number,
-// relativeY: number
-// ): {
-// top: number | "auto";
-// left: number | "auto";
-// right: number | "auto";
-// bottom: number | "auto";
-// } {
-// // Calculate the midpoints of the canvas
-// const centerX = canvasRect.width / 2;
-// const centerY = canvasRect.height / 2;
-
-// // Initialize position with default values
-// let position: {
-// top: number | "auto";
-// left: number | "auto";
-// right: number | "auto";
-// bottom: number | "auto";
-// };
-
-// if (relativeY < centerY) {
-// // Top half
-// if (relativeX < centerX) {
-// // Left side
-// position = {
-// top: relativeY,
-// left: relativeX,
-// right: "auto",
-// bottom: "auto",
-// };
-// } else {
-// // Right side
-// position = {
-// top: relativeY,
-// right: canvasRect.width - relativeX,
-// left: "auto",
-// bottom: "auto",
-// };
-// }
-// } else {
-// // Bottom half
-// if (relativeX < centerX) {
-// // Left side
-// position = {
-// bottom: canvasRect.height - relativeY,
-// left: relativeX,
-// right: "auto",
-// top: "auto",
-// };
-// } else {
-// // Right side
-// position = {
-// bottom: canvasRect.height - relativeY,
-// right: canvasRect.width - relativeX,
-// left: "auto",
-// top: "auto",
-// };
-// }
-// }
-
-// return position;
-// }
-
-
export function determinePosition(
canvasRect: DOMRect,
@@ -89,16 +23,16 @@ export function determinePosition(
if (relativeX < centerX) {
position = {
- top: relativeY,
- left: relativeX,
+ top: relativeY - 41.5,
+ left: relativeX - 125,
right: "auto",
bottom: "auto",
};
} else {
position = {
- top: relativeY,
- right: canvasRect.width - relativeX,
+ top: relativeY - 41.5,
+ right: canvasRect.width - relativeX - 125,
left: "auto",
bottom: "auto",
};
@@ -107,16 +41,16 @@ export function determinePosition(
if (relativeX < centerX) {
position = {
- bottom: canvasRect.height - relativeY,
- left: relativeX,
+ bottom: canvasRect.height - relativeY - 41.5,
+ left: relativeX - 125,
right: "auto",
top: "auto",
};
} else {
position = {
- bottom: canvasRect.height - relativeY,
- right: canvasRect.width - relativeX,
+ bottom: canvasRect.height - relativeY - 41.5,
+ right: canvasRect.width - relativeX - 125,
left: "auto",
top: "auto",
};
@@ -124,4 +58,4 @@ export function determinePosition(
}
return position;
-}
\ No newline at end of file
+}
diff --git a/app/src/modules/visualization/realTimeVizSocket.dev.tsx b/app/src/modules/visualization/realTimeVizSocket.dev.tsx
new file mode 100644
index 0000000..4210d01
--- /dev/null
+++ b/app/src/modules/visualization/realTimeVizSocket.dev.tsx
@@ -0,0 +1,65 @@
+import { useEffect } from "react";
+import { useSocketStore } from "../../store/store";
+import { useSelectedZoneStore } from "../../store/useZoneStore";
+
+export default function SocketRealTimeViz() {
+ const { visualizationSocket } = useSocketStore();
+ const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+ useEffect(() => {
+ const email = localStorage.getItem("email") || "";
+ const organization = email?.split("@")[1]?.split(".")[0];
+ if (visualizationSocket) {
+ //add panel response
+ visualizationSocket.on("viz-panel:response:updates", (addPanel: any) => {
+ if (addPanel.success) {
+ let addPanelData = addPanel.data.data
+ setSelectedZone(addPanelData)
+ }
+ })
+ //delete panel response
+ visualizationSocket.on("viz-panel:response:delete", (deletePanel: any) => {
+ if (deletePanel.success) {
+ let deletePanelData = deletePanel.data.data
+ setSelectedZone(deletePanelData)
+ }
+ })
+ // add 2dWidget
+ visualizationSocket.on("viz-widget:response:updates", (response: any) => {
+ console.log('response: ', response);
+ if (response.success && response.data) {
+ setSelectedZone((prev) => {
+ const isWidgetAlreadyAdded = prev.widgets.some(
+ (widget) => widget.id === response.data.widgetData.id
+ );
+ if (isWidgetAlreadyAdded) return prev; // Prevent duplicate addition
+ return {
+ ...prev,
+ zoneId: response.data.zoneId,
+ zoneName: response.data.zoneName,
+ widgets: [...prev.widgets, response.data.widgetData], // Append new widget
+ };
+ });
+ }
+ });
+ //delete 2D Widget
+ visualizationSocket.on("viz-widget:response:delete", (deleteWidget: any) => {
+ console.log('deleteWidget: ', deleteWidget);
+ if (deleteWidget?.success && deleteWidget.data) {
+ setSelectedZone((prevZone: any) => ({
+ ...prevZone,
+ zoneId: deleteWidget.data.zoneId,
+ zoneName: deleteWidget.data.zoneName,
+ widgets: deleteWidget.data.widgetDeleteDatas, // Replace with new widget list
+ }));
+ }
+ });
+ }
+ }, [])
+
+ useEffect(() => {
+
+ }, [selectedZone])
+ return (
+ <></>
+ )
+}
\ No newline at end of file
diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx
index 88fd467..54fe61f 100644
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -56,7 +56,7 @@ const Project: React.FC = () => {
return (
<div className="project-main">
- {/* {loadingProgress && <LoadingPage progress={loadingProgress} />} */}
+ {loadingProgress && <LoadingPage progress={loadingProgress} />}
{!isPlaying && (
<>
{toggleThreeD && <ModuleToggle />}
diff --git a/app/src/services/realTimeVisulization/zoneData/deletePanel.ts b/app/src/services/realTimeVisulization/zoneData/deletePanel.ts
new file mode 100644
index 0000000..21f4846
--- /dev/null
+++ b/app/src/services/realTimeVisulization/zoneData/deletePanel.ts
@@ -0,0 +1,34 @@
+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 deletePanelApi = async (
+ zoneId: string,
+ panelName: string,
+ organization: string
+) => {
+ console.log('panelName: ', panelName);
+ console.log('organization: ', organization);
+ console.log('zoneId: ', zoneId);
+ try {
+ const response = await fetch(`${url_Backend_dwinzo}/api/v2/panel/delete`, {
+ method: "PATCH",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ organization, zoneId, panelName }),
+ });
+
+ if (!response.ok) {
+ throw new Error("Failed to delete 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");
+ }
+ }
+};
diff --git a/app/src/services/realTimeVisulization/zoneData/useFloatingDataStore.ts b/app/src/services/realTimeVisulization/zoneData/useFloatingDataStore.ts
deleted file mode 100644
index 39a542a..0000000
--- a/app/src/services/realTimeVisulization/zoneData/useFloatingDataStore.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { create } from "zustand";
-
-const useFloatingDataStore = create((set) => ({
- floatingdata: [], // Initial state
- setfloatingadata: (newData: []) => set({ floatingdata: newData }), // Setter function
-}));
-
-export default useFloatingDataStore;
diff --git a/app/src/store/store.ts b/app/src/store/store.ts
index 6affa99..152fa9d 100644
--- a/app/src/store/store.ts
+++ b/app/src/store/store.ts
@@ -11,16 +11,28 @@ export const useSocketStore = create<any>((set: any, get: any) => ({
return;
}
- const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`, {
- reconnection: false,
- auth: { email, organization },
- });
+ const socket = io(
+ `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}`,
+ {
+ reconnection: false,
+ auth: { email, organization },
+ }
+ );
- set({ socket });
+ const visualizationSocket = io(
+ `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`,
+ {
+ reconnection: false,
+ auth: { email, organization },
+ }
+ );
+
+ set({ socket, visualizationSocket });
},
disconnectSocket: () => {
set((state: any) => {
state.socket?.disconnect();
+ state.visualizationSocket?.disconnect();
return { socket: null };
});
},
@@ -205,7 +217,9 @@ export const useActiveLayer = create<any>((set: any) => ({
interface RefTextUpdateState {
refTextupdate: number;
- setRefTextUpdate: (callback: (currentValue: number) => number | number) => void;
+ setRefTextUpdate: (
+ callback: (currentValue: number) => number | number
+ ) => void;
}
export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({
@@ -213,7 +227,9 @@ export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({
setRefTextUpdate: (callback) =>
set((state) => ({
refTextupdate:
- typeof callback === "function" ? callback(state.refTextupdate) : callback,
+ typeof callback === "function"
+ ? callback(state.refTextupdate)
+ : callback,
})),
}));
@@ -393,4 +409,3 @@ export const useWidgetSubOption = create<any>((set: any) => ({
widgetSubOption: "2D",
setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
}));
-
diff --git a/app/src/store/useDroppedObjectsStore.ts b/app/src/store/useDroppedObjectsStore.ts
index 83f3a8a..45f40e0 100644
--- a/app/src/store/useDroppedObjectsStore.ts
+++ b/app/src/store/useDroppedObjectsStore.ts
@@ -36,7 +36,7 @@ type DroppedObjectsState = {
bottom: number | "auto";
}
) => void;
- deleteObject: (zoneName: string, index: number) => void; // Add this line
+ deleteObject: (zoneName: string, id: string, index: number) => void; // Add this line
duplicateObject: (zoneName: string, index: number) => void; // Add this line
};
@@ -77,15 +77,16 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
};
}),
- deleteObject: (zoneName: string, index: number) =>
+ deleteObject: (zoneName: string, id: string, index: number) =>
set((state) => {
const zone = state.zones[zoneName];
+ console.log("zone: ", zone);
if (!zone) return state;
return {
zones: {
[zoneName]: {
...zone,
- objects: zone.objects.filter((_, i) => i !== index), // Remove object at the given index
+ objects: zone.objects.filter((obj) => obj.id !== id), // Remove object at the given index
},
},
};