Merge pull request #356 from FalkorDB/add-capture-image-in-canvas

Fix #347 add capture image in canvas

Author: Anchel123

app/components/code-graph.tsx

@@ -3,7 +3,7 @@ import { GraphData, Link, Node } from "./model";
 import { GraphContext } from "./provider";
 import { Toolbar } from "./toolbar";
 import { Labels } from "./labels";
-import { GitFork, Search, X } from "lucide-react";
+import { Download, GitFork, Search, X } from "lucide-react";
 import ElementMenu from "./elementMenu";
 import Combobox from "./combobox";
 import { toast } from '@/components/ui/use-toast';
@@ -217,12 +217,12 @@ export function CodeGraph({
 
     const handleSearchSubmit = (node: any) => {
         const chart = chartRef.current
-        
+
         if (chart) {
             const n = { name: node.properties.name, id: node.id }
 
             let chartNode = graph.Elements.nodes.find(n => n.id == node.id)
-            
+
             if (!chartNode?.visible) {
                 if (!chartNode) {
                     chartNode = graph.extend({ nodes: [node], edges: [] }).nodes[0]
@@ -234,7 +234,7 @@ export function CodeGraph({
                 graph.visibleLinks(true, [chartNode!.id])
                 setData({ ...graph.Elements })
             }
-            
+
             setSearchNode(n)
             setTimeout(() => {
                 chart.zoomToFit(1000, 150, (n: NodeObject<Node>) => n.id === chartNode!.id);
@@ -253,6 +253,33 @@ export function CodeGraph({
         setData({ ...graph.Elements })
     }
 
+    const handleDownloadImage = async () => {
+        try {
+            const canvas = document.querySelector('.force-graph-container canvas') as HTMLCanvasElement;
+            if (!canvas) {
+                toast({
+                    title: "Error",
+                    description: "Canvas not found",
+                    variant: "destructive",
+                });
+                return;
+            }
+
+            const dataURL = canvas.toDataURL('image/webp');
+            const link = document.createElement('a');
+            link.href = dataURL;
+            link.download = `${graphName}.webp`;
+            link.click();
+        } catch (error) {
+            console.error('Error downloading graph image:', error);
+            toast({
+                title: "Error",
+                description: "Failed to download image. Please try again.",
+                variant: "destructive",
+            });
+        }
+    };
+
     return (
         <div className="h-full w-full flex flex-col gap-4 p-8 bg-gray-100">
             <header className="flex flex-col gap-4">
@@ -346,6 +373,12 @@ export function CodeGraph({
                                             className="pointer-events-auto"
                                             chartRef={chartRef}
                                         />
+                                        <button
+                                            className="pointer-events-auto bg-white p-2 rounded-md"
+                                            onClick={handleDownloadImage}
+                                        >
+                                            <Download />
+                                        </button>
                                     </div>
                                 </div>
                                 <ElementMenu

package-lock.json

@@ -20,8 +20,10 @@
     "@radix-ui/react-tooltip": "^1.1.4",
     "@types/react-gtm-module": "^2.0.4",
     "autoprefixer": "^10.4.20",
+    "canvas2svg": "^1.0.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.0",
+    "html2canvas": "^1.4.1",
     "lucide-react": "^0.441.0",
     "next": "^15.1.2",
     "playwright": "^1.49.1",