From b3a3be0ba26738cefcc08bb0610587a55462b0d6 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Thu, 13 Oct 2022 17:40:43 +0200 Subject: [PATCH] Fix svg-layout-designer.ts after history update + Update SVGLD.dts + add command to package.json --- package.json | 1 + public/smartcomponent/svg-layout-designer.ts | 4 +- public/svgld.d.ts | 1042 +++++++++--------- src/dts/svgld.d.ts | 1042 +++++++++--------- 4 files changed, 1053 insertions(+), 1036 deletions(-) diff --git a/package.json b/package.json index a0902d7..bcaeedc 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "scripts": { "dev": "vite", "build": "tsc && vite build", + "build:dotnet": "dotnet build ./csharp/SVGLDLibs/SVGLDLibs/SVGLDLibs.csproj", "preview": "vite preview", "test": "vitest", "test:ui": "vitest --ui", diff --git a/public/smartcomponent/svg-layout-designer.ts b/public/smartcomponent/svg-layout-designer.ts index 5cf900d..067e96f 100644 --- a/public/smartcomponent/svg-layout-designer.ts +++ b/public/smartcomponent/svg-layout-designer.ts @@ -86,7 +86,7 @@ */ public Reset(): void { this.Editor.GetEditorState((state) => { - this.Editor.SetHistory([state.history[0]]); + this.Editor.SetHistory({ history: [state.history[0]] }); }); } @@ -95,7 +95,7 @@ */ public ClearHistory(): void { this.Editor.GetEditorState((state) => { - this.Editor.SetHistory([state.history[state.history.length - 1]]); + this.Editor.SetHistory({ history: [state.history[state.history.length - 1]] }); }); } } diff --git a/public/svgld.d.ts b/public/svgld.d.ts index a1053ec..49a0de3 100644 --- a/public/svgld.d.ts +++ b/public/svgld.d.ts @@ -1,517 +1,525 @@ -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; -} - - - - - - - - -/** 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; -} - - -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 { +/** + * 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; +} + +} diff --git a/src/dts/svgld.d.ts b/src/dts/svgld.d.ts index a1053ec..49a0de3 100644 --- a/src/dts/svgld.d.ts +++ b/src/dts/svgld.d.ts @@ -1,517 +1,525 @@ -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; -} - - - - - - - - -/** 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; -} - - -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 { +/** + * 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; +} + +}