JSDoc: Class: SV

new SV(client, oOptsopt)

Defines the surface view of the Surface control. The oSV member of the Surface type holds the view of the control as an object of SV type.

Parameters:

Name	Type	Attributes	Description
`client`	any		The client parameter indicates the control's client area as: array of [x,y,width,height] type that specifies the control's client area string, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area HTMLCanvasElement, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area
`oOpts`	Surface.Options	<optional>	An object of Surface.Options type that defines different options to display the control

Members

(static) eps :number

The eps field defines the small quantity which will be taken to zero in some limit.

Type:

number

Since:

Methods

Arrange(id, oDefArrangeopt)

The Arrange() method arranges the elements, starting from giving element, based on the links.

Parameters:

Name	Type	Attributes	Description
`id`	any		The id parameter could be any of the following: null {null}, specifies that all linked-elements of the control get arranged id {number}, indicates a numeric value that defines the index of the element to start arrangement from id {string}, specifies a string expression that defines the identifier/key/plain-caption of the element to start arrangement from id {Element}, specifies the object reference to the element to start arrangement from
`oDefArrange`	DefArrange	<optional>	Indicates an object of {dir, dx, dy, align, compact} type to customize the arrangement of the elements.

Clear()

The Clear() method clears the elements and the links.

Since:

Copy()

The Copy() method copies the selection to the Clipboard. The Cut/Copy/Paste methods work only if the control is visible.

Since:

Example

The control requires focus, so CTRL + C, CTRL + X or CTRL + V to make it works. In the same manner, the tabIndex attribute must be present into the defintion of the canvas HTML element.

 addEventListener("copy", oSurface.Copy), calls the control's Copy() method as soon as the 'copy' event occurs (CTRL + C). The copy event fires when the user initiates a copy action through the browser's user interface.
 oSurface.Shortcuts.Add("CTRL + C", oSurface.Copy, oSurface), calls the control's Copy() method as soon as user presses CTRL + C key combination

Cut()

The Cut() method moves the selection to the Clipboard. The Cut/Copy/Paste methods work only if the control is visible.

Since:

Example

The control requires focus, so CTRL + C, CTRL + X or CTRL + V to make it works. In the same manner, the tabIndex attribute must be present into the defintion of the canvas HTML element.

 addEventListener("cut", oSurface.Cut), calls the control's Cut() method as soon as the 'cut' event occurs (CTRL + X). The cut event is fired when the user has initiated a "cut" action through the browser's user interface.
 oSurface.Shortcuts.Add("CTRL + X", oSurface.Cut, oSurface), calls the control's Cut() method as soon as user presses CTRL + X key combination

EnsureVisibleClient(clientA, bAllowChangeScaleopt, bNearestFitopt)

The EnsureVisibleClient() method ensures that the giving client fits the control's client area.

Parameters:

Name	Type	Attributes	Description
`clientA`	object		The client parameter could be any of the following: clientA {array}, specifies an array of [x,y,width,height] type that indicates the absolute-coordinates of the layout-rectangle to fit into the control's client area clientA {object}, indicates an object of {Element} type or any other type the control's layout contains, that indicates the object to fit into the control's client area
`bAllowChangeScale`	boolean	<optional>	Specifies whether the method updates the control's scale/zoom-factor to ensure full-fit the client
`bNearestFit`	boolean	<optional>	Ensures that corner of the rtObject nearest the window's client area fits it (it has effect only if the size of the rtObject is greater than size of the window's client area)

EnsureVisibleSelection()

The EnsureVisibleSelection() method scrolls the control's content to ensure that the control's selection fits the control's client area

FitToClient(rtLayout)

The FitToClient() method ensures that the entire (null/undefined) or giving layout fits the control's client area

Parameters:

Name	Type	Description
`rtLayout`	Array.<number>	Indicates null for entire layout or an array of [x,y,width,height] type that defines the absolute-coordinate to fit to client

GetAlignObjectsToGridLines() → {number}

The GetAlignObjectsToGridLines() method specifies whether the object(s) are aligned to the minor or major grid lines.

Since:

Returns:

Returns one of the following values: 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

Type: number

GetAllowActions() → {string}

The GetAllowActions() method gets the actions the user can perform once the control is clicked or touched

Returns:

Returns the actions the user can perform once the control is clicked or touched. The format of allowActions parameter is:

"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."

where

"action", defines the name of the action as it could be any of the following: "scroll", "zoom", "fit", "select", "create", "move" or "link"
"shortcut", defines the event's button or/and the modifier-keys that are required to perform the action. The "shortcut" can include one or more of the following: "Shift", "Ctrl", "Alt", "Meta", "LButton", "RButton", "MButton" and "+"

For instance "create(Alt+LButton),move,scroll" 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

Type: string

GetAllowChangeParent() → {boolean}

The GetAllowChangeParent() method specifies whether the element's position or parent can be changed at runtime by drag and drop.

Returns:

Returns true if the element's position or parent can be changed at runtime by drag and drop.

Type: boolean

GetAllowLinkControlPoint() → {Surface.LinkControlPointEnum}

The GetAllowLinkControlPoint() method specifies the control points of the link, the user can use to customize the link's path.

Returns:

Returns 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 Link.AllowControlPoint property indicates a different value). 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)

Type: Surface.LinkControlPointEnum

GetAxes() → {object}

The GetAxes() method specifies the appearance to draw the axes of the surface, as an object of {width, color, style, cap} type.

Since:

Returns:

Returns 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 ("#B8B8B8" 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)

Type: object

GetCanvas() → {HTMLCanvasElement}

The GetCanvas() method gets the canvas, the control is running on.

Returns:

Returns the HTMLCanvasElement object the control is running on.

Type: HTMLCanvasElement

GetClientRect() → {Array.<number>}

The GetClientRect() method returns the control's client area.

Returns:

Returns an array of [x,y,width,height] type that specifies the control's client area

Type: Array.<number>

GetCollapsedLink() → {DisplayLinkType}

The GetCollapsedLink() method gets the appearance of the link between collapsed elements.

Returns:

Returns the appearance of the link between collapsed elements. The link object includes any of the following:

type {exontrol.LinkTypeEnum}, specifies the type of the link 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)
startPos {any}, indicates the in-element's corners, the link can start from
endPos {any}, indicates the out-element's corners , the link ends into

Type: DisplayLinkType

GetCoord() → {Surface.CoordEnum}

The GetCoord() method specifies the type of coordinates the elements of the surface display in.

Returns:

Returns 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.

Type: Surface.CoordEnum

GetCursors() → {string}

The GetCursors() method defines the mouse cursor to display when pointing over different parts of the control.

Returns:

A string expression that defines the mouse cursor to display when pointing over different parts 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

Type: string

GetElements() → {Elements}

The GetElements() method returns the control's elements.

Returns:

Returns an object of Elements type

Type: Elements

GetExpandGlyphSize() → {number}

The GetExpandGlyphSize() method specifies the size to show the element's expand/collapse glyphs.

Returns:

Returns the size to show the element's expand/collapse glyphs.

Type: number

GetFormatText() → {exontrol.DrawTextFormatEnum}

The GetFormatText() method specifies the format to display the element's caption.

Returns:

Returns a value of exontrol.DrawTextFormatEnum type, that defines the format to display 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.

Type: exontrol.DrawTextFormatEnum

GetImageAlign() → {number}

The GetImageAlign() method specifies the alignment of the element's image.

Returns:

Returns the alignment of the element's image as one of the following:

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

Type: number

GetImageSize() → {any}

The GetImageSize() method defines the size of the element's image.

Returns:

Returns the size, range of limits the element's image is displayed as expalined:

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

Type: any

GetLink() → {DisplayLinkType}

The GetLink() method gets the appearance of the link between elements.

Returns:

Returns the appearance of the link between elements. The link object includes any of the following:

type {exontrol.LinkTypeEnum}, specifies the type of the link 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)
startPos {any}, indicates the in-element's corners, the link can start from
endPos {any}, indicates the out-element's corners , the link ends into

Type: DisplayLinkType

GetLinks() → {Links}

The GetLinks() method returns the control's links.

Returns:

Returns an object of Links type

Type: Links

GetLinkStartFrom() → {DisplayLinkType}

The GetLinkStartFrom() method gets the appearance of the link that starts from any selected-element (outgoing links)

Returns:

Returns the appearance of the link that starts from any selected-element (outgoing links). It can include any of the following:

type {exontrol.LinkTypeEnum}, specifies the type of the link 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)
startPos {any}, indicates the in-element's corners, the link can start from
endPos {any}, indicates the out-element's corners , the link ends into

Type: DisplayLinkType

GetLinkUnselected() → {DisplayLinkType}

The GetLinkUnselected() method gets the appearance of the link not related to any selected-element (unselected links)

Returns:

Returns the appearance of the link not related to any selected-element (unselected links). It can include any of the following:

type {exontrol.LinkTypeEnum}, specifies the type of the link 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)
startPos {any}, indicates the in-element's corners, the link can start from
endPos {any}, indicates the out-element's corners , the link ends into

Type: DisplayLinkType

GetLocked() → {boolean}

The GetLocked() method specifies whether the control is locked(protected) or unlocked

Returns:

Returns true, if the control is locked(protected) or unlocked

Type: boolean

GetMajorGridLines() → {object}

The GetMajorGridLines() method defines the appearance of the surface's major grid-lines, as an object of {step, width, color, style, cap} type.

Since:

Returns:

Returns 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) (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)

Type: object

GetMargins() → {object}

The GetMargins() method indicates the margins the control uses.

Returns:

Returns an object of {x,y,indent,border} type that specifies the horizontal and vertical distance between elements.

Type: object

GetMinorGridLines() → {object}

The GetMinorGridLines() method defines the appearance of the surface's minor grid-lines, as an object of {step, width, color, style, cap} type.

Since:

Returns:

Returns 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) (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)

Type: object

GetOptions() → {Surface.Options}

The GetOptions() method returns the current options of the control.

Returns:

An object of Surface.Options type that indicates the options to display the control.

Type: Surface.Options

GetOrigin() → {object}

The GetOrigin() method specifies the appearance to draw the origin of the surface, as an object of {size, width, color, style, cap} type.

Since:

Returns:

Returns 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 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)

Type: object

GetPad() → {number|Array.<number>|string}

The GetPad() method specifies the space between element's content and its borders.

Returns:

Returns a value that could be:

{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

Type: number | Array.<number> | string

GetReadOnly() → {string}

The GetReadOnly() method specifies whether the control is read-only

Returns:

Returns true, if the control is read-only

Type: string

GetScrollBarsHome() → {string}

The GetScrollBarsHome() method specifies the color to highlight the position of origin (0,0) on the control's scroll bars

Returns:

Indicates null, to prevent showing the position of origin (0,0) on the control's scroll bars, or a CSS color

Type: string

GetScrollBarsLayout() → {string}

The GetScrollBarsLayout() method specifies the color to highlight the position of current layout within the control's scrollbars

Returns:

Indicates null, to prevent showing the position of current layout within the control's scrollbars, or a CSS color

Type: string

GetSelection() → {array}

The GetSelection() method gets the control's selection.

Returns:

The GetSelection can return one of the following:

{null}, indicates that the control has no selected-elements {Element}, indicates a single-selected element (while the control support single-selection only) {Element[]}, defines a collection of selected-elements within the control.

Type: array

GetSelements() → {string}

The GetSelements() method defines the elements of the control from a string-representation.

Returns:

A string expression that 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

Type: string

GetShapes() → {string}

The GetShapes() method defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance.

Returns:

A string expression that defines the shapes each part of the control can display. The format of shapes property is:

"shape(part),shape(part),..."

where:

"shape", defines the shape to apply on the UI part as one of the following:
◦ any of 140 color names any browser supports (such as red, blue, green, ...)
◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "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

Type: string

GetShowAxes() → {boolean}

The GetShowAxes() method specifies whether the control shows or hides the axes.

Since:

Returns:

Returns true if the control shows the axes.

Type: boolean

GetShowGridLines() → {boolean}

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

Since:

Returns:

Returns true if the control shows the grid lines (minor and major grid-lines).

Type: boolean

GetShowLinks() → {exontrol.ShowLinksEnum}

The GetShowLinks() method specifies whether the control's links are shown or hidden.

Returns:

Returns an exontrol.ShowLinksEnum expression that specifies whether the links between elements are visible or hidden The exontrol.ShowLinksEnum type supports the following flags:

exHide (0), specifies that no links are visible
exExtended (0x01), specifies that links are shown as extended
exShow (0x02), specifies that links are visible (the links are always shown while not exHide)
exFront (0x10), specifies that links are shown in front (by default, the control are shown on the background)
exCrossRect (0x20), shows rectangular cross-links
exCrossTriangle (0x20), shows triangular cross-links
exCrossMixt (0x60), shows mixt cross-links

Type: exontrol.ShowLinksEnum

GetShowLinksOnCollapse() → {boolean}

The GetShowLinksOnCollapse() method specifies whether the control's collapsed-links are shown or hidden.

Returns:

Returns true if links between collapsed elements are visible

Type: boolean

GetShowOrigin() → {boolean}

The GetShowOrigin() method specifies whether the control shows or hides the origin.

Since:

Returns:

Returns true if the control shows the origin.

Type: boolean

GetSingleSel() → {Surface.SingleSelEnum}

The GetSingleSel() method specifies whether the control supports single, multiple, toggle selection.

Returns:

Returns an OR combination of exontrol.Surface.SingleSelEnum flags that specifies how to select notes 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.

Type: Surface.SingleSelEnum

GetSlinks() → {string}

The GetSlinks() method defines the links between elements of the control from a string-representation.

Returns:

A string expression that 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

Type: string

GetSmooth() → {number}

The GetSmooth() method defines the time in ms the control goes from one layout to another.

Returns:

Returns the time in ms the control goes from one layout to another.

Type: number

GetTfi() → {string|object}

The GetTfi() method gets the font attributes to apply on captions of the control.

Returns:

Returns the font attributes as a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The result as a {string} can include any of the following keywords 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 string result 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 result as {object} can include 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

GetWheelChange() → {number}

The GetWheelChange() method defines the amount the control scrolls when the user rolls the mouse wheel.

Returns:

Returns the amount the control scrolls when the user rolls the mouse wheel.

Type: number

GetZoom() → {number}

The GetZoom() method defines the zoom factor of the control's content.

Returns:

A numeric value between 10 and 1000 that specifies the zoom factor of the control's content.

Type: number

GetZoomLevels() → {string}

The GetZoomLevels() method defines the zoom-levels the user can magnify the control's content

Returns:

Specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-margins the control's content is allowed to zoom.

Type: string

Home()

The Home() method zooms to 100% and scrolls the control to origin (0,0)

onChange(action, object)

The onChange() method notifies the listeners that an element has been created, moved, resized linked or expanded/collapsed

Parameters:

Name	Type	Description
`action`	string	Indicates the name of the action such as "create", "move", ...
`object`	object	Specifies the element being changed as an object of exontrol.Surface.Element/exontrol.Surface.Pool type

p2LC(oPointer) → {string}

The p2LC/pointerToLinkCursor() method determines the cursor to display once the cursor hovers the link's control-points.

Parameters:

Name	Type	Description
`oPointer`	object	Specifies the coordinates of the pointer from the giving event as an object of {x,y,buttons} type

Since:

Returns:

Returns the part of the Cursors property that defines the cursor to display once the pointer hovers the link

Type: string

Paste()

The Paste() method pastes the contents of the Clipboard onto the surface. The Cut/Copy/Paste methods work only if the control is visible.

Since:

Example

The control requires focus, so CTRL + C, CTRL + X or CTRL + V to make it works. In the same manner, the tabIndex attribute must be present into the defintion of the canvas HTML element.

 addEventListener("paste", oSurface.Paste), calls the control's Paste() method as soon as the 'paste' event occurs (CTRL + V). The paste event is fired when the user has initiated a "paste" action through the browser's user interface.
 oSurface.Shortcuts.Add("CTRL + V", oSurface.Paste, oSurface), calls the control's Paste() method as soon as user presses CTRL + V key combination (the "See text and images copied to the clipboard /Allow/Block" message may occur due security permissions)

Refresh()

The Refresh() method refreshes the entire control.

RemoveSelection()

The RemoveSelection() method deletes the selected-elements.

SelectAll()

The SelectAll() method selects all elements within the control.

SetAlignObjectsToGridLines(value)

The SetAlignObjectsToGridLines() method specifies whether the object(s) are aligned to the minor or major grid lines.

Parameters:

Name	Type	Description
`value`	number	Indicates whether the object(s) are aligned to the 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

Since:

Example

null {null} 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

SetAllowActions(value)

The SetAllowActions() method customizes the actions the user can perform once the control is clicked or touched

Parameters:

Name Type Description

Name	Type	Description
`value`	string	Indicates the actions the user can perform once the control is clicked or touched. The format of allowActions parameter is: "action(shortcut,shortcut,...),action(shortcut,shortcut,...)..." where "action", defines the name of the action as it could be any of the following: "scroll", "zoom", "fit", "select", "create", "move" or "link" "shortcut", defines the event's button or/and the modifier-keys that are required to perform the action. The "shortcut" can include one or more of the following: "Shift", "Ctrl", "Alt", "Meta", "LButton", "RButton", "MButton" and "+" For instance "create(Alt+LButton),move,scroll" 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

value

string

Indicates the actions the user can perform once the control is clicked or touched. The format of allowActions parameter is:

"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."

where

"action", defines the name of the action as it could be any of the following: "scroll", "zoom", "fit", "select", "create", "move" or "link"
"shortcut", defines the event's button or/and the modifier-keys that are required to perform the action. The "shortcut" can include one or more of the following: "Shift", "Ctrl", "Alt", "Meta", "LButton", "RButton", "MButton" and "+"

Example

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

SetAllowChangeParent(value)

The SetAllowChangeParent() method specifies whether the element's position or parent can be changed at runtime by drag and drop.

Parameters:

Name	Type	Description
`value`	boolean	Indicates whether the element's position or parent can be changed at runtime by drag and drop.

Example

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

SetAllowLinkControlPoint(value)

The SetAllowLinkControlPoint() method specifies the control points of the link, the user can use to customize the link's path.

Parameters:

Name	Type	Description
`value`	Surface.LinkControlPointEnum	Specifies the control points of the link, the user can use to customize the link's path. For instance, exStartControlPoint \| exEndControlPoint specifies that the user can change only the start/end position of 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)

Example

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)

SetAxes(value)

The SetAxes() method specifies the appearance to draw the axes of the surface, as an object of {width, color, style, cap} type.

Parameters:

Name Type Description

value

object

Specifies the appearance to draw the axes of the surface, as an object of {width, color, style, cap} type

Properties

Name	Type	Description
`width`	number	Specifies the size/width of the line
`color`	any	Defines the color of the line as a CSS color format
`style`	any	An Array of numbers which specify distances to alternately draw a line and a gap. If the number of elements in the array is odd, the elements of the array get copied and concatenated.
`cap`	string	Defines the shape used to draw the end points of lines. One of the following: "butt", "round" or "square" ("butt" by default)

Since:

Example

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

SetCanvas(canvas, localCanvasopt)

The SetCanvas() method changes the control's canvas where it runs.

Parameters:

Name	Type	Attributes	Description
`canvas`	any		A string that indicates the indetifier of the element within the document, or a HTMLCanvasElement reference
`localCanvas`	boolean	<optional>	Specifies whether the canvas is used localy without requesting the canvas to handle the control itself.

SetClientRect(client)

The SetClientRect() method defines a client area for the control.

Parameters:

Name	Type	Description
`client`	any	The client parameter indicates the control's client area as: array of [x,y,width,height] type that specifies the control's client area string, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area HTMLCanvasElement, that specifies the identifier of the canvas within the document, so the canvas's client area becomes the control's client area

SetCollapsedLink(value)

The SetCollapsedLink() method changes the appearance of the link between collapsed elements.

Parameters:

Name	Type	Description
`value`	DisplayLinkType	Specifies the appearance of the link between collapsed elements. The link object includes any of the following: type {exontrol.LinkTypeEnum}, specifies the type of the link 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) startPos {any}, indicates the in-element's corners, the link can start from endPos {any}, indicates the out-element's corners , the link ends into

SetCoord(value)

The SetCoord() method specifies the type of coordinates the elements of the surface display in.

Parameters:

Name	Type	Description
`value`	Surface.CoordEnum	Specifies 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.

Example

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

SetCursors(value)

The SetCursors() method changes the mouse cursor to display when pointing over different parts of the control.

Parameters:

Name Type Description

Name	Type	Description
`value`	string	A string expression that defines the mouse cursor to display when pointing over different parts 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

value

string

A string expression that defines the mouse cursor to display when pointing over different parts 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

Example

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

SetExpandGlyphSize(value)

The SetExpandGlyphSize() method changes the size to show the element's expand/collapse glyphs.

Parameters:

Name	Type	Description
`value`	number	A value that specifies the size to show the element's expand/collapse glyphs.

Example

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

SetFormatText(value)

The SetFormatText() method changes the format to display the element's caption.

Parameters:

Name	Type	Description
`value`	exontrol.DrawTextFormatEnum	Specifies a value of exontrol.DrawTextFormatEnum value 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.

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

SetImageAlign(value)

The SetImageAlign() method changes the alignment of the element's image.

Parameters:

Name	Type	Description
`value`	number	Defines the format to show the element's caption as one 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

Example

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

SetImageSize(value)

The SetImageSize() method changes the size of the element's image.

Parameters:

Name	Type	Description
`value`	any	Indicates the size of the element's image as explained: {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.

Example

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

SetLink(value)

The SetLink() method changes the appearance of the link between elements.

Parameters:

Name	Type	Description
`value`	DisplayLinkType	Specifies the appearance of the link between elements. The link object includes any of the following: type {exontrol.LinkTypeEnum}, specifies the type of the link 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) startPos {any}, indicates the in-element's corners, the link can start from endPos {any}, indicates the out-element's corners , the link ends into

SetLinkEndTo(value)

The SetLinkEndTo() method changes the appearance of the link that ends to any selected-element (incoming links)

Parameters:

Name	Type	Description
`value`	DisplayLinkType	Specifies the appearance of the link that ends to any selected-element (incoming links). It can include any of the following: type {exontrol.LinkTypeEnum}, specifies the type of the link 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) startPos {any}, indicates the in-element's corners, the link can start from endPos {any}, indicates the out-element's corners , the link ends into

SetLinkStartFrom(value)

The SetLinkStartFrom() method changes the appearance of the link that starts from any selected-element (outgoing links)

Parameters:

Name	Type	Description
`value`	DisplayLinkType	Specifies the appearance of the link that starts from any selected-element (outgoing links). It can include any of the following: type {exontrol.LinkTypeEnum}, specifies the type of the link 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) startPos {any}, indicates the in-element's corners, the link can start from endPos {any}, indicates the out-element's corners , the link ends into

SetLinkUnselected(value)

The SetLinkUnselected() method changes the appearance of the link not related to any selected-element (unselected links)

Parameters:

Name	Type	Description
`value`	DisplayLinkType	Specifies the appearance of the link not related to any selected-element (unselected links). It can include any of the following: type {exontrol.LinkTypeEnum}, specifies the type of the link 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) startPos {any}, indicates the in-element's corners, the link can start from endPos {any}, indicates the out-element's corners , the link ends into

SetLocked(value)

The SetLocked() method locks or unlocks the control.

Parameters:

Name	Type	Description
`value`	boolean	A boolean value that indicates whether the control is locked(protected) or unlocked

Example

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

SetMajorGridLines(value)

The SetMajorGridLines() method defines the appearance of the surface's major grid-lines, as an object of {step, width, color, style, cap} type.

Parameters:

Name Type Description

value

object

Specifies the appearance of major grid-lines, as an object of {step, width, color, style, cap} type

Properties

Name	Type	Description
`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 size/width of the line (1 by default) (if 0 no major grid-lines are shown)
`color`	any	Defines the color of the line as a CSS color format ("rgba(0,0,0,0.125)" by default)
`style`	any	An Array of numbers which specify distances to alternately draw a line and a gap. If the number of elements in the array is odd, the elements of the array get copied and concatenated. (solid by default)
`cap`	string	Defines the shape used to draw the end points of lines. One of the following: "butt", "round" or "square" ("butt" by default)

Since:

Example

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

SetMargins(value)

The SetMargins() method specifies the control's margins

Parameters:

Name	Type	Description
`value`	object	Indicates an object of {x,y,indent,border} type that specifies control's margins

SetMinorGridLines(value)

The SetMinorGridLines() method defines the appearance of the surface's minor grid-lines, as an object of {step, width, color, style, cap} type.

Parameters:

Name Type Description

value

object

Specifies the appearance of minor grid-lines, as an object of {step, width, color, style, cap} type

Properties

Name	Type	Description
`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 size/width of the line (1 by default) (if 0 no minor grid-lines are shown)
`color`	any	Defines the color of the line as a CSS color format ("rgba(0,0,0,0.125)" by default)
`style`	any	An Array of numbers which specify distances to alternately draw a line and a gap. If the number of elements in the array is odd, the elements of the array get copied and concatenated. (solid by default)
`cap`	string	Defines the shape used to draw the end points of lines. One of the following: "butt", "round" or "square" ("butt" by default)

Since:

Example

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

SetOptions(nOptions, bIncludeAllopt) → {boolean}

The SetOptions() method applies new options to the SV control

Parameters:

Name	Type	Attributes	Description
`nOptions`	Surface.Options		Specifies an object of Surface.Options type that indicates the new options to apply
`bIncludeAll`	boolean	<optional>	Indicates whether all fields of nOptions are included in the element's oOpts object

Returns:

Returns true, if there were options applied to the element

Type: boolean

SetOrigin(value)

The SetOrigin() method specifies the appearance to draw the origin of the surface, as an object of {size, width, color, style, cap} type.

Parameters:

Name Type Description

value

object

Specifies the appearance to draw the origin of the surface, as an object of {size, width, color, style, cap} type

Properties

Name	Type	Description
`size`	number	Indicates the size of the origin (the size of the cross)
`width`	number	Specifies the size/width of the line
`color`	any	Defines the color of the line as a CSS color format
`style`	any	An Array of numbers which specify distances to alternately draw a line and a gap. If the number of elements in the array is odd, the elements of the array get copied and concatenated.
`cap`	string	Defines the shape used to draw the end points of lines. One of the following: "butt", "round" or "square" ("butt" by default)

Since:

Example

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

SetPad(value)

The SetPad() method changes the element's padding or the space between element's content and its borders.

Parameters:

Name	Type	Description
`value`	number \| Array.<number> \| string	Specifies a value that could be: {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

Example

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

SetReadOnly(value)

The SetReadOnly() method sets the control in read-only mode

Parameters:

Name	Type	Description
`value`	boolean	A boolean value that indicates whether the control is read-only

SetScrollBarsHome(value)

The SetScrollBarsHome() method defines the color to highlight the position of origin (0,0) on the control's scroll bars

Parameters:

Name	Type	Description
`value`	string	Specifies null, to prevent showing the position of origin (0,0) on the control's scroll bars, or a CSS color

Example

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

SetScrollBarsLayout(value)

The SetScrollBarsLayout() method defines the color to highlight the position of current layout within the control's scrollbars

Parameters:

Name	Type	Description
`value`	string	Specifies null, to prevent showing the position of current layout within the control's scrollbars, or a CSS color

Example

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

SetSelection(value)

The SetSelection() method sets the control's selection.

Parameters:

Name	Type	Description
`value`	any	The value can be any 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

SetSelements(value)

The SetSelements() method loads elements of the control from a string-representation.

Parameters:

Name Type Description

Name	Type	Description
`value`	string	A string expression that 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

value

string

"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

Example

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

SetShapes(value)

The SetShapes() method changes the shapes each part of the control can display.

Parameters:

Name Type Description

Name	Type	Description
`value`	string	A string expression that defines the shapes each part of the control can display. The format of shapes property is: "shape(part),shape(part),..." where: "shape", defines the shape to apply on the UI part as one of the following: ◦ any of 140 color names any browser supports (such as red, blue, green, ...) ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background) ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background) ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background) ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background) ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background) ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background) ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "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

value

string

A string expression that defines the shapes each part of the control can display. The format of shapes property is:

"shape(part),shape(part),..."

where:

"shape", defines the shape to apply on the UI part as one of the following:
◦ any of 140 color names any browser supports (such as red, blue, green, ...)
◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "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

Example

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

SetShowAxes(value)

The SetShowAxes() method specifies whether the control shows or hides the axes.

Parameters:

Name	Type	Description
`value`	boolean	Indicates whether the control shows or hides the axes

Since:

Example

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

SetShowGridLines(value)

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

Parameters:

Name	Type	Description
`value`	boolean	Indicates whether the control shows or hides the grid lines (minor and major grid-lines)

Since:

Example

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

SetShowLinks(value)

The SetShowLinks() method shows or hides links between elements.

Parameters:

Name	Type	Description
`value`	exontrol.ShowLinksEnum	An exontrol.ShowLinksEnum expression that specifies whether the links between elements are visible or hidden The exontrol.ShowLinksEnum type supports the following flags: exHide (0), specifies that no links are visible exExtended (0x01), specifies that links are shown as extended exShow (0x02), specifies that links are visible (the links are always shown while not exHide) exFront (0x10), specifies that links are shown in front (by default, the control are shown on the background) exCrossRect (0x20), shows rectangular cross-links exCrossTriangle (0x20), shows triangular cross-links exCrossMixt (0x60), shows mixt cross-links

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

SetShowLinksOnCollapse(value)

The SetShowLinksOnCollapse() method shows or hides links between collapsed elements.

Parameters:

Name	Type	Description
`value`	boolean	An boolean expression that specifies whether the links between collapsed elements are visible or hidden

Example

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

SetShowOrigin(value)

The SetShowOrigin() method specifies whether the control shows or hides the origin.

Parameters:

Name	Type	Description
`value`	boolean	Indicates whether the control shows or hides the origin

Since:

Example

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

SetSingleSel(value)

The SetSingleSel() method changes the control's selection to single, multiple or toggle

Parameters:

Name	Type	Description
`value`	Surface.SingleSelEnum	An OR combination of exontrol.Surface.SingleSelEnum flags to specify how user can select notes 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.

Example

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.

SetSlinks(value)

The SetSlinks() method loads links between elements of the control from a string-representation.

Parameters:

Name Type Description

Name	Type	Description
`value`	string	A string expression that 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

value

string

"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

Example

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

SetSmooth(value)

The SetSmooth() method changes the time in ms the control goes from one layout to another (0 indicates no smooth-transition is performed).

Parameters:

Name	Type	Description
`value`	number	Indicates the time in ms the control goes from one layout to another.

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.

SetTfi(value)

The SetTfi() method sets the font attributes to apply on captions of the control.

Parameters:

Name Type Description

Name	Type	Description
`value`	string \| object	Indicates a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. The value 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 string value 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 value 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.

value

string | object

Indicates a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The value 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 string value 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 value 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.

Example

null {null}, the tfi field is ignored
  "bold monospace 16 &lt;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

SetWheelChange(value)

The SetWheelChange() method changes the amount the control scrolls when the user rolls the mouse wheel.

Parameters:

Name	Type	Description
`value`	number	A value that specifies the amount the control scrolls when the user rolls the mouse wheel.

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)

SetZoom(value)

The SetZoom() method defines the zoom factor of the control's content.

Parameters:

Name	Type	Description
`value`	number	A numeric value between 10 and 1000 that specifies the zoom factor of the control's content.

Example

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

SetZoomLevels(value)

The SetZoomLevels() method defines the zoomLevels factor of the control's content.

Parameters:

Name	Type	Description
`value`	string	specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-margins the control's content is allowed to zoom

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%

Shuffle(ratio)

The Shuffle() method arranges randomly all elements within the control.

Parameters:

Name	Type	Description
`ratio`	number	specifies how far each element is randomized relative to the current size of the layout. For instance, 0 indicates that the element is not moved/shuffled, while 1, indicates that the element can randomize its position up to one width/height.

Smooth(callback, thisArg)

The Smooth() method performs a smooth-transition from a layout to another. The smooth-transition goes from the current layout to the new layout generated by the callback.

Parameters:

Name	Type	Description
`callback`	callback	Indicates a callback function that generates the new layout for the control ( such as removing or adding new elements to the control). The callback is provided with no arguments.
`thisArg`	any	Specifies the value of this keyword for callback functions. If missing, the SV object reference is used instead

UnselectAll()

The UnselectAll() method clears the control's selection.

Unshuffle()

The Unshuffle() method restores the elements of the control in case they were shuffled.

Events

onanchorclick

The onanchorclick() event occurs once the user clicks an anchor element (the <a id;options> ex-HTML part marks an anchor or hyperlink element)

Parameters:

Name Type Description

oEvent

object

Holds information about anchor being clicked

Properties

Name	Type	Description
`id`	string	specifies null (no identifier has been specified for the anchor) or the anchor's identifier
`options`	string	specifies null (no options has been specified for the anchor) or the anchor's options

Since:

Example

The following samples display information about the element being clicked:

oSurface.Listeners.Add("onanchorclick", function (oEvent)
{
 console.log(oEvent);
})

or

oSurface.oSV.onanchorclick = function (oEvent)
{
 console.log(oEvent);
}

where oSurface is an object of Surface type, oSV is member of Surface type, of SV type.

onchange

The onchange() event notifies your application that an element, or more has been changed (create, move/resize, link or expand/collapse)

Parameters:

Name Type Description

oEvent

object

Holds information about the object / action that occured

Properties

Name	Type	Description
`element`	Element	specifies an object of Element type that indicates the element being changed
`action`	string	specifies the action such as "create", "move", "link" or "expand" the element is suffer. The "undo-redo" action is available starting from 2.0. In this case the element parameter can be one of the following: 32 (0x20) {number}, specifies that a new Undo/Redo operation has been added to the queue 33 (0x21) {number}, indicates that the control's Undo() method has been called 34 (0x22) {number}, indicates that the control's Redo() method has been called

Example

The following samples display the change within the control that just occured:

oSurface.Listeners.Add("onchange", function (oEvent)
{
 console.log(oEvent);
})

or

oSurface.oSV.onchange = function (oEvent)
{
 console.log(oEvent);
}

where oSurface is an object of Surface type, oSV is member of Surface type, of SV type.

onclick

The onclick() event occurs once the user clicks or double-clicks an element

Parameters:

Name Type Description

oEvent

object

Holds information about element/link being clicked

Properties

Name	Type	Description
`element`	Element	specifies null or an object of Element type that indicates the element being clicked
`link`	Link	specifies null or an object of Link type that indicates the link being clicked
`dblClick`	boolean	indicates whether the user clicks or double-clicks the element
`button`	number	indicates which button is pressed while clicking the element as 1 (left), 2 (right) or 4 (middle)
`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

Example

The following samples display information about the element being clicked:

oSurface.Listeners.Add("onclick", function (oEvent)
{
 console.log(oEvent);
})

or

oSurface.oSV.onclick = function (oEvent)
{
 console.log(oEvent);
}

where oSurface is an object of Surface type, oSV is member of Surface type, of SV type.

onscroll

The onscroll() method notifies your application once the view has been scrolled.

Parameters:

Name Type Description

oEvent

object

Specifies an object of {view,type,value} that holds information about the view's scroll that has been changed

Properties

Name	Type	Description
`view`	SV	specifies the view, where the scroll occurs
`type`	exontrol.SB.ModeEnum	specifies the view's scroll that has changed as 0(vertical), 1(horizontal)
`value`	number	specifies the scroll's value

Example

The following samples display the view's scroll position once it is changed:

oSurface.Listeners.Add("onscroll", function (oEvent)
{
 console.log(oEvent);
})

or

oSurface.oSV.onscroll = function (oEvent)
{
 console.log(oEvent);
}

where oSurface is an object of Tree type. The oSV is member of Tree type, of SV type.

onselchange

The onselchange() event notifies your application that the control's selection has been changed.

Parameters:

Name	Type	Description
`oEvent`	object	Specifies the control's selection as one of the following: oEvent {null} indicates that the control has no selected elements oEvent {Element} indicates an object of Element type that defines the control's single-element selected oEvent {Element[]}, specifies an array of [Element] type that holds all selected elements within the control

Example

The following samples display the control's selection as soon as it changes:

oSurface.Listeners.Add("onselchange", function (oEvent)
{
 console.log(oEvent);
})

or

oSurface.oSV.onselchange = function (oEvent)
{
 console.log(oEvent);
}

where oSurface is an object of Surface type, oSV is member of Surface type, of SV type.