RecursiveGroupLayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel>

The layout algorithms for individual group nodes can be specified in various ways, depending on which option is the most convenient. The easiest way would be to set the same layout algorithm for all group nodes:

layoutData.groupNodeLayouts = new OrthogonalLayout()

For scenarios where only some group nodes should have a specific layout algorithm the mapper is usually the best option. However, due to RecursiveGroupLayout's handling of individual group node layouts as described above, this can be a bit complicated to specify since the IMapper<K,V> by default returns null.

So when only the mapped group nodes should have a layout algorithm applied to their contents a new Mapper<K,V> would have to be created:

const mapper = new Mapper<INode, ILayoutAlgorithm>()
mapper.defaultValue = RecursiveGroupLayout.FIX_CONTENT_LAYOUT
mapper.set(groupNode1, new OrthogonalLayout())
mapper.set(groupNode2, new HierarchicalLayout())
layoutData.groupNodeLayouts = mapper

In cases where all group node's contents should be laid out, most of them with the coreLayout and only some customized, the predefined IMapper<K,V> can be used as is:

layoutData.groupNodeLayouts.mapper.set(groupNode1, new OrthogonalLayout())
layoutData.groupNodeLayouts.mapper.set(
  groupNode2,
  new HierarchicalLayout(),
)

If the desired layout algorithm for a group node can be readily inferred from the node itself, the mapperFunction is usually the easiest to use:

// Determine the layout for the group node from a property in the tag object
layoutData.groupNodeLayouts = (groupNode: INode): ILayoutAlgorithm => {
  switch ((groupNode.tag as CustomData).layoutStyle) {
    case 'hierarchic':
      return new HierarchicalLayout()
    case 'organic':
      return new OrganicLayout()
    case 'orthogonal':
      return new OrthogonalLayout()
    case 'none':
    default:
      return RecursiveGroupLayout.FIX_CONTENT_LAYOUT
  }
}

The easiest option is to reserve the same space around all nodes, by setting a constant value:

layoutData.nodeMargins = new Insets(20)

Handling only certain nodes differently can be done easily by using the mapper property:

// node1 only reserves space above and below
layoutData.nodeMargins.mapper.set(node1, new Insets(20, 10, 0, 0))
// node2 has space all around
layoutData.nodeMargins.mapper.set(node2, new Insets(25))
// all other nodes don't get extra space

In cases where the nodeMargins for each node can be determined by looking at the node itself it's often easier to just set a mapperFunction instead of preparing a mapper:

// Retrieve the space around the node from its tag property
layoutData.nodeMargins = (node: INode): Insets =>
  new Insets(parseFloat(node.tag))