Implement AddEditorListenerHook + Fix some bugs with types

public/smartcomponent/svg-layout-designer.ts

@@ -9,6 +9,7 @@
 
         public constructor(componentInfo: KnockoutComponentTypes.ComponentInfo, params: any) {
             super(componentInfo, params);
+            this._hooks = {};
         }
 
         /**
@@ -67,7 +68,7 @@
          * @param history Whole history of the editor
          * @param callback (optional)
          */
-        public SetEditorState(history: .IHistoryState[], callback?: (state: IEditorState) => void) {
+        public SetEditorState(history: IHistoryState[], callback?: (state: IEditorState) => void) {
             const eventType = 'setEditorState';
             this.AddEventListener(callback, eventType);
             const component = this.GetEditorComponent();
@@ -80,7 +81,7 @@
          * @param editorState Editor state to revive
          * @param callback Callback with the revived state
          */
-        public ReviveEditorState(editorState: .IEditorState, callback: (state: IEditorState) => void) {
+        public ReviveEditorState(editorState: IEditorState, callback: (state: IEditorState) => void) {
             const eventType = 'reviveEditorState';
             this.AddEventListener(callback, eventType);
             const component = this.GetEditorComponent();
@@ -93,7 +94,7 @@
          * @param history History to revive
          * @param callback Callback with the revived state
          */
-        public ReviveHistory(history: .IHistoryState[], callback: (state: IHistoryState[]) => void) {
+        public ReviveHistory(history: IHistoryState[], callback: (state: IHistoryState[]) => void) {
             const eventType = 'reviveHistory';
             this.AddEventListener(callback, eventType);
             const component = this.GetEditorComponent();
@@ -105,7 +106,7 @@
          * @param historyState New history state to append
          * @param callback
          */
-        public AppendNewHistoryState(historyState: .IHistoryState, callback?: (state: IEditorState) => void) {
+        public AppendNewHistoryState(historyState: IHistoryState, callback?: (state: IEditorState) => void) {
             const eventType = 'appendNewState';
             this.AddEventListener(callback, eventType);
             this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail: historyState }));
@@ -261,6 +262,39 @@
             };
             root.addEventListener(eventType, listener);
         }
+
+        private static EDITOR_LISTENER_TYPE = 'editorListener';
+        private _hooks: Record<string, (e: CustomEvent) => void>;
+
+        /**
+         * Add a hook to the editor state change.
+         * After every time an action is perform on the editor, the callback will be called
+         * @param callback Callback to add that listen to the event
+         */
+        public AddEditorListenerHook(hookId: string, callback: (state: IEditorState) => void): void {
+            const root = this.GetRootComponent();
+            const customEvent = (e: CustomEvent) => {
+                callback(e.detail);
+            }
+
+            if (this._hooks[hookId] !== undefined) {
+                console.error(`HookId is already occupied. Please use a different HookId: ${hookId}`);
+                return;
+            }
+
+            this._hooks[hookId] = customEvent;
+            root.addEventListener(SVGLayoutDesigner.EDITOR_LISTENER_TYPE, customEvent);
+        }
+
+        /**
+         * Remove a hook to the editor state change.
+         * @param callback Callback to remove that listen to the event
+         */
+        public RemoveEditorListenerHook(hookId): void {
+            const root = this.GetRootComponent();
+            root.removeEventListener(SVGLayoutDesigner.EDITOR_LISTENER_TYPE, this._hooks[hookId]);
+            delete this._hooks[hookId];
+        }
     }
 
     ko.components.register('svg-layout-designer', {

src/Components/Editor/Editor.tsx

@@ -152,6 +152,23 @@ function UseCustomEvents(
   });
 }
 
+function UseEditorListener(
+  root: Element | Document,
+  history: IHistoryState[],
+  historyCurrentStep: number,
+  configuration: IConfiguration
+): void {
+  useEffect(() => {
+    const editorState: IEditorState = {
+      history,
+      historyCurrentStep,
+      configuration
+    };
+    const event = new CustomEvent('editorListener', { detail: editorState });
+    root.dispatchEvent(event);
+  });
+}
+
 /**
  * Return a macro function to use both setHistory
  * and setHistoryCurrentStep at the same time
@@ -186,6 +203,12 @@ export function Editor(props: IEditorProps): JSX.Element {
     editorRef,
     setNewHistory
   );
+  UseEditorListener(
+    props.root,
+    history,
+    historyCurrentStep,
+    props.configuration
+  );
 
   // Context Menu
   const menuActions = new Map();