OrganicLayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel>

// Use the node's tag for cluster assignment.
// Nodes with the same tag are part of the same cluster and, thus, placed close to each other.
layoutData.clusterIds = (node: INode) => node.tag

for (const node of cluster1) {
  // First cluster: define a common string as ID for all nodes in the first collection
  layoutData.clusterIds.mapper.set(node, 'cluster1')
}
for (const node of cluster2) {
  // Second cluster: define a common string as ID for all nodes in the second collection
  layoutData.clusterIds.mapper.set(node, 'cluster2')
}

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.edgeOrientation.mapper.set(edge1, 1.0)
layoutData.edgeOrientation.mapper.set(edge2, -1.0)
// The edge orientation for all other edges is not defined

organicLayout.layoutOrientation = LayoutOrientation.TOP_TO_BOTTOM
layoutData.edgeOrientation = (edge) => {
  switch (edge.labels.first()!.text) {
    case 'downwards':
      return 1.0 // edges with label 'downwards' should point from top to bottom
    case 'upwards':
      return -1.0 // edges with label 'upwards' should point from bottom to top
    default:
      return 0.0 // for all other edges the algorithm can decide
  }
}

// all edges should have the same orientation as the layout
layoutData.edgeOrientation = 1.0

// 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 OrganicLayout(), 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 OrganicLayout(), layoutData)

layoutData.minimumEdgeLengths.mapper.set(edge1, 120)
layoutData.minimumEdgeLengths.mapper.set(edge2, 75)
// All other edges not set in the mapper implicitly get the default value 0

// Ensure that there is enough space for the edge's label.
// We'll assume that every edge has a label here.
layoutData.minimumEdgeLengths = (edge) =>
  edge.labels.first()!.preferredSize.width * 1.2

layoutData.minimumEdgeLengths = 120

layoutData.minimumNodeDistances.mapper.set(node1, 25)
layoutData.minimumNodeDistances.mapper.set(node2, 45)
// All other edges not set in the mapper implicitly get the default value
// from OrganicLayout.minimumNodeDistance.

// Scale the minimum distance around a node by the node size.
// This ensures that larger nodes get more space.
layoutData.minimumNodeDistances = (node) =>
  Math.max(node.layout.width, node.layout.height)

layoutData.minimumNodeDistances = 25
// This is equivalent to the following property on OrganicLayout:
organicLayout.defaultMinimumNodeDistance = 25

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

layoutData.overlappingNodes.items.add(node1)
layoutData.overlappingNodes.items.add(node2)

// Only nodes with a specific area are considered when resolving overlaps.
layoutData.overlappingNodes = (node) =>
  node.layout.width * node.layout.height <= 10

layoutData.preferredEdgeLengths.mapper.set(edge1, 120)
layoutData.preferredEdgeLengths.mapper.set(edge2, 75)
// All other edges not set in the mapper implicitly get the default value
// from OrganicLayout.preferredEdgeLength.

// Ensure that there is enough space for the edge's label.
// We'll assume that every edge has a label here.
layoutData.preferredEdgeLengths = (edge) =>
  edge.labels.get(0).preferredSize.width * 1.2

layoutData.preferredEdgeLengths = 120
// This is equivalent to the following property on OrganicLayout:
organicLayout.defaultPreferredEdgeLength = 120

const layoutData = new OrganicLayoutData()
layoutData.scope.nodes = graphComponent.selection.nodes

for (const edge of graphComponent.selection.edges) {
  layoutData.scope.nodes.items.add(edge.sourceNode)
  layoutData.scope.nodes.items.add(edge.targetNode)
}

// We assume here that all nodes have a CustomData instance as their tag,
// which then has a boolean property 'IncludeInLayout'.
layoutData.scope.scopeModes = (node) =>
  (node.tag as CustomData).includeInLayout
    ? OrganicScope.AFFECTED
    : OrganicScope.FIXED

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

const layoutData = new OrganicLayoutData()

const layout = new OrganicLayout()
// Enable creating a 3D result
layout.create3DLayout = true

graph.applyLayout(layout, layoutData)

for (const node of graph.nodes) {
  // Print z-coordinate for all non-group nodes
  if (!graph.isGroupNode(node)) {
    console.log(
      `Node ${node} has z-coordinate ${layoutData.zCoordinatesResult.get(node)}`,
    )
  }
}