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
  }
}