From 3da8a0c55e2a0c006a1bce910cae1b05722c7056 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Wed, 17 Aug 2022 16:34:38 +0200 Subject: [PATCH] Add MinWidth to properties + add docs to IProperties + refactor default container properties into a function in default.ts --- src/Components/Editor/ContainerOperations.ts | 22 +++----- src/Interfaces/IAvailableContainer.ts | 7 +-- src/Interfaces/IProperties.ts | 56 +++++++++++++++++--- src/utils/default.ts | 25 +++++++++ 4 files changed, 87 insertions(+), 23 deletions(-) diff --git a/src/Components/Editor/ContainerOperations.ts b/src/Components/Editor/ContainerOperations.ts index e4e7c0d..93d9634 100644 --- a/src/Components/Editor/ContainerOperations.ts +++ b/src/Components/Editor/ContainerOperations.ts @@ -8,6 +8,7 @@ import IProperties from '../../Interfaces/IProperties'; import { AddMethod } from '../../Enums/AddMethod'; import { IAvailableContainer } from '../../Interfaces/IAvailableContainer'; import { XPositionReference } from '../../Enums/XPositionReference'; +import { GetDefaultContainerProps } from '../../utils/default'; /** * Select a container @@ -203,25 +204,17 @@ export function AddContainer( let x = containerConfig.DefaultX ?? 0; const y = containerConfig.DefaultY ?? 0; - const width = containerConfig.Width ?? parentClone.properties.width; - const height = containerConfig.Height ?? parentClone.properties.height; x = ApplyAddMethod(index, containerConfig, parentClone, x); - const defaultProperties: IProperties = { - id: `${type}-${count}`, - parentId: parentClone.properties.id, + const defaultProperties = GetDefaultContainerProps( + type, + count, + parentClone, x, y, - width, - height, - isRigidBody: false, - isAnchor: false, - XPositionReference: containerConfig.XPositionReference ?? XPositionReference.Left, - customSVG: containerConfig.CustomSVG, - style: containerConfig.Style, - userData: containerConfig.UserData - }; + containerConfig + ); // Create the container const newContainer = new ContainerModel( @@ -265,6 +258,7 @@ function ApplyAddMethod(index: number, containerConfig: IAvailableContainer, par if (index > 0 && ( containerConfig.AddMethod === undefined || containerConfig.AddMethod === AddMethod.Append)) { + // Append method (default) const lastChild: IContainerModel | undefined = parent.children.at(index - 1); if (lastChild !== undefined) { diff --git a/src/Interfaces/IAvailableContainer.ts b/src/Interfaces/IAvailableContainer.ts index 800af5d..8dd0a83 100644 --- a/src/Interfaces/IAvailableContainer.ts +++ b/src/Interfaces/IAvailableContainer.ts @@ -5,13 +5,14 @@ import { XPositionReference } from '../Enums/XPositionReference'; /** Model of available container used in application configuration */ export interface IAvailableContainer { Type: string - Width?: number - Height?: number DefaultX?: number DefaultY?: number + Width?: number + Height?: number + MinWidth?: number AddMethod?: AddMethod XPositionReference?: XPositionReference CustomSVG?: string - Style: React.CSSProperties + Style?: React.CSSProperties UserData?: object } diff --git a/src/Interfaces/IProperties.ts b/src/Interfaces/IProperties.ts index 38153ce..c1a3b6a 100644 --- a/src/Interfaces/IProperties.ts +++ b/src/Interfaces/IProperties.ts @@ -3,24 +3,68 @@ import { XPositionReference } from '../Enums/XPositionReference'; /** * Properties of a container - * @property id id of the container - * @property parentId id of the parent container - * @property x horizontal offset of the container - * @property y vertical offset of the container - * @property isRigidBody if true apply rigid body behaviors - * @property isAnchor if true apply anchor behaviors */ export default interface IProperties { + /** id of the container */ id: string + + /** id of the parent container (null when there is no parent) */ parentId: string | null + + /** horizontal offset */ x: number + + /** vertical offset */ y: number + + /** width */ width: number + + /** height */ height: number + + /** true if rigid, false otherwise */ isRigidBody: boolean + + /** true if anchor, false otherwise */ isAnchor: boolean + + /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */ XPositionReference: XPositionReference + + /** + * (optional) + * Minimum width used when isRigidBody = true. + * Allows the container to set isRigidBody to false when it gets squeezed + * by an anchor + */ + minWidth?: number + + /** + * (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 } diff --git a/src/utils/default.ts b/src/utils/default.ts index 97df4b0..6eaf561 100644 --- a/src/utils/default.ts +++ b/src/utils/default.ts @@ -1,5 +1,7 @@ import { XPositionReference } from '../Enums/XPositionReference'; +import { IAvailableContainer } from '../Interfaces/IAvailableContainer'; import { IConfiguration } from '../Interfaces/IConfiguration'; +import { IContainerModel } from '../Interfaces/IContainerModel'; import IProperties from '../Interfaces/IProperties'; export const DEFAULT_CONFIG: IConfiguration = { @@ -42,6 +44,29 @@ export const DEFAULT_MAINCONTAINER_PROPS: IProperties = { } }; +export const GetDefaultContainerProps = ( + type: string, + typeCount: number, + parent: IContainerModel, + x: number, + y: number, + containerConfig: IAvailableContainer +): IProperties => ({ + id: `${type}-${typeCount}`, + parentId: parent.properties.id, + x, + y, + width: containerConfig.Width ?? containerConfig.MinWidth ?? parent.properties.width, + height: containerConfig.Height ?? parent.properties.height, + isRigidBody: false, + isAnchor: false, + XPositionReference: containerConfig.XPositionReference ?? XPositionReference.Left, + minWidth: containerConfig.MinWidth, + customSVG: containerConfig.CustomSVG, + style: containerConfig.Style, + userData: containerConfig.UserData +}); + export const DIMENSION_MARGIN = 50; export const NOTCHES_LENGTH = 4;