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/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' }
     });
-}
+}