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

public/Interfaces.d.ts

@@ -1,65 +0,0 @@
-declare interface IHistoryState {
-  LastAction: string
-  MainContainer: IContainerModel
-  SelectedContainer: IContainerModel | null
-  SelectedContainerId: string
-  TypeCounters: Record<string, number>
-}
-
-declare interface IAvailableContainer {
-  Type: string
-  Width: number
-  Height: number
-  XPositionReference?: XPositionReference
-  Style: React.CSSProperties
-}
-
-declare interface IEditorState {
-  history: IHistoryState[]
-  historyCurrentStep: number
-  configuration: IConfiguration
-}
-
-declare interface IConfiguration {
-  AvailableContainers: IAvailableContainer[]
-  AvailableSymbols: IAvailableSymbol[]
-  MainContainer: IAvailableContainer
-}
-
-declare interface IContainerModel {
-  children: IContainerModel[]
-  parent: IContainerModel | null
-  properties: IProperties
-  userData: Record<string, string | number>
-}
-
-declare interface IProperties extends React.CSSProperties {
-  id: string
-  parentId: string | null
-  x: number
-  y: number
-
-  XPositionReference?: XPositionReference
-}
-
-declare enum XPositionReference {
-  Left,
-  Center,
-  Right
-}
-
-declare interface IAvailableSymbol {
-  Name: string
-  XPositionReference: XPositionReference
-  Image: IImage
-  Width: number
-  Height: number
-}
-
-declare interface IImage {
-  Name: string
-  Url: string
-  Base64Image: string
-  Svg: string
-}
-

public/smartcomponent/svg-layout-designer.html

@@ -1,2 +1,2 @@
-<div id="root">
-</div>
+<iframe src="./Components/svg-layout-designer/index.html" style="border:none; width:100%; height:100%">
+</iframe>

public/smartcomponent/svg-layout-designer.ts

@@ -1,40 +1,99 @@
 namespace SmartBusiness.Web.Components {
+    import IHistoryState = SVGLD.IHistoryState;
+    import IEditorState = SVGLD.IEditorState;
+
     export class SVGLayoutDesigner extends Components.ComponentBase {
 
         public constructor(componentInfo: KnockoutComponentTypes.ComponentInfo, params: any) {
             super(componentInfo, params);
-            setTimeout(() => (window as any).SVGLayoutDesigner.Render(this.$component[0]));
-            this.InitEventsListener();
         }
 
         public GetEditorComponent() {
-            return this.$component[0].querySelector('.Editor');
+            const component = this.$component[0]
+                .querySelector('iframe')
+                .contentDocument
+                .querySelector('.Editor');
+
+            if (component === undefined) {
+                throw new Error('[SVGLD] Cannot hook the event because the editor is not yet open')
+            }
+
+            return component;
         }
 
-        public GetCurrentHistoryState() {
-            this.GetEditorComponent().dispatchEvent(new CustomEvent('getCurrentHistoryState'));
+        public GetRootComponent() {
+            return this.$component[0]
+                .querySelector('iframe')
+                .contentDocument;
         }
 
-        public GetEditorState() {
-            this.GetEditorComponent().dispatchEvent(new CustomEvent('getEditorState'));
+        public GetCurrentHistoryState(callback: (state: IHistoryState) => void) {
+            const component = this.GetEditorComponent();
+            const eventType = 'getCurrentHistoryState';
+            component.dispatchEvent(new CustomEvent(eventType));
+            this.AddEventListener(callback, eventType);
         }
 
-        public SetEditorState(editorState: IEditorState) {
-           this.GetEditorComponent().dispatchEvent(new CustomEvent('SetEditorState', { detail: editorState }));
+        public GetEditorState(callback: (state: IEditorState) => void) {
+            const component = this.GetEditorComponent();
+            const eventType = 'getEditorState';
+            component.dispatchEvent(new CustomEvent(eventType));
+            this.AddEventListener(callback, eventType);
         }
 
-        public AppendNewHistoryState(historyState: IHistoryState) {
-            this.GetEditorComponent().dispatchEvent(new CustomEvent('appendNewState', { detail: historyState }));
+        public AppendNewHistoryState(historyState: SVGLD.IHistoryState, callback?: (state: IEditorState) => void) {
+            const eventType = 'appendNewState';
+            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail: historyState }));
+            this.AddEventListener(callback, eventType);
         }
 
-        public OHistoryState: KnockoutObservable<any>;
+        public AddContainer(index: number, type: string, parentId: string, callback?: (state: IEditorState) => void) {
+            const detail = {
+                index,
+                type,
+                parentId
+            }
+            const eventType = 'addContainer';
+            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
+            this.AddEventListener(callback, eventType);
+        }
 
-        private InitEventsListener() {
-            this.$component[0].addEventListener('getCurrentHistoryState', (e: CustomEvent) => {
-                this.OHistoryState(e.detail);
-                console.log(this.OHistoryState());
-            });
-            this.$component[0].addEventListener('getEditorState', (e) => console.log((e as any).detail));
+        public AddContainerToSelectedContainer(index: number, type: string, callback?: (state: IEditorState) => void) {
+            const detail = {
+                index,
+                type
+            }
+            const eventType = 'addContainerToSelectedContainer';
+            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
+            this.AddEventListener(callback, eventType);
+        }
+
+        public AppendContainer(type: string, parentId: string, callback?: (state: IEditorState) => void) {
+            const detail = {
+                type,
+                parentId
+            }
+            const eventType = 'appendContainer';
+            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
+            this.AddEventListener(callback, eventType);
+        }
+
+        public AppendContainerToSelectedContainer(type: string, callback?: (state: IEditorState) => void) {
+            const detail = {
+                type
+            }
+            const eventType = 'appendContainerToSelectedContainer';
+            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
+            this.AddEventListener(callback, eventType);
+        }
+
+        private AddEventListener(callback: (...args: any[]) => void, eventType: string) {
+            const root = this.GetRootComponent();
+            const listener = (e: CustomEvent) => {
+                e.target.removeEventListener(e.type, listener);
+                callback && callback(e.detail);
+            };
+            root.addEventListener(eventType, listener);
         }
     }
 
@@ -46,4 +105,4 @@
         },
         template: { element: 'svg-layout-designer' }
     });
-}
+}