Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Implement events
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
Eric NGUYEN 2022-08-12 11:31:22 +02:00
parent 715e2e2b2e
commit 781b5af1e8
2 changed files with 42 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/Components/Editor/Editor.tsx
View file

@ -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}