diff --git a/src/components/DockBuilder/DockBuilder.jsx b/src/components/DockBuilder/DockBuilder.jsx index ee180c1..969f7b1 100644 --- a/src/components/DockBuilder/DockBuilder.jsx +++ b/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 - // TODO: get the json of the editor content - // TODO: extract the dockData from the json - // TODO: filter the dockData to ensure it does not contain snapClone - // TODO: generate the base64 image - // TODO: download the image and name it as paradise_dock_snapshot_.${ext} - // TODO: download the excel file of the dockData you extracted - - // TODO: check if dockData is empty - // TODO: generate the base64 image - - // TODO: trigger download of the dockData you extracted in excel format + // Extract dockData from all objects (excluding snapClone) + const json = editorMemo.toJSON(["dockData", "snapClone"]); + const dockDataArr = (json.objects || []) + .filter((object) => object.dockData && !object.snapClone) + .map((object) => object.dockData); + if (dockDataArr.length > 0) { + // Download as Excel + const worksheet = XLSX.utils.json_to_sheet(dockDataArr); + const workbook = XLSX.utils.book_new(); + XLSX.utils.book_append_sheet(workbook, worksheet, "Dock Data"); + XLSX.writeFile(workbook, `paradise_dock_data_${timestamp}.xlsx`); + } }, [editorMemo]); const renderBg = useCallback(() => {