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.html

@@ -0,0 +1,2 @@
+<div id="root">
+</div>

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

public/smartcomponent/svg-layout-designer.xcomponent

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ComponentModel xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.Techform.com/SmartExpert/2009/05">
+  <HasContent>false</HasContent>
+  <Id>0A61000D-FC2D-4490-BB3E-0FAED2AF3FDC</Id>
+  <ImageUrl />
+  <ItemName>svg-layout-designer</ItemName>
+  <Parameters>
+    <ParameterModel>
+      <ItemName>viewModel</ItemName>
+      <Text>ViewModel</Text>
+    </ParameterModel>
+  </Parameters>
+  <Text>svg-layout-designer</Text>
+</ComponentModel>