Skip to main content

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.

For applications in which the positions of the nodes is determined by your users, the Absolute layout is a good choice. If you need to render a dataset that a human being has never manipulated, you can use the Spring layout, which extends the Absolute layout and only calculates a position for nodes that do not have values set for their position.

Parameters​

  • locationFunction Optional function to use to extract a suitable location for a node. The definition of this function is:

Home > @jsplumbtoolkit/browser-ui > LocationFunction

LocationFunction type​

Defines a function that, given some vertex, can provide the x/y location of the vertex on the canvas. During a group layout, the second argument will contain the group that is being laid out, but when running the layout for the main canvas, parentGroup will not be provided.

Signature:

export declare type LocationFunction = (n: Vertex, parentGroup?: Group) => PointXY;

References: Vertex, Group, PointXY

Calculation of location​

Location Function​

If you provide a locationFunction, it will be passed each vertex and is expected to return a position for the given vertex in the form {x:number, y:number}

locationFunction:(v:Vertex):PointXY =>{
  return {x:node.data.xPosition, y: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:(v:Vertex, parent:Group):PointXY =>{
  // 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.