Refactor App and Editor events

src/Events/EditorEvents.ts

@@ -1,11 +1,13 @@
+import { useEffect } from 'react';
 import { AddContainer as AddContainerAction, AddContainerToSelectedContainer as AddContainerToSelectedContainerAction } from '../Components/Editor/Actions/AddContainer';
 import { DeleteContainer as DeleteContainerAction, SelectContainer as SelectContainerAction } from '../Components/Editor/Actions/ContainerOperations';
 import { AddSymbol as AddSymbolAction, DeleteSymbol as DeleteSymbolAction, SelectSymbol as SelectSymbolAction } from '../Components/Editor/Actions/SymbolOperations';
 import { GetCurrentHistory } from '../Components/Editor/Editor';
+import { IConfiguration } from '../Interfaces/IConfiguration';
 import { IEditorState } from '../Interfaces/IEditorState';
 import { IHistoryState } from '../Interfaces/IHistoryState';
 import { FindContainerById } from '../utils/itertools';
-import { GetCircularReplacer, ReviveHistory as ReviveHistoryAction } from '../utils/saveload';
+import { GetCircularReplacer } from '../utils/saveload';
 
 export interface IEditorEvent {
   name: string
@@ -34,6 +36,63 @@ export const events: IEditorEvent[] = [
   { name: 'deleteSymbol', func: DeleteSymbol }
 ];
 
+export function UseCustomEvents(
+  root: Element | Document,
+  history: IHistoryState[],
+  historyCurrentStep: number,
+  configuration: IConfiguration,
+  editorRef: React.RefObject<HTMLDivElement>,
+  setNewHistory: (newHistory: IHistoryState[], historyCurrentStep?: number) => void
+): void {
+  useEffect(() => {
+    const editorState: IEditorState = {
+      history,
+      historyCurrentStep,
+      configuration
+    };
+
+    const funcs = new Map<string, () => void>();
+    for (const event of events) {
+      function Func(eventInitDict?: CustomEventInit): void {
+        return event.func(
+          root,
+          editorState,
+          setNewHistory,
+          eventInitDict
+        );
+      }
+      editorRef.current?.addEventListener(event.name, Func);
+      funcs.set(event.name, Func);
+    }
+    return () => {
+      for (const event of events) {
+        const func = funcs.get(event.name);
+        if (func === undefined) {
+          continue;
+        }
+        editorRef.current?.removeEventListener(event.name, func);
+      }
+    };
+  });
+}
+
+export 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);
+  });
+}
+
 function GetEditorState(root: Element | Document,
   editorState: IEditorState): void {
   const customEvent = new CustomEvent<IEditorState>('getEditorState', { detail: structuredClone(editorState) });