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 }))
         }
 
         /**

public/svgld.d.ts

@@ -1,67 +1,106 @@
 declare namespace SVGLD {
-/**
+export interface IMargin {
- * Add method when creating a container
+    left?: number;
- * - Append will append to the last children in list
+    bottom?: number;
- * - Insert will always place it at the begining
+    top?: number;
- * - Replace will remove the selected container and insert a new one
+    right?: number;
- * (default: Append)
- */
-export enum AddMethod {
-    Append = 0,
-    Insert = 1,
-    Replace = 2,
-    ReplaceParent = 3
 }
 
-export enum MessageType {
+export interface IPoint {
-    Normal = 0,
+    x: number;
-    Success = 1,
+    y: number;
-    Warning = 2,
-    Error = 3
 }
 
-export enum Orientation {
-    Horizontal = 0,
-    Vertical = 1
-}
 
-export enum Position {
-    Left = 0,
-    Down = 1,
-    Up = 2,
-    Right = 3
-}
-
-export enum PositionReference {
-    TopLeft = 0,
-    TopCenter = 1,
-    TopRight = 2,
-    CenterLeft = 3,
-    CenterCenter = 4,
-    CenterRight = 5,
-    BottomLeft = 6,
-    BottomCenter = 7,
-    BottomRight = 8
-}
 
 /**
- * Describe the type of the property.
+ * Model of available symbol to configure the application */
- * Used for the assignation in the OnPropertyChange function
+export interface IAvailableSymbol {
- * See ContainerOperations.ts's OnPropertyChange
+    Name: string;
- */
+    Image: IImage;
-export enum PropertyType {
+    Width?: number;
+    Height?: number;
+    PositionReference?: PositionReference;
+}
+
+export interface IAPIConfiguration {
+    apiFetchUrl?: string;
+    apiSetContainerListUrl?: string;
+    apiGetFeedbackUrl?: string;
+}
+
+
+export interface ISymbolModel {
+    /** Identifier */
+    id: string;
+    /** Type */
+    type: string;
+    /** Configuration of the symbol */
+    config: IAvailableSymbol;
+    /** Horizontal offset */
+    x: number;
+    /** Width */
+    width: number;
+    /** Height */
+    height: number;
+    /** List of linked container id */
+    linkedContainers: Set<string>;
+}
+
+
+export interface IPattern {
     /**
-     * Simple property: is not inside any object: id, x, width... (default)
+     * Unique id for the pattern
      */
-    Simple = 0,
+    id: string;
     /**
-     * Style property: is inside the style object: stroke, fillOpacity...
+     * Text to display in the sidebar
      */
-    Style = 1,
+    text: string;
     /**
-     * Margin property: is inside the margin property: left, bottom, top, right...
+     * IAvailableContainer id used to wrap the children.
      */
-    Margin = 2
+    wrapper: string;
+    /**
+     * List of ids of Pattern or IAvailableContainer
+     * If a IAvailableContainer and a Pattern have the same id,
+     * IAvailableContainer will be prioritized
+     */
+    children: string[];
+}
+export type ContainerOrPattern = IAvailableContainer | IPattern;
+export function GetPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): ContainerOrPattern | undefined;
+export function IsPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): boolean;
+
+
+
+export interface IHistoryState {
+    /** Last editor action */
+    lastAction: string;
+    /** Reference to the main container */
+    mainContainer: string;
+    containers: Map<string, IContainerModel>;
+    /** Id of the selected container */
+    selectedContainerId: string;
+    /** Counter of type of container. Used for ids. */
+    typeCounters: Record<string, number>;
+    /** List of symbols */
+    symbols: Map<string, ISymbolModel>;
+    /** Selected symbols id */
+    selectedSymbolId: string;
+}
+
+
+export interface IGetFeedbackRequest {
+    /** Current application state */
+    ApplicationState: IHistoryState;
+}
+
+
+export interface IInputGroup {
+    key: string;
+    text: React.ReactNode;
+    value: string;
 }
 
 
@@ -75,10 +114,174 @@ export interface IAction {
     AddingBehavior: AddMethod;
 }
 
-export interface IAPIConfiguration {
+
-    apiFetchUrl?: string;
+
-    apiSetContainerListUrl?: string;
+export interface ISetContainerListResponse {
-    apiGetFeedbackUrl?: string;
+    Containers: IAvailableContainer[];
+    AddingBehavior?: AddMethod;
+}
+
+
+export interface IContainerModel {
+    children: string[];
+    properties: IContainerProperties;
+    userData: Record<string, string | number>;
+}
+/**
+ * Macro for creating the interface
+ * Do not add methods since they will be lost during serialization
+ */
+export class ContainerModel implements IContainerModel {
+    children: string[];
+    properties: IContainerProperties;
+    userData: Record<string, string | number>;
+    constructor(properties: IContainerProperties, children?: string[], userData?: {});
+}
+
+/**
+ * A SizePointer is a pointer in a 1 dimensional array of width/space
+ * x being the address where the pointer is pointing
+ * width being the overall (un)allocated space affected to the address
+ */
+export interface ISizePointer {
+    x: number;
+    width: number;
+}
+
+
+export interface IGetFeedbackResponse {
+    messages: IMessage[];
+}
+
+
+
+
+
+
+/** Model of configuration for the application to configure it */
+export interface IConfiguration {
+    AvailableContainers: IAvailableContainer[];
+    AvailableSymbols: IAvailableSymbol[];
+    Categories: ICategory[];
+    Patterns: IPattern[];
+    MainContainer: IAvailableContainer;
+    APIConfiguration?: IAPIConfiguration;
+}
+
+
+
+
+export interface ISetContainerListRequest {
+    /** Name of the action declared in the API */
+    Action: IAction;
+    /** Selected container */
+    Container: IContainerModel;
+    /** The previous sibling container */
+    PreviousContainer: IContainerModel | undefined;
+    /** The next sibling container */
+    NextContainer: IContainerModel | undefined;
+    /** Current application state */
+    ApplicationState: IHistoryState;
+}
+
+
+
+
+
+
+/**
+ * Properties of a container
+ */
+export interface IContainerProperties {
+    /** id of the container */
+    id: string;
+    /** type matching the configuration on construction */
+    type: string;
+    /** id of the parent container (null when there is no parent) */
+    parentId: string;
+    /** id of the linked symbol ('' when there is no parent) */
+    linkedSymbolId: string;
+    /** Text displayed in the container */
+    displayedText: string;
+    /** orientation */
+    orientation: Orientation;
+    /** horizontal offset */
+    x: number;
+    /** vertical offset */
+    y: number;
+    /** margin */
+    margin: IMargin;
+    /** width */
+    width: number;
+    /** height */
+    height: number;
+    /**
+     * Minimum width (min=1)
+     */
+    minWidth: number;
+    /**
+     * Maximum width
+     */
+    maxWidth: number;
+    /**
+     * Minimum height (min=1)
+     */
+    minHeight: number;
+    /**
+     * Maximum height
+     */
+    maxHeight: number;
+    /** true if anchor, false otherwise */
+    isAnchor: boolean;
+    /** true if flex, false otherwise */
+    isFlex: boolean;
+    /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
+    positionReference: PositionReference;
+    /** Hide the children in the treeview */
+    hideChildrenInTreeview: boolean;
+    /** if true, show the dimension of the container */
+    showSelfDimensions: Position[];
+    /** if true show the overall dimensions of its children */
+    showChildrenDimensions: Position[];
+    /**
+     * if true, allows a parent dimension borrower to borrow its x coordinate
+     * as a reference point for a dimension
+     */
+    markPosition: Orientation[];
+    /**
+     * if true, show a dimension from the edge of the container to end
+     * and insert dimensions marks at lift up children (see liftDimensionToBorrower)
+     */
+    showDimensionWithMarks: Position[];
+    /**
+     * Warnings of a container
+     */
+    warning: string;
+    /**
+     * (optional)
+     * Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows
+     * to draw some patterns that can be bind to the properties of the container
+     * Use {prop} to bind a property. Use {{ styleProp }} to use an object.
+     * Example :
+     * ```
+     * `<rect width="{width}" height="{height}" style="{style}"></rect>
+     * <rect  width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
+     * <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
+     * <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
+     * `
+     * ```
+     */
+    customSVG?: string;
+    /**
+     * (optional)
+     * Style of the <rect>
+     */
+    style?: React.CSSProperties;
+    /**
+     * (optional)
+     * User data that can be used for data storage or custom SVG
+     */
+    userData?: object;
 }
 
 
@@ -216,154 +419,9 @@ export interface IAvailableContainer {
 }
 
 
-
+export interface IMessage {
-/**
+    text: string;
- * Model of available symbol to configure the application */
+    type: MessageType;
-export interface IAvailableSymbol {
-    Name: string;
-    Image: IImage;
-    Width?: number;
-    Height?: number;
-    PositionReference?: PositionReference;
-}
-
-export interface ICategory {
-    Type: string;
-    DisplayedText?: string;
-}
-
-
-
-
-
-
-/** Model of configuration for the application to configure it */
-export interface IConfiguration {
-    AvailableContainers: IAvailableContainer[];
-    AvailableSymbols: IAvailableSymbol[];
-    Categories: ICategory[];
-    Patterns: IPattern[];
-    MainContainer: IAvailableContainer;
-    APIConfiguration?: IAPIConfiguration;
-}
-
-
-export interface IContainerModel {
-    children: string[];
-    parent: IContainerModel | null;
-    properties: IContainerProperties;
-    userData: Record<string, string | number>;
-}
-/**
- * Macro for creating the interface
- * Do not add methods since they will be lost during serialization
- */
-export class ContainerModel implements IContainerModel {
-    children: string[];
-    parent: IContainerModel | null;
-    properties: IContainerProperties;
-    userData: Record<string, string | number>;
-    constructor(parent: IContainerModel | null, properties: IContainerProperties, children?: string[], userData?: {});
-}
-
-
-
-
-
-
-/**
- * Properties of a container
- */
-export interface IContainerProperties {
-    /** id of the container */
-    id: string;
-    /** type matching the configuration on construction */
-    type: string;
-    /** id of the parent container (null when there is no parent) */
-    parentId: string;
-    /** id of the linked symbol ('' when there is no parent) */
-    linkedSymbolId: string;
-    /** Text displayed in the container */
-    displayedText: string;
-    /** orientation */
-    orientation: Orientation;
-    /** horizontal offset */
-    x: number;
-    /** vertical offset */
-    y: number;
-    /** margin */
-    margin: IMargin;
-    /** width */
-    width: number;
-    /** height */
-    height: number;
-    /**
-     * Minimum width (min=1)
-     */
-    minWidth: number;
-    /**
-     * Maximum width
-     */
-    maxWidth: number;
-    /**
-     * Minimum height (min=1)
-     */
-    minHeight: number;
-    /**
-     * Maximum height
-     */
-    maxHeight: number;
-    /** true if anchor, false otherwise */
-    isAnchor: boolean;
-    /** true if flex, false otherwise */
-    isFlex: boolean;
-    /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
-    positionReference: PositionReference;
-    /** Hide the children in the treeview */
-    hideChildrenInTreeview: boolean;
-    /** if true, show the dimension of the container */
-    showSelfDimensions: Position[];
-    /** if true show the overall dimensions of its children */
-    showChildrenDimensions: Position[];
-    /**
-     * if true, allows a parent dimension borrower to borrow its x coordinate
-     * as a reference point for a dimension
-     */
-    markPosition: Orientation[];
-    /**
-     * if true, show a dimension from the edge of the container to end
-     * and insert dimensions marks at lift up children (see liftDimensionToBorrower)
-     */
-    showDimensionWithMarks: Position[];
-    /**
-     * Warnings of a container
-     */
-    warning: string;
-    /**
-     * (optional)
-     * Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows
-     * to draw some patterns that can be bind to the properties of the container
-     * Use {prop} to bind a property. Use {{ styleProp }} to use an object.
-     * Example :
-     * ```
-     * `<rect width="{width}" height="{height}" style="{style}"></rect>
-     * <rect  width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
-     * <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
-     * <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
-     * `
-     * ```
-     */
-    customSVG?: string;
-    /**
-     * (optional)
-     * Style of the <rect>
-     */
-    style?: React.CSSProperties;
-    /**
-     * (optional)
-     * User data that can be used for data storage or custom SVG
-     */
-    userData?: object;
 }
 
 
@@ -374,33 +432,9 @@ export interface IEditorState {
     configuration: IConfiguration;
 }
 
-
+export interface ICategory {
-export interface IGetFeedbackRequest {
+    Type: string;
-    /** Current application state */
+    DisplayedText?: string;
-    ApplicationState: IHistoryState;
-}
-
-
-export interface IGetFeedbackResponse {
-    messages: IMessage[];
-}
-
-
-
-export interface IHistoryState {
-    /** Last editor action */
-    lastAction: string;
-    /** Reference to the main container */
-    mainContainer: string;
-    containers: Map<string, IContainerModel>;
-    /** Id of the selected container */
-    selectedContainerId: string;
-    /** Counter of type of container. Used for ids. */
-    typeCounters: Record<string, number>;
-    /** List of symbols */
-    symbols: Map<string, ISymbolModel>;
-    /** Selected symbols id */
-    selectedSymbolId: string;
 }
 
 /**
@@ -421,105 +455,75 @@ export interface IImage {
     Svg?: string;
 }
 
-
+export enum MessageType {
-export interface IInputGroup {
+    Normal = 0,
-    key: string;
+    Success = 1,
-    text: React.ReactNode;
+    Warning = 2,
-    value: string;
+    Error = 3
-}
-
-export interface IMargin {
-    left?: number;
-    bottom?: number;
-    top?: number;
-    right?: number;
-}
-
-
-export interface IMessage {
-    text: string;
-    type: MessageType;
-}
-
-
-export interface IPattern {
-    /**
-     * Unique id for the pattern
-     */
-    id: string;
-    /**
-     * Text to display in the sidebar
-     */
-    text: string;
-    /**
-     * IAvailableContainer id used to wrap the children.
-     */
-    wrapper: string;
-    /**
-     * List of ids of Pattern or IAvailableContainer
-     * If a IAvailableContainer and a Pattern have the same id,
-     * IAvailableContainer will be prioritized
-     */
-    children: string[];
-}
-export type ContainerOrPattern = IAvailableContainer | IPattern;
-export function GetPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): ContainerOrPattern | undefined;
-export function IsPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): boolean;
-
-export interface IPoint {
-    x: number;
-    y: number;
-}
-
-
-
-
-export interface ISetContainerListRequest {
-    /** Name of the action declared in the API */
-    Action: IAction;
-    /** Selected container */
-    Container: IContainerModel;
-    /** The previous sibling container */
-    PreviousContainer: IContainerModel | undefined;
-    /** The next sibling container */
-    NextContainer: IContainerModel | undefined;
-    /** Current application state */
-    ApplicationState: IHistoryState;
-}
-
-
-
-export interface ISetContainerListResponse {
-    Containers: IAvailableContainer[];
-    AddingBehavior?: AddMethod;
 }
 
 /**
- * A SizePointer is a pointer in a 1 dimensional array of width/space
+ * Add method when creating a container
- * x being the address where the pointer is pointing
+ * - Append will append to the last children in list
- * width being the overall (un)allocated space affected to the address
+ * - Insert will always place it at the begining
+ * - Replace will remove the selected container and insert a new one
+ * (default: Append)
  */
-export interface ISizePointer {
+export enum AddMethod {
-    x: number;
+    Append = 0,
-    width: number;
+    Insert = 1,
+    Replace = 2,
+    ReplaceParent = 3
 }
 
+/**
+ * Describe the type of the property.
+ * Used for the assignation in the OnPropertyChange function
+ * See ContainerOperations.ts's OnPropertyChange
+ */
+export enum PropertyType {
+    /**
+     * Simple property: is not inside any object: id, x, width... (default)
+     */
+    Simple = 0,
+    /**
+     * Style property: is inside the style object: stroke, fillOpacity...
+     */
+    Style = 1,
+    /**
+     * Margin property: is inside the margin property: left, bottom, top, right...
+     */
+    Margin = 2
+}
 
-export interface ISymbolModel {
+export enum PositionReference {
-    /** Identifier */
+    TopLeft = 0,
-    id: string;
+    TopCenter = 1,
-    /** Type */
+    TopRight = 2,
-    type: string;
+    CenterLeft = 3,
-    /** Configuration of the symbol */
+    CenterCenter = 4,
-    config: IAvailableSymbol;
+    CenterRight = 5,
-    /** Horizontal offset */
+    BottomLeft = 6,
-    x: number;
+    BottomCenter = 7,
-    /** Width */
+    BottomRight = 8
-    width: number;
+}
-    /** Height */
+
-    height: number;
+export enum AppState {
-    /** List of linked container id */
+    MainMenu = 0,
-    linkedContainers: Set<string>;
+    Loading = 1,
+    Loaded = 2
+}
+
+export enum Orientation {
+    Horizontal = 0,
+    Vertical = 1
+}
+
+export enum Position {
+    Left = 0,
+    Down = 1,
+    Up = 2,
+    Right = 3
 }
 
 }

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,16 +71,13 @@ 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:
-  }, []);
-
-  if (isLoaded) {
       return (
         <div
           ref={appRef}
@@ -92,25 +91,39 @@ export function App(props: IAppProps): JSX.Element {
           />
         </div>
       );
-  }
+    case AppState.Loading:
-
+      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={() => NewEditor(
+            newEditor={() => {
+              setAppState(AppState.Loading);
+              NewEditor(
                 editorState,
                 (newEditor) => setEditorState(newEditor),
-          enableLoaded
+                () => setAppState(AppState.Loaded)
-        )}
+              );
+            }}
             loadEditor={(files: FileList | null) => LoadEditor(
               files,
               setEditorState,
-          setLoaded
+              setAppState
             )}
           />
         </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/dts/svgld.d.ts

@@ -1,67 +1,106 @@
 declare namespace SVGLD {
-/**
+export interface IMargin {
- * Add method when creating a container
+    left?: number;
- * - Append will append to the last children in list
+    bottom?: number;
- * - Insert will always place it at the begining
+    top?: number;
- * - Replace will remove the selected container and insert a new one
+    right?: number;
- * (default: Append)
- */
-export enum AddMethod {
-    Append = 0,
-    Insert = 1,
-    Replace = 2,
-    ReplaceParent = 3
 }
 
-export enum MessageType {
+export interface IPoint {
-    Normal = 0,
+    x: number;
-    Success = 1,
+    y: number;
-    Warning = 2,
-    Error = 3
 }
 
-export enum Orientation {
-    Horizontal = 0,
-    Vertical = 1
-}
 
-export enum Position {
-    Left = 0,
-    Down = 1,
-    Up = 2,
-    Right = 3
-}
-
-export enum PositionReference {
-    TopLeft = 0,
-    TopCenter = 1,
-    TopRight = 2,
-    CenterLeft = 3,
-    CenterCenter = 4,
-    CenterRight = 5,
-    BottomLeft = 6,
-    BottomCenter = 7,
-    BottomRight = 8
-}
 
 /**
- * Describe the type of the property.
+ * Model of available symbol to configure the application */
- * Used for the assignation in the OnPropertyChange function
+export interface IAvailableSymbol {
- * See ContainerOperations.ts's OnPropertyChange
+    Name: string;
- */
+    Image: IImage;
-export enum PropertyType {
+    Width?: number;
+    Height?: number;
+    PositionReference?: PositionReference;
+}
+
+export interface IAPIConfiguration {
+    apiFetchUrl?: string;
+    apiSetContainerListUrl?: string;
+    apiGetFeedbackUrl?: string;
+}
+
+
+export interface ISymbolModel {
+    /** Identifier */
+    id: string;
+    /** Type */
+    type: string;
+    /** Configuration of the symbol */
+    config: IAvailableSymbol;
+    /** Horizontal offset */
+    x: number;
+    /** Width */
+    width: number;
+    /** Height */
+    height: number;
+    /** List of linked container id */
+    linkedContainers: Set<string>;
+}
+
+
+export interface IPattern {
     /**
-     * Simple property: is not inside any object: id, x, width... (default)
+     * Unique id for the pattern
      */
-    Simple = 0,
+    id: string;
     /**
-     * Style property: is inside the style object: stroke, fillOpacity...
+     * Text to display in the sidebar
      */
-    Style = 1,
+    text: string;
     /**
-     * Margin property: is inside the margin property: left, bottom, top, right...
+     * IAvailableContainer id used to wrap the children.
      */
-    Margin = 2
+    wrapper: string;
+    /**
+     * List of ids of Pattern or IAvailableContainer
+     * If a IAvailableContainer and a Pattern have the same id,
+     * IAvailableContainer will be prioritized
+     */
+    children: string[];
+}
+export type ContainerOrPattern = IAvailableContainer | IPattern;
+export function GetPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): ContainerOrPattern | undefined;
+export function IsPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): boolean;
+
+
+
+export interface IHistoryState {
+    /** Last editor action */
+    lastAction: string;
+    /** Reference to the main container */
+    mainContainer: string;
+    containers: Map<string, IContainerModel>;
+    /** Id of the selected container */
+    selectedContainerId: string;
+    /** Counter of type of container. Used for ids. */
+    typeCounters: Record<string, number>;
+    /** List of symbols */
+    symbols: Map<string, ISymbolModel>;
+    /** Selected symbols id */
+    selectedSymbolId: string;
+}
+
+
+export interface IGetFeedbackRequest {
+    /** Current application state */
+    ApplicationState: IHistoryState;
+}
+
+
+export interface IInputGroup {
+    key: string;
+    text: React.ReactNode;
+    value: string;
 }
 
 
@@ -75,10 +114,174 @@ export interface IAction {
     AddingBehavior: AddMethod;
 }
 
-export interface IAPIConfiguration {
+
-    apiFetchUrl?: string;
+
-    apiSetContainerListUrl?: string;
+export interface ISetContainerListResponse {
-    apiGetFeedbackUrl?: string;
+    Containers: IAvailableContainer[];
+    AddingBehavior?: AddMethod;
+}
+
+
+export interface IContainerModel {
+    children: string[];
+    properties: IContainerProperties;
+    userData: Record<string, string | number>;
+}
+/**
+ * Macro for creating the interface
+ * Do not add methods since they will be lost during serialization
+ */
+export class ContainerModel implements IContainerModel {
+    children: string[];
+    properties: IContainerProperties;
+    userData: Record<string, string | number>;
+    constructor(properties: IContainerProperties, children?: string[], userData?: {});
+}
+
+/**
+ * A SizePointer is a pointer in a 1 dimensional array of width/space
+ * x being the address where the pointer is pointing
+ * width being the overall (un)allocated space affected to the address
+ */
+export interface ISizePointer {
+    x: number;
+    width: number;
+}
+
+
+export interface IGetFeedbackResponse {
+    messages: IMessage[];
+}
+
+
+
+
+
+
+/** Model of configuration for the application to configure it */
+export interface IConfiguration {
+    AvailableContainers: IAvailableContainer[];
+    AvailableSymbols: IAvailableSymbol[];
+    Categories: ICategory[];
+    Patterns: IPattern[];
+    MainContainer: IAvailableContainer;
+    APIConfiguration?: IAPIConfiguration;
+}
+
+
+
+
+export interface ISetContainerListRequest {
+    /** Name of the action declared in the API */
+    Action: IAction;
+    /** Selected container */
+    Container: IContainerModel;
+    /** The previous sibling container */
+    PreviousContainer: IContainerModel | undefined;
+    /** The next sibling container */
+    NextContainer: IContainerModel | undefined;
+    /** Current application state */
+    ApplicationState: IHistoryState;
+}
+
+
+
+
+
+
+/**
+ * Properties of a container
+ */
+export interface IContainerProperties {
+    /** id of the container */
+    id: string;
+    /** type matching the configuration on construction */
+    type: string;
+    /** id of the parent container (null when there is no parent) */
+    parentId: string;
+    /** id of the linked symbol ('' when there is no parent) */
+    linkedSymbolId: string;
+    /** Text displayed in the container */
+    displayedText: string;
+    /** orientation */
+    orientation: Orientation;
+    /** horizontal offset */
+    x: number;
+    /** vertical offset */
+    y: number;
+    /** margin */
+    margin: IMargin;
+    /** width */
+    width: number;
+    /** height */
+    height: number;
+    /**
+     * Minimum width (min=1)
+     */
+    minWidth: number;
+    /**
+     * Maximum width
+     */
+    maxWidth: number;
+    /**
+     * Minimum height (min=1)
+     */
+    minHeight: number;
+    /**
+     * Maximum height
+     */
+    maxHeight: number;
+    /** true if anchor, false otherwise */
+    isAnchor: boolean;
+    /** true if flex, false otherwise */
+    isFlex: boolean;
+    /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
+    positionReference: PositionReference;
+    /** Hide the children in the treeview */
+    hideChildrenInTreeview: boolean;
+    /** if true, show the dimension of the container */
+    showSelfDimensions: Position[];
+    /** if true show the overall dimensions of its children */
+    showChildrenDimensions: Position[];
+    /**
+     * if true, allows a parent dimension borrower to borrow its x coordinate
+     * as a reference point for a dimension
+     */
+    markPosition: Orientation[];
+    /**
+     * if true, show a dimension from the edge of the container to end
+     * and insert dimensions marks at lift up children (see liftDimensionToBorrower)
+     */
+    showDimensionWithMarks: Position[];
+    /**
+     * Warnings of a container
+     */
+    warning: string;
+    /**
+     * (optional)
+     * Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows
+     * to draw some patterns that can be bind to the properties of the container
+     * Use {prop} to bind a property. Use {{ styleProp }} to use an object.
+     * Example :
+     * ```
+     * `<rect width="{width}" height="{height}" style="{style}"></rect>
+     * <rect  width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
+     * <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
+     * <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
+     * `
+     * ```
+     */
+    customSVG?: string;
+    /**
+     * (optional)
+     * Style of the <rect>
+     */
+    style?: React.CSSProperties;
+    /**
+     * (optional)
+     * User data that can be used for data storage or custom SVG
+     */
+    userData?: object;
 }
 
 
@@ -216,154 +419,9 @@ export interface IAvailableContainer {
 }
 
 
-
+export interface IMessage {
-/**
+    text: string;
- * Model of available symbol to configure the application */
+    type: MessageType;
-export interface IAvailableSymbol {
-    Name: string;
-    Image: IImage;
-    Width?: number;
-    Height?: number;
-    PositionReference?: PositionReference;
-}
-
-export interface ICategory {
-    Type: string;
-    DisplayedText?: string;
-}
-
-
-
-
-
-
-/** Model of configuration for the application to configure it */
-export interface IConfiguration {
-    AvailableContainers: IAvailableContainer[];
-    AvailableSymbols: IAvailableSymbol[];
-    Categories: ICategory[];
-    Patterns: IPattern[];
-    MainContainer: IAvailableContainer;
-    APIConfiguration?: IAPIConfiguration;
-}
-
-
-export interface IContainerModel {
-    children: string[];
-    parent: IContainerModel | null;
-    properties: IContainerProperties;
-    userData: Record<string, string | number>;
-}
-/**
- * Macro for creating the interface
- * Do not add methods since they will be lost during serialization
- */
-export class ContainerModel implements IContainerModel {
-    children: string[];
-    parent: IContainerModel | null;
-    properties: IContainerProperties;
-    userData: Record<string, string | number>;
-    constructor(parent: IContainerModel | null, properties: IContainerProperties, children?: string[], userData?: {});
-}
-
-
-
-
-
-
-/**
- * Properties of a container
- */
-export interface IContainerProperties {
-    /** id of the container */
-    id: string;
-    /** type matching the configuration on construction */
-    type: string;
-    /** id of the parent container (null when there is no parent) */
-    parentId: string;
-    /** id of the linked symbol ('' when there is no parent) */
-    linkedSymbolId: string;
-    /** Text displayed in the container */
-    displayedText: string;
-    /** orientation */
-    orientation: Orientation;
-    /** horizontal offset */
-    x: number;
-    /** vertical offset */
-    y: number;
-    /** margin */
-    margin: IMargin;
-    /** width */
-    width: number;
-    /** height */
-    height: number;
-    /**
-     * Minimum width (min=1)
-     */
-    minWidth: number;
-    /**
-     * Maximum width
-     */
-    maxWidth: number;
-    /**
-     * Minimum height (min=1)
-     */
-    minHeight: number;
-    /**
-     * Maximum height
-     */
-    maxHeight: number;
-    /** true if anchor, false otherwise */
-    isAnchor: boolean;
-    /** true if flex, false otherwise */
-    isFlex: boolean;
-    /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
-    positionReference: PositionReference;
-    /** Hide the children in the treeview */
-    hideChildrenInTreeview: boolean;
-    /** if true, show the dimension of the container */
-    showSelfDimensions: Position[];
-    /** if true show the overall dimensions of its children */
-    showChildrenDimensions: Position[];
-    /**
-     * if true, allows a parent dimension borrower to borrow its x coordinate
-     * as a reference point for a dimension
-     */
-    markPosition: Orientation[];
-    /**
-     * if true, show a dimension from the edge of the container to end
-     * and insert dimensions marks at lift up children (see liftDimensionToBorrower)
-     */
-    showDimensionWithMarks: Position[];
-    /**
-     * Warnings of a container
-     */
-    warning: string;
-    /**
-     * (optional)
-     * Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows
-     * to draw some patterns that can be bind to the properties of the container
-     * Use {prop} to bind a property. Use {{ styleProp }} to use an object.
-     * Example :
-     * ```
-     * `<rect width="{width}" height="{height}" style="{style}"></rect>
-     * <rect  width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
-     * <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
-     * <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
-     * `
-     * ```
-     */
-    customSVG?: string;
-    /**
-     * (optional)
-     * Style of the <rect>
-     */
-    style?: React.CSSProperties;
-    /**
-     * (optional)
-     * User data that can be used for data storage or custom SVG
-     */
-    userData?: object;
 }
 
 
@@ -374,33 +432,9 @@ export interface IEditorState {
     configuration: IConfiguration;
 }
 
-
+export interface ICategory {
-export interface IGetFeedbackRequest {
+    Type: string;
-    /** Current application state */
+    DisplayedText?: string;
-    ApplicationState: IHistoryState;
-}
-
-
-export interface IGetFeedbackResponse {
-    messages: IMessage[];
-}
-
-
-
-export interface IHistoryState {
-    /** Last editor action */
-    lastAction: string;
-    /** Reference to the main container */
-    mainContainer: string;
-    containers: Map<string, IContainerModel>;
-    /** Id of the selected container */
-    selectedContainerId: string;
-    /** Counter of type of container. Used for ids. */
-    typeCounters: Record<string, number>;
-    /** List of symbols */
-    symbols: Map<string, ISymbolModel>;
-    /** Selected symbols id */
-    selectedSymbolId: string;
 }
 
 /**
@@ -421,105 +455,75 @@ export interface IImage {
     Svg?: string;
 }
 
-
+export enum MessageType {
-export interface IInputGroup {
+    Normal = 0,
-    key: string;
+    Success = 1,
-    text: React.ReactNode;
+    Warning = 2,
-    value: string;
+    Error = 3
-}
-
-export interface IMargin {
-    left?: number;
-    bottom?: number;
-    top?: number;
-    right?: number;
-}
-
-
-export interface IMessage {
-    text: string;
-    type: MessageType;
-}
-
-
-export interface IPattern {
-    /**
-     * Unique id for the pattern
-     */
-    id: string;
-    /**
-     * Text to display in the sidebar
-     */
-    text: string;
-    /**
-     * IAvailableContainer id used to wrap the children.
-     */
-    wrapper: string;
-    /**
-     * List of ids of Pattern or IAvailableContainer
-     * If a IAvailableContainer and a Pattern have the same id,
-     * IAvailableContainer will be prioritized
-     */
-    children: string[];
-}
-export type ContainerOrPattern = IAvailableContainer | IPattern;
-export function GetPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): ContainerOrPattern | undefined;
-export function IsPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): boolean;
-
-export interface IPoint {
-    x: number;
-    y: number;
-}
-
-
-
-
-export interface ISetContainerListRequest {
-    /** Name of the action declared in the API */
-    Action: IAction;
-    /** Selected container */
-    Container: IContainerModel;
-    /** The previous sibling container */
-    PreviousContainer: IContainerModel | undefined;
-    /** The next sibling container */
-    NextContainer: IContainerModel | undefined;
-    /** Current application state */
-    ApplicationState: IHistoryState;
-}
-
-
-
-export interface ISetContainerListResponse {
-    Containers: IAvailableContainer[];
-    AddingBehavior?: AddMethod;
 }
 
 /**
- * A SizePointer is a pointer in a 1 dimensional array of width/space
+ * Add method when creating a container
- * x being the address where the pointer is pointing
+ * - Append will append to the last children in list
- * width being the overall (un)allocated space affected to the address
+ * - Insert will always place it at the begining
+ * - Replace will remove the selected container and insert a new one
+ * (default: Append)
  */
-export interface ISizePointer {
+export enum AddMethod {
-    x: number;
+    Append = 0,
-    width: number;
+    Insert = 1,
+    Replace = 2,
+    ReplaceParent = 3
 }
 
+/**
+ * Describe the type of the property.
+ * Used for the assignation in the OnPropertyChange function
+ * See ContainerOperations.ts's OnPropertyChange
+ */
+export enum PropertyType {
+    /**
+     * Simple property: is not inside any object: id, x, width... (default)
+     */
+    Simple = 0,
+    /**
+     * Style property: is inside the style object: stroke, fillOpacity...
+     */
+    Style = 1,
+    /**
+     * Margin property: is inside the margin property: left, bottom, top, right...
+     */
+    Margin = 2
+}
 
-export interface ISymbolModel {
+export enum PositionReference {
-    /** Identifier */
+    TopLeft = 0,
-    id: string;
+    TopCenter = 1,
-    /** Type */
+    TopRight = 2,
-    type: string;
+    CenterLeft = 3,
-    /** Configuration of the symbol */
+    CenterCenter = 4,
-    config: IAvailableSymbol;
+    CenterRight = 5,
-    /** Horizontal offset */
+    BottomLeft = 6,
-    x: number;
+    BottomCenter = 7,
-    /** Width */
+    BottomRight = 8
-    width: number;
+}
-    /** Height */
+
-    height: number;
+export enum AppState {
-    /** List of linked container id */
+    MainMenu = 0,
-    linkedContainers: Set<string>;
+    Loading = 1,
+    Loaded = 2
+}
+
+export enum Orientation {
+    Horizontal = 0,
+    Vertical = 1
+}
+
+export enum Position {
+    Left = 0,
+    Down = 1,
+    Up = 2,
+    Right = 3
 }
 
 }

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;