svg-layout-designer-react/src/Components/App/MenuActions.ts

74 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';
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,
{
id: 'main',
parentId: 'null',
x: 0,
y: 0,
width: configuration.MainContainer.Width,
height: configuration.MainContainer.Height,
isRigidBody: false,
isAnchor: false,
fillOpacity: 0,
stroke: 'black'
}
);
// Save the configuration and the new MainContainer
// and default the selected container to it
const editorState: IEditorState = {
configuration,
history:
[
{
LastAction: '',
MainContainer,
SelectedContainer: MainContainer,
SelectedContainerId: MainContainer.properties.id,
TypeCounters: {}
}
],
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);
}