C

TemporaryGroupInsertionData<TNode, TEdge, TNodeLabel, TEdgeLabel>

Show Usages
Specifies custom data for the TemporaryGroupInsertionStage.
Inheritance Hierarchy

Remarks

The TemporaryGroupInsertionStage can be used for ungrouped graphs if nodes should be treated by layout algorithms as if they were actually grouped.

Type Parameters

TNode

TEdge

TNodeLabel

TEdgeLabel

Examples

Using a RecursiveGroupLayout together with a TemporaryGroupInsertionStage
// define temporaryGroup1 to use an OrganicLayout
// with all nodes in nodeList belonging to temporaryGroup1
const groupNodeInsertionData = new TemporaryGroupInsertionData()
const temporaryGroup1 = groupNodeInsertionData.temporaryGroups.add(
  new TemporaryGroupDescriptor({
    recursiveGroupLayoutAlgorithm: new OrganicLayout(),
  }),
)
temporaryGroup1.items = nodeList
// wrap the core layout in a RecursiveGroupLayout and both in a TemporaryGroupInsertionStage
const layout = new TemporaryGroupInsertionStage(
  new RecursiveGroupLayout(hierarchicalLayout),
)
// combine the HierarchicalLayoutData and the TemporaryGroupNodeInsertionData
const layoutData = new CompositeLayoutData(
  hierarchicalLayoutData,
  groupNodeInsertionData,
)
// run the layout
await graphComponent.applyLayoutAnimated({
  layout,
  layoutData,
  animationDuration: '1s',
})
// do something after the Promise resolved

Members

Show:

Constructors

TemporaryGroupInsertionData

()

Parameters

Properties

temporaryGroups

: ItemCollectionMapping<TNode, TemporaryGroupDescriptor>
Gets or sets the mapping from nodes to a TemporaryGroupDescriptor so that nodes with the same descriptor will be assigned to the same temporarily inserted group node.

The stage converts the given TemporaryGroupDescriptors into a valid, temporary grouping structure that is visible for the LayoutStageBase.coreLayout and is obeyed by it if it supports grouped graphs.

To define nested temporary groups, the descriptor can contain a TemporaryGroupDescriptor.parent descriptor. Optionally, it can contain the TemporaryGroupDescriptor.recursiveGroupLayoutAlgorithm that should be applied for the temporary group if the stages is used with the RecursiveGroupLayout as its core layout.

final

Examples

A single temporary group for specific known elements can be defined as follows:

Define a single temporary group with three child nodes
//Define a temporary group with a custom additional halo to reserve space around the group
const tmpGroup = layoutData.temporaryGroups.add(
  new TemporaryGroupDescriptor({
    margins: new Insets(40),
  }),
)
//... and add three specific nodes to this group
tmpGroup.items = List.fromArray<INode>([child1, child2, child3])

The following snippet shows how to define a temporary group with default settings and no recursive layout algorithm for all nodes that share a common criteria:

Define a temporary group for nodes sharing a common tag value
//Select all nodes which share a specific custom data indicating a temporary group
for (const group of graph.nodes
  .filter((n) => n.tag.temporaryGroup != null)
  .groupBy<any, IEnumerable<INode>>((n) => n.tag.temporaryGroup)) {
  //... and define the temporary group using a default descriptor for the TemporaryGroupNodeInsertionStage
  layoutData.temporaryGroups.add(new TemporaryGroupDescriptor()).items =
    group.toList()
}

Nested temporary groups are defined via the TemporaryGroupDescriptor.parent property:

Define two nested temporary groups
//Define a parent group which contains all nodes where the label text equals "ParentGroupContent"
const parentGroup = new TemporaryGroupDescriptor()
layoutData.temporaryGroups.add(parentGroup).source = graph.nodes.filter(
  (n) => n.labels.first()?.text === 'ParentGroupContent',
)

//Define an inner group as child of the parent group and which contains nodes where the label text is "Inner"
layoutData.temporaryGroups.add(new TemporaryGroupDescriptor()).source =
  graph.nodes.filter((n) => n.labels.first()?.text === 'Inner')

See Also

API
TEMPORARY_GROUP_DESCRIPTOR_DATA_KEY

Methods

combineWith

(…data: LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>): LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>
Combines this instance with the given layout data.
This keeps the current instance unmodified and instead returns a new instance that dynamically combines the contents of all involved instances.
final

Parameters

…data: LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>
The LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel> to combine this instance with.

Return Value

LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>
The combined layout data.

See Also

Developer's Guide
API
CompositeLayoutData, GenericLayoutData