merge commit

app/src/modules/visualization/captureVisualization.ts

@@ -0,0 +1,55 @@
+export const captureVisualization = async (): Promise<string | 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);
+    });
+
+    // 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");
+};

app/src/modules/visualization/handleSaveTemplate.ts

@@ -0,0 +1,74 @@
+import { Template } from "../../store/useTemplateStore";
+import { captureVisualization } from "./captureVisualization";
+
+type HandleSaveTemplateProps = {
+  addTemplate: (template: Template) => void;
+  selectedZone: {
+    panelOrder: string[]; // Adjust the type based on actual data structure
+    widgets: any[]; // Replace `any` with the actual widget type
+  };
+  templates?: Template[];
+};
+
+// Generate a unique ID (placeholder function)
+const generateUniqueId = (): string => {
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 15)}`;
+};
+
+// Refactored function
+export const handleSaveTemplate = async ({
+  addTemplate,
+  selectedZone,
+  templates = [],
+}: HandleSaveTemplateProps): Promise<void> => {
+  try {
+    // Check if the selected zone has any widgets
+    if (!selectedZone.widgets || selectedZone.widgets.length === 0) {
+      console.warn("Cannot save an empty template.");
+      return;
+    }
+
+    // Check if the template already exists
+    const isDuplicate = templates.some((template) => {
+      const isSamePanelOrder =
+        JSON.stringify(template.panelOrder) ===
+        JSON.stringify(selectedZone.panelOrder);
+      const isSameWidgets =
+        JSON.stringify(template.widgets) ===
+        JSON.stringify(selectedZone.widgets);
+      return isSamePanelOrder && isSameWidgets;
+    });
+
+    if (isDuplicate) {
+      console.warn("This template already exists.");
+      return;
+    }
+
+    // Capture visualization snapshot
+    const snapshot = await captureVisualization();
+    if (!snapshot) {
+      console.error("Failed to capture visualization snapshot.");
+      return;
+    }
+
+    // Create a new template
+    const newTemplate: Template = {
+      id: generateUniqueId(),
+      name: `Template ${Date.now()}`,
+      panelOrder: selectedZone.panelOrder,
+      widgets: selectedZone.widgets,
+      snapshot,
+    };
+
+    console.log("Saving template:", newTemplate);
+
+    // Save the template
+    try {
+      addTemplate(newTemplate);
+    } catch (error) {
+      console.error("Failed to add template:", error);
+    }
+  } catch (error) {
+    console.error("Failed to save template:", error);
+  }
+};