ISSUE 8: add downloadImage function

src/components/DockBuilder/DockBuilder.jsx

@@ -118,21 +118,31 @@ export const DockBuilder = () => {
   };
 
   const downloadImage = useCallback(() => {
-    // // console.log( 'Download' )
     const ext = "png";
+    // Generate base64 image of the canvas
+    const base64 = editorMemo.toDataURL({
+      format: ext,
+      enableRetinaScaling: true,
+    });
+    // Download the image
+    const anchor = document.createElement("a");
+    const timestamp = Date.now();
+    anchor.href = base64;
+    anchor.download = `paradise_dock_snapshot_${timestamp}.${ext}`;
+    anchor.click();
 
-    // TODO: download the image
+    // Extract dockData from all objects (excluding snapClone)
-    // TODO: get the json of the editor content
+    const json = editorMemo.toJSON(["dockData", "snapClone"]);
-    // TODO: extract the dockData from the json
+    const dockDataArr = (json.objects || [])
-    // TODO: filter the dockData to ensure it does not contain snapClone
+      .filter((object) => object.dockData && !object.snapClone)
-    // TODO: generate the base64 image
+      .map((object) => object.dockData);
-    // TODO: download the image and name it as paradise_dock_snapshot_<timestamp here>.${ext}
+    if (dockDataArr.length > 0) {
-    // TODO: download the excel file of the dockData you extracted
+      // Download as Excel
-
+      const worksheet = XLSX.utils.json_to_sheet(dockDataArr);
-    // TODO: check if dockData is empty
+      const workbook = XLSX.utils.book_new();
-    // TODO: generate the base64 image
+      XLSX.utils.book_append_sheet(workbook, worksheet, "Dock Data");
-
+      XLSX.writeFile(workbook, `paradise_dock_data_${timestamp}.xlsx`);
-    // TODO: trigger download of the dockData you extracted in excel format
+    }
   }, [editorMemo]);
 
   const renderBg = useCallback(() => {