Merge remote-tracking branch 'origin/ui' into simulation

app/src/modules/visualization/captureVisualization.ts

@@ -1,55 +1,20 @@
+import html2canvas from "html2canvas";
+
 export const captureVisualization = async (): Promise<string | null> => {
-    const container = document.getElementById("real-time-vis-canvas");
-    if (!container) return null;
+  const container = document.getElementById("real-time-vis-canvas");
+  if (!container) return null;
 
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return null;
-
-    const rect = container.getBoundingClientRect();
-    canvas.width = rect.width;
-    canvas.height = rect.height;
-
-    // Draw background
-    ctx.fillStyle = getComputedStyle(container).backgroundColor;
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-    // Capture all canvas elements
-    const canvases = container.querySelectorAll("canvas");
-    canvases.forEach((childCanvas) => {
-        const childRect = childCanvas.getBoundingClientRect();
-        const x = childRect.left - rect.left;
-        const y = childRect.top - rect.top;
-        ctx.drawImage(childCanvas, x, y, childRect.width, childRect.height);
+  try {
+    // Use html2canvas to capture the container
+    const canvas = await html2canvas(container, {
+      scale: 1, // Adjust scale for higher/lower resolution
     });
 
-    // Capture SVG elements
-    const svgs = container.querySelectorAll("svg");
-    for (const svg of Array.from(svgs)) {
-        const svgString = new XMLSerializer().serializeToString(svg);
-        const svgBlob = new Blob([svgString], { type: "image/svg+xml" });
-        const url = URL.createObjectURL(svgBlob);
-
-        try {
-            const img = await new Promise<HTMLImageElement>((resolve, reject) => {
-                const image = new Image();
-                image.onload = () => resolve(image);
-                image.onerror = reject;
-                image.src = url;
-            });
-
-            const svgRect = svg.getBoundingClientRect();
-            ctx.drawImage(
-                img,
-                svgRect.left - rect.left,
-                svgRect.top - rect.top,
-                svgRect.width,
-                svgRect.height
-            );
-        } finally {
-            URL.revokeObjectURL(url);
-        }
-    }
-
-    return canvas.toDataURL("image/png");
+    // Convert the canvas to a data URL (PNG format)
+    const dataUrl = canvas.toDataURL("image/png");
+    return dataUrl;
+  } catch (error) {
+    console.error("Error capturing visualization:", error);
+    return null;
+  }
 };

app/src/modules/visualization/handleSaveTemplate.ts

@@ -32,7 +32,6 @@ export const handleSaveTemplate = async ({
   try {
     // Check if the selected zone has any widgets
     if (!selectedZone.panelOrder || selectedZone.panelOrder.length === 0) {
-      console.warn("No widgets found in the selected zone.");
       return;
     }
 
@@ -65,8 +64,7 @@ export const handleSaveTemplate = async ({
       floatingWidget,
       widgets3D,
     };
-    
-    console.log('newTemplate: ', newTemplate);
+
     // Extract organization from email
     const email = localStorage.getItem("email") || "";
     const organization = email.includes("@")
@@ -74,7 +72,6 @@ export const handleSaveTemplate = async ({
       : "";
 
     if (!organization) {
-      console.error("Organization could not be determined from email.");
       return;
     }
     let saveTemplate = {
@@ -89,13 +86,13 @@ export const handleSaveTemplate = async ({
     try {
       addTemplate(newTemplate);
       // const response = await saveTemplateApi(organization, newTemplate);
-      // console.log("Save API Response:", response);
+      //
 
       // Add template only if API call succeeds
     } catch (apiError) {
-      // console.error("Error saving template to API:", apiError);
+      //
     }
   } catch (error) {
-    // console.error("Error in handleSaveTemplate:", error);
+    //
   }
 };