Update dts

This commit is contained in:
Eric NGUYEN 2023-02-27 13:50:34 +01:00
parent 0f4c0584e5
commit a9744a8860
2 changed files with 1166 additions and 1084 deletions

725
public/svgld.d.ts vendored
View file

@ -1,73 +1,119 @@
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 AppState {
MainMenu = 0,
Loading = 1,
Loaded = 2
export interface IPoint {
x: number;
y: number;
}
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 {
* Model of available symbol to configure the application */
export interface IAvailableSymbol {
Name: string;
Image: IImage;
/** displayed text */
DisplayedText?: string;
isVertical?: boolean;
offset?: number;
Width?: number;
Height?: number;
PositionReference?: PositionReference;
/** An existing or new available container */
AssociatedContainer?: IAvailableContainer;
}
export interface IAPIConfiguration {
apiFetchUrl?: string;
apiSetContainerListUrl?: string;
apiGetFeedbackUrl?: string;
}
export interface ISymbolModel {
/** Identifier */
id: string;
/** Displayed Text */
displayedText: string;
/** Type */
type: string;
/** Configuration of the symbol */
config: IAvailableSymbol;
isVertical: boolean;
/** offset */
offset: number;
/** Width */
width: number;
/** Height */
height: number;
/** List of linked container id */
linkedContainers: Set<string>;
/** Dimensions options */
showDimension: boolean;
}
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>;
/** Counter of type of container. Used for ids. */
typeCounters: Record<string, number>;
/** List of symbols */
symbols: Map<string, ISymbolModel>;
}
export interface IKeyValue {
Key: string;
Value: string;
}
export interface IGetFeedbackRequest {
/** Current application state */
ApplicationState: IHistoryState;
}
export interface IInputGroup {
key: string;
text: React.ReactNode;
value: string;
}
@ -81,10 +127,177 @@ export interface IAction {
AddingBehavior: AddMethod;
}
export interface IAPIConfiguration {
apiFetchUrl?: string;
apiSetContainerListUrl?: string;
apiGetFeedbackUrl?: string;
export interface ILanguage {
language: string;
dictionary: Record<string, string>;
languageChange?: (selected: string) => void;
}
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?: {});
}
export interface IStyle {
stroke?: string;
strokeOpacity?: number;
strokeWidth?: number;
fill?: string;
fillOpacity?: number;
}
/**
* 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;
/** Dimensions options */
dimensionOptions: IDimensions;
/**
* 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?: IStyle;
/**
* (optional)
* User data that can be used for data storage or custom SVG
*/
userData?: IKeyValue[];
}
@ -179,19 +392,8 @@ export interface IAvailableContainer {
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[];
/** Dimensions options */
DimensionOptions?: IDimensions;
/**
* if true, hide the entry in the sidebar (default: false)
*/
@ -210,7 +412,7 @@ export interface IAvailableContainer {
* (optional)
* Style of the <rect>
*/
Style?: React.CSSProperties;
Style?: IStyle;
/**
* List of possible actions shown on right-click
*/
@ -223,153 +425,9 @@ export interface IAvailableContainer {
}
/**
* 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;
}
@ -380,33 +438,49 @@ export interface IEditorState {
configuration: IConfiguration;
}
export interface ICategory {
Type: string;
DisplayedText?: string;
}
export interface IGetFeedbackRequest {
/** Current application state */
ApplicationState: IHistoryState;
export interface IReplaceContainer {
id: string | undefined;
isReplacing: boolean;
category: string | undefined;
}
export interface IGetFeedbackResponse {
messages: IMessage[];
export interface IDimensionOptions {
positions: Position[];
/**
* Stroke color
*/
color?: string;
/** stroke-width */
width?: number;
/** stroke-dasharray */
dashArray?: string;
}
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 IDimensions {
/** if true, show the dimension of the container */
selfDimensions: IDimensionOptions;
/** if true, show the dimension of the container */
selfMarginsDimensions: IDimensionOptions;
/** if true show the overall dimensions of its children */
childrenDimensions: IDimensionOptions;
/**
* 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)
*/
dimensionWithMarks: IDimensionOptions;
}
/**
@ -427,116 +501,83 @@ 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,
/**
* Dimension options
*/
SelfDimension = 3,
SelfMarginDimension = 4,
ChildrenDimensions = 5,
DimensionWithMarks = 6,
DimensionOptions = 7
}
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
}
}

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

@ -1,73 +1,119 @@
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 AppState {
MainMenu = 0,
Loading = 1,
Loaded = 2
export interface IPoint {
x: number;
y: number;
}
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 {
* Model of available symbol to configure the application */
export interface IAvailableSymbol {
Name: string;
Image: IImage;
/** displayed text */
DisplayedText?: string;
isVertical?: boolean;
offset?: number;
Width?: number;
Height?: number;
PositionReference?: PositionReference;
/** An existing or new available container */
AssociatedContainer?: IAvailableContainer;
}
export interface IAPIConfiguration {
apiFetchUrl?: string;
apiSetContainerListUrl?: string;
apiGetFeedbackUrl?: string;
}
export interface ISymbolModel {
/** Identifier */
id: string;
/** Displayed Text */
displayedText: string;
/** Type */
type: string;
/** Configuration of the symbol */
config: IAvailableSymbol;
isVertical: boolean;
/** offset */
offset: number;
/** Width */
width: number;
/** Height */
height: number;
/** List of linked container id */
linkedContainers: Set<string>;
/** Dimensions options */
showDimension: boolean;
}
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>;
/** Counter of type of container. Used for ids. */
typeCounters: Record<string, number>;
/** List of symbols */
symbols: Map<string, ISymbolModel>;
}
export interface IKeyValue {
Key: string;
Value: string;
}
export interface IGetFeedbackRequest {
/** Current application state */
ApplicationState: IHistoryState;
}
export interface IInputGroup {
key: string;
text: React.ReactNode;
value: string;
}
@ -81,10 +127,177 @@ export interface IAction {
AddingBehavior: AddMethod;
}
export interface IAPIConfiguration {
apiFetchUrl?: string;
apiSetContainerListUrl?: string;
apiGetFeedbackUrl?: string;
export interface ILanguage {
language: string;
dictionary: Record<string, string>;
languageChange?: (selected: string) => void;
}
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?: {});
}
export interface IStyle {
stroke?: string;
strokeOpacity?: number;
strokeWidth?: number;
fill?: string;
fillOpacity?: number;
}
/**
* 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;
/** Dimensions options */
dimensionOptions: IDimensions;
/**
* 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?: IStyle;
/**
* (optional)
* User data that can be used for data storage or custom SVG
*/
userData?: IKeyValue[];
}
@ -179,19 +392,8 @@ export interface IAvailableContainer {
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[];
/** Dimensions options */
DimensionOptions?: IDimensions;
/**
* if true, hide the entry in the sidebar (default: false)
*/
@ -210,7 +412,7 @@ export interface IAvailableContainer {
* (optional)
* Style of the <rect>
*/
Style?: React.CSSProperties;
Style?: IStyle;
/**
* List of possible actions shown on right-click
*/
@ -223,153 +425,9 @@ export interface IAvailableContainer {
}
/**
* 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;
}
@ -380,33 +438,49 @@ export interface IEditorState {
configuration: IConfiguration;
}
export interface ICategory {
Type: string;
DisplayedText?: string;
}
export interface IGetFeedbackRequest {
/** Current application state */
ApplicationState: IHistoryState;
export interface IReplaceContainer {
id: string | undefined;
isReplacing: boolean;
category: string | undefined;
}
export interface IGetFeedbackResponse {
messages: IMessage[];
export interface IDimensionOptions {
positions: Position[];
/**
* Stroke color
*/
color?: string;
/** stroke-width */
width?: number;
/** stroke-dasharray */
dashArray?: string;
}
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 IDimensions {
/** if true, show the dimension of the container */
selfDimensions: IDimensionOptions;
/** if true, show the dimension of the container */
selfMarginsDimensions: IDimensionOptions;
/** if true show the overall dimensions of its children */
childrenDimensions: IDimensionOptions;
/**
* 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)
*/
dimensionWithMarks: IDimensionOptions;
}
/**
@ -427,116 +501,83 @@ 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,
/**
* Dimension options
*/
SelfDimension = 3,
SelfMarginDimension = 4,
ChildrenDimensions = 5,
DimensionWithMarks = 6,
DimensionOptions = 7
}
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
}
}