OrganicLayoutData

const layoutData = new OrganicLayoutData({
  affectedNodes: graphComponent.selection.selectedNodes
})

for (const edge of graphComponent.selection.selectedEdges) {
  layoutData.affectedNodes.items.add(edge.sourceNode)
  layoutData.affectedNodes.items.add(edge.targetNode)
}for (const edge of graphComponent.selection.selectedEdges) {
  layoutData.affectedNodes.items.add(edge.sourceNode!)
  layoutData.affectedNodes.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.affectedNodes = (node) => node.tag.includeInLayout

// 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 = ItemMapping.from((node) => node.tag)// 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 = ItemMapping.from<INode, any>(
  (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.constant = 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) => {
  const style = edge.style
  // 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
}// 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.edgeLabelPreferredPlacement = new PreferredPlacementDescriptor({
  // Place labels along the edge
  angleReference: LabelAngleReferences.RELATIVE_TO_EDGE_FLOW,
  angle: 0,
  // ... on either side
  sideOfEdge: LabelPlacements.LEFT_OF_EDGE | LabelPlacements.RIGHT_OF_EDGE,
  // ... with a bit of distance to the edge
  distanceToEdge: 5
})

// Place label1 orthogonal to the edge anywhere on it
layoutData.edgeLabelPreferredPlacement.mapper.set(
  label1,
  new PreferredPlacementDescriptor({
    placeAlongEdge: LabelPlacements.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.edgeLabelPreferredPlacement.mapper.set(
  label2,
  new PreferredPlacementDescriptor({
    placeAlongEdge: LabelPlacements.AT_SOURCE,
    sideOfEdge: LabelPlacements.RIGHT_OF_EDGE | LabelPlacements.LEFT_OF_EDGE,
    angleReference: LabelAngleReferences.RELATIVE_TO_EDGE_FLOW,
    angle: 0
  })
)

layoutData.edgeLabelPreferredPlacement = (label) => {
  const customData = label.tag
  return new PreferredPlacementDescriptor({
    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.
    placeAlongEdge: customData.placeInCenter
      ? LabelPlacements.AT_CENTER
      : LabelPlacements.ANYWHERE,
    sideOfEdge: customData.placeInCenter
      ? LabelPlacements.ON_EDGE
      : LabelPlacements.LEFT_OF_EDGE | LabelPlacements.RIGHT_OF_EDGE
  })
}layoutData.edgeLabelPreferredPlacement = (
  label: ILabel
): PreferredPlacementDescriptor => {
  const customData = label.tag
  return new PreferredPlacementDescriptor({
    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.
    placeAlongEdge: customData.placeInCenter
      ? LabelPlacements.AT_CENTER
      : LabelPlacements.ANYWHERE,
    sideOfEdge: customData.placeInCenter
      ? LabelPlacements.ON_EDGE
      : LabelPlacements.LEFT_OF_EDGE | LabelPlacements.RIGHT_OF_EDGE
  })
}

layoutData.edgeLabelPreferredPlacement =
  PreferredPlacementDescriptor.fromParameter(
    NinePositionsEdgeLabelModel.CENTER_CENTERED
  )

layoutData.edgeOrientations.mapper.set(edge1, 1.0)
layoutData.edgeOrientations.mapper.set(edge2, -1.0)
// The edge orientation for all other edges is not defined

organicLayout.layoutOrientation = LayoutOrientation.TOP_TO_BOTTOM
layoutData.edgeOrientations = (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.edgeOrientations = 1.0

layoutData.groupNodeModes.constant = GroupNodeMode.FIX_CONTENTS

layoutData.groupNodeModes.mapper.set(groupNode1, GroupNodeMode.FIX_BOUNDS)
layoutData.groupNodeModes.mapper.set(groupNode2, GroupNodeMode.FIX_CONTENTS)
// All other edges not set in the mapper implicitly get the default value
// GroupNodeMode.normal.

layoutData.groupNodeModes = (node) => {
  if (graph.getChildren(node).size > 0) {
    return GroupNodeMode.NORMAL
  }
  // Ensure that empty group nodes remain where they are
  return GroupNodeMode.FIX_BOUNDS
}

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.constant = 25
// This is equivalent to the following property on OrganicLayout:
organicLayout.minimumNodeDistance = 25

layoutData.nodeHalos.constant = NodeHalo.create(20)

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

// Retrieve the space around the node from its Tag property
layoutData.nodeHalos = (node) => NodeHalo.create(parseFloat(node.tag))// Retrieve the space around the node from its Tag property
layoutData.nodeHalos = (node: INode): NodeHalo =>
  NodeHalo.create(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

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

const layoutData = new OrganicLayoutData()
const gridData = layoutData.partitionGridData

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 don't have to create or use PartitionGrid 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 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 PartitionGrid with two rows and two columns
const grid = new PartitionGrid(2, 2)

// Assign the nodes to their cells
const cellIdMapper = new Mapper()
cellIdMapper.set(node1, grid.createCellId(0, 0))
cellIdMapper.set(node2, grid.createCellId(0, 1))
cellIdMapper.set(node3, grid.createRowSpanId(1))

const layoutData = new OrganicLayoutData({
  partitionGridData: new PartitionGridData({
    grid: grid,
    cellIds: cellIdMapper
  })
})

graph.applyLayout(new OrganicLayout(), layoutData)// Create three nodes and place them in grid cells in the following way
// +--+--+
// | 1| 2|
// +--+--+
// |  3  |
// +--+--+

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 PartitionGrid with two rows and two columns
const grid = new PartitionGrid(2, 2)

// Assign the nodes to their cells
const cellIdMapper = new Mapper<INode, PartitionCellId>()
cellIdMapper.set(node1, grid.createCellId(0, 0))
cellIdMapper.set(node2, grid.createCellId(0, 1))
cellIdMapper.set(node3, grid.createRowSpanId(1))

const layoutData = new OrganicLayoutData({
  partitionGridData: new PartitionGridData({
    grid: grid,
    cellIds: cellIdMapper
  })
})

graph.applyLayout(new OrganicLayout(), layoutData)

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.constant = 120
// This is equivalent to the following property on OrganicLayout:
organicLayout.preferredEdgeLength = 120

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

layoutData.sourceGroupIds = (edge) => {
  const style = edge.style
  if (style instanceof PolylineEdgeStyle) {
    return style.stroke.fill
  }
  return null
}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) => edge.targetNodelayoutData.targetGroupIds = (edge: IEdge) => edge.targetNode

layoutData.targetGroupIds = (edge) => {
  const style = edge.style
  if (style instanceof PolylineEdgeStyle) {
    return style.stroke.fill
  }
  return null
}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({
  zCoordinates: new Mapper()
})

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.zCoordinates?.get(node)}`
    )
  }
}