Options class (Surface)

The alignObjectsToGridLines field specifies whether the objects are aligned to minor or major grid lines, as explained:

• 0 {number}, no alignment is performed
• -1 {number}, the objects are aligned to minor grid lines
• 1 {number}, the objects are aligned to major grid lines

.

null {null}, false {boolean} or 0 {number}, the property has no effect (by default)
 -1 {number}, the objects on the surface are aligned to the minor grid lines 
 1 {number}, the objects on the surface are aligned to the major grid lines

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 elements by drag
  • "drag-drop", carries out the drag and drop of the element (the element 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 element. The event parameter holds information about the mouse/touch event once the element 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.
  • "create", creates element by drag (not available if the control is read-only)
  • "move", moves or resizes elements by drag (not available if the control is read-only)
  • "link", links elements by drag (not available if the control is read-only). The "link" action allows flags such as:
    • [toggle], the link is removed if the linked-elements has already a link between
  • "link-cp", allows customization the link's path by drag (not available if the control is read-only). The "link-cp" action is not required and it has effect only if the control's allowLinkControlPoint property is not zero. For instance, is allowLinkControlPoint property is zero, the "link-cp" does nothing.
• "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

.

null {null}, indicates the control's default allowActions value
 "" {string}, specifies that no operation is allowed once the user clicks or touches the control
 "scroll" {string}, specifies that only "scroll" operation is allowed, no matter of the event's button or modifier-keys is pressed.
 "create(Alt+LButton),move,scroll" {string}, indicates that creating-elements is possible only if the user presses the mouse's left-button while ALT key is pressed, and "move" or "scroll" is possible no matter of the event's button or modifier-keys in this order. Also, if no "create"-operation is possible, do "move"-operation, if no "move"-operation is possible, do "scroll"-operation

The allowChangeParent field specifies whether the element's position or parent can be changed at runtime by drag and drop.

null {null}, allows element's parent or position to be changed at runtime by drag and drop.
 false {boolean}, prevents changing the element's position or parent at runtime by drag and drop.

The allowLinkControlPoint field indicates the control points of the link, the user can use to customize the link's path. The property is applied to all links (unless the allowControlPoint property of the link indicates a different value) A combination of one or more Surface.LinkControlPointEnum flags that determines the control points for an individual link, the user can use to customize the link. The Surface.LinkControlPointEnum type defines the following flags:

• exNoControlPoint(0), the link displays no control points
• exStartControlPoint(1), the link shows control point that changes the link's StartPos property (the exStartControlPoint point is marked with black squares)
• exEndControlPoint(2), the link shows control point that changes the link's EndPos property (the exEndControlPoint point is marked with black squares)
• exControlPoint(4), defines the corners of the link's path. You can remove a exControlPoint points by dragging to another, so intermediate exControlPoint points are removed. You can move all control points of the link at once, if SHIFT key is pressed (the exControlPoint points are marked black circles)
• exMiddleControlPoint(8), defines the link's middle control points that are displayed between two exControlPoint points, to let the use add new exControlPoint points, to redefine the link's path (The exMiddleControlPoint points are marked with gray circles)
• exOrthoArrange(0x10), specifies that the lines of the link are orthogonal arranged when the user drags and drops the middle or control-points of the path (excludes the start/end control-points)
• exAllowChangeFrom(0x20), allows the user to adjust the link's from element by dragging and dropping the start control point (requires the exStartControlPoint flag)
• exAllowChangeTo(0x40), indicates that the user can adjust the link's to element by dragging and dropping the end control point (requires the exEndControlPoint flag)

.

0 or Surface.LinkControlPointEnum.exNoControlPoint {number}, displays no link's control points (unless the link's allowControlPoint property is different)
 3 or Surface.LinkControlPointEnum.exStartControlPoint | Surface.LinkControlPointEnum.exEndControlPoint {number}, displays link's start and end control points only, for all links (unless the link's allowControlPoint property is different)

The allowUndoRedo field enables or disables the Undo/Redo feature. The Undo and Redo features let you remove or repeat single or multiple actions, but all actions must be undone or redone in the order you did or undid them – you can’t skip actions. For example, if you added three elements and then decide you want to undo the first change you made, you must undo all three changes. To undo an action you need to press Ctrl+Z, while for to redo something you've undone, press Ctrl+Y.

false {boolean}, the Undo/Redo feature is disabled (by default)
  true {boolean}, enables the Undo/Redo feature.

The allowUndoRedo field enables or disables the Undo/Redo feature. The Undo and Redo features let you remove or repeat single or multiple actions, but all actions must be undone or redone in the order you did or undid them – you can't skip actions. For example, if you added three elements and then decide you want to undo the first change you made, you must undo all three changes. To undo an action you need to press Ctrl+Z, while for to redo something you've undone, press Ctrl+Y.

false {boolean}, the Undo/Redo feature is disabled (default)
  true {boolean}, enables the Undo/Redo feature.

The axes field specifies the appearance to draw the axes of the surface, as an object of {width, color, style, cap} type as explained:

• width {number}, specifies the line's width or size (1 by default) (if 0 no axes is shown)
• color {string}, indicates the line's color (black by default)
• style {array}, specifies the dash pattern to show the lines (solid by default)
• cap {string}, determines the shape used to draw the end points of lines. One of the following: "butt", "round" or "square" ("butt" by default)

.

null {null}, the control's axes is black, 1-pixel wide and solid
  {color: "gray", width: 2} {object}, the control's axes is gray, solid and 2-pixel wide

The collapsedLink field specifies the appearance of the link between collapsed elements.

The coord field Specifies the type of coordinates the elements of the surface display in. A combination of one or more Surface.CoordEnum flags that determines the type of coordinates the elements of the surface display in. The Surface.CoordEnum type defines the following flags:

• exDefCoord(0), the positive coordinates are shown right-down to origin of the surface.
• exCartesian(1), the elements show in Cartesian coordinates. The positive coordinates are shown right-up to origin of the surface.
• exAllowPositiveOnly(0x10), only the positive panel of the surface is shown. The exAllowPositiveOnly flag can be combined with exDefCoord or exCartesian value. For instance, the exCartesian + exAllowPositiveOnly indicates that surface displays only the positive coordinates in Cartesian system.

.

0 or Surface.CoordEnum.exDefCoord {number}, displays elements as the positive coordinates are shown right-down to origin of the surface.
 17 or Surface.CoordEnum.exCartesian | Surface.CoordEnum.exAllowPositiveOnly {number}, indicates that surface displays only the positive coordinates in Cartesian system

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:

• "element", defines the mouse-cursor when the mouse pointer hovers any element
• "expand" (expand/collapse), defines the mouse-cursor when the mouse pointer hovers the element's expand/collapse glyphs
• "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the <a id;options> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)
• "link-cp" (link-control-point), defines the mouse-cursor when the mouse pointer hovers any link's control point
• "link-cp-all" (link-control-point-all), defines the mouse-cursor when the mouse pointer hovers any link's control point (while the link is orthogonally arranged by drag and drop ~ exOrthoArrange)
• "link-cp-h" (link-control-point-horizontal), defines the mouse-cursor when the mouse pointer hovers a horizontal line (while the link is orthogonally arranged by drag and drop ~ exOrthoArrange)
• "link-cp-v" (link-control-point-vertical), defines the mouse-cursor when the mouse pointer hovers a vertical line (while the link is orthogonally arranged by drag and drop ~ exOrthoArrange)
• "drag-drop", defines the cursor while the node is being dragged using the "drag-drop" action

.

"pointer(xxx,yy)" {string}, indicates that the "pointer" mouse cursor is shown while cursor hovers any "xxx" or "yyy" part of the control

The defArrange type holds different options as an object of {dir, dx, dy, align. compact} type to auto-arrange the elements using the Arrange method.

The expandGlyphSize field specifies the size to show the element's expand/collapse glyphs.

0 {number}, displays no element's expand/collapse glyphs
 24 {number}, specifies a size of 24x24 to display the element's expand/collapse glyphs

The focusLink field defines the newly focused link, as one of the following:

• value {null}, hides the focused link (removes the focused link)
• value {number}, focuses on a link by specifying its index within the links collection
• value {string}, focuses on a link by specifying its identifier, key, or plain caption
• value {Link}, focuses the specified link

.

The formatText field specifies the format to display the element's caption. A combination of one or more exontrol.DrawTextFormatEnum flags that defines the format to show the element's caption. The exontrol.DrawTextFormatEnum type support the following flags:

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

.

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

The imageAlign field defines the alignment of the image within the element. The imageAlign propery can be any of the following:

• 0, the image is on the left of the element's caption
• 1, the image is on the right of the element's caption
• 2, the image is on the top of the element's caption
• 3, the image is on the bottom of the element's caption

.

null {null}, the image is on top of the element's cation (default value)
 1 {number}, the image is displayed to the right of the element's caption

The imageSize field defines the size of the element's image. The imageSize could be of one of the following types:

• {null}, Indicates that the element's image is displayed as it is (full-sized).
• {number}, Specifies that the element's image is displayed into a square of giving size (same width and height). If 0 the element displays no image, if negative the element's image is stretched to giving square, else the element's picture is scaled to fit the giving rectangle.
• {array}, Specifies an array of [aspect-width,aspect-height] type that defines the limits for width or/and height. The aspect-width and aspect-height define the width/height of the element's picture to scale or stretch to.

.

null {null}, Indicates that the element's image is displayed as it is (full-sized).
 0 {number}, no image is displayed
 64 {number}, the image is scaled to fit a 64 x 64 rectangle
 -64 {number}, the image is strected to a 64 x 64 rectangle
 [32,64] {array}, scales the image to the largest ratio-rectangle (32 x 64) that fits the client
 [-32,-64] {array}, stretches the image to a 32 x 64 rectangle

The link field specifies the appearance of the link between elements.

The linkEndTo field specifies the appearance of the link that ends to any selected-bar (incoming links).

The linkStartFrom field specifies the appearance of the link that starts from any selected-bar (outgoing links).

The linkUnselected field specifies the appearance of the link not related to any selected-bar (unselected links).

The locked field indicates whether the control is locked(protected) or unlocked.

false {boolean}, unlocks the control (can select any element)
  true {boolean}, locks the control (can't select any element)

The majorGridLines field defines the appearance of the surface's major grid-lines, as an object of {step, width, color, style, cap} type as explained:

• step {number}, specifies the distance between two consecutive major grid-lines (100 by default) (if 0 the major grid-lines are ignored)
• width {number}, specifies the line's width or size (1 by default) (if 0 no major grid-lines are shown)
• color {string}, indicates the line's color ("#E8E8E8" by default)
• style {array}, specifies the dash pattern to show the lines (solid by default)
• cap {string}, determines the shape used to draw the end points of lines. One of the following: "butt", "round" or "square" ("butt" by default)

.

null {null}, the major grid-lines are shown from 100 to 100
  {step: 0} {object}, the major grid-lines are ignored
  {color: "gray"} {object}, the major grid-lines are shown in gray

The margins field specifies control's margins (indicates an object of {x,y,indent,border} type that defines the horizontal, vertical and indent distance between elements).

The minorGridLines field defines the appearance of the surface's minor grid-lines, as an object of {step, width, color, style, cap} type as explained:

• step {number}, specifies the distance between two consecutive minor grid-lines (10 by default) (if 0 the minor grid-lines are ignored)
• width {number}, specifies the line's width or size (1 by default) (if 0 no minor grid-lines are shown)
• color {string}, indicates the line's color ("#F8F8F8" by default)
• style {array}, specifies the dash pattern to show the lines (solid by default)
• cap {string}, determines the shape used to draw the end points of lines. One of the following: "butt", "round" or "square" ("butt" by default)

.

null {null}, the minor grid-lines are shown from 10 to 10
  {step: 0} {object}, the minor grid-lines are ignored
  {color: "gray"} {object}, the minor grid-lines are shown in gray

The origin field specifies the appearance to draw the origin of the surface, as an object of {size, width, color, style, cap} type as explained:

• size {number}, indicates the size of the origin (the size of the cross)
• width {number}, specifies the line's width or size (1 by default) (if 0 no surface's origin is shown)
• color {string}, indicates the line's color (black by default)
• style {array}, specifies the dash pattern to show the lines (solid by default)
• cap {string}, determines the shape used to draw the end points of lines. One of the following: "butt", "round" or "square" ("butt" by default)

.

null {null}, the control's origin is black, 1-pixel wide and solid
  {color: "gray", width: 2} {object}, the control's origin is gray, solid and 2-pixel wide

The pad field defines the element's padding (space between the element's content and its border). The pad could be of one of the following types:

• {number} a numeric value, to pad horizontal and vertical size with the same value
• {(number[]|string)} a "x,y" or [x,y] type to specify the padding on h/v size

.

null {null}, indicates that the default-padding field is used ([4,4])
  0 {number}, indicates no padding
  "8,4" {string}, increases the element's width with 2 * 8-pixels and element's height with 2 * 4-pixels
  [8,4] {array}, increases the element's width with 2 * 8-pixels and element's height with 2 * 4-pixels

The readOnly field indicates whether the control is read-only.

false {boolean}, the user can create, resize or move any element
  true {boolean}, the user can not create, resize or move any element.

The scrollBars field determines whether the control has horizontal and/or vertical scroll bars A combination of one or more exontrol.ScrollBarsEnum flags that determines whether the control has horizontal and/or vertical scroll bars. The exontrol.ScrollBarsEnum type defines the following flags:

• exNoScroll (0), specifies that no scroll bars are shown (scroll is not allowed)
• exHorizontal (1), specifies that only horizontal scroll bars is shown
• exVertical (2), specifies that only vertical scroll bars is shown
• exBoth (3), specifies that both horizontal and vertical scroll bars are shown
• exDisableNoHorizontal (5), specifies that the horizontal scroll bar is always shown, it is disabled if it is unnecessary
• exDisableNoVertical (10), specifies that the vertical scroll bar is always shown, it is disabled if it is unnecessary
• exDisableBoth (15), specifies that both horizontal and vertical scroll bars are always shown, disabled if they are unnecessary
• exHScrollOnThumbRelease (0x100), specifies that the control's content is horizontally scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
• exVScrollOnThumbRelease (0x200), specifies that the control's content is vertically scrolled as soon as the user releases the thumb of the vertical scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
• exScrollOnThumbRelease (0x300), specifies that the control's content is scrolled as soon as the user releases the thumb of the horizontal scroll bar (use this option to specify that the user scrolls the control's content when the thumb of the scroll box is released)
• exHScrollEmptySpace (0x400), allows empty space, when the control's content is horizontally scrolled to the end
• exVScrollEmptySpace (0x800), allows empty space, when the control's content is vertically scrolled to the end
• exScrollEmptySpace (0xC00), allows empty space, when the control's content is scrolled to the end
• exExtendSBS (0x3000), specifies that the control's scroll-bars are visible only when 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)

.

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

The scrollBarsHome field specifies the color to highlight the position of the origin (0,0) on the control's scroll bars (specifies null, to prevent showing the position of origin (0,0) on the control's scroll bars, or a CSS color).

null {null}, hides the origin (0,0) on the control's scroll bar
  "black" {string}, shows the origin (0,0) on the control's scroll bar in black

The scrollBarsLayout field specifies the color to highlight the position of the current layout within the control's scroll bars (specifies null, to hide the position of the current layout within the control's scroll bars, or a CSS color).

null {null}, hides the position of the current layout within the control's scroll bars.
  "black" {string}, shows in black  the position of the current layout within the control's scroll bars.

The selection field defines the control's selection, as one of the following:

• value {null}, clears the entire selection (unselect all)
• value {number}, selects an element giving index within the elements collection
• value {string}, selects an element giving its identifier/key/plain-caption
• value {Element}, selects an element giving its reference
• value {Elements}, selects all elements within the control
• value {array}, specifies an array of [type] type, where type could be any number, string or Element type

.

The selements field defines the elements of the control from a string-representation. The format of the elements'string representation is (everything between () refers to children, and everything between [] refers to flags):

"element1[flag=value]...[flag=value](sub-element1[flag=value]...[flag=value],...,sub-elementn[flag=value]...[flag=value]),...,elementn[flag=value]...[flag=value](sub-element1[flag=value]...[flag=value],...,sub-elementn[flag=value]...[flag=value])"

The element1, sub-element1 ... elementn defines the caption for each element.
The string representation supports the following flags:

• [key] {string}, specifies the element's key (Key/GetKey()/SetKey(value) methods of Surface.Element). For instance, [key=root], specifies that the element's key is "root"
• [vis]/[hid] {number}, shows or hides the element (Visible/GetVisible()/SetVisible(value) methods of Surface.Element). For instance, [hid] or [vis=0], hides the element, while [vis=1] shows the element
• [dis] {number}, enables or disables the element (Enabled/GetEnabled()/SetEnabled(value) methods of Surface.Element). For instance, [dis] or [dis=0], disables the element, while [dis=1] enables the element
• [nsel] {number}, indicates whether the user can select, resize or move the element (Selectable/GetSelectable()/SetSelectable(value) methods of exontrol.Surface.Element). For instance, [nsel] or [nsel=0], forces the element to be unselectable, while [nsel=1] makes the element selectable
• [pos] {number}, changes the element's position (0-based) (Position/GetPosition()/SetPosition(value) methods of Surface.Element). For instance, [pos=0] indicates that the element should be displayed first
• [img] {string}, assigns a image/picture to the element (Image/GetImage()/SetImage(value) methods of Surface.Element). For instance, [img=logo] assigns the "logo" picture to the element. The image can be added using the exontrol.HTMLPicture.Add() method. You can use the [simg] flag to define the element's image to be displayed on the "sub-items" portion of the control.
• [imgs] {string}, defines the size of the element's image as a string of "aspect-width,aspect-height" type (without quotes) (ImageSize/GetImageSize()/SetImageSize(value) methods of Surface.Element). For instance, [imgs=-32] stretches the element's image into a square of 32x32 size, while [imgs=32,32] fits the element's image into a square of 32x32 size.
• [imga] {number}, specifies the alignment of the image within the element relative to its caption. The value of "imga" flag can be 0(left), 1(right), 2(top) or 3(bottom). (ImageAlign/GetImageAlign()/SetImageAlign(value) methods of Surface.Element). For instance, [imga=3] aligns the element's image at the bottom of its box
• [client] {string}, specifies the element's client-rectangle as a string of "x,y,width,height" type (without quotes) (Client/GetClient()/SetClient(value) methods of Surface.Element). For instance, [client=0,0,128,128] specifies the element's client are to [0,0,128,128]
• [coll] {string}, indicates a collapsed-element (Expand/GetExpand()/SetExpand(value) methods of Surface.Element). For instance, [coll] or [coll=0], collapses the element, while [c=1] expands the element
• [ft] {number}, specifies the format to display the element's caption. The value of "ft" flag can be a combination of one or more values of exontrol.DrawTextFormatEnum type (FormatText/GetFormatText()/SetFormatText(value) methods of Surface.Element). For instance, [ft=32] displays the element's caption on a single line only. Carriage returns and line feeds do not break the line (32 indicates the value of exontrol.DrawTextFormatEnum.exTextSingleLine)
• [pad] {string}, defines the element's padding (space between the element's content and its border) (Pad/GetPad()/SetPad(value) methods of Surface.Element). For instance, [pad=4] defines a 4-pixels padding for all edges
• [shape] {string}, defines the shape for individual element (Shape/GetShape()/SetShape(value) methods of Surface.Element). For instance, [shape=Button] specifies that the element is shown as a "button".
• [cursor] {string}, defines the mouse-cursor for individual element (Cursor/GetCursor()/SetCursor(value) methods of Surface.Element). For instance, [cursor=wait] indicates that the "wait" mouse-cursor is displayed while the cursor hovers the element
• [auto] {number}, resizes the element to fit its content (AutoSize/GetAutoSize()/SetAutoSize(value) methods of Surface.Element). For instance, [auto] resizes the element to fit its content
• [nres] {number}, defines a non-resizable element (Resizable/GetResizable()/SetResizable(value) methods of Surface.Element). For instance, [nres] indicates that the user can not resize the element by drag and drop
• [nmov] {number}, defines a non-movable element (Movable/GetMovable()/SetMovable(value) methods of Surface.Element). For instance, [nmov] indicates that the user can not move the element by drag and drop

.

"" {string}, clears the elements collection
 "A(A1,A2,A3),B[client=128,128,32,32](B1,B2(B2.1,B2.2),B3)" {string}, defines the element "A" with three child-elements "A1", "A2" and "A2", and element "B" with child-elements "B1", "B2", and "B3", also defines the "B2.1" and "B2.2" as children of element "B2"
 "A[img=logo][hid],B[client=128,128,32,32][dis]" {string}, defines the element "A" hidden and with the image "logo" and element "B" as disabled.

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.Surface object (while it starts with a lowercase letter, such as element which refers to exontrol.Shapes.Surface.element shape)
  ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)
  

• "part", defines the name of the part the shape is applied on (as defined bellow)

The shapes property supports any of the following parts:

• "element", defines the visual-appearance of all elements within the control
• "link-bs", defines the visual-appearance of the link's start control-point (it changes the start-position of the link)
• "link-be", defines the visual-appearance of the link's end control-point (it changes the end-position of the link)
• "link-p", defines the visual-appearance of the link's intermediate control-point
• "link-m", defines the visual-appearance of the link's middle control-point
• "select", defines the visual-appearance of selected-element
• "frameFit", defines the visual-appearance to display the frame while fitting objects into the control's client area by drag
• "frameSel", defines the visual appearance to display a frame while selecting objects by drag
• "frameDrag", specifies the visual appearance to display the frame while dragging the objects
• "expand", specifies the visual appearance for expand/collapse glyphs
• "multiSel", specifies the visual appearance to show the count of multiple-selected items

.

null {null}, specifies the default visual appearance
 "" {string}, no shape (no visual appearance is applied to any part of the control)
 "red(element)", "#FF0000(element)", "rgb(255,0,0)(element)", "rgba(255,0,0,1)(element)" {string}, shows all-elements in red
 '{"hover":{"frameColor":"black","pad":-0.5}}(element)' {string}, draws a black-frame arround the element being hovered
 "xxx(d),yyy(d,m),zzz(y)"  {string}, specifies that the exontrol.Shapes.Surface.xxx combined with exontrol.Shapes.Surface.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Surface.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Surface.zzz object defines the visual appearance of "y" part of the control

The showAxes field specifies whether the control shows or hides the axes (horizontal and vertical axes).

null {null} or false {boolean}, the control hides the axes (by default)
  true {boolean}, the control shows the axes

The showGridLines field specifies whether the control shows or hides the grid-lines (minor and major grid-lines).

null {null} or false {boolean}, the control hides the grid-lines (minor and major grid-lines)
  true {boolean}, the control shows the grid-lines (minor and major grid-lines)

The showLinks field indicates whether the control shows or hides the links between elements. 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

.

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

The showLinksOnCollapse field specifies whether links between collapsed elements are visible or hidden.

null {null}, shows links between collapsed elements
 false {boolean}, hides the links between collapsed elements

The showOrigin field specifies whether the control shows or hides the origin.

false {boolean}, the control hides the origin
  null {null} or true {boolean}, the control shows the origin

The singleSel field specifies whether the control supports single, multiple, toggle selection. The Surface.SingleSelEnum type defines the following flags:

• exDisableSel(0), specifies that the control's selection is disabled (can not be combined with any other flags)
• exEnableSel(1), specifies that the control's selection is enabled (multiple-selection, unless the exSingleSel is set )
• exSingleSel(2), specifies that the user can select a element only
• exToggleSel(4), specifies that the element's selection state is toggled once the user clicks a element.
• exDisableCtrlSel(8), disables toggling the element's selection state when user clicks a element, while CTRL modifier key is pressed.
• exDisableShiftSel(16), disables selecting elements using the SHIFT key.
• exDisableDrag(32), disables selecting elements by drag.

.

0 or Surface.SingleSelEnum.exDisableSel {number}, disables selecting any element
 3 or Surface.SingleSelEnum.exSingleSel | Surface.SingleSelEnum.exEnableSel {number}, enables control's single selection, so only a single element can be selected
 6 or Surface.SingleSelEnum.exToggleSel | Surface.SingleSelEnum.exSingleSel {number}, enables control's single and toggle selection, which means that once a element is selected it gets unselected once it is clicked, or reverse, and only a single-element can be selected at once. 

The slinks field defines the links between elements of the control from a string-representation. The format of the links'string representation is (everything between () refers to children, and everything between [] refers to flags):

"link1[flag=value]...[flag=value],...,linkn[flag=value]...[flag=value]"

The link1, ... linkn defines the caption for each link.
The string representation supports the following flags:

• [link] {string} (required), indicates the link's in-out elements in "from-to" format, where from/to indicates the element's key, plain-caption or index (0-based). For instance, [link=11-1], links the elements with index 11 and 1, or [link=root-1] links the element with the key "root" or plain-caption "root" with the element of index 1.
• [key] {string}, specifies the link's key (Key/GetKey()/SetKey(value) methods of Surface.Link). For instance, [key=root], specifies that the link's key is "root"
• [vis]/[hid] {number}, shows or hides the link (Visible/GetVisible()/SetVisible(value) methods of Surface.Link). For instance, [hid] or [vis=0], hides the link, while [vis=1] shows the link
• [type] {number}, specifies the type of the link as a value of 0 (rectangular), 1 (direct), 2(straight) or 3(round). For instance, [type=3] defines a round-link
• [dir] {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides. For instance, [dir=3] shows the arrows in both-directions of the link.
• [width] {number}, specifies the link's width or size. For instance, [width=4] shows a wider link.
• [color] {string}, indicates the link's color. For instance, [color=red] specifies a red-link.
• [arrow] {string}, indicates the arrow's color. For instance, [arrow=#808080] shows the link's arrow in gray.
• [style] {number}, specifies the link's dash pattern to show the lines. For instance, [style=2] shows a dotted-link
• [startPos] {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR" of in-element, where the link can start from. For instance, [startPos=TR,MR,BR] specifies that the link can start anywhere on the in-element's right-side
• [endPos] {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR" of out-element, where the link can end into. For instance, [endPos=TL,ML,BL] specifies that the link can end anywhere on the out-element's left-side

The following flags have effect only when the link is shown between collapsed-elements

• [coll-type] {number}, specifies the type of the link as a value of 0 (rectangular), 1 (direct), 2(straight) or 3(round). For instance, [coll-type=3] defines a round-link
• [coll-dir] {number}, specifies whether the link's direction is shown or hidden as 0 (hidden), 1(shows the direction/arrow where the link begins), 2(shows the direction where the link ends, default) or 3 shows the arrows in both sides. For instance, [coll-dir=3] shows the arrows in both-directions of the link.
• [coll-width] {number}, specifies the link's width or size. For instance, [coll-width=4] shows a wider link.
• [coll-color] {string}, indicates the link's color. For instance, [coll-color=red] specifies a red-link.
• [coll-arrow] {string}, indicates the arrow's color. For instance, [coll-arrow=#808080] shows the link's arrow in gray.
• [coll-style] {number}, specifies the link's dash pattern to show the lines. For instance, [coll-style=2] shows a dotted-link
• [coll-startPos] {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR" of in-element, where the link can start from. For instance, [coll-startPos=TR,MR,BR] specifies that the link can start anywhere on the in-element's right-side
• [coll-endPos] {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR" of out-element, where the link can end into. For instance, [coll-endPos=TL,ML,BL] specifies that the link can end anywhere on the out-element's left-side

.

"" {string}, clears all the links
 "L1[link=A-L]" {string}, defines a link between elements with the key "A" and "B" with the caption "L1"
 "L1[link=A-L],L2[link=A-0]" {string}, defines two links, one between "A" and "L" with the caption "L1", and another between "A" and element with the index 0, with the caption "L2"

The smooth field defines the time in ms the control goes from one layout to another.

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.

The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:

• bold, displays the text in bold (equivalent of <b> tag)
• italic, displays the text in italics (equivalent of <i> tag)
• underline, underlines the text (equivalent of <u> tag)
• strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
• <fontName name>, specifies the font's family (equivalent of <font name> tag)
• <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
• <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
• <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
• <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
• <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the tfi field that's not recognized as a keyword is interpreted as:

• name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
• size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The tfi field as object supports any of the following fields:

• bold {boolean}, displays the text in bold (equivalent of <b> tag)
• italic {boolean}, displays the text in italics (equivalent of <i> tag)
• underline {boolean}, underlines the text (equivalent of <u> tag)
• strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
• fontName {string}, specifies the font's family (equivalent of <font name> tag)
• fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
• fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
• bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
• shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
  • color {string}, defines the color of the text's shadow (CSScolor)
  • width {number}, defines the size of the text's shadow
  • offset {number}, defines the offset to show the text's shadow relative to the text
• outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
  • color {string}, defines the gradient-color (CSScolor)
  • mode {number}, defines the gradient mode as a value between 0 and 4
  • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

• Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
• Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
• RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
• RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
• HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
• HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
• Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.

.

null {null}, the tfi field is ignored
  "bold monospace 16 <fg blue>" {string}, defines Monospace font of 16px height, bold and blue
  {bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue"} {object}, defines Monospace font of 16px height, bold and blue

The undoRedoQueueLength field gets or sets the maximum number of Undo/Redo actions that may be stored to the control's Undo/Redo queue as explained:

• negative {number}, no limit for the control's Undo/Redo queue
• 0 {number}, the control's Undo/Redo feature is disabled
• positive {number}, specifies the maximum number of Undo/Redo actions that may be stored to the control's Undo/Redo queue

.

-1 {number}, the Undo/Redo queue is limitless
  1 {number}, the Undo/Redo queue limits the number of actions to store to 1 (one action or one block of actions)

The undoRedoQueueLength field gets or sets the maximum number of Undo/Redo actions that may be stored to the control's Undo/Redo queue as explained: negative {number}, no limit for the control's Undo/Redo queue 0 {number}, the control's Undo/Redo feature is disabled positive {number}, specifies the maximum number of Undo/Redo actions that may be stored to the control's Undo/Redo queue.

-1 {number}, the Undo/Redo queue is limitless
  1 {number}, the Undo/Redo queue limits the number of actions to store to 1 (one action or one block of actions)

The wheelChange field specifies the amount the control scrolls when the user rolls the mouse wheel.

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)

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%).

null {null}, Specifies normal-view (100%)
  150 {number}, Indicates that the control's content is magnfied to 150%

The zoomLevels field defines the zoom-levels the user can magnify the control's content. Specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-margins the control's content is allowed to zoom.

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%