diff --git a/app/src/components/layout/3D-cards/cards/StateWorking.tsx b/app/src/components/layout/3D-cards/cards/StateWorking.tsx index 287bc15..9adf77f 100644 --- a/app/src/components/layout/3D-cards/cards/StateWorking.tsx +++ b/app/src/components/layout/3D-cards/cards/StateWorking.tsx @@ -46,7 +46,7 @@ const StateWorking: React.FC = ({ id, type, position, rotatio socket.on("connect", startStream); socket.on("lastOutput", (response) => { const responseData = response; - console.log("responceeeeeeeeeee", response); + setDatas(responseData); }); @@ -76,7 +76,7 @@ const StateWorking: React.FC = ({ id, type, position, rotatio } } - console.log("dataaaaa", datas); + useEffect(() => { diff --git a/app/src/components/ui/componets/Dropped3dWidget.tsx b/app/src/components/ui/componets/Dropped3dWidget.tsx index 567aa7a..d870195 100644 --- a/app/src/components/ui/componets/Dropped3dWidget.tsx +++ b/app/src/components/ui/componets/Dropped3dWidget.tsx @@ -50,6 +50,7 @@ export default function Dropped3dWidgets() { 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; if (!selectedZone.zoneId) return; @@ -139,8 +140,6 @@ export default function Dropped3dWidgets() { if (rightSelect === "Duplicate") { async function duplicateWidget() { - - const widgetToDuplicate = activeZoneWidgets.find((w: WidgetData) => w.id === rightClickSelected); if (!widgetToDuplicate) return; const newWidget: WidgetData = { @@ -154,12 +153,15 @@ export default function Dropped3dWidgets() { rotation: widgetToDuplicate.rotation || [0, 0, 0], }; const adding3dWidget = { - organization, + organization: organization, widget: newWidget, zoneId: selectedZone.zoneId }; - let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget) - console.log('response: ', response); + if (visualizationSocket) { + visualizationSocket.emit("v2:viz-3D-widget:add", adding3dWidget); + } + // let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget) + // console.log('response: ', response); addWidget(selectedZone.zoneId, newWidget); setRightSelect(null); @@ -173,23 +175,20 @@ export default function Dropped3dWidgets() { try { const deleteWidget = { organization, - widgetId: rightClickSelected, + id: rightClickSelected, zoneId: selectedZone.zoneId, }; + console.log('deleteWidget: ', deleteWidget); + if (visualizationSocket) { + visualizationSocket.emit("v2:viz-3D-widget:delete", deleteWidget); + } // 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 + // const response = await delete3dWidgetApi(selectedZone.zoneId, organization, rightClickSelected); 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 { @@ -298,44 +297,60 @@ export default function Dropped3dWidgets() { const handleMouseUp = () => { if (!rightClickSelected || !rightSelect) return; - const selectedZone = Object.keys(zoneWidgetData).find(zoneId => zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected) ); - if (!selectedZone) return; const selectedWidget = zoneWidgetData[selectedZone].find(widget => widget.id === rightClickSelected); if (!selectedWidget) return; + + // Format values to 2 decimal places const formatValues = (vals: number[]) => vals.map(val => parseFloat(val.toFixed(2))); if (rightSelect === "Horizontal Move" || rightSelect === "Vertical Move") { console.log(`${rightSelect} Completed - Full Position:`, formatValues(selectedWidget.position)); let lastPosition = formatValues(selectedWidget.position) as [number, number, number]; + // (async () => { + // let response = await update3dWidget(selectedZone, organization, rightClickSelected, lastPosition); + // console.log('response: ', response); + // if (response) { + // console.log("Widget position updated in API:", response); + // } + // })(); + let updatingPosition = { + organization: organization, + zoneId: selectedZone, + id: rightClickSelected, + position: lastPosition, + } + if (visualizationSocket) { + visualizationSocket.emit("v2:viz-3D-widget:modifyPositionRotation", updatingPosition); + } - (async () => { - let response = await update3dWidget(selectedZone, organization, rightClickSelected, lastPosition); - console.log('response: ', response); - if (response) { - console.log("Widget position updated in API:", response); - } - })(); } else if (rightSelect.includes("Rotate")) { const rotation = selectedWidget.rotation || [0, 0, 0]; console.log(`${rightSelect} Completed - Full Rotation:`, formatValues(rotation)); - let lastPosition = formatValues(rotation) as [number, number, number]; - console.log('lastPosition: ', lastPosition); - - (async () => { - let response = await update3dWidgetRotation(selectedZone, organization, rightClickSelected, lastPosition); - console.log('response: ', response); - if (response) { - console.log("Widget position updated in API:", response); - } - })(); + let lastRotation = formatValues(rotation) as [number, number, number]; + // (async () => { + // let response = await update3dWidgetRotation(selectedZone, organization, rightClickSelected, lastRotation); + // console.log('response: ', response); + // if (response) { + // console.log("Widget position updated in API:", response); + // } + // })(); + let updatingRotation = { + organization: organization, + zoneId: selectedZone, + id: rightClickSelected, + rotation: lastRotation, + } + if (visualizationSocket) { + visualizationSocket.emit("v2:viz-3D-widget:modifyPositionRotation", updatingRotation); + } } // Reset selection diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx index 7629730..a841b53 100644 --- a/app/src/components/ui/list/List.tsx +++ b/app/src/components/ui/list/List.tsx @@ -31,7 +31,7 @@ interface ListProps { } const List: React.FC = ({ items = [], remove }) => { - console.log("items: ", items); + const { activeModule, setActiveModule } = useModuleStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { setSubModule } = useSubModuleStore(); diff --git a/app/src/modules/visualization/realTimeVizSocket.dev.tsx b/app/src/modules/visualization/realTimeVizSocket.dev.tsx index ad5e226..9ee6b5b 100644 --- a/app/src/modules/visualization/realTimeVizSocket.dev.tsx +++ b/app/src/modules/visualization/realTimeVizSocket.dev.tsx @@ -5,6 +5,14 @@ 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 { selectedZone, setSelectedZone } = useSelectedZoneStore(); @@ -14,6 +22,7 @@ export default function SocketRealTimeViz() { const { addWidget } = useZoneWidgetStore() const { templates, removeTemplate } = useTemplateStore(); const { setTemplates } = useTemplateStore(); + const { zoneWidgetData, setZoneWidgetData, updateWidgetPosition, updateWidgetRotation } = useZoneWidgetStore(); useEffect(() => { const email = localStorage.getItem("email") || ""; @@ -132,14 +141,36 @@ export default function SocketRealTimeViz() { }); //add 3D Widget response visualizationSocket.on("viz-widget3D:response:updates", (add3DWidget: any) => { - console.log('add3DWidget: ', add3DWidget); + console.log('add3DWidget: ', add3DWidget); if (add3DWidget.success) { + console.log('add3DWidget: ', add3DWidget); 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) => { + console.log('delete3DWidget: ', delete3DWidget); + // "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) => { + console.log('update3DWidget: ', update3DWidget); + + 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) => { console.log('addingTemplate: ', addingTemplate);