feat: allows saving of scene

package-lock.json

@@ -15,6 +15,7 @@
         "@mui/material": "^5.11.10",
         "auto-bind": "^5.0.1",
         "chroma-js": "^2.4.2",
+        "file-saver": "^2.0.5",
         "gsap": "^3.11.4",
         "immer": "^10.0.2",
         "paper": "^0.12.17",
@@ -31,6 +32,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "@types/chroma-js": "^2.4.0",
+        "@types/file-saver": "^2.0.5",
         "@types/jest": "^27.5.2",
         "@types/jsdom": "^21.1.0",
         "@types/pathfinding": "^0.0.6",
@@ -2690,6 +2692,12 @@
         "@types/range-parser": "*"
       }
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz",
@@ -6865,6 +6873,11 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -16572,6 +16585,12 @@
         "@types/range-parser": "*"
       }
     },
+    "@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "@types/graceful-fs": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz",
@@ -19727,6 +19746,11 @@
         "schema-utils": "^3.0.0"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",

package.json

@@ -25,6 +25,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/chroma-js": "^2.4.0",
+    "@types/file-saver": "^2.0.5",
     "@types/jest": "^27.5.2",
     "@types/jsdom": "^21.1.0",
     "@types/pathfinding": "^0.0.6",
@@ -71,6 +72,7 @@
     "@mui/material": "^5.11.10",
     "auto-bind": "^5.0.1",
     "chroma-js": "^2.4.2",
+    "file-saver": "^2.0.5",
     "gsap": "^3.11.4",
     "immer": "^10.0.2",
     "paper": "^0.12.17",

src/components/MainMenu/MainMenu.tsx

@@ -5,9 +5,12 @@ import {
   GitHub as GitHubIcon,
   Download as DownloadIcon
 } from '@mui/icons-material';
+import FileSaver from 'file-saver';
 import { UiElement } from 'src/components/UiElement/UiElement';
 import { IconButton } from 'src/components/IconButton/IconButton';
 import { useUiStateStore } from 'src/stores/uiStateStore';
+import { useSceneStore } from 'src/stores/sceneStore';
+import { sceneToSceneInput } from 'src/utils';
 import { MenuItem } from './MenuItem';
 
 export const MainMenu = () => {
@@ -18,6 +21,14 @@ export const MainMenu = () => {
   const setIsMainMenuOpen = useUiStateStore((state) => {
     return state.actions.setIsMainMenuOpen;
   });
+  const scene = useSceneStore((state) => {
+    return {
+      icons: state.icons,
+      nodes: state.nodes,
+      connectors: state.connectors,
+      rectangles: state.rectangles
+    };
+  });
 
   const onClick = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -31,6 +42,16 @@ export const MainMenu = () => {
     window.open(REPOSITORY_URL, '_blank');
   }, []);
 
+  const onSaveAs = useCallback(async () => {
+    const parsedScene = sceneToSceneInput(scene);
+
+    const blob = new Blob([JSON.stringify(parsedScene)], {
+      type: 'application/json;charset=utf-8'
+    });
+
+    FileSaver.saveAs(blob, `isoflow-${new Date().toISOString()}.json`);
+  }, [scene]);
+
   return (
     <UiElement>
       <IconButton Icon={<MenuIcon />} name="Main menu" onClick={onClick} />
@@ -51,7 +72,9 @@ export const MainMenu = () => {
           }
         }}
       >
-        <MenuItem Icon={<DownloadIcon />}>Save to...</MenuItem>
+        <MenuItem onClick={onSaveAs} Icon={<DownloadIcon />}>
+          Save as...
+        </MenuItem>
         <Divider />
         <MenuItem onClick={gotoGithub} Icon={<GitHubIcon />}>
           GitHub

webpack/dev.config.js

@@ -7,6 +7,7 @@ module.exports = {
   mode: 'development',
   entry: './src/index.tsx',
   devtool: 'eval-cheap-source-map',
+  target: 'web',
   output: {
     filename: 'main.js',
     path: path.resolve(__dirname, 'build')

webpack/prod.config.js

@@ -4,6 +4,7 @@ const webpack = require('webpack');
 
 module.exports = {
   mode: 'production',
+  target: 'web',
   entry: {
     'index': './src/Isoflow.tsx',
     '/validation/scene': './src/validation/scene.ts',