Move MainMenu Loading to App + Change is/setLoaded to appState/setAppState

public/smartcomponent/svg-layout-designer.ts

@@ -161,14 +161,14 @@
         /**
          * Hide the main menu to go to the application.
          * SetEditor must be called first or the application will crash.
-         * @param isLoaded
+         * @param appState
          * @param callback
          */
-        public SetLoaded(isLoaded: boolean, callback?: (state: IEditorState) => void) {
+        public SetAppState(appState: SVGLD.AppState, callback?: (state: IEditorState) => void) {
-            const eventType = 'setLoaded';
+            const eventType = 'setAppState';
             this.app.AddEventListener(eventType, callback);
             const component = this.GetAppComponent();
-            component.dispatchEvent(new CustomEvent(eventType, { detail: isLoaded }))
+            component.dispatchEvent(new CustomEvent(eventType, { detail: appState }))
         }
 
         /**

src/Components/App/Actions/Load.ts

@@ -1,13 +1,14 @@
 import { Dispatch, SetStateAction } from 'react';
+import { AppState } from '../../../Enums/AppState';
 import { IEditorState } from '../../../Interfaces/IEditorState';
 import { Revive } from '../../../utils/saveload';
 
 export function LoadState(
   editorState: IEditorState,
   setEditorState: Dispatch<SetStateAction<IEditorState>>,
-  setLoaded: Dispatch<SetStateAction<boolean>>
+  setAppState: Dispatch<SetStateAction<AppState>>
 ): void {
   Revive(editorState);
   setEditorState(editorState);
-  setLoaded(true);
+  setAppState(AppState.Loaded);
 }

src/Components/App/Actions/MenuActions.ts

@@ -1,9 +1,10 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
+import { Dispatch, SetStateAction } from 'react';
 import { IConfiguration } from '../../../Interfaces/IConfiguration';
 import { FetchConfiguration } from '../../API/api';
 import { IEditorState } from '../../../Interfaces/IEditorState';
 import { LoadState } from './Load';
 import { DISABLE_API, GetDefaultEditorState } from '../../../utils/default';
+import { AppState } from '../../../Enums/AppState';
 
 export function NewEditor(
   editorState: IEditorState,
@@ -36,7 +37,7 @@ export function NewEditor(
 export function LoadEditor(
   files: FileList | null,
   setEditorState: Dispatch<SetStateAction<IEditorState>>,
-  setLoaded: Dispatch<SetStateAction<boolean>>
+  setAppState: Dispatch<SetStateAction<AppState>>
 ): void {
   if (files === null) {
     return;
@@ -47,7 +48,7 @@ export function LoadEditor(
     const result = reader.result as string;
     const editorState: IEditorState = JSON.parse(result);
 
-    LoadState(editorState, setEditorState, setLoaded);
+    LoadState(editorState, setEditorState, setAppState);
   });
   reader.readAsText(file);
 }

src/Components/App/App.tsx

@@ -7,6 +7,8 @@ import { IEditorState } from '../../Interfaces/IEditorState';
 import { LoadState } from './Actions/Load';
 import { LoadEditor, NewEditor } from './Actions/MenuActions';
 import { DEFAULT_CONFIG, DEFAULT_MAINCONTAINER_PROPS } from '../../utils/default';
+import { AppState } from '../../Enums/AppState';
+import { Loader } from '../Loader/Loader';
 
 // App will never have props
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -15,9 +17,9 @@ interface IAppProps {
 }
 
 function UseHTTPGETStatePreloading(
-  isLoaded: boolean,
+  appState: AppState,
   setEditorState: Dispatch<SetStateAction<IEditorState>>,
-  setLoaded: Dispatch<SetStateAction<boolean>>
+  setAppState: Dispatch<SetStateAction<AppState>>
 ): void {
   useEffect(() => {
     const queryString = window.location.search;
@@ -28,21 +30,21 @@ function UseHTTPGETStatePreloading(
       return;
     }
 
-    if (!isLoaded) {
+    if (appState !== AppState.Loaded) {
       fetch(state)
         .then(
           async(response) => await response.json(),
           (error) => { throw new Error(error); }
         )
         .then((data: IEditorState) => {
-          LoadState(data, setEditorState, setLoaded);
+          LoadState(data, setEditorState, setAppState);
         }, (error) => { throw new Error(error); });
     }
   });
 };
 
 export function App(props: IAppProps): JSX.Element {
-  const [isLoaded, setLoaded] = useState<boolean>(false);
+  const [appState, setAppState] = useState<AppState>(AppState.MainMenu);
   const appRef = useRef<HTMLDivElement>(null);
 
   const defaultMainContainer = new ContainerModel(
@@ -69,48 +71,59 @@ export function App(props: IAppProps): JSX.Element {
     props.root,
     appRef,
     setEditorState,
-    setLoaded
+    setAppState
   );
 
-  UseHTTPGETStatePreloading(isLoaded, setEditorState, setLoaded);
+  UseHTTPGETStatePreloading(appState, setEditorState, setAppState);
 
-  const enableLoaded = useCallback(() => {
+  switch (appState) {
-    setLoaded(true);
+    case AppState.Loaded:
-  }, []);
+      return (
-
+        <div
-  if (isLoaded) {
+          ref={appRef}
-    return (
+          className='App'
-      <div
+        >
-        ref={appRef}
+          <Editor
-        className='App'
+            root={props.root}
-      >
+            configuration={editorState.configuration}
-        <Editor
+            history={editorState.history}
-          root={props.root}
+            historyCurrentStep={editorState.historyCurrentStep}
-          configuration={editorState.configuration}
+          />
-          history={editorState.history}
+        </div>
-          historyCurrentStep={editorState.historyCurrentStep}
+      );
-        />
+    case AppState.Loading:
-      </div>
+      return (
-    );
+        <div
+          ref={appRef}
+          className='App mainmenu-bg'
+        >
+          <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
+            <Loader />
+          </div>
+        </div>
+      );
+    default:
+      return (
+        <div
+          ref={appRef}
+          className='App mainmenu-bg'
+        >
+          <MainMenu
+            newEditor={() => {
+              setAppState(AppState.Loading);
+              NewEditor(
+                editorState,
+                (newEditor) => setEditorState(newEditor),
+                () => setAppState(AppState.Loaded)
+              );
+            }}
+            loadEditor={(files: FileList | null) => LoadEditor(
+              files,
+              setEditorState,
+              setAppState
+            )}
+          />
+        </div>
+      );
   }
-
-  return (
-    <div
-      ref={appRef}
-      className='App mainmenu-bg'
-    >
-      <MainMenu
-        newEditor={() => NewEditor(
-          editorState,
-          (newEditor) => setEditorState(newEditor),
-          enableLoaded
-        )}
-        loadEditor={(files: FileList | null) => LoadEditor(
-          files,
-          setEditorState,
-          setLoaded
-        )}
-      />
-    </div>
-  );
 };

src/Components/MainMenu/MainMenu.tsx

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { FAST_BOOT } from '../../utils/default';
-import { Loader } from '../Loader/Loader';
 
 interface IMainMenuProps {
   newEditor: () => void
@@ -10,21 +8,11 @@ interface IMainMenuProps {
 enum WindowState {
   Main,
   Load,
-  Loading,
 }
 
 export function MainMenu(props: IMainMenuProps): JSX.Element {
   const [windowState, setWindowState] = React.useState(WindowState.Main);
 
-  if (FAST_BOOT) {
-    props.newEditor();
-    return (
-      <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
-        <Loader />
-      </div>
-    );
-  }
-
   switch (windowState) {
     case WindowState.Load:
       return (
@@ -65,12 +53,6 @@ export function MainMenu(props: IMainMenuProps): JSX.Element {
         </div>
 
       );
-    case WindowState.Loading:
-      return (
-        <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
-          <Loader />
-        </div>
-      );
     default:
       return (
         <div className='absolute bg-blue-50 p-12
@@ -80,7 +62,6 @@ export function MainMenu(props: IMainMenuProps): JSX.Element {
           w-full sm:w-auto
           sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2'>
           <button type="button" className='mainmenu-btn' onClick={() => {
-            setWindowState(WindowState.Loading);
             props.newEditor();
           }}>Start from scratch</button>
           <button type="button" className='mainmenu-btn' onClick={() => setWindowState(WindowState.Load)}>Load a configuration file</button>

src/Enums/AppState.ts

@@ -0,0 +1,5 @@
+export enum AppState {
+  MainMenu,
+  Loading,
+  Loaded
+}

src/Events/AppEvents.ts

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { AppState } from '../Enums/AppState';
 import { IConfiguration } from '../Interfaces/IConfiguration';
 import { IEditorState } from '../Interfaces/IEditorState';
 import { IHistoryState } from '../Interfaces/IHistoryState';
@@ -10,14 +11,14 @@ export interface IAppEvent {
   func: (
     root: Element | Document,
     setEditor: (newState: IEditorState) => void,
-    setLoaded: (loaded: boolean) => void,
+    setAppState: (appState: AppState) => void,
     eventInitDict?: CustomEventInit
   ) => void
 }
 
 export const events: IAppEvent[] = [
   { name: 'setEditor', func: SetEditor },
-  { name: 'setLoaded', func: SetLoaded },
+  { name: 'setAppState', func: SetAppState },
   { name: 'reviveEditorState', func: ReviveEditorState },
   { name: 'reviveHistory', func: ReviveHistory },
   { name: 'getDefaultEditorState', func: GetDefaultEditorState }
@@ -27,7 +28,7 @@ export function UseCustomEvents(
   root: Element | Document,
   appRef: React.RefObject<HTMLDivElement>,
   setEditor: (newState: IEditorState) => void,
-  setLoaded: (loaded: boolean) => void
+  setAppState: (appState: AppState) => void
 ): void {
   useEffect(() => {
     const funcs = new Map<string, () => void>();
@@ -36,7 +37,7 @@ export function UseCustomEvents(
         return event.func(
           root,
           setEditor,
-          setLoaded,
+          setAppState,
           eventInitDict
         );
       }
@@ -58,29 +59,30 @@ export function UseCustomEvents(
 function SetEditor(
   root: Element | Document,
   setEditor: (newState: IEditorState) => void,
-  setLoaded: (loaded: boolean) => void,
+  setAppState: (appState: AppState) => void,
   eventInitDict?: CustomEventInit
 ): void {
   const editor: IEditorState = eventInitDict?.detail;
   setEditor(editor);
+  setAppState(AppState.Loading);
   const customEvent = new CustomEvent<IEditorState>('setEditor', { detail: editor });
   root.dispatchEvent(customEvent);
 }
 
-function SetLoaded(
+function SetAppState(
   root: Element | Document,
   setEditor: (newState: IEditorState) => void,
-  setLoaded: (loaded: boolean) => void,
+  setAppState: (appState: AppState) => void,
   eventInitDict?: CustomEventInit
 ): void {
-  const isLoaded: boolean = eventInitDict?.detail;
+  const appState: AppState = eventInitDict?.detail;
-  setLoaded(isLoaded);
+  setAppState(appState);
 }
 
 function ReviveEditorState(
   root: Element | Document,
   setEditor: (newState: IEditorState) => void,
-  setLoaded: (loaded: boolean) => void,
+  setAppState: (appState: AppState) => void,
   eventInitDict?: CustomEventInit): void {
   const anEditorState: IEditorState = eventInitDict?.detail;
   Revive(anEditorState);
@@ -91,7 +93,7 @@ function ReviveEditorState(
 function ReviveHistory(
   root: Element | Document,
   setEditor: (newState: IEditorState) => void,
-  setLoaded: (loaded: boolean) => void,
+  setAppState: (appState: AppState) => void,
   eventInitDict?: CustomEventInit): void {
   const history: IHistoryState[] = eventInitDict?.detail;
   ReviveHistoryAction(history);
@@ -102,7 +104,7 @@ function ReviveHistory(
 function GetDefaultEditorState(
   root: Element | Document,
   setEditor: (newState: IEditorState) => void,
-  setLoaded: (loaded: boolean) => void,
+  setAppState: (appState: AppState) => void,
   eventInitDict?: CustomEventInit): void {
   const configuration: IConfiguration = eventInitDict?.detail;
   const editorState = GetDefaultEditorStateAction(configuration);

src/utils/default.ts

@@ -11,8 +11,8 @@ import { Position } from '../Enums/Position';
 
 /// EDITOR DEFAULTS ///
 
-/** Enable fast boot and disable main menu (default = false) */
+/** Enable fast boot and disable main menu (0 = disabled, 1 = loading, 2 = loaded) */
-export const FAST_BOOT = true;
+export const FAST_BOOT = 0;
 
 /** Disable any call to the API (default = false) */
 export const DISABLE_API = false;
@@ -22,7 +22,7 @@ export const DISABLE_API = false;
  * Better compatibility with Gecko and WebKit engines like Firefox and Safari.
  * EXPERIMENTAL: svg export wont work and it won't be possible to insert a custom svg)
  */
-export const USE_EXPERIMENTAL_CANVAS_API = false;
+export const USE_EXPERIMENTAL_CANVAS_API = true;
 
 /** Enable keyboard shortcuts (default = true) */
 export const ENABLE_SHORTCUTS = true;