From eaf03824fb30b1298903a055653b7536edf68888 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Tue, 18 Oct 2022 16:51:44 +0200 Subject: [PATCH] Move MainMenu Loading to App + Change is/setLoaded to appState/setAppState --- public/smartcomponent/svg-layout-designer.ts | 8 +- public/svgld.d.ts | 1054 +++++++++--------- src/Components/App/Actions/Load.ts | 5 +- src/Components/App/Actions/MenuActions.ts | 7 +- src/Components/App/App.tsx | 103 +- src/Components/MainMenu/MainMenu.tsx | 19 - src/Enums/AppState.ts | 5 + src/Events/AppEvents.ts | 26 +- src/dts/svgld.d.ts | 1054 +++++++++--------- src/utils/default.ts | 6 +- 10 files changed, 1149 insertions(+), 1138 deletions(-) create mode 100644 src/Enums/AppState.ts diff --git a/public/smartcomponent/svg-layout-designer.ts b/public/smartcomponent/svg-layout-designer.ts index c6ccf8b..99e9473 100644 --- a/public/smartcomponent/svg-layout-designer.ts +++ b/public/smartcomponent/svg-layout-designer.ts @@ -161,14 +161,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 })) } /** diff --git a/public/svgld.d.ts b/public/svgld.d.ts index 49a0de3..e8854c5 100644 --- a/public/svgld.d.ts +++ b/public/svgld.d.ts @@ -1,525 +1,529 @@ -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 enum MessageType { - Normal = 0, - Success = 1, - Warning = 2, - Error = 3 -} - -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 { - /** - * 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 IAction { - Id: string; - CustomLogo: IImage; - Label: string; - Description: string; - Action: string; - AddingBehavior: AddMethod; -} - -export interface IAPIConfiguration { - apiFetchUrl?: string; - apiSetContainerListUrl?: string; - apiGetFeedbackUrl?: string; -} - - - - - - - - -/** Model of available container used in application configuration */ -export interface IAvailableContainer { - /** type */ - Type: string; - /** displayed text */ - DisplayedText?: string; - /** category */ - Category?: string; - /** orientation */ - Orientation?: Orientation; - /** horizontal offset */ - X?: number; - /** vertical offset */ - Y?: number; - /** 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; - /** margin */ - Margin?: IMargin; - /** true if anchor, false otherwise */ - IsAnchor?: boolean; - /** true if flex, false otherwise */ - IsFlex?: boolean; - /** Method used on container add */ - AddMethod?: AddMethod; - /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */ - PositionReference?: PositionReference; - /** - * (optional) - * Replace a 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 : - * ``` - * ` - * - * - * - * ` - * ``` - */ - CustomSVG?: string; - /** - * (optional) - * Disabled when Pattern is used. - * - * Replace a 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 : - * ``` - * ` - * - * - * - * ` - * ``` - */ - DefaultChildType?: string; - /** - * Allow to use a Pattern to create the list of children - * Cannot be used with DefaultChildType, - * DefaultChildType will be disabled for this container and the children - */ - Pattern?: string; - /** 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 uses its x coordinate for 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 MarkPosition) - */ - ShowDimensionWithMarks?: Position[]; - /** - * if true, hide the entry in the sidebar (default: false) - */ - IsHidden?: boolean; - /** - * Disable a list of available container to be added inside - */ - Blacklist?: string[]; - /** - * Cannot be used with blacklist. Whitelist will be prioritized. - * To disable the whitelist, Whitelist must be undefined. - * Only allow a set of available container to be added inside - */ - Whitelist?: string[]; - /** - * (optional) - * Style of the - */ - Style?: React.CSSProperties; - /** - * List of possible actions shown on right-click - */ - Actions?: IAction[]; - /** - * (optional) - * User data that can be used for data storage or custom SVG - */ - 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[]; - parent: IContainerModel | null; - properties: IContainerProperties; - userData: Record; -} -/** - * Macro for creating the interface - * Do not add methods since they will be lost during serialization - */ -export class ContainerModel implements IContainerModel { - children: string[]; - parent: IContainerModel | null; - properties: IContainerProperties; - userData: Record; - constructor(parent: IContainerModel | null, 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 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 : - * ``` - * ` - * - * - * - * ` - * ``` - */ - customSVG?: string; - /** - * (optional) - * Style of the - */ - style?: React.CSSProperties; - /** - * (optional) - * User data that can be used for data storage or custom SVG - */ - userData?: object; -} - - - -export interface IEditorState { - history: IHistoryState[]; - historyCurrentStep: number; - 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; - /** Id of the selected container */ - selectedContainerId: string; - /** Counter of type of container. Used for ids. */ - typeCounters: Record; - /** List of symbols */ - symbols: Map; - /** Selected symbols id */ - selectedSymbolId: string; -} - -/** - * Model of an image with multiple source - * It must at least have one source. - * - * If Url/Base64Image and Svg are set, - * Url/Base64Image will be shown in the menu while SVG will be drawn - */ -export interface IImage { - /** Name of the image */ - Name: string; - /** (optional) Url of the image */ - Url?: string; - /** (optional) base64 data of the image */ - Base64Image?: string; - /** (optional) SVG string */ - Svg?: string; -} - - -export interface IInputGroup { - key: string; - text: React.ReactNode; - value: string; -} - -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, patterns: Map): ContainerOrPattern | undefined; -export function IsPattern(id: string, configs: Map, patterns: Map): 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; -} - -/** - * 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 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; -} - -} +declare namespace SVGLD { +export interface IMargin { + left?: number; + bottom?: number; + top?: number; + right?: number; +} + +export interface IPoint { + x: number; + y: number; +} + + + +/** + * 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; +} + + +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, patterns: Map): ContainerOrPattern | undefined; +export function IsPattern(id: string, configs: Map, patterns: Map): boolean; + + + +export interface IHistoryState { + /** Last editor action */ + lastAction: string; + /** Reference to the main container */ + mainContainer: string; + containers: Map; + /** Id of the selected container */ + selectedContainerId: string; + /** Counter of type of container. Used for ids. */ + typeCounters: Record; + /** List of symbols */ + symbols: Map; + /** Selected symbols id */ + selectedSymbolId: string; +} + + +export interface IGetFeedbackRequest { + /** Current application state */ + ApplicationState: IHistoryState; +} + + +export interface IInputGroup { + key: string; + text: React.ReactNode; + value: string; +} + + + +export interface IAction { + Id: string; + CustomLogo: IImage; + Label: string; + Description: string; + Action: string; + AddingBehavior: AddMethod; +} + + + +export interface ISetContainerListResponse { + Containers: IAvailableContainer[]; + AddingBehavior?: AddMethod; +} + + +export interface IContainerModel { + children: string[]; + properties: IContainerProperties; + userData: Record; +} +/** + * 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; + 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 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 : + * ``` + * ` + * + * + * + * ` + * ``` + */ + customSVG?: string; + /** + * (optional) + * Style of the + */ + style?: React.CSSProperties; + /** + * (optional) + * User data that can be used for data storage or custom SVG + */ + userData?: object; +} + + + + + + + + +/** Model of available container used in application configuration */ +export interface IAvailableContainer { + /** type */ + Type: string; + /** displayed text */ + DisplayedText?: string; + /** category */ + Category?: string; + /** orientation */ + Orientation?: Orientation; + /** horizontal offset */ + X?: number; + /** vertical offset */ + Y?: number; + /** 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; + /** margin */ + Margin?: IMargin; + /** true if anchor, false otherwise */ + IsAnchor?: boolean; + /** true if flex, false otherwise */ + IsFlex?: boolean; + /** Method used on container add */ + AddMethod?: AddMethod; + /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */ + PositionReference?: PositionReference; + /** + * (optional) + * Replace a 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 : + * ``` + * ` + * + * + * + * ` + * ``` + */ + CustomSVG?: string; + /** + * (optional) + * Disabled when Pattern is used. + * + * Replace a 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 : + * ``` + * ` + * + * + * + * ` + * ``` + */ + DefaultChildType?: string; + /** + * Allow to use a Pattern to create the list of children + * Cannot be used with DefaultChildType, + * DefaultChildType will be disabled for this container and the children + */ + Pattern?: string; + /** 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 uses its x coordinate for 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 MarkPosition) + */ + ShowDimensionWithMarks?: Position[]; + /** + * if true, hide the entry in the sidebar (default: false) + */ + IsHidden?: boolean; + /** + * Disable a list of available container to be added inside + */ + Blacklist?: string[]; + /** + * Cannot be used with blacklist. Whitelist will be prioritized. + * To disable the whitelist, Whitelist must be undefined. + * Only allow a set of available container to be added inside + */ + Whitelist?: string[]; + /** + * (optional) + * Style of the + */ + Style?: React.CSSProperties; + /** + * List of possible actions shown on right-click + */ + Actions?: IAction[]; + /** + * (optional) + * User data that can be used for data storage or custom SVG + */ + UserData?: object; +} + + +export interface IMessage { + text: string; + type: MessageType; +} + + + +export interface IEditorState { + history: IHistoryState[]; + historyCurrentStep: number; + configuration: IConfiguration; +} + +export interface ICategory { + Type: string; + DisplayedText?: string; +} + +/** + * Model of an image with multiple source + * It must at least have one source. + * + * If Url/Base64Image and Svg are set, + * Url/Base64Image will be shown in the menu while SVG will be drawn + */ +export interface IImage { + /** Name of the image */ + Name: string; + /** (optional) Url of the image */ + Url?: string; + /** (optional) base64 data of the image */ + Base64Image?: string; + /** (optional) SVG string */ + Svg?: string; +} + +export enum MessageType { + Normal = 0, + Success = 1, + Warning = 2, + Error = 3 +} + +/** + * 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 +} + +/** + * 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 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 +} + +} diff --git a/src/Components/App/Actions/Load.ts b/src/Components/App/Actions/Load.ts index 3905b19..6543052 100644 --- a/src/Components/App/Actions/Load.ts +++ b/src/Components/App/Actions/Load.ts @@ -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>, - setLoaded: Dispatch> + setAppState: Dispatch> ): void { Revive(editorState); setEditorState(editorState); - setLoaded(true); + setAppState(AppState.Loaded); } diff --git a/src/Components/App/Actions/MenuActions.ts b/src/Components/App/Actions/MenuActions.ts index 3d72cd7..9f7da32 100644 --- a/src/Components/App/Actions/MenuActions.ts +++ b/src/Components/App/Actions/MenuActions.ts @@ -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>, - setLoaded: Dispatch> + setAppState: Dispatch> ): 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); } diff --git a/src/Components/App/App.tsx b/src/Components/App/App.tsx index ef86b3c..b06d67a 100644 --- a/src/Components/App/App.tsx +++ b/src/Components/App/App.tsx @@ -7,6 +7,8 @@ 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 { AppState } from '../../Enums/AppState'; +import { Loader } from '../Loader/Loader'; // App will never have props // eslint-disable-next-line @typescript-eslint/no-empty-interface @@ -15,9 +17,9 @@ interface IAppProps { } function UseHTTPGETStatePreloading( - isLoaded: boolean, + appState: AppState, setEditorState: Dispatch>, - setLoaded: Dispatch> + setAppState: Dispatch> ): void { useEffect(() => { const queryString = window.location.search; @@ -28,21 +30,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(false); + const [appState, setAppState] = useState(AppState.MainMenu); const appRef = useRef(null); const defaultMainContainer = new ContainerModel( @@ -69,48 +71,59 @@ export function App(props: IAppProps): JSX.Element { props.root, appRef, setEditorState, - setLoaded + setAppState ); - UseHTTPGETStatePreloading(isLoaded, setEditorState, setLoaded); + UseHTTPGETStatePreloading(appState, setEditorState, setAppState); - const enableLoaded = useCallback(() => { - setLoaded(true); - }, []); - - if (isLoaded) { - return ( -
- -
- ); + switch (appState) { + case AppState.Loaded: + return ( +
+ +
+ ); + case AppState.Loading: + return ( +
+
+ +
+
+ ); + default: + return ( +
+ { + setAppState(AppState.Loading); + NewEditor( + editorState, + (newEditor) => setEditorState(newEditor), + () => setAppState(AppState.Loaded) + ); + }} + loadEditor={(files: FileList | null) => LoadEditor( + files, + setEditorState, + setAppState + )} + /> +
+ ); } - - return ( -
- NewEditor( - editorState, - (newEditor) => setEditorState(newEditor), - enableLoaded - )} - loadEditor={(files: FileList | null) => LoadEditor( - files, - setEditorState, - setLoaded - )} - /> -
- ); }; diff --git a/src/Components/MainMenu/MainMenu.tsx b/src/Components/MainMenu/MainMenu.tsx index 5def512..8337b7b 100644 --- a/src/Components/MainMenu/MainMenu.tsx +++ b/src/Components/MainMenu/MainMenu.tsx @@ -1,6 +1,4 @@ import * as React from 'react'; -import { FAST_BOOT } from '../../utils/default'; -import { Loader } from '../Loader/Loader'; interface IMainMenuProps { newEditor: () => void @@ -10,21 +8,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 ( -
- -
- ); - } - switch (windowState) { case WindowState.Load: return ( @@ -65,12 +53,6 @@ export function MainMenu(props: IMainMenuProps): JSX.Element { ); - case WindowState.Loading: - return ( -
- -
- ); default: return (
diff --git a/src/Enums/AppState.ts b/src/Enums/AppState.ts new file mode 100644 index 0000000..7cf01d6 --- /dev/null +++ b/src/Enums/AppState.ts @@ -0,0 +1,5 @@ +export enum AppState { + MainMenu, + Loading, + Loaded +} diff --git a/src/Events/AppEvents.ts b/src/Events/AppEvents.ts index 6ba07ad..f89e05f 100644 --- a/src/Events/AppEvents.ts +++ b/src/Events/AppEvents.ts @@ -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'; @@ -10,14 +11,14 @@ export interface IAppEvent { func: ( root: Element | Document, setEditor: (newState: IEditorState) => void, - setLoaded: (loaded: boolean) => void, + setAppState: (appState: AppState) => void, eventInitDict?: CustomEventInit ) => void } 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 } @@ -27,7 +28,7 @@ export function UseCustomEvents( root: Element | Document, appRef: React.RefObject, setEditor: (newState: IEditorState) => void, - setLoaded: (loaded: boolean) => void + setAppState: (appState: AppState) => void ): void { useEffect(() => { const funcs = new Map void>(); @@ -36,7 +37,7 @@ export function UseCustomEvents( return event.func( root, setEditor, - setLoaded, + setAppState, eventInitDict ); } @@ -58,29 +59,30 @@ export function UseCustomEvents( function SetEditor( root: Element | Document, setEditor: (newState: IEditorState) => void, - setLoaded: (loaded: boolean) => void, + setAppState: (appState: AppState) => void, eventInitDict?: CustomEventInit ): void { const editor: IEditorState = eventInitDict?.detail; setEditor(editor); + setAppState(AppState.Loading); const customEvent = new CustomEvent('setEditor', { detail: editor }); root.dispatchEvent(customEvent); } -function SetLoaded( +function SetAppState( root: Element | Document, setEditor: (newState: IEditorState) => void, - setLoaded: (loaded: boolean) => void, + setAppState: (appState: AppState) => void, eventInitDict?: CustomEventInit ): void { - const isLoaded: boolean = eventInitDict?.detail; - setLoaded(isLoaded); + const appState: AppState = eventInitDict?.detail; + setAppState(appState); } function ReviveEditorState( root: Element | Document, setEditor: (newState: IEditorState) => void, - setLoaded: (loaded: boolean) => void, + setAppState: (appState: AppState) => void, eventInitDict?: CustomEventInit): void { const anEditorState: IEditorState = eventInitDict?.detail; Revive(anEditorState); @@ -91,7 +93,7 @@ function ReviveEditorState( function ReviveHistory( root: Element | Document, setEditor: (newState: IEditorState) => void, - setLoaded: (loaded: boolean) => void, + setAppState: (appState: AppState) => void, eventInitDict?: CustomEventInit): void { const history: IHistoryState[] = eventInitDict?.detail; ReviveHistoryAction(history); @@ -102,7 +104,7 @@ function ReviveHistory( function GetDefaultEditorState( root: Element | Document, setEditor: (newState: IEditorState) => void, - setLoaded: (loaded: boolean) => void, + setAppState: (appState: AppState) => void, eventInitDict?: CustomEventInit): void { const configuration: IConfiguration = eventInitDict?.detail; const editorState = GetDefaultEditorStateAction(configuration); diff --git a/src/dts/svgld.d.ts b/src/dts/svgld.d.ts index 49a0de3..e8854c5 100644 --- a/src/dts/svgld.d.ts +++ b/src/dts/svgld.d.ts @@ -1,525 +1,529 @@ -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 enum MessageType { - Normal = 0, - Success = 1, - Warning = 2, - Error = 3 -} - -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 { - /** - * 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 IAction { - Id: string; - CustomLogo: IImage; - Label: string; - Description: string; - Action: string; - AddingBehavior: AddMethod; -} - -export interface IAPIConfiguration { - apiFetchUrl?: string; - apiSetContainerListUrl?: string; - apiGetFeedbackUrl?: string; -} - - - - - - - - -/** Model of available container used in application configuration */ -export interface IAvailableContainer { - /** type */ - Type: string; - /** displayed text */ - DisplayedText?: string; - /** category */ - Category?: string; - /** orientation */ - Orientation?: Orientation; - /** horizontal offset */ - X?: number; - /** vertical offset */ - Y?: number; - /** 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; - /** margin */ - Margin?: IMargin; - /** true if anchor, false otherwise */ - IsAnchor?: boolean; - /** true if flex, false otherwise */ - IsFlex?: boolean; - /** Method used on container add */ - AddMethod?: AddMethod; - /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */ - PositionReference?: PositionReference; - /** - * (optional) - * Replace a 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 : - * ``` - * ` - * - * - * - * ` - * ``` - */ - CustomSVG?: string; - /** - * (optional) - * Disabled when Pattern is used. - * - * Replace a 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 : - * ``` - * ` - * - * - * - * ` - * ``` - */ - DefaultChildType?: string; - /** - * Allow to use a Pattern to create the list of children - * Cannot be used with DefaultChildType, - * DefaultChildType will be disabled for this container and the children - */ - Pattern?: string; - /** 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 uses its x coordinate for 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 MarkPosition) - */ - ShowDimensionWithMarks?: Position[]; - /** - * if true, hide the entry in the sidebar (default: false) - */ - IsHidden?: boolean; - /** - * Disable a list of available container to be added inside - */ - Blacklist?: string[]; - /** - * Cannot be used with blacklist. Whitelist will be prioritized. - * To disable the whitelist, Whitelist must be undefined. - * Only allow a set of available container to be added inside - */ - Whitelist?: string[]; - /** - * (optional) - * Style of the - */ - Style?: React.CSSProperties; - /** - * List of possible actions shown on right-click - */ - Actions?: IAction[]; - /** - * (optional) - * User data that can be used for data storage or custom SVG - */ - 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[]; - parent: IContainerModel | null; - properties: IContainerProperties; - userData: Record; -} -/** - * Macro for creating the interface - * Do not add methods since they will be lost during serialization - */ -export class ContainerModel implements IContainerModel { - children: string[]; - parent: IContainerModel | null; - properties: IContainerProperties; - userData: Record; - constructor(parent: IContainerModel | null, 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 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 : - * ``` - * ` - * - * - * - * ` - * ``` - */ - customSVG?: string; - /** - * (optional) - * Style of the - */ - style?: React.CSSProperties; - /** - * (optional) - * User data that can be used for data storage or custom SVG - */ - userData?: object; -} - - - -export interface IEditorState { - history: IHistoryState[]; - historyCurrentStep: number; - 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; - /** Id of the selected container */ - selectedContainerId: string; - /** Counter of type of container. Used for ids. */ - typeCounters: Record; - /** List of symbols */ - symbols: Map; - /** Selected symbols id */ - selectedSymbolId: string; -} - -/** - * Model of an image with multiple source - * It must at least have one source. - * - * If Url/Base64Image and Svg are set, - * Url/Base64Image will be shown in the menu while SVG will be drawn - */ -export interface IImage { - /** Name of the image */ - Name: string; - /** (optional) Url of the image */ - Url?: string; - /** (optional) base64 data of the image */ - Base64Image?: string; - /** (optional) SVG string */ - Svg?: string; -} - - -export interface IInputGroup { - key: string; - text: React.ReactNode; - value: string; -} - -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, patterns: Map): ContainerOrPattern | undefined; -export function IsPattern(id: string, configs: Map, patterns: Map): 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; -} - -/** - * 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 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; -} - -} +declare namespace SVGLD { +export interface IMargin { + left?: number; + bottom?: number; + top?: number; + right?: number; +} + +export interface IPoint { + x: number; + y: number; +} + + + +/** + * 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; +} + + +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, patterns: Map): ContainerOrPattern | undefined; +export function IsPattern(id: string, configs: Map, patterns: Map): boolean; + + + +export interface IHistoryState { + /** Last editor action */ + lastAction: string; + /** Reference to the main container */ + mainContainer: string; + containers: Map; + /** Id of the selected container */ + selectedContainerId: string; + /** Counter of type of container. Used for ids. */ + typeCounters: Record; + /** List of symbols */ + symbols: Map; + /** Selected symbols id */ + selectedSymbolId: string; +} + + +export interface IGetFeedbackRequest { + /** Current application state */ + ApplicationState: IHistoryState; +} + + +export interface IInputGroup { + key: string; + text: React.ReactNode; + value: string; +} + + + +export interface IAction { + Id: string; + CustomLogo: IImage; + Label: string; + Description: string; + Action: string; + AddingBehavior: AddMethod; +} + + + +export interface ISetContainerListResponse { + Containers: IAvailableContainer[]; + AddingBehavior?: AddMethod; +} + + +export interface IContainerModel { + children: string[]; + properties: IContainerProperties; + userData: Record; +} +/** + * 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; + 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 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 : + * ``` + * ` + * + * + * + * ` + * ``` + */ + customSVG?: string; + /** + * (optional) + * Style of the + */ + style?: React.CSSProperties; + /** + * (optional) + * User data that can be used for data storage or custom SVG + */ + userData?: object; +} + + + + + + + + +/** Model of available container used in application configuration */ +export interface IAvailableContainer { + /** type */ + Type: string; + /** displayed text */ + DisplayedText?: string; + /** category */ + Category?: string; + /** orientation */ + Orientation?: Orientation; + /** horizontal offset */ + X?: number; + /** vertical offset */ + Y?: number; + /** 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; + /** margin */ + Margin?: IMargin; + /** true if anchor, false otherwise */ + IsAnchor?: boolean; + /** true if flex, false otherwise */ + IsFlex?: boolean; + /** Method used on container add */ + AddMethod?: AddMethod; + /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */ + PositionReference?: PositionReference; + /** + * (optional) + * Replace a 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 : + * ``` + * ` + * + * + * + * ` + * ``` + */ + CustomSVG?: string; + /** + * (optional) + * Disabled when Pattern is used. + * + * Replace a 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 : + * ``` + * ` + * + * + * + * ` + * ``` + */ + DefaultChildType?: string; + /** + * Allow to use a Pattern to create the list of children + * Cannot be used with DefaultChildType, + * DefaultChildType will be disabled for this container and the children + */ + Pattern?: string; + /** 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 uses its x coordinate for 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 MarkPosition) + */ + ShowDimensionWithMarks?: Position[]; + /** + * if true, hide the entry in the sidebar (default: false) + */ + IsHidden?: boolean; + /** + * Disable a list of available container to be added inside + */ + Blacklist?: string[]; + /** + * Cannot be used with blacklist. Whitelist will be prioritized. + * To disable the whitelist, Whitelist must be undefined. + * Only allow a set of available container to be added inside + */ + Whitelist?: string[]; + /** + * (optional) + * Style of the + */ + Style?: React.CSSProperties; + /** + * List of possible actions shown on right-click + */ + Actions?: IAction[]; + /** + * (optional) + * User data that can be used for data storage or custom SVG + */ + UserData?: object; +} + + +export interface IMessage { + text: string; + type: MessageType; +} + + + +export interface IEditorState { + history: IHistoryState[]; + historyCurrentStep: number; + configuration: IConfiguration; +} + +export interface ICategory { + Type: string; + DisplayedText?: string; +} + +/** + * Model of an image with multiple source + * It must at least have one source. + * + * If Url/Base64Image and Svg are set, + * Url/Base64Image will be shown in the menu while SVG will be drawn + */ +export interface IImage { + /** Name of the image */ + Name: string; + /** (optional) Url of the image */ + Url?: string; + /** (optional) base64 data of the image */ + Base64Image?: string; + /** (optional) SVG string */ + Svg?: string; +} + +export enum MessageType { + Normal = 0, + Success = 1, + Warning = 2, + Error = 3 +} + +/** + * 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 +} + +/** + * 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 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 +} + +} diff --git a/src/utils/default.ts b/src/utils/default.ts index 0eba5db..2b66a3e 100644 --- a/src/utils/default.ts +++ b/src/utils/default.ts @@ -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 = 0; /** Disable any call to the API (default = false) */ export const DISABLE_API = false; @@ -22,7 +22,7 @@ export const DISABLE_API = false; * Better compatibility with Gecko and WebKit engines like Firefox and Safari. * EXPERIMENTAL: svg export wont work and it won't be possible to insert a custom svg) */ -export const USE_EXPERIMENTAL_CANVAS_API = false; +export const USE_EXPERIMENTAL_CANVAS_API = true; /** Enable keyboard shortcuts (default = true) */ export const ENABLE_SHORTCUTS = true;