Global

Members

action :string

The action field specifies the name of the action Specifies the name of action such as follow: "create" {string}, specifies that the element has been created by drag and drop "move" {string}, indicates that the element has been moved or resized "link" {string}, specifies that a link starts from the element "expand" {string}, indicates that the element has been expanded or collapsed
Type:
  • string

element :Element

The element field specifies the element being changed (created, moved, resized, ...)
Type:

Type Definitions

DefArrange

type Holds different options as an object of {dir, dx, dy, align. compact} type to auto-arrange the elements using the Arrange method, for defArrange field of Surface.Options object
Type:
  • object
Properties:
Name Type Description
dir number Specifies the direction to auto-arrange the elements. Specifies a numeric value as follows:
  • 0 {number}, specifies horizontal arrangement, which indicates that the out-elements are arranged to the right (by default)
  • 1 {number}, specifies vertical arrangement, which indicates that the out-elements are arranged to the bottom.

Currently, any other value has no effect.

Example:
1, arrange vertically the elements
dx number Specifies the distance between two auto-arranged elements on horizontal axis. You can use the dx field to increase or decrease the distance of the arranged elements (36, by default)
dx number Specifies the distance between two auto-arranged elements on vertical axis. You can use the dx field to increase or decrease the distance of the arranged elements (36, by default)
align number Specifies the alignment of the elements relative to incoming/outgoing elements during the Arrange operation. Indicates a numeric value as follows:
  • 0 {number}, indicates left/top alignment
  • 1 {number}, indicates center alignment (by default)
  • 2 {number}, specifies right/bottom alignment
compact boolean Compacts the layout during the Arrange method (true, by default)

DisplayLinkType

Defines the {type, dir, width, color, arrow, arrowSize, style, startPos, endPos} type for collapsedLink, link, linkStartFrom, linkEndTo and linkUnselected fields of Surface.Options object
Type:
  • object
Properties:
Name Type Description
type exontrol.LinkTypeEnum Specifies the type of the link. The exontrol.LinkTypeEnum supports the following values:
  • exRect (0), defines a rectangular-link
  • exDirect (1), defines a direct-link
  • exStraight (2), defines a straight-link
  • exRound (3), defines a round-link
Also, the type field supports the value:
  • -1, which indicates the default type of link, which is similar with rectangular-link but more symmetrical
Example:
null {null}, indicates the default type of link, which is similar with rectangular-link but more symmetrical (equivalent of -1)
0 or exontrol.LinkTypeEnum.exRect {null}, shows rectangular-links
2 or exontrol.LinkTypeEnum.exStraight {null}, shows straight-links
dir number The dir field specifies whether the link's direction is shown or hidden. The dir field can be any of the following values:
  • 0, specifies that no direction for the link is shown
  • 1, shows the direction/arrow where the link begins
  • 2, shows the direction/arrow where the link ends
  • 3, shows the arrows on both sides
If not specified, the option 2 is used by default. Example:
null {null}, shows the direction/arrow where the link ends (equivalent of 2)
0 {number}, hides the link's direction
3 {number}, shows the arrows on both sides
width number The width field defines the size/width of the link.

Example:

null {null}, indicates links of 1-pixel wide
2 {number}, indicates links of 2-pixels wide
color string The color field specifies the color to show the link (defines the color of the link as a CSS color format).

Example:

null {null}, indicates a black link
"transparent" {string}, specifies a transparent link
"red" {string}, specifies a red link
"#00FF00" {string}, specifies a green link
"rgba(255,0,0,0.5)" {string}, indicates 50% red link
arrow string The arrow field indicates the arrow's color (if it is missing or not specified the arrow is shown using the link's color).

Example:

null {null}, indicates that the link's color defines the color of the link's arrow
"transparent" {string}, specifies a transparent arrow
"red" {string}, specifies a red arrow
"#00FF00" {string}, specifies a green arrow
"rgba(255,0,0,0.5)" {string}, indicates 50% red arrow
arrowSize number The arrowSize field indicates the arrow's size (if it is missing or not specified the arrow's size is defined by link's width).

Example:

null {null}, indicates that the link's width defines the size of the link's arrow
2 {number}, specifies that the link's arrow size is 2 (equivalent of arrows when link's width is set on 2)
arrowShape object The arrowShape field defines the custom-shape to draw the link's arrow, as an object of exontrol.Def.Shape type.

Example:

null {null}, indicates that the link's arrow is shown by default as a triangle oriented to point the direction
{primitive: "Circle"} {object}, shows the link's arrow as a circle
{primitive: "Rect"} {object}, shows the link's arrow as a rectangle
style null | number | Array.<number> The style field defines the style of the link. Could be any of the following:
  • {number[]} an array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units)
  • {number} specifies number of elements in the array is odd, the elements of the array get copied and concatenated
Example:
null {null}, defines a solid grid-lines
[] {array}, indicates a solid grid-lines
2 {number}, will become [2, 2, ...]
[5, 15, 25] {array}, will become [5, 15, 25, 5, 15, 25, ...]
startPos null | number | string The startPos field defines the in-element's corners, the link can start from. Could be any of the following:
  • startPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element
  • startPos {number}, indicates an OR combination of one or more values of exontrol.CT type
  • startPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
The exontrol.CT type defines the following values:
  • TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
  • TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
  • TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
  • ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
  • C (34 or 0x22), indicates the center of the object, equivalent of "C"
  • MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
  • BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
  • BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
  • BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
Example:
null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link starts from the in-element's closest point to out-element
exontrol.CT.TC {number}, indicates that the link always starts from the top-center point of the in-element
exontrol.CT.TL | exontrol.CT.TC | exontrol.CT.TR {number}, indicates that the link starts from the in-element's top side (the closest to out-element)
"MR" {string}, specifies that the link always starts from the middle-right point of the in-element
"TR,MR,BR" {string}, specifies that the link starts from the in-element's right side (the closest to out-element)
endPos null | number | string The endPos field defines the out-element's corners, the link can end into. Could be any of the following:
  • endPos {undefined//null/0/false}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the in-element's closest point to in-element
  • endPos {number}, indicates an OR combination of one or more values of exontrol.CT type
  • endPos {string}, indicates a list of corners separated by comma(,) which can be any of "TL", "TC", "TR", "ML", "MR", "BL", "BC" or "BR"
The exontrol.CT type defines the following values:
  • TL (17 or 0x11), indicates the top-left corner, equivalent of "TL"
  • TC (18 or 0x12), indicates the top-center point, equivalent of "TC"
  • TR (20 or 0x14), indicates the top-right corner, equivalent of "TR"
  • ML (33 or 0x21), indicates the middle-left point, equivalent of "ML"
  • C (34 or 0x22), indicates the center of the object, equivalent of "C"
  • MR (36 or 0x24), indicates the middle-right point, equivalent of "MR"
  • BL (65 or 0x41), indicates the bottom-left corner, equivalent of "BL"
  • BC (66 or 0x42), indicates the bottom-center point, equivalent of "BC"
  • BR (68 or 0x44), Indicates the bottom-right corner, equivalent of "BR"
Example:
null {null}, equivalent of ["TC","ML","BC","MR"], specifies that the link ends into the out-element's closest point to in-element
exontrol.CT.BC {number}, indicates that the link always ends into the bottom-center point of the out-element
exontrol.CT.BL | exontrol.CT.BC | exontrol.CT.BR {number}, indicates that the link ends into the out-element's bottom side (the closest to in-element)
"ML" {string}, specifies that the link always ends to the middle-left point of the out-element
"TL,ML,BL" {string}, specifies that the link ends into the out-element's left side (the closest to in-element)