Implement webworker for save operation + Limit the history size (#29)

- Implement webworker for save operation
- Limit the history size

Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/29

src/Components/Editor/Editor.tsx

@@ -10,6 +10,7 @@ import { onKeyDown } from './Shortcuts';
 import { OnPropertyChange, OnPropertiesSubmit } from './PropertiesOperations';
 import EditorEvents from '../../Events/EditorEvents';
 import { IEditorState } from '../../Interfaces/IEditorState';
+import { MAX_HISTORY } from '../../utils/default';
 
 interface IEditorProps {
   configuration: IConfiguration
@@ -17,7 +18,12 @@ interface IEditorProps {
   historyCurrentStep: number
 }
 
-export const getCurrentHistory = (history: IHistoryState[], historyCurrentStep: number): IHistoryState[] => history.slice(0, historyCurrentStep + 1);
+export const getCurrentHistory = (history: IHistoryState[], historyCurrentStep: number): IHistoryState[] =>
+  history.slice(
+    Math.max(0, history.length - MAX_HISTORY), // change this to 0 for unlimited (not recommanded because of overflow)
+    historyCurrentStep + 1
+  );
+
 export const getCurrentHistoryState = (history: IHistoryState[], historyCurrentStep: number): IHistoryState => history[historyCurrentStep];
 
 const Editor: React.FunctionComponent<IEditorProps> = (props) => {

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();
 }