Swimlane class

The CoordEnum type defines the type of coordinates the elements of the surface supports. The coordinates of the elements can be displayed in different ways, such as Cartesian coordinates or positive coordinates. The CoordEnum type defines flags that determine how the coordinates of the elements are displayed and how the user can interact with them. The Coord property indicates the type of coordinates the surface supports, and it uses the CoordEnum type to specify their behavior.

Each CoordEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more compatible enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "cartesian,allowpositiveonly" is equivalent to the numeric value 17, or to the combination of enumeration constants exCartesian | exAllowPositiveOnly.

The LinkControlPointEnum type specifies the control points of a link. Control points are used to define and adjust the path of a link. They become visible when the user clicks on a link and can be dragged and dropped to change the link's path. The LinkControlPointEnum type defines flags that determine which control points are displayed for the control's links and how they behave when the user manipulates them. The AllowLinkControlPoint property indicates which control points the user can interact with to customize the link's path, and it uses the LinkControlPointEnum type to specify their behavior.

Each LinkControlPointEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more compatible enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "start,end,ortho" is equivalent to the numeric value 13, or to the combination of enumeration constants exStartControlPoint | exEndControlPoint | exOrthoArrange.

The Swimlane.SingleSelEnum type defines flags that determine the selection behavior of the control, such as whether selection is enabled, whether multiple selection is allowed, and how selection is toggled when the user clicks on an element. The SingleSel property indicates the selection behavior of the control, and it uses the Swimlane.SingleSelEnum type to specify its behavior.

Each SingleSelEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more compatible enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "enable,single,disablectrlsel" is equivalent to the numeric value 11, or to the combination of enumeration constants exEnableSel | exSingleSel | exDisableCtrlSel.

The type field holds the full name of the object, since constructor.name can differ in minimized or obfuscated code. This field is never altered by the control itself, so it can be reliably used to verify the object's type. It is particularly useful when multiple versions of a control exist or when you need to check the type without depending on constructor.name, which may be inconsistent in some scenarios, such as minified code.

console.log(exontrol.Swimlane.type); // logs "Swimlane"

The version field defines the version of the control. Each release of the control has a different version number, so you can use this field to check the control's version and ensure that it supports the features you want to use. The version field is especially useful when you have multiple versions of the control, or when you want to check the version of the control without relying on other properties or methods that may differ between versions.

console.log(exontrol.Swimlane.version); // displays the version of the control, for instance "5.2"

The AlignObjectsToGridLines property defines whether the object(s) are aligned to the minor or major grid lines when they are moved or resized. The MajorGridLines property defines the appearance of the surface's major grid lines as an object of {step, width, color, style, cap} type. The MinorGridLines property defines the appearance of the surface's minor grid lines in the same format. The ShowGridLines property specifies whether the control displays the minor and major grid lines.

The AlignObjectsToGridLines property can be set to 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

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

The AllowActions property customizes the actions the user can perform once the control is clicked or touched. The order of the actions is very important, as the control checks each action from left to right until it finds a matching action for the performed mouse/touch event. The first matched action is performed, and the rest of the actions are ignored. So if you want to perform a specific action once the user clicks an item, and perform another action if the user clicks an area that does not contain any item, you should place the first action before the second one in the AllowActions property.

The format of the property is:

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

where

• "action", defines the action to perform (as defined below)

  Action	Description	Flags
  "create"	Creates an element by drag (not available if the control is read-only)
  "drag-drop"	Performs drag and drop of the element (the element can be dropped inside or outside of the control). The ExDrop(event, data) method of the target HTML element is invoked once the user drops the element. The event parameter contains information about the mouse/touch event. The data parameter contains information about the source-object that initiated the drag/drop operation as {object, source, client, shape}
  "fit"	Fits the drag-area into the control's client area
  "link"	Links elements by drag (not available if the control is read-only)	[toggle], the link is removed if the linked-elements has already a link between
  "link-cp"	Allows customization of the link's path by drag (not available if the control is read-only). This action is effective only if allowLinkControlPoint field is not zero
  "move"	Moves or resizes elements by drag (not available if the control is read-only). The allowChangeParent field specifies whether the element's position or parent can be changed at runtime by drag and drop
  "scroll"	Scrolls the control's content by drag
  "select"	Selects elements by drag
  "zoom"	Zooms the control's content at dragging-point

  The exswimlane/js control supports additional actions as listed in the table below:

  Action	Description	Flags
  "create"	Creates an element or a pool by drag (For instance "create[pool](Ctrl+Alt)" creates a pool if Ctrl + Alt is pressed, while "create[element](Alt)" creates an element while the Alt key is pressed, not available if the control is read-only)	[pool], specifies that a pool is created [element], specifies that an element is created
  "move"	Moves or resizes elements by drag (For instance, "move[element]" indicates that only elements are allowed to be moved or resized, not available if the control is read-only). If flag is missing, the user can move or resize elements or pools	[pool], specifies that just pools are movable/resizable [element], specifies that just elements are movable/resizable
  "resize-header"	Resizes the pool's header (For instance, "resize-header[left,top]" specifies that just the left and top-header of the pool are resizable, not available if the control is read-only). If no flag is present, all pool's headers are resizable	[left], indicates that the left-header of the pool is resizable [right], indicates that the right-header of the pool is resizable [top], indicates that the top-header of the pool is resizable [bottom], indicates that the bottom-header of the pool is resizable
  "resize-lane"	Resizes the pool's lane (the lanes are vertically arranged)
  "resize-phase"	Resizes the pool's phase (the phases are horizontally arranged)

• "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.

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

The AllowChangeParent property defines whether an element's position or parent can be changed at runtime using drag and drop. When set to true, users can rearrange elements by dragging them to different positions or parents. When set to false, drag and drop cannot change the element's position or parent. This property is useful for maintaining a fixed structure or hierarchy within the control. AllowChangeParent is effective only if the "move" action is included in the AllowActions property and the control is not read-only. The Element.Parent property indicates the parent of an element, while Element.Position indicates the element's position within its parent's children collection.

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

The AllowLinkControlPoint property defines the control points of links that users can use to customize the link's path. This property applies to all links unless a different value is specified by the Link.AllowControlPoint property. Users can drag and drop control points to change the link's path or remove them by dragging one control point onto another. The ShowLinks property must be different from 0 to display the link's control points. AllowLinkControlPoint is effective only if the "link-cp" action is included in the AllowActions property and the control is not read-only. For instance, exStartControlPoint | exEndControlPoint specifies that the user can change only the start/end position of the link.

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

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

The AllowUndoRedo property controls whether the Undo/Redo functionality is enabled. These features let you reverse or repeat one or more actions, but all actions must be undone or redone in the exact order they were performed or reverted-skipping actions is not allowed. For instance, if you added three elements and want to undo the first addition, you must undo all three changes sequentially. To undo an action, press Ctrl+Z; to redo an action that was undone, press Ctrl+Y. The Undo() method reverses the last action or a series of actions, while the Redo() method reapplies the last undone action (essentially reversing Undo). You can also use the Shortcuts property to customize the keyboard shortcuts for the Undo and Redo commands.

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

The Axes property defines the appearance used to draw the surface axes, as an object of {width, color, style, cap} type. The axes are typically represented by two perpendicular lines that intersect at the origin (0,0) of the surface. The ShowAxes property determines whether the control displays the horizontal and vertical axes. The Axes property allows you to customize their appearance, including width, color, line style, and other visual attributes.

The Axes object can include the following members:

• width, {number} specifies the line's width or size (1 by default) (if 0 no axes are shown). For instance:

  null {null}, indicates line of 1-pixel wide (default value)
  0 {number}, indicates that no axes are shown
  2 {number}, indicates line of 2-pixels wide

• color, {string} indicates the line's color ("#E8E8E8" by default). For instance:

  null {null}, indicates a light gray line (default value)
  "transparent" {string}, specifies a transparent line
  "red" {string}, specifies a red line
  "#00FF00" {string}, specifies a green line
  "rgba(255,0,0,0.5)" {string}, indicates 50% red line

• style, {array} defines the style of the line (solid by default). Indicates 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. For instance:

  null {null} or [] {array}, defines solid grid-lines (default style)
  2 {number}, becomes [2, 2, ...]
  [5, 15, 25] {array}, becomes [5, 15, 25, 5, 15, 25, ...]

• cap {string}, determines the shape used to draw the end points of lines ("but" by default).

  Determines the shape used to draw the end points of lines, as one of the following:

  • "butt" {string}, the ends of lines are squared off at the endpoints.
  • "round" {string}, the ends of lines are rounded
  • "square" {string}, the ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness

  For instance:

  null {null}, "butt" ends (default value)
  "round" {string}, the ends of lines are rounded
  

The CollapsedLink property defines the appearance of links between collapsed elements. It allows customization of line style, color, thickness, and other visual attributes to differentiate these links from those between expanded elements. The ShowLinksOnCollapse property controls whether links between collapsed elements are visible. The Element.Expand property indicates whether an element is expanded or collapsed, and the CollapsedLink settings apply to links connecting elements that are collapsed.

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: 0, color: "blue"} {object}, sets the link between collapsed elements as a blue rectangular line with width of 1
{type: 1, color: "red", width: 2} {object}, sets the link between collapsed elements as a red direct line with width of 2

The Coord property defines the coordinate system used to display the elements of the surface. It can be set to different values to control how element coordinates are interpreted and displayed. This allows you to choose between coordinate systems such as Cartesian or default coordinates, and to specify whether only positive coordinates should be used.

The Swimlane.CoordEnum type defines the following flags:

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

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

The Cursors property defines the mouse cursor to be displayed when pointing over a part of the control. Parts that can be customized include element, expand, and others, each corresponding to a different UI component - for example, element affects the cursor when hovering over any element, while expand defines the cursor when hovering over expand/collapse glyphs. The Cursors property allows you to assign different mouse cursors to control parts, enhancing the user experience by providing visual feedback on interactive areas. For instance, the string "pointer(element),crosshair(expand)" applies a pointer cursor to the element part and a crosshair cursor to the expand part of the control.

The format of the 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 "cursor" can be any of the following:

Cursor	Description
"alias"	indicates a shortcut or alias will be created
"all-scroll"	indicates scrolling in any direction
"auto"	lets the browser decide the cursor based on context
"cell"	indicates a table cell
"col-resize"	indicates a column can be resized horizontally
"context-menu"	indicates a context menu is available
"copy"	indicates something will be copied
"crosshair"	a precise crosshair cursor
"default"	the default arrow cursor
"e-resize"	resize east (right edge)
"ew-resize"	resize horizontally
"grab"	indicates an item can be grabbed
"grabbing"	indicates an item is being grabbed
"help"	indicates help information is available
"move"	indicates something can be moved
"n-resize"	resize north (top edge)
"ne-resize"	resize northeast (top-right corner)
"nesw-resize"	resize along the northeast–southwest axis
"no-drop"	indicates dropping is not permitted
"not-allowed"	indicates the action is not allowed
"ns-resize"	resize vertically
"nw-resize"	resize northwest (top-left corner)
"nwse-resize"	resize along the northwest–southeast axis
"pointer"	the pointer cursor (a hand with a pointing finger)
"progress"	indicates background processing
"row-resize"	indicates a row can be resized vertically
"s-resize"	resize south (bottom edge)
"se-resize"	resize southeast (bottom-right corner)
"sw-resize"	resize southwest (bottom-left corner)
"text"	the text selection cursor (I-beam)
"url(...)"	uses a custom cursor image (with optional fallback)
"vertical-text"	the vertical text selection cursor
"w-resize"	resize west (left edge)
"wait"	indicates the program is busy
"zoom-in"	indicates zooming in
"zoom-out"	indicates zooming out

The "part" can be any of the following:

Cursor	Description
"anchor" (hyperlink)	defines the mouse-cursor when the mouse pointer hovers the anchor (the <a> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)
"drag-drop"	defines the cursor while the node is being dragged using the "drag-drop" action
"element"	defines the mouse-cursor when the mouse pointer hovers any element. The cursor field defines the element's indiviual cursor.
"expand" (expand/collapse)	defines the mouse-cursor when the mouse pointer hovers the element's expand/collapse glyphs
"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)

The exswimlane/js control supports additional parts as listed in the table below:

Cursor	Description
"pool" (pool)	defines the mouse-cursor when the mouse pointer hovers any pool

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

The Elements property returns the control's elements. The elements are the building blocks of the control, as they represent the objects that are displayed and manipulated within the control. The control's elements can be accessed and managed using the Elements property, which returns an object of Elements type that provides methods and properties to work with the control's elements. You can use the Elements property to add, remove, or modify elements within the control, as well as to retrieve information about the existing elements.

The following statements are equivalents:

 oSwimlane.Elements, gets the control's elements
 oSwimlane.GetElements(), gets the control's elements

where oSwimlane is an object of Swimlane type

The ExpandGlyphSize property defines the size of the element's expand/collapse glyphs. These glyphs indicate whether an element can be expanded to show its children or collapsed to hide them. ExpandGlyphSize controls the dimensions of these glyphs, allowing you to adjust their visibility based on your design preferences. Setting this property to 0 hides the expand/collapse glyphs, while a positive value (for example 24) displays them at the specified size (such as 24x24 pixels). The Element.Expand property indicates whether an element is expanded or collapsed, and the "expand" part of the Shapes property defines the appearance of the expand/collapse glyphs.

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

The FocusLink property defines the focused link, whose path the user can modify by dragging its control points when the AllowLinkControlPoint property enables them. The FocusLink property can be set to specify the focused link on the surface or read to retrieve the currently focused link. The "link-bs", "link-be", "link-m", and "link-p" parts of the Shapes property define the appearance of the link's control points (beginning, end, middle, and path control points, respectively). The onfocuslink event notifies your application when the user focuses on a new link.

The FocusLink property (setter) supports the following values to specify the focused link:

• value {number}, indicates a numeric value that defines the index of the link focus
• value {string}, specifies a string expression that defines the identifier/key/plain-caption of the link focus
• value {Link}, specifies the object reference to the link to focus

The FocusLink property (getter) returns null (no link has been focused) or the link being focused as an object of Link type.

null {null}, removes or unfocuses the focused link (do not confuse this with removing the link entirely)
0 {number}, focuses the first link of the surface

The FormatText property defines the format used to display labels or captions on the control. It is a bitwise combination of flags that control text alignment, word-breaking, tab expansion, and other rendering options. For example, you can align text to the center, enable word-breaking for long captions, or display text on a single line. The available flags are defined in the exontrol.DrawTextFormatEnum type and can be combined to achieve the desired text formatting.

The exontrol.DrawTextFormatEnum type support the following flags:

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

null {null}, centers the caption
32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line caption
0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line caption right/bottom-aligned

The ImageAlign property defines the alignment of the image within the element, while the ImageSize property defines its dimensions. Together, they control how the image is displayed within the element, with ImageSize specifying the image's size and ImageAlign determining its position relative to the caption.

The value of ImageAlign property can be:

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

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

The ImageSize property defines the size of the element's image, and the ImageAlign property defines its alignment within the element. Together, they control how the image is displayed relative to the caption. ImageSize sets the image dimensions, while ImageAlign determines its position in relation to the caption. For captions or labels that support ex-HTML formatting, images can be included using the ex-HTML tag; however, ImageSize does not affect these images. The tag supports a size attribute to specify the image's dimensions, for example: apple:182002 sets the image named "apple" to size 18.

The value of ImageSize property can be:

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

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

The Layout property defines the control's layout as a string that encodes the current UI configuration of the entire object. The encoded layout includes information such as the position, size, and state of the control's windows, as well as selected elements and other interface settings. The Layout property can be used to save and restore the control's UI layout. When used as a getter, it returns a string that encodes the current UI layout, which can be stored or transmitted as needed. When used as a setter, the Layout property accepts an encoded layout string and restores the UI layout from it, allowing you to recreate a previously saved configuration of the control's interface.

Currently, the control's Layout property serializes the following:

• layout of windows (size, dock, parent)
• selected elements
• expand/collapse elements
• control's zoom

The following statements are equivalents:

 oSwimlane.SetLayout(layout), restores the control's layout from the giving layout string
 oSwimlane.Layout = layout, restores the control's layout from the giving layout string

where oSwimlane is an object of Swimlane type and layout is a string expression that defines the UI layout to apply

The LinkEndTo property defines the appearance of links that end at selected elements (incoming links). It allows customization of line style, color, thickness, and other visual attributes to distinguish incoming links from other connections. The SV.SetLink method defines the default appearance of links between elements, and the ShowLinks property controls whether links are displayed in the control.

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

null {null}, sets the appearance of the link that ends to any selected-element (incoming links)
{type: 1, color: "red", width: 2} {object}, sets the appearance of the link that ends to any selected-element (incoming links) as direct red lines with width of 2

The LinkStartFrom property defines the appearance of links that start from selected elements (outgoing links). It allows customization of line style, color, thickness, and other visual attributes to distinguish outgoing links from other connections. The SV.SetLink method defines the default appearance of links between elements, and the ShowLinks property determines whether links are displayed in the control.

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

null {null}, sets the appearance of the link that starts from any selected-element (outgoing links)
{type: 1, color: "red", width: 2} {object}, sets the appearance of the link that starts from any selected-element (outgoing links) as direct red lines with width of 2

The LinkUnselected property defines the appearance of links that are not connected to any selected elements (unselected links). It allows customization of line style, color, thickness, and other visual attributes to visually distinguish unselected links from those related to selected elements. The SV.SetLink method defines the default appearance of links between elements, and the ShowLinks property controls whether links are displayed in the control.

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

null {null}, sets the appearance of the link not related to any selected-element (unselected links)
{type: 1, color: "red", width: 2} {object}, sets the appearance of the link not related to any selected-element (unselected links) as direct red lines with width of 2

The Links property returns the control's links. The links represent the connections or relationships between the elements within the control. The control's links can be accessed and managed using the Links property, which returns an object of Links type that provides methods and properties to work with the control's links. You can use the Links property to add, remove, or modify links between elements within the control, as well as to retrieve information about the existing links.

The following statements are equivalents:

 oSwimlane.Links, gets the control's links
 oSwimlane.GetLinks(), gets the control's links

where oSwimlane is an object of Swimlane type

The Listeners field defines the events of the control, as an object of exontrol.Lts type. The exontrol.Lts type supports forEach(callback, thisArg) method that helps you to enumerate the events the control supports. The on() method adds an event listener to the specified event or defines a keyboard shortcut. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts. The Events section lists the events the component supports.

The following sample shows how you can get all events the component currently supports:

oSwimlane.Listeners.forEach(function(name)
{
 console.log(name);
});

The following sample displays the element being clicked:

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

or

oSwimlane.on("click", function (oEvent)
{
 console.log(oEvent);
});

where oSwimlane is an object of Swimlane type

The Locked property locks or unlocks the control. The locked state of the control determines whether users can interact with it. When the control is locked, users cannot scroll, select, or interact with any element within the control. When the control is unlocked, it behaves normally, allowing users to scroll, select, and interact with its elements. In contrast, when the control is read-only, users cannot create, resize, or move elements, but they can still scroll, select, and interact with existing elements. Therefore, Locked mode completely prevents user interaction with the control, while read-only mode only prevents modifications to the elements.

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

The MajorGridLines property defines the appearance of major grid-lines, as an object of {step, width, color, style, cap} type. The MinorGridLines property defines the appearance of the surface's minor grid lines in the same format. The ShowGridLines property specifies whether the control displays both minor and major grid lines. When ShowGridLines is true, the grid lines are displayed according to the specifications in MinorGridLines and MajorGridLines. When false, the grid lines are hidden regardless of their specified appearance. The AlignObjectsToGridLines property specifies whether objects are aligned to minor or major grid lines when they are moved or resized.

The MajorGridLines object can include the following members:

• step, {number} specifies the distance between two consecutive major grid-lines (100 by default) (if 0 the major grid-lines are ignored). For instance:

  null {null}, the distance between two consecutive major grid-lines is 10 (default value)
  0 {number}, the major grid-lines are ignored
  5 {number}, show the major grid-lines from 5 to 5

• width, {number} specifies the line's width or size (1 by default) (if 0 no major grid-lines are shown). For instance:

  null {null}, indicates line of 1-pixel wide (default value)
  0 {number}, indicates that no major grid-lines are shown
  2 {number}, indicates line of 2-pixels wide

• color, {string} indicates the line's color ("#E8E8E8" by default). For instance:

  null {null}, indicates a light gray line (default value)
  "transparent" {string}, specifies a transparent line
  "red" {string}, specifies a red line
  "#00FF00" {string}, specifies a green line
  "rgba(255,0,0,0.5)" {string}, indicates 50% red line

• style, {array} defines the style of the line (solid by default). Indicates 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. For instance:

  null {null} or [] {array}, defines solid grid-lines (default style)
  2 {number}, becomes [2, 2, ...]
  [5, 15, 25] {array}, becomes [5, 15, 25, 5, 15, 25, ...]

• cap {string}, determines the shape used to draw the end points of lines ("but" by default).

  Determines the shape used to draw the end points of lines, as one of the following:

  • "butt" {string}, the ends of lines are squared off at the endpoints.
  • "round" {string}, the ends of lines are rounded
  • "square" {string}, the ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness

  For instance:

  null {null}, "butt" ends (default value)
  "round" {string}, the ends of lines are rounded
  

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

The Margins property gets or sets the control's margins and spacing. Its value is an object of the form {x, y, indent, border}, where x is the horizontal distance between elements, y is the vertical distance, indent is the indentation for nested elements, and border is the distance from the control's edges. You can use the Margins property to adjust spacing around and between elements, improving the visual layout and organization. By default, Margins is {border: 16, x: 2, y: 2, indent: 16}, meaning the control has a 16-pixel border, 2-pixel horizontal and vertical spacing, and a 16-pixel indent. Changing an attribute of the margins object (such as x, y, indent, or border) does not update the control's layout until you call the setter of the Margins property to apply the changes. For example, oSwimlane.Margins.x = 4 has no effect on the control's layout until you call oSwimlane.Margins = {x: 4} to apply the change.

null {null}, uses the default margins of {border: 16, x: 2, y: 2, indent: 16}
{border: 0, x: 0, y: 0, indent: 0} {object}, specifies no margins, so elements are drawn at the very edge of the control and without indent

The MinorGridLines property defines the appearance of the surface's minor grid lines as an object of {step, width, color, style, cap} type. The MajorGridLines property defines the appearance of the surface's major grid lines in the same format. The ShowGridLines property specifies whether the control displays both minor and major grid lines. When ShowGridLines is true, the grid lines are displayed according to the specifications in MinorGridLines and MajorGridLines. When false, the grid lines are hidden regardless of their specified appearance. The AlignObjectsToGridLines property specifies whether objects are aligned to minor or major grid lines when they are moved or resized.

The MinorGridLines object can include the following members:

• step, {number} specifies the distance between two consecutive minor grid-lines (10 by default) (if 0 the minor grid-lines are ignored). For instance:

  null {null}, the distance between two consecutive minor grid-lines is 10 (default value)
  0 {number}, the minor grid-lines are ignored
  5 {number}, show the minor grid-lines from 5 to 5

• width, {number} specifies the line's width or size (1 by default) (if 0 no minor grid-lines are shown). For instance:

  null {null}, indicates line of 1-pixel wide (default value)
  0 {number}, indicates that no minor grid-lines are shown
  2 {number}, indicates line of 2-pixels wide

• color, {string} indicates the line's color ("#F8F8F8" by default). For instance:

  null {null}, indicates a light gray line (default value)
  "transparent" {string}, specifies a transparent line
  "red" {string}, specifies a red line
  "#00FF00" {string}, specifies a green line
  "rgba(255,0,0,0.5)" {string}, indicates 50% red line

• style, {array} defines the style of the line (solid by default). Indicates 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. For instance:

  null {null} or [] {array}, defines solid grid-lines (default style)
  2 {number}, becomes [2, 2, ...]
  [5, 15, 25] {array}, becomes [5, 15, 25, 5, 15, 25, ...]

• cap {string}, determines the shape used to draw the end points of lines ("but" by default).

  Determines the shape used to draw the end points of lines, as one of the following:

  • "butt" {string}, the ends of lines are squared off at the endpoints.
  • "round" {string}, the ends of lines are rounded
  • "square" {string}, the ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness

  For instance:

  null {null}, "butt" ends (default value)
  "round" {string}, the ends of lines are rounded
  

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

The Options property defines control's general-options. Each option is defined by a name and a value. The options allow you to customize the behavior and appearance of the control. You can set or retrieve the control's options using the Options property, which accepts or returns an object of Swimlane.Options type. By setting the appropriate options, you can modify how the control functions and how it is displayed to suit your application's needs.

Every option of the Swimlane.Options type has associated a property of the link. For instance, the option:

showLinks, defines whether to show the links between elements

is associated with the property:

ShowLinks {string}, defines whether to show the links between elements

which means that the following statements are equivalent:

oSwimlane.Options = {showLinks: "show"}
oSwimlane.SetOptions({showLinks: "show"})
oSwimlane.ShowLinks = "show"
oSwimlane.SetShowLinks("show")

where oSwimlane is a reference to the Swimlane control.

It is important to note that changing a field of the Options object does not automatically update the control. For example, oSwimlane.Options.showLinks = "show" does not apply the change. Instead, you must assign the Options property again, such as oSwimlane.SetOptions({showLinks: "show"}), so the control updates and applies the new value.

{showLinks: "show,extend"} {object}, indicates that the links are shows and extended

The Origin property defines the appearance of the surface origin as an object of {size, width, color, style, cap} type. The origin represents the point (0,0) on the surface and is typically displayed as a cross. The ShowOrigin property determines whether the origin is visible. The Origin property allows you to customize the origin's appearance, including its size, color, line style, and other visual attributes.

The Origin object can include the following members:

• size, {number} indicates the size of the origin (the size of the cross) (8 by default). For instance:

  null {null}, defines an 8-pixels wide cross (default size)
  16 {number}, defines a 16-pixels wide cross

• width, {number} specifies the line's width or size (1 by default) (if 0 no surface's origin is shown). For instance:

  null {null}, indicates line of 1-pixel wide (default width)
  0 {number}, indicates that no surface's origin is shown
  2 {number}, indicates line of 2-pixels wide

• color, {string} indicates the line's color (black by default). For instance:

  null {null}, indicates a black line (default color)
  "transparent" {string}, specifies a transparent line
  "red" {string}, specifies a red line
  "#00FF00" {string}, specifies a green line
  "rgba(255,0,0,0.5)" {string}, indicates 50% red line

• style, {array} defines the style of the line (solid by default). Indicates 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. For instance:

  null {null} or [] {array}, defines solid grid-lines (default style)
  2 {number}, becomes [2, 2, ...]
  [5, 15, 25] {array}, becomes [5, 15, 25, 5, 15, 25, ...]

• cap {string}, determines the shape used to draw the end points of lines ("but" by default).

  Determines the shape used to draw the end points of lines, as one of the following:

  • "butt" {string}, the ends of lines are squared off at the endpoints.
  • "round" {string}, the ends of lines are rounded
  • "square" {string}, the ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness

  For instance:

  null {null}, "butt" ends (default value)
  "round" {string}, the ends of lines are rounded
  

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

The Pad property defines the space between an element's content and its border. It can be a single number for equal horizontal and vertical padding, or a pair of values ("x,y" or [x, y]) for different horizontal and vertical padding. For example, 8 adds 8 pixels on all sides, while "8,4" adds 8 pixels horizontally and 4 pixels vertically. The Swimlane.Pad property defines a default padding for all elements, which can be overridden for individual elements using Element.Pad property.

The value of Pad property can 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

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

The Pools property returns the control's pools. The pool is a container of lanes and phases, where the lanes and phases are used to group elements of the control. The lane is a horizontal subdivision of the pool, while the phase is a vertical subdivision of the pool. The pools are shown as rectangles on the control, where the lanes and phases are shown as subdivisions of the pool. The elements of the control can be added to a specific lane and phase of the pool, so the elements are shown within the corresponding lane and phase of the pool. The Pool property gets the pool giving its index, identifier/key or reference.

The following statements are equivalent:

 oSwimlane.Pools {Pools}, gets the control's pools as an object of Pools type
 oSwimlane.GetPools() {Pools}, gets the control's pools as an object of Pools type

where oSwimlane is an object of Swimlane type

The ReadOnly property gets or sets whether the control operates in read-only mode. When the control is read-only, users can still scroll, select, and interact with existing elements, but they cannot create, resize, or move any element within the control. This allows users to view and interact with the content without modifying it. In contrast, the Locked property completely prevents user interaction with the control, while ReadOnly mode only prevents modifications to the elements.

false {boolean}, the user can create, resize or move any element
true {boolean}, the user can not create, resize or move any element, but can scroll, select or interact with any element.

The ScrollBars property determines which scroll bars the control displays. It accepts one or more ScrollBarsEnum flags combined with OR. By default, ScrollBars is set to exBoth, showing both horizontal and vertical scroll bars when the content exceeds the control's client area. Scroll bars are automatically hidden when not needed, unless the ScrollBars property includes exDisableNoHorizontal, exDisableNoVertical, or exDisableBoth flags. The onscroll event is fired whenever the user scrolls the control's content.

The ScrollBars property uses the exontrol.ScrollBarsEnum enumeration as explained:

• exNoScroll (0), specifies that no scroll bars are shown (scroll is not allowed)
• exHorizontal (1), specifies that only the horizontal scroll bar is shown
• exVertical (2), specifies that only the vertical scroll bar is shown
• exBoth (3), specifies that both horizontal and vertical scroll bars are shown if the content is larger than the control's client area
• exDisableNoHorizontal (5), specifies that the horizontal scroll bar is always shown; it is disabled if it is unnecessary
• exDisableNoVertical (10), specifies that the vertical scroll bar is always shown; it is disabled if it is unnecessary
• exDisableBoth (15), specifies that both horizontal and vertical scroll bars are always shown; they are disabled if they are unnecessary
• exHScrollOnThumbRelease (0x100), specifies that the control's content is horizontally scrolled as soon as the user releases the thumb of the horizontal scroll bar
• exVScrollOnThumbRelease (0x200), specifies that the control's content is vertically scrolled as soon as the user releases the thumb of the vertical scroll bar
• exScrollOnThumbRelease (0x300), specifies that the control's content is scrolled as soon as the user releases the thumb of the scroll bar
• exHScrollEmptySpace (0x400), allows empty space when the control's content is horizontally scrolled to the end
• exVScrollEmptySpace (0x800), allows empty space when the control's content is vertically scrolled to the end
• exScrollEmptySpace (0xC00), allows empty space when the control's content is scrolled to the end
• exExtendSBS (0x3000), specifies that the control's scroll bars are visible only when the cursor hovers the window; the control's client area is extended over the scroll bar portion
• exMinSBS (0xC000), specifies that the control's scroll bars are shown as minimized
• exHideSBS (0x10000), specifies that no scroll bars are shown (scroll is allowed)

exontrol.ScrollBarsEnum.exBoth or 3 {number}, specifies that both horizontal and vertical scroll bars are shown if the content is larger than the control's client area
exontrol.ScrollBarsEnum.exNoScroll or 0 {number}, specifies that no scroll bars are shown (scroll is not allowed)

The ScrollBarsHome property defines the color used to highlight the position of the origin (0,0) on the control's scroll bars. It accepts a CSS color to display the origin marker, or null to hide it. The ScrollBarsLayout property specifies the color used to highlight the position of the current layout within the control's scroll bars. It accepts a CSS color to display the layout marker, or null to hide it. To display these markers, the ScrollBars property must be set to a value other than exNoScroll so the control shows scroll bars. Additionally, ScrollBarsHome must be set to a CSS color to display the origin marker. By default, ScrollBarsHome is set to "black", which highlights the position of the origin (0,0) on the scroll bars. This feature is useful when the control's content extends in multiple directions from the origin, as it helps users quickly identify their position relative to (0,0) and navigate the content more easily. The onscroll event is fired whenever the user scrolls the control's content. This event can be used to implement custom behavior when the user scrolls, such as updating the position of other elements on the page or loading additional content dynamically. The user can right-click on the scroll bars over the origin marker to automatically scroll the control's content to the origin position (0,0).

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

The ScrollBarsLayout property defines the color used to highlight the position of current layout within the control's scrollbars. It can be set to a CSS color to display the layout marker, or null to hide it. To display this marker, the ScrollBars property must be set to a value other than exNoScroll so the control shows scroll bars. The onscroll event is fired whenever the user scrolls the control's content. By default, ScrollBarsLayout is null, so the position of the current layout is not shown on the scroll bars. This feature is useful when the control's content extends in multiple directions from the origin, as highlighting the current layout on the scroll bars helps users easily identify their position relative to the layout and navigate the content more effectively. The user can right-click on the scroll bars over the layout marker to automatically scroll the control's content to the current layout position.

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

The Selection property defines the elements currently selected in the control. Selected elements are highlighted with a specific color to indicate their selection state. The "select" part of the Shapes property defines the appearance of the selected elements, including their color, border, and other visual attributes. When an element is selected, it is visually distinguished from unselected elements based on the defined "select" shape properties. The Selection property can be used to set or retrieve the selected elements. It accepts or returns values that identify the elements selected within the control. This property is automatically updated when the Selection property changes or when the user selects or unselects elements in the control. The SingleSel property determines the selection mode of the control. When SingleSel is true, only one element can be selected at a time. When false, multiple elements can be selected simultaneously. The onselchange event is triggered whenever the selection changes, allowing you to respond to selection changes in your application.

The Selection property can take any of the following:

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

The Selection property can return any 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)
• {array[Element]}, defines a collection of selected-elements within the control

The following statements are equivalents:

 oSwimlane.Selection = "aka", selects the element with the 'aka' key
 oSwimlane.SetSelection("aka"), selects the element with the 'aka' key

 oSwimlane.Selection {any}, gets the control's selection to sel variable
 oSwimlane.GetSelection() {any}, gets the control's selection to sel variable
 
where oSwimlane is an object of Swimlane type

The Selements property gets or sets the elements of the control from a string-representation. The Selements property is optional, because you can always use the Elements.Add method to add elements individually. However, it is very useful when you want to quickly define the control's elements using a string. The Selements property provides a getter and a setter to handle the control's elements as a string: the setter calls Elements.Load(), which reads the assigned string and creates the corresponding elements in the control, while the getter calls Elements.Save(), returning a string that represents all current elements in the control. This makes it easy to define, store, or transfer the elements using a string representation.

The format of the 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])"

where the element1, sub-element1 ... elementn defines the caption for each element (can include ex-HTML tags).

The string representation supports the following flags:

• [key] {string}, specifies the element's key (Key/GetKey()/SetKey(value) methods of Swimlane.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 Swimlane.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 Swimlane.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.Swimlane.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 Swimlane.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 Swimlane.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 Swimlane.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 Swimlane.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 Swimlane.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 Swimlane.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 Swimlane.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 Swimlane.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 Swimlane.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 Swimlane.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 Swimlane.Element). For instance, [auto] resizes the element to fit its content
• [nres] {number}, defines a non-resizable element (Resizable/GetResizable()/SetResizable(value) methods of Swimlane.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 Swimlane.Element). For instance, [nmov] indicates that the user can not move the element by drag and drop

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

The Shapes property defines the shapes that each part of the control can display, allowing you to customize its visual appearance. A shape can be specified as a JSON representation of a shape object, the name of a predefined shape within exontrol.Shapes.Swimlane or exontrol.Shapes, or a CSS color value. Parts that can be customized include element, expand, and others, each corresponding to a different UI component - for example, element affects all elements in the control, while expand defines the look of expand/collapse glyphs. The Shapes property enables you to apply different shapes and colors to control parts, enhancing its overall appearance. For instance, the string "red(element),blue(expand)" applies a red shape to the element part and a blue shape to the expand part of the control.

The format of the 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.Swimlane object (while it starts with a lowercase letter, such as element which refers to exontrol.Shapes.Swimlane.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:

Part	Description
"element"	defines the visual-appearance of all elements within the control. The shape field defines the shape for individual element.
"expand"	specifies the visual appearance for expand/collapse glyphs. The expandGlyphSize field specifies the size to show the element's expand/collapse glyphs.
"frameDrag"	specifies the visual appearance to display the frame while dragging the objects
"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
"link-be"	defines the visual-appearance of the link's end control-point (it changes the end-position of the link)
"link-bs"	defines the visual-appearance of the link's start control-point (it changes the start-position of the link)
"link-m"	defines the visual-appearance of the link's middle control-point
"link-p"	defines the visual-appearance of the link's intermediate control-point
"multiSel"	specifies the visual appearance to show the count of multiple-selected items
"select"	defines the visual-appearance of selected-element

The exswimlane/js control supports additional parts as listed in the table below:

Part	Description
"header"	defines the visual-appearance of all headers within the control
"lane"	defines the visual-appearance of all lanes for all pools
"laneAlt"	defines the visual-appearance of alternate lanes for all pools
"phase"	defines the visual-appearance of all phases for all pools
"phaseAlt"	defines the visual-appearance of alternate phases for all pools
"pool"	defines the visual-appearance of all pools within the control

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.Swimlane.xxx combined with exontrol.Shapes.Swimlane.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Swimlane.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Swimlane.zzz object defines the visual appearance of "y" part of the control

The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts. In order to provide keyboard support for the component, the owner <canvas> element must include the tabIndex attribute, as <canvas ... tabIndex="0">. You can associated a function or a callback to any shortcut.

The following sample removes the selection (calls the RemoveSelection() method) once the user presses the Delete key:

oSwimlane.Shortcuts.Add( "Delete", oSwimlane.RemoveSelection, oSwimlane );

where oSwimlane is an object of Swimlane type

The ShowAxes property specifies whether the control shows or hides the axes (horizontal and vertical). The axes are typically represented by two perpendicular lines that intersect at the origin (0,0) of the surface. The Axes property defines the appearance of the axes as an object of {width, color, style, cap} type. ShowAxes allows you to control the visibility of the axes, which can be useful when working with diagrams or layouts that use a coordinate system. By default, ShowAxes is false, meaning the axes are hidden unless explicitly enabled.

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

The ShowGridLines property specifies whether the control shows or hides the grid lines, including minor and major grid lines. The MinorGridLines and MajorGridLines properties define the appearance of the surface's minor and major grid lines, respectively. When ShowGridLines is true, the grid lines are displayed, providing a reference when working with coordinates. When false, the grid lines are hidden, offering a cleaner view. This property is especially useful for diagrams or layouts that rely on a coordinate system.

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)

The ShowLinks property shows or hides the links between elements. It is a bitwise combination of flags that control the visibility and style of the links, such as extended, cross, or orthogonal, and whether they appear in front of or behind elements. For example, links can be shown as extended lines with cross-links at the corners, or all links can be hidden. The available flags are defined in exontrol.ShowLinksEnum and can be combined to achieve the desired link display.

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. This means the control automatically arranges both the start and end points of the links so they do not overlap. For example, if multiple links start from or end at the same element, the control ensures that each link uses a different start or end point instead of all sharing the same position. This helps keep the connections visually separated and easier to distinguish.
• 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) specifies that links are shown with rectangular cross-links. When two links intersect, the control displays the crossing using a rectangular bridge so one link appears to pass over the other without merging. This makes intersections easier to read and helps visually distinguish overlapping links.
• exCrossTriangle (0x20) specifies that links are shown with triangular cross-links. When two links intersect, the control displays the crossing using a triangular marker so one link appears to pass over the other without merging. This helps clearly indicate link intersections and improves the readability of overlapping connections.
• exCrossMixt (0x60) specifies that links are shown using mixed cross-links. When two links intersect, the control displays the crossing using a combination of cross-link styles (such as rectangular or triangular bridges) so one link appears to pass over the other without merging. This mixed representation helps visually distinguish intersections and improves the readability of overlapping links.
• exPreventOverlap (0x100), adjusts the links to prevent them from overlapping the connected objects. The exPreventOverlap flag has effect only for rectangular links. The exPreventOverlap option calculates the path between A and B using the A* (A-star) pathfinding algorithm, which can be a time-consuming operation. The exontrol.L.PO.dir.def specifies the default directions for determining the best route between two points, A and B. These directions are represented as a combination of the letters R (Right), L (Left), U (Up), and D (Down), separated by commas ("RLDU,DURL" {string}, indicates the shortest route between RLDU and DURL directional path). When used with the exPreventOverlapMixt flag, it ensures that links avoid overlapping with elements or obstacles, enabling their paths to include both rectangular and diagonal lines. (@since 4.0)
• exPreventOverlapMixt (0x80), When used with the exPreventOverlap flag, it ensures that links avoid overlapping with elements or obstacles, enabling their paths to include both rectangular and diagonal lines. When combined with the exChangeColorOnOverlap flag, overlapping links alternately adjust their width in addition to changing colors. The exPreventOverlapMixt flag must always be used alongside either the exPreventOverlap or exChangeColorOnOverlap flag. (@since 4.0)
• exChangeColorOnOverlap (0x200), changes the color for links in areas where they overlap with other links, enhancing clarity and distinction between them. The exontrol.L.PO.OverlapColors defines the list of colors, separated by commas, used to display overlapping links. When combined with the exPreventOverlapMixt flag, overlapping links alternately adjust their width in addition to changing colors. (@since 4.0)

0 or exontrol.ShowLinksEnum.exHide {number}, hides the links
1 or exontrol.ShowLinksEnum.exShow {number}, shows the links (on the background)
33 or exontrol.ShowLinksEnum.exExtended | exontrol.ShowLinksEnum.exCrossRect {number}, shows "extended" and "cross" links

The ShowLinksOnCollapse property shows or hides links between collapsed elements. When set to true, links between collapsed elements are shown, allowing users to see connections even when elements are collapsed; when set to false, these links are hidden for a cleaner view. The appearance of links between collapsed elements can be customized using the CollapsedLink property. The Element.Expand property indicates whether an element is expanded or collapsed.

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

The ShowOrigin property specifies whether the control shows or hides the origin. The origin represents the point (0,0) on the surface and is typically shown as a cross. The Origin property defines the appearance of the origin as an object of {size, width, color, style, cap} type. When ShowOrigin is set to true or null, the origin is displayed, which can be useful as a reference when working with coordinates. When set to false, the origin is hidden, providing a cleaner view when the reference point is not needed. This property is useful when working with diagrams or layouts that rely on a coordinate system.

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

The SingleSel property defines whether the control supports single, multiple, toggle selection. The selection mode of the control is determined by the SingleSel property, which can be set to enable single-selection, multiple-selection, or toggle selection. When single-selection is enabled, only one element can be selected at a time. When multiple-selection is enabled, users can select multiple elements simultaneously. When toggle selection is enabled, clicking on an element toggles its selection state (selected/unselected). The Selection property holds the control's selected elements. The selection behavior can be further customized using additional flags that control how users can select elements, such as disabling selection with modifier keys or by dragging.

The Swimlane.SingleSelEnum type defines the following flags:

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

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

The Slinks property loads links between elements of the control from a string-representation. The links are the connections between elements that can be shown as lines or arrows. The Slinks property is optional, because you can always use the Links.Add method to add links individually. However, it is very useful when you want to quickly define the control's links using a string. The Slinks property provides a getter and a setter to handle the control's links as a string: the setter calls Links.Load(), which reads the assigned string and creates the corresponding links in the control, while the getter calls Links.Save(), returning a string that represents all current links in the control. This makes it easy to define, store, or transfer the links using a string representation.

The format of the string representation is (everything between [] refers to flags):

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

where the link1, ... linkn defines the caption for each link (can include ex-HTML tags).

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

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

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

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

The Spools property defines the pools of the control using a string representation. A pool is a container that organizes elements using lanes and phases. Lanes divide the pool horizontally, while phases divide it vertically. Pools are displayed as rectangles on the control, while lanes and phases appear as subdivisions within the pool. Elements can be assigned to a specific lane and phase so they are displayed within the corresponding section of the pool. The Spools property uses the Load() and Save() methods of the Pools object to retrieve and store the control's pools as a string representation.

The format of the property is:

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

The string representation supports the following flags:

• [key] {string}, specifies the pool's key (Key/GetKey()/SetKey(value) methods of of Pool class). For instance, [key=pool], specifies that the pool's key is "pool"
• [vis]/[hid] {number}, shows or hides the pool (Visible/GetVisible()/SetVisible(value) methods of of Pool class). For instance, [hid] or [vis=0], hides the pool, while [vis=1] shows the pool
• [dis] {number}, enables or disables the pool (Enabled/GetEnabled()/SetEnabled(value) methods of of Pool class). For instance, [dis] or [dis=0], disables the pool, while [dis=1] enables the pool
• [pos] {number}, changes the pool's position (0-based) (Position/GetPosition()/SetPosition(value) methods of of Pool class). For instance, [pos=0] indicates that the pool should be displayed first
• [client] {string}, specifies the pool's client-rectangle as a string of "x,y,width,height" type (without quotes) (Client/GetClient()/SetClient(value) methods of of Pool class). For instance, [client=0,0,128,128] specifies the pool's client are to [0,0,128,128]
• [shape] {string}, defines the shape for individual pool (Shape/GetShape()/SetShape(value) methods of of Pool class). For instance, [shape=Button] specifies that the pool is shown as a "button".
• [cursor] {string}, defines the mouse-cursor for individual pool (Cursor/GetCursor()/SetCursor(value) methods of of Pool class). For instance, [cursor=wait] indicates that the "wait" mouse-cursor is displayed while the cursor hovers the pool
• [headers] {string}, defines the headers of the pool (Headers/GetHeaders()/SetHeaders(value) methods of of Pool class). The format of the headers is:

  [headers=type[flag=value]...[flag=value],...,type[flag=value]...[flag=value]]

  where:
  • "type", defines the type of the header, which can be any of the following:
    • "left", defines the pool's header anchored to the left-side
    • "top", defines the pool's header anchored to the top-side
    • "right", defines the pool's header anchored to the right-side
    • "bottom", defines the pool's header anchored to the right-side
  • "flag", defines the property of the header such as:
    • [size=value], defines the size of the header, where value is a numeric value. If 0 or negative, the header is not shown
    • [shape=value], defines the shape of the header.
  For instance: [headers=left,top[size=24][shape=Button]], shows the pool's left-header with size 0, and top-header of the pool with specified size and shape.
• [exclhead]/[inclhead] {number}, indicates whether the pool's lanes and phases excludes or includes the pool's headers (ExcludeHeaders/GetExcludeHeaders()/SetExcludeHeaders(value) methods of of Pool class). For instance, [inclhead] or [exclhead=0], indicates that the pool's lanes and phases includes the pool's headers, while [exclhead=1] excludes the pool's headers from lanes and phases.
• [lanes] {string}, defines the lanes of the pool (the lanes goes vertically from top to bottom side of the pool) (Lanes/GetLanes()/SetLanes(value) methods of of Pool class). The format of lanes field is:

  "caption[flag=value]...[flag=value],...,caption[flag=value]...[flag=value]"

  where:
  • "caption", defines the lane's ex-HTML caption (shown into the pool's header)
  • "flag", defines a property of the lane such as:
    • [size=value], defines the size of the lane (in percent), where value is a numeric value. 0 or negative value hides the lane
    • [shape=value], defines the shape of the lane.
  For instance: [lanes=Lane 1[size=20],Lane 2,Lane 3,Lane 4[shape=FrameSel]], displays four-lanes where Lane 1 takes 20% from the pool, while the rest of lanes shares equaly the available space on the pool. The Lane 4 displays the FrameSel shape.
• [phases] {string}, defines the phases of the pool (the phases goes horizontally from left to right side of the pool) (Phases/GetPhases()/SetPhases(value) methods of exontrol.Swimphase.Pool). The format of phases field is:

  "caption[flag=value]...[flag=value],...,caption[flag=value]...[flag=value]"

  where:
  • "caption", defines the phase's ex-HTML caption (shown into the pool's header)
  • "flag", defines a property of the phase such as:
    • [size=value], defines the size of the phase (in percent), where value is a numeric value. 0 or negative value hides the phase
    [shape=value], defines the shape of the phase.
  For instance: [phases=Phase 1[size=20],Phase 2,Phase 3,Phase 4[shape=FrameSel]], displays four-phases where Phase 1 takes 20% from the pool, while the rest of phases shares equaly the available space on the pool. The Phase 4 displays the FrameSel shape.

"" {string}, clears the pools collection
"[key=pool][client=-512,-256,612,512]" {string}, creates a pool at specified location with the key "pool"

The Statistics property gives statistics data of objects being hold by the control. The statistics data includes the control's size, zoom level, number of visible elements, total number of elements, number of visible links, total number of links and number of selected elements. The Statistics property is useful for debugging purposes or when you need to display information about the control's content and state.

The Statistics property returns statistical information about the objects currently held by the control, such as:

Size: 588x412
Zoom: 100%
Element: 16/21
Link: 10/10
Sel: 0

The following statements are equivalents: 

 oSwimlane.GetStatistics(), gets the control's statistics data
 oSwimlane.Statistics, gets the control's statistics data

where oSwimlane is an object of Swimlane type

The Tfi property defines the font attributes for the control's captions, allowing precise customization of their appearance by specifying the text style (such as bold or italic), font family, and font size, either as a string (e.g., "b monospace 16") or as an object (e.g., {bold: true, italic: false, fontName: "monospace", fontSize: 16}), and immediately applies these settings to update the displayed captions.

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 direction as 0 (left-right), 1 (default, top-bottom), 2 (left-center-right), and 3 (top-center-bottom)
  • blend {number}, defines the gradient blend as a value between 0 and 1

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

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

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

The UndoRedoQueueLength property sets a limit on the Undo/Redo queue, which stores the history of actions performed on the control. Limiting the queue helps manage memory usage and maintain performance. The UndoRedoQueueLength getter retrieves the current maximum number of actions the queue can hold, while the setter defines this limit. Multiple actions can be grouped into a single block using StartBlockUndoRedo and EndBlockUndoRedo, and such a block counts as a single action in the Undo/Redo queue. The AllowUndoRedo property enables or disables the Undo/Redo functionality, while the Undo() and Redo() methods reverse or repeat the last action or a series of actions. Specifies the maximum number of Undo/Redo actions that may be stored to the control's Undo/Redo queue as explained:

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

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

The WheelChange property defines the amount the calendar scrolls when the user rolls the mouse wheel. This setting allows you to adjust the sensitivity of the mouse wheel interaction with the control.

• Setting wheelChange to 0 disables mouse wheel actions, preventing the control from changing when the wheel is scrolled
• Setting wheelChange to a positive number, such as 5, increases the control's value by that amount each time the wheel is rotated, enabling faster adjustments

By modifying this value, you can fine-tune the control's responsiveness, making it easier for users to perform precise changes or larger adjustments as needed.

0 {number}, locks any action the mouse's wheel performs
18 {number}, scrolls the control by 18-pixels when mouse's wheel is rotated (CTRL + wheel scrolls horizontally)

The Zoom property defines the zoom factor of the control's content. The zoom factor determines how much the control's content is magnified or reduced. Once the user adjusts the browser's zoom level, the control automatically recalculates its zoom factor to maintain the correct scaling of its content. The ZoomLevels property defines the allowed zoom levels the user can select from.

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

The ZoomLevels property defines the allowed zoom levels for the control and can be specified as a comma-separated string of numeric values (e.g., "50,100,150,200"). These values represent the percentage levels at which users can zoom in or out of the control's content. The ZoomLevels property works together with the Zoom property to provide a range of zoom options. For example, if ZoomLevels is set to "50,100,150,200", users can choose from these predefined zoom levels to adjust their view of the content.

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%

The oSV member of the Swimlane control holds a reference to the SV object and defines the base view of the control. Most of the properties and methods of the SV object are exported by the Swimlane control, so you can access them directly on the control. For example, you can call oSwimlane.GetZoom() instead of oSwimlane.oSV.GetZoom(), because the Swimlane control exposes all properties and methods of its SV object.

The following statements are equivalent:

 oSwimlane.oSV.GetZoom() {number}, gets the zoom factor of the control's content
 oSwimlane.GetZoom() {number}, gets the zoom factor of the control's content

where oSwimlane is an object of Swimlane type

The Arrange() method arranges the elements, starting from giving element, based on the links. The Arrange() method is useful to automatically arrange the elements of the surface based on their links. For instance, you can use it to arrange the elements in a hierarchical structure, such as a tree or an organizational chart, by defining the links between parent and child elements and then calling the Arrange() method. The Arrange() method takes an optional id parameter that specifies the element from which to start the arrangement. If the id parameter is not provided or is null, the arrangement starts from all linked-elements of the control.

oSwimlane.Arrange(), arranges all linked-elements of the control based on the links

The BeginUpdate() method suspends the control's render until the EndUpdate() method is called. It maintains performance, while multiple changes occurs within the control. The BeginUpdate() method is mostly used when you want to perform multiple changes to the control without refreshing the control after each change, and once all changes are performed, you can call the EndUpdate() method to refresh the control. You can use the Update() method to perform multiple changes at once. The Smooth() method makes the control transition smoothly from the current layout to a new layout. In short, it applies a gradual, animated change to the layout generated by the callback, instead of switching instantly. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.

The following statements are equivalents:

 oSwimlane.BeginUpdate();
   // performs multiple changes to the control
 oSwimlane.EndUpdate();

or 

 oSwimlane.Update(function()
 {
  // performs multiple changes to the control
 });

The BlockUndoRedo() method records the Undo/Redo operations as a block. The BlockUndoRedo() method calls StartBlockUndoRedo / EndBlockUndoRedo methods. The BlockUndoRedo() method accepts a callback function that includes the Undo/Redo operations to be recorded as a block. The GroupUndoRedoActions() method groups the next to current Undo/Redo actions into a single block The AllowUndoRedo property enables or disables the Undo/Redo feature. These features let you remove or repeat single or multiple UI actions, but all actions must be undone or redone in the order you did or undid them – you can't skip actions. The undo/redo actions are recorded to the control's undo/redo queue, which can be limited by the UndoRedoQueueLength property. The Undo() method undoes the last action or a sequence of actions, while the Redo() method redoes the last action that was undone (reverses the Undo method). For instance, if an element has been moved, Undo means moves back the element to its position before move.

The following statements are equivalents:

 oSwimlane.StartBlockUndoRedo();
  // multiple Undo/Redo operations to be recorded as a block
 oSwimlane.EndBlockUndoRedo();

or

 oSwimlane.BlockUndoRedo(function()
 {
   // multiple Undo/Redo operations to be recorded as a block
 });

The CanRedo() method indicates whether the control can perform a Redo operation. The Undo() method undoes the last action or a sequence of actions. The Redo() method redoes the last action that was undone (reverses the Undo method). For instance, if an element has been moved, Undo means moves back the element to its position before move. The Undo and Redo features let you remove or repeat single or multiple UI actions, but all actions must be undone or redone in the order you did or undid them – you can't skip actions. The undo/redo actions are recorded to the control's undo/redo queue, which can be limited by the UndoRedoQueueLength property. The AllowUndoRedo property enables or disables the Undo/Redo feature.

false {boolean}, no Redo operation is permitted
true {boolean}, a Redo operation is available

The CanUndo() method indicates whether the control can perform an Undo operation. The Undo() method undoes the last action or a sequence of actions. The Redo() method redoes the last action that was undone (reverses the Undo method). For instance, if an element has been moved, Undo means moves back the element to its position before move. The Undo and Redo features let you remove or repeat single or multiple UI actions, but all actions must be undone or redone in the order you did or undid them – you can't skip actions. The undo/redo actions are recorded to the control's undo/redo queue, which can be limited by the UndoRedoQueueLength property. The AllowUndoRedo property enables or disables the Undo/Redo feature.

false {boolean}, no Undo operation is permitted
true {boolean}, an Undo operation is available

The Clear() method clears the elements and the links. The Clear() method removes all elements and links from the control, effectively resetting the control to an empty state. After calling the Clear() method, the control will no longer contain any elements or links, and you can start adding new elements and links as needed. In the context of the control, this method is useful for quickly removing all existing content and starting fresh without having to individually delete each element or link. In addition, the Clear() method can be used to free up resources and improve performance when you want to completely reset the control's content.

oSwimlane.Clear(), clears all elements and links from the control

The Copy() method copies the current selection to the clipboard. The Cut, Copy, and Paste methods work only when the control is visible. The Copy() method generates the data to export to the clipboard from the selected elements and the links between them by calling the onCopy() method, and then sets this data in the clipboard. The onCopy() method can be overridden to customize the default data format for derived objects. By default, onCopy() returns an object of {e(lements), l(inks)} type, where e(lements) is a collection of [{ElementOptions}] objects representing the selected elements, and l(inks) is either undefined or a collection of [{LinkOptions}] objects representing the links between the selected elements. The clipboard data is stored as a JSON representation of the object returned by onCopy(), which can later be retrieved by the Paste() method through the Clipboard API.

The following samples demonstrate how to implement the Copy, Cut, and Paste methods for the control using the Clipboard API when the user presses the CTRL + C, CTRL + X (the "See text and images copied to the clipboard /Allow/Block" message may occur due security permissions):

 oSwimlane.on("{CTRL + C}", oSwimlane.Copy)
 oSwimlane.on("{CTRL + X}", oSwimlane.Cut)
 oSwimlane.on("{CTRL + V}", oSwimlane.Paste)

Please note that 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.

The Cut() method moves the selection to the Clipboard. Shortly, the Cut method copies the current selection to the clipboard by calling the Copy() method, and then removes the selected elements from the surface by calling the RemoveSelection() method. The Cut/Copy/Paste methods work only when the control is visible. The Cut method is used to cut the selected elements and links to the clipboard, and the Paste method is used to paste them back to the surface.

The following samples demonstrate how to implement the Copy, Cut, and Paste methods for the control using the Clipboard API when the user presses the CTRL + C, CTRL + X (the "See text and images copied to the clipboard /Allow/Block" message may occur due security permissions):

 oSwimlane.on("{CTRL + C}", oSwimlane.Copy)
 oSwimlane.on("{CTRL + X}", oSwimlane.Cut)
 oSwimlane.on("{CTRL + V}", oSwimlane.Paste)

Please note that 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.

The Element() method gets the element giving its index, identifier/key or reference. The Element() method returns null if the element is not found, or an object of Element type, if the elements collection contains the giving id. The Element() method is useful when you want to access a specific element of the control, and you know its index, identifier/key or reference. This method is equivalent with Elements.Item() method.

The following statements are equivalent:

 oSwimlane.Element(id) {Element}, gets the element giving its index, identifier/key or reference
 oSwimlane.Elements.Item(id) {Element}, gets the element giving its index, identifier/key or reference
 
where oSwimlane is an object of Swimlane type

The EndBlockUndoRedo() method ends recording the Undo/Redo operations as a block. You can use the StartBlockUndoRedo / EndBlockUndoRedo methods to group multiple Undo/Redo operations into a single-block. The BlockUndoRedo() method records the Undo/Redo operations as a block. The AllowUndoRedo property enables or disables the Undo/Redo feature. These features let you remove or repeat single or multiple UI actions, but all actions must be undone or redone in the order you did or undid them – you can't skip actions. The undo/redo actions are recorded to the control's undo/redo queue, which can be limited by the UndoRedoQueueLength property. The Undo() method undoes the last action or a sequence of actions, while the Redo() method redoes the last action that was undone (reverses the Undo method). For instance, if an element has been moved, Undo means moves back the element to its position before move.

oSwimlane.StartBlockUndoRedo()
   ...
 oSwimlane.EndBlockUndoRedo()

The EndUpdate() method resumes the control's render, after it is suspended by the BeginUpdate() method. The EndUpdate() method is mostly used after calling the BeginUpdate() method, to refresh the control after performing multiple changes to the control. You can use the Update() method to perform multiple changes at once. The Smooth() method makes the control transition smoothly from the current layout to a new layout. In short, it applies a gradual, animated change to the layout generated by the callback, instead of switching instantly. BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.

The following statements are equivalents:

 oSwimlane.BeginUpdate();
   // performs multiple changes to the control
 oSwimlane.EndUpdate();

or 

 oSwimlane.Update(function()
 {
  // performs multiple changes to the control
 });

The EnsureVisibleClient() method ensures that the specified client fits within the control's client area. The EnsureVisibleSelection() method is an alias of EnsureVisibleClient and ensures that the specified selection fits within the control's client area. The EnsureVisibleClient() method can adjust the control's scale or zoom factor to fully fit the client if the allowScale option is set to true. Additionally, if the nearestFit option is set to true, it ensures that the corner of the object nearest to the window's client area is visible; this option only applies when the object's size is larger than the window's client area. The FitToClient() method scrolls and zooms the control to ensure that the entire layout or a given layout-rectangle fits the control's client area, while the EnsureVisibleClient() method scrolls and zooms the control to ensure that a given client (layout-rectangle or element) fits the control's client area.

oSwimlane.EnsureVisibleClient([100, 100, 50, 50]), ensures that the rectangle of [x:100,y:100,width:50,height:50] absolute-coordinates fits within the control's client area
 oSwimlane.EnsureVisibleClient(oSwimlane.Element(0)), ensures that the first element of the control's layout fits within the control's client area
 

The EnsureVisibleSelection() method scrolls the control's content to ensure that the control's selection fits the control's client area. The Selection property can be used to set or retrieve the selected elements. The EnsureVisibleClient() method can be used to ensure that a specific client (element or rectangle) fits the control's client area. The EnsureVisibleSelection() method retrieves the current selection and calculates the union of all selected elements in absolute coordinates. It then calls the EnsureVisibleClient() method with the calculated rectangle to scroll the control's content accordingly. This ensures that all selected elements are visible within the control's client area, providing a better user experience when working with selections in the control.

oSwimlane.EnsureVisibleSelection(), scrolls the control's content to ensure that the control's selection fits the control's client area

The GetCanvas() method returns the HTMLCanvasElement object where the control is currently running on. The control is always running on a canvas, which is the canvas of the control's canvas-window (exontrol.CW). The GetCanvas() method is useful when you need to access the canvas directly. You can also use the GetCanvas() method to retrieve the canvas's context and perform custom drawing operations using the Canvas API. It is recommended to call the exontrol.CC.Resize(<canvas>, [width], [height]) method to resize and refresh the control; otherwise, the control's content is lost.

The following statement draws a filled rectangle on the control's canvas, at position (10,10) with width and height of 100px:

 oSwimlane.GetCanvas().getContext("2d").fillRect(10, 10, 100, 100)
 oSwimlane.oSV.GetCanvas().getContext("2d").fillRect(10, 10, 100, 100)

where oSwimlane is a reference to the Swimlane object

The GroupUndoRedoActions() method groups the next to current Undo/Redo actions into a single block. The BlockUndoRedo() method records the Undo/Redo operations as a block. The BlockUndoRedo() method calls StartBlockUndoRedo / EndBlockUndoRedo methods. The BlockUndoRedo() method accepts a callback function that includes the Undo/Redo operations to be recorded as a block. The AllowUndoRedo property enables or disables the Undo/Redo feature.

GroupUndoRedoActions(), groups all Undo/Redo operations into a block

The Home() method zooms to 100% and scrolls the control to origin (0,0). The Home() method is typically used to reset the view of the control's content to its default state, showing the entire content at its original size and position. This can be useful when users have zoomed in or out or scrolled away from the origin and want to quickly return to the default view. The Soom() method can be used to achieve this by setting the zoom factor to 100% and scrolling to the origin (0,0). The FitToClient() method ensures that the entire (null/undefined) or giving layout fits the control's client area.

oSwimlane.Home(), zooms to 100% and scrolls the control to origin (0,0)

The Lane() method retrieves a lane within a pool using the pool's identifier and the lane's identifier. A pool serves as a container for lanes and phases, which organize the control's elements. Lanes divide the pool horizontally, while phases divide it vertically. Pools appear as rectangles on the control, with lanes and phases displayed as subdivisions. Elements can be assigned to a specific lane and phase, making them appear within the corresponding section of the pool. The Lane() method functions identically to the Pool.Lane() method.

The following statements are equivalent:

 oSwimlane.Lane(0, 0) {PoolSplitter}, gets the first lane of the first pool of the control
 oSwimlane.Pool(0).Lane(0) {PoolSplitter}, gets the first lane of the first pool of the control

where oSwimlane is an object of Swimlane type

The Link() method gets the link giving its index, identifier/key or reference. The Link() method returns null if the link is not found, or an object of Link type, if the links collection contains the giving id. The Link() method is useful when you want to access a specific link of the control, and you know its index, identifier/key or reference. This method is equivalent with Links.Item() method.

The following statements are equivalent:

 oSwimlane.Link(id) {Link}, gets the link giving its index, identifier/key or reference
 oSwimlane.Links.Item(id) {Link}, gets the link giving its index, identifier/key or reference

where oSwimlane is an object of Swimlane type

The Paste() method pastes the contents of the Clipboard onto the surface. The Cut/Copy/Paste methods work only if the control is visible. The Paste() method retrieves the clipboard data through the Clipboard API, and then calls the onPaste() method to add the elements and links represented by this data onto the surface. The onPaste() method can be overridden to customize how the clipboard data is processed for derived objects. By default, onPaste() expects an object of {e(lements), l(inks)} type, where e(lements) is a collection of [{ElementOptions}] objects representing the elements to be pasted, and l(inks) is either undefined or a collection of [{LinkOptions}] objects representing the links between those elements. The Paste() method also ensures that the newly pasted elements are visible within the surface's client area by calculating their bounding rectangle and adjusting the view if necessary.

The following samples demonstrate how to implement the Copy, Cut, and Paste methods for the control using the Clipboard API when the user presses the CTRL + C, CTRL + X (the "See text and images copied to the clipboard /Allow/Block" message may occur due security permissions):

 oSwimlane.on("{CTRL + C}", oSwimlane.Copy)
 oSwimlane.on("{CTRL + X}", oSwimlane.Cut)
 oSwimlane.on("{CTRL + V}", oSwimlane.Paste)

Please note that 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.

The Phase() method gets the phase of the pool giving the pool's identifier and the phase's identifier. A pool serves as a container for lanes and phases, which organize the control's elements. Lanes divide the pool horizontally, while phases divide it vertically. Pools appear as rectangles on the control, with lanes and phases displayed as subdivisions. Elements can be assigned to a specific lane and phase, making them appear within the corresponding section of the pool. The Phase() method functions identically to the Pool.Phase() method.

The following statements are equivalent:

 oSwimlane.Phase(0, 0) {PoolSplitter}, gets the first phase of the first pool of the control
 oSwimlane.Pool(0).Phase(0) {PoolSplitter}, gets the first phase of the first pool of the control

where oSwimlane is an object of Swimlane type

The Pool() method gets the pool giving its index, identifier/key or reference. The pool is a container of lanes and phases, where the lanes and phases are used to group elements of the control. The lane is a horizontal subdivision of the pool, while the phase is a vertical subdivision of the pool. The pools are shown as rectangles on the control, where the lanes and phases are shown as subdivisions of the pool. The elements of the control can be added to a specific lane and phase of the pool, so the elements are shown within the corresponding lane and phase of the pool. The Pool() method is equivalent with the Pools.Item() method.

The following statements are equivalent:

 oSwimlane.Pool(0) {Pool}, gets the first pool of the control
 oSwimlane.Pools.Item(0) {Pool}, gets the first pool of the control

where oSwimlane is an object of Swimlane type

The Redo() method reapplies the last undone action (reverses the Undo method). For example, if an element was moved, Undo() restores it to its previous position, while Redo() moves it again to the new position. Undo and Redo let you remove or repeat single or multiple UI actions, but all actions must be undone or redone in the order they occurred - skipping actions is not allowed. Actions are recorded in the control's Undo/Redo queue, which can be limited using the UndoRedoQueueLength property. The AllowUndoRedo property enables or disables Undo/Redo functionality. You can press Ctrl+Z to undo an action, and Ctrl+Y to redo an action that was undone.

oSwimlane.Redo(), redoes the last action that was undone

The RedoListAction() method retrieves the actions currently available to redo. Similarly, UndoListAction() returns the actions available to undo. Both methods accept an optional action parameter to filter actions using a mask pattern. The Undo() method reverses the last action or a sequence of actions, while Redo() reapplies the last undone action.

oSwimlane.RedoListAction(), lists all Redo actions that can be executed
  oSwimlane.RedoListAction("*Element"), lists all "*Element" Redo actions that can be executed, such as AddElement, RemoveElement, UpdateElement or MoveElement
  oSwimlane.RedoListAction("AddElement"), lists first "AddElement" Redo actions that can be executed

The RedoRemoveAction() method removes the first actions from the Redo queue. Similarly, UndoRemoveAction() removes the first actions from the Undo queue. Both methods accept an optional action parameter to filter actions using a mask pattern. The Undo() method reverses the last action or a sequence of actions, while Redo() reapplies the last undone action. You can press Ctrl+Z to undo an action, and Ctrl+Y to redo an action that was undone.

RedoRemoveAction(), removes all actions from the Redo queue
  RedoRemoveAction("*Element"), removes all "*Element" actions, such as AddElement, RemoveElement, UpdateElement or MoveElement, from the Redo queue
  RedoRemoveAction("AddElement"), removes the first "AddElement" Redo action from the Redo queue

The Refresh() method forces the control to redraw and update its layout without modifying any of its properties or data. It is typically used when the visual appearance needs to be recalculated or repainted, even though no structural or state changes were made.

For example, call Refresh() when:

• The control's container has been resized and the layout must be recalculated.
• External CSS or styling changes affect the control's appearance.
• The control becomes visible after being hidden.
• You need to ensure the UI is visually synchronized with its current internal state.

The method does not alter the control's data, options, or configuration - it only updates the rendered output.

oSwimlane.Refresh(), refreshes the control

The RemoveSelection() method deletes the focus-link if exists, otherwise deletes the selected-elements. The focus-link is a visual element that indicates the element currently in focus, which may be different from the selected elements. If the focus-link exists, it will be removed when this method is called. If there are selected elements and no focus-link, those selected elements will be removed instead. The FocusLink property can be used to set or retrieve the focus-link element, and the Selection property can be used to set or retrieve the selected elements. If the selection includes elements with child elements, the RemoveSelection() method will remove the entire hierarchy of those elements. The UnselectAll() method clears the control's selection.

oSwimlane.RemoveSelection(), deletes the control's selection (focus-link or the selected-elements)

The SelectAll() method selects all elements within the control. Selected elements are highlighted with a specific color to indicate their selection state. The Selection property can be used to set or retrieve the selected elements. It accepts or returns values that identify the elements selected within the control. This property is automatically updated when the Selection property changes or when the user selects or unselects elements in the control. The SingleSel property determines the selection mode of the control. When SingleSel is true, only one element can be selected at a time. When false, multiple elements can be selected simultaneously. The SelectAll() method selects all elements within the control, while the UnselectAll() method clears the control's selection.

oSwimlane.SelectAll() {void}, selects all elements within the control
oSwimlane.UnselectAll() {void}, clears the control's selection

The Smooth() method makes the control transition smoothly from the current layout to a new layout. In short, it applies a gradual, animated change to the layout generated by the callback, instead of switching instantly. The smooth-transition goes from the current layout to the new layout generated by the callback. The smooth field defines the time in ms the control goes from one layout to another.

The following sample demonstrates how to use the Smooth() method to perform a smooth transition, such as when adding or removing elements from the control:

 oSwimlane.Smooth(function()
 {
  ...
 });

The Soom() method zooms or/and scrolls the control's content. The Soom() method can be used to smoothly zoom in or out of the control's content and scroll to a specific point within the content. This method is particularly useful for providing a better user experience when navigating through large or detailed content, allowing users to focus on specific areas while maintaining context. The zoomTo parameter specifies the target zoom factor, while the oPointAbs and rgrOrigin parameters determine the point to scroll into view and its relative position within the control's client area. By using the Soom() method, developers can create interactive and dynamic interfaces that enhance user engagement with the control's content. The Home() method can be used to reset the view to the default state, showing the entire content at its original size and position, while the FitToClient() method ensures that the entire (null/undefined) or given layout fits the control's client area.

oSwimlane.Soom(100, [0,0]), zooms to 100% and brings the origin (0,0) at its original position
 oSwimlane.Soom(150, [0,0], [0,0]), zooms to 150% and brings the origin (0,0) at top-left corner

The StartBlockUndoRedo() method begins recording all subsequent Undo/Redo operations into a single block until EndBlockUndoRedo() is called. This allows multiple Undo/Redo actions to be grouped as one. The BlockUndoRedo() method records the Undo/Redo operations as a block. The AllowUndoRedo property enables or disables Undo/Redo functionality. These features let you undo or redo single or multiple UI actions, but actions must be reversed in the order they were performed - skipping is not allowed. All undo/redo actions are recorded in the control's Undo/Redo queue, which can be limited using the UndoRedoQueueLength property. The Undo() method reverses the last action or a sequence of actions, while Redo() reapplies the last undone action. For example, if an element was moved, Undo() returns it to its previous position.

oSwimlane.StartBlockUndoRedo()
   ...
 oSwimlane.EndBlockUndoRedo()

The Undo() method reverses the last action or a sequence of actions, while Redo() reapplies the last undone action. For example, if an element was moved, Undo() restores it to its previous position. Undo and Redo let you remove or repeat single or multiple UI actions, but all actions must be undone or redone in the order they occurred - skipping actions is not allowed. Actions are recorded in the control's Undo/Redo queue, which can be limited using the UndoRedoQueueLength property. The AllowUndoRedo property enables or disables Undo/Redo functionality. You can press Ctrl+Z to undo an action, and Ctrl+Y to redo an action that was undone.

oSwimlane.Undo(), undoes the last control operation

The UndoListAction() method retrieves the actions currently available to undo. Similarly, RedoListAction() returns the actions available to redo. Both methods accept an optional action parameter to filter actions using a mask pattern. The Undo() method reverses the last action or a sequence of actions, while Redo() reapplies the last undone action.

oSwimlane.UndoListAction(), lists all Undo actions that can be executed
  oSwimlane.UndoListAction("*Element"), lists all "*Element" Undo actions that can be executed, such as AddElement, RemoveElement, UpdateElement or MoveElement.
  oSwimlane.UndoListAction("AddElement",1), lists first "AddElement" Undo actions that can be executed

The UndoRemoveAction() method removes the last actions from the Undo queue. Similarly, RedoRemoveAction() removes the last actions from the Redo queue. Both methods accept an optional action parameter to filter actions using a mask pattern. The Undo() method reverses the last action or a sequence of actions, while Redo() reapplies the last undone action. You can press Ctrl+Z to undo an action, and Ctrl+Y to redo an action that was undone.

UndoRemoveAction(), removes all actions from the Undo queue
  UndoRemoveAction("*Element"), removes all "*Element" actions, such as AddElement, RemoveElement, UpdateElement or MoveElement, from the Undo queue
  UndoRemoveAction("AddElement"), removes the first "AddElement" Undo action from the Undo queue

The UnselectAll() method clears the control's selection. Selected elements are highlighted with a specific color to indicate their selection state. The Selection property can be used to set or retrieve the selected elements. It accepts or returns values that identify the elements selected within the control. This property is automatically updated when the Selection property changes or when the user selects or unselects elements in the control. The SingleSel property determines the selection mode of the control. When SingleSel is true, only one element can be selected at a time. When false, multiple elements can be selected simultaneously. The SelectAll() method selects all elements within the control, while the UnselectAll() method clears the control's selection.

oSwimlane.SelectAll() {void}, selects all elements within the control
oSwimlane.UnselectAll() {void}, clears the control's selection

The Update() method locks the control's paint during the callback, and invalidates the control once the method ends. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() or Smooth() methods, because the methods already maintain performance while performing multiple changes to the control.

The following statements are equivalents:

 oSwimlane.Update(function()
 {
  // performs multiple changes to the control
 });

or 

 oSwimlane.BeginUpdate();
   // performs multiple changes to the control
 oSwimlane.EndUpdate();

The feE() method (short for forEachElement) invokes the callback for each element of the control (enumerates the elements, as they were added). The feE() method is useful when you want to perform an action for each element of the control, such as display the caption of each element, or change the color of all elements. The feEU() method invokes the callback for each element of the control, until the callback returns a truthy value (enumerates the elements, as they were added). The Elements.Item and Elements.Count properties can be used also to enumerate the elements, but the feE() and feEU() methods are more convenient and efficient.

The following sample displays the caption of all elements:

oSwimlane.feE(function(oElement)
{
   console.log(oElement.Caption)
})

The feEU() method (short for forEachElementUntil) invokes the callback for each element of the control, until the callback returns a truthy value (enumerates the elements, as they were added). The feEU() method is useful when you want to perform an action for each element of the control, such as display the caption of each element, or change the color of all elements, until a specific element is reached. The Elements.Item and Elements.Count properties can be used also to enumerate the elements, but the feE() and feEU() methods are more convenient and efficient.

The following sample displays the caption of the first non-movable element:

console.log(oSwimlane.feEU(function(oElement)
{
   return !oElement.isMovable() && oElement.Caption || "";
}))

The feL() method (short for forEachLink) invokes the callback for each link of the control (enumerates the links, as they were added). The feL() method is useful when you want to perform an action for each link of the control, such as display the from/to of each link, or change the color of all links. The feLU() method invokes the callback for each link of the control, until the callback returns a truthy value (enumerates the links, as they were added). The Links.Item and Links.Count properties can be used also to enumerate the links, but the feL() and feLU() methods are more convenient and efficient.

The following sample displays the from/to of all links:

oSwimlane.feL(function(oLink)
{
   console.log(oLink.From, "->", oLink.To)
})

The feLU() method (short for forEachLinkUntil)invokes the callback for each link of the control, until the callback returns a truthy value (enumerates the links, as they were added). The feLU() method is useful when you want to perform an action for each link of the control, such as display the from/to of each link, or change the color of all links, until a specific link is reached. The Links.Item and Links.Count properties can be used also to enumerate the links, but the feL() and feLU() methods are more convenient and efficient.

The following sample displays the first hidden link:

console.log(oSwimlane.feLU(function(oLink)
{
   return !oLink.isVisible() && (oLink.From + "->" + oLink.To) || "";
}))

The feP() method (short for forEachPool) invokes the callback for each pool of the control (enumerates the pools, as they were added). The feP() method is similar with fePU() method, but the fePU() method continues the enumeration until the callback returns a truthy value, while the feP() method enumerates all pools regardless of the callback's return value. The Pools.Count property indicates the number of pools within the control, while the Pools.Item() method gets a pool giving its index, identifier/key or reference.

The following sample displays the client-rectangle of every pool:

 oSwimlane.feP(function(oPool)
 {
    console.log(oPool.Client)
 })

The fePU() method (short for forEachPoolUntil) invokes the callback for each pool of the control, until the callback returns a truthy value (enumerates the pools, as they were added). The fePU() method is similar with feP() method, but the feP() method enumerates all pools regardless of the callback's return value, while the fePU() method continues the enumeration until the callback returns a truthy value. The Pools.Count property indicates the number of pools within the control, while the Pools.Item() method gets a pool giving its index, identifier/key or reference.

The following sample displays the client-rectangle of the first disabled pool:

 console.log(oSwimlane.fePU(function(oPool)
 {
    return !oPool.isEnabled() && oPool.Client;
 }))

The off() method removes a previously bound handler from a specified event, allowing you to stop listening for that event and prevent the associated actions from being executed. Also removes keyboard shortcuts previously defined using the on() method. The event name is case-insensitive and may or may not include the 'on' prefix. For example, 'click' is equivalent to 'onclick' and vice versa. If the event parameter is missing/empty/undefined, all event handlers are removed from the control. If the listener parameter is missing/empty/undefined, all handlers of the specified event are removed. If the method parameter is missing/empty/undefined, the listener[type]() function is used to compare and remove the handler(s).

The following example removes the click event handler from the control:

oSwimlane.off("click");

where oSwimlane is an object of Swimlane type.

This sample is equivalent to:

oSwimlane.Listeners.Remove("onclick");

The following example removes all event handlers from the control:

oSwimlane.off();

where oSwimlane is an object of Swimlane type.

This sample is equivalent to:

oSwimlane.Listeners.Clear();

or

oSwimlane.Listeners.Remove();

The on() method adds an event listener to the specified event or defines a keyboard shortcut. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts.

The following example logs event details when the control is clicked:

oSwimlane.on("click", function(oEvent)
{
  console.log(oEvent);
});

where oSwimlane is an object of Swimlane type.

This sample is quivalent of 

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