svg-layout-designer-react/src/Components/App/MenuActions.ts
Eric Nguyen 8b8d88f885 Merged PR 162: Implement symbols and other stuff (see desc)
Implement symbols
- Add, Remove, Select Container
- Form
- Link with container
- Symbol behavior application to container (move to x with xpositionreference)

Important changes
- Remove SelectedContainer from HistoryState, meaning that it will be slower for each load but will be faster for each operations* (SetHistory, SelectContainer, DeleteContainer, SymbolOperations)
- ElementsSidebar now opens with isSidebarOpen meaning that both sidebar will open on toggle
- Moved camelize, transformX, restoreX to different modules (stringtools.ts, svg.ts)
2022-08-22 13:58:32 +00:00

70 lines
2.2 KiB
TypeScript

import { Dispatch, SetStateAction } from 'react';
import { IConfiguration } from '../../Interfaces/IConfiguration';
import { ContainerModel } from '../../Interfaces/IContainerModel';
import { fetchConfiguration } from '../API/api';
import { IEditorState } from '../../Interfaces/IEditorState';
import { LoadState } from './Load';
import { DEFAULT_MAINCONTAINER_PROPS } from '../../utils/default';
export function NewEditor(
setEditorState: Dispatch<SetStateAction<IEditorState>>,
setLoaded: Dispatch<SetStateAction<boolean>>
): void {
// Fetch the configuration from the API
fetchConfiguration()
.then((configuration: IConfiguration) => {
// Set the main container from the given properties of the API
const MainContainer = new ContainerModel(
null,
{
...DEFAULT_MAINCONTAINER_PROPS,
width: Number(configuration.MainContainer.Width),
height: Number(configuration.MainContainer.Height)
}
);
// Save the configuration and the new MainContainer
// and default the selected container to it
// TODO: Put this in default.ts
const editorState: IEditorState = {
configuration,
history:
[
{
LastAction: '',
MainContainer,
SelectedContainerId: MainContainer.properties.id,
TypeCounters: {},
Symbols: new Map(),
SelectedSymbolId: ''
}
],
historyCurrentStep: 0
};
setEditorState(editorState);
setLoaded(true);
}, (error) => {
// TODO: Implement an alert component
console.warn('[NewEditor] Could not fetch resource from API. Using default.', error);
setLoaded(true);
});
}
export function LoadEditor(
files: FileList | null,
setEditorState: Dispatch<SetStateAction<IEditorState>>,
setLoaded: Dispatch<SetStateAction<boolean>>
): void {
if (files === null) {
return;
}
const file = files[0];
const reader = new FileReader();
reader.addEventListener('load', () => {
const result = reader.result as string;
const editorState: IEditorState = JSON.parse(result);
LoadState(editorState, setEditorState, setLoaded);
});
reader.readAsText(file);
}