HierarchicalLayoutData<TNode, TEdge, TNodeEdge, TNodeLabel, TEdgeLabel>

// Set two different critical edge paths with different priorities
for (const edge of path1) {
  layoutData.criticalEdgePriorities.mapper.set(edge, 5)
}
// Lower priority for the second path, which then may deviate from a straight line
for (const edge of path2) {
  layoutData.criticalEdgePriorities.mapper.set(edge, 2)
}

// Assume that the edge's tag holds an instance that has an 'IsCritical' property
layoutData.criticalEdgePriorities = (edge: IEdge): 0 | 1 =>
  edge.tag.isCritical ? 1 : 0

const layoutData = new HierarchicalLayoutData()
// Try harder to prevent crossings with edge1
layoutData.edgeCrossingCosts.mapper.set(edge1, 1.5)
// Crossings with edge2 are not as bad
layoutData.edgeCrossingCosts.mapper.set(edge2, 0.2)

// The more labels an edge has, the more important it is to
// prevent crossing with it
layoutData.edgeCrossingCosts = (edge: IEdge): number =>
  1 + edge.labels.size

// Ensure larger lengths for the first and last segments of edge1
layoutData.edgeDescriptors.mapper.set(
  edge1,
  new HierarchicalLayoutEdgeDescriptor({
    minimumFirstSegmentLength: 30,
    minimumLastSegmentLength: 50,
  }),
)
// Change the routing style to octilinear for edge2
layoutData.edgeDescriptors.mapper.set(
  edge2,
  new HierarchicalLayoutEdgeDescriptor({
    routingStyleDescriptor: new RoutingStyleDescriptor(
      HierarchicalLayoutRoutingStyle.OCTILINEAR,
    ),
  }),
)
// All other edges not set in the mapper use the default EdgeLayoutDescriptor
// set on HierarchicalLayout.

// Use a property from a custom business object in the edge's tag as the minimum length
layoutData.edgeDescriptors = (edge) => {
  const customData = edge.tag as CustomData
  return new HierarchicalLayoutEdgeDescriptor({
    minimumLength: customData.minimumLength,
    routingStyleDescriptor: new RoutingStyleDescriptor(
      customData.shouldUseOctilinearRouting
        ? HierarchicalLayoutRoutingStyle.OCTILINEAR
        : HierarchicalLayoutRoutingStyle.POLYLINE,
    ),
  })
}

layoutData.edgeDirectedness = 1

// edge1 should be considered directed
layoutData.edgeDirectedness.mapper.set(edge1, 1)
// edge2 should be considered directed against the flow
layoutData.edgeDirectedness.mapper.set(edge2, -1)
// All other edges not set in the mapper are treated as undirected

// Treat edges as directed or undirected based on their style's arrowhead
layoutData.edgeDirectedness = (edge: IEdge): 0 | 1 | -1 => {
  const style = edge.style as PolylineEdgeStyle
  // edges with either no arrows on both ends or an arrow on both ends should be considered undirected
  if (
    (style.sourceArrow === null && style.targetArrow === null) ||
    (style.sourceArrow !== null && style.targetArrow !== null)
  ) {
    return 0
  }
  // edges with only a target arrow are directed from source to target
  if (style.targetArrow !== null) {
    return 1
  }
  // edges with only a source arrow are directed from target to source
  if (style.sourceArrow !== null) {
    return -1
  }
  return 0
}

layoutData.edgeLabelPreferredPlacements = new EdgeLabelPreferredPlacement(
  {
    // Place labels along the edge
    angleReference: LabelAngleReferences.RELATIVE_TO_EDGE_FLOW,
    angle: 0,
    // ... on either side
    edgeSide: LabelEdgeSides.LEFT_OF_EDGE | LabelEdgeSides.RIGHT_OF_EDGE,
    // ... with a bit of distance to the edge
    distanceToEdge: 5,
  },
)

// Place label1 orthogonal to the edge anywhere on it
layoutData.edgeLabelPreferredPlacements.mapper.set(
  label1,
  new EdgeLabelPreferredPlacement({
    placementAlongEdge: LabelAlongEdgePlacements.ANYWHERE,
    angleReference: LabelAngleReferences.RELATIVE_TO_EDGE_FLOW,
    angle: Math.PI / 2,
  }),
)
// Place label2 near the edge's source on either side of it, and make it parallel to the edge
layoutData.edgeLabelPreferredPlacements.mapper.set(
  label2,
  new EdgeLabelPreferredPlacement({
    placementAlongEdge: LabelAlongEdgePlacements.AT_SOURCE,
    edgeSide: LabelEdgeSides.RIGHT_OF_EDGE | LabelEdgeSides.LEFT_OF_EDGE,
    angleReference: LabelAngleReferences.RELATIVE_TO_EDGE_FLOW,
    angle: 0,
  }),
)

layoutData.edgeLabelPreferredPlacements = (
  label: ILabel,
): EdgeLabelPreferredPlacement => {
  const customData = label.tag as CustomData
  return new EdgeLabelPreferredPlacement({
    angle: 0,
    angleReference: LabelAngleReferences.RELATIVE_TO_EDGE_FLOW,
    // If the tag says to place the label in the center, put it in the center parallel to the edge's path
    // All other labels can be placed anywhere, but on the side of the edge.
    placementAlongEdge: customData.placeInCenter
      ? LabelAlongEdgePlacements.AT_CENTER
      : LabelAlongEdgePlacements.ANYWHERE,
    edgeSide: customData.placeInCenter
      ? LabelEdgeSides.ON_EDGE
      : LabelEdgeSides.LEFT_OF_EDGE | LabelEdgeSides.RIGHT_OF_EDGE,
  })
}

layoutData.edgeLabelPreferredPlacements =
  EdgeLabelPreferredPlacement.fromParameter(
    NinePositionsEdgeLabelModel.CENTER_CENTERED,
  )

layoutData.edgeThickness = 3

layoutData.edgeThickness.mapper.set(edge1, 2)
layoutData.edgeThickness.mapper.set(edge2, 5)
// All other edges not set in the mapper have no defined thickness

// Use the style's pen thickness as edge thickness
layoutData.edgeThickness = (edge: IEdge): number => {
  const style = edge.style
  if (style instanceof PolylineEdgeStyle) {
    return style.stroke!.thickness
  }
  return 0
}

layoutData.folderNodes = (node) =>
  graph.foldingView!.isInFoldingState(node)

layoutData.folderNodes = graph.nodes.filter((node) =>
  graph.foldingView!.isInFoldingState(node),
)

// When collapsing a node, mark it as a folder node for layout
graphEditorInputMode.navigationInputMode.addEventListener(
  'group-collapsed',
  (evt) => layoutData.folderNodes.items.add(evt.item),
)
// When expanding the node again, we unmark it again
graphEditorInputMode.navigationInputMode.addEventListener(
  'group-expanded',
  (evt) => layoutData.folderNodes.items.remove(evt.item),
)

// Try harder to prevent crossings with group node1
layoutData.groupBorderCrossingCosts.mapper.set(node1, 7)
// Crossings with group node2 are not as bad
layoutData.groupBorderCrossingCosts.mapper.set(node2, 3)

// The more labels a group node has, the more important it is to
// prevent crossing with it
layoutData.groupBorderCrossingCosts = (node: INode): number =>
  5 + node.labels.size

// create a HierarchicalLayout which rearranges
// only the incremental graph elements
const hl = new HierarchicalLayout({ fromSketchMode: true })

// provide additional data to configure the HierarchicalLayout
const hlData = new HierarchicalLayoutData()
// specify the nodes to rearrange
hlData.incrementalNodes = (node: INode): boolean => isIncremental(node)
// specify the nodes and edges to rearrange
hlData.incrementalNodes = (item): boolean => isIncremental(item)
hlData.incrementalEdges = (item): boolean => isIncremental(item)

graph.applyLayout(hl, hlData)

// create a HierarchicalLayout which rearranges
// only the incremental graph elements
const hl = new HierarchicalLayout({ fromSketchMode: true })

// provide additional data to configure the HierarchicalLayout for incremental edges
const hlData = new HierarchicalLayoutData({
  // sequence hint for incremental edges
  incrementalEdges: incrementalEdges,
})

// provide additional GenericLayoutData to configure incremental nodes
const glData = new GenericLayoutData<INode, IEdge, ILabel, ILabel>()
const nodeIncrementalHintsMapping = (glData.addItemMapping(
  HierarchicalLayout.INCREMENTAL_NODE_HINTS_DATA_KEY,
).mapperFunction = (node) => {
  if (incrementalNodes.includes(node)) {
    // create a hint for incremental nodes
    if (graph.isGroupNode(node)) {
      // special hint for groups
      return IncrementalNodeHint.INCREMENTAL_GROUP
    }
    if (fixedNodes.includes(node)) {
      // exact layer for the fixedNodes
      return IncrementalNodeHint.USE_EXACT_LAYER_COORDINATES
    }
    // simple layer hint for all other nodes
    return IncrementalNodeHint.LAYER_INCREMENTALLY
  }
  return IncrementalNodeHint.NONE
})

// combine both layout data instances
const layoutData = hlData.combineWith(glData)

graph.applyLayout(hl, layoutData)

// create a HierarchicalLayout which rearranges
// only the incremental graph elements
const hl = new HierarchicalLayout({ fromSketchMode: true })

// provide additional data to configure the HierarchicalLayout
const hlData = new HierarchicalLayoutData()
// specify the nodes to rearrange
hlData.incrementalNodes = (node: INode): boolean => isIncremental(node)
// specify the nodes and edges to rearrange
hlData.incrementalNodes = (item): boolean => isIncremental(item)
hlData.incrementalEdges = (item): boolean => isIncremental(item)

graph.applyLayout(hl, hlData)

// create a HierarchicalLayout which rearranges
// only the incremental graph elements
const hl = new HierarchicalLayout({ fromSketchMode: true })

// provide additional data to configure the HierarchicalLayout for incremental edges
const hlData = new HierarchicalLayoutData({
  // sequence hint for incremental edges
  incrementalEdges: incrementalEdges,
})

// provide additional GenericLayoutData to configure incremental nodes
const glData = new GenericLayoutData<INode, IEdge, ILabel, ILabel>()
const nodeIncrementalHintsMapping = (glData.addItemMapping(
  HierarchicalLayout.INCREMENTAL_NODE_HINTS_DATA_KEY,
).mapperFunction = (node) => {
  if (incrementalNodes.includes(node)) {
    // create a hint for incremental nodes
    if (graph.isGroupNode(node)) {
      // special hint for groups
      return IncrementalNodeHint.INCREMENTAL_GROUP
    }
    if (fixedNodes.includes(node)) {
      // exact layer for the fixedNodes
      return IncrementalNodeHint.USE_EXACT_LAYER_COORDINATES
    }
    // simple layer hint for all other nodes
    return IncrementalNodeHint.LAYER_INCREMENTALLY
  }
  return IncrementalNodeHint.NONE
})

// combine both layout data instances
const layoutData = hlData.combineWith(glData)

graph.applyLayout(hl, layoutData)

// Map each node to an IComparable, in this case taken from a custom object stored in the tag
layoutData.layerConstraints.nodeComparables = (node) => {
  const data = node.tag
  if (data !== null) {
    return data.layerOrder
  }
  // Don't constrain layer placement if the tag doesn't contain our custom object.
  return null
}

// Define layer constraints for a few nodes via a mapper. Nodes that are not
// explicitly mapped don't have constraints on their layer placement.
const mapper = layoutData.layerConstraints.nodeComparables
  .mapper as IMapper<INode, any>
// Place both node1 and node2 in the same layer by assigning the same value
mapper.set(node1, 5)
mapper.set(node2, 5)
// Place node3 somewhere above node1 and node2 by assigning a smaller value
mapper.set(node3, 2)
// Place node4 somewhere below node1 and node2 by assigning a larger value
mapper.set(node4, 8)
// The exact values don't matter much they just define an ordering. However, all
// values must have the same type you cannot mix int and string or double, for example.

layoutData.layerConstraints.nodeComparables = layerOrderMapper
// Or create the mapping from a Map, instead:
layoutData.layerConstraints.nodeComparables = layerOrderMap

// Place all nodes in sameLayerNodes into the same layer
const firstSameLayerNode = sameLayerNodes.first()!
for (const node of sameLayerNodes) {
  layoutData.layerConstraints.placeInSameLayer(firstSameLayerNode, node)
}
// Ensure that node2 is placed two layers below node1
layoutData.layerConstraints.placeInOrder(node1, node2, 2)
// Also place another node in the top layer
layoutData.layerConstraints.placeAtTop(nodeAtTop)

const layoutData = new HierarchicalLayoutData()
graph.applyLayout(new HierarchicalLayout(), layoutData)

for (const node of graph.nodes) {
  console.log(
    `Node ${node} has been placed in layer ${layoutData.layerIndicesResult.get(node)}`,
  )
}

// Create four nodes and place them in grid cells in the following way
// +---+---+---+
// | 1 | 2 | 3 |
// +---+---+---+
//     | 4 |
//     +---+

const gridData = layoutData.layoutGridData

const node1 = graph.createNode()
const node2 = graph.createNode()
const node3 = graph.createNode()
const node4 = graph.createNode()

// Assign the nodes to their rows and columns.
// Note that you don't have to create or use LayoutGrid directly in this case.
// Setting the indices is enough.
gridData.rowIndices.mapper.set(node1, 0)
gridData.rowIndices.mapper.set(node2, 0)
gridData.rowIndices.mapper.set(node3, 0)
gridData.rowIndices.mapper.set(node4, 1)
gridData.columnIndices.mapper.set(node1, 0)
gridData.columnIndices.mapper.set(node2, 1)
gridData.columnIndices.mapper.set(node3, 2)
gridData.columnIndices.mapper.set(node4, 1)

graph.applyLayout(new HierarchicalLayout(), layoutData)

// Create three nodes and place them in grid cells in the following way
// +---+---+
// | 1 | 2 |
// +---+---+
// |   3   |
// +---+---+

const gridData = layoutData.layoutGridData

const node1 = graph.createNode(new Rect(0, 0, 50, 50))
const node2 = graph.createNode(new Rect(0, 0, 50, 50))
const node3 = graph.createNode(new Rect(0, 0, 125, 50))
// Create a new LayoutGrid with two rows and two columns
const grid = new LayoutGrid(2, 2)
// Assign the nodes to their cells
const gridCells = new Mapper<INode, LayoutGridCellDescriptor>()
gridCells.set(node1, grid.createCellDescriptor(0, 0))
gridCells.set(node2, grid.createCellDescriptor(0, 1))
gridCells.set(node3, grid.createRowSpanDescriptor(1))
gridData.layoutGridCellDescriptors = gridCells

graph.applyLayout(new HierarchicalLayout(), layoutData)

// Set a custom minimum distance of node1 to other element
layoutData.nodeDescriptors.mapper.set(
  node1,
  new HierarchicalLayoutNodeDescriptor({ minimumDistance: 50 }),
)
// Align node2 at the bottom of its layer
layoutData.nodeDescriptors.mapper.set(
  node2,
  new HierarchicalLayoutNodeDescriptor({ layerAlignment: 1 }),
)
// All other nodes not set in the mapper use the default NodeLayoutDescriptor
// set on HierarchicalLayout.

// Use a property from a custom business object in the node's tag as the minimum length
layoutData.nodeDescriptors = (node) => {
  const customData = node.tag as CustomData
  const descriptor = new HierarchicalLayoutNodeDescriptor({
    minimumDistance: 5,
  })
  switch (customData.alignment) {
    case 'top-placement':
      descriptor.layerAlignment = 0
      break
    case 'center-placement':
      descriptor.layerAlignment = 0.5
      break
    case 'bottom-placement':
      descriptor.layerAlignment = 1
      break
  }
  return descriptor
}

layoutData.nodeMargins = new Insets(20)

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

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

// Map each item to an IComparable, in this case taken from a custom object stored in the tag
layoutData.sequenceConstraints.itemComparables = (item) => {
  const data = item.tag
  if (data !== null) {
    return data.sequenceOrder
  }
  // Don't constrain sequencing if the tag doesn't contain our custom object.
  return null
}

// Define sequence constraints for a few nodes via a mapper. Nodes that are not
// explicitly mapped don't have constraints on their placement within the layer.
const mapper = layoutData.sequenceConstraints.itemComparables
  .mapper as IMapper<INode, any>
// Place node1 before node2
mapper.set(node1, 1)
mapper.set(node2, 3)
// Place node3 between both of them
mapper.set(node3, 2)
// Place node4 after the others by assigning a larger value
mapper.set(node4, 8)
// The exact values don't matter much they just define an ordering. However, all
// values must have the same type you cannot mix int and string or double, for example.

layoutData.sequenceConstraints.itemComparables = sequenceMapper
// Or create the mapping from a Map, instead:
layoutData.sequenceConstraints.itemComparables = sequenceMap

// Ensure that node1 is placed before node2
layoutData.sequenceConstraints.placeNodeBeforeNode(node1, node2)
// Also place another node at the very start
layoutData.sequenceConstraints.placeNodeAtHead(firstNodeInLayer)

const layoutData = new HierarchicalLayoutData()

graph.applyLayout(new HierarchicalLayout(), layoutData)

for (const node of graph.nodes) {
  console.log(
    `Node ${node} has been placed in layer ${layoutData.layerIndicesResult.get(
      node,
    )} at position ${layoutData.sequenceIndicesResult.get(node)}`,
  )
}

layoutData.sourceGroupIds = (edge: IEdge) => edge.sourceNode

layoutData.sourceGroupIds = (edge: IEdge) => {
  const style = edge.style
  if (style instanceof PolylineEdgeStyle) {
    return style.stroke!.fill
  }
  return null
}

for (const group of edgeGroups) {
  for (const edge of group) {
    // Use the collection as group ID, since it's common to all edges in it
    layoutData.sourceGroupIds.mapper.set(edge, group)
  }
}

layoutData.tabularGroupChildComparators = (
  child1: INode,
  child2: INode,
) => child1.labels.get(0).text.localeCompare(child2.labels.get(0).text)

// for the comparison, we assume that child nodes have a custom data tag which holds a column property
layoutData.tabularGroupChildComparators.mapper.set(
  tabularGroupNode1,
  (child1: INode, child2: INode) =>
    child1.tag.column.CompareTo(child2.tag.column),
)

layoutData.tabularGroups.predicate = (node) => graph.isGroupNode(node)

// assume that the tag of a node contains a flag indicating whether a group is a tabular group
layoutData.tabularGroups.predicate = (node) => node.tag.isTabularGroup

layoutData.tabularGroups.mapper = new Mapper()
layoutData.tabularGroups.mapper.set(tabularGroupNode1, true)
layoutData.tabularGroups.mapper.set(tabularGroupNode2, true)

// directly assign a collection of tabular group nodes (e.g. of type List<INode>)
layoutData.tabularGroups.items = tabularGroupNodes

layoutData.targetGroupIds = (edge: IEdge) => edge.targetNode

layoutData.targetGroupIds = (edge: IEdge) => {
  const style = edge.style
  if (style instanceof PolylineEdgeStyle) {
    return style.stroke!.fill
  }
  return null
}

for (const group of edgeGroups) {
  for (const edge of group) {
    // Use the collection as group ID, since it's common to all edges in it
    layoutData.targetGroupIds.mapper.set(edge, group)
  }
}