Add Web Worker for the save to json function

src/Components/Editor/Save.ts

@@ -3,27 +3,38 @@ import { IConfiguration } from '../../Interfaces/IConfiguration';
 import { getCircularReplacer } from '../../utils/saveload';
 import { ID } from '../SVG/SVG';
 import { IEditorState } from '../../Interfaces/IEditorState';
+import Worker from '../../workers/worker?worker';
 
 export function SaveEditorAsJSON(
   history: IHistoryState[],
   historyCurrentStep: number,
   configuration: IConfiguration
 ): void {
-  const exportName = 'state';
+  const exportName = 'state.json';
   const spaces = import.meta.env.DEV ? 4 : 0;
   const editorState: IEditorState = {
     history,
     historyCurrentStep,
     configuration
   };
+
+  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+  if (window.Worker) {
+    // use webworker for the stringify to avoid freezing
+    const myWorker = new Worker();
+    myWorker.postMessage({ editorState, spaces });
+    myWorker.onmessage = (event) => {
+      const data = event.data;
+      const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(data)}`;
+      createDownloadNode(exportName, dataStr);
+      myWorker.terminate();
+    };
+    return;
+  }
+
   const data = JSON.stringify(editorState, getCircularReplacer(), spaces);
   const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(data)}`;
-  const downloadAnchorNode = document.createElement('a');
-  downloadAnchorNode.setAttribute('href', dataStr);
-  downloadAnchorNode.setAttribute('download', `${exportName}.json`);
-  document.body.appendChild(downloadAnchorNode); // required for firefox
-  downloadAnchorNode.click();
-  downloadAnchorNode.remove();
+  createDownloadNode(exportName, dataStr);
 }
 
 export function SaveEditorAsSVG(): void {
@@ -32,10 +43,14 @@ export function SaveEditorAsSVG(): void {
   const preface = '<?xml version="1.0" standalone="no"?>\r\n';
   const svgBlob = new Blob([preface, svg.outerHTML], { type: 'image/svg+xml;charset=utf-8' });
   const svgUrl = URL.createObjectURL(svgBlob);
-  const downloadLink = document.createElement('a');
-  downloadLink.href = svgUrl;
-  downloadLink.download = 'newesttree.svg';
-  document.body.appendChild(downloadLink);
-  downloadLink.click();
-  document.body.removeChild(downloadLink);
+  createDownloadNode('state.svg', svgUrl);
+}
+
+function createDownloadNode(filename: string, datastring: string) {
+  const downloadAnchorNode = document.createElement('a');
+  downloadAnchorNode.href = datastring;
+  downloadAnchorNode.download = filename;
+  document.body.appendChild(downloadAnchorNode); // required for firefox
+  downloadAnchorNode.click();
+  downloadAnchorNode.remove();
 }

src/workers/worker.js

@@ -0,0 +1,25 @@
+onmessage = (e) => {
+  const data = JSON.stringify(e.data.editorState, getCircularReplacer(), e.data.spaces);
+  postMessage(data);
+};
+
+const getCircularReplacer = () => {
+  const seen = new WeakSet();
+  return (key, value) => {
+    if (key === 'parent') {
+      return;
+    }
+
+    if (key === 'SelectedContainer') {
+      return;
+    }
+
+    if (typeof value === 'object' && value !== null) {
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+};

tsconfig.json

@@ -16,7 +16,7 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"],
+  "include": ["src", "src/workers"],
   "exclude": ["test-server"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }