DEMOS
DOCS
FEATURES
DOWNLOAD
PURCHASE
CONTACT
BLOG
Show:

Layouts.AbstractLayout Class

The parent for all layouts. This class maintains an array of element positions and sizes, and provides the key methods for executing layout functionality. When using the Toolkit you will not ordinarily need to interact directly with a layout, but if you write your own layout then you need to extend this class and implement the abstract methods you need.

Custom Layouts

The general syntax for writing a custom layout is to call AbstractLayout's constructor and assign the return value to a variable:

jsPlumbToolkit.Layouts["MyLayout"] = function(params) {
  var _super = jsPlumbToolkit.Layouts.AbstractLayout.apply(this, arguments);
  ...
 };
Lifecycle

The lifecycle of a layout - controlled by this class - is as follows:

  • begin(_jsPlumbToolkit, parameters) This is an optional method.
  • step(_jsPlumbToolkit, parameters) This is called repeatedly until your code has indicated that the layout is complete (see below)
  • end(_jsPlumbToolkit, parameters) Also an optional method.
Layout Completion

You are required to inform the superclass when your layout is complete, via this method:

_super.setDone(true);

Other Optional Methods

Your layout can implement several optional methods should you need finer grained control of the lifecycle:

  • _nodeAdded - Notification that a new Node was added to the dataset.
  • _nodeRemoved - Notification that a new Node was added to the dataset.
  • _nodeMoved - Notification that a Node was moved.

Constructor

Layouts.AbstractLayout

(
  • params
)

Parameters:

  • params Object

    Constructor parameters

    • [draggable=true] Boolean optional

      Whether or not elements should be draggable.

    • [dragOptions] Object optional

      Drag options to set on individual elements.

Methods

_groupAdded

(
  • params
)

Optional method for subclasses to override should they wish to be informed of Group addition.

Parameters:

  • params Object

    Method args

    • group Node

      Group that was added

    • data Object

      Data associated with the Group

    • el Element

      The DOM element associated with the Group.

_groupMoved

(
  • groupId
  • x
  • y
)

Optional method for subclasses to implement if they wish to be informed of a Group having moved.

Parameters:

  • groupId String

    Id of the the Group that was moved.

  • x Number

    New X location of the Group.

  • y Number

    New Y location of the Group.

_groupRemoved

(
  • group
)

Optional method for subclasses to implement if they wish to be informed of Group removal.

Parameters:

  • group Group

    The Group that was removed.

_nodeAdded

(
  • params
)

Optional method for subclasses to override should they wish to be informed of Node addition.

Parameters:

  • params Object

    Method args

    • node Node

      Node that was added

    • data Object

      Data associated with the Node

    • el Element

      The DOM element associated with the Node.

_nodeMoved

(
  • nodeId
  • x
  • y
)

Optional method for subclasses to implement if they wish to be informed of a Node having moved.

Parameters:

  • nodeId String

    Id of the the Node that was moved.

  • x Number

    New X location of the Node.

  • y Number

    New Y location of the Node.

_nodeRemoved

(
  • node
)

Optional method for subclasses to implement if they wish to be informed of Node removal.

Parameters:

  • node Node

    The Node that was removed.

begin

(
  • _jsPlumbToolkit
  • parameters
)

This is an abstract function that subclasses may implement if they wish. It will be called at the beginning of a layout.

Parameters:

  • _jsPlumbToolkit JsPlumbToolkitInstance

    The associated jsPlumbToolkit instance

  • parameters Object

    Parameters configured for the layout.

clear

()

Resets user-supplied and calculated positions.

end

(
  • _jsPlumbToolkit
  • parameters
)

This is an abstract function that subclasses may implement if they wish. It will be called at the end of a layout.

Parameters:

  • _jsPlumbToolkit JsPlumbToolkitInstance

    The associated jsPlumbToolkit instance

  • parameters Object

    Parameters configured for the layout.

getPosition

(
  • id
  • [x]
  • [y]
  • [doNotRandomize=false]
)

Gets the position of the node with given id, creating it (as a random value) if null and optionally setting values. note this method does a 'pass by reference' thing as the return value - any changes you make will be used by the final layout step (this is a good thing). Note that here it is fine to work with the node's id, as we are not going anywhere near a DOM element yet. When it comes time to actually set a DOM element's position, we use the supplied getElementForNode function to get it. And of course note also that we are not necessarily dealing with DOM elements.

Parameters:

  • id String

    ID of the Node to retrieve the position for

  • [x] Number optional

    Optional X location for the Node if its position has not yet been set.

  • [y] Number optional

    Optional Y location for the Node if its position has not yet been set.

  • [doNotRandomize=false] Boolean optional

    If true, won't set a random position for an element whose position is not yet being tracked.

getSize

(
  • id
)
Number

Gets the size of the node with given id, caching it for later use.

Parameters:

  • id String

    ID of the node to retrieve size for.

Returns:

Number:

Width and height of the Node in an array.

groupAdded

(
  • params
  • [eventInfo]
)

Called by components to inform a layout that a new Group was added. You should never call this method directly. Also, you should not override this method in a custom layout: if your layout needs to track Group addition, implement _groupAdded instead.

Parameters:

  • params Object

    Method args

    • group Group

      Group that was added

    • el Element

      The DOM element associated with the Group.

  • [eventInfo] Object optional

    Optional information associated with the Event that the host system needs to pass through without adding to the data model.

groupRemoved

(
  • params
)

Called by components to inform a layout that a given Group was removed. You should never call this method directly.

Parameters:

  • params Object

    Method params

    • group Group

      Group that was removed.

layout

()

Runs the layout, without resetting calculated or user-provided positions beforehand. If the subclass has defined a begin method, that will be called first. Then, the subclass's step method will be called repeatedly, until the subclass makes a call to _super.setDone.

magnetize

(
  • [params]
)

Magnetize the display. You must indicate what sort of magnetization you wish to perform: if you provide an event, the event's location will be the magnetization origin. If you provide origin:{left;xxx, top:xxx}, that value will be used. If you provide neither, the computed center of all elements will be used. You can also provide an options:{...} value, whose values can contain filter, constrain and padding values for the specific run of the magnetizer.

Parameters:

  • [params] Object optional

    Magnetize parameters. If omitted, the origin of magnetization will be the computed center of all the elements.

    • [event] Event optional

      If provided, the event location will be used as the origin of magnetization.

    • [origin] Object optional

      An object with left and top properties. If provided, will be used as the origin of magnetization.

    • [options] Object optional

      Extra magnetizer options for this run of the magnetizer.

nodeAdded

(
  • params
  • [eventInfo]
)

Called by components to inform a layout that a new Node was added. You should never call this method directly. Also, you should not override this method in a custom layout: if your layout needs to track Node addition, implement _nodeAdded instead.

Parameters:

  • params Object

    Method args

    • node Node

      Node that was added

    • el Element

      The DOM element associated with the Node.

  • [eventInfo] Object optional

    Optional information associated with the Event that the host system needs to pass through without adding to the data model.

nodeRemoved

(
  • params
)

Called by components to inform a layout that a given Node was removed. You should never call this method directly.

Parameters:

  • params Object

    Method args

    • node Node

      Node that was removed

relayout

(
  • [newParameters]
  • [onComplete]
)

Runs the layout, first doing a reset of element positions. Next, if the subclass has defined a begin method, that will be called first. Then, the subclass's step method will be called repeatedly, until the subclass makes a call to _super.setDone. Use the layout method to run the layout incrementally without first resetting everything.

Parameters:

  • [newParameters] Object optional

    Optional new set of parameters to apply.

  • [onComplete] Function optional

    Optional function to call on completion of relayout.

setPosition

(
  • id
  • x
  • y
)

Sets the Position of the Node with the given ID.

Parameters:

  • id String

    ID of the Node to set the position for

  • x Number

    X location for the Node.

  • y Number

    Y location for the Node.

setPosition

(
  • id
  • x
  • y
)

Sets the position of the node/group with the given id, firing a nodeMoved/groupMoved event afterwards, and then recalculating the extents.

Parameters:

  • id String

    ID of the node/group to move

  • x Number

    Left position

  • y Number

    Top position.

setSize

(
  • id
  • s
)

Sets what the layout considers to be the size of the node with the given id. This method is not generally necessary if you use the layout methods on the surface widget.

Parameters:

  • id String

    ID of the Node to set the size for.

  • s Number

    Size of the node.