Merged PR 168: Add SmartComponent source code + Restrict Events by giving a root at the first render + Added Render function to a namespace

- Add smartcomponent source code to public/
- Restrict Events by giving a root at the first render + Added Render function to a namespace
- Add attribute type="button" to all buttons

public/smartcomponent/svg-layout-designer.ts

@@ -0,0 +1,67 @@
+namespace SmartBusiness.Web.Components {
+    export class SVGLayoutDesigner extends Components.ComponentBase {
+
+        public constructor(componentInfo: KnockoutComponentTypes.ComponentInfo, params: any) {
+            super(componentInfo, params);
+            // this.$component.id = SVGLayoutDesigner.generateUUID();
+            setTimeout(() => (window as any).SVGLayoutDesigner.Render(this.$component[0]));
+            this.InitEventsListener();
+        }
+
+
+       public static generateUUID() { // Public Domain/MIT
+           let d = new Date().getTime();//Timestamp
+           let d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now()*1000)) || 0;//Time in microseconds since page-load or 0 if unsupported
+           return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+               let r = Math.random() * 16;//random number between 0 and 16
+               if(d > 0){//Use timestamp until depleted
+                   r = (d + r)%16 | 0;
+                   d = Math.floor(d/16);
+               } else {//Use microseconds since page-load if supported
+                   r = (d2 + r)%16 | 0;
+                   d2 = Math.floor(d2/16);
+               }
+               return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+           });
+       }
+
+        public GetEditorComponent() {
+            return this.$component[0].querySelector('.Editor');
+        }
+
+        public GetCurrentHistoryState() {
+            this.GetEditorComponent().dispatchEvent(new CustomEvent('getCurrentHistoryState'));
+        }
+
+        public GetEditorState() {
+            this.GetEditorComponent().dispatchEvent(new CustomEvent('getEditorState'));
+        }
+
+        public SetEditorState(editorState: IEditorState) {
+           this.GetEditorComponent().dispatchEvent(new CustomEvent('SetEditorState', { detail: editorState }));
+        }
+
+        public AppendNewHistoryState(historyState: IHistoryState) {
+            this.GetEditorComponent().dispatchEvent(new CustomEvent('appendNewState', { detail: historyState }));
+        }
+
+        public OHistoryState: KnockoutObservable<any>;
+
+        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));
+        }
+    }
+
+    ko.components.register('svg-layout-designer', {
+        viewModel: {
+            createViewModel: function (params, componentInfo) {
+                return new SmartBusiness.Web.Components.SVGLayoutDesigner(componentInfo, params);
+            }
+        },
+        template: { element: 'svg-layout-designer' }
+    });
+}