Refactor EditorEvents params into an object

src/Events/EditorEvents.ts

@@ -9,15 +9,15 @@ import { IHistoryState } from '../Interfaces/IHistoryState';
 import { FindContainerById } from '../utils/itertools';
 import { GetCircularReplacer } from '../utils/saveload';
 
-// TODO: set the params of func in an interface
+interface IEditorEventParams {
+  root: Element | Document
+  editorState: IEditorState
+  setNewHistory: (newHistory: IHistoryState[], historyCurrentStep?: number) => void
+  eventInitDict?: CustomEventInit
+}
 export interface IEditorEvent {
   name: string
-  func: (
+  func: (params: IEditorEventParams) => void
-    root: Element | Document,
-    editorState: IEditorState,
-    setNewHistory: (newHistory: IHistoryState[], historyCurrentStep?: number) => void,
-    eventInitDict?: CustomEventInit
-  ) => void
 }
 
 export const events: IEditorEvent[] = [
@@ -55,12 +55,12 @@ export function UseCustomEvents(
     const funcs = new Map<string, () => void>();
     for (const event of events) {
       function Func(eventInitDict?: CustomEventInit): void {
-        return event.func(
+        return event.func({
           root,
           editorState,
           setNewHistory,
           eventInitDict
-        );
+        });
       }
       editorRef.current?.addEventListener(event.name, Func);
       funcs.set(event.name, Func);
@@ -94,24 +94,30 @@ export function UseEditorListener(
   });
 }
 
-function GetEditorState(root: Element | Document,
+function GetEditorState({
-  editorState: IEditorState): void {
+  root,
+  editorState
+}: IEditorEventParams): void {
   const customEvent = new CustomEvent<IEditorState>('getEditorState', { detail: structuredClone(editorState) });
   root.dispatchEvent(customEvent);
 }
 
-function GetEditorStateAsString(root: Element | Document,
+function GetEditorStateAsString({
-  editorState: IEditorState): void {
+  root,
+  editorState
+}: IEditorEventParams): void {
   const spaces = import.meta.env.DEV ? 4 : 0;
   const data = JSON.stringify(editorState, GetCircularReplacer(), spaces);
   const customEvent = new CustomEvent<string>('getEditorStateAsString', { detail: data });
   root.dispatchEvent(customEvent);
 }
 
-function SetHistory(root: Element | Document,
+function SetHistory({
-  editorState: IEditorState,
+  root,
-  setNewHistory: (newHistory: IHistoryState[], historyCurrentStep?: number) => void,
+  editorState,
-  eventInitDict?: CustomEventInit): void {
+  setNewHistory,
+  eventInitDict
+}: IEditorEventParams): void {
   const history: IHistoryState[] = eventInitDict?.detail.history;
   const historyCurrentStep: number | undefined = eventInitDict?.detail.historyCurrentStep;
   setNewHistory(history, historyCurrentStep);
@@ -119,18 +125,22 @@ function SetHistory(root: Element | Document,
   root.dispatchEvent(customEvent);
 }
 
-function GetCurrentHistoryState(root: Element | Document,
+function GetCurrentHistoryState({
-  editorState: IEditorState): void {
+  root,
+  editorState
+}: IEditorEventParams): void {
   const customEvent = new CustomEvent<IHistoryState>(
     'getCurrentHistoryState',
     { detail: structuredClone(editorState.history[editorState.historyCurrentStep]) });
   root.dispatchEvent(customEvent);
 }
 
-function AppendNewState(root: Element | Document,
+function AppendNewState({
-  editorState: IEditorState,
+  root,
-  setNewHistory: (newHistory: IHistoryState[]) => void,
+  editorState,
-  eventInitDict?: CustomEventInit): void {
+  setNewHistory,
+  eventInitDict
+}: IEditorEventParams): void {
   const state: IHistoryState = eventInitDict?.detail.state;
   const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
 
@@ -143,10 +153,12 @@ function AppendNewState(root: Element | Document,
   root.dispatchEvent(customEvent);
 }
 
-function AddContainer(root: Element | Document,
+function AddContainer({
-  editorState: IEditorState,
+  root,
-  setNewHistory: (newHistory: IHistoryState[]) => void,
+  editorState,
-  eventInitDict?: CustomEventInit): void {
+  setNewHistory,
+  eventInitDict
+}: IEditorEventParams): void {
   const {
     index,
     type,
@@ -170,10 +182,12 @@ function AddContainer(root: Element | Document,
   root.dispatchEvent(customEvent);
 }
 
-function AddContainerToSelectedContainer(root: Element | Document,
+function AddContainerToSelectedContainer({
-  editorState: IEditorState,
+  root,
-  setNewHistory: (newHistory: IHistoryState[]) => void,
+  editorState,
-  eventInitDict?: CustomEventInit): void {
+  setNewHistory,
+  eventInitDict
+}: IEditorEventParams): void {
   const {
     index,
     type
@@ -198,10 +212,12 @@ function AddContainerToSelectedContainer(root: Element | Document,
   root.dispatchEvent(customEvent);
 }
 
-function AppendContainer(root: Element | Document,
+function AppendContainer({
-  editorState: IEditorState,
+  root,
-  setNewHistory: (newHistory: IHistoryState[]) => void,
+  editorState,
-  eventInitDict?: CustomEventInit): void {
+  setNewHistory,
+  eventInitDict
+}: IEditorEventParams): void {
   const {
     type,
     parentId
@@ -228,10 +244,12 @@ function AppendContainer(root: Element | Document,
   root.dispatchEvent(customEvent);
 }
 
-function AppendContainerToSelectedContainer(root: Element | Document,
+function AppendContainerToSelectedContainer({
-  editorState: IEditorState,
+  root,
-  setNewHistory: (newHistory: IHistoryState[]) => void,
+  editorState,
-  eventInitDict?: CustomEventInit): void {
+  setNewHistory,
+  eventInitDict
+}: IEditorEventParams): void {
   const {
     type
   } = eventInitDict?.detail;
@@ -257,10 +275,12 @@ function AppendContainerToSelectedContainer(root: Element | Document,
   root.dispatchEvent(customEvent);
 }
 
-function SelectContainer(root: Element | Document,
+function SelectContainer({
-  editorState: IEditorState,
+  root,
-  setNewHistory: (newHistory: IHistoryState[]) => void,
+  editorState,
-  eventInitDict?: CustomEventInit): void {
+  setNewHistory,
+  eventInitDict
+}: IEditorEventParams): void {
   const {
     containerId
   } = eventInitDict?.detail;
@@ -280,10 +300,12 @@ function SelectContainer(root: Element | Document,
   root.dispatchEvent(customEvent);
 }
 
-function DeleteContainer(root: Element | Document,
+function DeleteContainer({
-  editorState: IEditorState,
+  root,
-  setNewHistory: (newHistory: IHistoryState[]) => void,
+  editorState,
-  eventInitDict?: CustomEventInit): void {
+  setNewHistory,
+  eventInitDict
+}: IEditorEventParams): void {
   const {
     containerId
   } = eventInitDict?.detail;
@@ -303,10 +325,12 @@ function DeleteContainer(root: Element | Document,
   root.dispatchEvent(customEvent);
 }
 
-function AddSymbol(root: Element | Document,
+function AddSymbol({
-  editorState: IEditorState,
+  root,
-  setNewHistory: (newHistory: IHistoryState[]) => void,
+  editorState,
-  eventInitDict?: CustomEventInit): void {
+  setNewHistory,
+  eventInitDict
+}: IEditorEventParams): void {
   const {
     name
   } = eventInitDict?.detail;
@@ -327,10 +351,12 @@ function AddSymbol(root: Element | Document,
   root.dispatchEvent(customEvent);
 }
 
-function SelectSymbol(root: Element | Document,
+function SelectSymbol({
-  editorState: IEditorState,
+  root,
-  setNewHistory: (newHistory: IHistoryState[]) => void,
+  editorState,
-  eventInitDict?: CustomEventInit): void {
+  setNewHistory,
+  eventInitDict
+}: IEditorEventParams): void {
   const {
     symbolId
   } = eventInitDict?.detail;
@@ -350,10 +376,12 @@ function SelectSymbol(root: Element | Document,
   root.dispatchEvent(customEvent);
 }
 
-function DeleteSymbol(root: Element | Document,
+function DeleteSymbol({
-  editorState: IEditorState,
+  root,
-  setNewHistory: (newHistory: IHistoryState[]) => void,
+  editorState,
-  eventInitDict?: CustomEventInit): void {
+  setNewHistory,
+  eventInitDict
+}: IEditorEventParams): void {
   const {
     symbolId
   } = eventInitDict?.detail;