Implement setEditor + Add some macros

public/smartcomponent/svg-layout-designer.ts

@@ -12,6 +12,23 @@
             this._hooks = {};
         }
 
+        /**
+         * Return the HTML component handling the editor
+         */
+        public GetAppComponent() {
+            const component = this.$component[0]
+                .querySelector('iframe')
+                .contentDocument
+                .querySelector('.App');
+
+            if (component === undefined) {
+                throw new Error('[SVGLD] Cannot hook the event because the editor is not yet open')
+            }
+
+            return component;
+        }
+
+
         /**
          * Return the HTML component handling the editor
          */
@@ -39,7 +56,23 @@
         }
 
 
-        /// Custom Events ///
+        /// App Events ///
+
+        /**
+         * Not to be confused with setHistory,
+         * change the default configuration for the new containers, symbols etc.
+         * @param newEditor New editor configuration to set
+         * @param callback
+         */
+        public SetEditor(newEditor: IEditorState, callback?: (state: IEditorState) => void) {
+            const eventType = 'setEditor';
+            this.AddEventListener(callback, eventType);
+            const component = this.GetAppComponent();
+            component.dispatchEvent(new CustomEvent(eventType, { detail: newEditor }))
+        }
+
+
+        /// Editor Events ///
 
         /**
          * Return in a callback the current state in the history of the editor
@@ -53,7 +86,7 @@
         }
 
         /**
-         * Return in a callback the current state of the editor
+         * Return in a callback the current history of the editor
          * @param callback
          */
         public GetEditorState(callback: (state: IEditorState) => void) {
@@ -68,8 +101,8 @@
          * @param history Whole history of the editor
          * @param callback (optional)
          */
-        public SetEditorState(history: IHistoryState[], callback?: (state: IEditorState) => void) {
-            const eventType = 'setEditorState';
+        public SetHistory(history: IHistoryState[], callback?: (state: IEditorState) => void) {
+            const eventType = 'setHistory';
             this.AddEventListener(callback, eventType);
             const component = this.GetEditorComponent();
             component.dispatchEvent(new CustomEvent(eventType, { detail: history }));
@@ -263,6 +296,9 @@
             root.addEventListener(eventType, listener);
         }
 
+
+        /// Hooks ///
+
         private static EDITOR_LISTENER_TYPE = 'editorListener';
         private _hooks: Record<string, (e: CustomEvent) => void>;
 
@@ -295,6 +331,29 @@
             root.removeEventListener(SVGLayoutDesigner.EDITOR_LISTENER_TYPE, this._hooks[hookId]);
             delete this._hooks[hookId];
         }
+
+
+        /// Macros ///
+
+        /**
+         * Reset to the first state and clear all history
+         */
+        public Reset(): void {
+            this.GetEditorState((state) => {
+                this.SetHistory([state.history[0]]);
+            });
+        }
+
+        /**
+         * Clear all previous history but the last state
+         */
+        public ClearHistory(): void {
+            this.GetEditorState((state) => {
+                this.SetHistory([state.history[state.history.length - 1]]);
+            });
+        }
+
+
     }
 
     ko.components.register('svg-layout-designer', {