DEMOS
DOCS
FEATURES
DOWNLOAD
PURCHASE
CONTACT
BLOG

Absolute Layout

This layout, by default, retrieves the left and top members in your Node's data, and uses these as the left and top CSS properties. However, you can provide your own function to extract appropriate values, should you need to.

Absolute Layout

Parameters

  • {Function} locationFunction Optional function to use to extract a suitable location for a node.

Location Function

If you provide a locationFunction, it will be passed each Node and is expected to return an array of [left, top] position:

locationFunction:function(node) {
  return [ node.data.xPosition, node.data.yPosition ];
}

Location inside a Group

If a node is a child of a group, when the group performs a layout of its child nodes, it will pass itself as the second argument to the location function:

locationFunction:function(node, group) {
  // perhaps here you want to do something unique to each group
}

group is only ever assigned a value during the group layout phase. When processing the layout of nodes and groups, group will be null.

Example

toolkit.render({
  container:"someElement",
  layout:{
    type:"Absolute",
    parameters:{
      locationFunction:function(data) {
        var x = some code;
        var y = some more code;
        return [ x, y ];
      }
    }
  }
});
Demonstration
  • See a simple demonstration of this layout here.
  • This layout is also used by the Flowchart Builder example.