The ExMenu/JS component provides menu-functionaly which includes top-level menus, context, popup, drop down or shortcut menus. A menu presents a list of items, commands, attributes, or states from which a user can choose. An item within a menu is known as a menu item, and may be configured to initiate an action, toggle a state on or off, or display a submenu of additional menu items when it is selected. A context menu is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a right-click mouse operation. The ExMenu/JS is a HTML standalone-component, written in JavaScript, that uses no third-party libraries.

Menu
ContextMenu
Toolbar
Options
Shapes
Shuffle
Properties
Events
  • Right-click the panel to get the context/shortcut-menu
Your browser does not support the HTML5 canvas tag.
  • Click the item to select/open/close the menu
Your browser does not support the HTML5 canvas tag.
  • Click the item to select/open/close the menu
Your browser does not support the HTML5 canvas tag.
  • Hover the mouse over the menu to get the item highligted
Your browser does not support the HTML5 canvas tag.
  • Move the mouse in-out of the control
Your browser does not support the HTML5 canvas tag.
  • Click the (top-right arrow) to show the source-code
  • Click the (bottom-left arrow) to show the help
  • ✔ Check/uncheck options to include/exclude the property
  • Change the option's value according to the below description
Your browser does not support the HTML5 canvas tag.
here goes the events
  • Click, drag, drop or roll the mouse-wheel to get for the control's events
/**
 * @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} Indicates whether the text is displayed in bold. * @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} Indicates whether the text shows in italics. * @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} Indicates whether the text is underlined. * @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} Indicates whether the text is strike-through. * @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} Indicates a CSS color to display the text. * @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} Indicates a CSS color to display the background of the text. * @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} Specifies the size of font to show the text. * @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} Indicates the font's family. * @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} Holds information about text's shadow. */ 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} Indicates a CSS color that defines the text's shadow. * @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} Specifies the width of the text's shadow. * @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} Specifies the offset of the text's shadow. * @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} Specifies a CSS color to show outlined text. * @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} Holds information about text's gradient. */ 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} Indicates a CSS color that defines the text's gradient. * @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). * @type {number} The mode is a value between 0 and 3, 1 if missing/null or undefined as explained: * @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). * @type {number} Could be 0 or 1. Currently, the gradient's blend is not available */   blend: null
} } } /** * @description The exontrol.helpShape namespace provides documentation for exontrol.S objects. */ exontrol.helpShape = { /** * @description The shape field includes definitions to draw shapes. * @type {object} An object of exontrol.Def.Shape type. */ shape: {
/** * @description The opacity field sets the opacity level of the object. * @type {number} It is a number between 0.0 (fully transparent) and 1.0 (fully opaque). * @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) * @type {string} 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. * * @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)} Defines a numeric, string or array value that determines the padding to be applied. * @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} Indicates the CSS color to show the object's background. * @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} Defines the gradient type and colors to show the object's background, separated by comma. * * 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. * @type {string} 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. * * @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} defines the padding to display the object's caption. * @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. * @type {string} Specifies 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 * * @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. * @type {exontrol.DrawTextFormatEnum} A combination of one or more exontrol.DrawTextFormatEnum flags that defines the format to show the text/caption inside the object's client area. * * 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. * * @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} Indicates whether the caption is clipped to object. * @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} Indicates the CSS color to show the object's frame. The primitive field defines type of the object's frame * @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} Defines size of the object's frame. * @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. * @type {array} 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 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. * @type {string} 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. * * @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 * @type {string} 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. * * @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). * @type {exontrol.PatternEnum} A exontrol.PatternEnum value that defines the type of the pattern to be displayed on the object's background. * * 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 * * @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} Indicates the CSS color to show the object's pattern. The patternColor property has effect only if the pattern property is defined. * @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} Defines an object of {color,blue,x,y} type that holds information about box's shadow. */ shadow: {
/** * @description The color field defines the shadow's color. * @type {string} Defines the shadow's color in CSS format. The color, x or y properties have no effect while blur property is not defined. * @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} Defines the blur level for shadows. * @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. * @type {number} Defines horizontal distance of the shadow from the object. The color, x or y properties have no effect while blur property is not defined. * @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} Defines vertical distance of the shadow from the object. The color, x or y properties have no effect while blur property is not defined. * @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) * @type {string} Indicates the primitive to draw the object's frame. * * 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) * * @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} Defines different properties to customize the object's primitive. The pArg field has no effect if no primitive is defined. */ pArg: {
/** * @description The x field defines the x-radius of the round-rectangle object. * @type {number} Specifies 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 * * @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. * @type {number} Specifies 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 * * @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. * @type {number} 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 * * @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. * @type {number} 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 * * @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. * @type {number} 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 * * @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 * @type {array} 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) * * @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). * @type {number} Defines star's deep. * * The deep field has effect only if the primitive is: * * "Star", defines a star-object * * @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. * @type {number} 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 * * @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) * @type {number} Defines tension of the curve(spline). * * The tension field has effect only if the primitive is: * * "Spline", defines a spline-curve (a curve that goes through its control points) * * @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 * @type {number} Defines the alpha of the curve(spline). * * The alpha field has effect only if the primitive is: * * "Spline", defines a spline-curve (a curve that goes through its control points) * * @example * * null {null}, defines the spline's default alpha (0.5) */   alpha: undefined,
/** * @description The closed field defines a closed spline(curve) * @type {number} 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) * * @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. * @type {callback} 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. */   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} Indicates whether the text is displayed in bold. * @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} Indicates whether the text shows in italics. * @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} Indicates whether the text is underlined. * @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} Indicates whether the text is strike-through. * @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} Indicates a CSS color to display the text. * @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} Indicates a CSS color to display the background of the text. * @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} Specifies the size of font to show the text. * @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} Indicates the font's family. * @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} Holds information about text's shadow. */ 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} Indicates a CSS color that defines the text's shadow. * @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} Specifies the width of the text's shadow. * @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} Specifies the offset of the text's shadow. * @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} Specifies a CSS color to show outlined text. * @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} Holds information about text's gradient. */ 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} Indicates a CSS color that defines the text's gradient. * @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). * @type {number} The mode is a value between 0 and 3, 1 if missing/null or undefined as explained: * @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). * @type {number} Could be 0 or 1. Currently, the gradient's blend is not available */   blend: null
} } } /** * @description The exontrol.helpShape namespace provides documentation for exontrol.S objects. */ exontrol.helpShape = { /** * @description The shape field includes definitions to draw shapes. * @type {object} An object of exontrol.Def.Shape type. */ shape: {
/** * @description The opacity field sets the opacity level of the object. * @type {number} It is a number between 0.0 (fully transparent) and 1.0 (fully opaque). * @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) * @type {string} 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. * * @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)} Defines a numeric, string or array value that determines the padding to be applied. * @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} Indicates the CSS color to show the object's background. * @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} Defines the gradient type and colors to show the object's background, separated by comma. * * 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. * @type {string} 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. * * @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} defines the padding to display the object's caption. * @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. * @type {string} Specifies 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 * * @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. * @type {exontrol.DrawTextFormatEnum} A combination of one or more exontrol.DrawTextFormatEnum flags that defines the format to show the text/caption inside the object's client area. * * 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. * * @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} Indicates whether the caption is clipped to object. * @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} Indicates the CSS color to show the object's frame. The primitive field defines type of the object's frame * @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} Defines size of the object's frame. * @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. * @type {array} 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 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. * @type {string} 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. * * @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 * @type {string} 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. * * @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). * @type {exontrol.PatternEnum} A exontrol.PatternEnum value that defines the type of the pattern to be displayed on the object's background. * * 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 * * @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} Indicates the CSS color to show the object's pattern. The patternColor property has effect only if the pattern property is defined. * @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} Defines an object of {color,blue,x,y} type that holds information about box's shadow. */ shadow: {
/** * @description The color field defines the shadow's color. * @type {string} Defines the shadow's color in CSS format. The color, x or y properties have no effect while blur property is not defined. * @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} Defines the blur level for shadows. * @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. * @type {number} Defines horizontal distance of the shadow from the object. The color, x or y properties have no effect while blur property is not defined. * @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} Defines vertical distance of the shadow from the object. The color, x or y properties have no effect while blur property is not defined. * @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) * @type {string} Indicates the primitive to draw the object's frame. * * 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) * * @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} Defines different properties to customize the object's primitive. The pArg field has no effect if no primitive is defined. */ pArg: {
/** * @description The x field defines the x-radius of the round-rectangle object. * @type {number} Specifies 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 * * @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. * @type {number} Specifies 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 * * @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. * @type {number} 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 * * @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. * @type {number} 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 * * @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. * @type {number} 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 * * @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 * @type {array} 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) * * @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). * @type {number} Defines star's deep. * * The deep field has effect only if the primitive is: * * "Star", defines a star-object * * @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. * @type {number} 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 * * @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) * @type {number} Defines tension of the curve(spline). * * The tension field has effect only if the primitive is: * * "Spline", defines a spline-curve (a curve that goes through its control points) * * @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 * @type {number} Defines the alpha of the curve(spline). * * The alpha field has effect only if the primitive is: * * "Spline", defines a spline-curve (a curve that goes through its control points) * * @example * * null {null}, defines the spline's default alpha (0.5) */   alpha: undefined,
/** * @description The closed field defines a closed spline(curve) * @type {number} 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) * * @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. * @type {callback} 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. */   draw: null
} } /* @license Copyright (C) Exontrol. All rights reserved. */ /////////////////////////////////////////////////////////// (exontrol.Menu) // // The exontrol.Menu class provides the following events (through oLts): // // "onlayoutchange", notifies your application that the control's layout has been changed. The onlayoutchange's parameter is: // // oEvent {object}, indicates the control's new layout as an object of exontrol.Menu.Layout type // // "onselect", occurs once the user selects/clicks an item (excluding popup-items). The onselect's parameter is: // // oEvent {object}, specifies the control's item being clicked/selected as an object of exontrol.Menu.Item type // // "oncheck", notifies your application that the user checks an item. The oncheck's parameter is: // // oEvent {object}, specifies the control's item being checked as an object of exontrol.Menu.Item type // // "onuncheck", occurs once the user unchecks an item. The onuncheck's parameter is: // // oEvent {object}, specifies the control's item being unchecked as an object of exontrol.Menu.Item type // // "onopen", notifies your application that a new float-menu has been opened. The onopen's parameter is: // // oEvent {object}, specifies the float-menu being opened as an object of exontrol.Menu type // // "onclose", occurs once a float-menu has been closed. The onclose's parameter is: // // oEvent {object}, specifies the float-menu being closed as an object of exontrol.Menu type // // "onmodal", occurs once the control begins or ends modal-mode, so one or more float-menus are being shown. The onmodal's parameter is: // // oEvent {boolean}, specifies whether the modal-mode starts or ends // // "onanchorclick", (@since 2.2) occurs once the user clicks an anchor element (the <a id;options> ex-HTML part marks an anchor or hyperlink element). The onanchorclick's parameter is: // // oEvent {object}, specifies an object of {id,options} type, that holds information about the anchor being clicked. // // oEvent.id {string}, specifies null or the identifier of the anchor being clicked // oEvent.options {string}, specifies null or the options of the anchor being clicked // /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// (exontrol.Def.Menu) // // The exontrol.Def.Menu namespace provides definitions for different objects, primitives, objects of exontrol.Menu object // // The exontrol.Def.Menu namespace provides the following fields: // // 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 // readOnly {boolean}, specifies whether the control is read-only // wheelChange {number}, specifies the amount the control scrolls when the user rolls the mouse wheel. // items {string}, defines the items of the menu from a string-representation. // criSize {number}, specifies the size (width and height) to show a check-box/radio-button or the item's image // criPad {(number|string|array)}, indicates the padding to apply to a check-box/radio-button or the item's image // criAlign {boolean}, specifies whether the check-box/radio-button or the item's image are vertically aligned. // criFlat {exontrol.Menu.FlatEnum}, indicates whether the menu's flat bar is shown or hidden. // pad {(number|string|array)}, defines the item's padding (space between the menu border and the item content) // itemsPad {(number|string|array)}, defines the padding the sub-items section of the item (space between the menu border and the items content) // align {number}, horizontally aligns the item's caption. // arrSize {number}, specifies the size (width and height) to show the item's arrow. // arrangeItemsAs {exontrol.Menu.ArrangeItemsEnum}, specifies how the items are arranged on the control (top-level menu). // subArrangeItemsAs {exontrol.Menu.ArrangeItemsEnum}, specifies how the items are arranged on the float-menus. // sepSize {number}, specifies the size to show a separator item. // btnPad {(number|string|array)}, defines the button's padding (space between the button border and the item content) // btnArrSize {number}, specifies the size (width and height) to show the button's arrow. // show {exontrol.Menu.ShowCheckedAsSelectedEnum}, defines how an item that has a check-box/radio button is displayed. // scrollSize {number}, specifies the size (width/height) of the control's scroll bar. // scrollClip {boolean}, specifies whether the control's scroll bar is clipped. // scrollOpt {exontrol.ScrollBar.Options}, specifies the options (UI visual appearance, behavior) to display the control's scroll bar. // 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. // smoothSel {number}, defines the time in ms the control's selection goes from one state to another. // open {number}, defines the time in ms the top-level item opens its sub-menu once the cursor hovers it. // close {number}, defines the time in ms the sub-menu is closed once the cursor hovers the top-level item. // subOpen {number}, defines the time in ms the second-level item opens its sub-menu once the cursor hovers it (it is applied to any level excepts the top-level). // subClose {number}, defines the time in ms the sub-menu is closed once the cursor hovers the second-level item (it is applied to any level excepts the top-level). // outClose {number}, defines the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu. // popupRatio {number}, defines a positive number that specifies the maximum ratio of the document's view page, a float or a popup menu can be shown. // closeOnClick {exontrol.Menu.CloseOnClickEnum}, defines the type of items the user can click to close the float-menu(s). // alignClient {boolean}, specifies whether the item's client position is aligned to sub-item client position, when a float-menu is displayed. // alignContextMenu {exontrol.Menu.AlignContextMenuEnum}, defines the horizontal and vertical position of the context/shortcut-menu relative to the x, y coordinates // allowToggleRadio {boolean}, allows or prevents toggling the radio state // x {number}, specifies the horizontal position to show the context/shortcut-menu relative to the document. // y {number}, specifies the vertical position to show the context/shortcut-menu relative to the document. // /////////////////////////////////////////////////////////// /** * @description The exontrol.Def.Menu namespace provides definitions for different objects, primitives, objects of exontrol.Menu object */ exontrol.Def.Menu = {
/** * @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} Specifies whether the control is protected. * @example * * false {boolean}, unlocks the control (can select any item) * true {boolean}, locks the control (can't select any item) */   locked: false,
/** * @description The readOnly field indicates whether the control is read-only * @type {boolean} * @example * * false {boolean}, the user can select or check any item * true {boolean}, the user can not select or check the items */   readOnly: false,
/** * @description The debug field indicates whether the control displays debug-information * @type {boolean} Specifies whether the control is in debug-mode. * @example * * false {boolean}, no debug-information is displayed * true {boolean}, debug-information is displayed for each item (usually the item's identifier) */   debug: false,
/** * @description The wheelChange field specifies the amount the control scrolls when the user rolls the mouse wheel. * @type {number} Specifies the amount the control scrolls when the user rolls the mouse wheel. * @example * * 0 {number}, locks any action the mouse's wheel performs * 1 {number}, indicates that the scrollOpt.wheelChange property is applied for 1-time when user rotates the mouse wheel. Changes the scrollOpt.wheelChange property to provide a different step to scroll once the user rotates the mouse wheel */   wheelChange: 1,
/** * @description The items field defines the items of the menu from a string-representation. * @type {string} Indicates the items the control. * * The format of the items'string representation is (everything between () refers to children, and everything between [] refers to flags): * * "item1[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value]),...,itemn[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value])" * * The string-representation supports the following flags: * * [id], specifies the item's identifier, such as [id=10]. * [align] {number}, horizontally aligns the caption. The align could be -1(full-fits the item), 0(left-alignment), 1(center), or 2( right-alignment) such as [align=2] right-aligns the item. * [pad], specifies the item's padding (space between the menu border and the item content). The pad could be one or two numbers, separated by comma, such as [pad=2] or [pad=2,2] * [itemsPad], specifies the items padding (space between the menu border and the item content). The itemsPad could be one or two numbers, separated by comma, such as [itemsPad=2] or [itemsPad=2,2] * [chk], indicates that the item has a check-box associated. If the [typ] flag is present, the [chk] flag indicates the state of the item, and the [rad] flag is ignored. The chk could be 0 or 1, such as [chk] or [chk=0] for a un-checked item, or [chk=1] for checked item. * [rad], indicates that the item has a radio-button associated. If the [typ] flag is present, the [chk] flag indicates the state of the item, and the [rad] flag is ignored. The rad could be 0 or 1, such as [rad] or [rad=0] for a un-checked item, or [rad=1] for checked item. * [typ], specifies the type of the item, that can be normal, check or radio. The typ could be 0(normal item), 1(items that display a check/box (chk)) or 2(items that display radio buttons (rad)). If the [typ] flag is present, the [chk] flag indicates the state of the item, and the [rad] flag is ignored. For instance [typ=1], specifies a check-box item * [grp], defines the radio group. It should be used when you define more groups of radio buttons. A group of radio buttons means that only one item could be checked at one time. The rad option specifies that the item displays a radio button. Use the grp option to define the group of radio where this button should be associated, If no group of radio buttons is required, the grp could be ignored. For instance, [grp=sample] * [img], indicates that the item's image. The img indicates the name of an exontrol.HP, such as [img=logo] * [group], specifies how the sub-items are being grouped. The group could be a flag combination of exontrol.Menu.GroupPopupEnum type, such as [group] to group horizontlly the item, or [group=0x100] to group vertically the items * [arrow], indicates whether the item's popup-arrow is shown or hidden. The arrow could be 0 to hide the arrow, or not-zero to show the arrow, such as [arrow] or [arrow=0] to hide the arrow, or [arrow=1] to show the arrow * [hid], hides/shows the item. The hid could be 0 which indicates that the item is hidden. Any other value makes the item visible, such as [hid] or [hid=0] to hide the item, or [hid=1] to show the item * [captionWidth] or [cw], specifies the width to show the HTML caption of the item, where value could be a integer expression. A negative value indicates that no limitation is applied to the item's caption, so no truncate caption is shown. For instance [cw=128] * [captionHeight] or [ch], specifies the height to show the HTML caption of the item, where value could be a integer expression. A negative value indicates that no limitation is applied to the item's caption, so no truncate caption is shown. For instance [ch=128] * [height], specifies the height to display the item, where value could be a integer expression (it applies to all parts of the item). For instance [height=64] * [width], specifies the width to display the item, where value could be a integer expression (it applies to all parts of the item). For instance [width=64] * [button], associates a button with the item. The value could be a flag combination of exontrol.Menu.ShowAsButtonEnum type, such as [button] or [button=1] makes the item to displat a button, or [button=0] disables displaying any button. * [spchk], indicates whether the sub-items/popup of giving item are shown when the item is checked. The value could be 0, which indicates that it has no effect, or non-zero to show the sub-item when the item is checked. For instance [spchk] * [show], specifies how an item that has a check-box/radio-button should be displayed. The value could be any value of exontrol.Menu.ShowCheckedAsSelectedEnum type. For instance [show=-1] (the exDisplayItemCheckHighlight value highlights the checked item) * [showdis], makes the item to show as disabled, while it is still enabled. The flag is applied to all descendents. Any value not-zero indicates that the item is shown as disabled. For instance [showdis] * [tab], indicates the identifier of the item that displays the sub-items of the current item. For instance: [tab=page] or [tab=1] * [dis], disables the item. The flag is applied to all descendents. Any value not-zero indicates that the item is enabled. For instance [dis] * [sep], specifies an separator item, such as [sep]. The value is ignored if provided. For instance [sep] * [popupalign] or [pa], indicates how the sub-menu/popup/float is aligned relative to the parent item (exontrol.Menu.ShowPopupAlignEnum). For instance [pa=1] (The exShowPopupAlignDown value indicates that the sub-menu/popup is shown down-aligned relative to the parent item) * [shapes], specifies the shapes to be applied on the item only. For instance [shapes=dfitem(item),dfcap(cap)] * [cursors], defines the mouse cursor to be displayed when pointing over a part of the item only. For instance [cursors=pointer(item)] * [close], specifies whether clicking the item closes the float-menu (exontrol.Menu.CloseOnClickEnum). For instance [close=-1], closes the context-menu once the user clicks the items (no matter, if it is of check, radio or button type) * * @example * * "" {string}, clears the items collection * "Popup(A,B,C)" {string}, adds a popup-item with three sub-items A, B and C * "Popup[group](A,B,C)" {string}, adds an item with three sub-items A, B and C, and all items are visible and displayed as an horizontally group * "Popup[group][chk][spchk](A,B,C)" {string}, adds an item with three sub-items A, B and C, but A, B and C sub-items are visible and displayed only if the popup is checked */   items: null,
/** * @description The criSize field specifies the size (width and height) to show a check-box/radio-button or the item's image * @type {number} A value that specifies the size (width and height) to show a check-box/radio-button or the item's image * @example * * 16 {number}, indicates that any check-box, radio or image uses a 16x16 rectangle to display it within the item */   criSize: 16,
/** * @description The criPad field indicates the padding to apply to a check-box/radio-button or the item's image. * @type {(number|string|array)} 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 * @example * * 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 */   criPad: [0,0],
/** * @description The criAlign field specifies whether the check-box/radio-button or the item's image are vertically aligned. * @type {boolean} specifies whether the check-box/radio-button or the item's image are vertically aligned * * The criAlign property has effect, if the control's criFlat is exNormal. * * @example * * false {boolean}, check-box/radio-button or the item's image is not vertically aligned * true {boolean}, check-box/radio-button or the item's image is vertically aligned */   criAlign: false,
/** * @description The criFlat field indicates whether the menu's flat bar is shown or hidden * @type {exontrol.Menu.FlatEnum} specifies whether the menu's flat bar is visible or hidden. * * The exontrol.Menu.FlatEnum type supports the following values: * * exNormal (0), indicates that the menu's flat bar is not shown * exShowFlat (1), indicates that the menu's flat bar is visible only if the menu contains items with check, radio or image * exAlwaysFlat (2), indicates that the menu's flat bar is always visible * * @example * * 2 or exontrol.Menu.FlatEnum.exAlwaysFlat {number}, defines a flat-menu */   criFlat: exontrol.Menu.FlatEnum.exNormal,
/** * @description The pad field defines the item's padding (space between the menu border and the item content) * @type {(number|string|array)} 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 * @example * * 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: [4,4],
/** * @description The itemsPad field defines the padding the sub-items section of the item (space between the menu border and the items content) * @type {(number|string|array)} 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 * @example * * 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 */   itemsPad: [0,0],
/** * @description The align field horizontally aligns the item's caption. * @type {number} Indicates a numeric value that specifies the alignment of the item's caption. * * The align property can be any of the following values: * * -1 {number}, specifies that the item's caption full-fits the item's background. You can use the <c> or <r> ex-HTML tags to align portions of caption inside the item * 0 {number}, indicates that the caption is left-aligned * +1 {number}, specifies that the caption is centered * +2 {number}, specifies that the caption is right-aligned * * @example * * 2 {number}, right aligns the item's caption */   align: -1,
/** * @description The arrSize field specifies the size (width and height) to show the item's arrow. * @type {number} A value that specifies the size (width and height) to show the item's arrow. * * The item's arrow is displayed only for popup-items, or items that contains sub-items or child-items. * * @example * * 0 {number}, indicates that no arrow is shown * 6 {number}, indicates that the arrow is displayed into a square of 6x6 pixels */   arrSize: 6,
/** * @description The arrangeItemsAs field specifies how the items are arranged on the control (top-level menu). * @type {exontrol.Menu.ArrangeItemsEnum} A combination of one or more ArrangeItemsEnum flags that specifies how the items are arranged on the control (top-level menu). * * The exontrol.Menu.ArrangeItemsEnum type supports the following flags: * * exArrangeItemsHorizontal (1), specifies that the items are horizontally arranged from left to right * exArrangeItemsVertical (2), specifies that the items are vertically arranged from top to bottom * exArrangeItemsHideTopArrow (0x10), indicates that the arrow for any top-item is not visible (not valid for float-menu) * exArrangeItemsPopupAlign (0x20), specifies that the item's float/popup-menu should be displayed to prevent overlapping other items * exArrangeItemsWrap (0x100), wraps items on a new row/column (not valid for float-menu) * exArrangeItemsScroll (0x200), specifies that the control's scroll bar is displayed if required * exArrangeItemsAlignCenter (0x400), centers the items on each row/column * exArrangeItemsAlignReverse (0x800), reverses the alignment of the items * * @example * * 561 or exontrol.Menu.ArrangeItemsEnum.exArrangeItemsHideTopArrow | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsHorizontal | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign {number}, arranges horizontally all items of top-level menu */   arrangeItemsAs: exontrol.Menu.ArrangeItemsEnum.exArrangeItemsVertical | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign,
/** * @description The subArrangeItemsAs field specifies how the items are arranged on the float-menu. * @type {exontrol.Menu.ArrangeItemsEnum} A ArrangeItemsEnum expression that specifies how the items are arranged arranged on the float-menu. * * The exontrol.Menu.ArrangeItemsEnum type supports the following flags: * * exArrangeItemsHorizontal (1), specifies that the items are horizontally arranged from left to right * exArrangeItemsVertical (2), specifies that the items are vertically arranged from top to bottom * exArrangeItemsHideTopArrow (0x10), indicates that the arrow for any top-item is not visible (not valid for float-menu) * exArrangeItemsPopupAlign (0x20), specifies that the item's float/popup-menu should be displayed to prevent overlapping other items * exArrangeItemsWrap (0x100), wraps items on a new row/column (not valid for float-menu) * exArrangeItemsScroll (0x200), specifies that the control's scroll bar is displayed if required * exArrangeItemsAlignCenter (0x400), centers the items on each row/column * exArrangeItemsAlignReverse (0x800), reverses the alignment of the items * * @example * * 257 or exontrol.Menu.ArrangeItemsEnum.exArrangeItemsHorizontal | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsWrap {number}, wraps items within the float-menu * 546 or exontrol.Menu.ArrangeItemsEnum.exArrangeItemsVertical | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign {number}, arranges vertically the items within the float-menu */   subArrangeItemsAs: exontrol.Menu.ArrangeItemsEnum.exArrangeItemsVertical | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign,
/** * @description The sepSize field specifies the size to show a separator item. * @type {number} A value that specifies the size to display a separator item. * @example * * 0 {number}, hides all separator items ([sep]) * 4 {number}, specifies the separator items of 4-pixels size */   sepSize: 1,
/** * @description The btnPad field defines the button's padding (space between the button border and the item content) * @type {(number|string|array)} 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 * @example * * 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 */   btnPad: [2,2],
/** * @description The btnArrSize field specifies the size (width and height) to show the button's arrow. * @type {number} A value that specifies the size (width and height) to show the button's arrow. * * The item's arrow is displayed only items that contains sub-items or child-items, while it is of [button] type * * @example * * 0 {number}, indicates that no arrow is shown for an item of button type ([button]) * 6 {number}, indicates that the arrow is displayed into a square of 6x6 pixels */   btnArrSize: 6,
/** * @description The show field defines how an item that has a check-box/radio button is displayed. * @type {exontrol.Menu.ShowCheckedAsSelectedEnum} Specifies a value of exontrol.Menu.ShowCheckedAsSelectedEnum, that defines how an item that has a check-box/radio button is displayed. * * The exontrol.Menu.ShowCheckedAsSelectedEnum type defines the following values: * * exDisplayItemCheckDefault (0), indicates that no highlight is applied to the item's check/radio * exDisplayItemCheckHighlight (-1), highlights the checked item * exDisplayItemHighlight (1), highlights the checked item, but hides the item's check/radio button * * @example * * 1 (exontrol.Menu.ShowCheckedAsSelectedEnum.exDisplayItemHighlight) {number}, specifies that any checked-item gets highlighted, by not showing the item's check/radio button */   show: exontrol.Menu.ShowCheckedAsSelectedEnum.exDisplayItemCheckDefault,
/** * @description The scrollSize field specifies the size (width/height) of the control's scroll bar * @type {number} Indicates the size of the control's scroll bar * @example * * 0 {number}, hides the menu's scroll-bar but scrolling it is still posible by drag. Click an item and drag outside the margins so the menu gets scrolled * 6 {number}, defines a 6-pixels wide scroll bar */   scrollSize: 8,
/** * @description The scrollClip field specifies whether the control's scroll bar is clipped * @type {boolean} Specifies whether the control's scroll bar is clipped * @example * * false {boolean}, the scroll is not clipped, so it is shown over the menu * true {boolean}, the scroll and items portions of the menu are separatly */   scrollClip: false,
/** * @description The scrollOpt field specifies the options (UI visual appearance, behavior) to display the control's scroll bar. * @type {exontrol.ScrollBar.Options} Specifies the options (UI visual appearance, behavior) to display the control's scroll bar. */ scrollOpt: {
/** * @description The visibleParts fields defines the visible parts of the scroll bar, separated by comma. * @type {string} Indicates the parts of the scroll bar that are visible. * * The parts of the control are: * * "l" (exLeftBPart, <) indicates the left or top button of the scroll bar * "l1" (exLeftB1Part) indicates the first additional button, in the left or top area * "l2" (exLeftB2Part) indicates the second additional button, in the left or top area * "l3" (exLeftB3Part) indicates the third additional button, in the left or top area * "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area * "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area * "t" (thumb), indicates the scroll's thumb * "r" (exRightBPart, >) indicates the right or down button * "r1" (exRightB1Part) indicates the first additional button in the right or down side * "r2" (exRightB2Part) indicates the second additional button in the right or down side * "r3" (exRightB3Part) indicates the third additional button in the right or down side * "r4" (exRightB4Part) indicates the forth additional button in the right or down side * "r5" (exRightB5Part) indicates the fifth additional button in the right or down side * "r6" (exRightB6Part) indicates sixth additional button in the right or down side * * There are three additional parts (automatically computed) as: * * "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb) * "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button) * "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts) * * Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on. * * @example * * null {null}, specifies that the exontrol.Def.ScrollBar.visibleParts field defines the visibleParts property. By default, the exontrol.Def.ScrollBar.visibleParts is "l,t,r,b", which indicates that only "left-button", "thumb", "right-button" and "background" parts are visible * "t,b" {string}, indicates that only "thumb", "background" parts are visible */   visibleParts: "t,b",
/** * @description The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. * @type {string} 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: * * "l" (exLeftBPart, <) indicates the left or top button of the scroll bar * "l1" (exLeftB1Part) indicates the first additional button, in the left or top area * "l2" (exLeftB2Part) indicates the second additional button, in the left or top area * "l3" (exLeftB3Part) indicates the third additional button, in the left or top area * "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area * "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area * "t" (thumb), indicates the scroll's thumb * "r" (exRightBPart, >) indicates the right or down button * "r1" (exRightB1Part) indicates the first additional button in the right or down side * "r2" (exRightB2Part) indicates the second additional button in the right or down side * "r3" (exRightB3Part) indicates the third additional button in the right or down side * "r4" (exRightB4Part) indicates the forth additional button in the right or down side * "r5" (exRightB5Part) indicates the fifth additional button in the right or down side * "r6" (exRightB6Part) indicates sixth additional button in the right or down side * "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb) * "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button) * "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts) * * @example * * null {null}, indicates that the exontrol.Def.ScrollBar.cursors field defines the cursors property. By default, the exontrol.Def.ScrollBar.cursors is "auto(l1,l2,l3,l4,l5,l,lo,t,up,r,r1,r2,r3,r4,r5,r6)", or the "auto" mouse cursor is displayed for any part of the control * "crosshair(lo,up,b),pointer(t)" {string}, indicates that the "crosshair" mouse cursor is shown once the cursor hovers the control "upper", "lower" or "background" part, and "pointer" mouse cursor while cursor hovers the "thumb" part */   cursors: "pointer(t,lo,b,up)",
/** * @description The horizonalShapes field defines the shapes each part of the control applies, when the scroll-bar's mode is exHorizontal. * @type {string} Defines the shapes to be applied to parts of the scroll bar, when the scroll-bar's mode is exHorizontal. * * The format of horizonalShapes property is: * * "shape(part),shape(part),..." * * where: * * "shape", defines the name of the property of exontrol.Shapes.ScrollBar.background/exontrol.Shapes.ScrollBar.foreground object to be applied on the part * "part", defines the name of the part the shape is applied on (as defined bellow) * * The horizonalShapes property supports any of the following parts: * * "l" (exLeftBPart, <) indicates the left or top button of the scroll bar * "l1" (exLeftB1Part) indicates the first additional button, in the left or top area * "l2" (exLeftB2Part) indicates the second additional button, in the left or top area * "l3" (exLeftB3Part) indicates the third additional button, in the left or top area * "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area * "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area * "t" (thumb), indicates the scroll's thumb * "r" (exRightBPart, >) indicates the right or down button * "r1" (exRightB1Part) indicates the first additional button in the right or down side * "r2" (exRightB2Part) indicates the second additional button in the right or down side * "r3" (exRightB3Part) indicates the third additional button in the right or down side * "r4" (exRightB4Part) indicates the forth additional button in the right or down side * "r5" (exRightB5Part) indicates the fifth additional button in the right or down side * "r6" (exRightB6Part) indicates sixth additional button in the right or down side * "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb) * "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button) * "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts) * * @example * * null {null}, specifies that the exontrol.Def.ScrollBar.horizonalShapes field defines the horizonalShapes property. By default, the exontrol.Def.ScrollBar.horizonalShapes is "hThumbLite(t)". * "hThumbLite(t)" {string}, defines a lite-scroll, or shotly it applies the exontrol.Shapes.ScrollBar.background.hThumbLite and exontrol.Shapes.ScrollBar.foreground.hThumbLite on "thumb" part * "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumb(t),back(lo,b,up)" {string}, defines a rectangular-scroll * "buttonCircle(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumbCircle(t),hBackCircle(b)" {string}, defines a circular-scroll * "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6)" {string} indicates that all l1-r6 applies the exontrol.Shapes.ScrollBar.background.button and exontrol.Shapes.ScrollBar.foreground.button shapes. */   horizonalShapes: "tRange(t),range(b)",
/** * @description The verticalShapes field defines the shapes each part of the control applies, when the scroll-bar's mode is exVertical. * @type {string} Defines the shapes to be applied to parts of the scroll bar, when the scroll-bar's mode is exVertical. * * The format of verticalShapes property is: * * "shape(part),shape(part),..." * * where: * * "shape", defines the name of the property of exontrol.Shapes.ScrollBar.background/exontrol.Shapes.ScrollBar.foreground object to be applied on the part * "part", defines the name of the part the shape is applied on (as defined bellow) * * The verticalShapes property supports any of the following parts: * * "l" (exLeftBPart, <) indicates the left or top button of the scroll bar * "l1" (exLeftB1Part) indicates the first additional button, in the left or top area * "l2" (exLeftB2Part) indicates the second additional button, in the left or top area * "l3" (exLeftB3Part) indicates the third additional button, in the left or top area * "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area * "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area * "t" (thumb), indicates the scroll's thumb * "r" (exRightBPart, >) indicates the right or down button * "r1" (exRightB1Part) indicates the first additional button in the right or down side * "r2" (exRightB2Part) indicates the second additional button in the right or down side * "r3" (exRightB3Part) indicates the third additional button in the right or down side * "r4" (exRightB4Part) indicates the forth additional button in the right or down side * "r5" (exRightB5Part) indicates the fifth additional button in the right or down side * "r6" (exRightB6Part) indicates sixth additional button in the right or down side * "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb) * "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button) * "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts) * * @example * * null {null}, specifies that the exontrol.Def.ScrollBar.verticalShapes field defines the verticalShapes property. By default, the exontrol.Def.ScrollBar.verticalShapes is "vThumbLite(t)". * "vThumbLite(t)" {string}, defines a lite-scroll, or shotly it applies the exontrol.Shapes.ScrollBar.background.vThumbLite and exontrol.Shapes.ScrollBar.foreground.vThumbLite on "thumb" part * "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumb(t),back(lo,b,up)" {string}, defines a rectangular-scroll * "buttonCircle(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumbCircle(t),vBackCircle(b)" {string}, defines a circular-scroll * "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6)" {string} indicates that all l1-r6 applies the exontrol.Shapes.ScrollBar.background.button and exontrol.Shapes.ScrollBar.foreground.button shapes. */   verticalShapes: "tRange(t),range(b)",
/** * @description The wheelChange field specifies the amount by which the scroll box position changes when the user rotates the mouse wheel. * @type {number} Specifies the amount by which the scroll box position changes when the user rotates the mouse wheel. * @example * * null {null}, specifes that the exontrol.Def.ScrollBar.wheelChange field defines the smallChange property. By default, the exontrol.Def.ScrollBar.wheelChange is 1. * 0 {number}, no change while the user rotates the mouse wheel. * 1 {number}, increases or decreases the scroll's value by 1 when the user rotates the mouse wheel */   wheelChange: 16,
},
/** * @description The smoothSel field defines the time in ms the control's selection goes from one state to another. * @type {number} Indicates the time in ms the control's selection goes from one state to another. * @example * * 0 {number}, no smooth changes once the user selects a new item * 125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms. */   smoothSel: 125,
/** * @description The shapes field defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. * @type {string} 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.Menu object (while it starts with a lowercase letter, such as dfitem which refers to exontrol.Shapes.Menu.dfitem 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: * * "menu" (menu), defines the visual appearance for the entire menu * "flat" (flat), defines the visual appearance for menu's flat bar (usually shown in the left side of the menu) * "sep" (separator), defines the visual appearance to display separator-items * "item" (item), defines the visual appearance for the item's background. It covers all parts of the item as check, image, caption/button, popup arrow and sub-items * "sub" (sub-items), defines the visual appearance to display sub-items of the item (while the item is grouped) * "arr" (arrow), defines the visual appearance to display item's arrow (while the item contains un-grouped sub-items) * "cap" (caption), defines the visual appearance for the item's caption * "img" (image), defines the visual appearance to display the item's image * "chk" (check), defines the visual appearance to display the item's check-box * "rad" (radio), defines the visual appearance to display the item's radio-button * "btn" (button), defines the visual appearance to display the buttons * "rarr" (right-arrow), defines the visual appearance to display button's arrow (to right) * "barr" (bottom-arrow), defines the visual appearance to display button's arrow (to bottom) * * @example * * null {null}, specifies the default visual appearance * "" {string}, no shape (no visual appearance is applied to any part of the control) * "red(item)", "#FF0000(item)", "rgb(255,0,0)(item)", "rgba(255,0,0,1)(item)" {string}, shows all-items in red * '{"hover":{"frameColor":"black","pad":-0.5}}(item)' {string}, draws a black-frame arround the item being hovered * "xxx(d),yyy(d,m),zzz(y)" {string}, specifies that the exontrol.Shapes.Menu.xxx combined with exontrol.Shapes.Menu.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Menu.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Menu.zzz object defines the visual appearance of "y" part of the control */   shapes: "shitem(item),shcap(cap),shsub(sub),shradio(rad),shcheck(chk),shflat(flat),shsep(sep),shbutton(btn),sharrow(arr,rarr,barr),shbarrow(barr)",
/** * @description The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. * @type {string} 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 below) * * The cursors property supports any of the following parts: * * "menu" (menu), defines the mouse-cursor to show when the mouse pointer hovers the entire menu * "flat" (flat), defines the mouse-cursor to show when the mouse pointer hovers menu's flat bar (usually shown in the left side of the menu) * "sep" (separator), defines the mouse-cursor to show when the mouse pointer hovers the separator-items * "item" (item), defines the mouse-cursor to show when the mouse pointer hovers the item's background. It covers all parts of the item as check, image, caption/button, popup arrow and sub-items * "sub" (sub-items), defines the mouse-cursor to show when the mouse pointer hovers the sub-items of the item (while the item is grouped) * "arr" (arrow), defines the mouse-cursor to show when the mouse pointer hovers the item's arrow (while the item contains un-grouped sub-items) * "cap" (caption), defines the mouse-cursor to show when the mouse pointer hovers the item's caption * "img" (image), defines the mouse-cursor to show when the mouse pointer hovers the item's image * "chk" (check), defines the mouse-cursor to show when the mouse pointer hovers the item's check-box * "rad" (radio), defines the mouse-cursor to show when the mouse pointer hovers the item's radio-button * "btn" (button), defines the mouse-cursor to show when the mouse pointer hovers the buttons * "rarr" (right-arrow), defines the mouse-cursor to show when the mouse pointer hovers the button's arrow (to right) * "barr" (bottom-arrow), defines the mouse-cursor to show when the mouse pointer hovers the button's arrow (to bottom) * "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the <a> ex-HTML part marks an anchor or hyperlink element) (@since 2.2) * * @example * * "" {string}, no mouse cursor support * "pointer(chk,rad,btn)" {string}, indicates that the "pointer" mouse cursor is shown once the cursor hovers the "chk", "rad" or "btn" parts of the control */   cursors: "pointer(chk,rad,btn,anchor)",
/** * @description The open field defines the time in ms the top-level item opens its sub-menu once the cursor hovers it. * @type {number} Indicates the time in ms the top-level item opens its sub-menu once the cursor hovers it. * * The value of open property can be any of the following: * * if positive, indicates the time in ms the top-level item opens its sub-menu once the cursor hovers it. * if 0, indicates that the top-level item opens its sub-menu as soon as cursor hovers it * if negative, indicates that the item requires click to to open its sub-menu * * @example * * 0 {number}, indicates that the top-level item opens its sub-menu as soon as cursor hovers it. * -1 {number}, indicates that the top-level item opens its sub-menu as soon as user clicks it. */   open: -1,
/** * @description The close field defines the time in ms the sub-menu is closed once the cursor hovers the top-level item. * @type {number} Indicates the time in ms the sub-menu is closed once the cursor hovers the top-level item. * * The value of close property can be any of the following: * * if positive, indicates the time in ms the sub-menu is closed once the cursor hovers the top-level item. * if 0, indicates that the sub-menu is closed as soon as the cursor hovers a top-level item * if negative, it has no effect * * @example * * 0 {number}, indicates that the sub-menu is closed as soon as the cursor hovers a top-level item. * 350 {number}, the sub-menu is closed once 350 ms ellapsed after the cursor hovers a top-level item. */   close: 0,
/** * @description The subOpen field defines the time in ms the second-level item opens its sub-menu once the cursor hovers it (it is applied to any level excepts the top-level). * @type {number} Indicates the time in ms the second-level item opens its sub-menu once the cursor hovers it. * * The value of subOpen property can be any of the following: * * if positive, indicates the time in ms the item opens its sub-menu once the cursor hovers it. * if 0, indicates that the item opens its sub-menu as soon as the cursor hovers it * if negative, it has no effect so the item requires click in order to open its sub-menu * * @example * * 0 {number}, indicates that the item opens its sub-menu as soon as the cursor hovers it * -1 {number}, indicates that the item's sub-menu is opened once the user clicks it */   subOpen: 350,
/** * @description The subClose field defines the time in ms the sub-menu is closed once the cursor hovers the second-level item (it is applied to any level excepts the top-level). * @type {number} Indicates the time in ms the sub-menu is closed once the cursor hovers the second-level item. * * The value of subClose property can be any of the following: * * if positive, indicates the time in ms the sub-menu is closed once the cursor hovers the second-level item * if 0, indicates that the sub-menu is closed as soon as the cursor hovers a second-level item * if negative, it has no effect * * @example * * 0 {number}, indicates that the sub-menu is closed as soon as the cursor hovers a second-level item * 350 {number}, the sub-menu is closed once 350 ms ellapsed after the cursor hovers the second-level item */   subClose: 500,
/** * @description The outClose field defines the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu. * @type {number} Indicates the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu. * * The value of outClose property can be any of the following: * * if positive, specifies the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu * if 0, indicates that the menu's floats are closed as soon as the cursor hovers outside portion of it * if negative, it has no effect * * @example * * 0 {number}, indicates that the menu's floats are closed as soon as the cursor hovers outside portion of it * 350 {number}, the control's float-menus are closed once 350 ms ellapsed after the cursor hovers outside portion of the menu */   outClose: 500,
/** * @description The popupRatio field defines a positive number that specifies the maximum ratio of the document's view page, a float or a popup menu can be shown. * @type {number} Indicates a positive number that specifies the maximum ratio of the document's view page, a float or a popup menu can be shown. * * For instance, 1/2 indicates that the width / height of the float-menu can not exceed half of the width / height of the document's view page. * * @example * * 0 {number}, indicates that the size of the float-menu is not influenced by the document's view size, so it will be displayed entirely as it is * 0.5 {number}, indicates that the width / height of the float-menu can not exceed half of the width / height of the document's view page (control's scroll is automatically added if exArrangeItemsScroll flag is specified) */   popupRatio: 1/2,
/** * @description The closeOnClick field defines the type of items the user can click to close the float-menu(s). * @type {exontrol.Menu.CloseOnClickEnum} Indicates a combination of one or more exontrol.Menu.CloseOnClickEnum flags that specifies the type of items the user can click to close the float-menu(s). * * The exontrol.Menu.CloseOnClickEnum type defines the following flags: * * exCloseOnDefault (0), indicates that the float-menu is closed once the user clicks an enabled item with no check, radio or button associated * exCloseOnDisabled (1), specifies that the float-menu is closed once the user clicks a disabled item * exCloseOnSeparator (2), specifies that the float-menu is closed once the user clicks a separator item * exCloseOnButton (4), specifies that the float-menu is closed once the user clicks an item of button-type * exCloseOnCheck (8), specifies that the float-menu is closed once the user clicks an item of check-type * exCloseOnRadio (16), specifies that the float-menu is closed once the user clicks an item of radio-type * exCloseOnState (24), specifies that the float-menu is closed once the user clicks an item of check or radio-type * exCloseOnAny (-1), specifies that the float-menu is closed once the user clicks any type of item anywhere * * @example * * 0 or exontrol.Menu.CloseOnClickEnum.exCloseOnDefault {number}, specifies that the float-menu is closed once the user clicks an enabled item with no check, radio or button associated * -1 or exontrol.Menu.CloseOnClickEnum.exCloseOnAny {number}, specifies that the float-menu is closed once the user clicks any type of item anywhere */   closeOnClick: exontrol.Menu.CloseOnClickEnum.exCloseOnDefault,
/** * @description The alignClient field specifies whether the item's client position is aligned to sub-item client position, when a float-menu is displayed. * @type {boolean} Indicates whether the item's client position is aligned to sub-item client position, when a float-menu is displayed. * @example * * false {boolean}, specifies that the item and its sub-items are not vertically aligned (when a popup is opened) * true {boolean}, specifies that the item and its sub-items are vertically aligned (when a popup is opened) */   alignClient: false,
/** * @description The alignContextMenu field defines the horizontal and vertical position of the context/shortcut-menu relative to the x, y coordinates. * @type {exontrol.Menu.AlignContextMenuEnum} Indicates the horizontal and vertical position of the context/shortcut-menu relative to the x, y coordinates. * * The exontrol.Menu.AlignContextMenuEnum type defines the following flags: * * exLeftAlign (0x00), positions the shortcut menu so that its left side is aligned with the coordinate specified by the x parameter * exCenterAlign (0x04), centers the shortcut menu horizontally relative to the coordinate specified by the x parameter * exRightAlign (0x08), positions the shortcut menu so that its right side is aligned with the coordinate specified by the x parameter * exTopAlign (0x00), positions the shortcut menu so that its top side is aligned with the coordinate specified by the y parameter * exVCenterAlign (0x10), centers the shortcut menu vertically relative to the coordinate specified by the y parameter * exBottomAlign (0x20), positions the shortcut menu so that its bottom side is aligned with the coordinate specified by the y parameter * * The alignContextMenu property has effect only, if the control is opened as a context-menu, using the Open() method. * * @example * * 0 or exontrol.Menu.AlignContextMenuEnum.exLeftAlign | exontrol.Menu.AlignContextMenuEnum.exTopAlign {number}, the context-menu is shown aligned to x and y properties * 20 or exontrol.Menu.AlignContextMenuEnum.exCenterAlign | exontrol.Menu.AlignContextMenuEnum.exVCenterAlign {number}, centers the context-menu relative to x and y properties * 32 or exontrol.Menu.AlignContextMenuEnum.exLeftAlign | exontrol.Menu.AlignContextMenuEnum.exBottomAlign {number}, opens the context-menu right to the x and y properties */   alignContextMenu: exontrol.Menu.AlignContextMenuEnum.exLeftAlign | exontrol.Menu.AlignContextMenuEnum.exTopAlign,
/** * @description The allowToggleRadio field allows or prevents toggling the radio state * @type {boolean} Specifies whether an item of radio-type toggles its state once it is clicked. * * @example * * false {boolean}, no radio-item toggles its state (once the user clicks a checked radio-item, it stays checked (state on 1)) * true {number}, any radio-item toggles its state (once the user clicks a checked radio-item, it gets unchecked (state on 0)) */   allowToggleRadio: false,
/** * @description The x field defines the horizontal position to display the context/shortcut-menu relative to the document. * @type {number} Indicates the horizontal position to display the context/shortcut-menu relative to the document. * * The x property has effect only, if the control is opened as a context-menu, using the Open() method. * * @example * * event.pageX {number}, The pageX read-only property of the MouseEvent(event) interface returns the X (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document. */   x: null,
/** * @description The y field defines the vertical position to display the context/shortcut-menu relative to the document. * @type {number} Indicates the vertical position to display the context/shortcut-menu relative to the document. * * The y property has effect only, if the control is opened as a context-menu, using the Open() method. * * @example * * event.pageY {number}, The pageY read-only property of the MouseEvent(event) interface returns the Y (vertical) coordinate in pixels of the event relative to the whole document. */   y: null
} /////////////////////////////////////////////////////////// (exontrol.Shapes.Menu) // // The exontrol.Shapes.Menu namespace provides support to customize the visual appearance of different parts of the exontrol.Menu object. // /////////////////////////////////////////////////////////// /** * @description The exontrol.Shapes.Menu namespace provides support to customize the visual appearance of different parts of the exontrol.Menu object. */ exontrol.Shapes.Menu = exontrol.DfO( exontrol.Shapes.Menu /*inherits the default exontrol.Shapes.Menu like dfitem, ... */, { shitem: {
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   frameColor: "rgba(0,0,0,0.05)",
},
/** * @description The disabled field holds an object of exontrol.Def.Shape type that's applied on the part (while it is disabled). * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part (while it is disabled). */ disabled: {
  opacity: 0.5,
},
/** * @description The checked field holds an object of exontrol.Def.Shape type that's applied on the part (while it is checked and the item's show is not-zero). * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part (while it is checked and the item's show is not-zero). */ checked:
{
y doc checked' user-option='exontrol.Shapes.Menu:shitem.checked.frameColor'>  frameColor: "rgba(64,128,255,0.50)",
xontrol.Shapes.Menu'>  fillColor: "rgba(64,128,255,0.25)",
  pad: -1
},
/** * @description The hover field holds an object of exontrol.Def.Shape type that's applied on the part, while the cursor hovers it. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part, while the cursor hovers it. */ hover: {   frameColor: "rgba(64,128,255,0.50)",
  fillColor: "rgba(64,128,255,0.10)",
  pad: -1,
  primitive: "BevelRect",
pArg: {   x: 2,
  y: 2
}
},
/** * @description The click field holds an object of exontrol.Def.Shape type that's applied on the part, while it is clicked * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part, while it is clicked */ click: {   frameColor: "rgba(64,128,255,0.50)",
  fillColor: "rgba(64,128,255,0.25)",
  pad: -1
},
/** * @description The open field holds an object of exontrol.Def.Shape type that's applied on the part, while the item's float-menu is opened. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part, while the item's float-menu is opened. */ open: {   frameColor: "rgba(64,128,255,0.50)",
  fillColor: "rgba(64,128,255,0.25)",
  pad: -1
} }, shcap: {
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   formatText: exontrol.DrawTextFormatEnum.exTextWordEllipsis
} },
shsub:
{
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   pad: -1,
  frameColor: "rgba(0,0,0,0.25)",
  primitive: "RoundRect"
} }, shsep: {
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   fillColor: "rgba(0,0,0,0.20)",
} },
shbutton:
{
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   pad: -1,
  fillColor: "rgb(192,192,192)",
  frameColor: "rgb(128,128,128)",
},
/** * @description The click field holds an object of exontrol.Def.Shape type that's applied on the part, while it is clicked * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part, while it is clicked */ click: {   fillColor: "rgb(164,164,164)",
  frameColor: "rgb(80,80,80)",
}
xontrol.Shapes.Menu'> },
shflat:
{
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   pad: -1,
  fillColor: "rgba(0,0,0,0.10)",
  frameColor: "rgba(0,0,0,0.5)",
  primitive: "BevelRect",
pArg: {   x: 2,
  y: 2
}
}
},
shcheck:
{
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   pad: -1,
  fillColor: "white",
  frameColor: "gray",
  primitive: "Rect",
  draw: function( ctx, client , clientShape, oShapeData )
{ oShapeData && oShapeData.state && ctx.noFD(function() // ignores the context's font-decoration (bold, italic, underline, ...) { ctx.drawHTMLText( "<b><fgcolor black>&#10003;", client, exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextAlignVCenter | exontrol.DrawTextFormatEnum.exTextNoClip ); }) }
}
},
shradio:
{
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   pad: -1,
  fillColor: "white",
  frameColor: "gray",
  primitive: "Circle",
  draw: function( ctx, client , clientShape, oShapeData )
{ oShapeData.object && oShapeData.object.getState() && exontrol.D.P.fill( ctx, exontrol.IRt( clientShape.slice(),-clientShape[exontrol.w] * 0.20,-clientShape[exontrol.w] *.20 ), "#666666", this.primitive, this.primitiveArg ); } }
},
sharrow:
{
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   fillColor: "rgba(0,0,0,0.50)",
  primitive: "EllipticPolygon",
pArg: {   edges: 3,
  startAngle: Math.PI/2
} } }, shbarrow: {
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: { pArg: {   startAngle: Math.PI
} } }, }); /* @license Copyright (C) Exontrol. All rights reserved. */ /////////////////////////////////////////////////////////// (exontrol.Menu) // // The exontrol.Menu class provides the following events (through oLts): // // "onlayoutchange", notifies your application that the control's layout has been changed. The onlayoutchange's parameter is: // // oEvent {object}, indicates the control's new layout as an object of exontrol.Menu.Layout type // // "onselect", occurs once the user selects/clicks an item (excluding popup-items). The onselect's parameter is: // // oEvent {object}, specifies the control's item being clicked/selected as an object of exontrol.Menu.Item type // // "oncheck", notifies your application that the user checks an item. The oncheck's parameter is: // // oEvent {object}, specifies the control's item being checked as an object of exontrol.Menu.Item type // // "onuncheck", occurs once the user unchecks an item. The onuncheck's parameter is: // // oEvent {object}, specifies the control's item being unchecked as an object of exontrol.Menu.Item type // // "onopen", notifies your application that a new float-menu has been opened. The onopen's parameter is: // // oEvent {object}, specifies the float-menu being opened as an object of exontrol.Menu type // // "onclose", occurs once a float-menu has been closed. The onclose's parameter is: // // oEvent {object}, specifies the float-menu being closed as an object of exontrol.Menu type // // "onmodal", occurs once the control begins or ends modal-mode, so one or more float-menus are being shown. The onmodal's parameter is: // // oEvent {boolean}, specifies whether the modal-mode starts or ends // // "onanchorclick", (@since 2.2) occurs once the user clicks an anchor element (the <a id;options> ex-HTML part marks an anchor or hyperlink element). The onanchorclick's parameter is: // // oEvent {object}, specifies an object of {id,options} type, that holds information about the anchor being clicked. // // oEvent.id {string}, specifies null or the identifier of the anchor being clicked // oEvent.options {string}, specifies null or the options of the anchor being clicked // /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// (exontrol.Def.Menu) // // The exontrol.Def.Menu namespace provides definitions for different objects, primitives, objects of exontrol.Menu object // // The exontrol.Def.Menu namespace provides the following fields: // // 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 // readOnly {boolean}, specifies whether the control is read-only // wheelChange {number}, specifies the amount the control scrolls when the user rolls the mouse wheel. // items {string}, defines the items of the menu from a string-representation. // criSize {number}, specifies the size (width and height) to show a check-box/radio-button or the item's image // criPad {(number|string|array)}, indicates the padding to apply to a check-box/radio-button or the item's image // criAlign {boolean}, specifies whether the check-box/radio-button or the item's image are vertically aligned. // criFlat {exontrol.Menu.FlatEnum}, indicates whether the menu's flat bar is shown or hidden. // pad {(number|string|array)}, defines the item's padding (space between the menu border and the item content) // itemsPad {(number|string|array)}, defines the padding the sub-items section of the item (space between the menu border and the items content) // align {number}, horizontally aligns the item's caption. // arrSize {number}, specifies the size (width and height) to show the item's arrow. // arrangeItemsAs {exontrol.Menu.ArrangeItemsEnum}, specifies how the items are arranged on the control (top-level menu). // subArrangeItemsAs {exontrol.Menu.ArrangeItemsEnum}, specifies how the items are arranged on the float-menus. // sepSize {number}, specifies the size to show a separator item. // btnPad {(number|string|array)}, defines the button's padding (space between the button border and the item content) // btnArrSize {number}, specifies the size (width and height) to show the button's arrow. // show {exontrol.Menu.ShowCheckedAsSelectedEnum}, defines how an item that has a check-box/radio button is displayed. // scrollSize {number}, specifies the size (width/height) of the control's scroll bar. // scrollClip {boolean}, specifies whether the control's scroll bar is clipped. // scrollOpt {exontrol.ScrollBar.Options}, specifies the options (UI visual appearance, behavior) to display the control's scroll bar. // 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. // smoothSel {number}, defines the time in ms the control's selection goes from one state to another. // open {number}, defines the time in ms the top-level item opens its sub-menu once the cursor hovers it. // close {number}, defines the time in ms the sub-menu is closed once the cursor hovers the top-level item. // subOpen {number}, defines the time in ms the second-level item opens its sub-menu once the cursor hovers it (it is applied to any level excepts the top-level). // subClose {number}, defines the time in ms the sub-menu is closed once the cursor hovers the second-level item (it is applied to any level excepts the top-level). // outClose {number}, defines the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu. // popupRatio {number}, defines a positive number that specifies the maximum ratio of the document's view page, a float or a popup menu can be shown. // closeOnClick {exontrol.Menu.CloseOnClickEnum}, defines the type of items the user can click to close the float-menu(s). // alignClient {boolean}, specifies whether the item's client position is aligned to sub-item client position, when a float-menu is displayed. // alignContextMenu {exontrol.Menu.AlignContextMenuEnum}, defines the horizontal and vertical position of the context/shortcut-menu relative to the x, y coordinates // allowToggleRadio {boolean}, allows or prevents toggling the radio state // x {number}, specifies the horizontal position to show the context/shortcut-menu relative to the document. // y {number}, specifies the vertical position to show the context/shortcut-menu relative to the document. // /////////////////////////////////////////////////////////// /** * @description The exontrol.Def.Menu namespace provides definitions for different objects, primitives, objects of exontrol.Menu object */ exontrol.Def.Menu = {
/** * @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} Specifies whether the control is protected. * @example * * false {boolean}, unlocks the control (can select any item) * true {boolean}, locks the control (can't select any item) */   locked: false,
/** * @description The readOnly field indicates whether the control is read-only * @type {boolean} * @example * * false {boolean}, the user can select or check any item * true {boolean}, the user can not select or check the items */   readOnly: false,
/** * @description The debug field indicates whether the control displays debug-information * @type {boolean} Specifies whether the control is in debug-mode. * @example * * false {boolean}, no debug-information is displayed * true {boolean}, debug-information is displayed for each item (usually the item's identifier) */   debug: false,
/** * @description The wheelChange field specifies the amount the control scrolls when the user rolls the mouse wheel. * @type {number} Specifies the amount the control scrolls when the user rolls the mouse wheel. * @example * * 0 {number}, locks any action the mouse's wheel performs * 1 {number}, indicates that the scrollOpt.wheelChange property is applied for 1-time when user rotates the mouse wheel. Changes the scrollOpt.wheelChange property to provide a different step to scroll once the user rotates the mouse wheel */   wheelChange: 1,
/** * @description The items field defines the items of the menu from a string-representation. * @type {string} Indicates the items the control. * * The format of the items'string representation is (everything between () refers to children, and everything between [] refers to flags): * * "item1[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value]),...,itemn[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value])" * * The string-representation supports the following flags: * * [id], specifies the item's identifier, such as [id=10]. * [align] {number}, horizontally aligns the caption. The align could be -1(full-fits the item), 0(left-alignment), 1(center), or 2( right-alignment) such as [align=2] right-aligns the item. * [pad], specifies the item's padding (space between the menu border and the item content). The pad could be one or two numbers, separated by comma, such as [pad=2] or [pad=2,2] * [itemsPad], specifies the items padding (space between the menu border and the item content). The itemsPad could be one or two numbers, separated by comma, such as [itemsPad=2] or [itemsPad=2,2] * [chk], indicates that the item has a check-box associated. If the [typ] flag is present, the [chk] flag indicates the state of the item, and the [rad] flag is ignored. The chk could be 0 or 1, such as [chk] or [chk=0] for a un-checked item, or [chk=1] for checked item. * [rad], indicates that the item has a radio-button associated. If the [typ] flag is present, the [chk] flag indicates the state of the item, and the [rad] flag is ignored. The rad could be 0 or 1, such as [rad] or [rad=0] for a un-checked item, or [rad=1] for checked item. * [typ], specifies the type of the item, that can be normal, check or radio. The typ could be 0(normal item), 1(items that display a check/box (chk)) or 2(items that display radio buttons (rad)). If the [typ] flag is present, the [chk] flag indicates the state of the item, and the [rad] flag is ignored. For instance [typ=1], specifies a check-box item * [grp], defines the radio group. It should be used when you define more groups of radio buttons. A group of radio buttons means that only one item could be checked at one time. The rad option specifies that the item displays a radio button. Use the grp option to define the group of radio where this button should be associated, If no group of radio buttons is required, the grp could be ignored. For instance, [grp=sample] * [img], indicates that the item's image. The img indicates the name of an exontrol.HP, such as [img=logo] * [group], specifies how the sub-items are being grouped. The group could be a flag combination of exontrol.Menu.GroupPopupEnum type, such as [group] to group horizontlly the item, or [group=0x100] to group vertically the items * [arrow], indicates whether the item's popup-arrow is shown or hidden. The arrow could be 0 to hide the arrow, or not-zero to show the arrow, such as [arrow] or [arrow=0] to hide the arrow, or [arrow=1] to show the arrow * [hid], hides/shows the item. The hid could be 0 which indicates that the item is hidden. Any other value makes the item visible, such as [hid] or [hid=0] to hide the item, or [hid=1] to show the item * [captionWidth] or [cw], specifies the width to show the HTML caption of the item, where value could be a integer expression. A negative value indicates that no limitation is applied to the item's caption, so no truncate caption is shown. For instance [cw=128] * [captionHeight] or [ch], specifies the height to show the HTML caption of the item, where value could be a integer expression. A negative value indicates that no limitation is applied to the item's caption, so no truncate caption is shown. For instance [ch=128] * [height], specifies the height to display the item, where value could be a integer expression (it applies to all parts of the item). For instance [height=64] * [width], specifies the width to display the item, where value could be a integer expression (it applies to all parts of the item). For instance [width=64] * [button], associates a button with the item. The value could be a flag combination of exontrol.Menu.ShowAsButtonEnum type, such as [button] or [button=1] makes the item to displat a button, or [button=0] disables displaying any button. * [spchk], indicates whether the sub-items/popup of giving item are shown when the item is checked. The value could be 0, which indicates that it has no effect, or non-zero to show the sub-item when the item is checked. For instance [spchk] * [show], specifies how an item that has a check-box/radio-button should be displayed. The value could be any value of exontrol.Menu.ShowCheckedAsSelectedEnum type. For instance [show=-1] (the exDisplayItemCheckHighlight value highlights the checked item) * [showdis], makes the item to show as disabled, while it is still enabled. The flag is applied to all descendents. Any value not-zero indicates that the item is shown as disabled. For instance [showdis] * [tab], indicates the identifier of the item that displays the sub-items of the current item. For instance: [tab=page] or [tab=1] * [dis], disables the item. The flag is applied to all descendents. Any value not-zero indicates that the item is enabled. For instance [dis] * [sep], specifies an separator item, such as [sep]. The value is ignored if provided. For instance [sep] * [popupalign] or [pa], indicates how the sub-menu/popup/float is aligned relative to the parent item (exontrol.Menu.ShowPopupAlignEnum). For instance [pa=1] (The exShowPopupAlignDown value indicates that the sub-menu/popup is shown down-aligned relative to the parent item) * [shapes], specifies the shapes to be applied on the item only. For instance [shapes=dfitem(item),dfcap(cap)] * [cursors], defines the mouse cursor to be displayed when pointing over a part of the item only. For instance [cursors=pointer(item)] * [close], specifies whether clicking the item closes the float-menu (exontrol.Menu.CloseOnClickEnum). For instance [close=-1], closes the context-menu once the user clicks the items (no matter, if it is of check, radio or button type) * * @example * * "" {string}, clears the items collection * "Popup(A,B,C)" {string}, adds a popup-item with three sub-items A, B and C * "Popup[group](A,B,C)" {string}, adds an item with three sub-items A, B and C, and all items are visible and displayed as an horizontally group * "Popup[group][chk][spchk](A,B,C)" {string}, adds an item with three sub-items A, B and C, but A, B and C sub-items are visible and displayed only if the popup is checked */   items: null,
/** * @description The criSize field specifies the size (width and height) to show a check-box/radio-button or the item's image * @type {number} A value that specifies the size (width and height) to show a check-box/radio-button or the item's image * @example * * 16 {number}, indicates that any check-box, radio or image uses a 16x16 rectangle to display it within the item */   criSize: 16,
/** * @description The criPad field indicates the padding to apply to a check-box/radio-button or the item's image. * @type {(number|string|array)} 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 * @example * * 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 */   criPad: [0,0],
/** * @description The criAlign field specifies whether the check-box/radio-button or the item's image are vertically aligned. * @type {boolean} specifies whether the check-box/radio-button or the item's image are vertically aligned * * The criAlign property has effect, if the control's criFlat is exNormal. * * @example * * false {boolean}, check-box/radio-button or the item's image is not vertically aligned * true {boolean}, check-box/radio-button or the item's image is vertically aligned */   criAlign: false,
/** * @description The criFlat field indicates whether the menu's flat bar is shown or hidden * @type {exontrol.Menu.FlatEnum} specifies whether the menu's flat bar is visible or hidden. * * The exontrol.Menu.FlatEnum type supports the following values: * * exNormal (0), indicates that the menu's flat bar is not shown * exShowFlat (1), indicates that the menu's flat bar is visible only if the menu contains items with check, radio or image * exAlwaysFlat (2), indicates that the menu's flat bar is always visible * * @example * * 2 or exontrol.Menu.FlatEnum.exAlwaysFlat {number}, defines a flat-menu */   criFlat: exontrol.Menu.FlatEnum.exNormal,
/** * @description The pad field defines the item's padding (space between the menu border and the item content) * @type {(number|string|array)} 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 * @example * * 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: [4,4],
/** * @description The itemsPad field defines the padding the sub-items section of the item (space between the menu border and the items content) * @type {(number|string|array)} 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 * @example * * 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 */   itemsPad: [0,0],
/** * @description The align field horizontally aligns the item's caption. * @type {number} Indicates a numeric value that specifies the alignment of the item's caption. * * The align property can be any of the following values: * * -1 {number}, specifies that the item's caption full-fits the item's background. You can use the <c> or <r> ex-HTML tags to align portions of caption inside the item * 0 {number}, indicates that the caption is left-aligned * +1 {number}, specifies that the caption is centered * +2 {number}, specifies that the caption is right-aligned * * @example * * 2 {number}, right aligns the item's caption */   align: -1,
/** * @description The arrSize field specifies the size (width and height) to show the item's arrow. * @type {number} A value that specifies the size (width and height) to show the item's arrow. * * The item's arrow is displayed only for popup-items, or items that contains sub-items or child-items. * * @example * * 0 {number}, indicates that no arrow is shown * 6 {number}, indicates that the arrow is displayed into a square of 6x6 pixels */   arrSize: 6,
/** * @description The arrangeItemsAs field specifies how the items are arranged on the control (top-level menu). * @type {exontrol.Menu.ArrangeItemsEnum} A combination of one or more ArrangeItemsEnum flags that specifies how the items are arranged on the control (top-level menu). * * The exontrol.Menu.ArrangeItemsEnum type supports the following flags: * * exArrangeItemsHorizontal (1), specifies that the items are horizontally arranged from left to right * exArrangeItemsVertical (2), specifies that the items are vertically arranged from top to bottom * exArrangeItemsHideTopArrow (0x10), indicates that the arrow for any top-item is not visible (not valid for float-menu) * exArrangeItemsPopupAlign (0x20), specifies that the item's float/popup-menu should be displayed to prevent overlapping other items * exArrangeItemsWrap (0x100), wraps items on a new row/column (not valid for float-menu) * exArrangeItemsScroll (0x200), specifies that the control's scroll bar is displayed if required * exArrangeItemsAlignCenter (0x400), centers the items on each row/column * exArrangeItemsAlignReverse (0x800), reverses the alignment of the items * * @example * * 561 or exontrol.Menu.ArrangeItemsEnum.exArrangeItemsHideTopArrow | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsHorizontal | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign {number}, arranges horizontally all items of top-level menu */   arrangeItemsAs: exontrol.Menu.ArrangeItemsEnum.exArrangeItemsVertical | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign,
/** * @description The subArrangeItemsAs field specifies how the items are arranged on the float-menu. * @type {exontrol.Menu.ArrangeItemsEnum} A ArrangeItemsEnum expression that specifies how the items are arranged arranged on the float-menu. * * The exontrol.Menu.ArrangeItemsEnum type supports the following flags: * * exArrangeItemsHorizontal (1), specifies that the items are horizontally arranged from left to right * exArrangeItemsVertical (2), specifies that the items are vertically arranged from top to bottom * exArrangeItemsHideTopArrow (0x10), indicates that the arrow for any top-item is not visible (not valid for float-menu) * exArrangeItemsPopupAlign (0x20), specifies that the item's float/popup-menu should be displayed to prevent overlapping other items * exArrangeItemsWrap (0x100), wraps items on a new row/column (not valid for float-menu) * exArrangeItemsScroll (0x200), specifies that the control's scroll bar is displayed if required * exArrangeItemsAlignCenter (0x400), centers the items on each row/column * exArrangeItemsAlignReverse (0x800), reverses the alignment of the items * * @example * * 257 or exontrol.Menu.ArrangeItemsEnum.exArrangeItemsHorizontal | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsWrap {number}, wraps items within the float-menu * 546 or exontrol.Menu.ArrangeItemsEnum.exArrangeItemsVertical | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign {number}, arranges vertically the items within the float-menu */   subArrangeItemsAs: exontrol.Menu.ArrangeItemsEnum.exArrangeItemsVertical | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign,
/** * @description The sepSize field specifies the size to show a separator item. * @type {number} A value that specifies the size to display a separator item. * @example * * 0 {number}, hides all separator items ([sep]) * 4 {number}, specifies the separator items of 4-pixels size */   sepSize: 1,
/** * @description The btnPad field defines the button's padding (space between the button border and the item content) * @type {(number|string|array)} 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 * @example * * 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 */   btnPad: [2,2],
/** * @description The btnArrSize field specifies the size (width and height) to show the button's arrow. * @type {number} A value that specifies the size (width and height) to show the button's arrow. * * The item's arrow is displayed only items that contains sub-items or child-items, while it is of [button] type * * @example * * 0 {number}, indicates that no arrow is shown for an item of button type ([button]) * 6 {number}, indicates that the arrow is displayed into a square of 6x6 pixels */   btnArrSize: 6,
/** * @description The show field defines how an item that has a check-box/radio button is displayed. * @type {exontrol.Menu.ShowCheckedAsSelectedEnum} Specifies a value of exontrol.Menu.ShowCheckedAsSelectedEnum, that defines how an item that has a check-box/radio button is displayed. * * The exontrol.Menu.ShowCheckedAsSelectedEnum type defines the following values: * * exDisplayItemCheckDefault (0), indicates that no highlight is applied to the item's check/radio * exDisplayItemCheckHighlight (-1), highlights the checked item * exDisplayItemHighlight (1), highlights the checked item, but hides the item's check/radio button * * @example * * 1 (exontrol.Menu.ShowCheckedAsSelectedEnum.exDisplayItemHighlight) {number}, specifies that any checked-item gets highlighted, by not showing the item's check/radio button */   show: exontrol.Menu.ShowCheckedAsSelectedEnum.exDisplayItemCheckDefault,
/** * @description The scrollSize field specifies the size (width/height) of the control's scroll bar * @type {number} Indicates the size of the control's scroll bar * @example * * 0 {number}, hides the menu's scroll-bar but scrolling it is still posible by drag. Click an item and drag outside the margins so the menu gets scrolled * 6 {number}, defines a 6-pixels wide scroll bar */   scrollSize: 8,
/** * @description The scrollClip field specifies whether the control's scroll bar is clipped * @type {boolean} Specifies whether the control's scroll bar is clipped * @example * * false {boolean}, the scroll is not clipped, so it is shown over the menu * true {boolean}, the scroll and items portions of the menu are separatly */   scrollClip: false,
/** * @description The scrollOpt field specifies the options (UI visual appearance, behavior) to display the control's scroll bar. * @type {exontrol.ScrollBar.Options} Specifies the options (UI visual appearance, behavior) to display the control's scroll bar. */ scrollOpt: {
/** * @description The visibleParts fields defines the visible parts of the scroll bar, separated by comma. * @type {string} Indicates the parts of the scroll bar that are visible. * * The parts of the control are: * * "l" (exLeftBPart, <) indicates the left or top button of the scroll bar * "l1" (exLeftB1Part) indicates the first additional button, in the left or top area * "l2" (exLeftB2Part) indicates the second additional button, in the left or top area * "l3" (exLeftB3Part) indicates the third additional button, in the left or top area * "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area * "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area * "t" (thumb), indicates the scroll's thumb * "r" (exRightBPart, >) indicates the right or down button * "r1" (exRightB1Part) indicates the first additional button in the right or down side * "r2" (exRightB2Part) indicates the second additional button in the right or down side * "r3" (exRightB3Part) indicates the third additional button in the right or down side * "r4" (exRightB4Part) indicates the forth additional button in the right or down side * "r5" (exRightB5Part) indicates the fifth additional button in the right or down side * "r6" (exRightB6Part) indicates sixth additional button in the right or down side * * There are three additional parts (automatically computed) as: * * "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb) * "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button) * "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts) * * Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on. * * @example * * null {null}, specifies that the exontrol.Def.ScrollBar.visibleParts field defines the visibleParts property. By default, the exontrol.Def.ScrollBar.visibleParts is "l,t,r,b", which indicates that only "left-button", "thumb", "right-button" and "background" parts are visible * "t,b" {string}, indicates that only "thumb", "background" parts are visible */   visibleParts: "t,b",
/** * @description The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. * @type {string} 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: * * "l" (exLeftBPart, <) indicates the left or top button of the scroll bar * "l1" (exLeftB1Part) indicates the first additional button, in the left or top area * "l2" (exLeftB2Part) indicates the second additional button, in the left or top area * "l3" (exLeftB3Part) indicates the third additional button, in the left or top area * "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area * "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area * "t" (thumb), indicates the scroll's thumb * "r" (exRightBPart, >) indicates the right or down button * "r1" (exRightB1Part) indicates the first additional button in the right or down side * "r2" (exRightB2Part) indicates the second additional button in the right or down side * "r3" (exRightB3Part) indicates the third additional button in the right or down side * "r4" (exRightB4Part) indicates the forth additional button in the right or down side * "r5" (exRightB5Part) indicates the fifth additional button in the right or down side * "r6" (exRightB6Part) indicates sixth additional button in the right or down side * "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb) * "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button) * "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts) * * @example * * null {null}, indicates that the exontrol.Def.ScrollBar.cursors field defines the cursors property. By default, the exontrol.Def.ScrollBar.cursors is "auto(l1,l2,l3,l4,l5,l,lo,t,up,r,r1,r2,r3,r4,r5,r6)", or the "auto" mouse cursor is displayed for any part of the control * "crosshair(lo,up,b),pointer(t)" {string}, indicates that the "crosshair" mouse cursor is shown once the cursor hovers the control "upper", "lower" or "background" part, and "pointer" mouse cursor while cursor hovers the "thumb" part */   cursors: "pointer(t,lo,b,up)",
/** * @description The horizonalShapes field defines the shapes each part of the control applies, when the scroll-bar's mode is exHorizontal. * @type {string} Defines the shapes to be applied to parts of the scroll bar, when the scroll-bar's mode is exHorizontal. * * The format of horizonalShapes property is: * * "shape(part),shape(part),..." * * where: * * "shape", defines the name of the property of exontrol.Shapes.ScrollBar.background/exontrol.Shapes.ScrollBar.foreground object to be applied on the part * "part", defines the name of the part the shape is applied on (as defined bellow) * * The horizonalShapes property supports any of the following parts: * * "l" (exLeftBPart, <) indicates the left or top button of the scroll bar * "l1" (exLeftB1Part) indicates the first additional button, in the left or top area * "l2" (exLeftB2Part) indicates the second additional button, in the left or top area * "l3" (exLeftB3Part) indicates the third additional button, in the left or top area * "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area * "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area * "t" (thumb), indicates the scroll's thumb * "r" (exRightBPart, >) indicates the right or down button * "r1" (exRightB1Part) indicates the first additional button in the right or down side * "r2" (exRightB2Part) indicates the second additional button in the right or down side * "r3" (exRightB3Part) indicates the third additional button in the right or down side * "r4" (exRightB4Part) indicates the forth additional button in the right or down side * "r5" (exRightB5Part) indicates the fifth additional button in the right or down side * "r6" (exRightB6Part) indicates sixth additional button in the right or down side * "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb) * "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button) * "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts) * * @example * * null {null}, specifies that the exontrol.Def.ScrollBar.horizonalShapes field defines the horizonalShapes property. By default, the exontrol.Def.ScrollBar.horizonalShapes is "hThumbLite(t)". * "hThumbLite(t)" {string}, defines a lite-scroll, or shotly it applies the exontrol.Shapes.ScrollBar.background.hThumbLite and exontrol.Shapes.ScrollBar.foreground.hThumbLite on "thumb" part * "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumb(t),back(lo,b,up)" {string}, defines a rectangular-scroll * "buttonCircle(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumbCircle(t),hBackCircle(b)" {string}, defines a circular-scroll * "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6)" {string} indicates that all l1-r6 applies the exontrol.Shapes.ScrollBar.background.button and exontrol.Shapes.ScrollBar.foreground.button shapes. */   horizonalShapes: "tRange(t),range(b)",
/** * @description The verticalShapes field defines the shapes each part of the control applies, when the scroll-bar's mode is exVertical. * @type {string} Defines the shapes to be applied to parts of the scroll bar, when the scroll-bar's mode is exVertical. * * The format of verticalShapes property is: * * "shape(part),shape(part),..." * * where: * * "shape", defines the name of the property of exontrol.Shapes.ScrollBar.background/exontrol.Shapes.ScrollBar.foreground object to be applied on the part * "part", defines the name of the part the shape is applied on (as defined bellow) * * The verticalShapes property supports any of the following parts: * * "l" (exLeftBPart, <) indicates the left or top button of the scroll bar * "l1" (exLeftB1Part) indicates the first additional button, in the left or top area * "l2" (exLeftB2Part) indicates the second additional button, in the left or top area * "l3" (exLeftB3Part) indicates the third additional button, in the left or top area * "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area * "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area * "t" (thumb), indicates the scroll's thumb * "r" (exRightBPart, >) indicates the right or down button * "r1" (exRightB1Part) indicates the first additional button in the right or down side * "r2" (exRightB2Part) indicates the second additional button in the right or down side * "r3" (exRightB3Part) indicates the third additional button in the right or down side * "r4" (exRightB4Part) indicates the forth additional button in the right or down side * "r5" (exRightB5Part) indicates the fifth additional button in the right or down side * "r6" (exRightB6Part) indicates sixth additional button in the right or down side * "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb) * "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button) * "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts) * * @example * * null {null}, specifies that the exontrol.Def.ScrollBar.verticalShapes field defines the verticalShapes property. By default, the exontrol.Def.ScrollBar.verticalShapes is "vThumbLite(t)". * "vThumbLite(t)" {string}, defines a lite-scroll, or shotly it applies the exontrol.Shapes.ScrollBar.background.vThumbLite and exontrol.Shapes.ScrollBar.foreground.vThumbLite on "thumb" part * "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumb(t),back(lo,b,up)" {string}, defines a rectangular-scroll * "buttonCircle(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumbCircle(t),vBackCircle(b)" {string}, defines a circular-scroll * "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6)" {string} indicates that all l1-r6 applies the exontrol.Shapes.ScrollBar.background.button and exontrol.Shapes.ScrollBar.foreground.button shapes. */   verticalShapes: "tRange(t),range(b)",
/** * @description The wheelChange field specifies the amount by which the scroll box position changes when the user rotates the mouse wheel. * @type {number} Specifies the amount by which the scroll box position changes when the user rotates the mouse wheel. * @example * * null {null}, specifes that the exontrol.Def.ScrollBar.wheelChange field defines the smallChange property. By default, the exontrol.Def.ScrollBar.wheelChange is 1. * 0 {number}, no change while the user rotates the mouse wheel. * 1 {number}, increases or decreases the scroll's value by 1 when the user rotates the mouse wheel */   wheelChange: 16,
},
/** * @description The smoothSel field defines the time in ms the control's selection goes from one state to another. * @type {number} Indicates the time in ms the control's selection goes from one state to another. * @example * * 0 {number}, no smooth changes once the user selects a new item * 125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms. */   smoothSel: 125,
/** * @description The shapes field defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. * @type {string} 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.Menu object (while it starts with a lowercase letter, such as dfitem which refers to exontrol.Shapes.Menu.dfitem 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: * * "menu" (menu), defines the visual appearance for the entire menu * "flat" (flat), defines the visual appearance for menu's flat bar (usually shown in the left side of the menu) * "sep" (separator), defines the visual appearance to display separator-items * "item" (item), defines the visual appearance for the item's background. It covers all parts of the item as check, image, caption/button, popup arrow and sub-items * "sub" (sub-items), defines the visual appearance to display sub-items of the item (while the item is grouped) * "arr" (arrow), defines the visual appearance to display item's arrow (while the item contains un-grouped sub-items) * "cap" (caption), defines the visual appearance for the item's caption * "img" (image), defines the visual appearance to display the item's image * "chk" (check), defines the visual appearance to display the item's check-box * "rad" (radio), defines the visual appearance to display the item's radio-button * "btn" (button), defines the visual appearance to display the buttons * "rarr" (right-arrow), defines the visual appearance to display button's arrow (to right) * "barr" (bottom-arrow), defines the visual appearance to display button's arrow (to bottom) * * @example * * null {null}, specifies the default visual appearance * "" {string}, no shape (no visual appearance is applied to any part of the control) * "red(item)", "#FF0000(item)", "rgb(255,0,0)(item)", "rgba(255,0,0,1)(item)" {string}, shows all-items in red * '{"hover":{"frameColor":"black","pad":-0.5}}(item)' {string}, draws a black-frame arround the item being hovered * "xxx(d),yyy(d,m),zzz(y)" {string}, specifies that the exontrol.Shapes.Menu.xxx combined with exontrol.Shapes.Menu.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Menu.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Menu.zzz object defines the visual appearance of "y" part of the control */   shapes: "shitem(item),shcap(cap),shsub(sub),shradio(rad),shcheck(chk),shflat(flat),shsep(sep),shbutton(btn),sharrow(arr,rarr,barr),shbarrow(barr)",
/** * @description The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. * @type {string} 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 below) * * The cursors property supports any of the following parts: * * "menu" (menu), defines the mouse-cursor to show when the mouse pointer hovers the entire menu * "flat" (flat), defines the mouse-cursor to show when the mouse pointer hovers menu's flat bar (usually shown in the left side of the menu) * "sep" (separator), defines the mouse-cursor to show when the mouse pointer hovers the separator-items * "item" (item), defines the mouse-cursor to show when the mouse pointer hovers the item's background. It covers all parts of the item as check, image, caption/button, popup arrow and sub-items * "sub" (sub-items), defines the mouse-cursor to show when the mouse pointer hovers the sub-items of the item (while the item is grouped) * "arr" (arrow), defines the mouse-cursor to show when the mouse pointer hovers the item's arrow (while the item contains un-grouped sub-items) * "cap" (caption), defines the mouse-cursor to show when the mouse pointer hovers the item's caption * "img" (image), defines the mouse-cursor to show when the mouse pointer hovers the item's image * "chk" (check), defines the mouse-cursor to show when the mouse pointer hovers the item's check-box * "rad" (radio), defines the mouse-cursor to show when the mouse pointer hovers the item's radio-button * "btn" (button), defines the mouse-cursor to show when the mouse pointer hovers the buttons * "rarr" (right-arrow), defines the mouse-cursor to show when the mouse pointer hovers the button's arrow (to right) * "barr" (bottom-arrow), defines the mouse-cursor to show when the mouse pointer hovers the button's arrow (to bottom) * "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the <a> ex-HTML part marks an anchor or hyperlink element) (@since 2.2) * * @example * * "" {string}, no mouse cursor support * "pointer(chk,rad,btn)" {string}, indicates that the "pointer" mouse cursor is shown once the cursor hovers the "chk", "rad" or "btn" parts of the control */   cursors: "pointer(chk,rad,btn,anchor)",
/** * @description The open field defines the time in ms the top-level item opens its sub-menu once the cursor hovers it. * @type {number} Indicates the time in ms the top-level item opens its sub-menu once the cursor hovers it. * * The value of open property can be any of the following: * * if positive, indicates the time in ms the top-level item opens its sub-menu once the cursor hovers it. * if 0, indicates that the top-level item opens its sub-menu as soon as cursor hovers it * if negative, indicates that the item requires click to to open its sub-menu * * @example * * 0 {number}, indicates that the top-level item opens its sub-menu as soon as cursor hovers it. * -1 {number}, indicates that the top-level item opens its sub-menu as soon as user clicks it. */   open: -1,
/** * @description The close field defines the time in ms the sub-menu is closed once the cursor hovers the top-level item. * @type {number} Indicates the time in ms the sub-menu is closed once the cursor hovers the top-level item. * * The value of close property can be any of the following: * * if positive, indicates the time in ms the sub-menu is closed once the cursor hovers the top-level item. * if 0, indicates that the sub-menu is closed as soon as the cursor hovers a top-level item * if negative, it has no effect * * @example * * 0 {number}, indicates that the sub-menu is closed as soon as the cursor hovers a top-level item. * 350 {number}, the sub-menu is closed once 350 ms ellapsed after the cursor hovers a top-level item. */   close: 0,
/** * @description The subOpen field defines the time in ms the second-level item opens its sub-menu once the cursor hovers it (it is applied to any level excepts the top-level). * @type {number} Indicates the time in ms the second-level item opens its sub-menu once the cursor hovers it. * * The value of subOpen property can be any of the following: * * if positive, indicates the time in ms the item opens its sub-menu once the cursor hovers it. * if 0, indicates that the item opens its sub-menu as soon as the cursor hovers it * if negative, it has no effect so the item requires click in order to open its sub-menu * * @example * * 0 {number}, indicates that the item opens its sub-menu as soon as the cursor hovers it * -1 {number}, indicates that the item's sub-menu is opened once the user clicks it */   subOpen: 350,
/** * @description The subClose field defines the time in ms the sub-menu is closed once the cursor hovers the second-level item (it is applied to any level excepts the top-level). * @type {number} Indicates the time in ms the sub-menu is closed once the cursor hovers the second-level item. * * The value of subClose property can be any of the following: * * if positive, indicates the time in ms the sub-menu is closed once the cursor hovers the second-level item * if 0, indicates that the sub-menu is closed as soon as the cursor hovers a second-level item * if negative, it has no effect * * @example * * 0 {number}, indicates that the sub-menu is closed as soon as the cursor hovers a second-level item * 350 {number}, the sub-menu is closed once 350 ms ellapsed after the cursor hovers the second-level item */   subClose: 500,
/** * @description The outClose field defines the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu. * @type {number} Indicates the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu. * * The value of outClose property can be any of the following: * * if positive, specifies the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu * if 0, indicates that the menu's floats are closed as soon as the cursor hovers outside portion of it * if negative, it has no effect * * @example * * 0 {number}, indicates that the menu's floats are closed as soon as the cursor hovers outside portion of it * 350 {number}, the control's float-menus are closed once 350 ms ellapsed after the cursor hovers outside portion of the menu */   outClose: 500,
/** * @description The popupRatio field defines a positive number that specifies the maximum ratio of the document's view page, a float or a popup menu can be shown. * @type {number} Indicates a positive number that specifies the maximum ratio of the document's view page, a float or a popup menu can be shown. * * For instance, 1/2 indicates that the width / height of the float-menu can not exceed half of the width / height of the document's view page. * * @example * * 0 {number}, indicates that the size of the float-menu is not influenced by the document's view size, so it will be displayed entirely as it is * 0.5 {number}, indicates that the width / height of the float-menu can not exceed half of the width / height of the document's view page (control's scroll is automatically added if exArrangeItemsScroll flag is specified) */   popupRatio: 1/2,
/** * @description The closeOnClick field defines the type of items the user can click to close the float-menu(s). * @type {exontrol.Menu.CloseOnClickEnum} Indicates a combination of one or more exontrol.Menu.CloseOnClickEnum flags that specifies the type of items the user can click to close the float-menu(s). * * The exontrol.Menu.CloseOnClickEnum type defines the following flags: * * exCloseOnDefault (0), indicates that the float-menu is closed once the user clicks an enabled item with no check, radio or button associated * exCloseOnDisabled (1), specifies that the float-menu is closed once the user clicks a disabled item * exCloseOnSeparator (2), specifies that the float-menu is closed once the user clicks a separator item * exCloseOnButton (4), specifies that the float-menu is closed once the user clicks an item of button-type * exCloseOnCheck (8), specifies that the float-menu is closed once the user clicks an item of check-type * exCloseOnRadio (16), specifies that the float-menu is closed once the user clicks an item of radio-type * exCloseOnState (24), specifies that the float-menu is closed once the user clicks an item of check or radio-type * exCloseOnAny (-1), specifies that the float-menu is closed once the user clicks any type of item anywhere * * @example * * 0 or exontrol.Menu.CloseOnClickEnum.exCloseOnDefault {number}, specifies that the float-menu is closed once the user clicks an enabled item with no check, radio or button associated * -1 or exontrol.Menu.CloseOnClickEnum.exCloseOnAny {number}, specifies that the float-menu is closed once the user clicks any type of item anywhere */   closeOnClick: exontrol.Menu.CloseOnClickEnum.exCloseOnDefault,
/** * @description The alignClient field specifies whether the item's client position is aligned to sub-item client position, when a float-menu is displayed. * @type {boolean} Indicates whether the item's client position is aligned to sub-item client position, when a float-menu is displayed. * @example * * false {boolean}, specifies that the item and its sub-items are not vertically aligned (when a popup is opened) * true {boolean}, specifies that the item and its sub-items are vertically aligned (when a popup is opened) */   alignClient: false,
/** * @description The alignContextMenu field defines the horizontal and vertical position of the context/shortcut-menu relative to the x, y coordinates. * @type {exontrol.Menu.AlignContextMenuEnum} Indicates the horizontal and vertical position of the context/shortcut-menu relative to the x, y coordinates. * * The exontrol.Menu.AlignContextMenuEnum type defines the following flags: * * exLeftAlign (0x00), positions the shortcut menu so that its left side is aligned with the coordinate specified by the x parameter * exCenterAlign (0x04), centers the shortcut menu horizontally relative to the coordinate specified by the x parameter * exRightAlign (0x08), positions the shortcut menu so that its right side is aligned with the coordinate specified by the x parameter * exTopAlign (0x00), positions the shortcut menu so that its top side is aligned with the coordinate specified by the y parameter * exVCenterAlign (0x10), centers the shortcut menu vertically relative to the coordinate specified by the y parameter * exBottomAlign (0x20), positions the shortcut menu so that its bottom side is aligned with the coordinate specified by the y parameter * * The alignContextMenu property has effect only, if the control is opened as a context-menu, using the Open() method. * * @example * * 0 or exontrol.Menu.AlignContextMenuEnum.exLeftAlign | exontrol.Menu.AlignContextMenuEnum.exTopAlign {number}, the context-menu is shown aligned to x and y properties * 20 or exontrol.Menu.AlignContextMenuEnum.exCenterAlign | exontrol.Menu.AlignContextMenuEnum.exVCenterAlign {number}, centers the context-menu relative to x and y properties * 32 or exontrol.Menu.AlignContextMenuEnum.exLeftAlign | exontrol.Menu.AlignContextMenuEnum.exBottomAlign {number}, opens the context-menu right to the x and y properties */   alignContextMenu: exontrol.Menu.AlignContextMenuEnum.exLeftAlign | exontrol.Menu.AlignContextMenuEnum.exTopAlign,
/** * @description The allowToggleRadio field allows or prevents toggling the radio state * @type {boolean} Specifies whether an item of radio-type toggles its state once it is clicked. * * @example * * false {boolean}, no radio-item toggles its state (once the user clicks a checked radio-item, it stays checked (state on 1)) * true {number}, any radio-item toggles its state (once the user clicks a checked radio-item, it gets unchecked (state on 0)) */   allowToggleRadio: false,
/** * @description The x field defines the horizontal position to display the context/shortcut-menu relative to the document. * @type {number} Indicates the horizontal position to display the context/shortcut-menu relative to the document. * * The x property has effect only, if the control is opened as a context-menu, using the Open() method. * * @example * * event.pageX {number}, The pageX read-only property of the MouseEvent(event) interface returns the X (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document. */   x: null,
/** * @description The y field defines the vertical position to display the context/shortcut-menu relative to the document. * @type {number} Indicates the vertical position to display the context/shortcut-menu relative to the document. * * The y property has effect only, if the control is opened as a context-menu, using the Open() method. * * @example * * event.pageY {number}, The pageY read-only property of the MouseEvent(event) interface returns the Y (vertical) coordinate in pixels of the event relative to the whole document. */   y: null
} /////////////////////////////////////////////////////////// (exontrol.Shapes.Menu) // // The exontrol.Shapes.Menu namespace provides support to customize the visual appearance of different parts of the exontrol.Menu object. // /////////////////////////////////////////////////////////// /** * @description The exontrol.Shapes.Menu namespace provides support to customize the visual appearance of different parts of the exontrol.Menu object. */ exontrol.Shapes.Menu = exontrol.DfO( exontrol.Shapes.Menu /*inherits the default exontrol.Shapes.Menu like dfitem, ... */, { shitem: {
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   frameColor: "rgba(0,0,0,0.05)",
},
/** * @description The disabled field holds an object of exontrol.Def.Shape type that's applied on the part (while it is disabled). * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part (while it is disabled). */ disabled: {
  opacity: 0.5,
},
/** * @description The checked field holds an object of exontrol.Def.Shape type that's applied on the part (while it is checked and the item's show is not-zero). * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part (while it is checked and the item's show is not-zero). */ checked:
{
y doc checked' user-option='exontrol.Shapes.Menu:shitem.checked.frameColor'>  frameColor: "rgba(64,128,255,0.50)",
xontrol.Shapes.Menu'>  fillColor: "rgba(64,128,255,0.25)",
  pad: -1
},
/** * @description The hover field holds an object of exontrol.Def.Shape type that's applied on the part, while the cursor hovers it. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part, while the cursor hovers it. */ hover: {   frameColor: "rgba(64,128,255,0.50)",
  fillColor: "rgba(64,128,255,0.10)",
  pad: -1,
  primitive: "BevelRect",
pArg: {   x: 2,
  y: 2
}
},
/** * @description The click field holds an object of exontrol.Def.Shape type that's applied on the part, while it is clicked * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part, while it is clicked */ click: {   frameColor: "rgba(64,128,255,0.50)",
  fillColor: "rgba(64,128,255,0.25)",
  pad: -1
},
/** * @description The open field holds an object of exontrol.Def.Shape type that's applied on the part, while the item's float-menu is opened. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part, while the item's float-menu is opened. */ open: {   frameColor: "rgba(64,128,255,0.50)",
  fillColor: "rgba(64,128,255,0.25)",
  pad: -1
} }, shcap: {
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   formatText: exontrol.DrawTextFormatEnum.exTextWordEllipsis
} },
shsub:
{
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   pad: -1,
  frameColor: "rgba(0,0,0,0.25)",
  primitive: "RoundRect"
} }, shsep: {
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   fillColor: "rgba(0,0,0,0.20)",
} },
shbutton:
{
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   pad: -1,
  fillColor: "rgb(192,192,192)",
  frameColor: "rgb(128,128,128)",
},
/** * @description The click field holds an object of exontrol.Def.Shape type that's applied on the part, while it is clicked * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part, while it is clicked */ click: {   fillColor: "rgb(164,164,164)",
  frameColor: "rgb(80,80,80)",
}
xontrol.Shapes.Menu'> },
shflat:
{
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   pad: -1,
  fillColor: "rgba(0,0,0,0.10)",
  frameColor: "rgba(0,0,0,0.5)",
  primitive: "BevelRect",
pArg: {   x: 2,
  y: 2
}
}
},
shcheck:
{
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   pad: -1,
  fillColor: "white",
  frameColor: "gray",
  primitive: "Rect",
  draw: function( ctx, client , clientShape, oShapeData )
{ oShapeData && oShapeData.state && ctx.noFD(function() // ignores the context's font-decoration (bold, italic, underline, ...) { ctx.drawHTMLText( "<b><fgcolor black>&#10003;", client, exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextAlignVCenter | exontrol.DrawTextFormatEnum.exTextNoClip ); }) }
}
},
shradio:
{
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   pad: -1,
  fillColor: "white",
  frameColor: "gray",
  primitive: "Circle",
  draw: function( ctx, client , clientShape, oShapeData )
{ oShapeData.object && oShapeData.object.getState() && exontrol.D.P.fill( ctx, exontrol.IRt( clientShape.slice(),-clientShape[exontrol.w] * 0.20,-clientShape[exontrol.w] *.20 ), "#666666", this.primitive, this.primitiveArg ); } }
},
sharrow:
{
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: {   fillColor: "rgba(0,0,0,0.50)",
  primitive: "EllipticPolygon",
pArg: {   edges: 3,
  startAngle: Math.PI/2
} } }, shbarrow: {
/** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: { pArg: {   startAngle: Math.PI
} } }, });