/**
 * @description The exontrol.helpTFI namespace provides documentation for exontrol.TFI object, which holds font attributes to displays a text or a portion of text
*/
exontrol.helpTFI =
{
  /**
  * @description The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.
  *
  * The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:
  *
  *   bold, displays the text in bold (equivalent of <b> tag)
  *   italic, displays the text in italics (equivalent of <i> tag)
  *   underline, underlines the text (equivalent of <u> tag)
  *   strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
  *   <fontName name>, specifies the font's family (equivalent of <font name> tag)
  *   <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
  *   <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
  *   <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
  *   <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
  *   <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  *   <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)
  *
  * Any other word within the tfi field that's not recognized as a keyword is interpreted as:
  *
  *   name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
  *   size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)
  *
  * The tfi field as object supports any of the following fields:
  *
  *   bold {boolean}, displays the text in bold (equivalent of <b> tag)
  *   italic {boolean}, displays the text in italics (equivalent of <i> tag)
  *   underline {boolean}, underlines the text (equivalent of <u> tag)
  *   strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
  *   fontName {string}, specifies the font's family (equivalent of <font name> tag)
  *   fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
  *   fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
  *   bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
  *   shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
  *     color {string}, defines the color of the text's shadow (CSScolor)
  *     width {number}, defines the size of the text's shadow
  *     offset {number}, defines the offset to show the text's shadow relative to the text
  *   outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  *   graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
  *     color {string}, defines the gradient-color (CSScolor)
  *     mode {number}, defines the gradient mode as a value between 0 and 4
  *     blend {number}, defines the gradient blend as a value between 0 and 1
  *
  * CSSColor or CSS legal color values can be specified by the following methods:
  *
  *   Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
  *   Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
  *   RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
  *   RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
  *   HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
  *   HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
  *   Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
  *
  * @type {(string|object)}
  * @example
  *
  *   null {null}, the tfi field is ignored
  *   "bold monospace 16" {string}, defines Monospace font of 16px height, bold
  *   {bold: true, fontName: "monospace", fontSize: 16} {object}, defines Monospace font of 16px height, bold
  */
  tfi:
  {
    /**
     * @description The bold field specifies whether characters in text should be displayed in bold (equivalent of <b> tag of ex-HTML captions).
     * @type {boolean}
     * @example
     *
     *  true {boolean}, indicates that the text is displayed in bold
     *  false {boolean}, displays normal text
    */
     bold: false,
    /**
     * @description The italic field specifies whether characters in text should be displayed in italics (equivalent of <i> tag of ex-HTML captions).
     * @type {boolean}
     * @example
     *
     *  true {boolean}, indicates that the text is displayed in italics
     *  false {boolean}, displays normal text
    */
     italic: false,
    /**
     * @description The underline field specifies whether characters in text are underlined (equivalent of <u> tag of ex-HTML captions).
     * @type {boolean}
     * @example
     *
     *  true {boolean}, indicates that the text is underlined
     *  false {boolean}, displays normal text
    */
     underline: false,
    /**
     * @description The strikeout field specifies whether characters in text are strike-through (equivalent of <s> tag of ex-HTML captions).
     * @type {boolean}
     * @example
     *
     *  true {boolean}, indicates that characters in text are strike-through
     *  false {boolean}, displays normal text
    */
     strikeout: false,
    /**
     * @description The fgcolor field specifies the text's foreground color (equivalent of <fgcolor color> tag of ex-HTML captions).
     * @type {string}
     * @example
     *
     *  null {null}, specifies that the fgcolor field is ignored
     *  "red" {string}, displays the text in red color
     *  "rgb(255,0,0)" {string}, displays the text in red color
     *  "rgba(255,0,0,0.5)" {string}, displays the text in semi-transparent red color
    */
     fgColor: null,
    /**
     * @description The bgcolor field specifies the text's background color (equivalent of <bgcolor color> tag of ex-HTML captions).
     * @type {string}
     * @example
     *
     *  null {null}, specifies that the bgcolor field is ignored
     *  "red" {string}, displays the text's background in red color
     *  "rgb(255,0,0)" {string}, displays the text's background in red color
     *  "rgba(255,0,0,0.5)" {string}, displays the text's background in semi-transparent red color
    */
     bgColor: null,
    /**
     * @description The fontSize field defines the size to display the font (equivalent of <font family;size> tag of ex-HTML captions).
     * @type {number}
     * @example
     *
     *  null {null}, specifies that the fontSize field is ignored
     *  12 {number}, defines the size of the font to 12 pixels
    */
     fontSize: null,
    /**
     * @description The fontName field defines family of the font to show the text (equivalent of <font family;size> tag of ex-HTML captions).
     * @type {string}
     * @example
     *
     *  null {null}, specifies that the fontName field is ignored
     *  "Georgia" {string}, indicates Georgia font family
    */
     fontName: null,
    /**
     * @description The shacolor field defines the text's shadow (equivalent of <sha color;width;offset> tag of ex-HTML captions).
     * @type {object}
    */
    shaColor:
    {
      /**
       * @description The color field specifies the color for text's shadow (equivalent of <sha color;width;offset> tag of ex-HTML captions).
       * @type {string}
       * @example
       *
       *  null {null}, specifies that the color field is ignored
       *  "red" {string}, defines red shadow for text
       *  "rgb(255,0,0)" {string}, defines red shadow for text
       *  "rgba(255,0,0,0.5)" {string}, defines semi-transparent red shadow for text
      */
       color: null,
      /**
       * @description The width field defines the size of text's shadow (equivalent of <sha color;width;offset> tag of ex-HTML captions).
       * @type {number}
       * @example
       *
       *  null {null}, specifies that the width field is ignored
       *  4 {number}, indicates a 4-pixels wide for text's shadow
      */
       width: null,
      /**
       * @description The offset field defines the offset of text's shadow (equivalent of <sha color;width;offset> tag of ex-HTML captions).
       * @type {number}
       * @example
       *
       *  null {null}, specifies that the offset field is ignored
       *  4 {number}, shows the text's shadow with a different offset
      */
       offset: null
    },
    /**
     * @description The outcolor field defines color to show outlined text (equivalent of <out color> tag of ex-HTML captions).
     * @type {string}
     * @example
     *
     *  null {null}, specifies that the outcolor field is ignored
     *  "red" {string}, defines a red-outlined text
     *  "rgb(255,0,0)" {string}, defines a red-outlined text
     *  "rgba(255,0,0,0.5)" {string}, defines a semi-tranparent red-outlined text
    */
     outColor: null,
    /**
     * @description The gracolor field specifies whether the text is show in gradient (equivalent of <gra color;mode;blend> tag of ex-HTML captions).
     * @type {object}
    */
    graColor:
    {
      /**
       * @description The color field specifies the color for text's gradient (equivalent of <gra color;mode;blend> tag of ex-HTML captions).
       * @type {string}
       * @example
       *
       *  null {null}, specifies that the color field is ignored
       *  "red" {string}, defines a red-gradient text
       *  "rgb(255,0,0)" {string}, defines a red-gradient text
       *  "rgba(255,0,0,0.5)" {string}, defines a semi-tranparent red-gradient text
      */
       color: null,
      /**
       * @description The mode field defines mode of the text's gradient (equivalent of <gra color;mode;blend> tag of ex-HTML captions). The mode is a value between 0 and 3, 1 if missing/null or undefined.
       * @type {number}
       * @example
       *
       *  0 {number}, defines the gradient from left to right
       *  1 {number}, defines the gradient from right to left
       *  2 {number}, defines the gradient from top to bottom
       *  3 {number}, defines the gradient from bottom to top
       *
      */
       mode: null,
      /**
       * @description The blend field defines gradient's blend value (equivalent of <gra color;mode;blend> tag of ex-HTML captions). Could be 0 or 1. Currently, the gradient's blend is not available
       * @type {number}
      */
       blend: null
    }
  }
}

/**
 * @description The exontrol.helpShape namespace provides documentation for exontrol.S objects.
*/
exontrol.helpShape =
{
  /**
  * @description The shape field includes definitions to draw shapes. An object of exontrol.Def.Shape type.
  * @type {object}
  */
  shape:
  {
    /**
     * @description The opacity field sets the opacity level of the object. It is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
     * @type {number}
     * @example
     *
     *  null {null}, the opacity field is ignored
     *  0 {number}, completely transparent
     *  0.5 {number}, semi-transparent
     *  1 {number}, fully-opaque
    */
     opacity: null,
    /**
     * @description The client field specifies a collection of up to four expressions that can define a different client area to show the object (see also padding). A string expression of "[expression,expression,expression,expression]" type, that determines the x, y, width and height of the new client. The client field must starts with "[" and ends with "]", else it has no effect.
     *
     * Each expression supports the following keywords:
     *
     *   x {number}, defines the object's default-left position
     *   y {number}, defines the object's default-top position
     *   width {number}, indicates the default-width of the object
     *   height {number}, indicates the default-width of the object.
     *
     * @type {string}
     * @example
     *
     *   null {null}, the client field is ignored
     *   "[x+64,y-32]" {string}, displays the object at a different position (offset by 64-pixels on x-axis, and 32-pixels up on y-axis)
     *   "[x-8,y-4,width+2*8,height+2*4]" {string}, is equivalent of padding on [8,4]
     *   "[x+(width-16)/2,y+(height-16)/2,16,16]" {string}, centers a 16x16 rectangle inside the client
    */
     client: null,
    /**
     * @description The padding field defines how much the object's client area is increased or decreased (see also client)
     * @type {(number|string|array)}
     * @example
     *
     *   null {null}, indicates that the padding field is ignored
     *   4 {number}, increases the object's client with 2 * 4-pixels, which includes width and height
     *   "8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
     *   [8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
    */
     pad: null,
    /**
    * @description The fillColor field defines the color to show the object's background.
    * @type {string}
    * @example
    *
    *  null {null}, specifies that the fillColor field is ignored
    *  "transparent" {string}, fills the object's background with rgba(0,0,0,0)/transparent color
    *  "red" {string}, fills the object's background with red color
    *  "rgb(255,0,0)" {string}, fills the object's background with red color
    *  "rgba(255,0,0,0.5)" {string}, fills the object's background with semi-tranparent red color
    */
     fillColor: null,
    /**
    * @description The fillGradientColor field defines the gradient type and colors to show the object's background.
    * @type {string}
    *
    * The fillColor field defines the starting color. The fillGradientColor field has effect only if the fillColor field is defined (not null or undefined).
    *
    * The first field of the fillGradientColor field could start with any of the following:
    *
    *   "vertical", defines a vertical-gradient (default)
    *   "horizontal", defines a horizontal-gradient
    *   "diagonal", defines a diagonal-gradient
    *   "radial", defines a radial-gradient
    *
    * The next fields indicates the stop-colors.
    *
    * @example
    *
    *  null {null}, specifies that the fillGradientColor field is ignored, so no gradient is applied on the object's background.
    *  "black" {string}, specifies a vertical-gradient that starts from fillColor and ends on black.
    *  "horizontal,red,green,blue" {string}, specifies a horizontal-gradient that starts from fillColor, continues with red, green and ends on blue.
    *  "diagonal,red,rgba(0,255,0,0.5),blue" {string}, specifies a diagonal-gradient that starts from fillColor, continues with red, 50% green and ends on blue.
    *  "radial,black" {string}, specifies a radial/circular-gradient that starts from fillColor and ends on black.
    */
     fillGradientColor: null,
    /**
     * @description The clientText field specifies a collection of up to four expressions that defines the new client area to display the shape's text (equivalent of offset, pad), relative to the shape's client area. A string expression of "[expression,expression,expression,expression]" type, that determines the x, y, width and height of the new client text. The clientText field must starts with "[" and ends with "]", else it has no effect.
     *
     * Each expression supports the following keywords:
     *
     *   x {number}, defines the object's default-left position
     *   y {number}, defines the object's default-top position
     *   width {number}, indicates the default-width of the object
     *   height {number}, indicates the default-width of the object.
     *
     * @type {string}
     * @example
     *
     *   null {null}, the clientText field is ignored
     *   "[x+64,y-32]" {string}, displays the text at a different position (offset by 64-pixels on x-axis, and 32-pixels up on y-axis)
     *   "[x-8,y-4,width+2*8,height+2*4]" {string}, is equivalent of padding on [8,4]
     *   "[,,width-20]" {string}, narrows the text's client with 20 pixels on right
    */
     clientText: null,
    /**
    * @description The padText field defines the padding to display the object's caption (see also text).
    * @type {number}
    * @example
    *
    *   null {null}, indicates that the padText field is ignored
    *   4 {number}, increases the caption's client with 2 * 4-pixels, which includes width and height
    *   "8,4" {string}, increases the caption's width with 2 * 8-pixels and caption's height with 2 * 4-pixels
    *   [8,4] {array}, increases the caption's width with 2 * 8-pixels and caption's height with 2 * 4-pixels
    */
     padText: null,
    /**
    * @description The text field defines the caption to be displayed on the object. The caption/text supports ex-HTML tags as listed bellow:
    *
    *   "<b>text</b>", displays the text in bold.
    *   "<i>text</i>", displays the text in italics.
    *   "<u>text</u>", underlines the text.
    *   "<s>text</s>", strike-through text
    *   "<a [id][;options]>text</a>", displays an anchor element that can be clicked
    *   "<font [family][;size]>text</font>", displays portions of text with a different font and/or different size.
    *   "<fgcolor color>text</fgcolor>", displays text with a specified foreground color.
    *   "<bgcolor color>text</bgcolor>", displays text with a specified background color.
    *   "<br>", defines a forced line-break
    *   "<r>", right aligns the text
    *   "<c>", centers the text
    *   "<img>key[:width]</img>", displays a custom-sized picture into the text. The key defines the name of the picture/image to be shown. The image can be added using the exontrol.HTMLPicture.Add() method.
    *   & glyph characters as "&amp;" ( & ), "&lt;" ( < ), "&gt;" ( > ),  "&qout;" ( quote character ) and "&#number;" ( the character with specified code ). For instance, "&#8364;" displays the EURO sign
    *   "<off offset>text</off>", defines the vertical offset to display the text.
    *   "<gra color[;mode[;blend]]>text</gra>", shows the text in gradient
    *   "<out color[;width]>text</out>", shows the text with outlined characters
    *   "<sha color[;width[;offset]]>text</sha>", shows the text with a shadow
    *
    * @type {string}
    * @example
    *
    *   null {null}, ignores the text field
    *   "this is a <fgcolor red>test</fgcolor>" {string}, where "test" is displayed in red color
    *   "this is a <b><off 4>test</off></b> of ex-HTML caption" {string}, where "test" is displayed in bold with a different vertical-offset
    */
     text: null,
    /**
    * @description The formatText field specifies the format to display the object's caption.
    *
    * The exontrol.DrawTextFormatEnum type support the following flags:
    *
    *   exTextAlignTop (0x00), justifies the text to the top of the rectangle
    *   exTextAlignLeft (0x00), aligns text to the left
    *   exTextAlignCenter (0x01), centers text horizontally in the rectangle
    *   exTextAlignRight (0x02), aligns text to the right
    *   exTextAlignVCenter (0x04), centers text vertically
    *   exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle.
    *   exTextAlignMask (0x0F), specifies the mask for text's alignment.
    *   exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line.
    *   exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line.
    *   exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight.
    *   exPlainText (0x80), treats the text as plain text.
    *   exTextNoClip (0x0100), draws without clipping.
    *   exHTMLTextNoColors (0x0200), ignores the <fgcolor> and </bgcolor> tags.
    *   exTextCalcRect (0x0400), determines the width and height of the text.
    *   exHTMLTextNoTags (0x0800), ignores all HTML tags.
    *   exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash.
    *   exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses.
    *   exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses.
    *
    * @type {exontrol.DrawTextFormatEnum}
    * @example
    *
    *   null {null}, defines a single-line centered text (equivalent of exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextAlignVCenter | exontrol.DrawTextFormatEnum.exTextWordEllipsis )
    *   32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line text
    *   0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line text right/bottom-aligned
    */
     formatText: null,
    /**
    * @description The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.
    *
    * The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:
    *
    *   bold, displays the text in bold (equivalent of <b> tag)
    *   italic, displays the text in italics (equivalent of <i> tag)
    *   underline, underlines the text (equivalent of <u> tag)
    *   strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
    *   <fontName name>, specifies the font's family (equivalent of <font name> tag)
    *   <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
    *   <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
    *   <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
    *   <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
    *   <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
    *   <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)
    *
    * Any other word within the tfi field that's not recognized as a keyword is interpreted as:
    *
    *   name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
    *   size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)
    *
    * The tfi field as object supports any of the following fields:
    *
    *   bold {boolean}, displays the text in bold (equivalent of <b> tag)
    *   italic {boolean}, displays the text in italics (equivalent of <i> tag)
    *   underline {boolean}, underlines the text (equivalent of <u> tag)
    *   strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
    *   fontName {string}, specifies the font's family (equivalent of <font name> tag)
    *   fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
    *   fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
    *   bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
    *   shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
    *     color {string}, defines the color of the text's shadow (CSScolor)
    *     width {number}, defines the size of the text's shadow
    *     offset {number}, defines the offset to show the text's shadow relative to the text
    *   outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
    *   graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
    *     color {string}, defines the gradient-color (CSScolor)
    *     mode {number}, defines the gradient mode as a value between 0 and 4
    *     blend {number}, defines the gradient blend as a value between 0 and 1
    *
    * CSSColor or CSS legal color values can be specified by the following methods:
    *
    *   Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
    *   Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
    *   RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
    *   RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
    *   HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
    *   HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
    *   Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
    *
    * @type {(string|object)}
    * @example
    *
    *   null {null}, the tfi field is ignored
    *   "bold monospace 16" {string}, defines Monospace font of 16px height, bold
    *   {bold: true, fontName: "monospace", fontSize: 16} {object}, defines Monospace font of 16px height, bold
    */
     tfi: null,
    /**
    * @description The clipText field indicates whether the caption is clipped to object.
    * @type {boolean}
    * @example
    *
    *   false {boolean}, the text/caption is not cliped
    *   true {boolean}, the text/caption is cliped to the object's client-rectangle
    */
     clipText: false,
    /**
    * @description The frameColor field defines the color to show the object's frame (see also primitive).
    * @type {string}
    * @example
    *
    *  null {null}, specifies no frame
    *  "transparent" or "rgba(0,0,0,0)"  {string}, defines a transparent frame
    *  "red" {string}, defines a red-frame
    *  "rgb(255,0,0)" {string}, defines a red-frame
    *  "rgba(255,0,0,0.5)" {string}, defines a 50% red-frame
    */
     frameColor: null,
    /**
    * @description The frameSize field defines size of the object's frame.
    * @type {number}
    * @example
    *
    *  null {null}, draws the frame, only if the frameColor is defined
    *  0 {number}, shows no frame
    *  4 {number}, defines a 4-pixels frame
    */
     frameSize: null,
    /**
    * @description The frameDash field defines style of the object's frame. An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated.
    * @type {array}
    * @example
    *
    *  null {null}, defines a solid frame
    *  [] {array}, indicates a solid frame
    *  2 {number}, will become [2, 2, ...]
    *  [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...]
    */
     frameDash: null,
    /**
    * @description The frameJoin field determines how two connecting segments into the object's frame are joined together. There are three possible values for this property as follows:
    *
    *  "round", rounds off the corners of a object by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    *  "bevel", fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    *  "miter", connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area.
    *
    * @type {string}
    * @example
    *
    *  null {null}, defines a "miter" join
    *  "round" {string}, rounds off the corners of a object by filling an additional sector of disc centered at the common endpoint of connected segments.
    */
     frameJoin: null,
    /**
    * @description The frameCap field determines how the end points of every line into the object's frame are drawn. There are three possible values for this property as follows:
    *
    *  "butt", the ends of lines are squared off at the endpoints.
    *  "round", the ends of lines are rounded
    *  "square", the ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    *
    * @type {string}
    * @example
    *
    *  null {null}, indicates "but" style
    *  "round" {string}, the ends of lines are rounded
    */
     frameCap: null,
    /**
    * @description The pattern field defines the pattern to show on the object's background (see also patternColor).
    *
    * The exontrol.PatternEnum type defines the following values:
    *
    *   exPatternEmpty (0), defines no pattern
    *   exPatternSolid (1), defines a solid-pattern
    *   exPatternDot (2), defines a dot-pattern
    *   exPatternShadow (3), defines a shadow-pattern
    *   exPatternNDot (4), defines a not-dot-pattern
    *   exPatternFDiagonal (5), defines a forward-diagonal-pattern
    *   exPatternBDiagonal (6), defines a backward-diagonal-pattern
    *   exPatternDiagCross (7), defines a cross-diagonal-pattern
    *   exPatternVertical (8), defines a vertical-pattern
    *   exPatternHorizontal (9), defines a horizontal-pattern
    *   exPatternCross (10), defines a cross-pattern
    *   exPatternBrick (11), defines a brick-pattern
    *   exPatternYard (12), defines a yard-pattern
    *
    * @type {exontrol.PatternEnum}
    * @example
    *
    *  null {null}, defines no pattern
    *  0 or exontrol.PatternEnum.exPatternEmpty {number}, defines an empty pattern (no pattern)
    *  7 or exontrol.PatternEnum.exPatternDiagCross {number}, defines a cross-diagonal-pattern
    */
     pattern: null,
    /**
    * @description The patternColor field defines the color to show the object's pattern (see also pattern).
    * @type {string}
    * @example
    *
    *  null {null}, indicates a black-color
    *  "transparent" or "rgba(0,0,0,0)"  {string}, defines a transparent pattern
    *  "red" {string}, defines a red-pattern
    *  "rgb(255,0,0)" {string}, defines a red-pattern
    *  "rgba(255,0,0,0.5)" {string}, defines a 50% red-pattern
    */
     patternColor: null,
    /**
     * @description The shadow field holds information about box's shadow.
     * @type {object}
     */
    shadow:
    {
      /**
      * @description The color field defines the shadow's color. Defines the shadow's color in CSS format. The color, x or y properties have no effect while blur property is not defined.
      * @type {string}
      * @example
      *
      *  null {null}, indicates that the frameColor or fillColor property determines the shadow's color
      *  "transparent" or "rgba(0,0,0,0)"  {string}, defines a transparent shadow
      *  "red" {string}, defines a red-shadow
      *  "rgb(255,0,0)" {string}, defines a red-shadow
      *  "rgba(255,0,0,0.5)" {string}, defines a 50% red-shadow
      */
       color: null,
      /**
      * @description The blur field defines the blur level for shadows.
      * @type {number}
      * @example
      *
      *  0 {number}, indicates no shadow
      *  4 {number}, defines shadow's blur to 4
      */
       blur: 0,
      /**
      * @description The x field defines the horizontal distance of the shadow from the object. Defines horizontal distance of the shadow from the object. The color, x or y properties have no effect while blur property is not defined.
      * @type {number}
      * @example
      *
      *  0 {number}, indicates the shadow's x-offset at 0
      *  -4 {number}, defines shadow's x-offset to -4
      *  4 {number}, defines shadow's x-offset to 4
      */
       x: 0,
      /**
      * @description The y field defines vertical distance of the shadow from the object. By default, it is 0.
      * @type {number}
      * @example
      *
      *  0 {number}, indicates the shadow's y-offset at 0
      *  -4 {number}, defines shadow's y-offset to -4
      *  4 {number}, defines shadow's y-offset to 4
      */
       y: 0
    },
    /**
    * @description The primitive field defines the type of frame the object is displaying (see also pArg)
    *
    *  The primitive could be any of the following predefined values:
    *
    *    "Rect" {string}, defines a rectangular-object
    *    "RoundRect" {string}, defines a round rectangular-object. The pArg.x, pArg.y define the radius of round-corners.
    *    "BevelRect" {string}, defines a bevel rectangular-object. The pArg.x, pArg.y define the radius of round-corners.
    *    "Ellipse" {string}, defines an elliptic-object
    *    "Pie" {string}, defines a pie-object. The pArg.startAngle property defines the angle (radians) the pie starts from. The pArg.sweepAngle property defines the length (radians) of the pie.
    *    "Arc" {string}, defines an arc-object. The pArg.startAngle property defines the angle (radians) the arc starts from. The pArg.sweepAngle property defines the length (radians) of the arc.
    *    "Oval" {string}, defines an oval-object.
    *    "Circle" {string}, defines a circle-object.
    *    "Triangle" {string}, defines a triangle-object.
    *    "EllipticPolygon" {string}, defines an elliptic-polygon-object. The pArg.edges property defines the number of edges within the elliptic-polygon. The pArg.startAngle property defines the angle (radians) the elliptic-polygon starts from.
    *    "Polygon" {string}, defines a polygon-object. The pArg.points property defines points of the polygon.
    *    "Star" {string}, defines a star-object. The pArg.edges property defines the number of edges of the star. The pArg.startAngle property defines the angle (radians) the star-object starts from. The pArg.deep defines the star's deepness, while pArg.tilt defines the star's tile as a number betwee 0 and 1
    *    "Spline" {string}, defines the Catmull-Rom spline-primitive (a curve that goes through its control points). The pArg.points property defines the control-points of the curve. The pArg.tension property specifies the tension of the curve, as a value ptFrom 0(round) to 1 (rectangular). The pArg.alpha specifies the alpha of the curve (0.5 by default), while pArg.closed defines a closed curve
    *    "Summary" {string}, defines a summary-object (outlines the summary-bar)
    *    "Deadline" {string}, defines a deadline-object (outlines the deadline-bar)
    *
    * @type {string}
    * @example
    *
    *   null {null}, defines a rectangular-object
    *   "Ellipse" {string}, defines an elliptic-object
    */
     primitive: "RoundRect",
    /**
     * @description The pArg field holds different properties to customize the object's primitive (see also primitive).
     * @type {object}
    */
    pArg:
    {
      /**
       * @description The x field defines the x-radius of the round-rectangle object.
       *
       * The x field has effect only if the primitive is:
       *
       *  "RoundRect", defines a round-rectangle
       *  "BevelRect", defines a bevel-rectangle
       *
       * @type {number}
       * @example
       *
       *  0 {number}, indicates no round-corner for x-axis
       *  8 {number}, defines a round corner (of 8-pixels radius) for x-axis
      */
       x: 2,
      /**
       * @description The y field defines the y-radius of the round-rectangle object.
       *
       * The y field has effect only if the primitive is:
       *
       *  "RoundRect", defines a round-rectangle
       *  "BevelRect", defines a bevel-rectangle
       *
       * @type {number}
       * @example
       *
       *  0 {number}, indicates no round-corner for y-axis
       *  8 {number}, defines a round corner (of 8-pixels radius) for y-axis
      */
       y: 2,
      /**
       * @description The startAngle field defines the angle (radians) the object's primitive starts from.
       *
       * The startAngle field has effect only if the primitive is:
       *
       *  "Arc", defines an arc-object
       *  "Pie", defines a pie-object
       *  "EllipticPolygon", defines an elliptic-polygon-object
       *  "Star", defines a star-object
       *
       * @type {number}
       * @example
       *
       *  0 {number}, indicates that the primitive starts at 0 degree (12 o'clock)
       *  -Math.PI/2 {number}, starts at -90 degree (9 o'clock)
      */
       startAngle: undefined,
      /**
       * @description The sweepAngle field defines the length (as an angle in radians) of the object's primitive.
       *
       * The sweepAngle field has effect only if the primitive is:
       *
       *  "Arc", defines an arc-object
       *  "Pie", defines a pie-object
       *
       * @type {number}
       * @example
       *
       *  0 {number}, indicates a zero-length (the primitive may not be visible while length is 0)
       *  Math.PI/2 {number}, defines the 90 degree length.
      */
       sweepAngle: undefined,
      /**
       * @description The edges field defines the number of edges of the object's primitive. It should be greater or equal than 3.
       *
       * The edges field has effect only if the primitive is:
       *
       *  "EllipticPolygon", defines an elliptic-polygon-object
       *  "Star", defines a star-object
       *
       * @type {number}
       * @example
       *
       *  null {null}, defines a triangle
       *  3 {number}, defines a triangle
       *  8 {number}, defines an octagon
      */
       edges: undefined,
      /**
       * @description The points field defines the points object's polygon, or the control-points of the spline-curve. Defines the points object's polygon as an array of [[x,y]] or [{x,y}] type. There must be more than 3-points defines.
       *
       * The points field has effect only if the primitive is:
       *
       *  "Polygon", defines a polygon-object.
       *  "Spline", defines a spline-curve (a curve that goes through its control points)
       *
       * @type {array}
       * @example
       *
       *  [[0,100],[50,0],[100,100]] {array}, defines a triangle
       *  [{x:0,y:100},{x:50,y:0},{x:100,y:100}] {array}, defines a triangle
      */
       points: undefined,
      /**
       * @description The deep field defines star's deep (defines the isotoxal star-polygon's deepnnes).
       *
       * The deep field has effect only if the primitive is:
       *
       *  "Star", defines a star-object
       *
       * @type {number}
       * @example
       *
       *  null {null}, defines the start's default deep as a result of sin(PI/edges) expression based on the number of edges the star has.
       *  0 {number}, the star is equivalent with an elliptic-polygon
       *  0.5 {number}, defines the star's deep to 0.5 (half of the radius)
      */
       deep: undefined,
      /**
       * @description The tilt field defines star's tilt.  Defines star's tilt as a number between 0 and 1.
       *
       * The tilt field has effect only if the primitive is:
       *
       *  "Star", defines a star-object
       *
       * @type {number}
       * @example
       *
       *  null {null}, defines the start's default tilt (0.5).
       *  0 {number}, the star' vertices go more to right
       *  1 {number}, the star' vertices go more to left
      */
       tilt: undefined,
      /**
       * @description The tension field specifies the tension of the curve(spline), as a value from 0(round) to 1 (rectangular)
       *
       * The tension field has effect only if the primitive is:
       *
       *  "Spline", defines a spline-curve (a curve that goes through its control points)
       *
       * @type {number}
       * @example
       *
       *  0 {number} or null {null}, defines the spline's default tension (0 or round)
       *  1 {number}, the curve shows as rectangular
      */
       tension: undefined,
      /**
       * @description The tension field specifies the alpha of the curve(spline), as a value from 0 to 1
       *
       * The alpha field has effect only if the primitive is:
       *
       *  "Spline", defines a spline-curve (a curve that goes through its control points)
       *
       * @type {number}
       * @example
       *
       *  null {null}, defines the spline's default alpha (0.5)
      */
       alpha: undefined,
      /**
       * @description The closed field defines a closed spline(curve)
       *
       * The closed field has effect only if the primitive is:
       *
       *  "Spline", defines a spline-curve (a curve that goes through its control points)
       *
       * @type {number}
       * @example
       *
       *  false {boolean} or null {null}, defines an opened spline-curve
       *  true {boolean}, defines a closed spline-curve
      */
       closed: undefined
    },
    /**
    * @description The draw field specifies a callback function to let you perform custom drawing on the current object. By default, the draw field is null, which indicates that it has no effect. Indicates a function, to perform additional drawing on the current object. The draw supports two parameters as follows:
    *
    *  ctx {object}, An object of CanvasRenderingContext2D type that specifies the context to draw
    *  client {array}, Indicates an array of [x,y,width,height] type that specfies the original client area to paint the object.
    *
    * During the callback the this keyword reffers the current object object.
    *
    * @type {callback}
    */
     draw: null
  }
}
/**
 * @description The exontrol.helpTFI namespace provides documentation for exontrol.TFI object, which holds font attributes to displays a text or a portion of text
*/
exontrol.helpTFI =
{
  /**
  * @description The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.
  *
  * The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:
  *
  *   bold, displays the text in bold (equivalent of <b> tag)
  *   italic, displays the text in italics (equivalent of <i> tag)
  *   underline, underlines the text (equivalent of <u> tag)
  *   strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
  *   <fontName name>, specifies the font's family (equivalent of <font name> tag)
  *   <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
  *   <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
  *   <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
  *   <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
  *   <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  *   <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)
  *
  * Any other word within the tfi field that's not recognized as a keyword is interpreted as:
  *
  *   name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
  *   size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)
  *
  * The tfi field as object supports any of the following fields:
  *
  *   bold {boolean}, displays the text in bold (equivalent of <b> tag)
  *   italic {boolean}, displays the text in italics (equivalent of <i> tag)
  *   underline {boolean}, underlines the text (equivalent of <u> tag)
  *   strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
  *   fontName {string}, specifies the font's family (equivalent of <font name> tag)
  *   fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
  *   fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
  *   bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
  *   shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
  *     color {string}, defines the color of the text's shadow (CSScolor)
  *     width {number}, defines the size of the text's shadow
  *     offset {number}, defines the offset to show the text's shadow relative to the text
  *   outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  *   graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
  *     color {string}, defines the gradient-color (CSScolor)
  *     mode {number}, defines the gradient mode as a value between 0 and 4
  *     blend {number}, defines the gradient blend as a value between 0 and 1
  *
  * CSSColor or CSS legal color values can be specified by the following methods:
  *
  *   Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
  *   Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
  *   RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
  *   RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
  *   HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
  *   HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
  *   Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
  *
  * @type {(string|object)}
  * @example
  *
  *   null {null}, the tfi field is ignored
  *   "bold monospace 16" {string}, defines Monospace font of 16px height, bold
  *   {bold: true, fontName: "monospace", fontSize: 16} {object}, defines Monospace font of 16px height, bold
  */
  tfi:
  {
    /**
     * @description The bold field specifies whether characters in text should be displayed in bold (equivalent of <b> tag of ex-HTML captions).
     * @type {boolean}
     * @example
     *
     *  true {boolean}, indicates that the text is displayed in bold
     *  false {boolean}, displays normal text
    */
     bold: false,
    /**
     * @description The italic field specifies whether characters in text should be displayed in italics (equivalent of <i> tag of ex-HTML captions).
     * @type {boolean}
     * @example
     *
     *  true {boolean}, indicates that the text is displayed in italics
     *  false {boolean}, displays normal text
    */
     italic: false,
    /**
     * @description The underline field specifies whether characters in text are underlined (equivalent of <u> tag of ex-HTML captions).
     * @type {boolean}
     * @example
     *
     *  true {boolean}, indicates that the text is underlined
     *  false {boolean}, displays normal text
    */
     underline: false,
    /**
     * @description The strikeout field specifies whether characters in text are strike-through (equivalent of <s> tag of ex-HTML captions).
     * @type {boolean}
     * @example
     *
     *  true {boolean}, indicates that characters in text are strike-through
     *  false {boolean}, displays normal text
    */
     strikeout: false,
    /**
     * @description The fgcolor field specifies the text's foreground color (equivalent of <fgcolor color> tag of ex-HTML captions).
     * @type {string}
     * @example
     *
     *  null {null}, specifies that the fgcolor field is ignored
     *  "red" {string}, displays the text in red color
     *  "rgb(255,0,0)" {string}, displays the text in red color
     *  "rgba(255,0,0,0.5)" {string}, displays the text in semi-transparent red color
    */
     fgColor: null,
    /**
     * @description The bgcolor field specifies the text's background color (equivalent of <bgcolor color> tag of ex-HTML captions).
     * @type {string}
     * @example
     *
     *  null {null}, specifies that the bgcolor field is ignored
     *  "red" {string}, displays the text's background in red color
     *  "rgb(255,0,0)" {string}, displays the text's background in red color
     *  "rgba(255,0,0,0.5)" {string}, displays the text's background in semi-transparent red color
    */
     bgColor: null,
    /**
     * @description The fontSize field defines the size to display the font (equivalent of <font family;size> tag of ex-HTML captions).
     * @type {number}
     * @example
     *
     *  null {null}, specifies that the fontSize field is ignored
     *  12 {number}, defines the size of the font to 12 pixels
    */
     fontSize: null,
    /**
     * @description The fontName field defines family of the font to show the text (equivalent of <font family;size> tag of ex-HTML captions).
     * @type {string}
     * @example
     *
     *  null {null}, specifies that the fontName field is ignored
     *  "Georgia" {string}, indicates Georgia font family
    */
     fontName: null,
    /**
     * @description The shacolor field defines the text's shadow (equivalent of <sha color;width;offset> tag of ex-HTML captions).
     * @type {object}
    */
    shaColor:
    {
      /**
       * @description The color field specifies the color for text's shadow (equivalent of <sha color;width;offset> tag of ex-HTML captions).
       * @type {string}
       * @example
       *
       *  null {null}, specifies that the color field is ignored
       *  "red" {string}, defines red shadow for text
       *  "rgb(255,0,0)" {string}, defines red shadow for text
       *  "rgba(255,0,0,0.5)" {string}, defines semi-transparent red shadow for text
      */
       color: null,
      /**
       * @description The width field defines the size of text's shadow (equivalent of <sha color;width;offset> tag of ex-HTML captions).
       * @type {number}
       * @example
       *
       *  null {null}, specifies that the width field is ignored
       *  4 {number}, indicates a 4-pixels wide for text's shadow
      */
       width: null,
      /**
       * @description The offset field defines the offset of text's shadow (equivalent of <sha color;width;offset> tag of ex-HTML captions).
       * @type {number}
       * @example
       *
       *  null {null}, specifies that the offset field is ignored
       *  4 {number}, shows the text's shadow with a different offset
      */
       offset: null
    },
    /**
     * @description The outcolor field defines color to show outlined text (equivalent of <out color> tag of ex-HTML captions).
     * @type {string}
     * @example
     *
     *  null {null}, specifies that the outcolor field is ignored
     *  "red" {string}, defines a red-outlined text
     *  "rgb(255,0,0)" {string}, defines a red-outlined text
     *  "rgba(255,0,0,0.5)" {string}, defines a semi-tranparent red-outlined text
    */
     outColor: null,
    /**
     * @description The gracolor field specifies whether the text is show in gradient (equivalent of <gra color;mode;blend> tag of ex-HTML captions).
     * @type {object}
    */
    graColor:
    {
      /**
       * @description The color field specifies the color for text's gradient (equivalent of <gra color;mode;blend> tag of ex-HTML captions).
       * @type {string}
       * @example
       *
       *  null {null}, specifies that the color field is ignored
       *  "red" {string}, defines a red-gradient text
       *  "rgb(255,0,0)" {string}, defines a red-gradient text
       *  "rgba(255,0,0,0.5)" {string}, defines a semi-tranparent red-gradient text
      */
       color: null,
      /**
       * @description The mode field defines mode of the text's gradient (equivalent of <gra color;mode;blend> tag of ex-HTML captions). The mode is a value between 0 and 3, 1 if missing/null or undefined.
       * @type {number}
       * @example
       *
       *  0 {number}, defines the gradient from left to right
       *  1 {number}, defines the gradient from right to left
       *  2 {number}, defines the gradient from top to bottom
       *  3 {number}, defines the gradient from bottom to top
       *
      */
       mode: null,
      /**
       * @description The blend field defines gradient's blend value (equivalent of <gra color;mode;blend> tag of ex-HTML captions). Could be 0 or 1. Currently, the gradient's blend is not available
       * @type {number}
      */
       blend: null
    }
  }
}

/**
 * @description The exontrol.helpShape namespace provides documentation for exontrol.S objects.
*/
exontrol.helpShape =
{
  /**
  * @description The shape field includes definitions to draw shapes. An object of exontrol.Def.Shape type.
  * @type {object}
  */
  shape:
  {
    /**
     * @description The opacity field sets the opacity level of the object. It is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
     * @type {number}
     * @example
     *
     *  null {null}, the opacity field is ignored
     *  0 {number}, completely transparent
     *  0.5 {number}, semi-transparent
     *  1 {number}, fully-opaque
    */
     opacity: null,
    /**
     * @description The client field specifies a collection of up to four expressions that can define a different client area to show the object (see also padding). A string expression of "[expression,expression,expression,expression]" type, that determines the x, y, width and height of the new client. The client field must starts with "[" and ends with "]", else it has no effect.
     *
     * Each expression supports the following keywords:
     *
     *   x {number}, defines the object's default-left position
     *   y {number}, defines the object's default-top position
     *   width {number}, indicates the default-width of the object
     *   height {number}, indicates the default-width of the object.
     *
     * @type {string}
     * @example
     *
     *   null {null}, the client field is ignored
     *   "[x+64,y-32]" {string}, displays the object at a different position (offset by 64-pixels on x-axis, and 32-pixels up on y-axis)
     *   "[x-8,y-4,width+2*8,height+2*4]" {string}, is equivalent of padding on [8,4]
     *   "[x+(width-16)/2,y+(height-16)/2,16,16]" {string}, centers a 16x16 rectangle inside the client
    */
     client: null,
    /**
     * @description The padding field defines how much the object's client area is increased or decreased (see also client)
     * @type {(number|string|array)}
     * @example
     *
     *   null {null}, indicates that the padding field is ignored
     *   4 {number}, increases the object's client with 2 * 4-pixels, which includes width and height
     *   "8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
     *   [8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
    */
     pad: null,
    /**
    * @description The fillColor field defines the color to show the object's background.
    * @type {string}
    * @example
    *
    *  null {null}, specifies that the fillColor field is ignored
    *  "transparent" {string}, fills the object's background with rgba(0,0,0,0)/transparent color
    *  "red" {string}, fills the object's background with red color
    *  "rgb(255,0,0)" {string}, fills the object's background with red color
    *  "rgba(255,0,0,0.5)" {string}, fills the object's background with semi-tranparent red color
    */
     fillColor: null,
    /**
    * @description The fillGradientColor field defines the gradient type and colors to show the object's background.
    * @type {string}
    *
    * The fillColor field defines the starting color. The fillGradientColor field has effect only if the fillColor field is defined (not null or undefined).
    *
    * The first field of the fillGradientColor field could start with any of the following:
    *
    *   "vertical", defines a vertical-gradient (default)
    *   "horizontal", defines a horizontal-gradient
    *   "diagonal", defines a diagonal-gradient
    *   "radial", defines a radial-gradient
    *
    * The next fields indicates the stop-colors.
    *
    * @example
    *
    *  null {null}, specifies that the fillGradientColor field is ignored, so no gradient is applied on the object's background.
    *  "black" {string}, specifies a vertical-gradient that starts from fillColor and ends on black.
    *  "horizontal,red,green,blue" {string}, specifies a horizontal-gradient that starts from fillColor, continues with red, green and ends on blue.
    *  "diagonal,red,rgba(0,255,0,0.5),blue" {string}, specifies a diagonal-gradient that starts from fillColor, continues with red, 50% green and ends on blue.
    *  "radial,black" {string}, specifies a radial/circular-gradient that starts from fillColor and ends on black.
    */
     fillGradientColor: null,
    /**
     * @description The clientText field specifies a collection of up to four expressions that defines the new client area to display the shape's text (equivalent of offset, pad), relative to the shape's client area. A string expression of "[expression,expression,expression,expression]" type, that determines the x, y, width and height of the new client text. The clientText field must starts with "[" and ends with "]", else it has no effect.
     *
     * Each expression supports the following keywords:
     *
     *   x {number}, defines the object's default-left position
     *   y {number}, defines the object's default-top position
     *   width {number}, indicates the default-width of the object
     *   height {number}, indicates the default-width of the object.
     *
     * @type {string}
     * @example
     *
     *   null {null}, the clientText field is ignored
     *   "[x+64,y-32]" {string}, displays the text at a different position (offset by 64-pixels on x-axis, and 32-pixels up on y-axis)
     *   "[x-8,y-4,width+2*8,height+2*4]" {string}, is equivalent of padding on [8,4]
     *   "[,,width-20]" {string}, narrows the text's client with 20 pixels on right
    */
     clientText: null,
    /**
    * @description The padText field defines the padding to display the object's caption (see also text).
    * @type {number}
    * @example
    *
    *   null {null}, indicates that the padText field is ignored
    *   4 {number}, increases the caption's client with 2 * 4-pixels, which includes width and height
    *   "8,4" {string}, increases the caption's width with 2 * 8-pixels and caption's height with 2 * 4-pixels
    *   [8,4] {array}, increases the caption's width with 2 * 8-pixels and caption's height with 2 * 4-pixels
    */
     padText: null,
    /**
    * @description The text field defines the caption to be displayed on the object. The caption/text supports ex-HTML tags as listed bellow:
    *
    *   "<b>text</b>", displays the text in bold.
    *   "<i>text</i>", displays the text in italics.
    *   "<u>text</u>", underlines the text.
    *   "<s>text</s>", strike-through text
    *   "<a [id][;options]>text</a>", displays an anchor element that can be clicked
    *   "<font [family][;size]>text</font>", displays portions of text with a different font and/or different size.
    *   "<fgcolor color>text</fgcolor>", displays text with a specified foreground color.
    *   "<bgcolor color>text</bgcolor>", displays text with a specified background color.
    *   "<br>", defines a forced line-break
    *   "<r>", right aligns the text
    *   "<c>", centers the text
    *   "<img>key[:width]</img>", displays a custom-sized picture into the text. The key defines the name of the picture/image to be shown. The image can be added using the exontrol.HTMLPicture.Add() method.
    *   & glyph characters as "&amp;" ( & ), "&lt;" ( < ), "&gt;" ( > ),  "&qout;" ( quote character ) and "&#number;" ( the character with specified code ). For instance, "&#8364;" displays the EURO sign
    *   "<off offset>text</off>", defines the vertical offset to display the text.
    *   "<gra color[;mode[;blend]]>text</gra>", shows the text in gradient
    *   "<out color[;width]>text</out>", shows the text with outlined characters
    *   "<sha color[;width[;offset]]>text</sha>", shows the text with a shadow
    *
    * @type {string}
    * @example
    *
    *   null {null}, ignores the text field
    *   "this is a <fgcolor red>test</fgcolor>" {string}, where "test" is displayed in red color
    *   "this is a <b><off 4>test</off></b> of ex-HTML caption" {string}, where "test" is displayed in bold with a different vertical-offset
    */
     text: null,
    /**
    * @description The formatText field specifies the format to display the object's caption.
    *
    * The exontrol.DrawTextFormatEnum type support the following flags:
    *
    *   exTextAlignTop (0x00), justifies the text to the top of the rectangle
    *   exTextAlignLeft (0x00), aligns text to the left
    *   exTextAlignCenter (0x01), centers text horizontally in the rectangle
    *   exTextAlignRight (0x02), aligns text to the right
    *   exTextAlignVCenter (0x04), centers text vertically
    *   exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle.
    *   exTextAlignMask (0x0F), specifies the mask for text's alignment.
    *   exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line.
    *   exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line.
    *   exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight.
    *   exPlainText (0x80), treats the text as plain text.
    *   exTextNoClip (0x0100), draws without clipping.
    *   exHTMLTextNoColors (0x0200), ignores the <fgcolor> and </bgcolor> tags.
    *   exTextCalcRect (0x0400), determines the width and height of the text.
    *   exHTMLTextNoTags (0x0800), ignores all HTML tags.
    *   exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash.
    *   exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses.
    *   exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses.
    *
    * @type {exontrol.DrawTextFormatEnum}
    * @example
    *
    *   null {null}, defines a single-line centered text (equivalent of exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextAlignVCenter | exontrol.DrawTextFormatEnum.exTextWordEllipsis )
    *   32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line text
    *   0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line text right/bottom-aligned
    */
     formatText: null,
    /**
    * @description The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.
    *
    * The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:
    *
    *   bold, displays the text in bold (equivalent of <b> tag)
    *   italic, displays the text in italics (equivalent of <i> tag)
    *   underline, underlines the text (equivalent of <u> tag)
    *   strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
    *   <fontName name>, specifies the font's family (equivalent of <font name> tag)
    *   <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
    *   <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
    *   <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
    *   <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
    *   <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
    *   <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)
    *
    * Any other word within the tfi field that's not recognized as a keyword is interpreted as:
    *
    *   name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
    *   size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)
    *
    * The tfi field as object supports any of the following fields:
    *
    *   bold {boolean}, displays the text in bold (equivalent of <b> tag)
    *   italic {boolean}, displays the text in italics (equivalent of <i> tag)
    *   underline {boolean}, underlines the text (equivalent of <u> tag)
    *   strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
    *   fontName {string}, specifies the font's family (equivalent of <font name> tag)
    *   fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
    *   fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
    *   bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
    *   shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
    *     color {string}, defines the color of the text's shadow (CSScolor)
    *     width {number}, defines the size of the text's shadow
    *     offset {number}, defines the offset to show the text's shadow relative to the text
    *   outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
    *   graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
    *     color {string}, defines the gradient-color (CSScolor)
    *     mode {number}, defines the gradient mode as a value between 0 and 4
    *     blend {number}, defines the gradient blend as a value between 0 and 1
    *
    * CSSColor or CSS legal color values can be specified by the following methods:
    *
    *   Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
    *   Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
    *   RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
    *   RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
    *   HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
    *   HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
    *   Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
    *
    * @type {(string|object)}
    * @example
    *
    *   null {null}, the tfi field is ignored
    *   "bold monospace 16" {string}, defines Monospace font of 16px height, bold
    *   {bold: true, fontName: "monospace", fontSize: 16} {object}, defines Monospace font of 16px height, bold
    */
     tfi: null,
    /**
    * @description The clipText field indicates whether the caption is clipped to object.
    * @type {boolean}
    * @example
    *
    *   false {boolean}, the text/caption is not cliped
    *   true {boolean}, the text/caption is cliped to the object's client-rectangle
    */
     clipText: false,
    /**
    * @description The frameColor field defines the color to show the object's frame (see also primitive).
    * @type {string}
    * @example
    *
    *  null {null}, specifies no frame
    *  "transparent" or "rgba(0,0,0,0)"  {string}, defines a transparent frame
    *  "red" {string}, defines a red-frame
    *  "rgb(255,0,0)" {string}, defines a red-frame
    *  "rgba(255,0,0,0.5)" {string}, defines a 50% red-frame
    */
     frameColor: null,
    /**
    * @description The frameSize field defines size of the object's frame.
    * @type {number}
    * @example
    *
    *  null {null}, draws the frame, only if the frameColor is defined
    *  0 {number}, shows no frame
    *  4 {number}, defines a 4-pixels frame
    */
     frameSize: null,
    /**
    * @description The frameDash field defines style of the object's frame. An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated.
    * @type {array}
    * @example
    *
    *  null {null}, defines a solid frame
    *  [] {array}, indicates a solid frame
    *  2 {number}, will become [2, 2, ...]
    *  [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...]
    */
     frameDash: null,
    /**
    * @description The frameJoin field determines how two connecting segments into the object's frame are joined together. There are three possible values for this property as follows:
    *
    *  "round", rounds off the corners of a object by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
    *  "bevel", fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
    *  "miter", connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area.
    *
    * @type {string}
    * @example
    *
    *  null {null}, defines a "miter" join
    *  "round" {string}, rounds off the corners of a object by filling an additional sector of disc centered at the common endpoint of connected segments.
    */
     frameJoin: null,
    /**
    * @description The frameCap field determines how the end points of every line into the object's frame are drawn. There are three possible values for this property as follows:
    *
    *  "butt", the ends of lines are squared off at the endpoints.
    *  "round", the ends of lines are rounded
    *  "square", the ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
    *
    * @type {string}
    * @example
    *
    *  null {null}, indicates "but" style
    *  "round" {string}, the ends of lines are rounded
    */
     frameCap: null,
    /**
    * @description The pattern field defines the pattern to show on the object's background (see also patternColor).
    *
    * The exontrol.PatternEnum type defines the following values:
    *
    *   exPatternEmpty (0), defines no pattern
    *   exPatternSolid (1), defines a solid-pattern
    *   exPatternDot (2), defines a dot-pattern
    *   exPatternShadow (3), defines a shadow-pattern
    *   exPatternNDot (4), defines a not-dot-pattern
    *   exPatternFDiagonal (5), defines a forward-diagonal-pattern
    *   exPatternBDiagonal (6), defines a backward-diagonal-pattern
    *   exPatternDiagCross (7), defines a cross-diagonal-pattern
    *   exPatternVertical (8), defines a vertical-pattern
    *   exPatternHorizontal (9), defines a horizontal-pattern
    *   exPatternCross (10), defines a cross-pattern
    *   exPatternBrick (11), defines a brick-pattern
    *   exPatternYard (12), defines a yard-pattern
    *
    * @type {exontrol.PatternEnum}
    * @example
    *
    *  null {null}, defines no pattern
    *  0 or exontrol.PatternEnum.exPatternEmpty {number}, defines an empty pattern (no pattern)
    *  7 or exontrol.PatternEnum.exPatternDiagCross {number}, defines a cross-diagonal-pattern
    */
     pattern: null,
    /**
    * @description The patternColor field defines the color to show the object's pattern (see also pattern).
    * @type {string}
    * @example
    *
    *  null {null}, indicates a black-color
    *  "transparent" or "rgba(0,0,0,0)"  {string}, defines a transparent pattern
    *  "red" {string}, defines a red-pattern
    *  "rgb(255,0,0)" {string}, defines a red-pattern
    *  "rgba(255,0,0,0.5)" {string}, defines a 50% red-pattern
    */
     patternColor: null,
    /**
     * @description The shadow field holds information about box's shadow.
     * @type {object}
     */
    shadow:
    {
      /**
      * @description The color field defines the shadow's color. Defines the shadow's color in CSS format. The color, x or y properties have no effect while blur property is not defined.
      * @type {string}
      * @example
      *
      *  null {null}, indicates that the frameColor or fillColor property determines the shadow's color
      *  "transparent" or "rgba(0,0,0,0)"  {string}, defines a transparent shadow
      *  "red" {string}, defines a red-shadow
      *  "rgb(255,0,0)" {string}, defines a red-shadow
      *  "rgba(255,0,0,0.5)" {string}, defines a 50% red-shadow
      */
       color: null,
      /**
      * @description The blur field defines the blur level for shadows.
      * @type {number}
      * @example
      *
      *  0 {number}, indicates no shadow
      *  4 {number}, defines shadow's blur to 4
      */
       blur: 0,
      /**
      * @description The x field defines the horizontal distance of the shadow from the object. Defines horizontal distance of the shadow from the object. The color, x or y properties have no effect while blur property is not defined.
      * @type {number}
      * @example
      *
      *  0 {number}, indicates the shadow's x-offset at 0
      *  -4 {number}, defines shadow's x-offset to -4
      *  4 {number}, defines shadow's x-offset to 4
      */
       x: 0,
      /**
      * @description The y field defines vertical distance of the shadow from the object. By default, it is 0.
      * @type {number}
      * @example
      *
      *  0 {number}, indicates the shadow's y-offset at 0
      *  -4 {number}, defines shadow's y-offset to -4
      *  4 {number}, defines shadow's y-offset to 4
      */
       y: 0
    },
    /**
    * @description The primitive field defines the type of frame the object is displaying (see also pArg)
    *
    *  The primitive could be any of the following predefined values:
    *
    *    "Rect" {string}, defines a rectangular-object
    *    "RoundRect" {string}, defines a round rectangular-object. The pArg.x, pArg.y define the radius of round-corners.
    *    "BevelRect" {string}, defines a bevel rectangular-object. The pArg.x, pArg.y define the radius of round-corners.
    *    "Ellipse" {string}, defines an elliptic-object
    *    "Pie" {string}, defines a pie-object. The pArg.startAngle property defines the angle (radians) the pie starts from. The pArg.sweepAngle property defines the length (radians) of the pie.
    *    "Arc" {string}, defines an arc-object. The pArg.startAngle property defines the angle (radians) the arc starts from. The pArg.sweepAngle property defines the length (radians) of the arc.
    *    "Oval" {string}, defines an oval-object.
    *    "Circle" {string}, defines a circle-object.
    *    "Triangle" {string}, defines a triangle-object.
    *    "EllipticPolygon" {string}, defines an elliptic-polygon-object. The pArg.edges property defines the number of edges within the elliptic-polygon. The pArg.startAngle property defines the angle (radians) the elliptic-polygon starts from.
    *    "Polygon" {string}, defines a polygon-object. The pArg.points property defines points of the polygon.
    *    "Star" {string}, defines a star-object. The pArg.edges property defines the number of edges of the star. The pArg.startAngle property defines the angle (radians) the star-object starts from. The pArg.deep defines the star's deepness, while pArg.tilt defines the star's tile as a number betwee 0 and 1
    *    "Spline" {string}, defines the Catmull-Rom spline-primitive (a curve that goes through its control points). The pArg.points property defines the control-points of the curve. The pArg.tension property specifies the tension of the curve, as a value ptFrom 0(round) to 1 (rectangular). The pArg.alpha specifies the alpha of the curve (0.5 by default), while pArg.closed defines a closed curve
    *    "Summary" {string}, defines a summary-object (outlines the summary-bar)
    *    "Deadline" {string}, defines a deadline-object (outlines the deadline-bar)
    *
    * @type {string}
    * @example
    *
    *   null {null}, defines a rectangular-object
    *   "Ellipse" {string}, defines an elliptic-object
    */
     primitive: "RoundRect",
    /**
     * @description The pArg field holds different properties to customize the object's primitive (see also primitive).
     * @type {object}
    */
    pArg:
    {
      /**
       * @description The x field defines the x-radius of the round-rectangle object.
       *
       * The x field has effect only if the primitive is:
       *
       *  "RoundRect", defines a round-rectangle
       *  "BevelRect", defines a bevel-rectangle
       *
       * @type {number}
       * @example
       *
       *  0 {number}, indicates no round-corner for x-axis
       *  8 {number}, defines a round corner (of 8-pixels radius) for x-axis
      */
       x: 2,
      /**
       * @description The y field defines the y-radius of the round-rectangle object.
       *
       * The y field has effect only if the primitive is:
       *
       *  "RoundRect", defines a round-rectangle
       *  "BevelRect", defines a bevel-rectangle
       *
       * @type {number}
       * @example
       *
       *  0 {number}, indicates no round-corner for y-axis
       *  8 {number}, defines a round corner (of 8-pixels radius) for y-axis
      */
       y: 2,
      /**
       * @description The startAngle field defines the angle (radians) the object's primitive starts from.
       *
       * The startAngle field has effect only if the primitive is:
       *
       *  "Arc", defines an arc-object
       *  "Pie", defines a pie-object
       *  "EllipticPolygon", defines an elliptic-polygon-object
       *  "Star", defines a star-object
       *
       * @type {number}
       * @example
       *
       *  0 {number}, indicates that the primitive starts at 0 degree (12 o'clock)
       *  -Math.PI/2 {number}, starts at -90 degree (9 o'clock)
      */
       startAngle: undefined,
      /**
       * @description The sweepAngle field defines the length (as an angle in radians) of the object's primitive.
       *
       * The sweepAngle field has effect only if the primitive is:
       *
       *  "Arc", defines an arc-object
       *  "Pie", defines a pie-object
       *
       * @type {number}
       * @example
       *
       *  0 {number}, indicates a zero-length (the primitive may not be visible while length is 0)
       *  Math.PI/2 {number}, defines the 90 degree length.
      */
       sweepAngle: undefined,
      /**
       * @description The edges field defines the number of edges of the object's primitive. It should be greater or equal than 3.
       *
       * The edges field has effect only if the primitive is:
       *
       *  "EllipticPolygon", defines an elliptic-polygon-object
       *  "Star", defines a star-object
       *
       * @type {number}
       * @example
       *
       *  null {null}, defines a triangle
       *  3 {number}, defines a triangle
       *  8 {number}, defines an octagon
      */
       edges: undefined,
      /**
       * @description The points field defines the points object's polygon, or the control-points of the spline-curve. Defines the points object's polygon as an array of [[x,y]] or [{x,y}] type. There must be more than 3-points defines.
       *
       * The points field has effect only if the primitive is:
       *
       *  "Polygon", defines a polygon-object.
       *  "Spline", defines a spline-curve (a curve that goes through its control points)
       *
       * @type {array}
       * @example
       *
       *  [[0,100],[50,0],[100,100]] {array}, defines a triangle
       *  [{x:0,y:100},{x:50,y:0},{x:100,y:100}] {array}, defines a triangle
      */
       points: undefined,
      /**
       * @description The deep field defines star's deep (defines the isotoxal star-polygon's deepnnes).
       *
       * The deep field has effect only if the primitive is:
       *
       *  "Star", defines a star-object
       *
       * @type {number}
       * @example
       *
       *  null {null}, defines the start's default deep as a result of sin(PI/edges) expression based on the number of edges the star has.
       *  0 {number}, the star is equivalent with an elliptic-polygon
       *  0.5 {number}, defines the star's deep to 0.5 (half of the radius)
      */
       deep: undefined,
      /**
       * @description The tilt field defines star's tilt.  Defines star's tilt as a number between 0 and 1.
       *
       * The tilt field has effect only if the primitive is:
       *
       *  "Star", defines a star-object
       *
       * @type {number}
       * @example
       *
       *  null {null}, defines the start's default tilt (0.5).
       *  0 {number}, the star' vertices go more to right
       *  1 {number}, the star' vertices go more to left
      */
       tilt: undefined,
      /**
       * @description The tension field specifies the tension of the curve(spline), as a value from 0(round) to 1 (rectangular)
       *
       * The tension field has effect only if the primitive is:
       *
       *  "Spline", defines a spline-curve (a curve that goes through its control points)
       *
       * @type {number}
       * @example
       *
       *  0 {number} or null {null}, defines the spline's default tension (0 or round)
       *  1 {number}, the curve shows as rectangular
      */
       tension: undefined,
      /**
       * @description The tension field specifies the alpha of the curve(spline), as a value from 0 to 1
       *
       * The alpha field has effect only if the primitive is:
       *
       *  "Spline", defines a spline-curve (a curve that goes through its control points)
       *
       * @type {number}
       * @example
       *
       *  null {null}, defines the spline's default alpha (0.5)
      */
       alpha: undefined,
      /**
       * @description The closed field defines a closed spline(curve)
       *
       * The closed field has effect only if the primitive is:
       *
       *  "Spline", defines a spline-curve (a curve that goes through its control points)
       *
       * @type {number}
       * @example
       *
       *  false {boolean} or null {null}, defines an opened spline-curve
       *  true {boolean}, defines a closed spline-curve
      */
       closed: undefined
    },
    /**
    * @description The draw field specifies a callback function to let you perform custom drawing on the current object. By default, the draw field is null, which indicates that it has no effect. Indicates a function, to perform additional drawing on the current object. The draw supports two parameters as follows:
    *
    *  ctx {object}, An object of CanvasRenderingContext2D type that specifies the context to draw
    *  client {array}, Indicates an array of [x,y,width,height] type that specfies the original client area to paint the object.
    *
    * During the callback the this keyword reffers the current object object.
    *
    * @type {callback}
    */
     draw: null
  }
}
/* @license Copyright (C) Exontrol. All rights reserved. */

/////////////////////////////////////////////////////////// (exontrol.Swimlane)
//
// The exontrol.Swimlane namespace is a super-set of exontrol.Surface namespace. The exontrol.Swimlane requires including the following files:
//
//  exontrol.surface.js
//
///////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////// (exontrol.Swimlane)
//
//  The exontrol.Swimlane class provides the following fields (public):
//
//    Listeners {object}, holds a reference to exontrol.Lts which defines the events of the control.
//    Shortcuts {object}, holds a reference to exontrol.Sts which defines the shortcuts of the control.
//
//  The exontrol.Swimlane class provides the following methods (public):
//
//    Refresh(), refreshes the control
//    Smooth(callback, thisArg), performs a smooth-transition from a layout to another. The smooth-transition goes from the current layout to the new layout generated by the callback.
//    Home(), zooms to 100% and scrolls the control to origin (0,0)
//    FitToClient(rtLayout), ensures that the entire (null/undefined) or giving layout fits the control's client area
//    EnsureVisibleClient(clientA, bAllowChangeScale), ensures that the giving client fits the control's client area.
//    Selection/GetSelection()/SetSelection(value), gets or sets the control's selected-elements.
//    SelectAll, selects all elements within the control.
//    UnselectAll, clears the selection.
//    RemoveSelection(), deletes the selected-elements.
//    EnsureVisibleSelection(), scrolls the control's content to ensure that the control's selection fits the control's client area
//    Elements/GetElements() {exontrol.Swimlane.Elements}, returns the control's elements.
//    Links/GetLinks() {exontrol.Swimlane.Links}, returns the control's links.
//    Pools/GetPools() {exontrol.Swimlane.Pools}, returns the control's pools.
//    Statistics/GetStatistics() {string}, gives statistics data of objects being hold by the control
//    Element(id) {Element}, gets the element giving its index, identifier/key or reference
//    Link(id) {Element}, gets the link giving its index, identifier/key or reference
//    Pool(id) {Pool}, gets the pool giving its index, identifier/key or reference
//    Clear(), clears the pools, elements and links of the surface (@since 2.0)
//
//    Options/GetOptions()/SetOptions(value) {exontrol.Def.Surface}, gets or sets the options of the exontrol.Swimlane control
//    Tfi/GetTfi()/SetTfi(value) {object}, specifies an object of {bold,italic,...}/exontrol.TFI type that defines font attributes to display the captions within the control.
//    Locked/GetLocked()/SetLocked(value) {boolean}, specifies whether the control is locked(protected) or unlocked
//    ReadOnly/GetReadOnly()/SetReadOnly(value) {boolean}, specifies whether the control is read-only
//    WheelChange/GetWheelChange()/SetWheelChange(value) {number}, defines the amount the control scrolls when the user rolls the mouse wheel.
//    Smooth/GetSmooth()/SetSmooth(value) {number}, defines the time in ms the control goes from one layout to another.
//    Margins/GetMargins()/SetMargins(value) {object}, specifies the control's margins
//    Zoom/GetZoom()/SetZoom(value) {number}, defines the zoom factor of the control's content.
//    ZoomLevels/GetZoomLevels()/SetZoomLevels(value) {string}, defines the zoom-levels the user can magnify the control's content
//    ScrollBarsHome/GetScrollBarsHome()/SetScrollBarsHome(value) {any}, defines the color to highlight the position of origin (0,0) on the control's scroll bars
//    ScrollBarsLayout/GetScrollBarsLayout()/SetScrollBarsLayout(value) {any}, defines the color to highlight the position of current layout within the control's scrollbars
//    SingleSel/GetSingleSel()/SetSingleSel(value) {exontrol.Swimlane.SingleSelEnum}, specifies whether the control supports single, multiple, toggle selection.
//    Selection/GetSelection()/SetSelection(value) {any}, gets or sets the control's selected-elements.
//    FormatText/GetFormatText()/SetFormatText(value) {exontrol.DrawTextFormatEnum}, defines the global format to display the element's caption.
//    Pad/GetPad()/SetPad(value) {(number|string|array)}, defines the global format to display the element's caption.
//    ImageSize/GetImageSize()/SetImageSize(value) {any}, defines the global size of the element's image. The image can be added using the exontrol.HTMLPicture.Add() method
//    ImageAlign/GetImageAlign()/SetImageAlign(value) {number}, defines the global-alignment of the element's image relative to its caption.
//    Shapes/GetShapes()/SetShapes(value) {string}, defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance.
//    Cursors/GetCursors()/SetCursors(value) {string}, defines the mouse cursor to display when pointing over different parts of the control.
//    ShowLinks/GetShowLinks()/SetShowLinks(value) {exontrol.ShowLinksEnum}, shows or hides the links between elements
//    ShowLinksOnCollapse/GetShowLinksOnCollapse()/SetShowLinksOnCollapse(value) {boolean}, shows or hides the links between collapsed elements
//    Link/GetLink()/SetLink(value) {object}, defines the appearance of the links between elements.
//    CollapsedLink/GetCollapsedLink()/SetCollapsedLink(value) {object}, defines the appearance of the links between collapsed elements.
//    LinkStartFrom/GetLinkStartFrom()/SetLinkStartFrom(value) {object}, specifies the appearance of the link that starts from any selected-element (outgoing links)
//    LinkEndTo/GetLinkEndTo()/SetLinkEndTo(value) {object}, specifies the appearance of the link that ends to any selected-element (incoming links)
//    LinkUnselected/GetLinkUnselected()/SetLinkUnselected(value) {object}, specifies the appearance of the link not related to any selected-element (unselected links)
//    AllowActions/GetAllowActions()/SetAllowActions(value) {string}, customizes the actions the user can perform once the control is clicked or touched.
//    ExpandGlyphSize/GetExpandGlyphSize()/SetExpandGlyphSize(value) {number}, defines the size to show the element's expand/collapse glyphs.
//    AllowChangeParent/GetAllowChangeParent()/SetAllowChangeParent(value) {boolean}, indicates whether the user can change the element's position or parent at runtime by drag and drop
//    Selements/GetSelements()/SetSelements(value) {string}, defines the elements from a string-representation.
//    Slinks/GetSlinks()/SetSlinks(value) {string}, defines the links between elements of the control from a string-representation.
//    Spools/GetSpools()/SetSpools(value) {string}, defines the pools from a string-representation.
//    AllowLinkControlPoint/GetAllowLinkControlPoint()/SetAllowLinkControlPoint(value) {exontrol.Surface.LinkControlPointEnum}, indicates the control points of the link, the user can use to customize the link's path.
//    Coord/GetCoord()/SetCoord(value) {exontrol.Surface.CoordEnum}, specifies the type of coordinates the elements of the surface display in.
//
//    Arrange(id, oDefArrange), arranges the elements based on their links.
//    Home(), zooms to 100% and scrolls the control to origin (0,0)
//    FitToClient(rtLayout), ensures that the entire (null/undefined) or giving layout fits the control's client area
//    Soom(zoomTo, oPointAbs, rgrOrigin), zooms or/and scrolls the control's content.
//    SelectAll, selects all elements within the control.
//    UnselectAll, clears the selection.
//    RemoveSelection(), removes/deletes the selected-elements.
//    EnsureVisibleSelection(), scrolls the control's content to ensure that the control's selection fits the control's client area
//    EnsureVisibleClient(clientA, bAllowChangeScale, bNearestFit), ensures that the giving client fits the control's client area.
//
//    bU(), locks invalidating the control until the eU() method is called
//    eU(), invalidates the control
//
//  The exontrol.Swimlane class provides the following events (through oLts):
//
//     "onselchange", notifies your application that the control's selection has been changed. The onselchange's parameter could be any of the following:
//
//        oEvent {null}, indicates that the control has no selected elements
//        oEvent {object}, indicates an object of exontrol.Swimlane.Element type that defines the control's single-element selected.
//        oEvent {array}, specifies an array of [exontrol.Swimlane.Element] type that holds all selected elements within the control
//
//     "onclick", occurs once the user clicks or double-clicks an element. The onclick's parameter is:
//
//        oEvent {object}, specifies an object of {element,link,dblClick,button,modifiers} type, that holds information about the element being clicked.
//
//          oEvent.element {object}, specifies null or an object of exontrol.Swimlane.Element type that indicates the element being clicked
//          oEvent.pool {object}, specifies null or an object of exontrol.Swimlane.Pool type that indicates the pool being clicked
//          oEvent.link {object}, specifies null or an object of exontrol.Swimlane.Link type that indicates the link being clicked
//          oEvent.dblClick {boolean}, indicates whether the user clicks or double-clicks the element
//          oEvent.button {number}, indicates which button is pressed while clicking the element as 1 (left), 2 (right) or 4 (middle)
//          oEvent.modifiers {number}, specifies a combination of 1, 2, 4 and 16 according with modifier keys (ALT, CTRL, META and SHIFT), or 0 if no modifier keys
//
//     "onchange", notifies your application that an element, or more has been changed (create, move/resize, link or expand/collapse). The onchange's parameter is:
//
//        oEvent {object}, specifies an object of {element,action} type, that holds information about the element being changed.
//
//          oEvent.element {object}, specifies an object of exontrol.Swimlane.Element type that indicates the element being changed
//          oEvent.pool {object}, specifies an object of exontrol.Swimlane.Pool type that indicates the pool being changed
//          oEvent.action {string}, specifies the action such as "create", "move", "link", "expand", "resize-header", "resize-lane", "resize-phase" the element or pool is suffer
//
/////////////////////////////////////////////////////////// (exontrol.Swimlane)

/////////////////////////////////////////////////////////// (exontrol.Swimlane.Elements)
//
// The exontrol.Swimlane.Elements object holds a collection of exontrol.Swimlane.Element type (element of the control)
//
// The exontrol.Swimlane.Elements object provides the following methods:
//
//  Add(oElementOpts) {exontrol.Swimlane.Element}, creates and adds a new element into the control
//  Create(client) {exontrol.Swimlane.Element}, creates and adds a new element by drag at specified position
//  OnCreate(oCreateOpts), customizes the options to create a new element, by drag.
//  Count/GetCount() {number}, returns the number of elements within the collection.
//  Item(id) {exontrol.Swimlane.Element}, gets the element giving its index, identifier/key or reference
//  Remove(id), removes the element giving its index, identifier/key or reference
//  Clear(), removes all elements of the control
//  Save() {string}, saves the control's elements to a string-representation.
//  Load(value) {string}, loads the control's elements from a string-representation.
//
/////////////////////////////////////////////////////////// 

/////////////////////////////////////////////////////////// (exontrol.Swimlane.ElementOptions)
//
//  The exontrol.Swimlane.ElementOptions class holds all options an element can display or own
//
//  The exontrol.Swimlane.ElementOptions class defines the following fields:
//
//    visible {boolean}, indicates whether the element is visible or hidden
//    enabled {boolean}, indicates whether the element is enabled or disabled(unselectable)
//    key {string}, specifies the key associated with the element
//    caption {string}, defines the element's caption
//    formatText {exontrol.DrawTextFormatEnum}, specifies the format to display the element's caption
//    pad {(number|string|array)}, defines the element's padding (space between the element's content and its border)
//    image {string}, specifies the name of the image/picture the element displays. The image can be added using the exontrol.HTMLPicture.Add() method
//    imageSize {any}, defines the size of the element's image
//    imageAlign {number}, defines the alignment of the image within the element
//    shape {any}, defines the shape for individual element
//    cursor {string}, defines the mouse-cursor for individual element
//    client {array}, defines the element's client area as an array of [x,y,width,height] type
//    parent {any}, indicates the element's parent
//    expand {boolean}, specifies whether the element is expanded or collapsed
//
///////////////////////////////////////////////////////////

exontrol.Swimlane.ElementOptions =
{
  /**
   * @description The visible field indicates whether the element is visible or hidden.
   * @type {boolean}
   * @example
   *
   *  false {boolean}, hides the element
   *  true {boolean}, shows the element
  */
   visible: true,
  /**
   * @description The enabled field indicates whether the element is enabled or disabled(unselectable)
   * @type {boolean}
   * @example
   *
   *  false {boolean}, disables the element
   *  true {boolean}, enables the element
  */
   enabled: true,
  /**
   * @description The key field specifies the key associated with the element. Specifies the key associated with the element. If no key is provided, the element's plain-caption can be used to request an item. The plain-caption includes no ex-HTML tags, such as <b>, <fgcolor> and so on
   * @type {string}
   * @example
   *
   *  "logo" {string}, defines the element with the giving key (logo). You can use the Root.Item("logo") method to request the element giving its key.
  */
   key: null,
  /**
   * @description The caption field defines the element's caption. Specifies the ex-HTML caption an element displays.
   * @type {string}
   * @example
   *
   *  null {null}, indicates no caption
   *  "caption" {string}, declares a plain-caption
   *  "<b>text</b>" {string}, displays the text in bold
   *  "<img>logo</img>" {string}, displays the "logo" image. The image can be added using the exontrol.HTMLPicture.Add() method
  */
   caption: null,
  /**
   * @description The formatText field specifies the format to display the element's caption.
   * @type {exontrol.DrawTextFormatEnum}
  */
   formatText: null,
  /**
   * @description The pad field defines the element's padding (space between the element's content and its border). The pad field can be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size
   * @type {(number|string|array)}
  */
   pad: null,
  /**
   * @description The image field specifies the name of the image/picture the element displays. The image can be added using the exontrol.HTMLPicture.Add() method
   * @type {string}
  */
   image: null,
  /**
   * @description The imageSize field defines the size of the element's image, as one of the following:
   *
   *  {undefined}, Indicates that the control's imageSize option is considered, so the element's image is measured according to the control's imageSize option.
   *  {null}, Indicates that the element's image is displayed as it is (full-sized).
   *  {numeric}, Specifies that the element's image is displayed into a square of giving size (same width and height). If 0 the element displays no image, if negative the element's image is stretched to giving square, else the element's picture is scaled to fit the giving rectangle.
   *  {array}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the element's picture to scale or stretch to.
   *
   * @type {any}
  */
   imageSize: undefined,
  /**
   * @description The imageAlign field defines the alignment of the image within the element. Indicates the alignment of the image within the element as 0 (left, default), 1(right), 2(top) or 3(bottom).
   * @type {number}
  */
   imageAlign: null,
  /**
   * @description The shape field defines the shape for individual element. A string expression that defines the shape for the element itself or an object of {normal,hover,click,disabled} type. The normal,hover,click and disabled are objects of exontrol.Def.Shape type.
   * @type {any}
  */
   shape: null,
  /**
   * @description The cursor field defines the mouse-cursor for individual element. A string expression that defines the mouse-cursor for individual element.
   * @type {string}
  */
   cursor: null,
  /**
   * @description The client field defines the element's client area as an array of [x,y,width,height] type.
   * @type {array}
   * @example
   *
   *  null {null}, defines an element quivalent with [0,0,32,32]
   *  [0,0,128,128] {array}, defines the element at the center of the control of 128 x 128 pixels size
  */
   client: null,
  /**
   * @description The parent field defines the element's parent. The parent field can be one of the following:
   *
   *  parent {number}, indicates a numeric value that defines the index of the parent's element (0-based)
   *  parent {string}, specifies a string expression that defines the identifier/key/plain-caption of the parent's element
   *  parent {exontrol.Swimlane.Element}, specifies the object reference to the parent's element
   *
   * @type {any}
   * @example
   *
   *  0 {number}, indicates that the element with the index 0 is the parent of the current element
   *  "key" {string}, specifies that the parent of the current element is the element with the giving key
   *
  */
   parent: null,
  /**
   * @description The expand field indicates whether the element is expanded or collapsed.
   * @type {boolean}
  */
   expand: true
};

/////////////////////////////////////////////////////////// (exontrol.Swimlane.Element)
//
// The exontrol.Swimlane.Element object holds information(options) about an element within the control.
//
// The Add(oElementOpts) method of exontrol.Swimlane.Elements creates and adds a new element into the control.
//
// The exontrol.Swimlane.Element object provides the following methods:
//
//  Options/GetOptions()/SetOptions(value) {exontrol.Swimlane.ElementOptions}, indicates the element's options (at once) such as visibility, caption and so on
//  Remove(), removes the element itself from elements collection ( equivalent of Elements.Remove(oElement) method )
//  Index/GetIndex() {number}, returns the index of the element (0-based)
//  Position/GetPosition()/SetPosition(value) {number}, specifies the element's position (0-based)
//  BringToFront() {number}, moves the element to the top of the stacking order, so that it is in front of other elements (returns the element's previously position)
//  BringForward() {number}, moves the element up one level, so that it is closer to top of the stacking order (returns the element's previously position)
//  SendToBack() {number}, moves the element to the bottom of the stacking order, so that it is behind the other elements (returns the element's previously position)
//  SendBackward() {number}, moves the element down one level, so that it is closer to the bottom of the stacking order.
//  Key/GetKey()/SetKey(value) {boolean}, specifies the element's key (the Elements.Item(key) requests an element by its index, identifier/key or reference)
//  Visible/GetVisible()/SetVisible(value) {boolean}, shows or hides the element
//  Enabled/GetEnabled()/SetEnabled(value) {boolean}, enables or disables the element
//  Caption/GetCaption()/SetCaption(value) {string}, specifies the element's caption (ex-HTML format)
//  FormatText/GetFormatText()/SetFormatText(value) {exontrol.DrawTextFormatEnum}, defines the format to display the element's caption.
//  Pad/GetPad()/SetPad(value) {(number|string|array)}, defines the format to display the element's caption.
//  Image/GetImage()/SetImage(value) {string}, defines the element's image. The image can be added using the exontrol.HTMLPicture.Add() method
//  ImageSize/GetImageSize()/SetImageSize(value) {any}, defines the size of the element's image. The image can be added using the exontrol.HTMLPicture.Add() method
//  ImageAlign/GetImageAlign()/SetImageAlign(value) {number}, defines the alignment of the element's image relative to its caption.
//  Shape/GetShape()/SetShape(value) {any}, indicates the shape for the element itself.
//  Cursor/GetCursor()/SetCursor(value) {any}, the mouse cursor for the element itself.
//  Client/GetClient()/SetClient(value) {array}, specifies the element's client area.
//  Parent/GetParent()/SetParent(value) {any}, specifies the parent's element.
//  Expand/GetExpand()/SetExpand(value) {any}, expands or collapses the element
//  ToggleExpand(), toggles the element's expand state. For instance, if the element is expanded, the ToggleExpand() method collapses the element.
//
/////////////////////////////////////////////////////////// 

/////////////////////////////////////////////////////////// (exontrol.Swimlane.Links)
//
// The exontrol.Swimlane.Links object holds a collection of exontrol.Swimlane.Link type (link of the control)
//
// The exontrol.Swimlane.Links object provides the following methods:
//
//  Add(oLinkOpts) {exontrol.Swimlane.Link}, creates and adds a new link into the control
//  Create(oFrom, oTo) {exontrol.Swimlane.Link}, creates and adds a link between from and to elements
//  OnCreate(oCreateOpts) {exontrol.Swimlane.Link}, customizes the options for the newly created link by drag
//  Count/GetCount() {number}, returns the number of links within the collection.
//  Item(id) {exontrol.Swimlane.Link}, gets the link giving its index, identifier/key or reference
//  Remove(id), removes the link giving its index, identifier/key or reference
//  Clear(), removes all links of the control
//  Save() {string}, saves the links between elements of the control to a string-representation.
//  Load(value) {string}, loads links between elements of the control from a string-representation.
//
/////////////////////////////////////////////////////////// 

/////////////////////////////////////////////////////////// (exontrol.Swimlane.LinkOptions)
//
//  The exontrol.Swimlane.LinkOptions class holds all options an link can display or own
//
//  The exontrol.Swimlane.LinkOptions class defines the following fields:
//
//    visible {boolean}, indicates whether the link is visible or hidden
//    key {string}, specifies the key associated with the link
//    caption {string}, defines the link's caption
//    from {any}, indicates the index, identifier/key or reference of the element the link starts from (in-element)
//    to {any}, indicates the index, identifier/key or reference of the element the link ends to (out-element)
//    link {object}, specifies the appearance of the link between elements
//    collapsedLink {object}, specifies the appearance of the link between collapsed elements
//    allowControlPoint {exontrol.Surface.LinkControlPointEnum}, defines the control points for an individual link, the user can use to customize the link
//    customPath {any}, specifies the link's custom path, as a string of x,y proportions separated by comma.
//
///////////////////////////////////////////////////////////

exontrol.Swimlane.LinkOptions =
{
  /**
   * @description The visible field indicates whether the link is visible or hidden.
   * @type {boolean}
   * @example
   *
   *  false {boolean}, hides the link
   *  true {boolean}, shows the link
  */
   visible: true,
  /**
   * @description The key field specifies the key associated with the link. Specifies the key associated with the link. If no key is provided, the link's plain-caption can be used to request an item. The plain-caption includes no ex-HTML tags, such as <b>, <fgcolor> and so on
   * @type {string}
   * @example
   *
   *  "logo" {string}, defines the link with the giving key (logo). You can use the Root.Item("logo") method to request the link giving its key.
  */
   key: null,
  /**
   * @description The caption field defines the link's caption.
   * @type {string}
   * @example
   *
   *  null {null}, indicates no caption
   *  "caption" {string}, declares a plain-caption
   *  "<b>text</b>" {string}, displays the text in bold
   *  "<img>logo</img>" {string}, displays the "logo" image. The image can be added using the exontrol.HTMLPicture.Add() method
  */
   caption: null,
  /**
   * @description The from field indicates the index, identifier/key or reference of the element the link starts from (in-element). The from field could be any of the following:
   *
   *  from {number}, indicates a numeric value that defines the index of the element
   *  from {string}, specifies a string expression that defines the identifier/key/plain-caption of the element
   *  from {exontrol.Swimlane.Element}, specifies the object reference to the element
   *
   * @type {any}
  */
   from: null,
  /**
   * tor'>@description The to field indicates the index, identifier/key or reference of the element the link ends to (out-element). The to field could be any of the following:
   *
   *  to {number}, indicates a numeric value that defines the index of the element
   *  to {string}, specifies a string expression that defines the identifier/key/plain-caption of the element
   *  to {exontrol.Swimlane.Element}, specifies the object reference to the element
   *
   * @type {any}
  */
   to: null,
  /**
   * @description The link field specifies the appearance of the link between elements. The link object includes any of the following:
   *
   *  type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
   *  dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
   *  width {number}, specifies the link's width or size (1 by default)
   *  color {string}, indicates the link's color (partial-black by default)
   *  arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
   *  style {array}, specifies the link's dash pattern to show the lines (solid by default)
   *  startPos {any}, indicates the list of corners of in-element, the link can start from
   *  endPos {any}, indicates the list of corners of out-element, the link can end to
   *
   * @type {object}
  */
   link: null,
  /**
   * @description The collapsedLink field specifies the appearance of the link between collapsed elements. The link object includes any of the following:
   *
   *  type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
   *  dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
   *  width {number}, specifies the link's width or size (1 by default)
   *  color {string}, indicates the link's color (partial-black by default)
   *  arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
   *  style {array}, specifies the link's dash pattern to show the lines (solid by default)
   *  startPos {any}, indicates the list of corners of in-element, the link can start from
   *  endPos {any}, indicates the list of corners of out-element, the link can end to
   *
   * @type {object}
  */
   collapsedLink: null,
  /**
   * @description The allowControlPoint field defines the control points for an individual link, the user can use to customize the link. A combination of one or more exontrol.Swimlane.LinkControlPointEnum flags that determines the control points for an individual link, the user can use to customize the link. The exontrol.Swimlane.LinkControlPointEnum type defines the following flags:
   *
   *  exNoControlPoint(0), the link displays no control points
   *  exStartControlPoint(1), the link shows control point that changes the link's StartPos property (the exStartControlPoint point is marked with black squares)
   *  exEndControlPoint(2), the link shows control point that changes the link's EndPos property (the exEndControlPoint point is marked with black squares)
   *  exControlPoint(4), defines the corners of the link's path. You can remove a exControlPoint points by dragging to another, so intermediate exControlPoint points are removed. You can move all control points of the link at once, if SHIFT key is pressed (the exControlPoint points are marked black circles)
   *  exMiddleControlPoint(8), defines the link's middle control points that are displayed between two exControlPoint points, to let the use add new exControlPoint points, to redefine the link's path (The exMiddleControlPoint points are marked with gray circles)
   *
   * @type {exontrol.Swimlane.LinkControlPointEnum}
   * @example
   *
   *  0 or exontrol.Swimlane.LinkControlPointEnum.exNoControlPoint {number}, displays no link's control points
   *  3 or exontrol.Swimlane.LinkControlPointEnum.exStartControlPoint | exontrol.Swimlane.LinkControlPointEnum.exEndControlPoint {number}, displays link's start and end control points only
   *
  */
   allowControlPoint: null
};

/////////////////////////////////////////////////////////// (exontrol.Swimlane.Link)
//
// The exontrol.Swimlane.Link object holds information(options) about an link within the control.
//
// The Add(oLinkOpts) method of exontrol.Swimlane.Links creates and adds a new link into the control.
//
// The exontrol.Swimlane.Link object provides the following methods:
//
//  Options/GetOptions()/SetOptions(value) {exontrol.Swimlane.LinkOptions}, indicates the link's options (at once) such as visibility, caption and so on
//  Remove(), removes the link itself from links collection ( equivalent of Links.Remove(oLink) method )
//  Index/GetIndex() {number}, returns the index of the link (0-based)
//  Key/GetKey()/SetKey(value) {boolean}, specifies the link's key (the Links.Item(key) requests an link by its index, identifier/key or reference)
//  Visible/GetVisible()/SetVisible(value) {boolean}, shows or hides the link
//  Caption/GetCaption()/SetCaption(value) {string}, specifies the link's caption (ex-HTML format)
//  FormatText/GetFormatText()/SetFormatText(value) {exontrol.DrawTextFormatEnum}, defines the format to display the link's caption.
//  From/GetFrom()/SetFrom(value) {any}, indicates the index, identifier/key or reference of the element the link starts from (in-element)
//  To/GetTo()/SetTo(value) {any}, indicates the index, identifier/key or reference of the element the link ends to (out-element)
//  Link/GetLink()/SetLink(value) {object}, defines the link's appearance as an object of {type,dir,width,color,arrow,style,startPos,endPos} type
//  CollapsedLink/GetCollapsedLink()/SetCollapsedLink(value) {object}, defines the link's appearance as an object of {type,dir,width,color,arrow,style,startPos,endPos} type, between collapsed elements
//  AllowControlPoint/GetAllowControlPoint()/SetAllowControlPoint(value)  {exontrol.Surface.LinkControlPointEnum}, defines the control points for an individual link, the user can use to customize the link
//  CustomPath/GetCustomPath()/SetCustomPath(value) {any}, specifies the link's custom path, as a string of x,y proportions separated by comma
//
/////////////////////////////////////////////////////////// 

/////////////////////////////////////////////////////////// (exontrol.Swimlane.Pools)
//
// The exontrol.Swimlane.Pools object holds a collection of exontrol.Surface.Pool type (pool of the control)
//
// The exontrol.Swimlane.Pools object provides the following methods:
//
//  Add(oPoolOpts) {exontrol.Swimlane.Pool}, creates and adds a new pool into the control
//  Create(client) {exontrol.Swimlane.Pool}, creates and adds a new pool by drag at specified position
//  OnCreate(oCreateOpts), customizes the options to create a new pool, by drag.
//  OnCreateLane(oCreateOpts), customizes the options for the newly created lane by drag.
//  OnCreatePhase(oCreateOpts), customizes the options for the newly created phase by drag.
//  Count/GetCount() {number}, returns the number of pools within the collection.
//  Item(id) {exontrol.Swimlane.Pool}, gets the pool giving its index, identifier/key or reference
//  Remove(id), removes the pool giving its index, identifier/key or reference
//  Clear(), removes all pools of the control
//  Save() {string}, saves the control's pools to a string-representation.
//  Load(value) {string}, loads the control's pools from a string-representation.
//
/////////////////////////////////////////////////////////// 

/////////////////////////////////////////////////////////// (exontrol.Surface.PoolOptions)
//
//  The exontrol.Surface.PoolOptions class holds all options a pool can display or own
//
//  The exontrol.Surface.PoolOptions class defines the following fields:
//
//    visible {boolean}, indicates whether the pool is visible or hidden
//    enabled {boolean}, indicates whether the pool is enabled or disabled(unselectable)
//    key {string}, specifies the key associated with the pool
//    shape {any}, defines the shape for individual pool
//    cursor {string}, defines the mouse-cursor for individual pool
//    client {array}, defines the pool's client area as an array of [x,y,width,height] type.
//    headers {string}, defines the pool's headers
//    excludeHeaders {boolean}, indicates whether pool's lanes and phases are not shown over the pool's headers
//    lanes {string}, defines the pool's lanes (the lanes goes vertically from top to bottom side of the pool)
//    phases {string}, defines the phases of the pool (the phases goes horizontally from left to right side of the pool)
//
///////////////////////////////////////////////////////////

exontrol.Surface.PoolOptions =
{
  /**
   * @description The visible field indicates whether the pool is visible or hidden.
   * @type {boolean}
   * @example
   *
   *  false {boolean}, hides the pool
   *  true {boolean}, shows the pool
  */
   visible: true,
  /**
   * @description The enabled field indicates whether the pool is enabled or disabled(unselectable)
   * @type {boolean}
   * @example
   *
   *  false {boolean}, disables the pool
   *  true {boolean}, enables the pool
  */
   enabled: true,
  /**
   * @description The key field specifies the key associated with the pool. Specifies the key associated with the pool. If no key is provided, the pool's plain-caption can be used to request an item. The plain-caption includes no ex-HTML tags, such as <b>, <fgcolor> and so on
   * @type {string}
   * @example
   *
   *  "logo" {string}, defines the pool with the giving key (logo). You can use the Root.Item("logo") method to request the pool giving its key.
  */
   key: null,
  /**
   * @description The shape field defines the shape for individual pool. A string expression that defines the shape for the pool itself or an object of {normal,hover,click,disabled} type. The normal,hover,click and disabled are objects of exontrol.Def.Shape type.
   * @type {any}
  */
   shape: null,
  /**
   * @description The cursor field defines the mouse-cursor for individual pool.
   * @type {string}
  */
   cursor: null,
  /**
   * @description The client field defines the pool's client area as an array of [x,y,width,height] type. The client field can be any of the following:
   *
   *  {number[]}, specifies the pool's client area as an array of [x,y,width,height] type
   *  {null}, specifies the union all visible-elements (collapsed child-elements or hidden elements are ignored) (@since 2.0)
   *  {Elements[]}, specifies the union of the giving visible-elements (collapsed child-elements or hidden elements are ignored).
   *  {String[]}, specifies the union of the giving keys of the visible-elements (collapsed child-elements or hidden elements are ignored). For instance, ["A","B"] changes the pool's client-rectangle to cover the elements with the key "A" and "B" (@since 2.0)
   *  {Element}, indicates the element's client-rectangle (@since 2.0)
   *
   * The client field sets the pool's outside client-area (includes the size for all headers) for all types except {number[]}
   * @type {any}
   * @example
   *
   *  null {null}, specifies the union all visible-elements (collapsed child-elements or hidden elements are ignored) (@since 2.0)
   *  [0,0,128,128] {array}, defines the pool at the center of the control of 128 x 128 pixels size
   *  oControl.Elements {Elements[]}, sets the pool's client-rectangle to cover all visible-elements (@since 2.0)
   *  oControl.Selection {Elements[]}, sets the pool's client-rectangle to cover all selected-elements (@since 2.0)
   *  ["A","B"] {String[]}, sets the pool's client-rectangle to cover the elements with the key "A" and "B" (@since 2.0)
  */
   client: null,
  /**
   * @description The headers field defines the pool's headers from a string-representation. Defines the pool's headers as explained bellow:
   *
   * The format of headers property is:
   *
   *  "type[flag=value]...[flag=value],...,type[flag=value]...[flag=value]"
   *
   * where:
   *
   *  "type", defines the type of the header, which can be any of the following
   *    "left", defines the pool's header anchored to the left-side
   *    "top", defines the pool's header anchored to the top-side
   *    "right", defines the pool's header anchored to the right-side
   *    "bottom", defines the pool's header anchored to the right-side
   *
   *  "flag", defines a property of the header such as:
   *    [size=value], defines the size of the header, where value is a numeric value
   *    [shape=value], defines the shape of the header.
   *
   * @type {string}
   * @example
   *
   *  null {null}, defines no visible headers, but the user can resize and show them, equivalent with "left[size=0],right[size=0],top[size=0],bottom[size=0]".
   *  "" {string}, defines no visible headers.
   *  "left[size=24][shape=Button],top[size=24]", shows the left and top-headers of the pool with specified size and shape.
  */
   headers: null,
  /**
   * @description The excludeHeaders field indicates whether the lanes and phases are not displayed over the pool's headers
   * @type {boolean}
   * @example
   *
   *  false {boolean}, the pool's lanes and phases are displayed over the pool's headers
   *  true {boolean}, the pool's lanes and phases are not displayed over the pool's headers
  */
   excludeHeaders: true,
  /**
   * @description The lanes property defines the lanes of the pool using a string-representation (the lanes goes vertically from top to bottom side of the pool). Defines the pool's lanes as explained bellow:
   *
   * The format of lanes property is:
   *
   *  "caption[flag=value]...[flag=value],...,caption[flag=value]...[flag=value]"
   *
   * where:
   *
   *  "caption", defines the lane's ex-HTML caption (shown into the pool's header)
   *  "flag", defines a property of the lane such as:
   *    [size=value], defines the size of the lane (in percent), where value is a numeric value. 0 or negative value hides the lane
   *    [shape=value], defines the shape of the lane.
   *
   * @type {string}
   * @example
   *
   *  null {null}, displays no lanes for the pool
   *  "Lane 1,Lane 2", displays two-lanes for the pool named Lane 1 and Lane 2
   *  "Lane 1[size=20],Lane 2,Lane 3,Lane 4[shape=FrameSel]", displays four-lanes where Lane 1 takes 20% from the pool, while the rest of lanes shares equaly the available space on the pool. The Lane 4 displays the FrameSel shape.
  */
   lanes: null,
  /**
   * @description The phases property defines the phases of the pool using a string-representation (the phases goes horizontally from left to right side of the pool). Defines the pool's phases as explained bellow:
   *
   * The format of phases property is:
   *
   *  "caption[flag=value]...[flag=value],...,caption[flag=value]...[flag=value]"
   *
   * where:
   *
   *  "caption", defines the phase's ex-HTML caption (shown into the pool's header)
   *  "flag", defines a property of the phase such as:
   *    [size=value], defines the size of the phase (in percent), where value is a numeric value. 0 or negative value hides the phase
   *    [shape=value], defines the shape of the phase.
   *
   * @type {string}
   * @example
   *
   *  null {null}, displays no phases for the pool
   *  "Phase 1,Phase 2", displays two-phases for the pool named Phase 1 and Phase 2
   *  "Phase 1[size=20],Phase 2,Phase 3,Phase 4[shape=FrameSel]", displays four-phases where Phase 1 takes 20% from the pool, while the rest of phases shares equaly the available space on the pool. The Phase 4 displays the FrameSel shape.
  */
   phases: null
};

/////////////////////////////////////////////////////////// (exontrol.Swimlane.Pool)
//
// The exontrol.Swimlane.Pool object holds information(options) about a pool within the control.
//
// The Add(oPoolOpts) method of exontrol.Swimlane.Pools creates and adds a new pool into the control.
//
// The exontrol.Swimlane.Pool object provides the following methods:
//
//  Options/GetOptions()/SetOptions(value) {exontrol.Swimlane.PoolOptions}, indicates the pool's options (at once) such as visibility, caption and so on
//  Remove(), removes the pool itself from pools collection ( equivalent of Pools.Remove(oPool) method )
//  Index/GetIndex() {number}, returns the index of the pool (0-based)
//  Position/GetPosition()/SetPosition(value) {number}, specifies the pool's position (0-based)
//  BringToFront() {number}, moves the pool to the top of the stacking order, so that it is in front of other pools (returns the pool's previously position)
//  BringForward() {number}, moves the pool up one level, so that it is closer to top of the stacking order (returns the pool's previously position)
//  SendToBack() {number}, moves the pool to the bottom of the stacking order, so that it is behind the other pools (returns the pool's previously position)
//  SendBackward() {number}, moves the pool down one level, so that it is closer to the bottom of the stacking order.
//  Key/GetKey()/SetKey(value) {boolean}, specifies the pool's key (the Pools.Item(key) requests a pool by its index, identifier/key or reference)
//  Visible/GetVisible()/SetVisible(value) {boolean}, shows or hides the pool
//  Enabled/GetEnabled()/SetEnabled(value) {boolean}, enables or disables the pool
//  Shape/GetShape()/SetShape(value) {any}, indicates the shape for the pool itself.
//  Cursor/GetCursor()/SetCursor(value) {any}, the mouse cursor for the pool itself.
//  Client/GetClient()/SetClient(value) {array}, specifies the pool's client area.
//  AutoSize(objects), re-sizes the pool so all its (specified) elements and inner-pools fits inside.
//  Headers/GetHeaders()/SetHeaders(value) {string}, specifies the pool's headers.
//  ExcludeHeaders/GetExcludeHeaders()/SetExcludeHeaders(value) {boolean}, specifies whether pool's lanes and phases excludes or includes the pool's headers.
//  Lanes/GetLanes()/SetLanes(value) {string}, specifies the pool's lanes (the lanes goes vertically from top to bottom side of the pool).
//  Phases/GetPhases()/SetPhases(value) {string}, specifies the pool's phases (the phases goes horizontally from left to right side of the pool).
//  Lane(id, lane) {PoolSplitter}, gets the lane of the pool giving its identifier
//  Phase(id, phase) {PoolSplitter}, gets the phase of the pool giving its identifier
//
/////////////////////////////////////////////////////////// 

/////////////////////////////////////////////////////////// (exontrol.Def.Surface)
//
// The exontrol.Def.Surface namespace provides definitions for different objects, primitives, objects of exontrol.Swimlane object
//
//  The exontrol.Def.Surface namespace provides the following fields:
//
//    scrollBars {exontrol.ScrollBarsEnum}, determines whether the control has horizontal and/or vertical scroll bars
//    scrollBarsHome {string}, specifies the color to highlight the position of origin (0,0) on the control's scroll bars.
//    scrollBarsLayout {string}, specifies the color to highlight the position of the current layout within the control's scroll bars.
//    tfi {(string|object)}, holds the font attributes for captions within the control. The tfi field can be defined using a string representation such as &quot;b monospace 16&quot; or as an object such as {bold: true, fontName: &quot;monospace&quot;, fontSize: 16}.
//    locked {boolean}, indicates whether the control is locked(protected) or unlocked
//    wheelChange {number}, specifies the amount the control scrolls when the user rolls the mouse wheel.
//    smooth {number}, defines the time in ms the control goes from one layout to another.
//    margins {object}, specifies control's margins.
//    shapes {string}, defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance.
//    cursors {string}, specifies the mouse cursor to be displayed when pointing over a part of the control.
//    singleSel {exontrol.Swimlane.SingleSelEnum}, specifies whether the control supports single, multiple, toggle selection.
//    zoom {number}, defines the zoom factor of the control's content. The zoomLevels field defines the margins of the zoom-factor the control is allowed to magnify.
//    zoomLevels {string}, defines the zoom-levels the user can magnify the control's content
//    formatText {exontrol.DrawTextFormatEnum}, specifies the format to display the element's caption.
//    pad {(number|string|array)}, defines the element's padding (space between the element's content and its border)
//    imageSize {(null|number|array)}, defines the size of the element's image.
//    imageAlign {number}, defines the alignment of the image within the element.
//    showLinks {exontrol.ShowLinksEnum}, indicates whether the control shows or hides the links between elements.
//    showLinksOnCollapse {boolean}, specifies whether links between collapsed elements are visible or hidden.
//    link {object}, specifies the appearance of the link between elements.
//    collapsedLink {object}, specifies the appearance of the link between collapsed elements.
//    allowActions {string}, customizes the actions the user can perform once the user clicks or touches the control.
//    expandGlyphSize {number}, specifies the size to show the element's expand/collapse glyphs.
//    allowChangeParent {boolean}, specifies whether the element's position or parent can be changed at runtime by drag and drop.
//    selements {string}, defines the elements of the control from a string-representation.
//    slinks {string}, defines the links between elements of the control from a string-representation.
//    spools {string}, defines the pools of the control from a string-representation.
//    defArrange {object}, holds different options to auto-arrange the elements using the Arrange method
//    allowLinkControlPoint {exontrol.Surface.LinkControlPointEnum}, indicates the control points of the link, the user can use to customize the link's path
//    coord {exontrol.Surface.CoordEnum}, specifies the type of coordinates the elements of the surface display in
//
///////////////////////////////////////////////////////////

/**
 * @description The exontrol.Def.Surface namespace provides definitions for different objects, primitives, objects of exontrol.Swimlane object
*/
exontrol.Def.Surface =
{
  /**
   * @description The scrollBars field determines whether the control has horizontal and/or vertical scroll bars. A combination of one or more exontrol.ScrollBarsEnum flags that determines whether the control has horizontal and/or vertical scroll bars.
   *
   * The exontrol.ScrollBarsEnum type defines the following flags:
   *
   *  exNoScroll (0), specifies that no scroll bars are shown (scroll is not allowed)
   *  exHorizontal (1), specifies that only horizontal scroll bars is shown
   *  exVertical (2), specifies that only vertical scroll bars is shown
   *  exBoth (3), specifies that both horizontal and vertical scroll bars are shown
   *  exDisableNoHorizontal (5), specifies that the horizontal scroll bar is always shown, it is disabled if it is unnecessary
   *  exDisableNoVertical (10), specifies that the vertical scroll bar is always shown, it is disabled if it is unnecessary
   *  exDisableBoth (15), specifies that both horizontal and vertical scroll bars are always shown, disabled if they are unnecessary
   *  exHScrollOnThumbRelease (0x100), specifies that the control's content is horizontally scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
   *  exVScrollOnThumbRelease (0x200), specifies that the control's content is vertically scrolled as soon as the user releases the thumb of the vertical scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
   *  exScrollOnThumbRelease (0x300), specifies that the control's content is scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
   *  exHScrollEmptySpace (0x400), allows empty space, when the control's content is horizontally scrolled to the end
   *  exVScrollEmptySpace (0x800), allows empty space, when the control's content is vertically scrolled to the end
   *  exScrollEmptySpace (0xC00), allows empty space, when the control's content is scrolled to the end
   *  exExtendSBS (0x3000), specifies that the control's scroll-bars are visible only when the mouse pointer hovers the window. Also, the control's client area is extended on the scroll bars portion
   *  exMinSBS (0xC000), specifies that the control's scroll-bars are shown as minimized
   *  exHideSBS (0x10000), specifies that no scroll bars are shown (scroll is allowed)
   *
   * @type {exontrol.ScrollBarsEnum}
   * @example
   *
   *  0 or exontrol.ScrollBarsEnum.exNoScroll {number}, removes the control's scroll bars, so scroll is not allowed
   *  15 or exontrol.ScrollBarsEnum.exDisableBoth {number}, the control always displays the scroll bars, and they are active only if scroll is possible
   *  12291 or exontrol.ScrollBarsEnum.exBoth | exontrol.ScrollBarsEnum.exExtendSBS {number}, the control shows the scroll bars only if the cursor hovers the control, and the control scroll bars are hidden as soon as the cursor leaves the control
  */
   scrollBars: exontrol.ScrollBarsEnum.exBoth,
  /**
   * @description The scrollBarsHome field specifies the color to highlight the position of origin (0,0) on the control's scroll bars. Indicates null, to prevent showing the position of origin (0,0) on the control's scroll bars, or a CSS color
   * @type {string}
   * @example
   *
   *   null {null}, hides the origin (0,0) on the control's scroll bar
   *   "black" {string}, shows the origin (0,0) on the control's scroll bar in black
  */
   scrollBarsHome: "black",
  /**
   * @description The scrollBarsLayout field specifies the color to highlight the position of the current layout within the control's scroll bars. Specifies null, to hide the position of the current layout within the control's scroll bars, or a CSS color
   * @type {string}
   * @example
   *
   *   null {null}, hides the position of the current layout within the control's scroll bars.
   *   "black" {string}, shows in black  the position of the current layout within the control's scroll bars.
  */
   scrollBarsLayout: "black",
  /**
  * @description The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.
  *
  * The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:
  *
  *   bold, displays the text in bold (equivalent of <b> tag)
  *   italic, displays the text in italics (equivalent of <i> tag)
  *   underline, underlines the text (equivalent of <u> tag)
  *   strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
  *   <fontName name>, specifies the font's family (equivalent of <font name> tag)
  *   <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
  *   <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
  *   <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
  *   <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
  *   <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  *   <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)
  *
  * Any other word within the tfi field that's not recognized as a keyword is interpreted as:
  *
  *   name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
  *   size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)
  *
  * The tfi field as object supports any of the following fields:
  *
  *   bold {boolean}, displays the text in bold (equivalent of <b> tag)
  *   italic {boolean}, displays the text in italics (equivalent of <i> tag)
  *   underline {boolean}, underlines the text (equivalent of <u> tag)
  *   strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
  *   fontName {string}, specifies the font's family (equivalent of <font name> tag)
  *   fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
  *   fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
  *   bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
  *   shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
  *     color {string}, defines the color of the text's shadow (CSScolor)
  *     width {number}, defines the size of the text's shadow
  *     offset {number}, defines the offset to show the text's shadow relative to the text
  *   outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  *   graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
  *     color {string}, defines the gradient-color (CSScolor)
  *     mode {number}, defines the gradient mode as a value between 0 and 4
  *     blend {number}, defines the gradient blend as a value between 0 and 1
  *
  * CSSColor or CSS legal color values can be specified by the following methods:
  *
  *   Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
  *   Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
  *   RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
  *   RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
  *   HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
  *   HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
  *   Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
  *
  * @type {(string|object)}
  * @example
  *
  *   null {null}, the tfi field is ignored
  *   "bold monospace 16" {string}, defines Monospace font of 16px height, bold
  *   {bold: true, fontName: "monospace", fontSize: 16} {object}, defines Monospace font of 16px height, bold
  */
   tfi: null,
  /**
   * @description The locked field indicates whether the control is locked(protected) or unlocked
   * @type {boolean}
   * @example
   *
   *   false {boolean}, unlocks the control (can select any element)
   *   true {boolean}, locks the control (can't select any element)
  */
   locked: false,
  /**
   * @description The readOnly field indicates whether the control is read-only
   * @type {boolean}
   * @example
   *
   *   false {boolean}, the user can create, resize or move any element
   *   true {boolean}, the user can not create, resize or move any element.
  */
   readOnly: false,
  /**
  * @description The wheelChange field specifies the amount the control scrolls when the user rolls the mouse wheel.
  * @type {number}
  * @example
  *
  *   0 {number}, locks any action the mouse's wheel performs
  *   18 {number}, scrolls the control by 18-pixels when mouse's wheel is rotated (CTRL + wheel scrolls horizontally)
  */
   wheelChange: 18,
  /**
   * @description The smooth field defines the time in ms the control goes from one layout to another.
   * @type {number}
   * @example
   *
   *   0 {number}, no smooth changes once the control goes from a layout to another
   *   125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms.
  */
   smooth: 125,
  /**
   * @description The margins field specifies control's margins. Indicates an object of {x,y,indent,border} type that defines the horizontal, vertical and indent distance between elements.
   * @type {object}
  */
  margins:
  {
    /**
     * @description The x field defines the horizontal distance between two visible neighbor elements.
     * @type {number}
     * @example
     *
     *  0 {number}, defines no horizontal distance between two visible neighbor elements
     *  16 {number}, defines 16-pixels horizontal distance between two visible neighbor elements
    */
     x: 2,
    /**
     * @description The y field defines the vertical distance between two visible neighbor elements.
     * @type {number}
     * @example
     *
     *  0 {number}, defines no vertical distance between two visible neighbor elements
     *  16 {number}, defines 16-pixels vertical distance between two visible neighbor elements
    */
     y: 2,
    /**
     * @description The indent field defines the distance between a child element and its parent, while the elements are arranged as a tree.
     * @type {number}
     * @example
     *
     *  0 {number}, defines no indention
     *  16 {number}, defines 16-pixels indention
    */
     indent: 16,
    /**
     * @description The border field defines the distance between the elements and the border of the control.
     * @type {number}
     * @example
     *
     *  0 {number}, defines no space between control's borders and elements
     *  16 {number}, defines 16-pixels distance between the elements and the border of the control
    */
     border: 16
  },
  /**
   * @description The shapes field defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. A string expression that defines the shapes each part of the control can display.
   *
   * The format of shapes property is:
   *
   *  "shape(part),shape(part),..."
   *
   * where:
   *
   *  "shape", defines the shape to apply on the UI part as one of the following:
   *
   *    any of 140 color names any browser supports (such as red, blue, green, ...)
   *    hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
   *    hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
   *    RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
   *    RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
   *    HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
   *    HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
   *    a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": &quot;RoundRect&quot;,&quot;fillColor&quot;:&quot;black&quot;,&quot;tfi&quot;: {&quot;fgColor&quot;: "white"}}}')
   *    specifies the name of the field within the exontrol.Shapes.Surface object (while it starts with a lowercase letter, such as element which refers to exontrol.Shapes.Surface.element shape)
   *    specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)
   *
   *  "part", defines the name of the part the shape is applied on (as defined bellow)
   *
   * The shapes property supports any of the following parts:
   *
   *  "element", defines the visual-appearance of all elements within the control
   *  "link-bs", defines the visual-appearance of the link's start control-point (it changes the start-position of the link)
   *  "link-be", defines the visual-appearance of the link's end control-point (it changes the end-position of the link)
   *  "link-p", defines the visual-appearance of the link's intermediate control-point
   *  "link-m", defines the visual-appearance of the link's middle control-point
   *  "pool", defines the visual-appearance of all pools within the control
   *  "lane", defines the visual-appearance of all lanes for all pools
   *  "laneAlt", defines the visual-appearance of alternate lanes for all pools
   *  "phase", defines the visual-appearance of all phases for all pools
   *  "phaseAlt", defines the visual-appearance of alternate phases for all pools
   *  "header", defines the visual-appearance of all headers within the control
   *  "select", defines the visual-appearance of selected-element
   *  "frameFit", defines the visual-appearance to display the frame while fitting objects into the control's client area by drag
   *  "frameSel", defines the visual appearance to display a frame while selecting objects by drag
   *  "frameDrag", specifies the visual appearance to display the frame while dragging the objects
   *  "expand", specifies the visual appearance for expand/collapse glyphs
   *  "multiSel", specifies the visual appearance to show the count of multiple-selected items
   *
   * @type {string}
   * @example
   *
   *  null {null}, specifies the default visual appearance
   *  "" {string}, no shape (no visual appearance is applied to any part of the control)
   *  "red(element)", "#FF0000(element)", "rgb(255,0,0)(element)", "rgba(255,0,0,1)(element)" {string}, shows all-elements in red
   *  '{"hover":{"frameColor":"black","pad":-0.5}}(element)' {string}, draws a black-frame arround the element being hovered
   *  "xxx(d),yyy(d,m),zzz(y)"  {string}, specifies that the exontrol.Shapes.Surface.xxx combined with exontrol.Shapes.Surface.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Surface.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Surface.zzz object defines the visual appearance of "y" part of the control
  */
   shapes: "Border(pool),flp(lane,phase),altflp(laneAlt,phaseAlt),Button(header),element(element),Expand(expand),FrameFit(frameFit),FrameSel(frameSel,select),shmulti(multiSel)",
  /**
   * @description The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. Specifies the mouse cursor to be displayed when pointing over a part of the control.
   *
   * The format of cursors property is:
   *
   *  "cursor(part),cursor(part),..."
   *
   * where:
   *
   *  "cursor", defines the CSS mouse cursor to display while cursor hovers the part
   *  "part", defines the name of the part the cursor is applied on (as defined bellow)
   *
   * The cursors property supports any of the following parts:
   *
   *  "element", defines the mouse-cursor when the mouse pointer hovers any element
   *  "expand" (expand/collapse), defines the mouse-cursor when the mouse pointer hovers the element's expand/collapse glyphs
   *  "pool", defines the mouse-cursor when the mouse pointer hovers any pool
   *  "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the <a> ex-HTML part marks an anchor or hyperlink element)
   *  "link-cp" (link-control-point), defines the mouse-cursor when the mouse pointer hovers any link's control point
   *  "link-cp-all" (link-control-point-all), defines the mouse-cursor when the mouse pointer hovers any link's control point (while the link is orthogonally arranged by drag and drop ~ exOrthoArrange)
   *  "link-cp-h" (link-control-point-horizontal), defines the mouse-cursor when the mouse pointer hovers a horizontal line (while the link is orthogonally arranged by drag and drop ~ exOrthoArrange)
   *  "link-cp-v" (link-control-point-vertical), defines the mouse-cursor when the mouse pointer hovers a vertical line (while the link is orthogonally arranged by drag and drop ~ exOrthoArrange)
   *
   * @type {string}
   * @example
   *
   *   "pointer(xxx,yy)" {string}, indicates that the "pointer" mouse cursor is shown while cursor hovers any "xxx" or "yyy" part of the control
  */
   cursors: "pointer(element,link-cp,expand,drag-drop,anchor),all-scroll(link-cp-all),row-resize(link-cp-h),col-resize(link-cp-v)",
  /**
   * @description The singleSel field specifies whether the control supports single, multiple, toggle selection. Indicates whether the control supports single or multiple selection.
   *
   * The exontrol.Swimlane.SingleSelEnum type defines the following flags:
   *
   *  exDisableSel(0), specifies that the control's selection is disabled (can not be combined with any other flags)
   *  exEnableSel(1), specifies that the control's selection is enabled (multiple-selection, unless the exSingleSel is set )
   *  exSingleSel(2), specifies that the user can select a element only
   *  exToggleSel(4), specifies that the element's selection state is toggled once the user clicks a element.
   *  exDisableCtrlSel(8), disables toggling the element's selection state when user clicks a element, while CTRL modifier key is pressed.
   *  exDisableShiftSel(16), disables selecting elements using the SHIFT key.
   *  exDisableDrag(32), disables selecting elements by drag.
   *
   * @type {exontrol.Swimlane.SingleSelEnum}
   * @example
   *
   *  0 or exontrol.Swimlane.SingleSelEnum.exDisableSel {number}, disables selecting any element
   *  3 or exontrol.Swimlane.SingleSelEnum.exSingleSel | exontrol.Swimlane.SingleSelEnum.exEnableSel {number}, enables control's single selection, so only a single element can be selected
   *  6 or exontrol.Swimlane.SingleSelEnum.exToggleSel | exontrol.Swimlane.SingleSelEnum.exSingleSel {number}, enables control's single and toggle selection, which means that once a element is selected it gets unselected once it is clicked, or reverse, and only a single-element can be selected at once.
  */
   singleSel: exontrol.Swimlane.SingleSelEnum.exEnableSel,
  /**
   * @description The zoom field defines the zoom factor of the control's content. The zoomLevels field defines the margins of the zoom-factor the control is allowed to magnify. Indicates the content's zoom factor in percent. The zoom field can be any value between 10 (10%) and 1000 (1000%)
   * @type {number}
   * @example
   *
   *   null {null}, Specifies normal-view (100%)
   *   150 {number}, Indicates that the control's content is magnfied to 150%
  */
   zoom: 100,
  /**
   * @description The zoomLevels field defines the zoom-levels the user can magnify the control's content. Specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-margins the control's content is allowed to zoom
   * @type {string}
   * @example
   *
   *   null {null}, Specifies that the control's zoom factor is always 100%
   *   150 {number}, Specifies that the control's zoom factor is always 150%
   *   "50,100,200,350" {string}, Indicates that the zoom-factor can be any of selected values, and the margins of zoom-factor is 50% to 350%
  */
   zoomLevels: "25,35,50,65,75,80,90,100,110,125,150,175,200,250,300,400,500",
  /**
   * @description The formatText field specifies the format to display the element's caption. A combination of one or more exontrol.DrawTextFormatEnum flags that defines the format to show the element's caption.
   *
   * The exontrol.DrawTextFormatEnum type support the following flags:
   *
   *   exTextAlignTop (0x00), justifies the text to the top of the rectangle
   *   exTextAlignLeft (0x00), aligns text to the left
   *   exTextAlignCenter (0x01), centers text horizontally in the rectangle
   *   exTextAlignRight (0x02), aligns text to the right
   *   exTextAlignVCenter (0x04), centers text vertically
   *   exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle.
   *   exTextAlignMask (0x0F), specifies the mask for text's alignment.
   *   exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line.
   *   exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line.
   *   exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight.
   *   exPlainText (0x80), treats the text as plain text.
   *   exTextNoClip (0x0100), draws without clipping.
   *   exHTMLTextNoColors (0x0200), ignores the <fgcolor> and </bgcolor> tags.
   *   exTextCalcRect (0x0400), determines the width and height of the text.
   *   exHTMLTextNoTags (0x0800), ignores all HTML tags.
   *   exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash.
   *   exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses.
   *   exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses.
   *
   * @type {exontrol.DrawTextFormatEnum}
   * @example
   *
   *   null {null}, centers the caption
   *   32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line caption
   *   0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line caption right/bottom-aligned
  */
   formatText: exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextAlignVCenter | exontrol.DrawTextFormatEnum.exTextWordBreak | exontrol.DrawTextFormatEnum.exTextWordEllipsis,
  /**
   * @description The pad field defines the element's padding (space between the element's content and its border). A value that could be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size
   * @type {(number|string|array)}
   * @example
   *
   *   null {null}, indicates that the default-padding field is used ([4,4])
   *   0 {number}, indicates no padding
   *   "8,4" {string}, increases the element's width with 2 * 8-pixels and element's height with 2 * 4-pixels
   *   [8,4] {array}, increases the element's width with 2 * 8-pixels and element's height with 2 * 4-pixels
  */
   pad: [4,4],
  /**
   * @description The imageSize field defines the size of the element's image. Indicates the size of the element's image.
   *
   * The imageSize could be of one of the following types:
   *
   *  {null}, Indicates that the element's image is displayed as it is (full-sized).
   *  {number}, Specifies that the element's image is displayed into a square of giving size (same width and height). If 0 the element displays no image, if negative the element's image is stretched to giving square, else the element's picture is scaled to fit the giving rectangle.
   *  {array}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the element's picture to scale or stretch to.
   *
   * @type {(null|number|array)}
   * @example
   *
   *  null {null}, Indicates that the element's image is displayed as it is (full-sized).
   *  0 {number}, no image is displayed
   *  64 {number}, the image is scaled to fit a 64 x 64 rectangle
   *  -64 {number}, the image is strected to a 64 x 64 rectangle
   *  [32,64] {array}, scales the image to the largest ratio-rectangle (32 x 64) that fits the client
   *  [-32,-64] {array}, stretches the image to a 32 x 64 rectangle
  */
   imageSize: null,
  /**
   * @description The imageAlign field defines the alignment of the image within the element. Indicates the alignment of the image within the element. as 0 (left, default), 1(right), 2(top) or 3(bottom).
   *
   * The imageAlign propery can be any of the following:
   *
   *  0, the image is on the left of the element's caption
   *  1, the image is on the right of the element's caption
   *  2, the image is on the top of the element's caption
   *  3, the image is on the bottom of the element's caption
   *
   * @type {number}
   * @example
   *
   *  null {null}, the image is on top of the element's cation (default value)
   *  1 {number}, the image is displayed to the right of the element's caption
  */
   imageAlign: 2,
  /**
   * @description The showLinks field indicates whether the control shows or hides the links between elements. Indicates a combination of one or more exontrol.ShowLinksEnum that defines whether the links between elements are visible or hidden
   *
   * The exontrol.ShowLinksEnum type supports the following flags:
   *
   *  exHide (0), specifies that no links are visible
   *  exExtended (0x01), specifies that links are shown as extended
   *  exShow (0x02), specifies that links are visible (the links are always shown while not exHide)
   *  exFront (0x10), specifies that links are shown in front (by default, the control are shown on the background)
   *  exCrossRect (0x20), shows rectangular cross-links
   *  exCrossTriangle (0x20), shows triangular cross-links
   *  exCrossMixt (0x60), shows mixt cross-links
   *  exPreventOverlap (0x100), adjusts the links to prevent them from overlapping the connected objects (@since 4.0)
   *  exChangeColorOnOverlap (0x200), adjusts the brightness of the color for links in areas where they overlap with other links, enhancing clarity and distinction between them (@since 4.0)
   *
   * @type {exontrol.ShowLinksEnum}
   * @example
   *
   *  0 or exontrol.ShowLinksEnum.exHide {number}, hides the links
   *  1 or exontrol.ShowLinksEnum.exShow {number}, shows the links (on the background)
   *  33 or exontrol.ShowLinksEnum.exExtended | exontrol.ShowLinksEnum.exCrossRect {number}, shows "extended" and "cross" links
  */
   showLinks: exontrol.ShowLinksEnum.exExtended | exontrol.ShowLinksEnum.exCrossRect,
  /**
   * @description The collapsedLink field specifies the appearance of the link between collapsed elements. Specifies the appearance of the link between collapsed elements.
   *
   * The link object includes any of the following:
   *
   *  type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
   *  dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
   *  width {number}, specifies the link's width or size (1 by default)
   *  color {string}, indicates the link's color (partial-black by default)
   *  arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
   *  style {array}, specifies the link's dash pattern to show the lines (solid by default)
   *  startPos {any}, indicates the list of corners of in-element, the link can start from
   *  endPos {any}, indicates the list of corners of out-element, the link can end to
   *
   * @type {object}
  */
  collapsedLink:
  {
    /**
     * @description The type field specifies the type of the link. Indicates a value of exontrol.LinkTypeEnum type that defines the type of the link.
     *
     * The exontrol.LinkTypeEnum type defines the following values:
     *
     *  exRect (0), defines a rectangular-link
     *  exDirect (1), defines a direct-link
     *  exStraight (2), defines a straight-link
     *  exRound (3), defines a round-link
     *
     * @type {exontrol.LinkTypeEnum}
     * @example
     *
     *  null {null}, indicates the default type of link, which is similar with rectangular-link (equivalent of 0)
     *  0 or exontrol.LinkTypeEnum.exRect {null}, shows rectangular-links
     *  2 or exontrol.LinkTypeEnum.exStraight {null}, shows straight-links
    */
     type: undefined,
    /**
     * @description The dir field specifies whether the link's direction is shown or hidden. Indicates a numeric value that defines whether the link's direction is shown or hidden.
     *
     * The dir field can be any of the following values:
     *
     *  0, specifies that no direction for the link is shown
     *  1, shows the direction/arrow where the link begins
     *  2, shows the direction/arrow where the link ends
     *  3, shows the arrows on both sides
     *
     * If not specified, the option 2 is used by default.
     *
     * @type {number}
     * @example
     *
     *  null {null}, shows the direction/arrow where the link ends (equivalent of 2)
     *  0 {number}, hides the link's direction
     *  3 {number}, shows the arrows on both sides
    */
     dir: undefined,
    /**
     * @description The width field defines the size/width of the link.
     * @type {number}
     * @example
     *
     *  null {null}, indicates links of 1-pixel wide
     *  2 {number}, indicates links of 2-pixels wide
    */
     width: undefined,
    /**
     * @description The color field specifies the color to show the link. Defines the color of the link as a CSS color format
     * @type {string}
     * @example
     *
     *  null {null}, indicates a black link
     *  "transparent" {string}, specifies a transparent link
     *  "red" {string}, specifies a red link
     *  "#00FF00" {string}, specifies a green link
     *  "rgba(255,0,0,0.5)" {string}, indicates 50% red link
    */
     color: "rgb(196,196,196)",
    /**
     * @description The arrow field indicates the arrow's color. Defines the color to show the link's arrow/direction into CSS color format. If it is missing or not specified the arrow is shown using the link's color.
     *
     * @type {string}
     * @example
     *
     *  null {null}, indicates that the link's color defines the color of the link's arrow
     *  "transparent" {string}, specifies a transparent arrow
     *  "red" {string}, specifies a red arrow
     *  "#00FF00" {string}, specifies a green arrow
     *  "rgba(255,0,0,0.5)" {string}, indicates 50% red arrow
    */
     arrow: undefined,
    /**
     * @description The style field defines the style of the link. An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated.
     * @type {array}
     * @example
     *
     *  null {null}, defines a solid grid-lines
     *  [] {array}, indicates a solid grid-lines
     *  2 {number}, will become [2, 2, ...]
     *  [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...]
    */
     style: 2,
    /**
     * @description The startPos field defines the in-element's corners, the link can start from. Indicates a numeric or string value that defines the in-element's corners, the link can start from, as explained bellow:
     *
     * The startPos field can be:
     *
     *  startPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element.
     *  startPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
     *  startPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
     *
     * The exontrol.CT type defines the following values:
     *
     *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
     *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
     *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
     *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
     *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
     *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
     *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
     *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
     *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
     *
     * @type {any}
     * @example
     *
     *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element
     *  exontrol.CT.TC {number}, indicates that the link always starts from the top-center point of the in-element
     *  exontrol.CT.TL | exontrol.CT.TC | exontrol.CT.TR {number}, indicates that the link starts from the in-element's top side (the closest to out-element)
     *  "MR" {string}, specifies that the link always starts from the middle-right point of the in-element
     *  "TR,MR,BR" {string}, specifies that the link starts from the in-element's right side (the closest to out-element)
    */
     startPos: undefined,
    /**
     * @description The endPos field defines the out-element's corners, the link can end into. Indicates a numeric or string value that defines the out-element's corners, the link can end into, as explained bellow:
     *
     * The endPos field can be:
     *
     *  endPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the in-element's closest point to in-element
     *  endPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
     *  endPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
     *
     * The exontrol.CT type defines the following values:
     *
     *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
     *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
     *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
     *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
     *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
     *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
     *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
     *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
     *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
     *
     * @type {any}
     * @example
     *
     *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the out-element's closest point to in-element
     *  exontrol.CT.BC {number}, indicates that the link always ends into the bottom-center point of the out-element
     *  exontrol.CT.BL | exontrol.CT.BC | exontrol.CT.BR {number}, indicates that the link ends into the out-element's bottom side (the closest to in-element)
     *  "ML" {string}, specifies that the link always ends to the middle-left point of the out-element
     *  "TL,ML,BL" {string}, specifies that the link ends into the out-element's left side (the closest to in-element)
    */
     endPos: undefined
  },
  /**
   * @description The link field specifies the appearance of the link between elements. Specifies the appearance of the link between elements.
   *
   * The link object includes any of the following:
   *
   *  type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
   *  dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
   *  width {number}, specifies the link's width or size (1 by default)
   *  color {string}, indicates the link's color (partial-black by default)
   *  arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
   *  style {array}, specifies the link's dash pattern to show the lines (solid by default)
   *  startPos {any}, indicates the list of corners of in-element, the link can start from
   *  endPos {any}, indicates the list of corners of out-element, the link can end to
   *
   * @type {object}
  */
  link:
  {
    /**
     * @description The type field specifies the type of the link. Indicates a value of exontrol.LinkTypeEnum type that defines the type of the link.
     *
     * The exontrol.LinkTypeEnum type defines the following values:
     *
     *  exRect (0), defines a rectangular-link
     *  exDirect (1), defines a direct-link
     *  exStraight (2), defines a straight-link
     *  exRound (3), defines a round-link
     *
     * @type {exontrol.LinkTypeEnum}
     * @example
     *
     *  null {null}, indicates the default type of link, which is similar with rectangular-link (equivalent of 0)
     *  0 or exontrol.LinkTypeEnum.exRect {null}, shows rectangular-links
     *  2 or exontrol.LinkTypeEnum.exStraight {null}, shows straight-links
    */
     type: undefined,
    /**
     * @description The dir field specifies whether the link's direction is shown or hidden. Indicates a numeric value that defines whether the link's direction is shown or hidden.
     *
     * The dir field can be any of the following values:
     *
     *  0, specifies that no direction for the link is shown
     *  1, shows the direction/arrow where the link begins
     *  2, shows the direction/arrow where the link ends
     *  3, shows the arrows on both sides
     *
     * If not specified, the option 2 is used by default.
     *
     * @type {number}
     * @example
     *
     *  null {null}, shows the direction/arrow where the link ends (equivalent of 2)
     *  0 {number}, hides the link's direction
     *  3 {number}, shows the arrows on both sides
    */
     dir: undefined,
    /**
     * @description The width field defines the size/width of the link.
     * @type {number}
     * @example
     *
     *  null {null}, indicates links of 1-pixel wide
     *  2 {number}, indicates links of 2-pixels wide
    */
     width: undefined,
    /**
     * @description The color field specifies the color to show the link
     * @type {string}
     * @example
     *
     *  null {null}, indicates a black link
     *  "transparent" {string}, specifies a transparent link
     *  "red" {string}, specifies a red link
     *  "#00FF00" {string}, specifies a green link
     *  "rgba(255,0,0,0.5)" {string}, indicates 50% red link
    */
     color: "rgb(128,128,128)",
    /**
     * @description The arrow field indicates the arrow's color. Defines the color to show the link's arrow/direction into CSS color format. If it is missing or not specified the arrow is shown using the link's color.
     *
     * @type {string}
     * @example
     *
     *  null {null}, indicates that the link's color defines the color of the link's arrow
     *  "transparent" {string}, specifies a transparent arrow
     *  "red" {string}, specifies a red arrow
     *  "#00FF00" {string}, specifies a green arrow
     *  "rgba(255,0,0,0.5)" {string}, indicates 50% red arrow
    */
     arrow: undefined,
    /**
     * @description The style field defines the style of the link. An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated.
     * @example
     *
     *  null {null}, defines a solid grid-lines
     *  [] {array}, indicates a solid grid-lines
     *  2 {number}, will become [2, 2, ...]
     *  [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...]
     *
     * @type {array}
    */
     style: undefined,
    /**
     * @description The startPos field defines the in-element's corners, the link can start from. Indicates a numeric or string value that defines the in-element's corners, the link can start from, as explained bellow:
     *
     * The startPos field can be:
     *
     *  startPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element.
     *  startPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
     *  startPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
     *
     * The exontrol.CT type defines the following values:
     *
     *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
     *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
     *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
     *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
     *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
     *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
     *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
     *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
     *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
     *
     * @type {any}
     * @example
     *
     *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element
     *  exontrol.CT.TC {number}, indicates that the link always starts from the top-center point of the in-element
     *  exontrol.CT.TL | exontrol.CT.TC | exontrol.CT.TR {number}, indicates that the link starts from the in-element's top side (the closest to out-element)
     *  "MR" {string}, specifies that the link always starts from the middle-right point of the in-element
     *  "TR,MR,BR" {string}, specifies that the link starts from the in-element's right side (the closest to out-element)
    */
     startPos: undefined,
    /**
     * @description The endPos field defines the out-element's corners, the link can end into. Indicates a numeric or string value that defines the out-element's corners, the link can end into, as explained bellow:
     *
     * The endPos field can be:
     *
     *  endPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the in-element's closest point to in-element
     *  endPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
     *  endPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
     *
     * The exontrol.CT type defines the following values:
     *
     *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
     *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
     *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
     *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
     *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
     *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
     *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
     *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
     *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
     *
     * @type {any}
     * @example
     *
     *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the out-element's closest point to in-element
     *  exontrol.CT.BC {number}, indicates that the link always ends into the bottom-center point of the out-element
     *  exontrol.CT.BL | exontrol.CT.BC | exontrol.CT.BR {number}, indicates that the link ends into the out-element's bottom side (the closest to in-element)
     *  "ML" {string}, specifies that the link always ends to the middle-left point of the out-element
     *  "TL,ML,BL" {string}, specifies that the link ends into the out-element's left side (the closest to in-element)
    */
     endPos: undefined
  },
  /**
   * @description The linkStartFrom field specifies the appearance of the link that starts from any selected-bar (outgoing links). Specifies the appearance of the link that starts from any selected-bar (outgoing links).
   *
   * The linkStartFrom object includes any of the following:
   *
   *  type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
   *  dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
   *  width {number}, specifies the link's width or size (1 by default)
   *  color {string}, indicates the link's color (partial-black by default)
   *  arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
   *  style {array}, specifies the link's dash pattern to show the lines (solid by default)
   *  startPos {any}, indicates the list of corners of in-element, the link can start from
   *  endPos {any}, indicates the list of corners of out-element, the link can end to
   *
   * @type {object}
  */
  linkStartFrom:
  {
    /**
    * @description The type field specifies the type of the link. Indicates a value of exontrol.LinkTypeEnum type that defines the type of the link.
    *
    * The exontrol.LinkTypeEnum type defines the following values:
    *
    *  exRect (0), defines a rectangular-link
    *  exDirect (1), defines a direct-link
    *  exStraight (2), defines a straight-link
    *  exRound (3), defines a round-link
    *
    * @type {exontrol.LinkTypeEnum}
    * @example
    *
    *  null {null}, indicates the default type of link, which is similar with rectangular-link (equivalent of 0)
    *  0 or exontrol.LinkTypeEnum.exRect {null}, shows rectangular-links
    *  2 or exontrol.LinkTypeEnum.exStraight {null}, shows straight-links
    */
     type: undefined,
    /**
    * @description The dir field specifies whether the link's direction is shown or hidden. Indicates a numeric value that defines whether the link's direction is shown or hidden.
    *
    * The dir field can be any of the following values:
    *
    *  0, specifies that no direction for the link is shown
    *  1, shows the direction/arrow where the link begins
    *  2, shows the direction/arrow where the link ends
    *  3, shows the arrows on both sides
    *
    * If not specified, the option 2 is used by default.
    *
    * @type {number}
    * @example
    *
    *  null {null}, shows the direction/arrow where the link ends (equivalent of 2)
    *  0 {number}, hides the link's direction
    *  3 {number}, shows the arrows on both sides
    */
     dir: undefined,
    /**
    * @description The width field defines the size/width of the link.
    * @type {number}
    * @example
    *
    *  null {null}, indicates links of 1-pixel wide
    *  2 {number}, indicates links of 2-pixels wide
    */
     width: undefined,
    /**
    * @description The color field specifies the color to show the link. Defines the color of the link as a CSS color format
    * @type {string}
    * @example
    *
    *  null {null}, indicates a black link
    *  "transparent" {string}, specifies a transparent link
    *  "red" {string}, specifies a red link
    *  "#00FF00" {string}, specifies a green link
    *  "rgba(255,0,0,0.5)" {string}, indicates 50% red link
    */
     color: undefined,
    /**
    * @description The arrow field indicates the arrow's color. Defines the color to show the link's arrow/direction into CSS color format. If it is missing or not specified the arrow is shown using the link's color.
    *
    * @type {string}
    * @example
    *
    *  null {null}, indicates that the link's color defines the color of the link's arrow
    *  "transparent" {string}, specifies a transparent arrow
    *  "red" {string}, specifies a red arrow
    *  "#00FF00" {string}, specifies a green arrow
    *  "rgba(255,0,0,0.5)" {string}, indicates 50% red arrow
    */
     arrow: undefined,
    /**
    * @description The style field defines the style of the link. An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated.
    * @type {array}
    * @example
    *
    *  null {null}, defines a solid grid-lines
    *  [] {array}, indicates a solid grid-lines
    *  2 {number}, will become [2, 2, ...]
    *  [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...]
    */
     style: undefined,
    /**
    * @description The startPos field defines the in-element's corners, the link can start from. Indicates a numeric or string value that defines the in-element's corners, the link can start from, as explained bellow:
    *
    * The startPos field can be:
    *
    *  startPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element.
    *  startPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
    *  startPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
    *
    * The exontrol.CT type defines the following values:
    *
    *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
    *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
    *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
    *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
    *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
    *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
    *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
    *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
    *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
    *
    * @type {any}
    * @example
    *
    *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element
    *  exontrol.CT.TC {number}, indicates that the link always starts from the top-center point of the in-element
    *  exontrol.CT.TL | exontrol.CT.TC | exontrol.CT.TR {number}, indicates that the link starts from the in-element's top side (the closest to out-element)
    *  "MR" {string}, specifies that the link always starts from the middle-right point of the in-element
    *  "TR,MR,BR" {string}, specifies that the link starts from the in-element's right side (the closest to out-element)
    */
     startPos: undefined,
    /**
    * @description The endPos field defines the out-element's corners, the link can end into. Indicates a numeric or string value that defines the out-element's corners, the link can end into, as explained bellow:
    *
    * The endPos field can be:
    *
    *  endPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the in-element's closest point to in-element
    *  endPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
    *  endPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
    *
    * The exontrol.CT type defines the following values:
    *
    *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
    *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
    *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
    *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
    *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
    *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
    *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
    *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
    *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
    *
    * @type {any}
    * @example
    *
    *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the out-element's closest point to in-element
    *  exontrol.CT.BC {number}, indicates that the link always ends into the bottom-center point of the out-element
    *  exontrol.CT.BL | exontrol.CT.BC | exontrol.CT.BR {number}, indicates that the link ends into the out-element's bottom side (the closest to in-element)
    *  "ML" {string}, specifies that the link always ends to the middle-left point of the out-element
    *  "TL,ML,BL" {string}, specifies that the link ends into the out-element's left side (the closest to in-element)
    */
     endPos: undefined
  },
  /**
  * @description The linkEndTo field specifies the appearance of the link that ends to any selected-bar (incoming links). Specifies the appearance of the link that ends to any selected-bar (incoming links).
  *
  * The linkEndTo object includes any of the following:
  *
  *  type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
  *  dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
  *  width {number}, specifies the link's width or size (1 by default)
  *  color {string}, indicates the link's color (partial-black by default)
  *  arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
  *  style {array}, specifies the link's dash pattern to show the lines (solid by default)
  *  startPos {any}, indicates the list of corners of in-element, the link can start from
  *  endPos {any}, indicates the list of corners of out-element, the link can end to
  *
  * @type {object}
  */
  linkEndTo:
  {
    /**
    * @description The type field specifies the type of the link. Indicates a value of exontrol.LinkTypeEnum type that defines the type of the link.
    *
    * The exontrol.LinkTypeEnum type defines the following values:
    *
    *  exRect (0), defines a rectangular-link
    *  exDirect (1), defines a direct-link
    *  exStraight (2), defines a straight-link
    *  exRound (3), defines a round-link
    *
    * @type {exontrol.LinkTypeEnum}
    * @example
    *
    *  null {null}, indicates the default type of link, which is similar with rectangular-link (equivalent of 0)
    *  0 or exontrol.LinkTypeEnum.exRect {null}, shows rectangular-links
    *  2 or exontrol.LinkTypeEnum.exStraight {null}, shows straight-links
    */
     type: undefined,
    /**
    * @description The dir field specifies whether the link's direction is shown or hidden. Indicates a numeric value that defines whether the link's direction is shown or hidden.
    *
    * The dir field can be any of the following values:
    *
    *  0, specifies that no direction for the link is shown
    *  1, shows the direction/arrow where the link begins
    *  2, shows the direction/arrow where the link ends
    *  3, shows the arrows on both sides
    *
    * If not specified, the option 2 is used by default.
    *
    * @type {number}
    * @example
    *
    *  null {null}, shows the direction/arrow where the link ends (equivalent of 2)
    *  0 {number}, hides the link's direction
    *  3 {number}, shows the arrows on both sides
    */
     dir: undefined,
    /**
    * @description The width field defines the size/width of the link.
    * @type {number}
    * @example
    *
    *  null {null}, indicates links of 1-pixel wide
    *  2 {number}, indicates links of 2-pixels wide
    */
     width: undefined,
    /**
    * @description The color field specifies the color to show the link. Defines the color of the link as a CSS color format
    * @type {string}
    * @example
    *
    *  null {null}, indicates a black link
    *  "transparent" {string}, specifies a transparent link
    *  "red" {string}, specifies a red link
    *  "#00FF00" {string}, specifies a green link
    *  "rgba(255,0,0,0.5)" {string}, indicates 50% red link
    */
     color: undefined,
    /**
    * @description The arrow field indicates the arrow's color. Defines the color to show the link's arrow/direction into CSS color format. If it is missing or not specified the arrow is shown using the link's color.
    *
    * @type {string}
    * @example
    *
    *  null {null}, indicates that the link's color defines the color of the link's arrow
    *  "transparent" {string}, specifies a transparent arrow
    *  "red" {string}, specifies a red arrow
    *  "#00FF00" {string}, specifies a green arrow
    *  "rgba(255,0,0,0.5)" {string}, indicates 50% red arrow
    */
     arrow: undefined,
    /**
    * @description The style field defines the style of the link. An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated.
    * @type {array}
    * @example
    *
    *  null {null}, defines a solid grid-lines
    *  [] {array}, indicates a solid grid-lines
    *  2 {number}, will become [2, 2, ...]
    *  [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...]
    */
     style: undefined,
    /**
    * @description The startPos field defines the in-element's corners, the link can start from. Indicates a numeric or string value that defines the in-element's corners, the link can start from, as explained bellow:
    *
    * The startPos field can be:
    *
    *  startPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element.
    *  startPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
    *  startPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
    *
    * The exontrol.CT type defines the following values:
    *
    *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
    *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
    *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
    *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
    *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
    *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
    *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
    *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
    *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
    *
    * @type {any}
    * @example
    *
    *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element
    *  exontrol.CT.TC {number}, indicates that the link always starts from the top-center point of the in-element
    *  exontrol.CT.TL | exontrol.CT.TC | exontrol.CT.TR {number}, indicates that the link starts from the in-element's top side (the closest to out-element)
    *  "MR" {string}, specifies that the link always starts from the middle-right point of the in-element
    *  "TR,MR,BR" {string}, specifies that the link starts from the in-element's right side (the closest to out-element)
    */
     startPos: undefined,
    /**
    * @description The endPos field defines the out-element's corners, the link can end into. Indicates a numeric or string value that defines the out-element's corners, the link can end into, as explained bellow:
    *
    * The endPos field can be:
    *
    *  endPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the in-element's closest point to in-element
    *  endPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
    *  endPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
    *
    * The exontrol.CT type defines the following values:
    *
    *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
    *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
    *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
    *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
    *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
    *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
    *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
    *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
    *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
    *
    * @type {any}
    * @example
    *
    *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the out-element's closest point to in-element
    *  exontrol.CT.BC {number}, indicates that the link always ends into the bottom-center point of the out-element
    *  exontrol.CT.BL | exontrol.CT.BC | exontrol.CT.BR {number}, indicates that the link ends into the out-element's bottom side (the closest to in-element)
    *  "ML" {string}, specifies that the link always ends to the middle-left point of the out-element
    *  "TL,ML,BL" {string}, specifies that the link ends into the out-element's left side (the closest to in-element)
    */
     endPos: undefined
  },
  /**
  * @description The linkUnselected field specifies the appearance of the link not related to any selected-bar (unselected links). Specifies the appearance of the link not related to any selected-bar (unselected links).
  *
  * The linkUnselected object includes any of the following:
  *
  *  type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
  *  dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
  *  width {number}, specifies the link's width or size (1 by default)
  *  color {string}, indicates the link's color (partial-black by default)
  *  arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
  *  style {array}, specifies the link's dash pattern to show the lines (solid by default)
  *  startPos {any}, indicates the list of corners of in-element, the link can start from
  *  endPos {any}, indicates the list of corners of out-element, the link can end to
  *
  * @type {object}
  */
  linkUnselected:
  {
    /**
    * @description The type field specifies the type of the link. Indicates a value of exontrol.LinkTypeEnum type that defines the type of the link.
    *
    * The exontrol.LinkTypeEnum type defines the following values:
    *
    *  exRect (0), defines a rectangular-link
    *  exDirect (1), defines a direct-link
    *  exStraight (2), defines a straight-link
    *  exRound (3), defines a round-link
    *
    * @type {exontrol.LinkTypeEnum}
    * @example
    *
    *  null {null}, indicates the default type of link, which is similar with rectangular-link (equivalent of 0)
    *  0 or exontrol.LinkTypeEnum.exRect {null}, shows rectangular-links
    *  2 or exontrol.LinkTypeEnum.exStraight {null}, shows straight-links
    */
     type: undefined,
    /**
    * @description The dir field specifies whether the link's direction is shown or hidden. Indicates a numeric value that defines whether the link's direction is shown or hidden.
    *
    * The dir field can be any of the following values:
    *
    *  0, specifies that no direction for the link is shown
    *  1, shows the direction/arrow where the link begins
    *  2, shows the direction/arrow where the link ends
    *  3, shows the arrows on both sides
    *
    * If not specified, the option 2 is used by default.
    *
    * @type {number}
    * @example
    *
    *  null {null}, shows the direction/arrow where the link ends (equivalent of 2)
    *  0 {number}, hides the link's direction
    *  3 {number}, shows the arrows on both sides
    */
     dir: undefined,
    /**
    * @description The width field defines the size/width of the link.
    * @type {number}
    * @example
    *
    *  null {null}, indicates links of 1-pixel wide
    *  2 {number}, indicates links of 2-pixels wide
    */
     width: undefined,
    /**
    * @description The color field specifies the color to show the link. Defines the color of the link as a CSS color format
    * @type {string}
    * @example
    *
    *  null {null}, indicates a black link
    *  "transparent" {string}, specifies a transparent link
    *  "red" {string}, specifies a red link
    *  "#00FF00" {string}, specifies a green link
    *  "rgba(255,0,0,0.5)" {string}, indicates 50% red link
    */
     color: undefined,
    /**
    * @description The arrow field indicates the arrow's color. Defines the color to show the link's arrow/direction into CSS color format. If it is missing or not specified the arrow is shown using the link's color.
    *
    * @type {string}
    * @example
    *
    *  null {null}, indicates that the link's color defines the color of the link's arrow
    *  "transparent" {string}, specifies a transparent arrow
    *  "red" {string}, specifies a red arrow
    *  "#00FF00" {string}, specifies a green arrow
    *  "rgba(255,0,0,0.5)" {string}, indicates 50% red arrow
    */
     arrow: undefined,
    /**
    * @description The style field defines the style of the link. An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated.
    * @type {array}
    * @example
    *
    *  null {null}, defines a solid grid-lines
    *  [] {array}, indicates a solid grid-lines
    *  2 {number}, will become [2, 2, ...]
    *  [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...]
    */
     style: undefined,
    /**
    * @description The startPos field defines the in-element's corners, the link can start from. Indicates a numeric or string value that defines the in-element's corners, the link can start from, as explained bellow:
    *
    * The startPos field can be:
    *
    *  startPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element.
    *  startPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
    *  startPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
    *
    * The exontrol.CT type defines the following values:
    *
    *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
    *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
    *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
    *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
    *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
    *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
    *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
    *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
    *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
    *
    * @type {any}
    * @example
    *
    *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element
    *  exontrol.CT.TC {number}, indicates that the link always starts from the top-center point of the in-element
    *  exontrol.CT.TL | exontrol.CT.TC | exontrol.CT.TR {number}, indicates that the link starts from the in-element's top side (the closest to out-element)
    *  "MR" {string}, specifies that the link always starts from the middle-right point of the in-element
    *  "TR,MR,BR" {string}, specifies that the link starts from the in-element's right side (the closest to out-element)
    */
     startPos: undefined,
    /**
    * @description The endPos field defines the out-element's corners, the link can end into. Indicates a numeric or string value that defines the out-element's corners, the link can end into, as explained bellow:
    *
    * The endPos field can be:
    *
    *  endPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the in-element's closest point to in-element
    *  endPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
    *  endPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
    *
    * The exontrol.CT type defines the following values:
    *
    *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
    *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
    *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
    *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
    *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
    *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
    *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
    *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
    *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
    *
    * @type {any}
    * @example
    *
    *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the out-element's closest point to in-element
    *  exontrol.CT.BC {number}, indicates that the link always ends into the bottom-center point of the out-element
    *  exontrol.CT.BL | exontrol.CT.BC | exontrol.CT.BR {number}, indicates that the link ends into the out-element's bottom side (the closest to in-element)
    *  "ML" {string}, specifies that the link always ends to the middle-left point of the out-element
    *  "TL,ML,BL" {string}, specifies that the link ends into the out-element's left side (the closest to in-element)
    */
     endPos: undefined
  },
  /**
   * @description The showLinksOnCollapse field specifies whether links between collapsed elements are visible or hidden.
   * @type {boolean}
   *
   * @example
   *
   *  null {null}, shows links between collapsed elements
   *  false {boolean}, hides the links between collapsed elements
  */
   showLinksOnCollapse: true,
  /**
   * @description The allowActions field customizes the actions the user can perform once the user clicks or touches the control. Specifies the list and order of the actions the user can perform once the user clicks or touches the control.
   *
   * The format of allowActions field is:
   *
   *  "action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."
   *
   * where
   *
   *  "action", indicates the name of the action. The "action" can have any of the following values:
   *
   *    "scroll", scrolls the control's content by drag
   *    "zoom", zooms the control's content at dragging-point.
   *    "fit", fits the drag-area into the control's client area.
   *    "select", selects elements by drag
   *    "create", creates an element or a pool by drag. The "create" action allows flags such as [pool] or [element] that specifies what type object to create. For instance "create[pool](Ctrl+Alt)" creates a pool if Ctrl + Alt is pressed, while "create[element](Alt)" creates an element while the Alt key is pressed. (not available if the control is read-only)
   *    "move", moves or resizes elements by drag. The "move" action allows flags such as [pool] or [element] that specifies what type object it is possible to move or resize. If flag is missing, the user can move or resize elements or pools. For instance, "move[element]" indicates that only elements is allowed to be moved or resized. (not available if the control is read-only)
   *    "link", links elements by drag (not available if the control is read-only). The "link" action allows flags such as:
   *      [toggle], the link is removed if the linked-bars has already a link between
   *    "link-cp", allows customization the link's path by drag (not available if the control is read-only). The "link-cp" action is not required and it has effect only if the control's allowLinkControlPoint property is not zero. For instance, is allowLinkControlPoint property is zero, the "link-cp" does nothing.
   *    "resize-header", resizes the pool's header. The "resize-header" action allows flags such as [left], [top], [right] or [bottom] to specify which type of pool's headers are resizable. If no flag is present, it indicates that all pool's headers are resizable. For instance, "resize-header[left,top]" specifies that just the left and top-header of the pool are resizable. (not available if the control is read-only)
   *    "resize-lane", resizes the pool's lane (the lanes are vertically arranged).
   *    "resize-phase", resizes the pool's phase (the phases are horizontally arranged).
   *
   *  "shortcut", defines the event's button or/and the modifier-keys that are required to perform the action. The "shortcut" is a combination of none, one or more of the following values:
   *
   *    "Shift", indicates that the SHIFT key is pressed
   *    "Ctrl" or "Control", indicates that the CTRL key is pressed
   *    "Alt" or "Menu", indicates that the ALT key is pressed
   *    "Meta" , indicates that the META key is pressed
   *    "LButton", specifies that the mouse's left-button is pressed
   *    "RButton", specifies that the mouse's right-button is pressed
   *    "MButton", specifies that the mouse's middle/wheel-button is pressed
   *    "Long", specifies that the action requires a "long" click/touch before run
   *    "+", indicates AND between values
   *
   * @type {string}
   * @example
   *
   *  null {null}, indicates the control's default allowActions value
   *  "" {string}, specifies that no operation is allowed once the user clicks or touches the control
   *  "scroll" {string}, specifies that only "scroll" operation is allowed, no matter of the event's button or modifier-keys is pressed.
   *  "create(Alt+LButton),move,scroll" {string}, indicates that creating-elements is possible only if the user presses the mouse's left-button while ALT key is pressed, and "move" or "scroll" is possible no matter of the event's button or modifier-keys in this order. Also, if no "create"-operation is possible, do "move"-operation, if no "move"-operation is possible, do "scroll"-operation
   *
  */
   allowActions: "fit(Shift+MButton,Ctrl+MButton,Alt+MButton),zoom(MButton),select(Shift,Ctrl),link(Alt)[toggle],create[pool](Ctrl+Alt),create[element](Alt),move,resize-header,resize-lane,resize-phase,scroll",
  /**
   * @description The expandGlyphSize field specifies the size to show the element's expand/collapse glyphs
   * @type {number}
   * @example
   *
   *  0 {number}, displays no node's expand/collapse glyphs
   *  24 {number}, specifies a size of 24x24 to display the node's expand/collapse glyphs
  */
   expandGlyphSize: 16,
  /**
   * @description The allowChangeParent field specifies whether the element's position or parent can be changed at runtime by drag and drop.
   * @type {boolean}
   * @example
   *
   *  null {null}, allows element's parent or position to be changed at runtime by drag and drop.
   *  false {boolean}, prevents changing the element's position or parent at runtime by drag and drop.
  */
   allowChangeParent: true,
  /**
   * @description The selements field defines the elements of the control from a string-representation. Indicates the elements of the control.
   *
   * The format of the elements'string representation is (everything between () refers to children, and everything between [] refers to flags):
   *
   *  "element1[flag=value]...[flag=value](sub-element1[flag=value]...[flag=value],...,sub-elementn[flag=value]...[flag=value]),...,elementn[flag=value]...[flag=value](sub-element1[flag=value]...[flag=value],...,sub-elementn[flag=value]...[flag=value])"
   *
   * The element1, sub-element1 ... elementn defines the caption for each element.
   *
   * The string representation supports the following flags:
   *
   *  [key] {string}, specifies the element's key (Key/GetKey()/SetKey(value) methods of exontrol.Swimlane.Element). For instance, [key=root], specifies that the element's key is "root"
   *  [vis]/[hid] {number}, shows or hides the element (Visible/GetVisible()/SetVisible(value) methods of exontrol.Swimlane.Element). For instance, [hid] or [vis=0], hides the element, while [vis=1] shows the element
   *  [dis] {number}, enables or disables the element (Enabled/GetEnabled()/SetEnabled(value) methods of exontrol.Swimlane.Element). For instance, [dis] or [dis=0], disables the element, while [dis=1] enables the element
   *  [pos] {number}, changes the element's position (0-based) (Position/GetPosition()/SetPosition(value) methods of exontrol.Swimlane.Element). For instance, [pos=0] indicates that the element should be displayed first
   *  [img] {string}, assigns a image/picture to the element (Image/GetImage()/SetImage(value) methods of exontrol.Swimlane.Element). For instance, [img=logo] assigns the "logo" picture to the element. The image can be added using the exontrol.HTMLPicture.Add() method. You can use the [simg] flag to define the element's image to be displayed on the "sub-items" portion of the control.
   *  [imgs] {string}, defines the size of the element's image as a string of "aspect-width,aspect-height" type (without quotes) (ImageSize/GetImageSize()/SetImageSize(value) methods of exontrol.Swimlane.Element). For instance, [imgs=-32] stretches the element's image into a square of 32x32 size, while [imgs=32,32] fits the element's image into a square of 32x32 size.
   *  [imga] {number}, specifies the alignment of the image within the element relative to its caption. The value of "imga" flag can be 0(left), 1(right), 2(top) or 3(bottom). (ImageAlign/GetImageAlign()/SetImageAlign(value) methods of exontrol.Swimlane.Element). For instance, [imga=3] aligns the element's image at the bottom of its box
   *  [client] {string}, specifies the element's client-rectangle as a string of "x,y,width,height" type (without quotes) (Client/GetClient()/SetClient(value) methods of exontrol.Swimlane.Element). For instance, [client=0,0,128,128] specifies the element's client are to [0,0,128,128]
   *  [coll] {string}, indicates a collapsed-element (Expand/GetExpand()/SetExpand(value) methods of exontrol.Swimlane.Element). For instance, [coll] or [coll=0], collapses the element, while [c=1] expands the element
   *  [ft] {number}, specifies the format to display the element's caption. The value of "ft" flag can be a combination of one or more values of exontrol.DrawTextFormatEnum type (FormatText/GetFormatText()/SetFormatText(value) methods of exontrol.Swimlane.Element). For instance, [ft=32] displays the element's caption on a single line only. Carriage returns and line feeds do not break the line (32 indicates the value of exontrol.DrawTextFormatEnum.exTextSingleLine)
   *  [pad] {string}, defines the element's padding (space between the element's content and its border) (Pad/GetPad()/SetPad(value) methods of exontrol.Swimlane.Element). For instance, [pad=4] defines a 4-pixels padding for all edges
   *  [shape] {string}, defines the shape for individual element (Shape/GetShape()/SetShape(value) methods of exontrol.Swimlane.Element). For instance, [shape=Button] specifies that the element is shown as a "button".
   *  [cursor] {string}, defines the mouse-cursor for individual element (Cursor/GetCursor()/SetCursor(value) methods of exontrol.Swimlane.Element). For instance, [cursor=wait] indicates that the "wait" mouse-cursor is displayed while the cursor hovers the element
   *
   * @type {string}
   * @example
   *
   *  "" {string}, clears the elements collection
   *  "A(A1,A2,A3),B[client=128,128,32,32](B1,B2(B2.1,B2.2),B3)" {string}, defines the element "A" with three child-elements "A1", "A2" and "A2", and element "B" with child-elements "B1", "B2", and "B3", also defines the "B2.1" and "B2.2" as children of element "B2"
   *  "A[img=logo][hid],B[client=128,128,32,32][dis]" {string}, defines the element "A" hidden and with the image "logo" and element "B" as disabled.
  */
   selements: null,
  /**
   * @description The slinks field defines the links between elements of the control from a string-representation.
   *
   * The format of the links'string representation is (everything between () refers to children, and everything between [] refers to flags):
   *
   *  "link1[flag=value]...[flag=value],...,linkn[flag=value]...[flag=value]"
   *
   * The link1, ... linkn defines the caption for each link.
   *
   * The string representation supports the following flags:
   *
   *  [link] {string} (required), indicates the link's in-out elements in "from-to" format, where from/to indicates the element's key, plain-caption or index (0-based). For instance, [link=11-1], links the elements with index 11 and 1, or [link=root-1] links the element with the key "root" or plain-caption "root" with the element of index 1.
   *  [key] {string}, specifies the link's key (Key/GetKey()/SetKey(value) methods of exontrol.Swimlane.Link). For instance, [key=root], specifies that the link's key is "root"
   *  [vis]/[hid] {number}, shows or hides the link (Visible/GetVisible()/SetVisible(value) methods of exontrol.Swimlane.Link). For instance, [hid] or [vis=0], hides the link, while [vis=1] shows the link
   *  [type] {number}, specifies the type of the link as a value of 0 (rectangular), 1 (direct), 2(straight) or 3(round). For instance, [type=3] defines a round-link
   *  [dir] {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides. For instance, [dir=3] shows the arrows in both-directions of the link.
   *  [width] {number}, specifies the link's width or size. For instance, [width=4] shows a wider link.
   *  [color] {string}, indicates the link's color. For instance, [color=red] specifies a red-link.
   *  [arrow] {string}, indicates the arrow's color. For instance, [arrow=#808080] shows the link's arrow in gray.
   *  [style] {number}, specifies the link's dash pattern to show the lines. For instance, [style=2] shows a dotted-link
   *  [startPos] {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR" of in-element, where the link can start from. For instance, [startPos=TR,MR,BR] specifies that the link can start anywhere on the in-element's right-side
   *  [endPos] {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR" of out-element, where the link can end into. For instance, [endPos=TL,ML,BL] specifies that the link can end anywhere on the out-element's left-side
   *
   * The following flags have effect only when the link is shown between collapsed-elements
   *
   *  [coll-type] {number}, specifies the type of the link as a value of 0 (rectangular), 1 (direct), 2(straight) or 3(round). For instance, [coll-type=3] defines a round-link
   *  [coll-dir] {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides. For instance, [coll-dir=3] shows the arrows in both-directions of the link.
   *  [coll-width] {number}, specifies the link's width or size. For instance, [coll-width=4] shows a wider link.
   *  [coll-color] {string}, indicates the link's color. For instance, [coll-color=red] specifies a red-link.
   *  [coll-arrow] {string}, indicates the arrow's color. For instance, [coll-arrow=#808080] shows the link's arrow in gray.
   *  [coll-style] {number}, specifies the link's dash pattern to show the lines. For instance, [coll-style=2] shows a dotted-link
   *  [coll-startPos] {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR" of in-element, where the link can start from. For instance, [coll-startPos=TR,MR,BR] specifies that the link can start anywhere on the in-element's right-side
   *  [coll-endPos] {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR" of out-element, where the link can end into. For instance, [coll-endPos=TL,ML,BL] specifies that the link can end anywhere on the out-element's left-side
   *
   * @type {string}
   * @example
   *
   *  "" {string}, clears all the links
   *  "L1[link=A-L]" {string}, defines a link between elements with the key "A" and "B" with the caption "L1"
   *  "L1[link=A-L],L2[link=A-0]" {string}, defines two links, one between "A" and "L" with the caption "L1", and another between "A" and element with the index 0, with the caption "L2"
  */
   slinks: null,
  /**
   * @description The defArrange type holds different options to auto-arrange the elements using the Arrange method. Specifies an object of {dir,dx,dy,align.compact} type to customize the arrangement of the elements using the Arrange method.
   * @type {object}
  */
  defArrange:
  {
    /**
     * @description The dir property specifies the direction to auto-arrange the elements. Specifies a numeric value as follows:
     *
     *  0 {number}, specifies horizontal arrangement, which indicates that the out-elements are arranged to the right.
     *  1 {number}, specifies vertical arrangement, which indicates that the out-elements are arranged to the bottom.
     *
     * Currently, any other value has no effect
     * @type {number}
    */
     dir: 0,
    /**
     * @description The dx property specifies the distance between two auto-arranged elements on horizontal axis. You can use the dx field to increase or decrease the distance of the arranged elements.
     * @type {number}
    */
     dx: 36,
    /**
     * @description The dy property specifies the distance between two auto-arranged elements on vertical axis. You can use the dx field to increase or decrease the distance of the arranged elements.
     * @type {number}
    */
     dy: 36,
    /**
     * @description The align property specifies the alignment of the elements relative to incoming/outgoing elements during the Arrange operation. Indicates a numeric value as follows:
     *
     *  0 {number}, indicates left/top alignment
     *  1 {number}, indicates center alignment
     *  2 {number}, specifies right/bottom alignment
     *
     * @type {number}
    */
     align: 1,
    /**
     * @description The compact property compacts the layout during the Arrange method.
     * @type {boolean}
    */
     compact: true
  },
  /**
   * @description The spools field defines the pools of the control from a string-representation.
   *
   * The format of the pools'string representation is:
   *
   *  "[flag=value]...[flag=value],...,[flag=value]...[flag=value]"
   *
   * The string representation supports the following flags:
   *
   *  [key] {string}, specifies the pool's key (Key/GetKey()/SetKey(value) methods of exontrol.Swimlane.Pool). For instance, [key=pool], specifies that the pool's key is "pool"
   *  [vis]/[hid] {number}, shows or hides the pool (Visible/GetVisible()/SetVisible(value) methods of exontrol.Swimlane.Pool). For instance, [hid] or [vis=0], hides the pool, while [vis=1] shows the pool
   *  [dis] {number}, enables or disables the pool (Enabled/GetEnabled()/SetEnabled(value) methods of exontrol.Swimlane.Pool). For instance, [dis] or [dis=0], disables the pool, while [dis=1] enables the pool
   *  [pos] {number}, changes the pool's position (0-based) (Position/GetPosition()/SetPosition(value) methods of exontrol.Swimlane.Pool). For instance, [pos=0] indicates that the pool should be displayed first
   *  [client] {string}, specifies the pool's client-rectangle as a string of "x,y,width,height" type (without quotes) (Client/GetClient()/SetClient(value) methods of exontrol.Swimlane.Pool). For instance, [client=0,0,128,128] specifies the pool's client are to [0,0,128,128]
   *  [shape] {string}, defines the shape for individual pool (Shape/GetShape()/SetShape(value) methods of exontrol.Swimlane.Pool). For instance, [shape=Button] specifies that the pool is shown as a "button".
   *  [cursor] {string}, defines the mouse-cursor for individual pool (Cursor/GetCursor()/SetCursor(value) methods of exontrol.Swimlane.Pool). For instance, [cursor=wait] indicates that the "wait" mouse-cursor is displayed while the cursor hovers the pool
   *  [headers] {string}, defines the headers of the pool (Headers/GetHeaders()/SetHeaders(value) methods of exontrol.Swimlane.Pool).
   *
   *    The format of the headers is:
   *
   *      [headers=type[flag=value]...[flag=value],...,type[flag=value]...[flag=value]]
   *
   *    where:
   *
   *    "type", defines the type of the header, which can be any of the following:
   *      "left", defines the pool's header anchored to the left-side
   *      "top", defines the pool's header anchored to the top-side
   *      "right", defines the pool's header anchored to the right-side
   *      "bottom", defines the pool's header anchored to the right-side
   *
   *    "flag", defines the property of the header such as:
   *      [size=value], defines the size of the header, where value is a numeric value. If 0 or negative, the header is not shown
   *      [shape=value], defines the shape of the header.
   *
   *    For instance: [headers=left,top[size=24][shape=Button]], shows the pool's left-header with size 0, and top-header of the pool with specified size and shape.
   *
   *  [exclhead]/[inclhead] {number}, indicates whether the pool's lanes and phases excludes or includes the pool's headers (ExcludeHeaders/GetExcludeHeaders()/SetExcludeHeaders(value) methods of exontrol.Swimlane.Pool). For instance, [inclhead] or [exclhead=0], indicates that the pool's lanes and phases includes the pool's headers, while [exclhead=1] excludes the pool's headers from lanes and phases.
   *  [lanes] {string}, defines the lanes of the pool (the lanes goes vertically from top to bottom side of the pool) (Lanes/GetLanes()/SetLanes(value) methods of exontrol.Swimlane.Pool).
   *
   *    The format of lanes property is:
   *
   *      "caption[flag=value]...[flag=value],...,caption[flag=value]...[flag=value]"
   *
   *    where:
   *
   *      "caption", defines the lane's ex-HTML caption (shown into the pool's header)
   *      "flag", defines a property of the lane such as:
   *        [size=value], defines the size of the lane (in percent), where value is a numeric value. 0 or negative value hides the lane
   *        [shape=value], defines the shape of the lane.
   *
   *    For instance: [lanes=Lane 1[size=20],Lane 2,Lane 3,Lane 4[shape=FrameSel]], displays four-lanes where Lane 1 takes 20% from the pool, while the rest of lanes shares equaly the available space on the pool. The Lane 4 displays the FrameSel shape.
   *
   *  [phases] {string}, defines the phases of the pool (the phases goes horizontally from left to right side of the pool) (Phases/GetPhases()/SetPhases(value) methods of exontrol.Swimphase.Pool).
   *
   *    The format of phases property is:
   *
   *      "caption[flag=value]...[flag=value],...,caption[flag=value]...[flag=value]"
   *
   *    where:
   *
   *      "caption", defines the phase's ex-HTML caption (shown into the pool's header)
   *      "flag", defines a property of the phase such as:
   *        [size=value], defines the size of the phase (in percent), where value is a numeric value. 0 or negative value hides the phase
   *        [shape=value], defines the shape of the phase.
   *
   *    For instance: [phases=Phase 1[size=20],Phase 2,Phase 3,Phase 4[shape=FrameSel]], displays four-phases where Phase 1 takes 20% from the pool, while the rest of phases shares equaly the available space on the pool. The Phase 4 displays the FrameSel shape.
   *
   * @type {string}
   * @example
   *
   *  "" {string}, clears the pools collection
   *  "[key=pool][client=-512,-256,612,512]" {string}, creates a pool at specified location with the key "pool"
  */
   spools: null,
  /**
   * @description The allowLinkControlPoint field indicates the control points of the link, the user can use to customize the link's path. The property is applied to all links (unless the allowControlPoint property of the link indicates a different value). A combination of one or more exontrol.Surface.LinkControlPointEnum flags that determines the control points for an individual link, the user can use to customize the link.
   *
   * The exontrol.Surface.LinkControlPointEnum type defines the following flags:
   *
   *  exNoControlPoint(0), the link displays no control points
   *  exStartControlPoint(1), the link shows control point that changes the link's StartPos property (the exStartControlPoint point is marked with black squares)
   *  exEndControlPoint(2), the link shows control point that changes the link's EndPos property (the exEndControlPoint point is marked with black squares)
   *  exControlPoint(4), defines the corners of the link's path. You can remove a exControlPoint points by dragging to another, so intermediate exControlPoint points are removed. You can move all control points of the link at once, if SHIFT key is pressed (the exControlPoint points are marked black circles)
   *  exMiddleControlPoint(8), defines the link's middle control points that are displayed between two exControlPoint points, to let the use add new exControlPoint points, to redefine the link's path (The exMiddleControlPoint points are marked with gray circles)
   *
   * @type {exontrol.Surface.LinkControlPointEnum}
   * @example
   *
   *  0 or exontrol.Surface.LinkControlPointEnum.exNoControlPoint {number}, displays no link's control points (unless the link's allowControlPoint property is different)
   *  3 or exontrol.Surface.LinkControlPointEnum.exStartControlPoint | exontrol.Surface.LinkControlPointEnum.exEndControlPoint {number}, displays link's start and end control points only, for all links (unless the link's allowControlPoint property is different)
   *
  */
   allowLinkControlPoint: exontrol.Surface.LinkControlPointEnum.exNoControlPoint
}

/////////////////////////////////////////////////////////// (exontrol.Shapes.Surface)
//
// The exontrol.Shapes.Surface namespace provides support to customize the visual appearance of different parts of the exontrol.Swimlane object.
//
///////////////////////////////////////////////////////////

/**
 * @description The exontrol.Shapes.Surface namespace provides support to customize the visual appearance of different parts of the exontrol.Swimlane object.
*/
exontrol.Shapes.Surface =
{
  /**
  * @description The element field specifies the visual appearance to display the elements. Indicates an object of {normal, disabled,hover,click} type
  * @type {object}
  */
  element:
  {
    /**
    * @description The normal field includes definitions to draw the object in normal state. An object of exontrol.Def.Shape type to be applied on the part's background on normal state.
    * @type {object}
    */
    normal:
    {
       primitive: "RoundRect",
       fillColor: "rgb(240,240,240)",
       frameColor: "lightgray",
    },
    /**
    * @description The hover field includes definitions to draw the object while cursor hovers it. An object of exontrol.Def.Shape type to be applied on the part's background while cursor hovers it.
    * @type {object}
    */
    hover:
    {
       fillColor: "rgb(200,200,200)",
    },
    /**
    * @description The click field includes definitions to draw the object while it is clicked. An object of exontrol.Def.Shape type to be applied on the part's background while it is clicked.
    * @type {object}
    */
    click:
    {
       fillColor: "rgb(160,160,160)",
    },
    /**
    * @description The disabled field includes definitions to draw the object in disabled state. An object of exontrol.Def.Shape type to be applied on the part's background on disabled state.
    * @type {object}
    */
    disabled:
    {
       opacity: 0.5
    }
  },
  flp:
  {
    /**
    * @description The normal field includes definitions to draw the object in normal state. An object of exontrol.Def.Shape type to be applied on the part's background on normal state.
    * @type {object}
    */
    normal:
    {
       frameColor: "rgb(192,192,192)"
    }
  },
  altflp:
  {
    /**
    * @description The normal field includes definitions to draw the object in normal state. An object of exontrol.Def.Shape type to be applied on the part's background on normal state.
    * @type {object}
    */
    normal:
    {
       frameColor: "rgb(192,192,192)",
       fillColor: "rgba(192,192,192, 0.20)"
    }
  },
  /**
  * @description The shmulti field specifies the visual appearance to show the count of dragged items. Indicates an object of exontrol.Def.Shape type
  * @type {object}
  */
  shmulti:
  {
     primitive: "RoundRect",
     fillColor: "black",
    tfi:
    {
       fgColor: "white"
    }
  }
}
/* @license Copyright (C) Exontrol. All rights reserved. */

/////////////////////////////////////////////////////////// (exontrol.Swimlane)
//
// The exontrol.Swimlane namespace is a super-set of exontrol.Surface namespace. The exontrol.Swimlane requires including the following files:
//
//  exontrol.surface.js
//
///////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////// (exontrol.Swimlane)
//
//  The exontrol.Swimlane class provides the following fields (public):
//
//    Listeners {object}, holds a reference to exontrol.Lts which defines the events of the control.
//    Shortcuts {object}, holds a reference to exontrol.Sts which defines the shortcuts of the control.
//
//  The exontrol.Swimlane class provides the following methods (public):
//
//    Refresh(), refreshes the control
//    Smooth(callback, thisArg), performs a smooth-transition from a layout to another. The smooth-transition goes from the current layout to the new layout generated by the callback.
//    Home(), zooms to 100% and scrolls the control to origin (0,0)
//    FitToClient(rtLayout), ensures that the entire (null/undefined) or giving layout fits the control's client area
//    EnsureVisibleClient(clientA, bAllowChangeScale), ensures that the giving client fits the control's client area.
//    Selection/GetSelection()/SetSelection(value), gets or sets the control's selected-elements.
//    SelectAll, selects all elements within the control.
//    UnselectAll, clears the selection.
//    RemoveSelection(), deletes the selected-elements.
//    EnsureVisibleSelection(), scrolls the control's content to ensure that the control's selection fits the control's client area
//    Elements/GetElements() {exontrol.Swimlane.Elements}, returns the control's elements.
//    Links/GetLinks() {exontrol.Swimlane.Links}, returns the control's links.
//    Pools/GetPools() {exontrol.Swimlane.Pools}, returns the control's pools.
//    Statistics/GetStatistics() {string}, gives statistics data of objects being hold by the control
//    Element(id) {Element}, gets the element giving its index, identifier/key or reference
//    Link(id) {Element}, gets the link giving its index, identifier/key or reference
//    Pool(id) {Pool}, gets the pool giving its index, identifier/key or reference
//    Clear(), clears the pools, elements and links of the surface (@since 2.0)
//
//    Options/GetOptions()/SetOptions(value) {exontrol.Def.Surface}, gets or sets the options of the exontrol.Swimlane control
//    Tfi/GetTfi()/SetTfi(value) {object}, specifies an object of {bold,italic,...}/exontrol.TFI type that defines font attributes to display the captions within the control.
//    Locked/GetLocked()/SetLocked(value) {boolean}, specifies whether the control is locked(protected) or unlocked
//    ReadOnly/GetReadOnly()/SetReadOnly(value) {boolean}, specifies whether the control is read-only
//    WheelChange/GetWheelChange()/SetWheelChange(value) {number}, defines the amount the control scrolls when the user rolls the mouse wheel.
//    Smooth/GetSmooth()/SetSmooth(value) {number}, defines the time in ms the control goes from one layout to another.
//    Margins/GetMargins()/SetMargins(value) {object}, specifies the control's margins
//    Zoom/GetZoom()/SetZoom(value) {number}, defines the zoom factor of the control's content.
//    ZoomLevels/GetZoomLevels()/SetZoomLevels(value) {string}, defines the zoom-levels the user can magnify the control's content
//    ScrollBarsHome/GetScrollBarsHome()/SetScrollBarsHome(value) {any}, defines the color to highlight the position of origin (0,0) on the control's scroll bars
//    ScrollBarsLayout/GetScrollBarsLayout()/SetScrollBarsLayout(value) {any}, defines the color to highlight the position of current layout within the control's scrollbars
//    SingleSel/GetSingleSel()/SetSingleSel(value) {exontrol.Swimlane.SingleSelEnum}, specifies whether the control supports single, multiple, toggle selection.
//    Selection/GetSelection()/SetSelection(value) {any}, gets or sets the control's selected-elements.
//    FormatText/GetFormatText()/SetFormatText(value) {exontrol.DrawTextFormatEnum}, defines the global format to display the element's caption.
//    Pad/GetPad()/SetPad(value) {(number|string|array)}, defines the global format to display the element's caption.
//    ImageSize/GetImageSize()/SetImageSize(value) {any}, defines the global size of the element's image. The image can be added using the exontrol.HTMLPicture.Add() method
//    ImageAlign/GetImageAlign()/SetImageAlign(value) {number}, defines the global-alignment of the element's image relative to its caption.
//    Shapes/GetShapes()/SetShapes(value) {string}, defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance.
//    Cursors/GetCursors()/SetCursors(value) {string}, defines the mouse cursor to display when pointing over different parts of the control.
//    ShowLinks/GetShowLinks()/SetShowLinks(value) {exontrol.ShowLinksEnum}, shows or hides the links between elements
//    ShowLinksOnCollapse/GetShowLinksOnCollapse()/SetShowLinksOnCollapse(value) {boolean}, shows or hides the links between collapsed elements
//    Link/GetLink()/SetLink(value) {object}, defines the appearance of the links between elements.
//    CollapsedLink/GetCollapsedLink()/SetCollapsedLink(value) {object}, defines the appearance of the links between collapsed elements.
//    LinkStartFrom/GetLinkStartFrom()/SetLinkStartFrom(value) {object}, specifies the appearance of the link that starts from any selected-element (outgoing links)
//    LinkEndTo/GetLinkEndTo()/SetLinkEndTo(value) {object}, specifies the appearance of the link that ends to any selected-element (incoming links)
//    LinkUnselected/GetLinkUnselected()/SetLinkUnselected(value) {object}, specifies the appearance of the link not related to any selected-element (unselected links)
//    AllowActions/GetAllowActions()/SetAllowActions(value) {string}, customizes the actions the user can perform once the control is clicked or touched.
//    ExpandGlyphSize/GetExpandGlyphSize()/SetExpandGlyphSize(value) {number}, defines the size to show the element's expand/collapse glyphs.
//    AllowChangeParent/GetAllowChangeParent()/SetAllowChangeParent(value) {boolean}, indicates whether the user can change the element's position or parent at runtime by drag and drop
//    Selements/GetSelements()/SetSelements(value) {string}, defines the elements from a string-representation.
//    Slinks/GetSlinks()/SetSlinks(value) {string}, defines the links between elements of the control from a string-representation.
//    Spools/GetSpools()/SetSpools(value) {string}, defines the pools from a string-representation.
//    AllowLinkControlPoint/GetAllowLinkControlPoint()/SetAllowLinkControlPoint(value) {exontrol.Surface.LinkControlPointEnum}, indicates the control points of the link, the user can use to customize the link's path.
//    Coord/GetCoord()/SetCoord(value) {exontrol.Surface.CoordEnum}, specifies the type of coordinates the elements of the surface display in.
//
//    Arrange(id, oDefArrange), arranges the elements based on their links.
//    Home(), zooms to 100% and scrolls the control to origin (0,0)
//    FitToClient(rtLayout), ensures that the entire (null/undefined) or giving layout fits the control's client area
//    Soom(zoomTo, oPointAbs, rgrOrigin), zooms or/and scrolls the control's content.
//    SelectAll, selects all elements within the control.
//    UnselectAll, clears the selection.
//    RemoveSelection(), removes/deletes the selected-elements.
//    EnsureVisibleSelection(), scrolls the control's content to ensure that the control's selection fits the control's client area
//    EnsureVisibleClient(clientA, bAllowChangeScale, bNearestFit), ensures that the giving client fits the control's client area.
//
//    bU(), locks invalidating the control until the eU() method is called
//    eU(), invalidates the control
//
//  The exontrol.Swimlane class provides the following events (through oLts):
//
//     "onselchange", notifies your application that the control's selection has been changed. The onselchange's parameter could be any of the following:
//
//        oEvent {null}, indicates that the control has no selected elements
//        oEvent {object}, indicates an object of exontrol.Swimlane.Element type that defines the control's single-element selected.
//        oEvent {array}, specifies an array of [exontrol.Swimlane.Element] type that holds all selected elements within the control
//
//     "onclick", occurs once the user clicks or double-clicks an element. The onclick's parameter is:
//
//        oEvent {object}, specifies an object of {element,link,dblClick,button,modifiers} type, that holds information about the element being clicked.
//
//          oEvent.element {object}, specifies null or an object of exontrol.Swimlane.Element type that indicates the element being clicked
//          oEvent.pool {object}, specifies null or an object of exontrol.Swimlane.Pool type that indicates the pool being clicked
//          oEvent.link {object}, specifies null or an object of exontrol.Swimlane.Link type that indicates the link being clicked
//          oEvent.dblClick {boolean}, indicates whether the user clicks or double-clicks the element
//          oEvent.button {number}, indicates which button is pressed while clicking the element as 1 (left), 2 (right) or 4 (middle)
//          oEvent.modifiers {number}, specifies a combination of 1, 2, 4 and 16 according with modifier keys (ALT, CTRL, META and SHIFT), or 0 if no modifier keys
//
//     "onchange", notifies your application that an element, or more has been changed (create, move/resize, link or expand/collapse). The onchange's parameter is:
//
//        oEvent {object}, specifies an object of {element,action} type, that holds information about the element being changed.
//
//          oEvent.element {object}, specifies an object of exontrol.Swimlane.Element type that indicates the element being changed
//          oEvent.pool {object}, specifies an object of exontrol.Swimlane.Pool type that indicates the pool being changed
//          oEvent.action {string}, specifies the action such as "create", "move", "link", "expand", "resize-header", "resize-lane", "resize-phase" the element or pool is suffer
//
/////////////////////////////////////////////////////////// (exontrol.Swimlane)

/////////////////////////////////////////////////////////// (exontrol.Swimlane.Elements)
//
// The exontrol.Swimlane.Elements object holds a collection of exontrol.Swimlane.Element type (element of the control)
//
// The exontrol.Swimlane.Elements object provides the following methods:
//
//  Add(oElementOpts) {exontrol.Swimlane.Element}, creates and adds a new element into the control
//  Create(client) {exontrol.Swimlane.Element}, creates and adds a new element by drag at specified position
//  OnCreate(oCreateOpts), customizes the options to create a new element, by drag.
//  Count/GetCount() {number}, returns the number of elements within the collection.
//  Item(id) {exontrol.Swimlane.Element}, gets the element giving its index, identifier/key or reference
//  Remove(id), removes the element giving its index, identifier/key or reference
//  Clear(), removes all elements of the control
//  Save() {string}, saves the control's elements to a string-representation.
//  Load(value) {string}, loads the control's elements from a string-representation.
//
/////////////////////////////////////////////////////////// 

/////////////////////////////////////////////////////////// (exontrol.Swimlane.ElementOptions)
//
//  The exontrol.Swimlane.ElementOptions class holds all options an element can display or own
//
//  The exontrol.Swimlane.ElementOptions class defines the following fields:
//
//    visible {boolean}, indicates whether the element is visible or hidden
//    enabled {boolean}, indicates whether the element is enabled or disabled(unselectable)
//    key {string}, specifies the key associated with the element
//    caption {string}, defines the element's caption
//    formatText {exontrol.DrawTextFormatEnum}, specifies the format to display the element's caption
//    pad {(number|string|array)}, defines the element's padding (space between the element's content and its border)
//    image {string}, specifies the name of the image/picture the element displays. The image can be added using the exontrol.HTMLPicture.Add() method
//    imageSize {any}, defines the size of the element's image
//    imageAlign {number}, defines the alignment of the image within the element
//    shape {any}, defines the shape for individual element
//    cursor {string}, defines the mouse-cursor for individual element
//    client {array}, defines the element's client area as an array of [x,y,width,height] type
//    parent {any}, indicates the element's parent
//    expand {boolean}, specifies whether the element is expanded or collapsed
//
///////////////////////////////////////////////////////////

exontrol.Swimlane.ElementOptions =
{
  /**
   * @description The visible field indicates whether the element is visible or hidden.
   * @type {boolean}
   * @example
   *
   *  false {boolean}, hides the element
   *  true {boolean}, shows the element
  */
   visible: true,
  /**
   * @description The enabled field indicates whether the element is enabled or disabled(unselectable)
   * @type {boolean}
   * @example
   *
   *  false {boolean}, disables the element
   *  true {boolean}, enables the element
  */
   enabled: true,
  /**
   * @description The key field specifies the key associated with the element. Specifies the key associated with the element. If no key is provided, the element's plain-caption can be used to request an item. The plain-caption includes no ex-HTML tags, such as <b>, <fgcolor> and so on
   * @type {string}
   * @example
   *
   *  "logo" {string}, defines the element with the giving key (logo). You can use the Root.Item("logo") method to request the element giving its key.
  */
   key: null,
  /**
   * @description The caption field defines the element's caption. Specifies the ex-HTML caption an element displays.
   * @type {string}
   * @example
   *
   *  null {null}, indicates no caption
   *  "caption" {string}, declares a plain-caption
   *  "<b>text</b>" {string}, displays the text in bold
   *  "<img>logo</img>" {string}, displays the "logo" image. The image can be added using the exontrol.HTMLPicture.Add() method
  */
   caption: null,
  /**
   * @description The formatText field specifies the format to display the element's caption.
   * @type {exontrol.DrawTextFormatEnum}
  */
   formatText: null,
  /**
   * @description The pad field defines the element's padding (space between the element's content and its border). The pad field can be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size
   * @type {(number|string|array)}
  */
   pad: null,
  /**
   * @description The image field specifies the name of the image/picture the element displays. The image can be added using the exontrol.HTMLPicture.Add() method
   * @type {string}
  */
   image: null,
  /**
   * @description The imageSize field defines the size of the element's image, as one of the following:
   *
   *  {undefined}, Indicates that the control's imageSize option is considered, so the element's image is measured according to the control's imageSize option.
   *  {null}, Indicates that the element's image is displayed as it is (full-sized).
   *  {numeric}, Specifies that the element's image is displayed into a square of giving size (same width and height). If 0 the element displays no image, if negative the element's image is stretched to giving square, else the element's picture is scaled to fit the giving rectangle.
   *  {array}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the element's picture to scale or stretch to.
   *
   * @type {any}
  */
   imageSize: undefined,
  /**
   * @description The imageAlign field defines the alignment of the image within the element. Indicates the alignment of the image within the element as 0 (left, default), 1(right), 2(top) or 3(bottom).
   * @type {number}
  */
   imageAlign: null,
  /**
   * @description The shape field defines the shape for individual element. A string expression that defines the shape for the element itself or an object of {normal,hover,click,disabled} type. The normal,hover,click and disabled are objects of exontrol.Def.Shape type.
   * @type {any}
  */
   shape: null,
  /**
   * @description The cursor field defines the mouse-cursor for individual element. A string expression that defines the mouse-cursor for individual element.
   * @type {string}
  */
   cursor: null,
  /**
   * @description The client field defines the element's client area as an array of [x,y,width,height] type.
   * @type {array}
   * @example
   *
   *  null {null}, defines an element quivalent with [0,0,32,32]
   *  [0,0,128,128] {array}, defines the element at the center of the control of 128 x 128 pixels size
  */
   client: null,
  /**
   * @description The parent field defines the element's parent. The parent field can be one of the following:
   *
   *  parent {number}, indicates a numeric value that defines the index of the parent's element (0-based)
   *  parent {string}, specifies a string expression that defines the identifier/key/plain-caption of the parent's element
   *  parent {exontrol.Swimlane.Element}, specifies the object reference to the parent's element
   *
   * @type {any}
   * @example
   *
   *  0 {number}, indicates that the element with the index 0 is the parent of the current element
   *  "key" {string}, specifies that the parent of the current element is the element with the giving key
   *
  */
   parent: null,
  /**
   * @description The expand field indicates whether the element is expanded or collapsed.
   * @type {boolean}
  */
   expand: true
};

/////////////////////////////////////////////////////////// (exontrol.Swimlane.Element)
//
// The exontrol.Swimlane.Element object holds information(options) about an element within the control.
//
// The Add(oElementOpts) method of exontrol.Swimlane.Elements creates and adds a new element into the control.
//
// The exontrol.Swimlane.Element object provides the following methods:
//
//  Options/GetOptions()/SetOptions(value) {exontrol.Swimlane.ElementOptions}, indicates the element's options (at once) such as visibility, caption and so on
//  Remove(), removes the element itself from elements collection ( equivalent of Elements.Remove(oElement) method )
//  Index/GetIndex() {number}, returns the index of the element (0-based)
//  Position/GetPosition()/SetPosition(value) {number}, specifies the element's position (0-based)
//  BringToFront() {number}, moves the element to the top of the stacking order, so that it is in front of other elements (returns the element's previously position)
//  BringForward() {number}, moves the element up one level, so that it is closer to top of the stacking order (returns the element's previously position)
//  SendToBack() {number}, moves the element to the bottom of the stacking order, so that it is behind the other elements (returns the element's previously position)
//  SendBackward() {number}, moves the element down one level, so that it is closer to the bottom of the stacking order.
//  Key/GetKey()/SetKey(value) {boolean}, specifies the element's key (the Elements.Item(key) requests an element by its index, identifier/key or reference)
//  Visible/GetVisible()/SetVisible(value) {boolean}, shows or hides the element
//  Enabled/GetEnabled()/SetEnabled(value) {boolean}, enables or disables the element
//  Caption/GetCaption()/SetCaption(value) {string}, specifies the element's caption (ex-HTML format)
//  FormatText/GetFormatText()/SetFormatText(value) {exontrol.DrawTextFormatEnum}, defines the format to display the element's caption.
//  Pad/GetPad()/SetPad(value) {(number|string|array)}, defines the format to display the element's caption.
//  Image/GetImage()/SetImage(value) {string}, defines the element's image. The image can be added using the exontrol.HTMLPicture.Add() method
//  ImageSize/GetImageSize()/SetImageSize(value) {any}, defines the size of the element's image. The image can be added using the exontrol.HTMLPicture.Add() method
//  ImageAlign/GetImageAlign()/SetImageAlign(value) {number}, defines the alignment of the element's image relative to its caption.
//  Shape/GetShape()/SetShape(value) {any}, indicates the shape for the element itself.
//  Cursor/GetCursor()/SetCursor(value) {any}, the mouse cursor for the element itself.
//  Client/GetClient()/SetClient(value) {array}, specifies the element's client area.
//  Parent/GetParent()/SetParent(value) {any}, specifies the parent's element.
//  Expand/GetExpand()/SetExpand(value) {any}, expands or collapses the element
//  ToggleExpand(), toggles the element's expand state. For instance, if the element is expanded, the ToggleExpand() method collapses the element.
//
/////////////////////////////////////////////////////////// 

/////////////////////////////////////////////////////////// (exontrol.Swimlane.Links)
//
// The exontrol.Swimlane.Links object holds a collection of exontrol.Swimlane.Link type (link of the control)
//
// The exontrol.Swimlane.Links object provides the following methods:
//
//  Add(oLinkOpts) {exontrol.Swimlane.Link}, creates and adds a new link into the control
//  Create(oFrom, oTo) {exontrol.Swimlane.Link}, creates and adds a link between from and to elements
//  OnCreate(oCreateOpts) {exontrol.Swimlane.Link}, customizes the options for the newly created link by drag
//  Count/GetCount() {number}, returns the number of links within the collection.
//  Item(id) {exontrol.Swimlane.Link}, gets the link giving its index, identifier/key or reference
//  Remove(id), removes the link giving its index, identifier/key or reference
//  Clear(), removes all links of the control
//  Save() {string}, saves the links between elements of the control to a string-representation.
//  Load(value) {string}, loads links between elements of the control from a string-representation.
//
/////////////////////////////////////////////////////////// 

/////////////////////////////////////////////////////////// (exontrol.Swimlane.LinkOptions)
//
//  The exontrol.Swimlane.LinkOptions class holds all options an link can display or own
//
//  The exontrol.Swimlane.LinkOptions class defines the following fields:
//
//    visible {boolean}, indicates whether the link is visible or hidden
//    key {string}, specifies the key associated with the link
//    caption {string}, defines the link's caption
//    from {any}, indicates the index, identifier/key or reference of the element the link starts from (in-element)
//    to {any}, indicates the index, identifier/key or reference of the element the link ends to (out-element)
//    link {object}, specifies the appearance of the link between elements
//    collapsedLink {object}, specifies the appearance of the link between collapsed elements
//    allowControlPoint {exontrol.Surface.LinkControlPointEnum}, defines the control points for an individual link, the user can use to customize the link
//    customPath {any}, specifies the link's custom path, as a string of x,y proportions separated by comma.
//
///////////////////////////////////////////////////////////

exontrol.Swimlane.LinkOptions =
{
  /**
   * @description The visible field indicates whether the link is visible or hidden.
   * @type {boolean}
   * @example
   *
   *  false {boolean}, hides the link
   *  true {boolean}, shows the link
  */
   visible: true,
  /**
   * @description The key field specifies the key associated with the link. Specifies the key associated with the link. If no key is provided, the link's plain-caption can be used to request an item. The plain-caption includes no ex-HTML tags, such as <b>, <fgcolor> and so on
   * @type {string}
   * @example
   *
   *  "logo" {string}, defines the link with the giving key (logo). You can use the Root.Item("logo") method to request the link giving its key.
  */
   key: null,
  /**
   * @description The caption field defines the link's caption.
   * @type {string}
   * @example
   *
   *  null {null}, indicates no caption
   *  "caption" {string}, declares a plain-caption
   *  "<b>text</b>" {string}, displays the text in bold
   *  "<img>logo</img>" {string}, displays the "logo" image. The image can be added using the exontrol.HTMLPicture.Add() method
  */
   caption: null,
  /**
   * @description The from field indicates the index, identifier/key or reference of the element the link starts from (in-element). The from field could be any of the following:
   *
   *  from {number}, indicates a numeric value that defines the index of the element
   *  from {string}, specifies a string expression that defines the identifier/key/plain-caption of the element
   *  from {exontrol.Swimlane.Element}, specifies the object reference to the element
   *
   * @type {any}
  */
   from: null,
  /**
   * tor'>@description The to field indicates the index, identifier/key or reference of the element the link ends to (out-element). The to field could be any of the following:
   *
   *  to {number}, indicates a numeric value that defines the index of the element
   *  to {string}, specifies a string expression that defines the identifier/key/plain-caption of the element
   *  to {exontrol.Swimlane.Element}, specifies the object reference to the element
   *
   * @type {any}
  */
   to: null,
  /**
   * @description The link field specifies the appearance of the link between elements. The link object includes any of the following:
   *
   *  type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
   *  dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
   *  width {number}, specifies the link's width or size (1 by default)
   *  color {string}, indicates the link's color (partial-black by default)
   *  arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
   *  style {array}, specifies the link's dash pattern to show the lines (solid by default)
   *  startPos {any}, indicates the list of corners of in-element, the link can start from
   *  endPos {any}, indicates the list of corners of out-element, the link can end to
   *
   * @type {object}
  */
   link: null,
  /**
   * @description The collapsedLink field specifies the appearance of the link between collapsed elements. The link object includes any of the following:
   *
   *  type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
   *  dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
   *  width {number}, specifies the link's width or size (1 by default)
   *  color {string}, indicates the link's color (partial-black by default)
   *  arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
   *  style {array}, specifies the link's dash pattern to show the lines (solid by default)
   *  startPos {any}, indicates the list of corners of in-element, the link can start from
   *  endPos {any}, indicates the list of corners of out-element, the link can end to
   *
   * @type {object}
  */
   collapsedLink: null,
  /**
   * @description The allowControlPoint field defines the control points for an individual link, the user can use to customize the link. A combination of one or more exontrol.Swimlane.LinkControlPointEnum flags that determines the control points for an individual link, the user can use to customize the link. The exontrol.Swimlane.LinkControlPointEnum type defines the following flags:
   *
   *  exNoControlPoint(0), the link displays no control points
   *  exStartControlPoint(1), the link shows control point that changes the link's StartPos property (the exStartControlPoint point is marked with black squares)
   *  exEndControlPoint(2), the link shows control point that changes the link's EndPos property (the exEndControlPoint point is marked with black squares)
   *  exControlPoint(4), defines the corners of the link's path. You can remove a exControlPoint points by dragging to another, so intermediate exControlPoint points are removed. You can move all control points of the link at once, if SHIFT key is pressed (the exControlPoint points are marked black circles)
   *  exMiddleControlPoint(8), defines the link's middle control points that are displayed between two exControlPoint points, to let the use add new exControlPoint points, to redefine the link's path (The exMiddleControlPoint points are marked with gray circles)
   *
   * @type {exontrol.Swimlane.LinkControlPointEnum}
   * @example
   *
   *  0 or exontrol.Swimlane.LinkControlPointEnum.exNoControlPoint {number}, displays no link's control points
   *  3 or exontrol.Swimlane.LinkControlPointEnum.exStartControlPoint | exontrol.Swimlane.LinkControlPointEnum.exEndControlPoint {number}, displays link's start and end control points only
   *
  */
   allowControlPoint: null
};

/////////////////////////////////////////////////////////// (exontrol.Swimlane.Link)
//
// The exontrol.Swimlane.Link object holds information(options) about an link within the control.
//
// The Add(oLinkOpts) method of exontrol.Swimlane.Links creates and adds a new link into the control.
//
// The exontrol.Swimlane.Link object provides the following methods:
//
//  Options/GetOptions()/SetOptions(value) {exontrol.Swimlane.LinkOptions}, indicates the link's options (at once) such as visibility, caption and so on
//  Remove(), removes the link itself from links collection ( equivalent of Links.Remove(oLink) method )
//  Index/GetIndex() {number}, returns the index of the link (0-based)
//  Key/GetKey()/SetKey(value) {boolean}, specifies the link's key (the Links.Item(key) requests an link by its index, identifier/key or reference)
//  Visible/GetVisible()/SetVisible(value) {boolean}, shows or hides the link
//  Caption/GetCaption()/SetCaption(value) {string}, specifies the link's caption (ex-HTML format)
//  FormatText/GetFormatText()/SetFormatText(value) {exontrol.DrawTextFormatEnum}, defines the format to display the link's caption.
//  From/GetFrom()/SetFrom(value) {any}, indicates the index, identifier/key or reference of the element the link starts from (in-element)
//  To/GetTo()/SetTo(value) {any}, indicates the index, identifier/key or reference of the element the link ends to (out-element)
//  Link/GetLink()/SetLink(value) {object}, defines the link's appearance as an object of {type,dir,width,color,arrow,style,startPos,endPos} type
//  CollapsedLink/GetCollapsedLink()/SetCollapsedLink(value) {object}, defines the link's appearance as an object of {type,dir,width,color,arrow,style,startPos,endPos} type, between collapsed elements
//  AllowControlPoint/GetAllowControlPoint()/SetAllowControlPoint(value)  {exontrol.Surface.LinkControlPointEnum}, defines the control points for an individual link, the user can use to customize the link
//  CustomPath/GetCustomPath()/SetCustomPath(value) {any}, specifies the link's custom path, as a string of x,y proportions separated by comma
//
/////////////////////////////////////////////////////////// 

/////////////////////////////////////////////////////////// (exontrol.Swimlane.Pools)
//
// The exontrol.Swimlane.Pools object holds a collection of exontrol.Surface.Pool type (pool of the control)
//
// The exontrol.Swimlane.Pools object provides the following methods:
//
//  Add(oPoolOpts) {exontrol.Swimlane.Pool}, creates and adds a new pool into the control
//  Create(client) {exontrol.Swimlane.Pool}, creates and adds a new pool by drag at specified position
//  OnCreate(oCreateOpts), customizes the options to create a new pool, by drag.
//  OnCreateLane(oCreateOpts), customizes the options for the newly created lane by drag.
//  OnCreatePhase(oCreateOpts), customizes the options for the newly created phase by drag.
//  Count/GetCount() {number}, returns the number of pools within the collection.
//  Item(id) {exontrol.Swimlane.Pool}, gets the pool giving its index, identifier/key or reference
//  Remove(id), removes the pool giving its index, identifier/key or reference
//  Clear(), removes all pools of the control
//  Save() {string}, saves the control's pools to a string-representation.
//  Load(value) {string}, loads the control's pools from a string-representation.
//
/////////////////////////////////////////////////////////// 

/////////////////////////////////////////////////////////// (exontrol.Surface.PoolOptions)
//
//  The exontrol.Surface.PoolOptions class holds all options a pool can display or own
//
//  The exontrol.Surface.PoolOptions class defines the following fields:
//
//    visible {boolean}, indicates whether the pool is visible or hidden
//    enabled {boolean}, indicates whether the pool is enabled or disabled(unselectable)
//    key {string}, specifies the key associated with the pool
//    shape {any}, defines the shape for individual pool
//    cursor {string}, defines the mouse-cursor for individual pool
//    client {array}, defines the pool's client area as an array of [x,y,width,height] type.
//    headers {string}, defines the pool's headers
//    excludeHeaders {boolean}, indicates whether pool's lanes and phases are not shown over the pool's headers
//    lanes {string}, defines the pool's lanes (the lanes goes vertically from top to bottom side of the pool)
//    phases {string}, defines the phases of the pool (the phases goes horizontally from left to right side of the pool)
//
///////////////////////////////////////////////////////////

exontrol.Surface.PoolOptions =
{
  /**
   * @description The visible field indicates whether the pool is visible or hidden.
   * @type {boolean}
   * @example
   *
   *  false {boolean}, hides the pool
   *  true {boolean}, shows the pool
  */
   visible: true,
  /**
   * @description The enabled field indicates whether the pool is enabled or disabled(unselectable)
   * @type {boolean}
   * @example
   *
   *  false {boolean}, disables the pool
   *  true {boolean}, enables the pool
  */
   enabled: true,
  /**
   * @description The key field specifies the key associated with the pool. Specifies the key associated with the pool. If no key is provided, the pool's plain-caption can be used to request an item. The plain-caption includes no ex-HTML tags, such as <b>, <fgcolor> and so on
   * @type {string}
   * @example
   *
   *  "logo" {string}, defines the pool with the giving key (logo). You can use the Root.Item("logo") method to request the pool giving its key.
  */
   key: null,
  /**
   * @description The shape field defines the shape for individual pool. A string expression that defines the shape for the pool itself or an object of {normal,hover,click,disabled} type. The normal,hover,click and disabled are objects of exontrol.Def.Shape type.
   * @type {any}
  */
   shape: null,
  /**
   * @description The cursor field defines the mouse-cursor for individual pool.
   * @type {string}
  */
   cursor: null,
  /**
   * @description The client field defines the pool's client area as an array of [x,y,width,height] type. The client field can be any of the following:
   *
   *  {number[]}, specifies the pool's client area as an array of [x,y,width,height] type
   *  {null}, specifies the union all visible-elements (collapsed child-elements or hidden elements are ignored) (@since 2.0)
   *  {Elements[]}, specifies the union of the giving visible-elements (collapsed child-elements or hidden elements are ignored).
   *  {String[]}, specifies the union of the giving keys of the visible-elements (collapsed child-elements or hidden elements are ignored). For instance, ["A","B"] changes the pool's client-rectangle to cover the elements with the key "A" and "B" (@since 2.0)
   *  {Element}, indicates the element's client-rectangle (@since 2.0)
   *
   * The client field sets the pool's outside client-area (includes the size for all headers) for all types except {number[]}
   * @type {any}
   * @example
   *
   *  null {null}, specifies the union all visible-elements (collapsed child-elements or hidden elements are ignored) (@since 2.0)
   *  [0,0,128,128] {array}, defines the pool at the center of the control of 128 x 128 pixels size
   *  oControl.Elements {Elements[]}, sets the pool's client-rectangle to cover all visible-elements (@since 2.0)
   *  oControl.Selection {Elements[]}, sets the pool's client-rectangle to cover all selected-elements (@since 2.0)
   *  ["A","B"] {String[]}, sets the pool's client-rectangle to cover the elements with the key "A" and "B" (@since 2.0)
  */
   client: null,
  /**
   * @description The headers field defines the pool's headers from a string-representation. Defines the pool's headers as explained bellow:
   *
   * The format of headers property is:
   *
   *  "type[flag=value]...[flag=value],...,type[flag=value]...[flag=value]"
   *
   * where:
   *
   *  "type", defines the type of the header, which can be any of the following
   *    "left", defines the pool's header anchored to the left-side
   *    "top", defines the pool's header anchored to the top-side
   *    "right", defines the pool's header anchored to the right-side
   *    "bottom", defines the pool's header anchored to the right-side
   *
   *  "flag", defines a property of the header such as:
   *    [size=value], defines the size of the header, where value is a numeric value
   *    [shape=value], defines the shape of the header.
   *
   * @type {string}
   * @example
   *
   *  null {null}, defines no visible headers, but the user can resize and show them, equivalent with "left[size=0],right[size=0],top[size=0],bottom[size=0]".
   *  "" {string}, defines no visible headers.
   *  "left[size=24][shape=Button],top[size=24]", shows the left and top-headers of the pool with specified size and shape.
  */
   headers: null,
  /**
   * @description The excludeHeaders field indicates whether the lanes and phases are not displayed over the pool's headers
   * @type {boolean}
   * @example
   *
   *  false {boolean}, the pool's lanes and phases are displayed over the pool's headers
   *  true {boolean}, the pool's lanes and phases are not displayed over the pool's headers
  */
   excludeHeaders: true,
  /**
   * @description The lanes property defines the lanes of the pool using a string-representation (the lanes goes vertically from top to bottom side of the pool). Defines the pool's lanes as explained bellow:
   *
   * The format of lanes property is:
   *
   *  "caption[flag=value]...[flag=value],...,caption[flag=value]...[flag=value]"
   *
   * where:
   *
   *  "caption", defines the lane's ex-HTML caption (shown into the pool's header)
   *  "flag", defines a property of the lane such as:
   *    [size=value], defines the size of the lane (in percent), where value is a numeric value. 0 or negative value hides the lane
   *    [shape=value], defines the shape of the lane.
   *
   * @type {string}
   * @example
   *
   *  null {null}, displays no lanes for the pool
   *  "Lane 1,Lane 2", displays two-lanes for the pool named Lane 1 and Lane 2
   *  "Lane 1[size=20],Lane 2,Lane 3,Lane 4[shape=FrameSel]", displays four-lanes where Lane 1 takes 20% from the pool, while the rest of lanes shares equaly the available space on the pool. The Lane 4 displays the FrameSel shape.
  */
   lanes: null,
  /**
   * @description The phases property defines the phases of the pool using a string-representation (the phases goes horizontally from left to right side of the pool). Defines the pool's phases as explained bellow:
   *
   * The format of phases property is:
   *
   *  "caption[flag=value]...[flag=value],...,caption[flag=value]...[flag=value]"
   *
   * where:
   *
   *  "caption", defines the phase's ex-HTML caption (shown into the pool's header)
   *  "flag", defines a property of the phase such as:
   *    [size=value], defines the size of the phase (in percent), where value is a numeric value. 0 or negative value hides the phase
   *    [shape=value], defines the shape of the phase.
   *
   * @type {string}
   * @example
   *
   *  null {null}, displays no phases for the pool
   *  "Phase 1,Phase 2", displays two-phases for the pool named Phase 1 and Phase 2
   *  "Phase 1[size=20],Phase 2,Phase 3,Phase 4[shape=FrameSel]", displays four-phases where Phase 1 takes 20% from the pool, while the rest of phases shares equaly the available space on the pool. The Phase 4 displays the FrameSel shape.
  */
   phases: null
};

/////////////////////////////////////////////////////////// (exontrol.Swimlane.Pool)
//
// The exontrol.Swimlane.Pool object holds information(options) about a pool within the control.
//
// The Add(oPoolOpts) method of exontrol.Swimlane.Pools creates and adds a new pool into the control.
//
// The exontrol.Swimlane.Pool object provides the following methods:
//
//  Options/GetOptions()/SetOptions(value) {exontrol.Swimlane.PoolOptions}, indicates the pool's options (at once) such as visibility, caption and so on
//  Remove(), removes the pool itself from pools collection ( equivalent of Pools.Remove(oPool) method )
//  Index/GetIndex() {number}, returns the index of the pool (0-based)
//  Position/GetPosition()/SetPosition(value) {number}, specifies the pool's position (0-based)
//  BringToFront() {number}, moves the pool to the top of the stacking order, so that it is in front of other pools (returns the pool's previously position)
//  BringForward() {number}, moves the pool up one level, so that it is closer to top of the stacking order (returns the pool's previously position)
//  SendToBack() {number}, moves the pool to the bottom of the stacking order, so that it is behind the other pools (returns the pool's previously position)
//  SendBackward() {number}, moves the pool down one level, so that it is closer to the bottom of the stacking order.
//  Key/GetKey()/SetKey(value) {boolean}, specifies the pool's key (the Pools.Item(key) requests a pool by its index, identifier/key or reference)
//  Visible/GetVisible()/SetVisible(value) {boolean}, shows or hides the pool
//  Enabled/GetEnabled()/SetEnabled(value) {boolean}, enables or disables the pool
//  Shape/GetShape()/SetShape(value) {any}, indicates the shape for the pool itself.
//  Cursor/GetCursor()/SetCursor(value) {any}, the mouse cursor for the pool itself.
//  Client/GetClient()/SetClient(value) {array}, specifies the pool's client area.
//  AutoSize(objects), re-sizes the pool so all its (specified) elements and inner-pools fits inside.
//  Headers/GetHeaders()/SetHeaders(value) {string}, specifies the pool's headers.
//  ExcludeHeaders/GetExcludeHeaders()/SetExcludeHeaders(value) {boolean}, specifies whether pool's lanes and phases excludes or includes the pool's headers.
//  Lanes/GetLanes()/SetLanes(value) {string}, specifies the pool's lanes (the lanes goes vertically from top to bottom side of the pool).
//  Phases/GetPhases()/SetPhases(value) {string}, specifies the pool's phases (the phases goes horizontally from left to right side of the pool).
//  Lane(id, lane) {PoolSplitter}, gets the lane of the pool giving its identifier
//  Phase(id, phase) {PoolSplitter}, gets the phase of the pool giving its identifier
//
/////////////////////////////////////////////////////////// 

/////////////////////////////////////////////////////////// (exontrol.Def.Surface)
//
// The exontrol.Def.Surface namespace provides definitions for different objects, primitives, objects of exontrol.Swimlane object
//
//  The exontrol.Def.Surface namespace provides the following fields:
//
//    scrollBars {exontrol.ScrollBarsEnum}, determines whether the control has horizontal and/or vertical scroll bars
//    scrollBarsHome {string}, specifies the color to highlight the position of origin (0,0) on the control's scroll bars.
//    scrollBarsLayout {string}, specifies the color to highlight the position of the current layout within the control's scroll bars.
//    tfi {(string|object)}, holds the font attributes for captions within the control. The tfi field can be defined using a string representation such as &quot;b monospace 16&quot; or as an object such as {bold: true, fontName: &quot;monospace&quot;, fontSize: 16}.
//    locked {boolean}, indicates whether the control is locked(protected) or unlocked
//    wheelChange {number}, specifies the amount the control scrolls when the user rolls the mouse wheel.
//    smooth {number}, defines the time in ms the control goes from one layout to another.
//    margins {object}, specifies control's margins.
//    shapes {string}, defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance.
//    cursors {string}, specifies the mouse cursor to be displayed when pointing over a part of the control.
//    singleSel {exontrol.Swimlane.SingleSelEnum}, specifies whether the control supports single, multiple, toggle selection.
//    zoom {number}, defines the zoom factor of the control's content. The zoomLevels field defines the margins of the zoom-factor the control is allowed to magnify.
//    zoomLevels {string}, defines the zoom-levels the user can magnify the control's content
//    formatText {exontrol.DrawTextFormatEnum}, specifies the format to display the element's caption.
//    pad {(number|string|array)}, defines the element's padding (space between the element's content and its border)
//    imageSize {(null|number|array)}, defines the size of the element's image.
//    imageAlign {number}, defines the alignment of the image within the element.
//    showLinks {exontrol.ShowLinksEnum}, indicates whether the control shows or hides the links between elements.
//    showLinksOnCollapse {boolean}, specifies whether links between collapsed elements are visible or hidden.
//    link {object}, specifies the appearance of the link between elements.
//    collapsedLink {object}, specifies the appearance of the link between collapsed elements.
//    allowActions {string}, customizes the actions the user can perform once the user clicks or touches the control.
//    expandGlyphSize {number}, specifies the size to show the element's expand/collapse glyphs.
//    allowChangeParent {boolean}, specifies whether the element's position or parent can be changed at runtime by drag and drop.
//    selements {string}, defines the elements of the control from a string-representation.
//    slinks {string}, defines the links between elements of the control from a string-representation.
//    spools {string}, defines the pools of the control from a string-representation.
//    defArrange {object}, holds different options to auto-arrange the elements using the Arrange method
//    allowLinkControlPoint {exontrol.Surface.LinkControlPointEnum}, indicates the control points of the link, the user can use to customize the link's path
//    coord {exontrol.Surface.CoordEnum}, specifies the type of coordinates the elements of the surface display in
//
///////////////////////////////////////////////////////////

/**
 * @description The exontrol.Def.Surface namespace provides definitions for different objects, primitives, objects of exontrol.Swimlane object
*/
exontrol.Def.Surface =
{
  /**
   * @description The scrollBars field determines whether the control has horizontal and/or vertical scroll bars. A combination of one or more exontrol.ScrollBarsEnum flags that determines whether the control has horizontal and/or vertical scroll bars.
   *
   * The exontrol.ScrollBarsEnum type defines the following flags:
   *
   *  exNoScroll (0), specifies that no scroll bars are shown (scroll is not allowed)
   *  exHorizontal (1), specifies that only horizontal scroll bars is shown
   *  exVertical (2), specifies that only vertical scroll bars is shown
   *  exBoth (3), specifies that both horizontal and vertical scroll bars are shown
   *  exDisableNoHorizontal (5), specifies that the horizontal scroll bar is always shown, it is disabled if it is unnecessary
   *  exDisableNoVertical (10), specifies that the vertical scroll bar is always shown, it is disabled if it is unnecessary
   *  exDisableBoth (15), specifies that both horizontal and vertical scroll bars are always shown, disabled if they are unnecessary
   *  exHScrollOnThumbRelease (0x100), specifies that the control's content is horizontally scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
   *  exVScrollOnThumbRelease (0x200), specifies that the control's content is vertically scrolled as soon as the user releases the thumb of the vertical scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
   *  exScrollOnThumbRelease (0x300), specifies that the control's content is scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
   *  exHScrollEmptySpace (0x400), allows empty space, when the control's content is horizontally scrolled to the end
   *  exVScrollEmptySpace (0x800), allows empty space, when the control's content is vertically scrolled to the end
   *  exScrollEmptySpace (0xC00), allows empty space, when the control's content is scrolled to the end
   *  exExtendSBS (0x3000), specifies that the control's scroll-bars are visible only when the mouse pointer hovers the window. Also, the control's client area is extended on the scroll bars portion
   *  exMinSBS (0xC000), specifies that the control's scroll-bars are shown as minimized
   *  exHideSBS (0x10000), specifies that no scroll bars are shown (scroll is allowed)
   *
   * @type {exontrol.ScrollBarsEnum}
   * @example
   *
   *  0 or exontrol.ScrollBarsEnum.exNoScroll {number}, removes the control's scroll bars, so scroll is not allowed
   *  15 or exontrol.ScrollBarsEnum.exDisableBoth {number}, the control always displays the scroll bars, and they are active only if scroll is possible
   *  12291 or exontrol.ScrollBarsEnum.exBoth | exontrol.ScrollBarsEnum.exExtendSBS {number}, the control shows the scroll bars only if the cursor hovers the control, and the control scroll bars are hidden as soon as the cursor leaves the control
  */
   scrollBars: exontrol.ScrollBarsEnum.exBoth,
  /**
   * @description The scrollBarsHome field specifies the color to highlight the position of origin (0,0) on the control's scroll bars. Indicates null, to prevent showing the position of origin (0,0) on the control's scroll bars, or a CSS color
   * @type {string}
   * @example
   *
   *   null {null}, hides the origin (0,0) on the control's scroll bar
   *   "black" {string}, shows the origin (0,0) on the control's scroll bar in black
  */
   scrollBarsHome: "black",
  /**
   * @description The scrollBarsLayout field specifies the color to highlight the position of the current layout within the control's scroll bars. Specifies null, to hide the position of the current layout within the control's scroll bars, or a CSS color
   * @type {string}
   * @example
   *
   *   null {null}, hides the position of the current layout within the control's scroll bars.
   *   "black" {string}, shows in black  the position of the current layout within the control's scroll bars.
  */
   scrollBarsLayout: "black",
  /**
  * @description The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.
  *
  * The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:
  *
  *   bold, displays the text in bold (equivalent of <b> tag)
  *   italic, displays the text in italics (equivalent of <i> tag)
  *   underline, underlines the text (equivalent of <u> tag)
  *   strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
  *   <fontName name>, specifies the font's family (equivalent of <font name> tag)
  *   <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
  *   <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
  *   <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
  *   <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
  *   <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  *   <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)
  *
  * Any other word within the tfi field that's not recognized as a keyword is interpreted as:
  *
  *   name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
  *   size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)
  *
  * The tfi field as object supports any of the following fields:
  *
  *   bold {boolean}, displays the text in bold (equivalent of <b> tag)
  *   italic {boolean}, displays the text in italics (equivalent of <i> tag)
  *   underline {boolean}, underlines the text (equivalent of <u> tag)
  *   strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
  *   fontName {string}, specifies the font's family (equivalent of <font name> tag)
  *   fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
  *   fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
  *   bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
  *   shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
  *     color {string}, defines the color of the text's shadow (CSScolor)
  *     width {number}, defines the size of the text's shadow
  *     offset {number}, defines the offset to show the text's shadow relative to the text
  *   outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  *   graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
  *     color {string}, defines the gradient-color (CSScolor)
  *     mode {number}, defines the gradient mode as a value between 0 and 4
  *     blend {number}, defines the gradient blend as a value between 0 and 1
  *
  * CSSColor or CSS legal color values can be specified by the following methods:
  *
  *   Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
  *   Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
  *   RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
  *   RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
  *   HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
  *   HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
  *   Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
  *
  * @type {(string|object)}
  * @example
  *
  *   null {null}, the tfi field is ignored
  *   "bold monospace 16" {string}, defines Monospace font of 16px height, bold
  *   {bold: true, fontName: "monospace", fontSize: 16} {object}, defines Monospace font of 16px height, bold
  */
   tfi: null,
  /**
   * @description The locked field indicates whether the control is locked(protected) or unlocked
   * @type {boolean}
   * @example
   *
   *   false {boolean}, unlocks the control (can select any element)
   *   true {boolean}, locks the control (can't select any element)
  */
   locked: false,
  /**
   * @description The readOnly field indicates whether the control is read-only
   * @type {boolean}
   * @example
   *
   *   false {boolean}, the user can create, resize or move any element
   *   true {boolean}, the user can not create, resize or move any element.
  */
   readOnly: false,
  /**
  * @description The wheelChange field specifies the amount the control scrolls when the user rolls the mouse wheel.
  * @type {number}
  * @example
  *
  *   0 {number}, locks any action the mouse's wheel performs
  *   18 {number}, scrolls the control by 18-pixels when mouse's wheel is rotated (CTRL + wheel scrolls horizontally)
  */
   wheelChange: 18,
  /**
   * @description The smooth field defines the time in ms the control goes from one layout to another.
   * @type {number}
   * @example
   *
   *   0 {number}, no smooth changes once the control goes from a layout to another
   *   125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms.
  */
   smooth: 125,
  /**
   * @description The margins field specifies control's margins. Indicates an object of {x,y,indent,border} type that defines the horizontal, vertical and indent distance between elements.
   * @type {object}
  */
  margins:
  {
    /**
     * @description The x field defines the horizontal distance between two visible neighbor elements.
     * @type {number}
     * @example
     *
     *  0 {number}, defines no horizontal distance between two visible neighbor elements
     *  16 {number}, defines 16-pixels horizontal distance between two visible neighbor elements
    */
     x: 2,
    /**
     * @description The y field defines the vertical distance between two visible neighbor elements.
     * @type {number}
     * @example
     *
     *  0 {number}, defines no vertical distance between two visible neighbor elements
     *  16 {number}, defines 16-pixels vertical distance between two visible neighbor elements
    */
     y: 2,
    /**
     * @description The indent field defines the distance between a child element and its parent, while the elements are arranged as a tree.
     * @type {number}
     * @example
     *
     *  0 {number}, defines no indention
     *  16 {number}, defines 16-pixels indention
    */
     indent: 16,
    /**
     * @description The border field defines the distance between the elements and the border of the control.
     * @type {number}
     * @example
     *
     *  0 {number}, defines no space between control's borders and elements
     *  16 {number}, defines 16-pixels distance between the elements and the border of the control
    */
     border: 16
  },
  /**
   * @description The shapes field defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. A string expression that defines the shapes each part of the control can display.
   *
   * The format of shapes property is:
   *
   *  "shape(part),shape(part),..."
   *
   * where:
   *
   *  "shape", defines the shape to apply on the UI part as one of the following:
   *
   *    any of 140 color names any browser supports (such as red, blue, green, ...)
   *    hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
   *    hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
   *    RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
   *    RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
   *    HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
   *    HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
   *    a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": &quot;RoundRect&quot;,&quot;fillColor&quot;:&quot;black&quot;,&quot;tfi&quot;: {&quot;fgColor&quot;: "white"}}}')
   *    specifies the name of the field within the exontrol.Shapes.Surface object (while it starts with a lowercase letter, such as element which refers to exontrol.Shapes.Surface.element shape)
   *    specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)
   *
   *  "part", defines the name of the part the shape is applied on (as defined bellow)
   *
   * The shapes property supports any of the following parts:
   *
   *  "element", defines the visual-appearance of all elements within the control
   *  "link-bs", defines the visual-appearance of the link's start control-point (it changes the start-position of the link)
   *  "link-be", defines the visual-appearance of the link's end control-point (it changes the end-position of the link)
   *  "link-p", defines the visual-appearance of the link's intermediate control-point
   *  "link-m", defines the visual-appearance of the link's middle control-point
   *  "pool", defines the visual-appearance of all pools within the control
   *  "lane", defines the visual-appearance of all lanes for all pools
   *  "laneAlt", defines the visual-appearance of alternate lanes for all pools
   *  "phase", defines the visual-appearance of all phases for all pools
   *  "phaseAlt", defines the visual-appearance of alternate phases for all pools
   *  "header", defines the visual-appearance of all headers within the control
   *  "select", defines the visual-appearance of selected-element
   *  "frameFit", defines the visual-appearance to display the frame while fitting objects into the control's client area by drag
   *  "frameSel", defines the visual appearance to display a frame while selecting objects by drag
   *  "frameDrag", specifies the visual appearance to display the frame while dragging the objects
   *  "expand", specifies the visual appearance for expand/collapse glyphs
   *  "multiSel", specifies the visual appearance to show the count of multiple-selected items
   *
   * @type {string}
   * @example
   *
   *  null {null}, specifies the default visual appearance
   *  "" {string}, no shape (no visual appearance is applied to any part of the control)
   *  "red(element)", "#FF0000(element)", "rgb(255,0,0)(element)", "rgba(255,0,0,1)(element)" {string}, shows all-elements in red
   *  '{"hover":{"frameColor":"black","pad":-0.5}}(element)' {string}, draws a black-frame arround the element being hovered
   *  "xxx(d),yyy(d,m),zzz(y)"  {string}, specifies that the exontrol.Shapes.Surface.xxx combined with exontrol.Shapes.Surface.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Surface.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Surface.zzz object defines the visual appearance of "y" part of the control
  */
   shapes: "Border(pool),flp(lane,phase),altflp(laneAlt,phaseAlt),Button(header),element(element),Expand(expand),FrameFit(frameFit),FrameSel(frameSel,select),shmulti(multiSel)",
  /**
   * @description The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. Specifies the mouse cursor to be displayed when pointing over a part of the control.
   *
   * The format of cursors property is:
   *
   *  "cursor(part),cursor(part),..."
   *
   * where:
   *
   *  "cursor", defines the CSS mouse cursor to display while cursor hovers the part
   *  "part", defines the name of the part the cursor is applied on (as defined bellow)
   *
   * The cursors property supports any of the following parts:
   *
   *  "element", defines the mouse-cursor when the mouse pointer hovers any element
   *  "expand" (expand/collapse), defines the mouse-cursor when the mouse pointer hovers the element's expand/collapse glyphs
   *  "pool", defines the mouse-cursor when the mouse pointer hovers any pool
   *  "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the <a> ex-HTML part marks an anchor or hyperlink element)
   *  "link-cp" (link-control-point), defines the mouse-cursor when the mouse pointer hovers any link's control point
   *  "link-cp-all" (link-control-point-all), defines the mouse-cursor when the mouse pointer hovers any link's control point (while the link is orthogonally arranged by drag and drop ~ exOrthoArrange)
   *  "link-cp-h" (link-control-point-horizontal), defines the mouse-cursor when the mouse pointer hovers a horizontal line (while the link is orthogonally arranged by drag and drop ~ exOrthoArrange)
   *  "link-cp-v" (link-control-point-vertical), defines the mouse-cursor when the mouse pointer hovers a vertical line (while the link is orthogonally arranged by drag and drop ~ exOrthoArrange)
   *
   * @type {string}
   * @example
   *
   *   "pointer(xxx,yy)" {string}, indicates that the "pointer" mouse cursor is shown while cursor hovers any "xxx" or "yyy" part of the control
  */
   cursors: "pointer(element,link-cp,expand,drag-drop,anchor),all-scroll(link-cp-all),row-resize(link-cp-h),col-resize(link-cp-v)",
  /**
   * @description The singleSel field specifies whether the control supports single, multiple, toggle selection. Indicates whether the control supports single or multiple selection.
   *
   * The exontrol.Swimlane.SingleSelEnum type defines the following flags:
   *
   *  exDisableSel(0), specifies that the control's selection is disabled (can not be combined with any other flags)
   *  exEnableSel(1), specifies that the control's selection is enabled (multiple-selection, unless the exSingleSel is set )
   *  exSingleSel(2), specifies that the user can select a element only
   *  exToggleSel(4), specifies that the element's selection state is toggled once the user clicks a element.
   *  exDisableCtrlSel(8), disables toggling the element's selection state when user clicks a element, while CTRL modifier key is pressed.
   *  exDisableShiftSel(16), disables selecting elements using the SHIFT key.
   *  exDisableDrag(32), disables selecting elements by drag.
   *
   * @type {exontrol.Swimlane.SingleSelEnum}
   * @example
   *
   *  0 or exontrol.Swimlane.SingleSelEnum.exDisableSel {number}, disables selecting any element
   *  3 or exontrol.Swimlane.SingleSelEnum.exSingleSel | exontrol.Swimlane.SingleSelEnum.exEnableSel {number}, enables control's single selection, so only a single element can be selected
   *  6 or exontrol.Swimlane.SingleSelEnum.exToggleSel | exontrol.Swimlane.SingleSelEnum.exSingleSel {number}, enables control's single and toggle selection, which means that once a element is selected it gets unselected once it is clicked, or reverse, and only a single-element can be selected at once.
  */
   singleSel: exontrol.Swimlane.SingleSelEnum.exEnableSel,
  /**
   * @description The zoom field defines the zoom factor of the control's content. The zoomLevels field defines the margins of the zoom-factor the control is allowed to magnify. Indicates the content's zoom factor in percent. The zoom field can be any value between 10 (10%) and 1000 (1000%)
   * @type {number}
   * @example
   *
   *   null {null}, Specifies normal-view (100%)
   *   150 {number}, Indicates that the control's content is magnfied to 150%
  */
   zoom: 100,
  /**
   * @description The zoomLevels field defines the zoom-levels the user can magnify the control's content. Specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-margins the control's content is allowed to zoom
   * @type {string}
   * @example
   *
   *   null {null}, Specifies that the control's zoom factor is always 100%
   *   150 {number}, Specifies that the control's zoom factor is always 150%
   *   "50,100,200,350" {string}, Indicates that the zoom-factor can be any of selected values, and the margins of zoom-factor is 50% to 350%
  */
   zoomLevels: "25,35,50,65,75,80,90,100,110,125,150,175,200,250,300,400,500",
  /**
   * @description The formatText field specifies the format to display the element's caption. A combination of one or more exontrol.DrawTextFormatEnum flags that defines the format to show the element's caption.
   *
   * The exontrol.DrawTextFormatEnum type support the following flags:
   *
   *   exTextAlignTop (0x00), justifies the text to the top of the rectangle
   *   exTextAlignLeft (0x00), aligns text to the left
   *   exTextAlignCenter (0x01), centers text horizontally in the rectangle
   *   exTextAlignRight (0x02), aligns text to the right
   *   exTextAlignVCenter (0x04), centers text vertically
   *   exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle.
   *   exTextAlignMask (0x0F), specifies the mask for text's alignment.
   *   exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line.
   *   exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line.
   *   exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight.
   *   exPlainText (0x80), treats the text as plain text.
   *   exTextNoClip (0x0100), draws without clipping.
   *   exHTMLTextNoColors (0x0200), ignores the <fgcolor> and </bgcolor> tags.
   *   exTextCalcRect (0x0400), determines the width and height of the text.
   *   exHTMLTextNoTags (0x0800), ignores all HTML tags.
   *   exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash.
   *   exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses.
   *   exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses.
   *
   * @type {exontrol.DrawTextFormatEnum}
   * @example
   *
   *   null {null}, centers the caption
   *   32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line caption
   *   0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line caption right/bottom-aligned
  */
   formatText: exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextAlignVCenter | exontrol.DrawTextFormatEnum.exTextWordBreak | exontrol.DrawTextFormatEnum.exTextWordEllipsis,
  /**
   * @description The pad field defines the element's padding (space between the element's content and its border). A value that could be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size
   * @type {(number|string|array)}
   * @example
   *
   *   null {null}, indicates that the default-padding field is used ([4,4])
   *   0 {number}, indicates no padding
   *   "8,4" {string}, increases the element's width with 2 * 8-pixels and element's height with 2 * 4-pixels
   *   [8,4] {array}, increases the element's width with 2 * 8-pixels and element's height with 2 * 4-pixels
  */
   pad: [4,4],
  /**
   * @description The imageSize field defines the size of the element's image. Indicates the size of the element's image.
   *
   * The imageSize could be of one of the following types:
   *
   *  {null}, Indicates that the element's image is displayed as it is (full-sized).
   *  {number}, Specifies that the element's image is displayed into a square of giving size (same width and height). If 0 the element displays no image, if negative the element's image is stretched to giving square, else the element's picture is scaled to fit the giving rectangle.
   *  {array}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the element's picture to scale or stretch to.
   *
   * @type {(null|number|array)}
   * @example
   *
   *  null {null}, Indicates that the element's image is displayed as it is (full-sized).
   *  0 {number}, no image is displayed
   *  64 {number}, the image is scaled to fit a 64 x 64 rectangle
   *  -64 {number}, the image is strected to a 64 x 64 rectangle
   *  [32,64] {array}, scales the image to the largest ratio-rectangle (32 x 64) that fits the client
   *  [-32,-64] {array}, stretches the image to a 32 x 64 rectangle
  */
   imageSize: null,
  /**
   * @description The imageAlign field defines the alignment of the image within the element. Indicates the alignment of the image within the element. as 0 (left, default), 1(right), 2(top) or 3(bottom).
   *
   * The imageAlign propery can be any of the following:
   *
   *  0, the image is on the left of the element's caption
   *  1, the image is on the right of the element's caption
   *  2, the image is on the top of the element's caption
   *  3, the image is on the bottom of the element's caption
   *
   * @type {number}
   * @example
   *
   *  null {null}, the image is on top of the element's cation (default value)
   *  1 {number}, the image is displayed to the right of the element's caption
  */
   imageAlign: 2,
  /**
   * @description The showLinks field indicates whether the control shows or hides the links between elements. Indicates a combination of one or more exontrol.ShowLinksEnum that defines whether the links between elements are visible or hidden
   *
   * The exontrol.ShowLinksEnum type supports the following flags:
   *
   *  exHide (0), specifies that no links are visible
   *  exExtended (0x01), specifies that links are shown as extended
   *  exShow (0x02), specifies that links are visible (the links are always shown while not exHide)
   *  exFront (0x10), specifies that links are shown in front (by default, the control are shown on the background)
   *  exCrossRect (0x20), shows rectangular cross-links
   *  exCrossTriangle (0x20), shows triangular cross-links
   *  exCrossMixt (0x60), shows mixt cross-links
   *  exPreventOverlap (0x100), adjusts the links to prevent them from overlapping the connected objects (@since 4.0)
   *  exChangeColorOnOverlap (0x200), adjusts the brightness of the color for links in areas where they overlap with other links, enhancing clarity and distinction between them (@since 4.0)
   *
   * @type {exontrol.ShowLinksEnum}
   * @example
   *
   *  0 or exontrol.ShowLinksEnum.exHide {number}, hides the links
   *  1 or exontrol.ShowLinksEnum.exShow {number}, shows the links (on the background)
   *  33 or exontrol.ShowLinksEnum.exExtended | exontrol.ShowLinksEnum.exCrossRect {number}, shows "extended" and "cross" links
  */
   showLinks: exontrol.ShowLinksEnum.exExtended | exontrol.ShowLinksEnum.exCrossRect,
  /**
   * @description The collapsedLink field specifies the appearance of the link between collapsed elements. Specifies the appearance of the link between collapsed elements.
   *
   * The link object includes any of the following:
   *
   *  type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
   *  dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
   *  width {number}, specifies the link's width or size (1 by default)
   *  color {string}, indicates the link's color (partial-black by default)
   *  arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
   *  style {array}, specifies the link's dash pattern to show the lines (solid by default)
   *  startPos {any}, indicates the list of corners of in-element, the link can start from
   *  endPos {any}, indicates the list of corners of out-element, the link can end to
   *
   * @type {object}
  */
  collapsedLink:
  {
    /**
     * @description The type field specifies the type of the link. Indicates a value of exontrol.LinkTypeEnum type that defines the type of the link.
     *
     * The exontrol.LinkTypeEnum type defines the following values:
     *
     *  exRect (0), defines a rectangular-link
     *  exDirect (1), defines a direct-link
     *  exStraight (2), defines a straight-link
     *  exRound (3), defines a round-link
     *
     * @type {exontrol.LinkTypeEnum}
     * @example
     *
     *  null {null}, indicates the default type of link, which is similar with rectangular-link (equivalent of 0)
     *  0 or exontrol.LinkTypeEnum.exRect {null}, shows rectangular-links
     *  2 or exontrol.LinkTypeEnum.exStraight {null}, shows straight-links
    */
     type: undefined,
    /**
     * @description The dir field specifies whether the link's direction is shown or hidden. Indicates a numeric value that defines whether the link's direction is shown or hidden.
     *
     * The dir field can be any of the following values:
     *
     *  0, specifies that no direction for the link is shown
     *  1, shows the direction/arrow where the link begins
     *  2, shows the direction/arrow where the link ends
     *  3, shows the arrows on both sides
     *
     * If not specified, the option 2 is used by default.
     *
     * @type {number}
     * @example
     *
     *  null {null}, shows the direction/arrow where the link ends (equivalent of 2)
     *  0 {number}, hides the link's direction
     *  3 {number}, shows the arrows on both sides
    */
     dir: undefined,
    /**
     * @description The width field defines the size/width of the link.
     * @type {number}
     * @example
     *
     *  null {null}, indicates links of 1-pixel wide
     *  2 {number}, indicates links of 2-pixels wide
    */
     width: undefined,
    /**
     * @description The color field specifies the color to show the link. Defines the color of the link as a CSS color format
     * @type {string}
     * @example
     *
     *  null {null}, indicates a black link
     *  "transparent" {string}, specifies a transparent link
     *  "red" {string}, specifies a red link
     *  "#00FF00" {string}, specifies a green link
     *  "rgba(255,0,0,0.5)" {string}, indicates 50% red link
    */
     color: "rgb(196,196,196)",
    /**
     * @description The arrow field indicates the arrow's color. Defines the color to show the link's arrow/direction into CSS color format. If it is missing or not specified the arrow is shown using the link's color.
     *
     * @type {string}
     * @example
     *
     *  null {null}, indicates that the link's color defines the color of the link's arrow
     *  "transparent" {string}, specifies a transparent arrow
     *  "red" {string}, specifies a red arrow
     *  "#00FF00" {string}, specifies a green arrow
     *  "rgba(255,0,0,0.5)" {string}, indicates 50% red arrow
    */
     arrow: undefined,
    /**
     * @description The style field defines the style of the link. An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated.
     * @type {array}
     * @example
     *
     *  null {null}, defines a solid grid-lines
     *  [] {array}, indicates a solid grid-lines
     *  2 {number}, will become [2, 2, ...]
     *  [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...]
    */
     style: 2,
    /**
     * @description The startPos field defines the in-element's corners, the link can start from. Indicates a numeric or string value that defines the in-element's corners, the link can start from, as explained bellow:
     *
     * The startPos field can be:
     *
     *  startPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element.
     *  startPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
     *  startPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
     *
     * The exontrol.CT type defines the following values:
     *
     *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
     *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
     *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
     *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
     *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
     *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
     *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
     *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
     *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
     *
     * @type {any}
     * @example
     *
     *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element
     *  exontrol.CT.TC {number}, indicates that the link always starts from the top-center point of the in-element
     *  exontrol.CT.TL | exontrol.CT.TC | exontrol.CT.TR {number}, indicates that the link starts from the in-element's top side (the closest to out-element)
     *  "MR" {string}, specifies that the link always starts from the middle-right point of the in-element
     *  "TR,MR,BR" {string}, specifies that the link starts from the in-element's right side (the closest to out-element)
    */
     startPos: undefined,
    /**
     * @description The endPos field defines the out-element's corners, the link can end into. Indicates a numeric or string value that defines the out-element's corners, the link can end into, as explained bellow:
     *
     * The endPos field can be:
     *
     *  endPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the in-element's closest point to in-element
     *  endPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
     *  endPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
     *
     * The exontrol.CT type defines the following values:
     *
     *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
     *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
     *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
     *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
     *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
     *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
     *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
     *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
     *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
     *
     * @type {any}
     * @example
     *
     *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the out-element's closest point to in-element
     *  exontrol.CT.BC {number}, indicates that the link always ends into the bottom-center point of the out-element
     *  exontrol.CT.BL | exontrol.CT.BC | exontrol.CT.BR {number}, indicates that the link ends into the out-element's bottom side (the closest to in-element)
     *  "ML" {string}, specifies that the link always ends to the middle-left point of the out-element
     *  "TL,ML,BL" {string}, specifies that the link ends into the out-element's left side (the closest to in-element)
    */
     endPos: undefined
  },
  /**
   * @description The link field specifies the appearance of the link between elements. Specifies the appearance of the link between elements.
   *
   * The link object includes any of the following:
   *
   *  type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
   *  dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
   *  width {number}, specifies the link's width or size (1 by default)
   *  color {string}, indicates the link's color (partial-black by default)
   *  arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
   *  style {array}, specifies the link's dash pattern to show the lines (solid by default)
   *  startPos {any}, indicates the list of corners of in-element, the link can start from
   *  endPos {any}, indicates the list of corners of out-element, the link can end to
   *
   * @type {object}
  */
  link:
  {
    /**
     * @description The type field specifies the type of the link. Indicates a value of exontrol.LinkTypeEnum type that defines the type of the link.
     *
     * The exontrol.LinkTypeEnum type defines the following values:
     *
     *  exRect (0), defines a rectangular-link
     *  exDirect (1), defines a direct-link
     *  exStraight (2), defines a straight-link
     *  exRound (3), defines a round-link
     *
     * @type {exontrol.LinkTypeEnum}
     * @example
     *
     *  null {null}, indicates the default type of link, which is similar with rectangular-link (equivalent of 0)
     *  0 or exontrol.LinkTypeEnum.exRect {null}, shows rectangular-links
     *  2 or exontrol.LinkTypeEnum.exStraight {null}, shows straight-links
    */
     type: undefined,
    /**
     * @description The dir field specifies whether the link's direction is shown or hidden. Indicates a numeric value that defines whether the link's direction is shown or hidden.
     *
     * The dir field can be any of the following values:
     *
     *  0, specifies that no direction for the link is shown
     *  1, shows the direction/arrow where the link begins
     *  2, shows the direction/arrow where the link ends
     *  3, shows the arrows on both sides
     *
     * If not specified, the option 2 is used by default.
     *
     * @type {number}
     * @example
     *
     *  null {null}, shows the direction/arrow where the link ends (equivalent of 2)
     *  0 {number}, hides the link's direction
     *  3 {number}, shows the arrows on both sides
    */
     dir: undefined,
    /**
     * @description The width field defines the size/width of the link.
     * @type {number}
     * @example
     *
     *  null {null}, indicates links of 1-pixel wide
     *  2 {number}, indicates links of 2-pixels wide
    */
     width: undefined,
    /**
     * @description The color field specifies the color to show the link
     * @type {string}
     * @example
     *
     *  null {null}, indicates a black link
     *  "transparent" {string}, specifies a transparent link
     *  "red" {string}, specifies a red link
     *  "#00FF00" {string}, specifies a green link
     *  "rgba(255,0,0,0.5)" {string}, indicates 50% red link
    */
     color: "rgb(128,128,128)",
    /**
     * @description The arrow field indicates the arrow's color. Defines the color to show the link's arrow/direction into CSS color format. If it is missing or not specified the arrow is shown using the link's color.
     *
     * @type {string}
     * @example
     *
     *  null {null}, indicates that the link's color defines the color of the link's arrow
     *  "transparent" {string}, specifies a transparent arrow
     *  "red" {string}, specifies a red arrow
     *  "#00FF00" {string}, specifies a green arrow
     *  "rgba(255,0,0,0.5)" {string}, indicates 50% red arrow
    */
     arrow: undefined,
    /**
     * @description The style field defines the style of the link. An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated.
     * @example
     *
     *  null {null}, defines a solid grid-lines
     *  [] {array}, indicates a solid grid-lines
     *  2 {number}, will become [2, 2, ...]
     *  [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...]
     *
     * @type {array}
    */
     style: undefined,
    /**
     * @description The startPos field defines the in-element's corners, the link can start from. Indicates a numeric or string value that defines the in-element's corners, the link can start from, as explained bellow:
     *
     * The startPos field can be:
     *
     *  startPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element.
     *  startPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
     *  startPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
     *
     * The exontrol.CT type defines the following values:
     *
     *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
     *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
     *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
     *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
     *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
     *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
     *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
     *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
     *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
     *
     * @type {any}
     * @example
     *
     *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element
     *  exontrol.CT.TC {number}, indicates that the link always starts from the top-center point of the in-element
     *  exontrol.CT.TL | exontrol.CT.TC | exontrol.CT.TR {number}, indicates that the link starts from the in-element's top side (the closest to out-element)
     *  "MR" {string}, specifies that the link always starts from the middle-right point of the in-element
     *  "TR,MR,BR" {string}, specifies that the link starts from the in-element's right side (the closest to out-element)
    */
     startPos: undefined,
    /**
     * @description The endPos field defines the out-element's corners, the link can end into. Indicates a numeric or string value that defines the out-element's corners, the link can end into, as explained bellow:
     *
     * The endPos field can be:
     *
     *  endPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the in-element's closest point to in-element
     *  endPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
     *  endPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
     *
     * The exontrol.CT type defines the following values:
     *
     *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
     *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
     *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
     *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
     *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
     *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
     *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
     *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
     *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
     *
     * @type {any}
     * @example
     *
     *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the out-element's closest point to in-element
     *  exontrol.CT.BC {number}, indicates that the link always ends into the bottom-center point of the out-element
     *  exontrol.CT.BL | exontrol.CT.BC | exontrol.CT.BR {number}, indicates that the link ends into the out-element's bottom side (the closest to in-element)
     *  "ML" {string}, specifies that the link always ends to the middle-left point of the out-element
     *  "TL,ML,BL" {string}, specifies that the link ends into the out-element's left side (the closest to in-element)
    */
     endPos: undefined
  },
  /**
   * @description The linkStartFrom field specifies the appearance of the link that starts from any selected-bar (outgoing links). Specifies the appearance of the link that starts from any selected-bar (outgoing links).
   *
   * The linkStartFrom object includes any of the following:
   *
   *  type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
   *  dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
   *  width {number}, specifies the link's width or size (1 by default)
   *  color {string}, indicates the link's color (partial-black by default)
   *  arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
   *  style {array}, specifies the link's dash pattern to show the lines (solid by default)
   *  startPos {any}, indicates the list of corners of in-element, the link can start from
   *  endPos {any}, indicates the list of corners of out-element, the link can end to
   *
   * @type {object}
  */
  linkStartFrom:
  {
    /**
    * @description The type field specifies the type of the link. Indicates a value of exontrol.LinkTypeEnum type that defines the type of the link.
    *
    * The exontrol.LinkTypeEnum type defines the following values:
    *
    *  exRect (0), defines a rectangular-link
    *  exDirect (1), defines a direct-link
    *  exStraight (2), defines a straight-link
    *  exRound (3), defines a round-link
    *
    * @type {exontrol.LinkTypeEnum}
    * @example
    *
    *  null {null}, indicates the default type of link, which is similar with rectangular-link (equivalent of 0)
    *  0 or exontrol.LinkTypeEnum.exRect {null}, shows rectangular-links
    *  2 or exontrol.LinkTypeEnum.exStraight {null}, shows straight-links
    */
     type: undefined,
    /**
    * @description The dir field specifies whether the link's direction is shown or hidden. Indicates a numeric value that defines whether the link's direction is shown or hidden.
    *
    * The dir field can be any of the following values:
    *
    *  0, specifies that no direction for the link is shown
    *  1, shows the direction/arrow where the link begins
    *  2, shows the direction/arrow where the link ends
    *  3, shows the arrows on both sides
    *
    * If not specified, the option 2 is used by default.
    *
    * @type {number}
    * @example
    *
    *  null {null}, shows the direction/arrow where the link ends (equivalent of 2)
    *  0 {number}, hides the link's direction
    *  3 {number}, shows the arrows on both sides
    */
     dir: undefined,
    /**
    * @description The width field defines the size/width of the link.
    * @type {number}
    * @example
    *
    *  null {null}, indicates links of 1-pixel wide
    *  2 {number}, indicates links of 2-pixels wide
    */
     width: undefined,
    /**
    * @description The color field specifies the color to show the link. Defines the color of the link as a CSS color format
    * @type {string}
    * @example
    *
    *  null {null}, indicates a black link
    *  "transparent" {string}, specifies a transparent link
    *  "red" {string}, specifies a red link
    *  "#00FF00" {string}, specifies a green link
    *  "rgba(255,0,0,0.5)" {string}, indicates 50% red link
    */
     color: undefined,
    /**
    * @description The arrow field indicates the arrow's color. Defines the color to show the link's arrow/direction into CSS color format. If it is missing or not specified the arrow is shown using the link's color.
    *
    * @type {string}
    * @example
    *
    *  null {null}, indicates that the link's color defines the color of the link's arrow
    *  "transparent" {string}, specifies a transparent arrow
    *  "red" {string}, specifies a red arrow
    *  "#00FF00" {string}, specifies a green arrow
    *  "rgba(255,0,0,0.5)" {string}, indicates 50% red arrow
    */
     arrow: undefined,
    /**
    * @description The style field defines the style of the link. An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated.
    * @type {array}
    * @example
    *
    *  null {null}, defines a solid grid-lines
    *  [] {array}, indicates a solid grid-lines
    *  2 {number}, will become [2, 2, ...]
    *  [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...]
    */
     style: undefined,
    /**
    * @description The startPos field defines the in-element's corners, the link can start from. Indicates a numeric or string value that defines the in-element's corners, the link can start from, as explained bellow:
    *
    * The startPos field can be:
    *
    *  startPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element.
    *  startPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
    *  startPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
    *
    * The exontrol.CT type defines the following values:
    *
    *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
    *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
    *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
    *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
    *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
    *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
    *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
    *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
    *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
    *
    * @type {any}
    * @example
    *
    *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element
    *  exontrol.CT.TC {number}, indicates that the link always starts from the top-center point of the in-element
    *  exontrol.CT.TL | exontrol.CT.TC | exontrol.CT.TR {number}, indicates that the link starts from the in-element's top side (the closest to out-element)
    *  "MR" {string}, specifies that the link always starts from the middle-right point of the in-element
    *  "TR,MR,BR" {string}, specifies that the link starts from the in-element's right side (the closest to out-element)
    */
     startPos: undefined,
    /**
    * @description The endPos field defines the out-element's corners, the link can end into. Indicates a numeric or string value that defines the out-element's corners, the link can end into, as explained bellow:
    *
    * The endPos field can be:
    *
    *  endPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the in-element's closest point to in-element
    *  endPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
    *  endPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
    *
    * The exontrol.CT type defines the following values:
    *
    *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
    *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
    *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
    *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
    *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
    *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
    *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
    *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
    *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
    *
    * @type {any}
    * @example
    *
    *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the out-element's closest point to in-element
    *  exontrol.CT.BC {number}, indicates that the link always ends into the bottom-center point of the out-element
    *  exontrol.CT.BL | exontrol.CT.BC | exontrol.CT.BR {number}, indicates that the link ends into the out-element's bottom side (the closest to in-element)
    *  "ML" {string}, specifies that the link always ends to the middle-left point of the out-element
    *  "TL,ML,BL" {string}, specifies that the link ends into the out-element's left side (the closest to in-element)
    */
     endPos: undefined
  },
  /**
  * @description The linkEndTo field specifies the appearance of the link that ends to any selected-bar (incoming links). Specifies the appearance of the link that ends to any selected-bar (incoming links).
  *
  * The linkEndTo object includes any of the following:
  *
  *  type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
  *  dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
  *  width {number}, specifies the link's width or size (1 by default)
  *  color {string}, indicates the link's color (partial-black by default)
  *  arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
  *  style {array}, specifies the link's dash pattern to show the lines (solid by default)
  *  startPos {any}, indicates the list of corners of in-element, the link can start from
  *  endPos {any}, indicates the list of corners of out-element, the link can end to
  *
  * @type {object}
  */
  linkEndTo:
  {
    /**
    * @description The type field specifies the type of the link. Indicates a value of exontrol.LinkTypeEnum type that defines the type of the link.
    *
    * The exontrol.LinkTypeEnum type defines the following values:
    *
    *  exRect (0), defines a rectangular-link
    *  exDirect (1), defines a direct-link
    *  exStraight (2), defines a straight-link
    *  exRound (3), defines a round-link
    *
    * @type {exontrol.LinkTypeEnum}
    * @example
    *
    *  null {null}, indicates the default type of link, which is similar with rectangular-link (equivalent of 0)
    *  0 or exontrol.LinkTypeEnum.exRect {null}, shows rectangular-links
    *  2 or exontrol.LinkTypeEnum.exStraight {null}, shows straight-links
    */
     type: undefined,
    /**
    * @description The dir field specifies whether the link's direction is shown or hidden. Indicates a numeric value that defines whether the link's direction is shown or hidden.
    *
    * The dir field can be any of the following values:
    *
    *  0, specifies that no direction for the link is shown
    *  1, shows the direction/arrow where the link begins
    *  2, shows the direction/arrow where the link ends
    *  3, shows the arrows on both sides
    *
    * If not specified, the option 2 is used by default.
    *
    * @type {number}
    * @example
    *
    *  null {null}, shows the direction/arrow where the link ends (equivalent of 2)
    *  0 {number}, hides the link's direction
    *  3 {number}, shows the arrows on both sides
    */
     dir: undefined,
    /**
    * @description The width field defines the size/width of the link.
    * @type {number}
    * @example
    *
    *  null {null}, indicates links of 1-pixel wide
    *  2 {number}, indicates links of 2-pixels wide
    */
     width: undefined,
    /**
    * @description The color field specifies the color to show the link. Defines the color of the link as a CSS color format
    * @type {string}
    * @example
    *
    *  null {null}, indicates a black link
    *  "transparent" {string}, specifies a transparent link
    *  "red" {string}, specifies a red link
    *  "#00FF00" {string}, specifies a green link
    *  "rgba(255,0,0,0.5)" {string}, indicates 50% red link
    */
     color: undefined,
    /**
    * @description The arrow field indicates the arrow's color. Defines the color to show the link's arrow/direction into CSS color format. If it is missing or not specified the arrow is shown using the link's color.
    *
    * @type {string}
    * @example
    *
    *  null {null}, indicates that the link's color defines the color of the link's arrow
    *  "transparent" {string}, specifies a transparent arrow
    *  "red" {string}, specifies a red arrow
    *  "#00FF00" {string}, specifies a green arrow
    *  "rgba(255,0,0,0.5)" {string}, indicates 50% red arrow
    */
     arrow: undefined,
    /**
    * @description The style field defines the style of the link. An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated.
    * @type {array}
    * @example
    *
    *  null {null}, defines a solid grid-lines
    *  [] {array}, indicates a solid grid-lines
    *  2 {number}, will become [2, 2, ...]
    *  [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...]
    */
     style: undefined,
    /**
    * @description The startPos field defines the in-element's corners, the link can start from. Indicates a numeric or string value that defines the in-element's corners, the link can start from, as explained bellow:
    *
    * The startPos field can be:
    *
    *  startPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element.
    *  startPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
    *  startPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
    *
    * The exontrol.CT type defines the following values:
    *
    *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
    *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
    *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
    *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
    *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
    *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
    *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
    *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
    *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
    *
    * @type {any}
    * @example
    *
    *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element
    *  exontrol.CT.TC {number}, indicates that the link always starts from the top-center point of the in-element
    *  exontrol.CT.TL | exontrol.CT.TC | exontrol.CT.TR {number}, indicates that the link starts from the in-element's top side (the closest to out-element)
    *  "MR" {string}, specifies that the link always starts from the middle-right point of the in-element
    *  "TR,MR,BR" {string}, specifies that the link starts from the in-element's right side (the closest to out-element)
    */
     startPos: undefined,
    /**
    * @description The endPos field defines the out-element's corners, the link can end into. Indicates a numeric or string value that defines the out-element's corners, the link can end into, as explained bellow:
    *
    * The endPos field can be:
    *
    *  endPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the in-element's closest point to in-element
    *  endPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
    *  endPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
    *
    * The exontrol.CT type defines the following values:
    *
    *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
    *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
    *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
    *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
    *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
    *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
    *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
    *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
    *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
    *
    * @type {any}
    * @example
    *
    *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the out-element's closest point to in-element
    *  exontrol.CT.BC {number}, indicates that the link always ends into the bottom-center point of the out-element
    *  exontrol.CT.BL | exontrol.CT.BC | exontrol.CT.BR {number}, indicates that the link ends into the out-element's bottom side (the closest to in-element)
    *  "ML" {string}, specifies that the link always ends to the middle-left point of the out-element
    *  "TL,ML,BL" {string}, specifies that the link ends into the out-element's left side (the closest to in-element)
    */
     endPos: undefined
  },
  /**
  * @description The linkUnselected field specifies the appearance of the link not related to any selected-bar (unselected links). Specifies the appearance of the link not related to any selected-bar (unselected links).
  *
  * The linkUnselected object includes any of the following:
  *
  *  type {exontrol.LinkTypeEnum}, specifies the type of the link as 0 (rectangular), 1 (direct), 2(straight) or 3(round)
  *  dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides
  *  width {number}, specifies the link's width or size (1 by default)
  *  color {string}, indicates the link's color (partial-black by default)
  *  arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default)
  *  style {array}, specifies the link's dash pattern to show the lines (solid by default)
  *  startPos {any}, indicates the list of corners of in-element, the link can start from
  *  endPos {any}, indicates the list of corners of out-element, the link can end to
  *
  * @type {object}
  */
  linkUnselected:
  {
    /**
    * @description The type field specifies the type of the link. Indicates a value of exontrol.LinkTypeEnum type that defines the type of the link.
    *
    * The exontrol.LinkTypeEnum type defines the following values:
    *
    *  exRect (0), defines a rectangular-link
    *  exDirect (1), defines a direct-link
    *  exStraight (2), defines a straight-link
    *  exRound (3), defines a round-link
    *
    * @type {exontrol.LinkTypeEnum}
    * @example
    *
    *  null {null}, indicates the default type of link, which is similar with rectangular-link (equivalent of 0)
    *  0 or exontrol.LinkTypeEnum.exRect {null}, shows rectangular-links
    *  2 or exontrol.LinkTypeEnum.exStraight {null}, shows straight-links
    */
     type: undefined,
    /**
    * @description The dir field specifies whether the link's direction is shown or hidden. Indicates a numeric value that defines whether the link's direction is shown or hidden.
    *
    * The dir field can be any of the following values:
    *
    *  0, specifies that no direction for the link is shown
    *  1, shows the direction/arrow where the link begins
    *  2, shows the direction/arrow where the link ends
    *  3, shows the arrows on both sides
    *
    * If not specified, the option 2 is used by default.
    *
    * @type {number}
    * @example
    *
    *  null {null}, shows the direction/arrow where the link ends (equivalent of 2)
    *  0 {number}, hides the link's direction
    *  3 {number}, shows the arrows on both sides
    */
     dir: undefined,
    /**
    * @description The width field defines the size/width of the link.
    * @type {number}
    * @example
    *
    *  null {null}, indicates links of 1-pixel wide
    *  2 {number}, indicates links of 2-pixels wide
    */
     width: undefined,
    /**
    * @description The color field specifies the color to show the link. Defines the color of the link as a CSS color format
    * @type {string}
    * @example
    *
    *  null {null}, indicates a black link
    *  "transparent" {string}, specifies a transparent link
    *  "red" {string}, specifies a red link
    *  "#00FF00" {string}, specifies a green link
    *  "rgba(255,0,0,0.5)" {string}, indicates 50% red link
    */
     color: undefined,
    /**
    * @description The arrow field indicates the arrow's color. Defines the color to show the link's arrow/direction into CSS color format. If it is missing or not specified the arrow is shown using the link's color.
    *
    * @type {string}
    * @example
    *
    *  null {null}, indicates that the link's color defines the color of the link's arrow
    *  "transparent" {string}, specifies a transparent arrow
    *  "red" {string}, specifies a red arrow
    *  "#00FF00" {string}, specifies a green arrow
    *  "rgba(255,0,0,0.5)" {string}, indicates 50% red arrow
    */
     arrow: undefined,
    /**
    * @description The style field defines the style of the link. An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated.
    * @type {array}
    * @example
    *
    *  null {null}, defines a solid grid-lines
    *  [] {array}, indicates a solid grid-lines
    *  2 {number}, will become [2, 2, ...]
    *  [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...]
    */
     style: undefined,
    /**
    * @description The startPos field defines the in-element's corners, the link can start from. Indicates a numeric or string value that defines the in-element's corners, the link can start from, as explained bellow:
    *
    * The startPos field can be:
    *
    *  startPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element.
    *  startPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
    *  startPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
    *
    * The exontrol.CT type defines the following values:
    *
    *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
    *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
    *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
    *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
    *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
    *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
    *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
    *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
    *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
    *
    * @type {any}
    * @example
    *
    *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element
    *  exontrol.CT.TC {number}, indicates that the link always starts from the top-center point of the in-element
    *  exontrol.CT.TL | exontrol.CT.TC | exontrol.CT.TR {number}, indicates that the link starts from the in-element's top side (the closest to out-element)
    *  "MR" {string}, specifies that the link always starts from the middle-right point of the in-element
    *  "TR,MR,BR" {string}, specifies that the link starts from the in-element's right side (the closest to out-element)
    */
     startPos: undefined,
    /**
    * @description The endPos field defines the out-element's corners, the link can end into. Indicates a numeric or string value that defines the out-element's corners, the link can end into, as explained bellow:
    *
    * The endPos field can be:
    *
    *  endPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the in-element's closest point to in-element
    *  endPos {number}, indicates an OR combination of one or more values of exontrol.CT type.
    *  endPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
    *
    * The exontrol.CT type defines the following values:
    *
    *  TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
    *  TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
    *  TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
    *  ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
    *  C (34 or 0x22), indicates the center of the object, equivalent of "C"
    *  MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
    *  BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
    *  BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
    *  BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
    *
    * @type {any}
    * @example
    *
    *  null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the out-element's closest point to in-element
    *  exontrol.CT.BC {number}, indicates that the link always ends into the bottom-center point of the out-element
    *  exontrol.CT.BL | exontrol.CT.BC | exontrol.CT.BR {number}, indicates that the link ends into the out-element's bottom side (the closest to in-element)
    *  "ML" {string}, specifies that the link always ends to the middle-left point of the out-element
    *  "TL,ML,BL" {string}, specifies that the link ends into the out-element's left side (the closest to in-element)
    */
     endPos: undefined
  },
  /**
   * @description The showLinksOnCollapse field specifies whether links between collapsed elements are visible or hidden.
   * @type {boolean}
   *
   * @example
   *
   *  null {null}, shows links between collapsed elements
   *  false {boolean}, hides the links between collapsed elements
  */
   showLinksOnCollapse: true,
  /**
   * @description The allowActions field customizes the actions the user can perform once the user clicks or touches the control. Specifies the list and order of the actions the user can perform once the user clicks or touches the control.
   *
   * The format of allowActions field is:
   *
   *  "action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."
   *
   * where
   *
   *  "action", indicates the name of the action. The "action" can have any of the following values:
   *
   *    "scroll", scrolls the control's content by drag
   *    "zoom", zooms the control's content at dragging-point.
   *    "fit", fits the drag-area into the control's client area.
   *    "select", selects elements by drag
   *    "create", creates an element or a pool by drag. The "create" action allows flags such as [pool] or [element] that specifies what type object to create. For instance "create[pool](Ctrl+Alt)" creates a pool if Ctrl + Alt is pressed, while "create[element](Alt)" creates an element while the Alt key is pressed. (not available if the control is read-only)
   *    "move", moves or resizes elements by drag. The "move" action allows flags such as [pool] or [element] that specifies what type object it is possible to move or resize. If flag is missing, the user can move or resize elements or pools. For instance, "move[element]" indicates that only elements is allowed to be moved or resized. (not available if the control is read-only)
   *    "link", links elements by drag (not available if the control is read-only). The "link" action allows flags such as:
   *      [toggle], the link is removed if the linked-bars has already a link between
   *    "link-cp", allows customization the link's path by drag (not available if the control is read-only). The "link-cp" action is not required and it has effect only if the control's allowLinkControlPoint property is not zero. For instance, is allowLinkControlPoint property is zero, the "link-cp" does nothing.
   *    "resize-header", resizes the pool's header. The "resize-header" action allows flags such as [left], [top], [right] or [bottom] to specify which type of pool's headers are resizable. If no flag is present, it indicates that all pool's headers are resizable. For instance, "resize-header[left,top]" specifies that just the left and top-header of the pool are resizable. (not available if the control is read-only)
   *    "resize-lane", resizes the pool's lane (the lanes are vertically arranged).
   *    "resize-phase", resizes the pool's phase (the phases are horizontally arranged).
   *
   *  "shortcut", defines the event's button or/and the modifier-keys that are required to perform the action. The "shortcut" is a combination of none, one or more of the following values:
   *
   *    "Shift", indicates that the SHIFT key is pressed
   *    "Ctrl" or "Control", indicates that the CTRL key is pressed
   *    "Alt" or "Menu", indicates that the ALT key is pressed
   *    "Meta" , indicates that the META key is pressed
   *    "LButton", specifies that the mouse's left-button is pressed
   *    "RButton", specifies that the mouse's right-button is pressed
   *    "MButton", specifies that the mouse's middle/wheel-button is pressed
   *    "Long", specifies that the action requires a "long" click/touch before run
   *    "+", indicates AND between values
   *
   * @type {string}
   * @example
   *
   *  null {null}, indicates the control's default allowActions value
   *  "" {string}, specifies that no operation is allowed once the user clicks or touches the control
   *  "scroll" {string}, specifies that only "scroll" operation is allowed, no matter of the event's button or modifier-keys is pressed.
   *  "create(Alt+LButton),move,scroll" {string}, indicates that creating-elements is possible only if the user presses the mouse's left-button while ALT key is pressed, and "move" or "scroll" is possible no matter of the event's button or modifier-keys in this order. Also, if no "create"-operation is possible, do "move"-operation, if no "move"-operation is possible, do "scroll"-operation
   *
  */
   allowActions: "fit(Shift+MButton,Ctrl+MButton,Alt+MButton),zoom(MButton),select(Shift,Ctrl),link(Alt)[toggle],create[pool](Ctrl+Alt),create[element](Alt),move,resize-header,resize-lane,resize-phase,scroll",
  /**
   * @description The expandGlyphSize field specifies the size to show the element's expand/collapse glyphs
   * @type {number}
   * @example
   *
   *  0 {number}, displays no node's expand/collapse glyphs
   *  24 {number}, specifies a size of 24x24 to display the node's expand/collapse glyphs
  */
   expandGlyphSize: 16,
  /**
   * @description The allowChangeParent field specifies whether the element's position or parent can be changed at runtime by drag and drop.
   * @type {boolean}
   * @example
   *
   *  null {null}, allows element's parent or position to be changed at runtime by drag and drop.
   *  false {boolean}, prevents changing the element's position or parent at runtime by drag and drop.
  */
   allowChangeParent: true,
  /**
   * @description The selements field defines the elements of the control from a string-representation. Indicates the elements of the control.
   *
   * The format of the elements'string representation is (everything between () refers to children, and everything between [] refers to flags):
   *
   *  "element1[flag=value]...[flag=value](sub-element1[flag=value]...[flag=value],...,sub-elementn[flag=value]...[flag=value]),...,elementn[flag=value]...[flag=value](sub-element1[flag=value]...[flag=value],...,sub-elementn[flag=value]...[flag=value])"
   *
   * The element1, sub-element1 ... elementn defines the caption for each element.
   *
   * The string representation supports the following flags:
   *
   *  [key] {string}, specifies the element's key (Key/GetKey()/SetKey(value) methods of exontrol.Swimlane.Element). For instance, [key=root], specifies that the element's key is "root"
   *  [vis]/[hid] {number}, shows or hides the element (Visible/GetVisible()/SetVisible(value) methods of exontrol.Swimlane.Element). For instance, [hid] or [vis=0], hides the element, while [vis=1] shows the element
   *  [dis] {number}, enables or disables the element (Enabled/GetEnabled()/SetEnabled(value) methods of exontrol.Swimlane.Element). For instance, [dis] or [dis=0], disables the element, while [dis=1] enables the element
   *  [pos] {number}, changes the element's position (0-based) (Position/GetPosition()/SetPosition(value) methods of exontrol.Swimlane.Element). For instance, [pos=0] indicates that the element should be displayed first
   *  [img] {string}, assigns a image/picture to the element (Image/GetImage()/SetImage(value) methods of exontrol.Swimlane.Element). For instance, [img=logo] assigns the "logo" picture to the element. The image can be added using the exontrol.HTMLPicture.Add() method. You can use the [simg] flag to define the element's image to be displayed on the "sub-items" portion of the control.
   *  [imgs] {string}, defines the size of the element's image as a string of "aspect-width,aspect-height" type (without quotes) (ImageSize/GetImageSize()/SetImageSize(value) methods of exontrol.Swimlane.Element). For instance, [imgs=-32] stretches the element's image into a square of 32x32 size, while [imgs=32,32] fits the element's image into a square of 32x32 size.
   *  [imga] {number}, specifies the alignment of the image within the element relative to its caption. The value of "imga" flag can be 0(left), 1(right), 2(top) or 3(bottom). (ImageAlign/GetImageAlign()/SetImageAlign(value) methods of exontrol.Swimlane.Element). For instance, [imga=3] aligns the element's image at the bottom of its box
   *  [client] {string}, specifies the element's client-rectangle as a string of "x,y,width,height" type (without quotes) (Client/GetClient()/SetClient(value) methods of exontrol.Swimlane.Element). For instance, [client=0,0,128,128] specifies the element's client are to [0,0,128,128]
   *  [coll] {string}, indicates a collapsed-element (Expand/GetExpand()/SetExpand(value) methods of exontrol.Swimlane.Element). For instance, [coll] or [coll=0], collapses the element, while [c=1] expands the element
   *  [ft] {number}, specifies the format to display the element's caption. The value of "ft" flag can be a combination of one or more values of exontrol.DrawTextFormatEnum type (FormatText/GetFormatText()/SetFormatText(value) methods of exontrol.Swimlane.Element). For instance, [ft=32] displays the element's caption on a single line only. Carriage returns and line feeds do not break the line (32 indicates the value of exontrol.DrawTextFormatEnum.exTextSingleLine)
   *  [pad] {string}, defines the element's padding (space between the element's content and its border) (Pad/GetPad()/SetPad(value) methods of exontrol.Swimlane.Element). For instance, [pad=4] defines a 4-pixels padding for all edges
   *  [shape] {string}, defines the shape for individual element (Shape/GetShape()/SetShape(value) methods of exontrol.Swimlane.Element). For instance, [shape=Button] specifies that the element is shown as a "button".
   *  [cursor] {string}, defines the mouse-cursor for individual element (Cursor/GetCursor()/SetCursor(value) methods of exontrol.Swimlane.Element). For instance, [cursor=wait] indicates that the "wait" mouse-cursor is displayed while the cursor hovers the element
   *
   * @type {string}
   * @example
   *
   *  "" {string}, clears the elements collection
   *  "A(A1,A2,A3),B[client=128,128,32,32](B1,B2(B2.1,B2.2),B3)" {string}, defines the element "A" with three child-elements "A1", "A2" and "A2", and element "B" with child-elements "B1", "B2", and "B3", also defines the "B2.1" and "B2.2" as children of element "B2"
   *  "A[img=logo][hid],B[client=128,128,32,32][dis]" {string}, defines the element "A" hidden and with the image "logo" and element "B" as disabled.
  */
   selements: null,
  /**
   * @description The slinks field defines the links between elements of the control from a string-representation.
   *
   * The format of the links'string representation is (everything between () refers to children, and everything between [] refers to flags):
   *
   *  "link1[flag=value]...[flag=value],...,linkn[flag=value]...[flag=value]"
   *
   * The link1, ... linkn defines the caption for each link.
   *
   * The string representation supports the following flags:
   *
   *  [link] {string} (required), indicates the link's in-out elements in "from-to" format, where from/to indicates the element's key, plain-caption or index (0-based). For instance, [link=11-1], links the elements with index 11 and 1, or [link=root-1] links the element with the key "root" or plain-caption "root" with the element of index 1.
   *  [key] {string}, specifies the link's key (Key/GetKey()/SetKey(value) methods of exontrol.Swimlane.Link). For instance, [key=root], specifies that the link's key is "root"
   *  [vis]/[hid] {number}, shows or hides the link (Visible/GetVisible()/SetVisible(value) methods of exontrol.Swimlane.Link). For instance, [hid] or [vis=0], hides the link, while [vis=1] shows the link
   *  [type] {number}, specifies the type of the link as a value of 0 (rectangular), 1 (direct), 2(straight) or 3(round). For instance, [type=3] defines a round-link
   *  [dir] {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides. For instance, [dir=3] shows the arrows in both-directions of the link.
   *  [width] {number}, specifies the link's width or size. For instance, [width=4] shows a wider link.
   *  [color] {string}, indicates the link's color. For instance, [color=red] specifies a red-link.
   *  [arrow] {string}, indicates the arrow's color. For instance, [arrow=#808080] shows the link's arrow in gray.
   *  [style] {number}, specifies the link's dash pattern to show the lines. For instance, [style=2] shows a dotted-link
   *  [startPos] {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR" of in-element, where the link can start from. For instance, [startPos=TR,MR,BR] specifies that the link can start anywhere on the in-element's right-side
   *  [endPos] {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR" of out-element, where the link can end into. For instance, [endPos=TL,ML,BL] specifies that the link can end anywhere on the out-element's left-side
   *
   * The following flags have effect only when the link is shown between collapsed-elements
   *
   *  [coll-type] {number}, specifies the type of the link as a value of 0 (rectangular), 1 (direct), 2(straight) or 3(round). For instance, [coll-type=3] defines a round-link
   *  [coll-dir] {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides. For instance, [coll-dir=3] shows the arrows in both-directions of the link.
   *  [coll-width] {number}, specifies the link's width or size. For instance, [coll-width=4] shows a wider link.
   *  [coll-color] {string}, indicates the link's color. For instance, [coll-color=red] specifies a red-link.
   *  [coll-arrow] {string}, indicates the arrow's color. For instance, [coll-arrow=#808080] shows the link's arrow in gray.
   *  [coll-style] {number}, specifies the link's dash pattern to show the lines. For instance, [coll-style=2] shows a dotted-link
   *  [coll-startPos] {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR" of in-element, where the link can start from. For instance, [coll-startPos=TR,MR,BR] specifies that the link can start anywhere on the in-element's right-side
   *  [coll-endPos] {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR" of out-element, where the link can end into. For instance, [coll-endPos=TL,ML,BL] specifies that the link can end anywhere on the out-element's left-side
   *
   * @type {string}
   * @example
   *
   *  "" {string}, clears all the links
   *  "L1[link=A-L]" {string}, defines a link between elements with the key "A" and "B" with the caption "L1"
   *  "L1[link=A-L],L2[link=A-0]" {string}, defines two links, one between "A" and "L" with the caption "L1", and another between "A" and element with the index 0, with the caption "L2"
  */
   slinks: null,
  /**
   * @description The defArrange type holds different options to auto-arrange the elements using the Arrange method. Specifies an object of {dir,dx,dy,align.compact} type to customize the arrangement of the elements using the Arrange method.
   * @type {object}
  */
  defArrange:
  {
    /**
     * @description The dir property specifies the direction to auto-arrange the elements. Specifies a numeric value as follows:
     *
     *  0 {number}, specifies horizontal arrangement, which indicates that the out-elements are arranged to the right.
     *  1 {number}, specifies vertical arrangement, which indicates that the out-elements are arranged to the bottom.
     *
     * Currently, any other value has no effect
     * @type {number}
    */
     dir: 0,
    /**
     * @description The dx property specifies the distance between two auto-arranged elements on horizontal axis. You can use the dx field to increase or decrease the distance of the arranged elements.
     * @type {number}
    */
     dx: 36,
    /**
     * @description The dy property specifies the distance between two auto-arranged elements on vertical axis. You can use the dx field to increase or decrease the distance of the arranged elements.
     * @type {number}
    */
     dy: 36,
    /**
     * @description The align property specifies the alignment of the elements relative to incoming/outgoing elements during the Arrange operation. Indicates a numeric value as follows:
     *
     *  0 {number}, indicates left/top alignment
     *  1 {number}, indicates center alignment
     *  2 {number}, specifies right/bottom alignment
     *
     * @type {number}
    */
     align: 1,
    /**
     * @description The compact property compacts the layout during the Arrange method.
     * @type {boolean}
    */
     compact: true
  },
  /**
   * @description The spools field defines the pools of the control from a string-representation.
   *
   * The format of the pools'string representation is:
   *
   *  "[flag=value]...[flag=value],...,[flag=value]...[flag=value]"
   *
   * The string representation supports the following flags:
   *
   *  [key] {string}, specifies the pool's key (Key/GetKey()/SetKey(value) methods of exontrol.Swimlane.Pool). For instance, [key=pool], specifies that the pool's key is "pool"
   *  [vis]/[hid] {number}, shows or hides the pool (Visible/GetVisible()/SetVisible(value) methods of exontrol.Swimlane.Pool). For instance, [hid] or [vis=0], hides the pool, while [vis=1] shows the pool
   *  [dis] {number}, enables or disables the pool (Enabled/GetEnabled()/SetEnabled(value) methods of exontrol.Swimlane.Pool). For instance, [dis] or [dis=0], disables the pool, while [dis=1] enables the pool
   *  [pos] {number}, changes the pool's position (0-based) (Position/GetPosition()/SetPosition(value) methods of exontrol.Swimlane.Pool). For instance, [pos=0] indicates that the pool should be displayed first
   *  [client] {string}, specifies the pool's client-rectangle as a string of "x,y,width,height" type (without quotes) (Client/GetClient()/SetClient(value) methods of exontrol.Swimlane.Pool). For instance, [client=0,0,128,128] specifies the pool's client are to [0,0,128,128]
   *  [shape] {string}, defines the shape for individual pool (Shape/GetShape()/SetShape(value) methods of exontrol.Swimlane.Pool). For instance, [shape=Button] specifies that the pool is shown as a "button".
   *  [cursor] {string}, defines the mouse-cursor for individual pool (Cursor/GetCursor()/SetCursor(value) methods of exontrol.Swimlane.Pool). For instance, [cursor=wait] indicates that the "wait" mouse-cursor is displayed while the cursor hovers the pool
   *  [headers] {string}, defines the headers of the pool (Headers/GetHeaders()/SetHeaders(value) methods of exontrol.Swimlane.Pool).
   *
   *    The format of the headers is:
   *
   *      [headers=type[flag=value]...[flag=value],...,type[flag=value]...[flag=value]]
   *
   *    where:
   *
   *    "type", defines the type of the header, which can be any of the following:
   *      "left", defines the pool's header anchored to the left-side
   *      "top", defines the pool's header anchored to the top-side
   *      "right", defines the pool's header anchored to the right-side
   *      "bottom", defines the pool's header anchored to the right-side
   *
   *    "flag", defines the property of the header such as:
   *      [size=value], defines the size of the header, where value is a numeric value. If 0 or negative, the header is not shown
   *      [shape=value], defines the shape of the header.
   *
   *    For instance: [headers=left,top[size=24][shape=Button]], shows the pool's left-header with size 0, and top-header of the pool with specified size and shape.
   *
   *  [exclhead]/[inclhead] {number}, indicates whether the pool's lanes and phases excludes or includes the pool's headers (ExcludeHeaders/GetExcludeHeaders()/SetExcludeHeaders(value) methods of exontrol.Swimlane.Pool). For instance, [inclhead] or [exclhead=0], indicates that the pool's lanes and phases includes the pool's headers, while [exclhead=1] excludes the pool's headers from lanes and phases.
   *  [lanes] {string}, defines the lanes of the pool (the lanes goes vertically from top to bottom side of the pool) (Lanes/GetLanes()/SetLanes(value) methods of exontrol.Swimlane.Pool).
   *
   *    The format of lanes property is:
   *
   *      "caption[flag=value]...[flag=value],...,caption[flag=value]...[flag=value]"
   *
   *    where:
   *
   *      "caption", defines the lane's ex-HTML caption (shown into the pool's header)
   *      "flag", defines a property of the lane such as:
   *        [size=value], defines the size of the lane (in percent), where value is a numeric value. 0 or negative value hides the lane
   *        [shape=value], defines the shape of the lane.
   *
   *    For instance: [lanes=Lane 1[size=20],Lane 2,Lane 3,Lane 4[shape=FrameSel]], displays four-lanes where Lane 1 takes 20% from the pool, while the rest of lanes shares equaly the available space on the pool. The Lane 4 displays the FrameSel shape.
   *
   *  [phases] {string}, defines the phases of the pool (the phases goes horizontally from left to right side of the pool) (Phases/GetPhases()/SetPhases(value) methods of exontrol.Swimphase.Pool).
   *
   *    The format of phases property is:
   *
   *      "caption[flag=value]...[flag=value],...,caption[flag=value]...[flag=value]"
   *
   *    where:
   *
   *      "caption", defines the phase's ex-HTML caption (shown into the pool's header)
   *      "flag", defines a property of the phase such as:
   *        [size=value], defines the size of the phase (in percent), where value is a numeric value. 0 or negative value hides the phase
   *        [shape=value], defines the shape of the phase.
   *
   *    For instance: [phases=Phase 1[size=20],Phase 2,Phase 3,Phase 4[shape=FrameSel]], displays four-phases where Phase 1 takes 20% from the pool, while the rest of phases shares equaly the available space on the pool. The Phase 4 displays the FrameSel shape.
   *
   * @type {string}
   * @example
   *
   *  "" {string}, clears the pools collection
   *  "[key=pool][client=-512,-256,612,512]" {string}, creates a pool at specified location with the key "pool"
  */
   spools: null,
  /**
   * @description The allowLinkControlPoint field indicates the control points of the link, the user can use to customize the link's path. The property is applied to all links (unless the allowControlPoint property of the link indicates a different value). A combination of one or more exontrol.Surface.LinkControlPointEnum flags that determines the control points for an individual link, the user can use to customize the link.
   *
   * The exontrol.Surface.LinkControlPointEnum type defines the following flags:
   *
   *  exNoControlPoint(0), the link displays no control points
   *  exStartControlPoint(1), the link shows control point that changes the link's StartPos property (the exStartControlPoint point is marked with black squares)
   *  exEndControlPoint(2), the link shows control point that changes the link's EndPos property (the exEndControlPoint point is marked with black squares)
   *  exControlPoint(4), defines the corners of the link's path. You can remove a exControlPoint points by dragging to another, so intermediate exControlPoint points are removed. You can move all control points of the link at once, if SHIFT key is pressed (the exControlPoint points are marked black circles)
   *  exMiddleControlPoint(8), defines the link's middle control points that are displayed between two exControlPoint points, to let the use add new exControlPoint points, to redefine the link's path (The exMiddleControlPoint points are marked with gray circles)
   *
   * @type {exontrol.Surface.LinkControlPointEnum}
   * @example
   *
   *  0 or exontrol.Surface.LinkControlPointEnum.exNoControlPoint {number}, displays no link's control points (unless the link's allowControlPoint property is different)
   *  3 or exontrol.Surface.LinkControlPointEnum.exStartControlPoint | exontrol.Surface.LinkControlPointEnum.exEndControlPoint {number}, displays link's start and end control points only, for all links (unless the link's allowControlPoint property is different)
   *
  */
   allowLinkControlPoint: exontrol.Surface.LinkControlPointEnum.exNoControlPoint
}

/////////////////////////////////////////////////////////// (exontrol.Shapes.Surface)
//
// The exontrol.Shapes.Surface namespace provides support to customize the visual appearance of different parts of the exontrol.Swimlane object.
//
///////////////////////////////////////////////////////////

/**
 * @description The exontrol.Shapes.Surface namespace provides support to customize the visual appearance of different parts of the exontrol.Swimlane object.
*/
exontrol.Shapes.Surface =
{
  /**
  * @description The element field specifies the visual appearance to display the elements. Indicates an object of {normal, disabled,hover,click} type
  * @type {object}
  */
  element:
  {
    /**
    * @description The normal field includes definitions to draw the object in normal state. An object of exontrol.Def.Shape type to be applied on the part's background on normal state.
    * @type {object}
    */
    normal:
    {
       primitive: "RoundRect",
       fillColor: "rgb(240,240,240)",
       frameColor: "lightgray",
    },
    /**
    * @description The hover field includes definitions to draw the object while cursor hovers it. An object of exontrol.Def.Shape type to be applied on the part's background while cursor hovers it.
    * @type {object}
    */
    hover:
    {
       fillColor: "rgb(200,200,200)",
    },
    /**
    * @description The click field includes definitions to draw the object while it is clicked. An object of exontrol.Def.Shape type to be applied on the part's background while it is clicked.
    * @type {object}
    */
    click:
    {
       fillColor: "rgb(160,160,160)",
    },
    /**
    * @description The disabled field includes definitions to draw the object in disabled state. An object of exontrol.Def.Shape type to be applied on the part's background on disabled state.
    * @type {object}
    */
    disabled:
    {
       opacity: 0.5
    }
  },
  flp:
  {
    /**
    * @description The normal field includes definitions to draw the object in normal state. An object of exontrol.Def.Shape type to be applied on the part's background on normal state.
    * @type {object}
    */
    normal:
    {
       frameColor: "rgb(192,192,192)"
    }
  },
  altflp:
  {
    /**
    * @description The normal field includes definitions to draw the object in normal state. An object of exontrol.Def.Shape type to be applied on the part's background on normal state.
    * @type {object}
    */
    normal:
    {
       frameColor: "rgb(192,192,192)",
       fillColor: "rgba(192,192,192, 0.20)"
    }
  },
  /**
  * @description The shmulti field specifies the visual appearance to show the count of dragged items. Indicates an object of exontrol.Def.Shape type
  * @type {object}
  */
  shmulti:
  {
     primitive: "RoundRect",
     fillColor: "black",
    tfi:
    {
       fgColor: "white"
    }
  }
}