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)
70 lines
2.2 KiB
TypeScript
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);
|
|
}
|