/** * @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 tag) * italic, displays the text in italics (equivalent of tag) * underline, underlines the text (equivalent of tag) * strikeout, specifies whether the text is strike-through (equivalent of tag) * , specifies the font's family (equivalent of tag) * , specifies the size of the font (equivalent of tag) * , specifies the text's foreground color (equivalent of tag) * , specifies the text's background color (equivalent of tag) * , defines the text's shadow (equivalent of tag) * , shows the text with outlined characters (CSScolor) (equivalent of tag) * , defines a gradient text (equivalent of 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 tag) * size of the font (number), specifies the size of the font (equivalent of tag) * * The tfi field as object supports any of the following fields: * * bold {boolean}, displays the text in bold (equivalent of tag) * italic {boolean}, displays the text in italics (equivalent of tag) * underline {boolean}, underlines the text (equivalent of tag) * strikeout {boolean}, specifies whether the text is strike-through (equivalent of tag) * fontName {string}, specifies the font's family (equivalent of tag) * fontSize {number}, specifies the size of the font (equivalent of tag) * fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of tag) * bgColor {string}, specifies the text's background color (CSScolor) (equivalent of tag) * shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of 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 tag) * graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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: * * "text", displays the text in bold. * "text", displays the text in italics. * "text", underlines the text. * "text", strike-through text * "text", displays an anchor element that can be clicked * "text", displays portions of text with a different font and/or different size. * "text", displays text with a specified foreground color. * "text", displays text with a specified background color. * "
", defines a forced line-break * "", right aligns the text * "", centers the text * "key[:width]", 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 "&" ( & ), "<" ( < ), ">" ( > ), "&qout;" ( quote character ) and "&#number;" ( the character with specified code ). For instance, "€" displays the EURO sign * "text", defines the vertical offset to display the text. * "text", shows the text in gradient * "text", shows the text with outlined characters * "text", shows the text with a shadow * * @example * * null {null}, ignores the text field * "this is a test" {string}, where "test" is displayed in red color * "this is a test 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 and 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 tag) * italic, displays the text in italics (equivalent of tag) * underline, underlines the text (equivalent of tag) * strikeout, specifies whether the text is strike-through (equivalent of tag) * , specifies the font's family (equivalent of tag) * , specifies the size of the font (equivalent of tag) * , specifies the text's foreground color (equivalent of tag) * , specifies the text's background color (equivalent of tag) * , defines the text's shadow (equivalent of tag) * , shows the text with outlined characters (CSScolor) (equivalent of tag) * , defines a gradient text (equivalent of 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 tag) * size of the font (number), specifies the size of the font (equivalent of tag) * * The tfi field as object supports any of the following fields: * * bold {boolean}, displays the text in bold (equivalent of tag) * italic {boolean}, displays the text in italics (equivalent of tag) * underline {boolean}, underlines the text (equivalent of tag) * strikeout {boolean}, specifies whether the text is strike-through (equivalent of tag) * fontName {string}, specifies the font's family (equivalent of tag) * fontSize {number}, specifies the size of the font (equivalent of tag) * fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of tag) * bgColor {string}, specifies the text's background color (CSScolor) (equivalent of tag) * shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of 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 tag) * graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of 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 } }