Bug Fixes:

- Zone Selection Panel moves to the bottom when the bottom panel is hidden.
- Zone Selection Panel gets hidden by 3D widgets when switching zones.
- Template image not rendering on the Template page despite being saved.

app/src/modules/visualization/captureVisualization.ts

@@ -2,19 +2,32 @@ import html2canvas from "html2canvas";
 
 export const captureVisualization = async (): Promise<string | null> => {
   const container = document.getElementById("real-time-vis-canvas");
-  if (!container) return null;
+  if (!container) {
+    console.error("Container element not found");
+    return null;
+  }
 
   try {
-    // Use html2canvas to capture the container
+    // Hide any elements you don't want in the screenshot
+    const originalVisibility = container.style.visibility;
+    container.style.visibility = 'visible';
+    
     const canvas = await html2canvas(container, {
-      scale: 1, // Adjust scale for higher/lower resolution
+      scale: 2, // Higher scale for better quality
+      logging: false, // Disable console logging
+      useCORS: true, // Handle cross-origin images
+      allowTaint: true, // Allow tainted canvas
+      backgroundColor: '#ffffff', // Set white background
+      removeContainer: true // Clean up temporary containers
     });
 
-    // Convert the canvas to a data URL (PNG format)
-    const dataUrl = canvas.toDataURL("image/png");
-    return dataUrl;
+    // Restore original visibility
+    container.style.visibility = originalVisibility;
+
+    // Convert to PNG with highest quality
+    return canvas.toDataURL('image/png', 1.0);
   } catch (error) {
     console.error("Error capturing visualization:", error);
     return null;
   }
-};
+};

app/src/modules/visualization/handleSaveTemplate.ts

@@ -1,5 +1,3 @@
-import { saveTemplateApi } from "../../services/realTimeVisulization/zoneData/saveTempleteApi";
-import { useSocketStore } from "../../store/store";
 import { Template } from "../../store/useTemplateStore";
 import { captureVisualization } from "./captureVisualization";
 
@@ -28,6 +26,7 @@ export const handleSaveTemplate = async ({
   templates = [],
   visualizationSocket,
 }: HandleSaveTemplateProps): Promise<void> => {
+  console.log("floatingWidget: ", floatingWidget);
   try {
     // Check if the selected zone has any widgets
     if (!selectedZone.panelOrder || selectedZone.panelOrder.length === 0) {
@@ -50,9 +49,10 @@ export const handleSaveTemplate = async ({
     // Capture visualization snapshot
     const snapshot = await captureVisualization();
 
-    // if (!snapshot) {
-    //   return;
-    // }
+    if (!snapshot) {
+      return;
+    }
+
     // Create a new template
     const newTemplate: Template = {
       id: generateUniqueId(),

app/src/modules/visualization/realTimeVizSocket.dev.tsx

@@ -15,22 +15,19 @@ type WidgetData = {
 
 export default function SocketRealTimeViz() {
     const { visualizationSocket } = useSocketStore();
-    const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+    const { setSelectedZone } = useSelectedZoneStore();
     const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
-    const duplicateObject = useDroppedObjectsStore((state) => state.duplicateObject);
     const updateObjectPosition = useDroppedObjectsStore((state) => state.updateObjectPosition);
     const { addWidget } = useZoneWidgetStore()
-    const { templates, removeTemplate } = useTemplateStore();
+    const { removeTemplate } = useTemplateStore();
     const { setTemplates } = useTemplateStore();
     const { zoneWidgetData, setZoneWidgetData, updateWidgetPosition, updateWidgetRotation } = useZoneWidgetStore();
 
     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) => {
-                console.log('addPanel: ', addPanel);
+
                 if (addPanel.success) {
                     let addPanelData = addPanel.data.data
                     setSelectedZone(addPanelData)
@@ -38,15 +35,33 @@ export default function SocketRealTimeViz() {
             })
             //delete panel response
             visualizationSocket.on("viz-panel:response:delete", (deletePanel: any) => {
-                console.log('deletePanel: ', deletePanel);
+
                 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) => {
-                console.log('add2dWidget: ', add2dWidget);
+
 
                 if (add2dWidget.success && add2dWidget.data) {
                     setSelectedZone((prev) => {
@@ -65,7 +80,7 @@ export default function SocketRealTimeViz() {
             });
             //delete 2D Widget response
             visualizationSocket.on("viz-widget:response:delete", (deleteWidget: any) => {
-                console.log('deleteWidget: ', deleteWidget);
+
 
                 if (deleteWidget?.success && deleteWidget.data) {
                     setSelectedZone((prevZone: any) => ({
@@ -78,7 +93,7 @@ export default function SocketRealTimeViz() {
             });
             //add Floating Widget response
             visualizationSocket.on("viz-float:response:updates", (addFloatingWidget: any) => {
-                console.log('addFloatingWidget: ', addFloatingWidget);
+
 
                 if (addFloatingWidget.success) {
                     if (addFloatingWidget.success && addFloatingWidget.message === "FloatWidget created successfully") {
@@ -105,7 +120,7 @@ export default function SocketRealTimeViz() {
             });
             //duplicate Floating Widget response
             visualizationSocket.on("viz-float:response:addDuplicate", (duplicateFloatingWidget: any) => {
-                console.log('duplicateFloatingWidget: ', duplicateFloatingWidget);
+
 
                 if (duplicateFloatingWidget.success && duplicateFloatingWidget.message === "duplicate FloatWidget created successfully") {
                     useDroppedObjectsStore.setState((state) => {
@@ -133,7 +148,7 @@ export default function SocketRealTimeViz() {
             });
             //delete Floating Widget response
             visualizationSocket.on("viz-float:response:delete", (deleteFloatingWidget: any) => {
-                console.log('deleteFloatingWidget: ', deleteFloatingWidget);
+
 
                 if (deleteFloatingWidget.success) {
                     deleteObject(deleteFloatingWidget.data.zoneName, deleteFloatingWidget.data.floatWidgetID);
@@ -142,9 +157,9 @@ export default function SocketRealTimeViz() {
             //add 3D Widget response
             visualizationSocket.on("viz-widget3D:response:updates", (add3DWidget: any) => {
 
-                console.log('add3DWidget: ', add3DWidget);
+
                 if (add3DWidget.success) {
-                    console.log('add3DWidget: ', add3DWidget);
+
                     if (add3DWidget.message === "Widget created successfully") {
                         addWidget(add3DWidget.data.zoneId, add3DWidget.data.widget);
                     }
@@ -152,7 +167,7 @@ export default function SocketRealTimeViz() {
             });
             //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] || [];
@@ -164,16 +179,16 @@ export default function SocketRealTimeViz() {
             });
             //update3D widget response
             visualizationSocket.on("viz-widget3D:response:modifyPositionRotation", (update3DWidget: any) => {
-                console.log('update3DWidget: ', update3DWidget);
-                
-                if (update3DWidget.success && update3DWidget.message==="widget update successfully") {
+
+
+                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);
+
 
                 if (addingTemplate.success) {
                     if (addingTemplate.message === "Template saved successfully") {
@@ -183,7 +198,7 @@ export default function SocketRealTimeViz() {
             });
             //load Template response
             visualizationSocket.on("viz-template:response:addTemplateZone", (loadTemplate: any) => {
-                console.log('loadTemplate: ', loadTemplate);
+
 
                 if (loadTemplate.success) {
                     if (loadTemplate.message === "Template placed in Zone") {
@@ -206,14 +221,12 @@ export default function SocketRealTimeViz() {
             });
             //delete Template response
             visualizationSocket.on("viz-template:response:delete", (deleteTemplate: any) => {
-                console.log('deleteTemplate: ', deleteTemplate);
+
 
                 if (deleteTemplate.success) {
                     if (deleteTemplate.message === 'Template deleted successfully') {
                         removeTemplate(deleteTemplate.data);
                     }
-
-
                 }
             });
         }