Implement events

src/Components/Editor/Editor.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import './Editor.scss';
 import { IConfiguration } from '../../Interfaces/IConfiguration';
 import { SVG } from '../SVG/SVG';
@@ -8,6 +8,8 @@ import { SelectContainer, DeleteContainer, AddContainerToSelectedContainer, AddC
 import { SaveEditorAsJSON, SaveEditorAsSVG } from './Save';
 import { onKeyDown } from './Shortcuts';
 import { OnPropertyChange, OnPropertiesSubmit } from './PropertiesOperations';
+import EditorEvents from '../../Events/EditorEvents';
+import { IEditorState } from '../../Interfaces/IEditorState';
 
 interface IEditorProps {
   configuration: IConfiguration
@@ -21,6 +23,7 @@ export const getCurrentHistoryState = (history: IHistoryState[], historyCurrentS
 const Editor: React.FunctionComponent<IEditorProps> = (props) => {
   const [history, setHistory] = React.useState<IHistoryState[]>(structuredClone(props.history));
   const [historyCurrentStep, setHistoryCurrentStep] = React.useState<number>(props.historyCurrentStep);
+  const editorRef = useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
     const onKeyUp = (event: KeyboardEvent): void => onKeyDown(
@@ -32,6 +35,17 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
 
     window.addEventListener('keyup', onKeyUp);
 
+    const events = EditorEvents;
+    const editorState: IEditorState = {
+      history,
+      historyCurrentStep,
+      configuration: props.configuration
+    };
+
+    for (const event of events) {
+      editorRef.current?.addEventListener(event.name, () => event.func(editorState));
+    }
+
     return () => {
       window.removeEventListener('keyup', onKeyUp);
     };
@@ -40,7 +54,7 @@ const Editor: React.FunctionComponent<IEditorProps> = (props) => {
   const configuration = props.configuration;
   const current = getCurrentHistoryState(history, historyCurrentStep);
   return (
-    <div className="App font-sans h-full">
+    <div ref={editorRef} className="Editor font-sans h-full">
       <UI
         current={current}
         history={history}

src/Events/EditorEvents.ts

@@ -0,0 +1,26 @@
+import { IEditorState } from '../Interfaces/IEditorState';
+import { IHistoryState } from '../Interfaces/IHistoryState';
+
+const getEditorState = (editorState: IEditorState): void => {
+  const customEvent = new CustomEvent<IEditorState>('getEditorState', { detail: editorState });
+  document.dispatchEvent(customEvent);
+};
+
+const getCurrentHistoryState = (editorState: IEditorState): void => {
+  const customEvent = new CustomEvent<IHistoryState>(
+    'getCurrentHistoryState',
+    { detail: editorState.history[editorState.historyCurrentStep] });
+  document.dispatchEvent(customEvent);
+};
+
+export interface IEditorEvent {
+  name: string
+  func: (editorState: IEditorState) => void
+}
+
+const events: IEditorEvent[] = [
+  { name: 'getEditorState', func: getEditorState },
+  { name: 'getCurrentHistoryState', func: getCurrentHistoryState }
+];
+
+export default events;