Merged PR 189: Simplify usage of SmartComponent

- Added new Events :
  - AddContainer, AddContainerToSelectedContainer, AppendContainer, AppendContainerToSelectedContainer, SelectContainer, DeleteContainer
  - AddSymbol, SelectSymbol, DeleteSymbol
- Changed the component to an iframe (you only need to copy the whole dist now)
- Added callbacks to every methods in the component
- Create event listener on demand: no need to initialize the event listener!
- Update d.ts
- Added Fastboot and enable it by default on production build

src/Components/Editor/Editor.tsx

@@ -112,7 +112,7 @@ function UseShortcuts(
   });
 }
 
-function UseWindowEvents(
+function UseCustomEvents(
   root: Element | Document,
   history: IHistoryState[],
   historyCurrentStep: number,
@@ -178,7 +178,7 @@ export function Editor(props: IEditorProps): JSX.Element {
 
   // Events
   UseShortcuts(history, historyCurrentStep, setHistoryCurrentStep);
-  UseWindowEvents(
+  UseCustomEvents(
     props.root,
     history,
     historyCurrentStep,

src/Components/Loader/Loader.scss

@@ -0,0 +1,59 @@
+$foreground: #3b82f6;
+
+.loader,
+.loader:before,
+.loader:after {
+  background:$foreground;
+  -webkit-animation:load1 1s infinite ease-in-out;
+  animation:load1 1s infinite ease-in-out;
+  width:1em;
+  height:4em;
+}
+
+.loader {
+  color:$foreground;
+  text-indent:-9999em;
+  margin:88px auto;
+  position:relative;
+  font-size:11px;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation-delay:-0.16s;
+  animation-delay:-0.16s;
+
+  &:before,
+  &:after {
+    position:absolute;
+    top:0;
+    content:'';
+  }
+
+  &:before {
+    left:-1.5em;
+    -webkit-animation-delay:-0.32s;
+    animation-delay:-0.32s;
+  }
+
+  &:after {
+    left:1.5em;
+  }
+
+}
+
+@mixin load1-frames {
+  0%,
+  80%,
+  100% {
+    box-shadow:0 0;
+    height:4em;
+  }
+
+  40% {
+    box-shadow:0 -2em;
+    height:5em;
+  }
+}
+
+@-webkit-keyframes load1 {@include load1-frames;}
+@keyframes load1 {@include load1-frames;}

src/Components/Loader/Loader.tsx

@@ -0,0 +1,14 @@
+import './Loader.scss';
+
+import * as React from 'react';
+
+export interface ILoaderProps {
+}
+
+export function Loader(props: ILoaderProps): JSX.Element {
+  return (
+    <div className='loader'>
+        Loading...
+    </div>
+  );
+}

src/Components/MainMenu/MainMenu.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { FAST_BOOT } from '../../utils/default';
+import { Loader } from '../Loader/Loader';
 
 interface IMainMenuProps {
   newEditor: () => void
@@ -8,10 +10,21 @@ 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 (
@@ -46,10 +59,19 @@ 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 rounded-lg drop-shadow-lg grid grid-cols-1 md:grid-cols-2 gap-8 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
-          <button type="button" className='mainmenu-btn' onClick={props.newEditor}>Start from scratch</button>
+          <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>
         </div>
       );