Merged PR 219: Refactor App and MainMenu so that App is the one handling the loading + refactor isLoaded into an enum

This commit is contained in:
Eric Nguyen 2022-11-04 12:56:29 +00:00
commit bab144d75a
11 changed files with 506 additions and 475 deletions

View file

@ -162,14 +162,14 @@
/**
* Hide the main menu to go to the application.
* SetEditor must be called first or the application will crash.
* @param isLoaded
* @param appState
* @param callback
*/
public SetLoaded(isLoaded: boolean, callback?: (state: IEditorState) => void) {
const eventType = 'setLoaded';
public SetAppState(appState: SVGLD.AppState, callback?: (state: IEditorState) => void) {
const eventType = 'setAppState';
this.app.AddEventListener(eventType, callback);
const component = this.GetAppComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: isLoaded }))
component.dispatchEvent(new CustomEvent(eventType, { detail: appState }))
}
/**

657
public/svgld.d.ts vendored
View file

@ -1,67 +1,106 @@
declare namespace SVGLD {
/**
* Add method when creating a container
* - Append will append to the last children in list
* - Insert will always place it at the begining
* - Replace will remove the selected container and insert a new one
* (default: Append)
*/
export enum AddMethod {
Append = 0,
Insert = 1,
Replace = 2,
ReplaceParent = 3
export interface IMargin {
left?: number;
bottom?: number;
top?: number;
right?: number;
}
export enum MessageType {
Normal = 0,
Success = 1,
Warning = 2,
Error = 3
export interface IPoint {
x: number;
y: number;
}
export enum Orientation {
Horizontal = 0,
Vertical = 1
}
export enum Position {
Left = 0,
Down = 1,
Up = 2,
Right = 3
}
export enum PositionReference {
TopLeft = 0,
TopCenter = 1,
TopRight = 2,
CenterLeft = 3,
CenterCenter = 4,
CenterRight = 5,
BottomLeft = 6,
BottomCenter = 7,
BottomRight = 8
}
/**
* Describe the type of the property.
* Used for the assignation in the OnPropertyChange function
* See ContainerOperations.ts's OnPropertyChange
*/
export enum PropertyType {
* Model of available symbol to configure the application */
export interface IAvailableSymbol {
Name: string;
Image: IImage;
Width?: number;
Height?: number;
PositionReference?: PositionReference;
}
export interface IAPIConfiguration {
apiFetchUrl?: string;
apiSetContainerListUrl?: string;
apiGetFeedbackUrl?: string;
}
export interface ISymbolModel {
/** Identifier */
id: string;
/** Type */
type: string;
/** Configuration of the symbol */
config: IAvailableSymbol;
/** Horizontal offset */
x: number;
/** Width */
width: number;
/** Height */
height: number;
/** List of linked container id */
linkedContainers: Set<string>;
}
export interface IPattern {
/**
* Simple property: is not inside any object: id, x, width... (default)
* Unique id for the pattern
*/
Simple = 0,
id: string;
/**
* Style property: is inside the style object: stroke, fillOpacity...
* Text to display in the sidebar
*/
Style = 1,
text: string;
/**
* Margin property: is inside the margin property: left, bottom, top, right...
* IAvailableContainer id used to wrap the children.
*/
Margin = 2
wrapper: string;
/**
* List of ids of Pattern or IAvailableContainer
* If a IAvailableContainer and a Pattern have the same id,
* IAvailableContainer will be prioritized
*/
children: string[];
}
export type ContainerOrPattern = IAvailableContainer | IPattern;
export function GetPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): ContainerOrPattern | undefined;
export function IsPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): boolean;
export interface IHistoryState {
/** Last editor action */
lastAction: string;
/** Reference to the main container */
mainContainer: string;
containers: Map<string, IContainerModel>;
/** Id of the selected container */
selectedContainerId: string;
/** Counter of type of container. Used for ids. */
typeCounters: Record<string, number>;
/** List of symbols */
symbols: Map<string, ISymbolModel>;
/** Selected symbols id */
selectedSymbolId: string;
}
export interface IGetFeedbackRequest {
/** Current application state */
ApplicationState: IHistoryState;
}
export interface IInputGroup {
key: string;
text: React.ReactNode;
value: string;
}
@ -75,13 +114,176 @@ export interface IAction {
AddingBehavior: AddMethod;
}
export interface IAPIConfiguration {
apiFetchUrl?: string;
apiSetContainerListUrl?: string;
apiGetFeedbackUrl?: string;
export interface ISetContainerListResponse {
Containers: IAvailableContainer[];
AddingBehavior?: AddMethod;
}
export interface IContainerModel {
children: string[];
properties: IContainerProperties;
userData: Record<string, string | number>;
}
/**
* Macro for creating the interface
* Do not add methods since they will be lost during serialization
*/
export class ContainerModel implements IContainerModel {
children: string[];
properties: IContainerProperties;
userData: Record<string, string | number>;
constructor(properties: IContainerProperties, children?: string[], userData?: {});
}
/**
* A SizePointer is a pointer in a 1 dimensional array of width/space
* x being the address where the pointer is pointing
* width being the overall (un)allocated space affected to the address
*/
export interface ISizePointer {
x: number;
width: number;
}
export interface IGetFeedbackResponse {
messages: IMessage[];
}
/** Model of configuration for the application to configure it */
export interface IConfiguration {
AvailableContainers: IAvailableContainer[];
AvailableSymbols: IAvailableSymbol[];
Categories: ICategory[];
Patterns: IPattern[];
MainContainer: IAvailableContainer;
APIConfiguration?: IAPIConfiguration;
}
export interface ISetContainerListRequest {
/** Name of the action declared in the API */
Action: IAction;
/** Selected container */
Container: IContainerModel;
/** The previous sibling container */
PreviousContainer: IContainerModel | undefined;
/** The next sibling container */
NextContainer: IContainerModel | undefined;
/** Current application state */
ApplicationState: IHistoryState;
}
/**
* Properties of a container
*/
export interface IContainerProperties {
/** id of the container */
id: string;
/** type matching the configuration on construction */
type: string;
/** id of the parent container (null when there is no parent) */
parentId: string;
/** id of the linked symbol ('' when there is no parent) */
linkedSymbolId: string;
/** Text displayed in the container */
displayedText: string;
/** orientation */
orientation: Orientation;
/** horizontal offset */
x: number;
/** vertical offset */
y: number;
/** margin */
margin: IMargin;
/** width */
width: number;
/** height */
height: number;
/**
* Minimum width (min=1)
*/
minWidth: number;
/**
* Maximum width
*/
maxWidth: number;
/**
* Minimum height (min=1)
*/
minHeight: number;
/**
* Maximum height
*/
maxHeight: number;
/** true if anchor, false otherwise */
isAnchor: boolean;
/** true if flex, false otherwise */
isFlex: boolean;
/** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
positionReference: PositionReference;
/** Hide the children in the treeview */
hideChildrenInTreeview: boolean;
/** if true, show the dimension of the container */
showSelfDimensions: Position[];
/** if true show the overall dimensions of its children */
showChildrenDimensions: Position[];
/**
* if true, allows a parent dimension borrower to borrow its x coordinate
* as a reference point for a dimension
*/
markPosition: Orientation[];
/**
* if true, show a dimension from the edge of the container to end
* and insert dimensions marks at lift up children (see liftDimensionToBorrower)
*/
showDimensionWithMarks: Position[];
/**
* Warnings of a container
*/
warning: string;
/**
* (optional)
* Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows
* to draw some patterns that can be bind to the properties of the container
* Use {prop} to bind a property. Use {{ styleProp }} to use an object.
* Example :
* ```
* `<rect width="{width}" height="{height}" style="{style}"></rect>
* <rect width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
* <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
* <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
* `
* ```
*/
customSVG?: string;
/**
* (optional)
* Style of the <rect>
*/
style?: React.CSSProperties;
/**
* (optional)
* User data that can be used for data storage or custom SVG
*/
userData?: object;
}
@ -213,157 +415,13 @@ export interface IAvailableContainer {
* (optional)
* User data that can be used for data storage or custom SVG
*/
UserData?: IKeyValue[];
UserData?: object;
}
/**
* Model of available symbol to configure the application */
export interface IAvailableSymbol {
Name: string;
Image: IImage;
Width?: number;
Height?: number;
PositionReference?: PositionReference;
}
export interface ICategory {
Type: string;
DisplayedText?: string;
}
/** Model of configuration for the application to configure it */
export interface IConfiguration {
AvailableContainers: IAvailableContainer[];
AvailableSymbols: IAvailableSymbol[];
Categories: ICategory[];
Patterns: IPattern[];
MainContainer: IAvailableContainer;
APIConfiguration?: IAPIConfiguration;
}
export interface IContainerModel {
children: string[];
properties: IContainerProperties;
userData: Record<string, string | number>;
}
/**
* Macro for creating the interface
* Do not add methods since they will be lost during serialization
*/
export class ContainerModel implements IContainerModel {
children: string[];
properties: IContainerProperties;
userData: Record<string, string | number>;
constructor(properties: IContainerProperties, children?: string[], userData?: {});
}
/**
* Properties of a container
*/
export interface IContainerProperties {
/** id of the container */
id: string;
/** type matching the configuration on construction */
type: string;
/** id of the parent container (null when there is no parent) */
parentId: string;
/** id of the linked symbol ('' when there is no parent) */
linkedSymbolId: string;
/** Text displayed in the container */
displayedText: string;
/** orientation */
orientation: Orientation;
/** horizontal offset */
x: number;
/** vertical offset */
y: number;
/** margin */
margin: IMargin;
/** width */
width: number;
/** height */
height: number;
/**
* Minimum width (min=1)
*/
minWidth: number;
/**
* Maximum width
*/
maxWidth: number;
/**
* Minimum height (min=1)
*/
minHeight: number;
/**
* Maximum height
*/
maxHeight: number;
/** true if anchor, false otherwise */
isAnchor: boolean;
/** true if flex, false otherwise */
isFlex: boolean;
/** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
positionReference: PositionReference;
/** Hide the children in the treeview */
hideChildrenInTreeview: boolean;
/** if true, show the dimension of the container */
showSelfDimensions: Position[];
/** if true show the overall dimensions of its children */
showChildrenDimensions: Position[];
/**
* if true, allows a parent dimension borrower to borrow its x coordinate
* as a reference point for a dimension
*/
markPosition: Orientation[];
/**
* if true, show a dimension from the edge of the container to end
* and insert dimensions marks at lift up children (see liftDimensionToBorrower)
*/
showDimensionWithMarks: Position[];
/**
* Warnings of a container
*/
warning: string;
/**
* (optional)
* Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows
* to draw some patterns that can be bind to the properties of the container
* Use {prop} to bind a property. Use {{ styleProp }} to use an object.
* Example :
* ```
* `<rect width="{width}" height="{height}" style="{style}"></rect>
* <rect width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
* <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
* <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
* `
* ```
*/
customSVG?: string;
/**
* (optional)
* Style of the <rect>
*/
style?: React.CSSProperties;
/**
* (optional)
* User data that can be used for data storage or custom SVG
*/
userData?: IKeyValue[];
export interface IMessage {
text: string;
type: MessageType;
}
@ -374,33 +432,9 @@ export interface IEditorState {
configuration: IConfiguration;
}
export interface IGetFeedbackRequest {
/** Current application state */
ApplicationState: IHistoryState;
}
export interface IGetFeedbackResponse {
messages: IMessage[];
}
export interface IHistoryState {
/** Last editor action */
lastAction: string;
/** Reference to the main container */
mainContainer: string;
containers: Map<string, IContainerModel>;
/** Id of the selected container */
selectedContainerId: string;
/** Counter of type of container. Used for ids. */
typeCounters: Record<string, number>;
/** List of symbols */
symbols: Map<string, ISymbolModel>;
/** Selected symbols id */
selectedSymbolId: string;
export interface ICategory {
Type: string;
DisplayedText?: string;
}
/**
@ -421,116 +455,75 @@ export interface IImage {
Svg?: string;
}
export interface IInputGroup {
key: string;
text: React.ReactNode;
value: string;
}
export interface IKeyValue {
Key: string;
Value: string;
}
export interface ILanguage {
language: string;
dictionary: Record<string, string>;
languageChange?: (selected: string) => void;
}
export interface IMargin {
left?: number;
bottom?: number;
top?: number;
right?: number;
}
export interface IMessage {
text: string;
type: MessageType;
}
export interface IPattern {
/**
* Unique id for the pattern
*/
id: string;
/**
* Text to display in the sidebar
*/
text: string;
/**
* IAvailableContainer id used to wrap the children.
*/
wrapper: string;
/**
* List of ids of Pattern or IAvailableContainer
* If a IAvailableContainer and a Pattern have the same id,
* IAvailableContainer will be prioritized
*/
children: string[];
}
export type ContainerOrPattern = IAvailableContainer | IPattern;
export function GetPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): ContainerOrPattern | undefined;
export function IsPattern(id: string, configs: Map<string, IAvailableContainer>, patterns: Map<string, IPattern>): boolean;
export interface IPoint {
x: number;
y: number;
}
export interface ISetContainerListRequest {
/** Name of the action declared in the API */
Action: IAction;
/** Selected container */
Container: IContainerModel;
/** The previous sibling container */
PreviousContainer: IContainerModel | undefined;
/** The next sibling container */
NextContainer: IContainerModel | undefined;
/** Current application state */
ApplicationState: IHistoryState;
}
export interface ISetContainerListResponse {
Containers: IAvailableContainer[];
AddingBehavior?: AddMethod;
export enum MessageType {
Normal = 0,
Success = 1,
Warning = 2,
Error = 3
}
/**
* A SizePointer is a pointer in a 1 dimensional array of width/space
* x being the address where the pointer is pointing
* width being the overall (un)allocated space affected to the address
* Add method when creating a container
* - Append will append to the last children in list
* - Insert will always place it at the begining
* - Replace will remove the selected container and insert a new one
* (default: Append)
*/
export interface ISizePointer {
x: number;
width: number;
export enum AddMethod {
Append = 0,
Insert = 1,
Replace = 2,
ReplaceParent = 3
}
/**
* Describe the type of the property.
* Used for the assignation in the OnPropertyChange function
* See ContainerOperations.ts's OnPropertyChange
*/
export enum PropertyType {
/**
* Simple property: is not inside any object: id, x, width... (default)
*/
Simple = 0,
/**
* Style property: is inside the style object: stroke, fillOpacity...
*/
Style = 1,
/**
* Margin property: is inside the margin property: left, bottom, top, right...
*/
Margin = 2
}
export interface ISymbolModel {
/** Identifier */
id: string;
/** Type */
type: string;
/** Configuration of the symbol */
config: IAvailableSymbol;
/** Horizontal offset */
x: number;
/** Width */
width: number;
/** Height */
height: number;
/** List of linked container id */
linkedContainers: Set<string>;
export enum PositionReference {
TopLeft = 0,
TopCenter = 1,
TopRight = 2,
CenterLeft = 3,
CenterCenter = 4,
CenterRight = 5,
BottomLeft = 6,
BottomCenter = 7,
BottomRight = 8
}
export enum AppState {
MainMenu = 0,
Loading = 1,
Loaded = 2
}
export enum Orientation {
Horizontal = 0,
Vertical = 1
}
export enum Position {
Left = 0,
Down = 1,
Up = 2,
Right = 3
}
}

View file

@ -1,13 +1,14 @@
import { Dispatch, SetStateAction } from 'react';
import { AppState } from '../../../Enums/AppState';
import { IEditorState } from '../../../Interfaces/IEditorState';
import { Revive } from '../../../utils/saveload';
export function LoadState(
editorState: IEditorState,
setEditorState: Dispatch<SetStateAction<IEditorState>>,
setLoaded: Dispatch<SetStateAction<boolean>>
setAppState: Dispatch<SetStateAction<AppState>>
): void {
Revive(editorState);
setEditorState(editorState);
setLoaded(true);
setAppState(AppState.Loaded);
}

View file

@ -1,9 +1,10 @@
import { Dispatch, SetStateAction, useEffect } from 'react';
import { Dispatch, SetStateAction } from 'react';
import { IConfiguration } from '../../../Interfaces/IConfiguration';
import { FetchConfiguration } from '../../API/api';
import { IEditorState } from '../../../Interfaces/IEditorState';
import { LoadState } from './Load';
import { DISABLE_API, GetDefaultEditorState } from '../../../utils/default';
import { AppState } from '../../../Enums/AppState';
export function NewEditor(
editorState: IEditorState,
@ -36,7 +37,7 @@ export function NewEditor(
export function LoadEditor(
files: FileList | null,
setEditorState: Dispatch<SetStateAction<IEditorState>>,
setLoaded: Dispatch<SetStateAction<boolean>>
setAppState: Dispatch<SetStateAction<AppState>>
): void {
if (files === null) {
return;
@ -47,7 +48,7 @@ export function LoadEditor(
const result = reader.result as string;
const editorState: IEditorState = JSON.parse(result);
LoadState(editorState, setEditorState, setLoaded);
LoadState(editorState, setEditorState, setAppState);
});
reader.readAsText(file);
}

View file

@ -6,7 +6,9 @@ import { Editor } from '../Editor/Editor';
import { IEditorState } from '../../Interfaces/IEditorState';
import { LoadState } from './Actions/Load';
import { LoadEditor, NewEditor } from './Actions/MenuActions';
import { DEFAULT_CONFIG, DEFAULT_MAINCONTAINER_PROPS } from '../../utils/default';
import { DEFAULT_CONFIG, DEFAULT_MAINCONTAINER_PROPS, FAST_BOOT } from '../../utils/default';
import { AppState } from '../../Enums/AppState';
import { Loader } from '../Loader/Loader';
import { LanguageContext } from '../LanguageProvider/LanguageProvider';
// App will never have props
@ -16,9 +18,9 @@ interface IAppProps {
}
function UseHTTPGETStatePreloading(
isLoaded: boolean,
appState: AppState,
setEditorState: Dispatch<SetStateAction<IEditorState>>,
setLoaded: Dispatch<SetStateAction<boolean>>
setAppState: Dispatch<SetStateAction<AppState>>
): void {
useEffect(() => {
const queryString = window.location.search;
@ -29,21 +31,21 @@ function UseHTTPGETStatePreloading(
return;
}
if (!isLoaded) {
if (appState !== AppState.Loaded) {
fetch(state)
.then(
async(response) => await response.json(),
(error) => { throw new Error(error); }
)
.then((data: IEditorState) => {
LoadState(data, setEditorState, setLoaded);
LoadState(data, setEditorState, setAppState);
}, (error) => { throw new Error(error); });
}
});
};
export function App(props: IAppProps): JSX.Element {
const [isLoaded, setLoaded] = useState<boolean>(false);
const [appState, setAppState] = useState<AppState>(FAST_BOOT);
const appRef = useRef<HTMLDivElement>(null);
const languageContext = useContext(LanguageContext);
@ -72,48 +74,59 @@ export function App(props: IAppProps): JSX.Element {
appRef,
languageContext,
setEditorState,
setLoaded
setAppState
);
UseHTTPGETStatePreloading(isLoaded, setEditorState, setLoaded);
UseHTTPGETStatePreloading(appState, setEditorState, setAppState);
const enableLoaded = useCallback(() => {
setLoaded(true);
}, []);
if (isLoaded) {
return (
<div
ref={appRef}
className='App'
>
<Editor
root={props.root}
configuration={editorState.configuration}
history={editorState.history}
historyCurrentStep={editorState.historyCurrentStep}
/>
</div>
);
switch (appState) {
case AppState.Loaded:
return (
<div
ref={appRef}
className='App'
>
<Editor
root={props.root}
configuration={editorState.configuration}
history={editorState.history}
historyCurrentStep={editorState.historyCurrentStep}
/>
</div>
);
case AppState.Loading:
return (
<div
ref={appRef}
className='App mainmenu-bg'
>
<div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
<Loader />
</div>
</div>
);
default:
return (
<div
ref={appRef}
className='App mainmenu-bg'
>
<MainMenu
newEditor={() => {
setAppState(AppState.Loading);
NewEditor(
editorState,
(newEditor) => setEditorState(newEditor),
() => setAppState(AppState.Loaded)
);
}}
loadEditor={(files: FileList | null) => LoadEditor(
files,
setEditorState,
setAppState
)}
/>
</div>
);
}
return (
<div
ref={appRef}
className='App mainmenu-bg'
>
<MainMenu
newEditor={() => NewEditor(
editorState,
(newEditor) => setEditorState(newEditor),
enableLoaded
)}
loadEditor={(files: FileList | null) => LoadEditor(
files,
setEditorState,
setLoaded
)}
/>
</div>
);
};

View file

@ -1,6 +1,4 @@
import * as React from 'react';
import { FAST_BOOT } from '../../utils/default';
import { Loader } from '../Loader/Loader';
import { Text } from '../Text/Text';
interface IMainMenuProps {
@ -11,21 +9,11 @@ interface IMainMenuProps {
enum WindowState {
Main,
Load,
Loading,
}
export function MainMenu(props: IMainMenuProps): JSX.Element {
const [windowState, setWindowState] = React.useState(WindowState.Main);
if (FAST_BOOT) {
props.newEditor();
return (
<div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
<Loader />
</div>
);
}
switch (windowState) {
case WindowState.Load:
return (
@ -66,12 +54,6 @@ export function MainMenu(props: IMainMenuProps): JSX.Element {
</div>
);
case WindowState.Loading:
return (
<div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
<Loader />
</div>
);
default:
return (
<div className='absolute bg-blue-50 p-12
@ -81,7 +63,6 @@ export function MainMenu(props: IMainMenuProps): JSX.Element {
w-full sm:w-auto
sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2'>
<button type="button" className='mainmenu-btn' onClick={() => {
setWindowState(WindowState.Loading);
props.newEditor();
}}>
{Text({ textId: '@StartFromScratch' })}

5
src/Enums/AppState.ts Normal file
View file

@ -0,0 +1,5 @@
export enum AppState {
MainMenu,
Loading,
Loaded
}

View file

@ -1,4 +1,5 @@
import { useEffect } from 'react';
import { AppState } from '../Enums/AppState';
import { IConfiguration } from '../Interfaces/IConfiguration';
import { IEditorState } from '../Interfaces/IEditorState';
import { IHistoryState } from '../Interfaces/IHistoryState';
@ -11,7 +12,7 @@ interface IAppEventParams {
root: Element | Document
languageContext: ILanguage
setEditor: (newState: IEditorState) => void
setLoaded: (loaded: boolean) => void
setAppState: (appState: AppState) => void
eventInitDict?: CustomEventInit
}
@ -22,7 +23,7 @@ export interface IAppEvent {
export const events: IAppEvent[] = [
{ name: 'setEditor', func: SetEditor },
{ name: 'setLoaded', func: SetLoaded },
{ name: 'setAppState', func: SetAppState },
{ name: 'reviveEditorState', func: ReviveEditorState },
{ name: 'reviveHistory', func: ReviveHistory },
{ name: 'getDefaultEditorState', func: GetDefaultEditorState },
@ -36,7 +37,7 @@ export function UseCustomEvents(
appRef: React.RefObject<HTMLDivElement>,
languageContext: ILanguage,
setEditor: (newState: IEditorState) => void,
setLoaded: (loaded: boolean) => void
setAppState: (appState: AppState) => void
): void {
useEffect(() => {
const funcs = new Map<string, () => void>();
@ -46,7 +47,7 @@ export function UseCustomEvents(
root,
languageContext,
setEditor,
setLoaded,
setAppState,
eventInitDict
});
}
@ -68,20 +69,22 @@ export function UseCustomEvents(
function SetEditor({
root,
setEditor,
setAppState,
eventInitDict
}: IAppEventParams): void {
const editor: IEditorState = eventInitDict?.detail;
setEditor(editor);
setAppState(AppState.Loading);
const customEvent = new CustomEvent<IEditorState>('setEditor', { detail: editor });
root.dispatchEvent(customEvent);
}
function SetLoaded({
setLoaded,
function SetAppState({
setAppState,
eventInitDict
}: IAppEventParams): void {
const isLoaded: boolean = eventInitDict?.detail;
setLoaded(isLoaded);
const appState: AppState = eventInitDict?.detail;
setAppState(appState);
}
function ReviveEditorState({

View file

@ -9,15 +9,15 @@ import { IHistoryState } from '../Interfaces/IHistoryState';
import { FindContainerById } from '../utils/itertools';
import { GetCircularReplacer } from '../utils/saveload';
// TODO: set the params of func in an interface
interface IEditorEventParams {
root: Element | Document
editorState: IEditorState
setNewHistory: (newHistory: IHistoryState[], historyCurrentStep?: number) => void
eventInitDict?: CustomEventInit
}
export interface IEditorEvent {
name: string
func: (
root: Element | Document,
editorState: IEditorState,
setNewHistory: (newHistory: IHistoryState[], historyCurrentStep?: number) => void,
eventInitDict?: CustomEventInit
) => void
func: (params: IEditorEventParams) => void
}
export const events: IEditorEvent[] = [
@ -55,12 +55,12 @@ export function UseCustomEvents(
const funcs = new Map<string, () => void>();
for (const event of events) {
function Func(eventInitDict?: CustomEventInit): void {
return event.func(
return event.func({
root,
editorState,
setNewHistory,
eventInitDict
);
});
}
editorRef.current?.addEventListener(event.name, Func);
funcs.set(event.name, Func);
@ -94,24 +94,30 @@ export function UseEditorListener(
});
}
function GetEditorState(root: Element | Document,
editorState: IEditorState): void {
function GetEditorState({
root,
editorState
}: IEditorEventParams): void {
const customEvent = new CustomEvent<IEditorState>('getEditorState', { detail: structuredClone(editorState) });
root.dispatchEvent(customEvent);
}
function GetEditorStateAsString(root: Element | Document,
editorState: IEditorState): void {
function GetEditorStateAsString({
root,
editorState
}: IEditorEventParams): void {
const spaces = import.meta.env.DEV ? 4 : 0;
const data = JSON.stringify(editorState, GetCircularReplacer(), spaces);
const customEvent = new CustomEvent<string>('getEditorStateAsString', { detail: data });
root.dispatchEvent(customEvent);
}
function SetHistory(root: Element | Document,
editorState: IEditorState,
setNewHistory: (newHistory: IHistoryState[], historyCurrentStep?: number) => void,
eventInitDict?: CustomEventInit): void {
function SetHistory({
root,
editorState,
setNewHistory,
eventInitDict
}: IEditorEventParams): void {
const history: IHistoryState[] = eventInitDict?.detail.history;
const historyCurrentStep: number | undefined = eventInitDict?.detail.historyCurrentStep;
setNewHistory(history, historyCurrentStep);
@ -119,18 +125,22 @@ function SetHistory(root: Element | Document,
root.dispatchEvent(customEvent);
}
function GetCurrentHistoryState(root: Element | Document,
editorState: IEditorState): void {
function GetCurrentHistoryState({
root,
editorState
}: IEditorEventParams): void {
const customEvent = new CustomEvent<IHistoryState>(
'getCurrentHistoryState',
{ detail: structuredClone(editorState.history[editorState.historyCurrentStep]) });
root.dispatchEvent(customEvent);
}
function AppendNewState(root: Element | Document,
editorState: IEditorState,
setNewHistory: (newHistory: IHistoryState[]) => void,
eventInitDict?: CustomEventInit): void {
function AppendNewState({
root,
editorState,
setNewHistory,
eventInitDict
}: IEditorEventParams): void {
const state: IHistoryState = eventInitDict?.detail.state;
const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
@ -143,10 +153,12 @@ function AppendNewState(root: Element | Document,
root.dispatchEvent(customEvent);
}
function AddContainer(root: Element | Document,
editorState: IEditorState,
setNewHistory: (newHistory: IHistoryState[]) => void,
eventInitDict?: CustomEventInit): void {
function AddContainer({
root,
editorState,
setNewHistory,
eventInitDict
}: IEditorEventParams): void {
const {
index,
type,
@ -170,10 +182,12 @@ function AddContainer(root: Element | Document,
root.dispatchEvent(customEvent);
}
function AddContainerToSelectedContainer(root: Element | Document,
editorState: IEditorState,
setNewHistory: (newHistory: IHistoryState[]) => void,
eventInitDict?: CustomEventInit): void {
function AddContainerToSelectedContainer({
root,
editorState,
setNewHistory,
eventInitDict
}: IEditorEventParams): void {
const {
index,
type
@ -198,10 +212,12 @@ function AddContainerToSelectedContainer(root: Element | Document,
root.dispatchEvent(customEvent);
}
function AppendContainer(root: Element | Document,
editorState: IEditorState,
setNewHistory: (newHistory: IHistoryState[]) => void,
eventInitDict?: CustomEventInit): void {
function AppendContainer({
root,
editorState,
setNewHistory,
eventInitDict
}: IEditorEventParams): void {
const {
type,
parentId
@ -228,10 +244,12 @@ function AppendContainer(root: Element | Document,
root.dispatchEvent(customEvent);
}
function AppendContainerToSelectedContainer(root: Element | Document,
editorState: IEditorState,
setNewHistory: (newHistory: IHistoryState[]) => void,
eventInitDict?: CustomEventInit): void {
function AppendContainerToSelectedContainer({
root,
editorState,
setNewHistory,
eventInitDict
}: IEditorEventParams): void {
const {
type
} = eventInitDict?.detail;
@ -257,10 +275,12 @@ function AppendContainerToSelectedContainer(root: Element | Document,
root.dispatchEvent(customEvent);
}
function SelectContainer(root: Element | Document,
editorState: IEditorState,
setNewHistory: (newHistory: IHistoryState[]) => void,
eventInitDict?: CustomEventInit): void {
function SelectContainer({
root,
editorState,
setNewHistory,
eventInitDict
}: IEditorEventParams): void {
const {
containerId
} = eventInitDict?.detail;
@ -280,10 +300,12 @@ function SelectContainer(root: Element | Document,
root.dispatchEvent(customEvent);
}
function DeleteContainer(root: Element | Document,
editorState: IEditorState,
setNewHistory: (newHistory: IHistoryState[]) => void,
eventInitDict?: CustomEventInit): void {
function DeleteContainer({
root,
editorState,
setNewHistory,
eventInitDict
}: IEditorEventParams): void {
const {
containerId
} = eventInitDict?.detail;
@ -303,10 +325,12 @@ function DeleteContainer(root: Element | Document,
root.dispatchEvent(customEvent);
}
function AddSymbol(root: Element | Document,
editorState: IEditorState,
setNewHistory: (newHistory: IHistoryState[]) => void,
eventInitDict?: CustomEventInit): void {
function AddSymbol({
root,
editorState,
setNewHistory,
eventInitDict
}: IEditorEventParams): void {
const {
name
} = eventInitDict?.detail;
@ -327,10 +351,12 @@ function AddSymbol(root: Element | Document,
root.dispatchEvent(customEvent);
}
function SelectSymbol(root: Element | Document,
editorState: IEditorState,
setNewHistory: (newHistory: IHistoryState[]) => void,
eventInitDict?: CustomEventInit): void {
function SelectSymbol({
root,
editorState,
setNewHistory,
eventInitDict
}: IEditorEventParams): void {
const {
symbolId
} = eventInitDict?.detail;
@ -350,10 +376,12 @@ function SelectSymbol(root: Element | Document,
root.dispatchEvent(customEvent);
}
function DeleteSymbol(root: Element | Document,
editorState: IEditorState,
setNewHistory: (newHistory: IHistoryState[]) => void,
eventInitDict?: CustomEventInit): void {
function DeleteSymbol({
root,
editorState,
setNewHistory,
eventInitDict
}: IEditorEventParams): void {
const {
symbolId
} = eventInitDict?.detail;

6
src/dts/svgld.d.ts vendored
View file

@ -13,6 +13,12 @@ export enum AddMethod {
ReplaceParent = 3
}
export enum AppState {
MainMenu = 0,
Loading = 1,
Loaded = 2
}
export enum MessageType {
Normal = 0,
Success = 1,

View file

@ -11,8 +11,8 @@ import { Position } from '../Enums/Position';
/// EDITOR DEFAULTS ///
/** Enable fast boot and disable main menu (default = false) */
export const FAST_BOOT = true;
/** Enable fast boot and disable main menu (0 = disabled, 1 = loading, 2 = loaded) */
export const FAST_BOOT = import.meta.env.PROD ? 2 : 0;
/** Disable any call to the API (default = false) */
export const DISABLE_API = false;