238 lines
11 KiB
TypeScript
238 lines
11 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useSocketStore } from "../../store/store";
|
|
import { useSelectedZoneStore } from "../../store/useZoneStore";
|
|
import { useDroppedObjectsStore } from "../../store/useDroppedObjectsStore";
|
|
import { useZoneWidgetStore } from "../../store/useZone3DWidgetStore";
|
|
import useTemplateStore from "../../store/useTemplateStore";
|
|
|
|
type WidgetData = {
|
|
id: string;
|
|
type: string;
|
|
position: [number, number, number];
|
|
rotation?: [number, number, number];
|
|
tempPosition?: [number, number, number];
|
|
};
|
|
|
|
export default function SocketRealTimeViz() {
|
|
const { visualizationSocket } = useSocketStore();
|
|
const { setSelectedZone } = useSelectedZoneStore();
|
|
const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
|
|
const updateObjectPosition = useDroppedObjectsStore((state) => state.updateObjectPosition);
|
|
const { addWidget } = useZoneWidgetStore()
|
|
const { removeTemplate } = useTemplateStore();
|
|
const { setTemplates } = useTemplateStore();
|
|
const { zoneWidgetData, setZoneWidgetData, updateWidgetPosition, updateWidgetRotation } = useZoneWidgetStore();
|
|
|
|
useEffect(() => {
|
|
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)
|
|
}
|
|
})
|
|
//clear Panel response
|
|
visualizationSocket.on("viz-panel:response:clear", (clearPanel: any) => {
|
|
|
|
if (clearPanel.success && clearPanel.message === "PanelWidgets cleared successfully") {
|
|
|
|
let clearPanelData = clearPanel.data.data
|
|
setSelectedZone(clearPanelData)
|
|
}
|
|
})
|
|
//lock Panel response
|
|
visualizationSocket.on("viz-panel:response:locked", (lockPanel: any) => {
|
|
|
|
if (lockPanel.success && lockPanel.message === "locked panel updated successfully") {
|
|
|
|
let lockPanelData = lockPanel.data.data
|
|
setSelectedZone(lockPanelData)
|
|
}
|
|
})
|
|
// add 2dWidget response
|
|
visualizationSocket.on("viz-widget:response:updates", (add2dWidget: any) => {
|
|
|
|
|
|
if (add2dWidget.success && add2dWidget.data) {
|
|
setSelectedZone((prev) => {
|
|
const isWidgetAlreadyAdded = prev.widgets.some(
|
|
(widget) => widget.id === add2dWidget.data.widgetData.id
|
|
);
|
|
if (isWidgetAlreadyAdded) return prev; // Prevent duplicate addition
|
|
return {
|
|
...prev,
|
|
zoneId: add2dWidget.data.zoneId,
|
|
zoneName: add2dWidget.data.zoneName,
|
|
widgets: [...prev.widgets, add2dWidget.data.widgetData], // Append new widget
|
|
};
|
|
});
|
|
}
|
|
});
|
|
//delete 2D Widget response
|
|
visualizationSocket.on("viz-widget:response:delete", (deleteWidget: any) => {
|
|
|
|
|
|
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
|
|
}));
|
|
}
|
|
});
|
|
//add Floating Widget response
|
|
visualizationSocket.on("viz-float:response:updates", (addFloatingWidget: any) => {
|
|
|
|
|
|
if (addFloatingWidget.success) {
|
|
if (addFloatingWidget.success && addFloatingWidget.message === "FloatWidget created successfully") {
|
|
const state = useDroppedObjectsStore.getState();
|
|
const zone = state.zones[addFloatingWidget.data.zoneName];
|
|
if (!zone) {
|
|
state.setZone(addFloatingWidget.data.zoneName, addFloatingWidget.data.zoneId);
|
|
}
|
|
const existingObjects = zone ? zone.objects : [];
|
|
const newWidget = addFloatingWidget.data.widget;
|
|
// ✅ Check if the widget ID already exists before adding
|
|
const isAlreadyAdded = existingObjects.some(obj => obj.id === newWidget.id);
|
|
if (isAlreadyAdded) {
|
|
|
|
return; // Don't add the widget if it already exists
|
|
}
|
|
// Add widget only if it doesn't exist
|
|
state.addObject(addFloatingWidget.data.zoneName, newWidget);
|
|
}
|
|
if (addFloatingWidget.message === "Widget updated successfully") {
|
|
updateObjectPosition(addFloatingWidget.data.zoneName, addFloatingWidget.data.index, addFloatingWidget.data.position);
|
|
}
|
|
}
|
|
});
|
|
//duplicate Floating Widget response
|
|
visualizationSocket.on("viz-float:response:addDuplicate", (duplicateFloatingWidget: any) => {
|
|
|
|
|
|
if (duplicateFloatingWidget.success && duplicateFloatingWidget.message === "duplicate FloatWidget created successfully") {
|
|
useDroppedObjectsStore.setState((state) => {
|
|
const zone = state.zones[duplicateFloatingWidget.data.zoneName];
|
|
if (!zone) return state; // Zone doesn't exist, return state as is
|
|
const existingObjects = zone.objects;
|
|
const newWidget = duplicateFloatingWidget.data.widget;
|
|
// ✅ Check if the object with the same ID already exists
|
|
const isAlreadyAdded = existingObjects.some(obj => obj.id === newWidget.id);
|
|
if (isAlreadyAdded) {
|
|
|
|
return state; // Don't update state if it's already there
|
|
}
|
|
return {
|
|
zones: {
|
|
...state.zones,
|
|
[duplicateFloatingWidget.data.zoneName]: {
|
|
...zone,
|
|
objects: [...existingObjects, newWidget], // Append only if it's not a duplicate
|
|
},
|
|
},
|
|
};
|
|
});
|
|
}
|
|
});
|
|
//delete Floating Widget response
|
|
visualizationSocket.on("viz-float:response:delete", (deleteFloatingWidget: any) => {
|
|
|
|
|
|
if (deleteFloatingWidget.success) {
|
|
deleteObject(deleteFloatingWidget.data.zoneName, deleteFloatingWidget.data.floatWidgetID);
|
|
}
|
|
});
|
|
//add 3D Widget response
|
|
visualizationSocket.on("viz-widget3D:response:updates", (add3DWidget: any) => {
|
|
|
|
|
|
if (add3DWidget.success) {
|
|
|
|
if (add3DWidget.message === "Widget created successfully") {
|
|
addWidget(add3DWidget.data.zoneId, add3DWidget.data.widget);
|
|
}
|
|
}
|
|
});
|
|
//delete 3D Widget response
|
|
visualizationSocket.on("viz-widget3D:response:delete", (delete3DWidget: any) => {
|
|
|
|
// "3DWidget delete unsuccessfull"
|
|
if (delete3DWidget.success && delete3DWidget.message === "3DWidget delete successfull") {
|
|
const activeZoneWidgets = zoneWidgetData[delete3DWidget.data.zoneId] || [];
|
|
setZoneWidgetData(
|
|
delete3DWidget.data.zoneId,
|
|
activeZoneWidgets.filter((w: WidgetData) => w.id !== delete3DWidget.data.id)
|
|
);
|
|
}
|
|
});
|
|
//update3D widget response
|
|
visualizationSocket.on("viz-widget3D:response:modifyPositionRotation", (update3DWidget: any) => {
|
|
|
|
|
|
if (update3DWidget.success && update3DWidget.message === "widget update successfully") {
|
|
updateWidgetPosition(update3DWidget.data.zoneId, update3DWidget.data.widget.id, update3DWidget.data.widget.position);
|
|
updateWidgetRotation(update3DWidget.data.zoneId, update3DWidget.data.widget.id, update3DWidget.data.widget.rotation);
|
|
}
|
|
});
|
|
// add Template response
|
|
visualizationSocket.on("viz-template:response:add", (addingTemplate: any) => {
|
|
|
|
|
|
if (addingTemplate.success) {
|
|
if (addingTemplate.message === "Template saved successfully") {
|
|
setTemplates(addingTemplate.data);
|
|
}
|
|
}
|
|
});
|
|
//load Template response
|
|
visualizationSocket.on("viz-template:response:addTemplateZone", (loadTemplate: any) => {
|
|
|
|
|
|
if (loadTemplate.success) {
|
|
if (loadTemplate.message === "Template placed in Zone") {
|
|
let template = loadTemplate.data.template
|
|
setSelectedZone({
|
|
panelOrder: template.panelOrder,
|
|
activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
|
|
widgets: template.widgets,
|
|
});
|
|
useDroppedObjectsStore.getState().setZone(template.zoneName, template.zoneId);
|
|
|
|
if (Array.isArray(template.floatingWidget)) {
|
|
template.floatingWidget.forEach((val: any) => {
|
|
useDroppedObjectsStore.getState().addObject(template.zoneName, val);
|
|
});
|
|
}
|
|
}
|
|
|
|
}
|
|
});
|
|
//delete Template response
|
|
visualizationSocket.on("viz-template:response:delete", (deleteTemplate: any) => {
|
|
|
|
|
|
if (deleteTemplate.success) {
|
|
if (deleteTemplate.message === 'Template deleted successfully') {
|
|
removeTemplate(deleteTemplate.data);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}, [visualizationSocket])
|
|
|
|
return (
|
|
<></>
|
|
)
|
|
} |