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

Implement events for external use + Rename interfaces with a I prefix + add some documentation (#26)
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source 
Implement events for external use
Rename interfaces with a I prefix
Add some documentation

Co-authored-by: Eric NGUYEN <enguyen@techform.fr>
Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/26
This commit is contained in:
Siklos 2022-08-12 06:36:14 -04:00
parent 6c601429b9
commit c81a6fe44b
38 changed files with 228 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,32 +1,29 @@
import React from 'react';
import React, { useRef } from 'react';
import './Editor.scss';
import { Configuration } from '../../Interfaces/Configuration';
import { IConfiguration } from '../../Interfaces/IConfiguration';
import { SVG } from '../SVG/SVG';
import { HistoryState } from '../../Interfaces/HistoryState';
import { IHistoryState } from '../../Interfaces/IHistoryState';
import { UI } from '../UI/UI';
import { SelectContainer, DeleteContainer, AddContainerToSelectedContainer, AddContainer } from './ContainerOperations';
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: Configuration
history: HistoryState[]
configuration: IConfiguration
history: IHistoryState[]
historyCurrentStep: number
}
export interface IEditorState {
history: HistoryState[]
historyCurrentStep: number
configuration: Configuration
}
export const getCurrentHistory = (history: HistoryState[], historyCurrentStep: number): HistoryState[] => history.slice(0, historyCurrentStep + 1);
export const getCurrentHistoryState = (history: HistoryState[], historyCurrentStep: number): HistoryState => history[historyCurrentStep];
export const getCurrentHistory = (history: IHistoryState[], historyCurrentStep: number): IHistoryState[] => history.slice(0, historyCurrentStep + 1);
export const getCurrentHistoryState = (history: IHistoryState[], historyCurrentStep: number): IHistoryState => history[historyCurrentStep];
const Editor: React.FunctionComponent<IEditorProps> = (props) => {
const [history, setHistory] = React.useState<HistoryState[]>(structuredClone(props.history));
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(
@ -38,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);
};
@ -46,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}