exontrol.orgchart - javascript orgchart

Click a node to select it
Double-click the node to expand/collapse it
Click, drag and drop to scroll
CTRL + click to select one or more nodes
SHIFT + click, drag and drop select nodes from frame
Roll the mouse-wheel to vertical scroll, or SHIFT + roll the mouse-wheel to horizontal scroll

Click wheel + drag or CTRL + Click wheel + drag magnifies a portion of the control
CTRL + roll wheel forward/toward
Double-Click wheel set zoom back to 100% or CTRL + Double-Click wheel fits the control

Drag the node and drop to a new-parent
Drag the node over a sibling node for 1 second to change its position
Press ESC to cancel the operation

Click a node and press Insert, A or G key to insert a new child, assistant or group node
Select multiple nodes (SHIFT or CTRL) and press Delete key to remove the selection

Click, drag and drop to scroll
Click wheel + drag or CTRL + Click wheel + drag magnifies a portion of the control
CTRL + roll wheel forward/toward
Double-Click wheel set zoom back to 100% or CTRL + Double-Click wheel fits the control

Click the ◂ (top-right arrow) to show the source-code
Click the ▴ (bottom-left arrow) to show the help
✔ Check/uncheck the flow: "flowHorizontal" to change the flow the nodes get arranged

Double-click the control, change the filter-mask, and so only nodes that match the filter will be displayed
The filter-mask can include wild-characters such as *, #, ? or [a-z]

Move the mouse in-out of the control

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

here goes the events

Click, drag, drop or roll the mouse-wheel to get for the control's events

1234567891011121314151617181920<canvas tabindex="0" id="canvasOrgchart" width="120" height="14302" style="touch-action: none;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var oOC = new exontrol.OrgChart( "canvasOrgchart" /*specifies the identifier of the canvas to host the control*/, { margins: { border: 32, indent: 32, x: 32, y: 32, }, nodes: "Root(Child of Root(Child of Child of Root(CCC of Root[c,cg](Assistant of CCC of Root[a],Assistant of CCC of Root[a,horz](Child of Assistant of CCC of Root,Child of Assistant of CCC of Root,Assistant of Assistant of CCC of Root[a],Assistant of Assistant of CCC of Root[a],Group of Assistant of CCC of Root[g](Child of Group of Assistant of CCC of Root,Child of Group of Assistant of CCC of Root(Child of Child of Group of Assistant of CCC of Root[vert](Child of Child of Child of Group of Assistant of CCC of Root,Child of Child of Child of Group of Assistant of CCC of Root),Child of Child of Group of Assistant of CCC of Root)))),CCC of Root[tree,ca,cg](Child of CCC of Root[c,cg](Child of Child of CCC of Root(Child of Child of Child of CCC of Root,Child of Child of Child of CCC of Root),Child of Child of CCC of Root,Child of Child of CCC of Root,Group of Child of CCC of Root[g]),Child of CCC of Root,Child of CCC of Root),Assistant of Child of Child of Root[a],Assistant of Child of Child of Root[a,cg](Child of ACC of Root(Child of Child of ACC of Root),Child of ACC of Root[c](Child of Child of ACC of Root,Child of Child of ACC of Root),Group of Assistant of Child of Child of Root[g,c,ca,cg](Child of <c>Group of Assistant of Child of Child of Root,Child of <c>Group of Assistant of Child of Child of Root)))),Child of Root(Child of Child of Root[htree](Child of Child of Child of Root(Child of Child of Child of Child of Root(Child of Child of Child of Child of Child of Root(Child of Child of Child of Child of Child of Child of Root,Child of Child of Child of Child of Child of Child of Root,Group of Child of Child of Child of Child of Child of Root[g](Child of Group of Child of Child of Child of Child of Child of Root[tree](Child of Child of Group of Child of Child of Child of Child of Child of Root(Child of Child of Child of Group of Child of Child of Child of Child of Child of Root),Child of Child of Group of Child of Child of Child of Child of Child of Root))))),Group of Child of Child of Root[g,vert](Child of Group of Child of Child of Root,Child of Group of Child of Child of Root,Child of Group of Child of Child of Root,Assistant of Group of Child of Child of Root[a],Assistant of Group of Child of Child of Root[a],Group of Group of Child of Child of Root[g](Child of Group of Group of Child of Child of Root))),Child of Child of Root[cg](Child of Child of Child of Root(Child of Child of Child of Child of Root,Assistant of Child of Child of Child of Root[a],Assistant of Child of Child of Child of Root[a]),Child of Child of Child of Root[c](Child of Child of Child of Child of Root(Child of Child of Child of Child of Child of Root(Child of Child of Child of Child of Child of Child of Root))),Group of Child of Child of Root[g])),Child of Root[c](Child of Child of Root,Child of Child of Root),Assistant of Root[a](Child of Assistant of Root[c,ca,cg],Child of Assistant of Root[c,ca,cg]),Assistant of Root[a,c](Child of Assistant of Root[ca,cg](Child of Child of Assistant of Root,Child of Child of Assistant of Root)),Group of Root[g,c](Child of Group of Root(Child of Child of Group of Root,Child of Child of Group of Root),Assistant of Group of Root[a](Child of Assistant of Group of Root(Child of Child of Assistant of Group of Root(Child of Child of Child of Assistant of Group of Root,Child of Child of Child of Assistant of Group of Root))),Assistant of Group of Root[a,c](Child of Assistant of Group of Root(Child of Child of Assistant of Group of Root,Child of Child of Assistant of Group of Root))),Group of Root[g](Assistant of Group of Root[a](Child of Assistant of Group of Root[cg](Child of Child of Assistant of Group of Root 1[c,ca,cg],Child of Child of Assistant of Group of Root 2[c,cg](Assistant of Child of Child of Assistant of Group of Root 2[a],Assistant of Child of Child of Assistant of Group of Root 2[a]),Group of Child of Assistant of Group of Root[g](Child of Group of Child of Assistant of Group of Root)))))", scrollBars: exontrol.ScrollBarsEnum.exBoth | exontrol.ScrollBarsEnum.exExtendSBS, size: [null, null, 128, null], }); oOC.Root.Shape = { normal: { fillColor: "black", primitive: "RoundRect", tfi: "<fg white>" } }; oOC.EnsureVisibleNode(oOC.Root); // ensures that the control's root node fits the control's client area </script>

/** * @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 <s> tag) * <fontName name>, specifies the font's family (equivalent of tag) * <fontSize size>, specifies the size of the font (equivalent of 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 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 <s> 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 <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 tag of ex-HTML captions). * @type {boolean} * @example * * true {boolean}, indicates that the text is displayed in bold * false {boolean}, displays normal text */ bold: false,

/** * @description The italic field specifies whether characters in text should be displayed in italics (equivalent of tag of ex-HTML captions). * @type {boolean} * @example * * true {boolean}, indicates that the text is displayed in italics * false {boolean}, displays normal text */ italic: false,

/** * @description The underline field specifies whether characters in text are underlined (equivalent of tag of ex-HTML captions). * @type {boolean} * @example * * true {boolean}, indicates that the text is underlined * false {boolean}, displays normal text */ underline: false,

/** * @description The strikeout field specifies whether characters in text are strike-through (equivalent of <s> tag of ex-HTML captions). * @type {boolean} * @example * * true {boolean}, indicates that characters in text are strike-through * false {boolean}, displays normal text */ strikeout: false,

/** * @description The fgcolor field specifies the text's foreground color (equivalent of <fgcolor color> tag of ex-HTML captions). * @type {string} * @example * * null {null}, specifies that the fgcolor field is ignored * "red" {string}, displays the text in red color * "rgb(255,0,0)" {string}, displays the text in red color * "rgba(255,0,0,0.5)" {string}, displays the text in semi-transparent red color */ fgColor: null,

/** * @description The bgcolor field specifies the text's background color (equivalent of <bgcolor color> tag of ex-HTML captions). * @type {string} * @example * * null {null}, specifies that the bgcolor field is ignored * "red" {string}, displays the text's background in red color * "rgb(255,0,0)" {string}, displays the text's background in red color * "rgba(255,0,0,0.5)" {string}, displays the text's background in semi-transparent red color */ bgColor: null,

/** * @description The fontSize field defines the size to display the font (equivalent of tag of ex-HTML captions). * @type {number} * @example * * null {null}, specifies that the fontSize field is ignored * 12 {number}, defines the size of the font to 12 pixels */ fontSize: null,

/** * @description The fontName field defines family of the font to show the text (equivalent of tag of ex-HTML captions). * @type {string} * @example * * null {null}, specifies that the fontName field is ignored * "Georgia" {string}, indicates Georgia font family */ fontName: null,

/** * @description The shacolor field defines the text's shadow (equivalent of <sha color;width;offset> tag of ex-HTML captions). * @type {object} */ shaColor: {

/** * @description The color field specifies the color for text's shadow (equivalent of <sha color;width;offset> tag of ex-HTML captions). * @type {string} * @example * * null {null}, specifies that the color field is ignored * "red" {string}, defines red shadow for text * "rgb(255,0,0)" {string}, defines red shadow for text * "rgba(255,0,0,0.5)" {string}, defines semi-transparent red shadow for text */ color: null,

/** * @description The width field defines the size of text's shadow (equivalent of <sha color;width;offset> tag of ex-HTML captions). * @type {number} * @example * * null {null}, specifies that the width field is ignored * 4 {number}, indicates a 4-pixels wide for text's shadow */ width: null,

/** * @description The offset field defines the offset of text's shadow (equivalent of <sha color;width;offset> tag of ex-HTML captions). * @type {number} * @example * * null {null}, specifies that the offset field is ignored * 4 {number}, shows the text's shadow with a different offset */ offset: null

/** * @description The outcolor field defines color to show outlined text (equivalent of <out color> tag of ex-HTML captions). * @type {string} * @example * * null {null}, specifies that the outcolor field is ignored * "red" {string}, defines a red-outlined text * "rgb(255,0,0)" {string}, defines a red-outlined text * "rgba(255,0,0,0.5)" {string}, defines a semi-tranparent red-outlined text */ outColor: null,

/** * @description The gracolor field specifies whether the text is show in gradient (equivalent of <gra color;mode;blend> tag of ex-HTML captions). * @type {object} */ graColor: {

/** * @description The color field specifies the color for text's gradient (equivalent of <gra color;mode;blend> tag of ex-HTML captions). * @type {string} * @example * * null {null}, specifies that the color field is ignored * "red" {string}, defines a red-gradient text * "rgb(255,0,0)" {string}, defines a red-gradient text * "rgba(255,0,0,0.5)" {string}, defines a semi-tranparent red-gradient text */ color: null,

/** * @description The mode field defines mode of the text's gradient (equivalent of <gra color;mode;blend> tag of ex-HTML captions). The mode is a value between 0 and 3, 1 if missing/null or undefined. * @type {number} * @example * * 0 {number}, defines the gradient from left to right * 1 {number}, defines the gradient from right to left * 2 {number}, defines the gradient from top to bottom * 3 {number}, defines the gradient from bottom to top * */ mode: null,

/** * @description The blend field defines gradient's blend value (equivalent of <gra color;mode;blend> tag of ex-HTML captions). Could be 0 or 1. Currently, the gradient's blend is not available * @type {number} */ blend: null

} } } /** * @description The exontrol.helpShape namespace provides documentation for exontrol.S objects. */ exontrol.helpShape = { /** * @description The shape field includes definitions to draw shapes. An object of exontrol.Def.Shape type. * @type {object} */ shape: {

/** * @description The opacity field sets the opacity level of the object. It is a number between 0.0 (fully transparent) and 1.0 (fully opaque). * @type {number} * @example * * null {null}, the opacity field is ignored * 0 {number}, completely transparent * 0.5 {number}, semi-transparent * 1 {number}, fully-opaque */ opacity: null,

/** * @description The client field specifies a collection of up to four expressions that can define a different client area to show the object (see also padding). A string expression of "[expression,expression,expression,expression]" type, that determines the x, y, width and height of the new client. The client field must starts with "[" and ends with "]", else it has no effect. * * Each expression supports the following keywords: * * x {number}, defines the object's default-left position * y {number}, defines the object's default-top position * width {number}, indicates the default-width of the object * height {number}, indicates the default-width of the object. * * @type {string} * @example * * null {null}, the client field is ignored * "[x+64,y-32]" {string}, displays the object at a different position (offset by 64-pixels on x-axis, and 32-pixels up on y-axis) * "[x-8,y-4,width+2*8,height+2*4]" {string}, is equivalent of padding on [8,4] * "[x+(width-16)/2,y+(height-16)/2,16,16]" {string}, centers a 16x16 rectangle inside the client */ client: null,

/** * @description The padding field defines how much the object's client area is increased or decreased (see also client) * @type {(number|string|array)} * @example * * null {null}, indicates that the padding field is ignored * 4 {number}, increases the object's client with 2 * 4-pixels, which includes width and height * "8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels * [8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels */ pad: null,

/** * @description The fillColor field defines the color to show the object's background. * @type {string} * @example * * null {null}, specifies that the fillColor field is ignored * "transparent" {string}, fills the object's background with rgba(0,0,0,0)/transparent color * "red" {string}, fills the object's background with red color * "rgb(255,0,0)" {string}, fills the object's background with red color * "rgba(255,0,0,0.5)" {string}, fills the object's background with semi-tranparent red color */ fillColor: null,

/** * @description The fillGradientColor field defines the gradient type and colors to show the object's background. * @type {string} * * The fillColor field defines the starting color. The fillGradientColor field has effect only if the fillColor field is defined (not null or undefined). * * The first field of the fillGradientColor field could start with any of the following: * * "vertical", defines a vertical-gradient (default) * "horizontal", defines a horizontal-gradient * "diagonal", defines a diagonal-gradient * "radial", defines a radial-gradient * * The next fields indicates the stop-colors. * * @example * * null {null}, specifies that the fillGradientColor field is ignored, so no gradient is applied on the object's background. * "black" {string}, specifies a vertical-gradient that starts from fillColor and ends on black. * "horizontal,red,green,blue" {string}, specifies a horizontal-gradient that starts from fillColor, continues with red, green and ends on blue. * "diagonal,red,rgba(0,255,0,0.5),blue" {string}, specifies a diagonal-gradient that starts from fillColor, continues with red, 50% green and ends on blue. * "radial,black" {string}, specifies a radial/circular-gradient that starts from fillColor and ends on black. */ fillGradientColor: null,

/** * @description The clientText field specifies a collection of up to four expressions that defines the new client area to display the shape's text (equivalent of offset, pad), relative to the shape's client area. A string expression of "[expression,expression,expression,expression]" type, that determines the x, y, width and height of the new client text. The clientText field must starts with "[" and ends with "]", else it has no effect. * * Each expression supports the following keywords: * * x {number}, defines the object's default-left position * y {number}, defines the object's default-top position * width {number}, indicates the default-width of the object * height {number}, indicates the default-width of the object. * * @type {string} * @example * * null {null}, the clientText field is ignored * "[x+64,y-32]" {string}, displays the text at a different position (offset by 64-pixels on x-axis, and 32-pixels up on y-axis) * "[x-8,y-4,width+2*8,height+2*4]" {string}, is equivalent of padding on [8,4] * "[,,width-20]" {string}, narrows the text's client with 20 pixels on right */ clientText: null,

/** * @description The padText field defines the padding to display the object's caption (see also text). * @type {number} * @example * * null {null}, indicates that the padText field is ignored * 4 {number}, increases the caption's client with 2 * 4-pixels, which includes width and height * "8,4" {string}, increases the caption's width with 2 * 8-pixels and caption's height with 2 * 4-pixels * [8,4] {array}, increases the caption's width with 2 * 8-pixels and caption's height with 2 * 4-pixels */ padText: null,

/** * @description The text field defines the caption to be displayed on the object. The caption/text supports ex-HTML tags as listed bellow: * * "text", displays the text in bold. * "text", displays the text in italics. * "text", underlines the text. * "<s>text</s>", strike-through text * "<a [id][;options]>text</a>", displays an anchor element that can be clicked * "text", 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. * " ", 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 "&" ( & ), "<" ( < ), ">" ( > ), "&qout;" ( quote character ) and "&#number;" ( the character with specified code ). For instance, "€" displays the EURO sign * "<off offset>text</off>", defines the vertical offset to display the text. * "<gra color[;mode[;blend]]>text</gra>", shows the text in gradient * "<out color[;width]>text</out>", shows the text with outlined characters * "<sha color[;width[;offset]]>text</sha>", shows the text with a shadow * * @type {string} * @example * * null {null}, ignores the text field * "this is a <fgcolor red>test</fgcolor>" {string}, where "test" is displayed in red color * "this is a <off 4>test</off> of ex-HTML caption" {string}, where "test" is displayed in bold with a different vertical-offset */ text: null,

/** * @description The formatText field specifies the format to display the object's caption. * * The exontrol.DrawTextFormatEnum type support the following flags: * * exTextAlignTop (0x00), justifies the text to the top of the rectangle * exTextAlignLeft (0x00), aligns text to the left * exTextAlignCenter (0x01), centers text horizontally in the rectangle * exTextAlignRight (0x02), aligns text to the right * exTextAlignVCenter (0x04), centers text vertically * exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle. * exTextAlignMask (0x0F), specifies the mask for text's alignment. * exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line. * exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line. * exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight. * exPlainText (0x80), treats the text as plain text. * exTextNoClip (0x0100), draws without clipping. * exHTMLTextNoColors (0x0200), ignores the <fgcolor> and </bgcolor> tags. * exTextCalcRect (0x0400), determines the width and height of the text. * exHTMLTextNoTags (0x0800), ignores all HTML tags. * exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash. * exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses. * exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses. * * @type {exontrol.DrawTextFormatEnum} * @example * * null {null}, defines a single-line centered text (equivalent of exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextAlignVCenter | exontrol.DrawTextFormatEnum.exTextWordEllipsis ) * 32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line text * 0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line text right/bottom-aligned */ formatText: null,

/** * @description The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. * * The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters: * * bold, displays the text in bold (equivalent of 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 <s> tag) * <fontName name>, specifies the font's family (equivalent of tag) * <fontSize size>, specifies the size of the font (equivalent of 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 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 <s> 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 <fgcolor> tag) * bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag) * shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where: * color {string}, defines the color of the text's shadow (CSScolor) * width {number}, defines the size of the text's shadow * offset {number}, defines the offset to show the text's shadow relative to the text * outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag) * graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where: * color {string}, defines the gradient-color (CSScolor) * mode {number}, defines the gradient mode as a value between 0 and 4 * blend {number}, defines the gradient blend as a value between 0 and 1 * * CSSColor or CSS legal color values can be specified by the following methods: * * Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00. * Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue. * RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color. * RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue. * HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color. * HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue. * Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color. * * @type {(string|object)} * @example * * null {null}, the tfi field is ignored * "bold monospace 16" {string}, defines Monospace font of 16px height, bold * {bold: true, fontName: "monospace", fontSize: 16} {object}, defines Monospace font of 16px height, bold */ tfi: null,

/** * @description The clipText field indicates whether the caption is clipped to object. * @type {boolean} * @example * * false {boolean}, the text/caption is not cliped * true {boolean}, the text/caption is cliped to the object's client-rectangle */ clipText: false,

/** * @description The frameColor field defines the color to show the object's frame (see also primitive). * @type {string} * @example * * null {null}, specifies no frame * "transparent" or "rgba(0,0,0,0)" {string}, defines a transparent frame * "red" {string}, defines a red-frame * "rgb(255,0,0)" {string}, defines a red-frame * "rgba(255,0,0,0.5)" {string}, defines a 50% red-frame */ frameColor: null,

/** * @description The frameSize field defines size of the object's frame. * @type {number} * @example * * null {null}, draws the frame, only if the frameColor is defined * 0 {number}, shows no frame * 4 {number}, defines a 4-pixels frame */ frameSize: null,

/** * @description The frameDash field defines style of the object's frame. An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. * @type {array} * @example * * null {null}, defines a solid frame * [] {array}, indicates a solid frame * 2 {number}, will become [2, 2, ...] * [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...] */ frameDash: null,

/** * @description The frameJoin field determines how two connecting segments into the object's frame are joined together. There are three possible values for this property as follows: * * "round", rounds off the corners of a object by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width. * "bevel", fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment. * "miter", connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. * * @type {string} * @example * * null {null}, defines a "miter" join * "round" {string}, rounds off the corners of a object by filling an additional sector of disc centered at the common endpoint of connected segments. */ frameJoin: null,

/** * @description The frameCap field determines how the end points of every line into the object's frame are drawn. There are three possible values for this property as follows: * * "butt", the ends of lines are squared off at the endpoints. * "round", the ends of lines are rounded * "square", the ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness. * * @type {string} * @example * * null {null}, indicates "but" style * "round" {string}, the ends of lines are rounded */ frameCap: null,

/** * @description The pattern field defines the pattern to show on the object's background (see also patternColor). * * The exontrol.PatternEnum type defines the following values: * * exPatternEmpty (0), defines no pattern * exPatternSolid (1), defines a solid-pattern * exPatternDot (2), defines a dot-pattern * exPatternShadow (3), defines a shadow-pattern * exPatternNDot (4), defines a not-dot-pattern * exPatternFDiagonal (5), defines a forward-diagonal-pattern * exPatternBDiagonal (6), defines a backward-diagonal-pattern * exPatternDiagCross (7), defines a cross-diagonal-pattern * exPatternVertical (8), defines a vertical-pattern * exPatternHorizontal (9), defines a horizontal-pattern * exPatternCross (10), defines a cross-pattern * exPatternBrick (11), defines a brick-pattern * exPatternYard (12), defines a yard-pattern * * @type {exontrol.PatternEnum} * @example * * null {null}, defines no pattern * 0 or exontrol.PatternEnum.exPatternEmpty {number}, defines an empty pattern (no pattern) * 7 or exontrol.PatternEnum.exPatternDiagCross {number}, defines a cross-diagonal-pattern */ pattern: null,

/** * @description The patternColor field defines the color to show the object's pattern (see also pattern). * @type {string} * @example * * null {null}, indicates a black-color * "transparent" or "rgba(0,0,0,0)" {string}, defines a transparent pattern * "red" {string}, defines a red-pattern * "rgb(255,0,0)" {string}, defines a red-pattern * "rgba(255,0,0,0.5)" {string}, defines a 50% red-pattern */ patternColor: null,

/** * @description The shadow field holds information about box's shadow. * @type {object} */ shadow: {

/** * @description The color field defines the shadow's color. Defines the shadow's color in CSS format. The color, x or y properties have no effect while blur property is not defined. * @type {string} * @example * * null {null}, indicates that the frameColor or fillColor property determines the shadow's color * "transparent" or "rgba(0,0,0,0)" {string}, defines a transparent shadow * "red" {string}, defines a red-shadow * "rgb(255,0,0)" {string}, defines a red-shadow * "rgba(255,0,0,0.5)" {string}, defines a 50% red-shadow */ color: null,

/** * @description The blur field defines the blur level for shadows. * @type {number} * @example * * 0 {number}, indicates no shadow * 4 {number}, defines shadow's blur to 4 */ blur: 0,

/** * @description The x field defines the horizontal distance of the shadow from the object. Defines horizontal distance of the shadow from the object. The color, x or y properties have no effect while blur property is not defined. * @type {number} * @example * * 0 {number}, indicates the shadow's x-offset at 0 * -4 {number}, defines shadow's x-offset to -4 * 4 {number}, defines shadow's x-offset to 4 */ x: 0,

/** * @description The y field defines vertical distance of the shadow from the object. By default, it is 0. * @type {number} * @example * * 0 {number}, indicates the shadow's y-offset at 0 * -4 {number}, defines shadow's y-offset to -4 * 4 {number}, defines shadow's y-offset to 4 */ y: 0

/** * @description The primitive field defines the type of frame the object is displaying (see also pArg) * * The primitive could be any of the following predefined values: * * "Rect" {string}, defines a rectangular-object * "RoundRect" {string}, defines a round rectangular-object. The pArg.x, pArg.y define the radius of round-corners. * "BevelRect" {string}, defines a bevel rectangular-object. The pArg.x, pArg.y define the radius of round-corners. * "Ellipse" {string}, defines an elliptic-object * "Pie" {string}, defines a pie-object. The pArg.startAngle property defines the angle (radians) the pie starts from. The pArg.sweepAngle property defines the length (radians) of the pie. * "Arc" {string}, defines an arc-object. The pArg.startAngle property defines the angle (radians) the arc starts from. The pArg.sweepAngle property defines the length (radians) of the arc. * "Oval" {string}, defines an oval-object. * "Circle" {string}, defines a circle-object. * "Triangle" {string}, defines a triangle-object. * "EllipticPolygon" {string}, defines an elliptic-polygon-object. The pArg.edges property defines the number of edges within the elliptic-polygon. The pArg.startAngle property defines the angle (radians) the elliptic-polygon starts from. * "Polygon" {string}, defines a polygon-object. The pArg.points property defines points of the polygon. * "Star" {string}, defines a star-object. The pArg.edges property defines the number of edges of the star. The pArg.startAngle property defines the angle (radians) the star-object starts from. The pArg.deep defines the star's deepness, while pArg.tilt defines the star's tile as a number betwee 0 and 1 * "Spline" {string}, defines the Catmull-Rom spline-primitive (a curve that goes through its control points). The pArg.points property defines the control-points of the curve. The pArg.tension property specifies the tension of the curve, as a value ptFrom 0(round) to 1 (rectangular). The pArg.alpha specifies the alpha of the curve (0.5 by default), while pArg.closed defines a closed curve * "Summary" {string}, defines a summary-object (outlines the summary-bar) * "Deadline" {string}, defines a deadline-object (outlines the deadline-bar) * * @type {string} * @example * * null {null}, defines a rectangular-object * "Ellipse" {string}, defines an elliptic-object */ primitive: "RoundRect",

/** * @description The pArg field holds different properties to customize the object's primitive (see also primitive). * @type {object} */ pArg: {

/** * @description The x field defines the x-radius of the round-rectangle object. * * The x field has effect only if the primitive is: * * "RoundRect", defines a round-rectangle * "BevelRect", defines a bevel-rectangle * * @type {number} * @example * * 0 {number}, indicates no round-corner for x-axis * 8 {number}, defines a round corner (of 8-pixels radius) for x-axis */ x: 2,

/** * @description The y field defines the y-radius of the round-rectangle object. * * The y field has effect only if the primitive is: * * "RoundRect", defines a round-rectangle * "BevelRect", defines a bevel-rectangle * * @type {number} * @example * * 0 {number}, indicates no round-corner for y-axis * 8 {number}, defines a round corner (of 8-pixels radius) for y-axis */ y: 2,

/** * @description The startAngle field defines the angle (radians) the object's primitive starts from. * * The startAngle field has effect only if the primitive is: * * "Arc", defines an arc-object * "Pie", defines a pie-object * "EllipticPolygon", defines an elliptic-polygon-object * "Star", defines a star-object * * @type {number} * @example * * 0 {number}, indicates that the primitive starts at 0 degree (12 o'clock) * -Math.PI/2 {number}, starts at -90 degree (9 o'clock) */ startAngle: undefined,

/** * @description The sweepAngle field defines the length (as an angle in radians) of the object's primitive. * * The sweepAngle field has effect only if the primitive is: * * "Arc", defines an arc-object * "Pie", defines a pie-object * * @type {number} * @example * * 0 {number}, indicates a zero-length (the primitive may not be visible while length is 0) * Math.PI/2 {number}, defines the 90 degree length. */ sweepAngle: undefined,

/** * @description The edges field defines the number of edges of the object's primitive. It should be greater or equal than 3. * * The edges field has effect only if the primitive is: * * "EllipticPolygon", defines an elliptic-polygon-object * "Star", defines a star-object * * @type {number} * @example * * null {null}, defines a triangle * 3 {number}, defines a triangle * 8 {number}, defines an octagon */ edges: undefined,

/** * @description The points field defines the points object's polygon, or the control-points of the spline-curve. Defines the points object's polygon as an array of [[x,y]] or [{x,y}] type. There must be more than 3-points defines. * * The points field has effect only if the primitive is: * * "Polygon", defines a polygon-object. * "Spline", defines a spline-curve (a curve that goes through its control points) * * @type {array} * @example * * [[0,100],[50,0],[100,100]] {array}, defines a triangle * [{x:0,y:100},{x:50,y:0},{x:100,y:100}] {array}, defines a triangle */ points: undefined,

/** * @description The deep field defines star's deep (defines the isotoxal star-polygon's deepnnes). * * The deep field has effect only if the primitive is: * * "Star", defines a star-object * * @type {number} * @example * * null {null}, defines the start's default deep as a result of sin(PI/edges) expression based on the number of edges the star has. * 0 {number}, the star is equivalent with an elliptic-polygon * 0.5 {number}, defines the star's deep to 0.5 (half of the radius) */ deep: undefined,

/** * @description The tilt field defines star's tilt. Defines star's tilt as a number between 0 and 1. * * The tilt field has effect only if the primitive is: * * "Star", defines a star-object * * @type {number} * @example * * null {null}, defines the start's default tilt (0.5). * 0 {number}, the star' vertices go more to right * 1 {number}, the star' vertices go more to left */ tilt: undefined,

/** * @description The tension field specifies the tension of the curve(spline), as a value from 0(round) to 1 (rectangular) * * The tension field has effect only if the primitive is: * * "Spline", defines a spline-curve (a curve that goes through its control points) * * @type {number} * @example * * 0 {number} or null {null}, defines the spline's default tension (0 or round) * 1 {number}, the curve shows as rectangular */ tension: undefined,

/** * @description The tension field specifies the alpha of the curve(spline), as a value from 0 to 1 * * The alpha field has effect only if the primitive is: * * "Spline", defines a spline-curve (a curve that goes through its control points) * * @type {number} * @example * * null {null}, defines the spline's default alpha (0.5) */ alpha: undefined,

/** * @description The closed field defines a closed spline(curve) * * The closed field has effect only if the primitive is: * * "Spline", defines a spline-curve (a curve that goes through its control points) * * @type {number} * @example * * false {boolean} or null {null}, defines an opened spline-curve * true {boolean}, defines a closed spline-curve */ closed: undefined

/** * @description The draw field specifies a callback function to let you perform custom drawing on the current object. By default, the draw field is null, which indicates that it has no effect. Indicates a function, to perform additional drawing on the current object. The draw supports two parameters as follows: * * ctx {object}, An object of CanvasRenderingContext2D type that specifies the context to draw * client {array}, Indicates an array of [x,y,width,height] type that specfies the original client area to paint the object. * * During the callback the this keyword reffers the current object object. * * @type {callback} */ draw: null

} } /** * @description The exontrol.helpTFI namespace provides documentation for exontrol.TFI object, which holds font attributes to displays a text or a portion of text */ exontrol.helpTFI = { /** * @description The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. * * The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters: * * bold, displays the text in bold (equivalent of 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 <s> tag) * <fontName name>, specifies the font's family (equivalent of tag) * <fontSize size>, specifies the size of the font (equivalent of 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 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 <s> 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 <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 shacolor field defines the text's shadow (equivalent of <sha color;width;offset> tag of ex-HTML captions). * @type {object} */ shaColor: {

/** * @description The gracolor field specifies whether the text is show in gradient (equivalent of <gra color;mode;blend> tag of ex-HTML captions). * @type {object} */ graColor: {

/** * @description The shadow field holds information about box's shadow. * @type {object} */ shadow: {

/** * @description The blur field defines the blur level for shadows. * @type {number} * @example * * 0 {number}, indicates no shadow * 4 {number}, defines shadow's blur to 4 */ blur: 0,

/** * @description The pArg field holds different properties to customize the object's primitive (see also primitive). * @type {object} */ pArg: {

} } /* @license Copyright (C) Exontrol. All rights reserved. */ /////////////////////////////////////////////////////////// (exontrol.OrgChart) // // The exontrol.OrgChart class provides the following fields (public): // // Root {object}, specifies the control's root-node as an object of exontrol.OrgChart.Node type // Listeners {object}, holds a reference to exontrol.Lts which defines the events of the control. // Shortcuts {object}, holds a reference to exontrol.Sts which defines the shortcuts of the control. // // The exontrol.OrgChart class provides the following methods (public): // // GetOptions(), gets the options of the exontrol.OrgChart control // SetOptions({exontrol.Def.OrgChart}), applies new options to the exontrol.OrgChart control // Node(key), returns the control's node giving its key or plain-caption, as exontrol.OrgChart.Node type // EnsureVisibleNode(key), ensures that the giving node fits the control's visible area (it expands all parents of node). // GetFocus(), returns the control's focus node (which is the root if no selection is available) // SetFocus(key), changes the control's selection/focus to the node with the giving key (if not found, it focuses/selects the root node) // GetSelection(), returns the control's selection as null, an exontrol.OrgChart.Node type or an array of [exontrol.OrgChart.Node]. // SetSelection(value), changes the control's selection. // SelectAll, selects all nodes within the control. // UnselectAll, clears the selection. // RemoveSelection(), removes selected-nodes (including all descendants) // EnsureVisibleSelection(), scrolls the control's content to ensure that the control's selection fits the control's client area // Refresh(), refreshes the control // Smooth( callback, thisArg ), performs a smooth-transition from a layout to another. The smooth-transition goes from the current layout to the new layout generated by the first callback. // Update( callback, thisArg ), locks the control's paint during the callback, and invalidates the control once the method ends. // Layout/GetLayout()/SetLayout(value) {string}, saves or loads the control's UI layout, such as selected, collapsed nodes, scroll-position, ... (@since 1.8) // Statistics/GetStatistics() {string}, gives statistics data of objects being hold by the control // // bU(), locks invalidating the control until the eU() method is called // eU(), invalidates the control // // The exontrol.OrgChart class provides the following events (through oLts): // // "onselchange", notifies your application that the control's selection has been changed. The onselchange's parameter could be any of the following: // // oEvent {null}, indicates that the control has no selected nodes // oEvent {object}, indicates an object of exontrol.OrgChart.Node type that defines the control's single-node selected. // oEvent {array}, specifies an array of [exontrol.OrgChart.Node] type that holds all selected nodes within the control // // "onclick", occurs once the user clicks or double-clicks a node. The onclick's parameter is: // // oEvent {object}, specifies an object of {node,dblClick,button,modifiers} type, that holds information about the node being clicked. // // oEvent.node {object}, specifies null or an object of exontrol.OrgChart.Node type that indicates the node being clicked // oEvent.dblClick {boolean}, indicates whether the user clicks or double-clicks the node // oEvent.button {number}, indicates which button is pressed while clicking the node as 1 (left), 2 (right) or 4 (middle) // oEvent.modifiers {number}, specifies a combination of 1, 2, 4 and 16 according with modifier keys (ALT, CTRL, META and SHIFT), or 0 if no modifier keys // // "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 // // "onchange", (@since 1.8) notifies your application that a node, or more has been changed (expanded, checked, ...). The onchange's parameter is: // // oEvent {object}, specifies an object of {object,action} type, that holds information about the control's object being changed. // // oEvent.object {object}, specifies an object of the control being changed. The type of the object depends on the action it occured // oEvent.action {string}, Specifies the name of action such as follow: // // "expand-node" {string}, notifies that a node has been expanded or collapsed (the object refers to an exontrol.OrgChart.Node type) // // "onscroll", (@since 1.8) notifies your application once the control's view is scrolled. The onscroll's parameter is: // // oEvent {object}, specifies an object of {view,type,value} type, that holds information about the view's scroll that has been changed as explained: // // oEvent.view {object}, specifies the view, where the scroll occurs // oEvent.type {exontrol.SB.ModeEnum}, specifies the view's scroll that has changed as 0(vertical), 1(horizontal) // oEvent.value {number}, specifies the scroll's value // /////////////////////////////////////////////////////////// (exontrol.OrgChart) /////////////////////////////////////////////////////////// (exontrol.OrgChart.Node) // // The exontrol.OrgChart.Node class provides the following methods (public): // // AddChild(oOpts), adds a child-node. // AddAssistant(oOpts), adds an assistant-node. // AddGroup(oOpts), adds a group-node. // Remove(), removes the node (including all its descendants) // ClearChild(), clears the node's child-descendants. // ClearAssistant(), clears the node's assistant-descendants. // ClearGroup(), clears the node's group-descendants. // Clear(), clears the node's descendants which includes child, assistant or group-nodes. // Item(key), returns a node giving its key or caption (it looks up for any descendent node). // Options/GetOptions()/SetOptions(oOpts), defines the node's caption, image, ... all information the current node displays // Visible/GetVisible()/SetVisible(value), shows or hides the current node // Caption/GetCaption()/SetCaption(value), specifies the node's caption (ex-HTML format). // Image/GetImage()/SetImage(value), indicates the node's image. The image can be added using the exontrol.HTMLPicture.Add() method // Key/GetKey()/SetKey(value), defines the node's key. // Flow/GetFlow()/SetFlow(value), specifies the flow and arrangement the node and its descendants nodes apply. If missing or null, the flow and arrangement of the node is inherited by its parent. // Align/GetAlign()/SetAlign(value), specifies the assistant/child-nodes' alignment relative to the node itself. If null or missing, the parent's align is considered. // Margins/GetMargins()/SetMargins(value), indicates the horizontal/vertical/indent distance between nodes. If null or missing, the parent's margins are considered. // Show/GetShow()/SetShow(value), shows or hides the descendent-nodes the current node, like assistant, child or group-nodes. // ShowExpandGlyphs/GetShowExpandGlyphs()/SetShowExpandGlyphs(value), shows or hides the node's expand/collapse glyphs is shown for different type of nodes. // SingleExpandGlyphs/GetSingleExpandGlyphs()/SetSingleExpandGlyphs(value), shows one or more expand/collapse glyphs for the nodes. // GetExpandType(nNodeType)/SetExpandType(nNodeType, value), expands or collapses the node's direct-descendants (by type). // Expand/GetExpand()/SetExpand(value), expands or collapses the node's direct-descendants. // Pad/GetPad()/SetPad(value), specifies the space between node's content and its borders. // FormatText/GetFormatText()/SetFormatText(value), specifies the format to display the node's caption. // ImageAlign/GetImageAlign()/SetImageAlign(value), specifies the alignment of the node's image. // Size/GetSize()/SetSize(value), specifies the size, range of limits the node's caption is displayed. // ImageSize/GetImageSize()/SetImageSize(value), defines the size of the node's image. // Shapes/GetShapes()/SetShapes(value), defines the shapes for the node including its descendants. // Cursors/GetCursors()/SetCursors(value), defines the mouse cursor(s) for the node including its descendants. // Shape/GetShape()/SetShape(value), defines the shape for the node itself. // Cursor/GetCursor()/SetCursor(value), defines the mouse cursor for the node itself. // Enabled/GetEnabled()/SetEnabled(value), enables or disables the node. // Selectable/GetSelectable()/SetSelectable(value), indicates whether the user can select the node. // Link/GetLink()/SetLink(value), gets or sets the attributes of the link between a node and its descendent nodes. // Linka/GetLinka()/SetLinka(value), gets or sets the attributes of the linka between a node and its assistant-nodes. // Linkg/GetLinkg()/SetLinkg(value), gets or sets the attributes of the linkg between a node and its group-nodes. // Nodes/GetNodes()/SetNodes(value), defines the node from/to a string-representation of the current node, and all its descendent-nodes. // Parent/GetParent()/SetParent(value), defines the node's parent // Position/GetPosition()/SetPosition(value), defines the node's position // /////////////////////////////////////////////////////////// (exontrol.OrgChart.Node) /////////////////////////////////////////////////////////// (exontrol.Def.OrgChart) // // The exontrol.Def.OrgChart namespace provides definitions for different objects, primitives, objects of exontrol.OrgChart object // // The exontrol.Def.OrgChart namespace provides the following fields: // // scrollBars {exontrol.ScrollBarsEnum}, specifies how the scroll-bars are being displayed into the exontrol.CW object. This flag is applied to windows with HScroll/VScroll flag set // scrollBarsRoot {string}, specifies the color to highlight the position of root on the control's scroll bars. // tfi {(string|object)}, holds the font attributes for captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. // locked {boolean}, indicates whether the control is locked(protected) or unlocked // readOnly {boolean}, indicates whether the control is read-only // wheelChange {number}, specifies the amount the control scrolls when the user rolls the mouse wheel. // expandGlyphSize {number}, specifies the size to show the node's expand/collapse glyphs. // flow {exontrol.OrgChart.Layout.FlowEnum}, specifies the flow and arrangement of the control. // align {exontrol.AlignEnum}, specifies the assistant/child-nodes' alignment relative to the node itself. // margins {object}, specifies the horizontal and vertical distance between nodes {x,y,indent,border}. // showExpandGlyphs {exontrol.OrgChart.NodeTypeEnum}, specifies whether the expand/collapse glyphs is shown for different type of nodes. // singleExpandGlyphs {boolean}, specifies whether the node displays a single or multiple expand/collapse glyphs. // show {exontrol.OrgChart.NodeTypeEnum}, specifies the type of nodes the chart displays (filters the nodes by type) // filter {string}, specifies a wild-character expression that defines the mask to match the node's plain caption. For instance "*a" indicates every caption that ends on `a` // smooth {number}, defines the time in ms the control goes from one layout to another. // singleSel {exontrol.OrgChart.SingleSelEnum}, specifies whether the control supports single, multiple, toggle selection. // ensureOnExpand {boolean}, specifies whether the control scrolls its content to ensure that the node's descendants fits it. // expandOnDblClick {boolean}, indicates whether the node gets expanded as soon as the user double-clicks the node. // pad {(number|string|array)} defines the node's padding (space between the node's content and its border) // formatText {exontrol.DrawTextFormatEnum}, specifies the format to display the node's caption. // imageAlign {number}, defines the alignment of the image within the node. // size {(null|number|array)}, defines the size or limits of the node's caption. // imageSize {(null|number|array)}, defines the size of the node's image. // 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. // showLinks {exontrol.ShowLinksEnum}, indicates whether the control shows or hides the links between nodes. // link {object}, specifies the attributes of the link between a node and its descendent nodes. // linka {object}, specifies the attributes of the link between a node and its assistent-nodes. // linkg {object}, specifies the attributes of the link between a node and its group-nodes. // nodes {string}, builds the control's hierarchy from a string-representation. // allowActions {string}, customizes the actions the user can perform once the user clicks or touches the control. // /////////////////////////////////////////////////////////// /** * @description The exontrol.Def.OrgChart namespace provides definitions for different objects, primitives, objects of exontrol.OrgChart object */ exontrol.Def.OrgChart = {

/** * @description The scrollBars field determines whether the control has horizontal and/or vertical scroll bars * * The exontrol.ScrollBarsEnum type defines the following flags: * * exNoScroll (0), specifies that no scroll bars are shown (scroll is not allowed) * exHorizontal (1), specifies that only horizontal scroll bars is shown * exVertical (2), specifies that only vertical scroll bars is shown * exBoth (3), specifies that both horizontal and vertical scroll bars are shown * exDisableNoHorizontal (5), specifies that the horizontal scroll bar is always shown, it is disabled if it is unnecessary * exDisableNoVertical (10), specifies that the vertical scroll bar is always shown, it is disabled if it is unnecessary * exDisableBoth (15), specifies that both horizontal and vertical scroll bars are always shown, disabled if they are unnecessary * exHScrollOnThumbRelease (0x100), specifies that the control's content is horizontally scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released) * exVScrollOnThumbRelease (0x200), specifies that the control's content is vertically scrolled as soon as the user releases the thumb of the vertical scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released) * exScrollOnThumbRelease (0x300), specifies that the control's content is scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released) * exHScrollEmptySpace (0x400), allows empty space, when the control's content is horizontally scrolled to the end * exVScrollEmptySpace (0x800), allows empty space, when the control's content is vertically scrolled to the end * exScrollEmptySpace (0xC00), allows empty space, when the control's content is scrolled to the end * exExtendSBS (0x3000), specifies that the control's scroll-bars are visible only when cursor hovers the window. Also, the control's client area is extended on the scroll bars portion * exMinSBS (0xC000), specifies that the control's scroll-bars are shown as minimized * exHideSBS (0x10000), specifies that no scroll bars are shown (scroll is allowed) * * @type {exontrol.ScrollBarsEnum} * @example * * 0 or exontrol.ScrollBarsEnum.exNoScroll {number}, removes the control's scroll bars, so scroll is not allowed * 15 or exontrol.ScrollBarsEnum.exDisableBoth {number}, the control always displays the scroll bars, and they are active only if scroll is possible * 12291 or exontrol.ScrollBarsEnum.exBoth | exontrol.ScrollBarsEnum.exExtendSBS {number}, the control shows the scroll bars only if the cursor hovers the control, and the control scroll bars are hidden as soon as the cursor leaves the control */ scrollBars: exontrol.ScrollBarsEnum.exBoth,

/** * @description The scrollBarsRoot field specifies the color to highlight the position of root on the control's scroll bars. Indicates null, to prevent showing the position of root on the control's scroll bars, or a CSS color * @type {string} * @example * * null {null}, hides the position of the root on the control's scroll bar * "black" {string}, shows the position of the root on the control's scroll bar in black */ scrollBarsRoot: null,

/** * @description The locked field indicates whether the control is locked(protected) or unlocked * @type {boolean} * @example * * false {boolean}, unlocks the control (can select any node) * true {boolean}, locks the control (can't select any node) */ locked: false,

/** * @description The readOnly field indicates whether the control is read-only * @type {boolean} * @example * * false {boolean}, the control is not read-only * true {boolean}, the control is read-only */ readOnly: false,

/** * @description The wheelChange field specifies the amount the control scrolls when the user rolls the mouse wheel. * @type {number} * @example * * 0 {number}, locks any action the mouse's wheel performs * 18 {number}, scrolls the control by 18-pixels when mouse's wheel is rotated (CTRL + wheel scrolls horizontally) */ wheelChange: 18,

/** * @description The expandGlyphSize field specifies the size to show the node's expand/collapse glyphs * @type {number} * @example * * 0 {number}, displays no node's expand/collapse glyphs * 24 {number}, specifies a size of 24x24 to display the node's expand/collapse glyphs */ expandGlyphSize: 16,

/** * @description The flow field specifies the flow and arrangement of the nodes within the control. * * The exontrol.OrgChart.Layout.FlowEnum type defines the following values: * * exFlowVertical ("flowVertical"), indicates that any assistant or child-node goes down, while any group-node goes right * exFlowHorizontal ("flowHorizontal"), indicates that any assistant or child-node goes right, while any group-node goes down * exFlowVerticalTree ("flowVerticalTree"), indicates any assistant or child-node goes down and indented to right, while any group-node goes right * exFlowHorizontalTree ("flowHorizontalTree"), indicates any assistant or child-node goes right and indented down, while any group-node goes down * * @type {exontrol.OrgChart.Layout.FlowEnum} * @example * * "flowVertical" or exontrol.OrgChart.Layout.FlowEnum.exFlowVertical {string}, indicates that any assistant or child-node goes down, while any group-node goes right * "flowVerticalTree" or exontrol.OrgChart.Layout.FlowEnum.exFlowVerticalTree {string}, arranges the nodes as a tree */ flow: exontrol.OrgChart.Layout.FlowEnum.exFlowVertical,

/** * @description The align field specifies the assistant/child-nodes' alignment relative to the node itself. * * The exontrol.AlignEnum type supports the following values: * * exAlignLeft (0), aligns object to the left * exAlignCenter (1), centers object horizontally in the rectangle * exAlignRight (2), aligns object to the right * * @type {exontrol.AlignEnum} * @example * * 0 or exontrol.AlignEnum.exAlignLeft {number}, aligns the nodes to the top-left corner * 2 or exontrol.AlignEnum.exAlignRight {number}, right aligns the node relative to its parent */ align: exontrol.AlignEnum.exAlignCenter,

/** * @description The margins field specifies the horizontal and vertical distance between nodes. Indicates an object of {x,y,indent,border} type that horizontal, vertical and indent distance between nodes. * @type {object} */ margins: {

/** * @description The x field defines the horizontal distance between two visible neighbor nodes. * @type {number} * @example * * 0 {number}, defines no horizontal distance between two visible neighbor nodes * 16 {number}, defines 16-pixels horizontal distance between two visible neighbor nodes */ x: 16,

/** * @description The y field defines the vertical distance between two visible neighbor nodes. * @type {number} * @example * * 0 {number}, defines no vertical distance between two visible neighbor nodes * 16 {number}, defines 16-pixels vertical distance between two visible neighbor nodes */ y: 16,

/** * @description The indent field defines the distance between a child node and its parent, while the nodes are arranged as a tree. * @type {number} * @example * * 0 {number}, defines no indention * 16 {number}, defines 16-pixels indention */ indent: 16,

/** * @description The border field defines the distance between the nodes and the border of the control. * @type {number} * @example * * 0 {number}, defines no space between control's borders and nodes * 16 {number}, defines 16-pixels distance between the nodes and the border of the control */ border: 16

/** * @description The showExpandGlyphs field specifies whether the expand/collapse glyphs is shown for different type of nodes. Indicates a combination of one of more exontrol.OrgChart.NodeTypeEnum flags that determines the type of nodes for who the expand/collapse glyphs are visible. * * The exontrol.OrgChart.NodeTypeEnum defines the following flags (type of nodes): * * exNodeChild (1), specifies a node of child-type * exNodeAssistant (2), specifies a node of assistant-type * exNodeGroup (4), specifies a node of group-type * * @type {exontrol.OrgChart.NodeTypeEnum} * @example * * null {null}, the expand/collapse glyphs are displayed for any type of nodes: child, assistant or group * 0 {number}, no expand/collapse glyphs are displayed for any type of nodes: child, assistant or group * 1 or exontrol.OrgChart.NodeTypeEnum.exNodeChild {number}, shows the expand/collapse glyphs nodes of child type only */ showExpandGlyphs: null,

/** * @description The singleExpandGlyphs field specifies whether the node displays a single or multiple expand/collapse glyphs. * @type {boolean} * @example * * false {boolean}, the node displays expand/collapse glyphs for each type of node the current node has (child, assistant or group) * true {boolean}, the node displays a single expand/collapse glyphs for any type of node the current node has (child, assistant or group) */ singleExpandGlyphs: false,

/** * @description The show field specifies the type of nodes the chart displays (filters the nodes by type). Indicates null (no filter), or a combination of one or more exontrol.OrgChart.NodeTypeEnum flags that defines the type of nodes the chart displays * * The exontrol.OrgChart.NodeTypeEnum defines the following flags (type of nodes): * * exNodeChild (1), specifies a node of child-type * exNodeAssistant (2), specifies a node of assistant-type * exNodeGroup (4), specifies a node of group-type * * @type {exontrol.OrgChart.NodeTypeEnum} * @example * * null {null}, no filter by type is applied * 0 {number}, displays the control's root only with no child, assistant or group nodes * 1 or exontrol.OrgChart.NodeTypeEnum.exNodeChild {number}, displays the child nodes only (no assistant or group nodes) */ show: null,

/** * @description The filter field specifies a wild-character expression that defines the mask to match the node's plain caption. Indicates null (no filter), or a wild-character expression that defines the mask to match the node's plain caption. * * The filter supports the following wild-characters: * * "*", matches zero or more characters. For instance "a*" indicates anything that starts with "a" or "A". * "#", matches one digit (0-9). For instance "a##", indicates anything that starts with "a" or "A" followed by exactly two digits, such as "a12" but not "a1". * "?", matches one character. For instance "a??", indicates anything that starts with "a" or "A" followed by exactly two characters, such as "abc" but not "ab". * "[a-z]", matches any character within the giving range. For instance "[a]*" indicates anything that starts with "a", or "[a-z]*" anything that starts with a lowercase letter. * " " (space character), separates the OR pattern-masks. For instance "a* *b", masks for anything that starts with "a" or "A" or ends with "b" or "B" * * @type {string} * @example * * null {null} or "" {string}, no filter is applied * "s*" {string}, filter for nodes that starts with "s" or "S" (case insensitive) * "[s]*" {string}, filter for nodes that starts with "s" (case sensitive) * "*Stela* Evan" {string}, filter for nodes that contains "Stela" or with exactly caption "Evan" */ filter: null,

/** * @description The smooth field defines the time in ms the control goes from one layout to another. * @type {number} * @example * * 0 {number}, no smooth changes once the control goes from a layout to another * 125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms. */ smooth: 125,

/** * @description The singleSel field specifies whether the control supports single, multiple, toggle selection. * * The exontrol.OrgChart.SingleSelEnum type defines the following flags: * * exDisableSel(0), specifies that the control's selection is disabled (can not be combined with any other flags) * exEnableSel(1), specifies that the control's selection is enabled (multiple-selection, unless the exSingleSel is set ) * exSingleSel(2), specifies that the user can select a node only * exToggleSel(4), specifies that the node's selection state is toggled once the user clicks a node. * exDisableCtrlSel(8), disables toggling the node's selection state when user clicks a node, while CTRL modifier key is pressed. * exDisableShiftSel(16), disables selecting nodes using the SHIFT key. * exDisableDrag(32), disables selecting nodes by drag. * * @type {exontrol.OrgChart.SingleSelEnum} * @example * * 0 or exontrol.OrgChart.SingleSelEnum.exDisableSel {number}, disables selecting any node * 3 or exontrol.OrgChart.SingleSelEnum.exSingleSel | exontrol.OrgChart.SingleSelEnum.exEnableSel {number}, enables control's single selection, so only a single node can be selected * 6 or exontrol.OrgChart.SingleSelEnum.exToggleSel | exontrol.OrgChart.SingleSelEnum.exSingleSel {number}, enables control's single and toggle selection, which means that once a node is selected it gets unselected once it is clicked, or reverse, and only a single-node can be selected at once. */ singleSel: exontrol.OrgChart.SingleSelEnum.exEnableSel,

/** * @description The ensureOnExpand field specifies whether the control scrolls its content to ensure that the node's descendants fits it. * @type {boolean} * @example * * false {boolean}, once a node is expanded or collapsed the control is not scrolled to ensure that the node's descendants fits it. * true {boolean}, once a node is expanded or collapsed the control is scrolled to ensure that the node's descendants fits it. */ ensureOnExpand: true,

/** * @description The expandOnDblClick field indicates whether the node gets expanded as soon as the user double-clicks the node. * @type {boolean} * @example * * false {boolean}, the node is not expanded or collapsed once the user double-clicks it. * true {boolean}, the node is expanded or collapsed once the user double-clicks it. */ expandOnDblClick: true,

/** * @description The pad field defines the node's padding (space between the node's content and its border). A value that could be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size * @type {(number|string|array)} * @example * * null {null}, indicates that the default-padding field is used ([4,4]) * 0 {number}, indicates no padding * "8,4" {string}, increases the node's width with 2 * 8-pixels and node's height with 2 * 4-pixels * [8,4] {array}, increases the node's width with 2 * 8-pixels and node's height with 2 * 4-pixels */ pad: [4,4],

/** * @description The formatText field specifies the format to display the node's caption. * * The exontrol.DrawTextFormatEnum type support the following flags: * * exTextAlignTop (0x00), justifies the text to the top of the rectangle * exTextAlignLeft (0x00), aligns text to the left * exTextAlignCenter (0x01), centers text horizontally in the rectangle * exTextAlignRight (0x02), aligns text to the right * exTextAlignVCenter (0x04), centers text vertically * exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle. * exTextAlignMask (0x0F), specifies the mask for text's alignment. * exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line. * exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line. * exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight. * exPlainText (0x80), treats the text as plain text. * exTextNoClip (0x0100), draws without clipping. * exHTMLTextNoColors (0x0200), ignores the <fgcolor> and </bgcolor> tags. * exTextCalcRect (0x0400), determines the width and height of the text. * exHTMLTextNoTags (0x0800), ignores all HTML tags. * exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash. * exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses. * exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses. * * @type {exontrol.DrawTextFormatEnum} * @example * * null {null}, centers the caption * 32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line caption * 0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line caption right/bottom-aligned */ formatText: exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextAlignVCenter | exontrol.DrawTextFormatEnum.exTextWordBreak | exontrol.DrawTextFormatEnum.exTextWordEllipsis,

/** * @description The imageAlign field defines the alignment of the image within the node. * * The imageAlign propery can be any of the following: * * 0, the image is on the left of the node's caption * 1, the image is on the right of the node's caption * 2, the image is on the top of the node's caption * 3, the image is on the bottom of the node's caption * * @type {number} * @example * * null {null}, the image is on top of the node's cation (default value) * 1 {number}, the image is displayed to the left of the node's caption */ imageAlign: 2 /*top*/,

/** * @description The size field defines the size, range of limits the node's caption is displayed. * * The size field could be any of the following: * * null {null}, specifies no limit for the node's caption. * number {number}, specifies that the node's caption is displayed into a square of giving size (same width and height ). If 0 the node displays no caption * [min-width,min-height,max-width,max-height] {array}, Specifies an array of [min-width,min-height,max-width,max-height] type that defines the limits for width or/and height of the measured caption. The min-width,min-height,max-width,max-height can be null which indicates that the limit is ignored, or a positive number that specifies the limit (min or max) * * @type {any} * @example * * null {null}, the node's caption is displayed with no limits * 0 {number}, the node's caption is hidden * 64 {number}, the node's caption is always displayed into a 64x64 square * 64 {number}, the node's caption is always displayed into a 64x64 square * [null, null, 128, null] {array}, limits the node's width up to 128 pixels * [128, null, 128, null] {array}, indicates that node's width is always 128 pixels * [128, null, null, null] {array}, indicates that node's minimum width is 128 pixels * [32, 18, 128, 64] {array}, indicates that node's width varies between 32 and 128 pixels, while the node's height varies between 18 and 64 pixels */ size: null,

/** * @description The imageSize field defines the size of the node's image. * * The imageSize could be of one of the following types: * * {null}, Indicates that the node's image is displayed as it is (full-sized). * {number}, Specifies that the node's image is displayed into a square of giving size (same width and height). If 0 the node displays no image, if negative the node's image is stretched to giving square, else the node's picture is scaled to fit the giving rectangle. * {array}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the node's picture to scale or stretch to. * * @type {(null|number|array)} * @example * * null {null}, Indicates that the node's image is displayed as it is (full-sized). * 0 {number}, no image is displayed * 64 {number}, the image is scaled to fit a 64 x 64 rectangle * -64 {number}, the image is strected to a 64 x 64 rectangle * [32,64] {array}, scales the image to the largest ratio-rectangle (32 x 64) that fits the client * [-32,-64] {array}, stretches the image to a 32 x 64 rectangle */ imageSize: null,

/** * @description The shapes field defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. * * 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": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}') * specifies the name of the field within the exontrol.Shapes.OrgChart object (while it starts with a lowercase letter, such as dfnode which refers to exontrol.Shapes.OrgChart.dfnode 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: * * "node" (node), defines the visual appearance for any node * "nodea" (assistant-node), defines the visual appearance for assistant-nodes * "nodeg" (group-node), defines the visual appearance for group-nodes * "expand", specifies the visual appearance for expand/collapse glyphs * "select" (selection), defines the visual appearance for selected nodes * "frameFit", defines the visual-appearance to display the frame while fitting nodes into the control's client area by drag * "frameSel", defines the visual appearance to display a frame while selecting nodes by drag * "frameDrag", specifies the visual appearance to display a frame while dragging the nodes * "multiSel", specifies the visual appearance to show the count of multiple-selected items * * @type {string} * @example * * null {null}, specifies the default visual appearance * "" {string}, no shape (no visual appearance is applied to any part of the control) * "red(node)", "#FF0000(node)", "rgb(255,0,0)(node)", "rgba(255,0,0,1)(node)" {string}, shows all-nodes in red * '{"hover":{"frameColor":"black","pad":-0.5}}(node)' {string}, draws a black-frame arround the node being hovered * "xxx(d),yyy(d,m),zzz(y)" {string}, specifies that the exontrol.Shapes.OrgChart.xxx combined with exontrol.Shapes.OrgChart.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.OrgChart.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.OrgChart.zzz object defines the visual appearance of "y" part of the control */ shapes: "node(node),nodeA(nodea),nodeG(nodeg),Expand(expand),frameSel(select),FrameSel(frameSel),FrameFit(frameFit),Empty(frameDrag),shmulti(multiSel)",

/** * @description The cursors field 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: * * "node" (node), indicates any node * "nodea" (assistant-node), indicates assistant-nodes * "nodeg" (group-node), indicates group-nodes * "expand" (expand/collapse), indicates node's expand/collapse glyphs * "anchor" (hyperlink), indicates the anchor-element (the <a> ex-HTML part marks an anchor or hyperlink element) (@since 2.2) * "select" (selection), indicates selected nodes * "drag-drop", defines the cursor while the node is being dragged using the "drag-drop" action * * @type {string} * @example * * "pointer(expand,node)" {string}, indicates that the "pointer" mouse cursor is shown while cursor hovers any "node" or "expand" part of the control (expand/collapse glyphs) * "pointer(expand),crosshair(node)" {string}, indicates that the "pointer" mouse cursor is shown while cursor hovers the "expand" part of the control (expand/collapse glyphs), and "crosshair" mouse cursor while it hovers any "node" */ cursors: "pointer(expand,drag-drop,anchor)",

/** * @description The showLinks field indicates whether the control shows or hides the links between nodes. * * The exontrol.ShowLinksEnum type supports the following flags: * * exHide (0), specifies that no links are visible * exExtended (0x01), specifies that links are shown as extended * exShow (0x02), specifies that links are visible (the links are always shown while not exHide) * exFront (0x10), specifies that links are shown in front (by default, the control are shown on the background) * exCrossRect (0x20), shows rectangular cross-links * exCrossTriangle (0x20), shows triangular cross-links * exCrossMixt (0x60), shows mixt cross-links * * @type {exontrol.ShowLinksEnum} * @example * * 0 or exontrol.ShowLinksEnum.exHide {number}, hides the links * 1 or exontrol.ShowLinksEnum.exShow {number}, shows the links (on the background) * 33 or exontrol.ShowLinksEnum.exExtended | exontrol.ShowLinksEnum.exCrossRect {number}, shows "extended" and "cross" links */ showLinks: exontrol.ShowLinksEnum.exExtended | exontrol.ShowLinksEnum.exCrossRect,

/** * @description The link field specifies the attributes of the link between a node and its descendent nodes. * * The link object includes any of the following: * * type {exontrol.LinkTypeEnum}, specifies the type of the link as -1 (default), 0 (rectangular), 1 (direct), 2(straight) or 3(round) * dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides * width {number}, specifies the link's width or size (1 by default) * color {string}, indicates the link's color (partial-black by default) * arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default) * arrowSize {number}, indicates the arrow's size. If it is missing or not specified the arrow's size is defined by link's width (1 by default) (since 2.2) * arrowShape {object}, defines an object of exontrol.Def.Shape type to customize the shape of the link's arrow (for instance shows the link's arrow as a circle instead of a triangle) (since 2.2) * style {array}, specifies the link's dash pattern to show the lines (solid by default) * * @type {object} */ link: {

/** * @description The type field specifies the type of the link. * * The exontrol.LinkTypeEnum type defines the following values: * * exRect (0), defines a rectangular-link * exDirect (1), defines a direct-link * exStraight (2), defines a straight-link * exRound (3), defines a round-link * * Also, the type field supports the value: * * -1, which indicates the default type of link, which is similar with rectangular-link but more symmetrical * * @type {exontrol.LinkTypeEnum} * @example * * null {null}, indicates the default type of link, which is similar with rectangular-link but more symmetrical (equivalent of -1) * 0 or exontrol.LinkTypeEnum.exRect {null}, shows rectangular-links * 2 or exontrol.LinkTypeEnum.exStraight {null}, shows straight-links */ type: undefined,

/** * @description The dir field specifies whether the link's direction is shown or hidden * * The dir field can be any of the following values: * * 0, specifies that no direction for the link is shown * 1, shows the direction/arrow where the link begins * 2, shows the direction/arrow where the link ends * 3, shows the arrows on both sides * * If not specified, the option 2 is used by default. * * @type {number} * @example * * null {null}, shows the direction/arrow where the link ends (equivalent of 2) * 0 {number}, hides the link's direction * 3 {number}, shows the arrows on both sides */ dir: undefined,

/** * @description The width field defines the size/width of the link. * @type {number} * @example * * null {null}, indicates links of 1-pixel wide * 2 {number}, indicates links of 2-pixels wide */ width: undefined,

/** * @description The color field specifies the color to show the link * @type {string} * @example * * null {null}, indicates a black link * "transparent" {string}, specifies a transparent link * "red" {string}, specifies a red link * "#00FF00" {string}, specifies a green link * "rgba(255,0,0,0.5)" {string}, indicates 50% red link */ color: "rgba(0,0,0,0.5)",

/** * @description The arrow field indicates the arrow's color. * * If it is missing or not specified the arrow is shown using the link's color. * * @type {string} * @example * * null {null}, indicates that the link's color defines the color of the link's arrow * "transparent" {string}, specifies a transparent arrow * "red" {string}, specifies a red arrow * "#00FF00" {string}, specifies a green arrow * "rgba(255,0,0,0.5)" {string}, indicates 50% red arrow */ arrow: "rgb(128,128,128)",

/** * @description The style field defines the style of the link. An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. * @type {array} * @example * * null {null}, defines a solid grid-lines * [] {array}, indicates a solid grid-lines * 2 {number}, will become [2, 2, ...] * [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...] */ style: undefined

}, /** * @description The linka field specifies the attributes of the link between a node and its assistent-nodes. * @type {object} * * The linka object includes any of the following: * * type {exontrol.LinkTypeEnum}, specifies the type of the link as -1 (default), 0 (rectangular), 1 (direct), 2(straight) or 3(round) * dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides * width {number}, specifies the link's width or size (1 by default) * color {string}, indicates the link's color (partial-black by default) * arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default) * arrowSize {number}, indicates the arrow's size. If it is missing or not specified the arrow's size is defined by link's width (1 by default) (since 2.2) * arrowShape {object}, defines an object of exontrol.Def.Shape type to customize the shape of the link's arrow (for instance shows the link's arrow as a circle instead of a triangle) (since 2.2) * style {array}, specifies the link's dash pattern to show the lines (solid by default) */ linka: {

/** * @description The arrow field indicates the arrow's color. Defines the color to show the link's arrow/direction into CSS color format * @type {string} * * If it is missing or not specified the arrow is shown using the link's color. * * @example * * null {null}, indicates that the link's color defines the color of the link's arrow * "transparent" {string}, specifies a transparent arrow * "red" {string}, specifies a red arrow * "#00FF00" {string}, specifies a green arrow * "rgba(255,0,0,0.5)" {string}, indicates 50% red arrow */ arrow: "rgb(192,192,192)",

}, /** * @description The linkg field specifies the attributes of the link between a node and its group-nodes. * @type {object} * * The linkg object includes any of the following: * * type {exontrol.LinkTypeEnum}, specifies the type of the link as -1 (default), 0 (rectangular), 1 (direct), 2(straight) or 3(round) * dir {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides * width {number}, specifies the link's width or size (1 by default) * color {string}, indicates the link's color (partial-black by default) * arrow {string}, indicates the arrow's color. If it is missing or not specified the arrow is shown using the link's color (gray by default) * arrowSize {number}, indicates the arrow's size. If it is missing or not specified the arrow's size is defined by link's width (1 by default) (since 2.2) * arrowShape {object}, defines an object of exontrol.Def.Shape type to customize the shape of the link's arrow (for instance shows the link's arrow as a circle instead of a triangle) (since 2.2) * style {array}, specifies the link's dash pattern to show the lines (solid by default) * */ linkg: {

/** * @description The style field defines the style of the link. An array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. * @type {array} * @example * * null {null}, defines a solid grid-lines * [] {array}, indicates a solid grid-lines * 2 {number}, will become [2, 2, ...] * [5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...] */ style: [2]

/** * @description The nodes field defines the control's hierarchy from a string-representation. * * The format of the nodes'string representation is (everything between () refers to children, and everything between [] refers to flags): * * "Root(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: * * [a], indicates a node of assistant-type * [g], indicates a node of group-type * [vert], [horz], [tree] or [htree], defines the node's flow and arrangement as vertical, horizontal, tree or horizontal tree * [c], indicates that the child of the node are collapsed * [ca], indicates that the child of assistant-type are collapsed * [cg], indicates that the child of group-type are collapsed * [dis], specifies that the node is disabled * [nsel], specifies that the user can't select the node * [id={value}], specifies the node's key/identifier. The {value} specifies the key of the node [id=home] * [img={value}], indicates the image of the node. The {value} indicates the name of an exontrol.HP, such as [img=logo]. The image can be added using the exontrol.HTMLPicture.Add() method * [shape={value}], specifies the node's appearance. The {value} indicates the name of the shape to be applied on the node itself [shape=nodeBlue] * [cursor={value}], indicates the mouse cursor for the node itself. The {value} indicates the mouse cursor to show once the cursor hovers the node itself [cursor=pointer] * * @type {string} * @example * * "" {string}, clears the nodes collection * "Root(1,2,3[g])" {string}, adds two child-nodes 1, 2 and 3 as a group-node of the root * "xxx([img=Stela],[img=Al],[img=Peggy](A1[a],A2[a]))" {string}, renames the root's node to "xxx", with a three-child nodes with images "Stela", "Al" and "Peggy", and "Peggy" has two-assistant nodes "A1" and "A2" */ nodes: null,

/** * @description The zoom field defines the zoom factor of the control's content. The zoomLevels field defines the margins of the zoom-factor the control is allowed to magnify. The zoom field can be any value between 10 (10%) and 1000 (1000%) * @type {number} * @example * * null {null}, Specifies normal-view (100%) * 150 {number}, Indicates that the control's content is magnfied to 150% */ zoom: null,

/** * @description The zoomLevels field defines the zoom-levels the user can magnify the control's content * @type {string} * @example * * null {null}, Specifies that the control's zoom factor is always 100% * 150 {number}, Specifies that the control's zoom factor is always 150% * "50,100,200,350" {string}, Indicates that the zoom-factor can be any of selected values, and the margins of zoom-factor is 50% to 350% */ zoomLevels: "25,35,50,65,75,80,90,100,110,125,150,175,200,250,300,400,500", // *Added: By default, the ZoomLevels property is set to ""25,35,50,65,75,80,90,100,110,125,150,175,200,250,300,400,500", and so the user can automatically zoom the control usingthe middle-button (@since 1.7)

/** * @description The allowActions field customizes the actions the user can perform once the user clicks or touches the control. * * The format of allowActions field is: * * "action(shortcut,shortcut,...),action(shortcut,shortcut,...)..." * * where * * "action", indicates the name of the action. The "action" can have any of the following values: * * "scroll", scrolls the control's content by drag * "zoom", zooms the control's content at dragging-point * "fit", fits the drag-area into the control's client area * "select", selects nodes by drag * "move", moves nodes to a new parent or position by drag (not available if the control is read-only) * "drag-drop", carries out the drag and drop of the node (the node can be dropped inside or outside of the control). The ExDrop(event, data) method of the target HTML element is invoked once the user drops the node. The event parameter holds information about the mouse/touch event once the node has been dropped. The data parameter holds information about the source-object that initiated the drag and drop operation, as an object of {object,source,client,shape} type. * * "shortcut", defines the event's button or/and the modifier-keys that are required to perform the action. The "shortcut" is a combination of none, one or more of the following values: * * "Shift", indicates that the SHIFT key is pressed * "Ctrl" or "Control", indicates that the CTRL key is pressed * "Alt" or "Menu", indicates that the ALT key is pressed * "Meta" , indicates that the META key is pressed * "LButton", specifies that the mouse's left-button is pressed * "RButton", specifies that the mouse's right-button is pressed * "MButton", specifies that the mouse's middle/wheel-button is pressed * "Long", specifies that the action requires a "long" click/touch before run * "+", indicates AND between values * * @type {string} * @example * * null {null}, indicates the control's default allowActions value * "" {string}, specifies that no operation is allowed once the user clicks or touches the control * "scroll" {string}, specifies that only "scroll" operation is allowed, no matter of the event's button or modifier-keys is pressed. * */ allowActions: "fit(Shift+MButton,Ctrl+MButton,Alt+MButton),zoom(MButton),select(Shift,Ctrl),scroll",

/** * @description The selection field defines the control's selection, as one of the following: * * value {null}, null specifies that the entire selection is removed/cleared * value {string}, specifies the key/identifier or plain-caption of the node * value {exontrol.OrgChart.Node}, specifies an object of exontrol.OrgChart.Node type * value {array}, specifies an array of [exontrol.OrgChart.Node], [string], [string | exontrol.OrgChart.Node] type * * @type {any} * @example * * null {null}, removes the control's selection * "Root" {string}, select the control's root node * * @since 1.8 */ selection: null

} /////////////////////////////////////////////////////////// (exontrol.Shapes.OrgChart) // // The exontrol.Shapes.OrgChart namespace provides support to customize the visual appearance of different parts of the exontrol.OrgChart object. // /////////////////////////////////////////////////////////// /** * @description The exontrol.Shapes.OrgChart namespace provides support to customize the visual appearance of different parts of the exontrol.OrgChart object. */ exontrol.Shapes.OrgChart = exontrol.DfO( exontrol.Shapes.OrgChart /*inherits the default exontrol.Shapes.OrgChart like dfnode, ... */, { /** * @description The node field specifies the visual appearance to display the nodes. Indicates an object of {normal, disabled,hover,click} type * @type {object} */

node:

{

/** * @description The normal field includes definitions to draw the object in normal state. An object of exontrol.Def.Shape type to be applied on the part's background on normal state. * @type {object} */ normal: { primitive: "RoundRect",

frameColor: "rgb(128,128,128)",

fillColor: "white"

/** * @description The disabled field includes definitions to draw the object in disabled state. An object of exontrol.Def.Shape type to be applied on the part's background on disabled state. * @type {object} */ disabled: { opacity: 0.5

} }, /** * @description nodeA node field specifies the visual appearance to display the assistant-nodes. Indicates an object of {normal, disabled,hover,click} type * @type {object} */

nodeA:

{

frameColor: "rgb(192,192,192)",

fillColor: "rgb(240,240,240)"

} }, /** * @description nodeG node field specifies the visual appearance to display the group-nodes. Indicates an object of {normal, disabled,hover,click} type * @type {object} */

nodeG:

{

frameColor: "rgb(224,224,224)",

fillColor: "rgb(212,212,212)"

} }, /** * @description The frameSel field specifies the visual appearance to display the selected nodes. Indicates an object of {normal, disabled,hover,click} type * @type {object}

frameSel:

{

/** * @description The normal field includes definitions to draw the part in normal state. An object of exontrol.Def.Shape type to be applied on the part in normal state. * @type {object} */ normal: { frameColor: "rgba(64,128,255,0.50)",

frameSize: 1.5,

primitive: "RoundRect",

pad: 2

}

/** * @description The shmulti field specifies the visual appearance to show the count of dragged items. Indicates an object of exontrol.Def.Shape type * @type {object} */ shmulti: { primitive: "RoundRect",

fillColor: "black",

tfi: { fgColor: "white"

} } }); /* @license Copyright (C) Exontrol. All rights reserved. */ /////////////////////////////////////////////////////////// (exontrol.OrgChart) // // The exontrol.OrgChart class provides the following fields (public): // // Root {object}, specifies the control's root-node as an object of exontrol.OrgChart.Node type // Listeners {object}, holds a reference to exontrol.Lts which defines the events of the control. // Shortcuts {object}, holds a reference to exontrol.Sts which defines the shortcuts of the control. // // The exontrol.OrgChart class provides the following methods (public): // // GetOptions(), gets the options of the exontrol.OrgChart control // SetOptions({exontrol.Def.OrgChart}), applies new options to the exontrol.OrgChart control // Node(key), returns the control's node giving its key or plain-caption, as exontrol.OrgChart.Node type // EnsureVisibleNode(key), ensures that the giving node fits the control's visible area (it expands all parents of node). // GetFocus(), returns the control's focus node (which is the root if no selection is available) // SetFocus(key), changes the control's selection/focus to the node with the giving key (if not found, it focuses/selects the root node) // GetSelection(), returns the control's selection as null, an exontrol.OrgChart.Node type or an array of [exontrol.OrgChart.Node]. // SetSelection(value), changes the control's selection. // SelectAll, selects all nodes within the control. // UnselectAll, clears the selection. // RemoveSelection(), removes selected-nodes (including all descendants) // EnsureVisibleSelection(), scrolls the control's content to ensure that the control's selection fits the control's client area // Refresh(), refreshes the control // Smooth( callback, thisArg ), performs a smooth-transition from a layout to another. The smooth-transition goes from the current layout to the new layout generated by the first callback. // Update( callback, thisArg ), locks the control's paint during the callback, and invalidates the control once the method ends. // Layout/GetLayout()/SetLayout(value) {string}, saves or loads the control's UI layout, such as selected, collapsed nodes, scroll-position, ... (@since 1.8) // Statistics/GetStatistics() {string}, gives statistics data of objects being hold by the control // // bU(), locks invalidating the control until the eU() method is called // eU(), invalidates the control // // The exontrol.OrgChart class provides the following events (through oLts): // // "onselchange", notifies your application that the control's selection has been changed. The onselchange's parameter could be any of the following: // // oEvent {null}, indicates that the control has no selected nodes // oEvent {object}, indicates an object of exontrol.OrgChart.Node type that defines the control's single-node selected. // oEvent {array}, specifies an array of [exontrol.OrgChart.Node] type that holds all selected nodes within the control // // "onclick", occurs once the user clicks or double-clicks a node. The onclick's parameter is: // // oEvent {object}, specifies an object of {node,dblClick,button,modifiers} type, that holds information about the node being clicked. // // oEvent.node {object}, specifies null or an object of exontrol.OrgChart.Node type that indicates the node being clicked // oEvent.dblClick {boolean}, indicates whether the user clicks or double-clicks the node // oEvent.button {number}, indicates which button is pressed while clicking the node as 1 (left), 2 (right) or 4 (middle) // oEvent.modifiers {number}, specifies a combination of 1, 2, 4 and 16 according with modifier keys (ALT, CTRL, META and SHIFT), or 0 if no modifier keys // // "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 // // "onchange", (@since 1.8) notifies your application that a node, or more has been changed (expanded, checked, ...). The onchange's parameter is: // // oEvent {object}, specifies an object of {object,action} type, that holds information about the control's object being changed. // // oEvent.object {object}, specifies an object of the control being changed. The type of the object depends on the action it occured // oEvent.action {string}, Specifies the name of action such as follow: // // "expand-node" {string}, notifies that a node has been expanded or collapsed (the object refers to an exontrol.OrgChart.Node type) // // "onscroll", (@since 1.8) notifies your application once the control's view is scrolled. The onscroll's parameter is: // // oEvent {object}, specifies an object of {view,type,value} type, that holds information about the view's scroll that has been changed as explained: // // oEvent.view {object}, specifies the view, where the scroll occurs // oEvent.type {exontrol.SB.ModeEnum}, specifies the view's scroll that has changed as 0(vertical), 1(horizontal) // oEvent.value {number}, specifies the scroll's value // /////////////////////////////////////////////////////////// (exontrol.OrgChart) /////////////////////////////////////////////////////////// (exontrol.OrgChart.Node) // // The exontrol.OrgChart.Node class provides the following methods (public): // // AddChild(oOpts), adds a child-node. // AddAssistant(oOpts), adds an assistant-node. // AddGroup(oOpts), adds a group-node. // Remove(), removes the node (including all its descendants) // ClearChild(), clears the node's child-descendants. // ClearAssistant(), clears the node's assistant-descendants. // ClearGroup(), clears the node's group-descendants. // Clear(), clears the node's descendants which includes child, assistant or group-nodes. // Item(key), returns a node giving its key or caption (it looks up for any descendent node). // Options/GetOptions()/SetOptions(oOpts), defines the node's caption, image, ... all information the current node displays // Visible/GetVisible()/SetVisible(value), shows or hides the current node // Caption/GetCaption()/SetCaption(value), specifies the node's caption (ex-HTML format). // Image/GetImage()/SetImage(value), indicates the node's image. The image can be added using the exontrol.HTMLPicture.Add() method // Key/GetKey()/SetKey(value), defines the node's key. // Flow/GetFlow()/SetFlow(value), specifies the flow and arrangement the node and its descendants nodes apply. If missing or null, the flow and arrangement of the node is inherited by its parent. // Align/GetAlign()/SetAlign(value), specifies the assistant/child-nodes' alignment relative to the node itself. If null or missing, the parent's align is considered. // Margins/GetMargins()/SetMargins(value), indicates the horizontal/vertical/indent distance between nodes. If null or missing, the parent's margins are considered. // Show/GetShow()/SetShow(value), shows or hides the descendent-nodes the current node, like assistant, child or group-nodes. // ShowExpandGlyphs/GetShowExpandGlyphs()/SetShowExpandGlyphs(value), shows or hides the node's expand/collapse glyphs is shown for different type of nodes. // SingleExpandGlyphs/GetSingleExpandGlyphs()/SetSingleExpandGlyphs(value), shows one or more expand/collapse glyphs for the nodes. // GetExpandType(nNodeType)/SetExpandType(nNodeType, value), expands or collapses the node's direct-descendants (by type). // Expand/GetExpand()/SetExpand(value), expands or collapses the node's direct-descendants. // Pad/GetPad()/SetPad(value), specifies the space between node's content and its borders. // FormatText/GetFormatText()/SetFormatText(value), specifies the format to display the node's caption. // ImageAlign/GetImageAlign()/SetImageAlign(value), specifies the alignment of the node's image. // Size/GetSize()/SetSize(value), specifies the size, range of limits the node's caption is displayed. // ImageSize/GetImageSize()/SetImageSize(value), defines the size of the node's image. // Shapes/GetShapes()/SetShapes(value), defines the shapes for the node including its descendants. // Cursors/GetCursors()/SetCursors(value), defines the mouse cursor(s) for the node including its descendants. // Shape/GetShape()/SetShape(value), defines the shape for the node itself. // Cursor/GetCursor()/SetCursor(value), defines the mouse cursor for the node itself. // Enabled/GetEnabled()/SetEnabled(value), enables or disables the node. // Selectable/GetSelectable()/SetSelectable(value), indicates whether the user can select the node. // Link/GetLink()/SetLink(value), gets or sets the attributes of the link between a node and its descendent nodes. // Linka/GetLinka()/SetLinka(value), gets or sets the attributes of the linka between a node and its assistant-nodes. // Linkg/GetLinkg()/SetLinkg(value), gets or sets the attributes of the linkg between a node and its group-nodes. // Nodes/GetNodes()/SetNodes(value), defines the node from/to a string-representation of the current node, and all its descendent-nodes. // Parent/GetParent()/SetParent(value), defines the node's parent // Position/GetPosition()/SetPosition(value), defines the node's position // /////////////////////////////////////////////////////////// (exontrol.OrgChart.Node) /////////////////////////////////////////////////////////// (exontrol.Def.OrgChart) // // The exontrol.Def.OrgChart namespace provides definitions for different objects, primitives, objects of exontrol.OrgChart object // // The exontrol.Def.OrgChart namespace provides the following fields: // // scrollBars {exontrol.ScrollBarsEnum}, specifies how the scroll-bars are being displayed into the exontrol.CW object. This flag is applied to windows with HScroll/VScroll flag set // scrollBarsRoot {string}, specifies the color to highlight the position of root on the control's scroll bars. // tfi {(string|object)}, holds the font attributes for captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. // locked {boolean}, indicates whether the control is locked(protected) or unlocked // readOnly {boolean}, indicates whether the control is read-only // wheelChange {number}, specifies the amount the control scrolls when the user rolls the mouse wheel. // expandGlyphSize {number}, specifies the size to show the node's expand/collapse glyphs. // flow {exontrol.OrgChart.Layout.FlowEnum}, specifies the flow and arrangement of the control. // align {exontrol.AlignEnum}, specifies the assistant/child-nodes' alignment relative to the node itself. // margins {object}, specifies the horizontal and vertical distance between nodes {x,y,indent,border}. // showExpandGlyphs {exontrol.OrgChart.NodeTypeEnum}, specifies whether the expand/collapse glyphs is shown for different type of nodes. // singleExpandGlyphs {boolean}, specifies whether the node displays a single or multiple expand/collapse glyphs. // show {exontrol.OrgChart.NodeTypeEnum}, specifies the type of nodes the chart displays (filters the nodes by type) // filter {string}, specifies a wild-character expression that defines the mask to match the node's plain caption. For instance "*a" indicates every caption that ends on `a` // smooth {number}, defines the time in ms the control goes from one layout to another. // singleSel {exontrol.OrgChart.SingleSelEnum}, specifies whether the control supports single, multiple, toggle selection. // ensureOnExpand {boolean}, specifies whether the control scrolls its content to ensure that the node's descendants fits it. // expandOnDblClick {boolean}, indicates whether the node gets expanded as soon as the user double-clicks the node. // pad {(number|string|array)} defines the node's padding (space between the node's content and its border) // formatText {exontrol.DrawTextFormatEnum}, specifies the format to display the node's caption. // imageAlign {number}, defines the alignment of the image within the node. // size {(null|number|array)}, defines the size or limits of the node's caption. // imageSize {(null|number|array)}, defines the size of the node's image. // 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. // showLinks {exontrol.ShowLinksEnum}, indicates whether the control shows or hides the links between nodes. // link {object}, specifies the attributes of the link between a node and its descendent nodes. // linka {object}, specifies the attributes of the link between a node and its assistent-nodes. // linkg {object}, specifies the attributes of the link between a node and its group-nodes. // nodes {string}, builds the control's hierarchy from a string-representation. // allowActions {string}, customizes the actions the user can perform once the user clicks or touches the control. // /////////////////////////////////////////////////////////// /** * @description The exontrol.Def.OrgChart namespace provides definitions for different objects, primitives, objects of exontrol.OrgChart object */ exontrol.Def.OrgChart = {