Updated Image Viewer Node with High Performance Canvas and Zoomable Preview Window

Data/Server/WebUI/src/nodes/Image Processing/Node_Image_Viewer.jsx

@@ -1,110 +1,125 @@
 ////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/nodes/Image Processing/Node_Image_Viewer.jsx
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { Handle, Position, useReactFlow } from "reactflow";
 
 if (!window.BorealisValueBus) window.BorealisValueBus = {};
 if (!window.BorealisUpdateRate) window.BorealisUpdateRate = 100;
 
-const ImageViewerNode = ({ id, data }) => {
+const ImageViewerNode = ({ id }) => {
     const { getEdges } = useReactFlow();
     const [imageBase64, setImageBase64] = useState("");
-    const [selectedType, setSelectedType] = useState("base64");
+    const canvasRef = useRef(null);
+    const overlayDivRef = useRef(null);
+    const [isZoomed, setIsZoomed] = useState(false);
 
-    // Monitor upstream input and propagate to ValueBus
+    // Poll upstream for base64 image and propagate
     useEffect(() => {
         const interval = setInterval(() => {
             const edges = getEdges();
-            const inputEdge = edges.find(e => e.target === id);
+            const inp = edges.find(e => e.target === id);
-            if (inputEdge) {
+            if (inp) {
-                const sourceId = inputEdge.source;
+                const val = window.BorealisValueBus[inp.source] || "";
-                const valueBus = window.BorealisValueBus || {};
+                setImageBase64(val);
-                const value = valueBus[sourceId];
+                window.BorealisValueBus[id] = val;
-                if (typeof value === "string") {
-                    setImageBase64(value);
-                    window.BorealisValueBus[id] = value;
-                }
             } else {
                 setImageBase64("");
                 window.BorealisValueBus[id] = "";
             }
-        }, window.BorealisUpdateRate || 100);
+        }, window.BorealisUpdateRate);
-
         return () => clearInterval(interval);
-    }, [id, getEdges]);
+    }, [getEdges, id]);
 
-    const handleDownload = async () => {
+    // Draw the image into canvas for high performance
-        if (!imageBase64) return;
+    useEffect(() => {
-        const blob = await (await fetch(`data:image/png;base64,${imageBase64}`)).blob();
+        const canvas = canvasRef.current;
-
+        if (!canvas) return;
-        if (window.showSaveFilePicker) {
+        const ctx = canvas.getContext("2d");
-            try {
+        if (imageBase64) {
-                const fileHandle = await window.showSaveFilePicker({
+            const img = new Image();
-                    suggestedName: "image.png",
+            img.onload = () => {
-                    types: [{
+                canvas.width = img.width;
-                        description: "PNG Image",
+                canvas.height = img.height;
-                        accept: { "image/png": [".png"] }
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                    }]
+                ctx.drawImage(img, 0, 0);
-                });
+            };
-                const writable = await fileHandle.createWritable();
+            img.src = "data:image/png;base64," + imageBase64;
-                await writable.write(blob);
-                await writable.close();
-            } catch (e) {
-                console.warn("Save cancelled:", e);
-            }
         } else {
-            const a = document.createElement("a");
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            a.href = URL.createObjectURL(blob);
-            a.download = "image.png";
-            a.style.display = "none";
-            document.body.appendChild(a);
-            a.click();
-            URL.revokeObjectURL(a.href);
-            document.body.removeChild(a);
         }
+    }, [imageBase64]);
+
+    // Manage zoom overlay on image click
+    useEffect(() => {
+        if (!isZoomed || !imageBase64) return;
+        const div = document.createElement("div");
+        overlayDivRef.current = div;
+        Object.assign(div.style, {
+            position: "fixed",
+            top: "0",
+            left: "0",
+            width: "100%",
+            height: "100%",
+            backgroundColor: "rgba(0,0,0,0.8)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: "1000",
+            cursor: "zoom-out",
+            transition: "opacity 0.3s ease"
+        });
+        const handleOverlayClick = () => setIsZoomed(false);
+        div.addEventListener("click", handleOverlayClick);
+
+        const ovCanvas = document.createElement("canvas");
+        const ctx = ovCanvas.getContext("2d");
+        const img = new Image();
+        img.onload = () => {
+            let w = img.width;
+            let h = img.height;
+            const maxW = window.innerWidth * 0.8;
+            const maxH = window.innerHeight * 0.8;
+            const scale = Math.min(1, maxW / w, maxH / h);
+            ovCanvas.width = w;
+            ovCanvas.height = h;
+            ctx.clearRect(0, 0, w, h);
+            ctx.drawImage(img, 0, 0);
+            ovCanvas.style.width = `${w * scale}px`;
+            ovCanvas.style.height = `${h * scale}px`;
+            ovCanvas.style.transition = "transform 0.3s ease";
+        };
+        img.src = "data:image/png;base64," + imageBase64;
+        div.appendChild(ovCanvas);
+        document.body.appendChild(div);
+
+        // Cleanup when unzooming
+        return () => {
+            div.removeEventListener("click", handleOverlayClick);
+            if (overlayDivRef.current) {
+                document.body.removeChild(overlayDivRef.current);
+                overlayDivRef.current = null;
+            }
+        };
+    }, [isZoomed, imageBase64]);
+
+    const handleClick = () => {
+        if (imageBase64) setIsZoomed(z => !z);
     };
 
     return (
         <div className="borealis-node">
             <Handle type="target" position={Position.Left} className="borealis-handle" />
             <div className="borealis-node-header">Image Viewer</div>
-            <div className="borealis-node-content">
+            <div
-                <label style={{ fontSize: "10px" }}>Data Type:</label>
+                className="borealis-node-content"
-                <select
+                style={{ cursor: imageBase64 ? "zoom-in" : "default" }}
-                    value={selectedType}
-                    onChange={(e) => setSelectedType(e.target.value)}
-                    style={{ width: "100%", fontSize: "9px", marginBottom: "6px" }}
             >
-                    <option value="base64">Base64 Encoded Image</option>
-                </select>
-
                 {imageBase64 ? (
-                    <>
+                    <canvas
-                        <img
+                        ref={canvasRef}
-                            src={`data:image/png;base64,${imageBase64}`}
+                        onClick={handleClick}
-                            alt="Live"
+                        style={{ width: "100%", border: "1px solid #333", marginTop: "6px", marginBottom: "6px" }}
-                            style={{
-                                width: "100%",
-                                border: "1px solid #333",
-                                marginTop: "6px",
-                                marginBottom: "6px"
-                            }}
                     />
-                        <button
-                            onClick={handleDownload}
-                            style={{
-                                width: "100%",
-                                fontSize: "9px",
-                                padding: "4px",
-                                background: "#1e1e1e",
-                                color: "#ccc",
-                                border: "1px solid #444",
-                                borderRadius: "2px"
-                            }}
-                        >
-                            Export to PNG
-                        </button>
-                    </>
                 ) : (
                     <div style={{ fontSize: "9px", color: "#888", marginTop: "6px" }}>
                         Waiting for image...
@@ -120,13 +135,12 @@ export default {
     type: "Image_Viewer",
     label: "Image Viewer",
     description: `
-Displays base64 image and exports it
+Displays base64 image via canvas for high performance
 
 - Accepts upstream base64 image
-- Shows preview
+- Renders with canvas for speed
-- Provides "Export to PNG" button
+- Click to zoom/unzoom overlay with smooth transition
-- Outputs the same base64 to downstream
 `.trim(),
-    content: "Visual preview of base64 image with optional PNG export.",
+    content: "Visual preview of base64 image with zoom overlay.",
     component: ImageViewerNode
 };