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

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

        public GetEditorComponent() {
            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 GetRootComponent() {
            return this.$component[0]
                .querySelector('iframe')
                .contentDocument;
        }


        /// Custom Events ///

        public GetCurrentHistoryState(callback: (state: IHistoryState) => void) {
            const eventType = 'getCurrentHistoryState';
            this.AddEventListener(callback, eventType);
            const component = this.GetEditorComponent();
            component.dispatchEvent(new CustomEvent(eventType));
        }

        public GetEditorState(callback: (state: IEditorState) => void) {
            const eventType = 'getEditorState';
            this.AddEventListener(callback, eventType);
            const component = this.GetEditorComponent();
            component.dispatchEvent(new CustomEvent(eventType));
        }

        public SetEditorState(history: SVGLD.IHistoryState[], callback?: (state: IEditorState) => void) {
            const eventType = 'setEditorState';
            this.AddEventListener(callback, eventType);
            const component = this.GetEditorComponent();
            component.dispatchEvent(new CustomEvent(eventType, { detail: history }));
        }

        public ReviveEditorState(editorState: SVGLD.IEditorState, callback: (state: IEditorState) => void) {
            const eventType = 'reviveEditorState';
            this.AddEventListener(callback, eventType);
            const component = this.GetEditorComponent();
            component.dispatchEvent(new CustomEvent(eventType, { detail: editorState }));
        }

        public ReviveHistory(history: SVGLD.IHistoryState[], callback: (state: IHistoryState[]) => void) {
            const eventType = 'reviveHistory';
            this.AddEventListener(callback, eventType);
            const component = this.GetEditorComponent();
            component.dispatchEvent(new CustomEvent(eventType, { detail: history }));
        }

        public AppendNewHistoryState(historyState: SVGLD.IHistoryState, callback?: (state: IEditorState) => void) {
            const eventType = 'appendNewState';
            this.AddEventListener(callback, eventType);
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail: historyState }));
        }

        public AddContainer(index: number, type: string, parentId: string, callback?: (state: IEditorState) => void) {
            const eventType = 'addContainer';
            this.AddEventListener(callback, eventType);
            const detail = {
                index,
                type,
                parentId
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }

        public AddContainerToSelectedContainer(index: number, type: string, callback?: (state: IEditorState) => void) {
            const eventType = 'addContainerToSelectedContainer';
            this.AddEventListener(callback, eventType);
            const detail = {
                index,
                type
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }

        public AppendContainer(type: string, parentId: string, callback?: (state: IEditorState) => void) {
            const eventType = 'appendContainer';
            this.AddEventListener(callback, eventType);
            const detail = {
                type,
                parentId
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }

        public AppendContainerToSelectedContainer(type: string, callback?: (state: IEditorState) => void) {
            const eventType = 'appendContainerToSelectedContainer';
            this.AddEventListener(callback, eventType);
            const detail = {
                type
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }

        public SelectContainer(containerId: string, callback?: (state: IEditorState) => void) {
            const eventType = 'selectContainer';
            this.AddEventListener(callback, eventType);
            const detail = {
                containerId
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }

        public DeleteContainer(containerId: string, callback?: (state: IEditorState) => void) {
            const eventType = 'deleteContainer';
            this.AddEventListener(callback, eventType);
            const detail = {
                containerId
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }

        public AddSymbol(name: string, callback?: (state: IEditorState) => void) {
            const eventType = 'addSymbol';
            this.AddEventListener(callback, eventType);
            const detail = {
                name
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }

        public SelectSymbol(symbolId, callback?: (state: IEditorState) => void) {
            const eventType = 'selectSymbol';
            this.AddEventListener(callback, eventType);
            const detail = {
                symbolId
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }

        public DeleteSymbol(symbolId: string, callback?: (state: IEditorState) => void) {
            const eventType = 'deleteSymbol';
            this.AddEventListener(callback, eventType);
            const detail = {
                symbolId
            }
            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
        }

        private AddEventListener(callback: ((...args: any[]) => void) | undefined, eventType: string) {
            const root = this.GetRootComponent();
            const listener = (e: CustomEvent) => {
                e.target.removeEventListener(e.type, listener);
                callback && callback(e.detail);
            };
            root.addEventListener(eventType, listener);
        }
    }

    ko.components.register('svg-layout-designer', {
        viewModel: {
            createViewModel: function (params, componentInfo) {
                return new SmartBusiness.Web.Components.SVGLayoutDesigner(componentInfo, params);
            }
        },
        template: { element: 'svg-layout-designer' }
    });
}