Rename DefaultX, DefaultY to X and Y + add docs

src/Components/Editor/Actions/ContainerOperations.ts

@@ -234,8 +234,8 @@ export function AddContainers(
     const right: number = containerConfig.Margin?.right ?? 0;
 
     // Default coordinates
-    let x = containerConfig.DefaultX ?? 0;
+    let x = containerConfig.X ?? 0;
-    let y = containerConfig.DefaultY ?? 0;
+    let y = containerConfig.Y ?? 0;
     let width = containerConfig.Width ?? containerConfig.MaxWidth ?? containerConfig.MinWidth ?? parentClone.properties.width;
     let height = containerConfig.Height ?? parentClone.properties.height;
 
@@ -403,8 +403,8 @@ function InitializeDefaultChild(
     const bottom: number = currentConfig.Margin?.bottom ?? 0;
     const top: number = currentConfig.Margin?.top ?? 0;
     const right: number = currentConfig.Margin?.right ?? 0;
-    let x = currentConfig.DefaultX ?? 0;
+    let x = currentConfig.X ?? 0;
-    let y = currentConfig.DefaultY ?? 0;
+    let y = currentConfig.Y ?? 0;
     let width = currentConfig.Width ?? currentConfig.MaxWidth ?? currentConfig.MinWidth ?? parent.properties.width;
     let height = currentConfig.Height ?? parent.properties.height;
 

src/Interfaces/IAvailableContainer.ts

@@ -7,20 +7,80 @@ import { IMargin } from './IMargin';
 
 /** Model of available container used in application configuration */
 export interface IAvailableContainer {
+  /** type */
   Type: string
-  DefaultX?: number
+
-  DefaultY?: number
+  /** horizontal offset */
+  X?: number
+
+  /** vertical offset */
+  Y?: number
+
+  /** width */
   Width?: number
+
+  /** height */
   Height?: number
+
+  /**
+   * Minimum width (min=1)
+   * Allows the container to set isRigidBody to false when it gets squeezed
+   * by an anchor
+   */
   MinWidth?: number
+
+  /**
+   * Maximum width
+   */
   MaxWidth?: 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 } */
   XPositionReference?: XPositionReference
+
+  /**
+   * (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)
+   * 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>
+   * `
+   * ```
+   */
   DefaultChildType?: string
+
   /** if true, show the dimension of the container */
   ShowSelfDimensions?: boolean
 
@@ -37,7 +97,21 @@ export interface IAvailableContainer {
    * and insert dimensions marks at lift up children (see liftDimensionToBorrower)
    */
   IsDimensionBorrower?: boolean
+
+  /**
+   * (optional)
+   * Style of the <rect>
+   */
   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
 }