svg-layout-designer-react/public/smartcomponent/svg-layout-designer.ts

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