new Surface(client, oOptsopt)
The ExSurface/JS lets you organize your objects to a surface. You can use the tool to generate organigrams, diagrams, graphs, flowcharts and so on. The ExSurface/JS is a HTML standalone-component, written in JavaScript, that uses no third-party libraries.
Every option of the Surface.Options type has associated a property of the control. For instance, the option:
allowActions {string}, customizes the actions the user can perform once the user clicks or touches the controlis associated with the property:
AllowActions {string}, customizes the actions the user can perform once the user clicks or touches the controlwhich means that the following statements are equivalent:
oSurface.Options = {allowActions: "scroll"}where oSurface is an object of Surface type
oSurface.SetOptions({allowActions: "scroll"})
oSurface.AllowActions = "scroll"
oSurface.SetAllowActions("scroll")
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
client |
any | The client parameter indicates the control's client area as:
|
|
oOpts |
object |
<optional> |
An object of Surface.Options type that defines different options to display the control |
Requires:
- module:exontrol.commmon.min.js
Requires
- module:exontrol.commmon.min.js
Classes
Members
(static, readonly) CoordEnum :number
The CoordEnum type defines the type of coordinates the elements of the surface supports. The CoordEnum type supports the following values:
Type:
- number
Properties:
Name | Type | Description |
---|---|---|
exDefCoord |
number | The positive coordinates are shown right-down to origin of the surface. |
exCartesian |
number | The elements show in Cartesian coordinates. The positive coordinates are shown right-up to origin of the surface. |
exAllowPositiveOnly |
number | 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. |
- Since:
- 1.3
(static, readonly) LinkControlPointEnum :number
The LinkControlPointEnum type specifies the link's control points. The LinkControlPointEnum type supports the following values:
Type:
- number
Properties:
Name | Type | Description |
---|---|---|
exNoControlPoint |
number | The link displays no control points |
exStartControlPoint |
number | The link shows control point that changes the link's StartPos property (the exStartControlPoint point is marked with black squares) |
exEndControlPoint |
number | The link shows control point that changes the link's EndPos property (the exEndControlPoint point is marked with black squares) |
exControlPoint |
number | 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 |
number | 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 |
number | 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) |
(static, readonly) SingleSelEnum :number
The Surface.SingleSelEnum type defines flags the singleSel/SetSingleSel/GetSingleSel method uses.
Type:
- number
Properties:
Name | Type | Description |
---|---|---|
exDisableSel |
number | The exDisableSel value specifies that the control's selection is disabled. |
exEnableSel |
number | The exEnableSel flag specifies that the control's selection is enabled (multiple-selection, unless the exSingleSel is set ). |
exSingleSel |
number | The exSingleSel flag specifies that the user can select a element only. |
exToggleSel |
number | The exToggleSel flag specifies that the element's selection state is toggled once the user clicks a element. |
exDisableCtrlSel |
number | The exDisableCtrlSel flag disables toggling the element's selection state when user clicks a element, while CTRL modifier key is pressed. |
exDisableShiftSel |
number | The exDisableShiftSel flag disables selecting elements using the SHIFT key. |
exDisableDrag |
number | The exDisableDrag flag disables selecting elements by drag. |
(static) type :string
The type field defines the full-name of the object (the constructor.name does not give the same name for minimized forms)
Type:
- string
- Since:
- 1.8
(static) version :string
The version field defines the version of the control
Type:
- string
Listeners :exontrol.Lts
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 Events section lists the events the component supports.
Type:
- exontrol.Lts
Example
The following sample shows how you can get all events the component currently supports:
oSurface.Listeners.forEach(function(name)
{
console.log(name);
});
The following sample displays the element being clicked:
oSurface.Listeners.Add("onclick", function (oEvent)
{
console.log(oEvent);
});
where oSurface is an object of Surface type
oSV :SV
Holds the control's surface view as an object of SV type.
Type:
Shortcuts :exontrol.Sts
The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. 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.
Type:
- exontrol.Sts
Example
The following sample removes the selection (calls the RemoveSelection() method) once the user presses the Delete key:
oSurface.Shortcuts.Add( "Delete", oSurface.RemoveSelection, oSurface );
where oSurface is an object of Surface type
Methods
BeginUpdate()
The BeginUpdate() method suspends the control's render until the EndUpdate() method is called. It maintains performance, while multiple changes occurs within the control. You can use the Update() method to perform multiple changes at once.
cCB(event) → {boolean}
The cCB/closeComboBox() method checks whether the drop-down panel should close on click (required only if the control is hosted by an exontrol.ComboBox object)
Parameters:
Name | Type | Description |
---|---|---|
event |
event | A Mouse/Touch object to be querried for the mouse/touch position. |
- Since:
- 1.8
Returns:
Returns true if the drop-down panel should close on click
- Type
- boolean
Element(id) → {Element}
The Element() method gets the element giving its index, identifier/key or reference
Parameters:
Name | Type | Description |
---|---|---|
id |
any | The id parameter could be any of the following:
|
- Since:
- 1.1
Returns:
Returns null if the element is not found, or an object of Element type, if the elements collection contains the giving id.
- Type
- Element
EndUpdate()
The EndUpdate() method resumes the control's render, after it is suspended by the BeginUpdate() method.
GetLayout(oOptsopt) → {string}
The GetLayout() method saves the UI layout of the object to an encoded string. The layout can be restored using the SetLayout() method. Currently, the control's Layout property serializes the following:
- layout of windows (size, dock, parent)
- selected elements
- expand/collapse elements
- control's zoom
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
oOpts |
object |
<optional> |
An object of {iMask,eMask,base64,equal,eol} type that defines options to serialize the properties of the container as explained bellow:
|
- Since:
- 1.8
Returns:
Returns a string that encodes the current UI layout for the entire object
- Type
- string
Example
The following statements are equivalents:
oSurface.GetLayout(), gets the control's layout
oSurface.Layout, gets the control's layout
where oSurface is an object of Surface type
GetStatistics() → {string}
The GetStatistics() method gives statistics data of objects being hold by the control
Returns:
Returns statistics data of objects being hold by the control such as:
Size: 588x412
Zoom: 100%
Element: 16/21
Link: 10/10
Sel: 0
- Type
- string
Link(id) → {Link}
The Link() method gets the link giving its index, identifier/key or reference
Parameters:
Name | Type | Description |
---|---|---|
id |
any | The id parameter could be any of the following:
|
- Since:
- 1.1
Returns:
Returns null if the link is not found, or an object of Link type, if the links collection contains the giving id.
- Type
- Link
SetLayout(layout, oOptsopt)
The SetLayout() method restores the UI layout of the object from an encoded string, previously returned by the GetLayout() method. Currently, the control's Layout property serializes the following:
- layout of windows (size, dock, parent)
- selected elements
- expand/collapse elements
- control's zoom
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
layout |
string | A string expression that defines the UI layout to apply | |
oOpts |
object |
<optional> |
An object of {iMask,eMask,base64,equal,eol} type that defines options to serialize the UI layout as explained bellow:
|
- Since:
- 1.8
Update(callback, thisArgopt)
The Update() method locks the control's paint during the callback, and invalidates the control once the method ends.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
callback |
callback | Indicates a callback to perform changes within the control | |
thisArg |
any |
<optional> |
Specifies the value of "this" keyword during the callback. If missing/empty/undefined the thisArg points to the control itself, as an object of Surface type |