FoldingManager

const defaultFoldingEdgeConverter = new FoldingEdgeConverter()
// initialize the new edges with a gray style
defaultFoldingEdgeConverter.foldingEdgeDefaults.style =
  new PolylineEdgeStyle({ stroke: 'gray' })
defaultFoldingEdgeConverter.foldingEdgeDefaults.copyLabels = true

// initialize the labels with a new style
defaultFoldingEdgeConverter.foldingEdgeDefaults.labels.style =
  new LabelStyle()
defaultFoldingEdgeConverter.foldingEdgeDefaults.labels.shareStyleInstance = true

// initialize all label properties (the default)
// but synchronize only the text after initialization
defaultFoldingEdgeConverter.foldingEdgeDefaults.labels.updateFoldingOptions =
  FoldingSynchronizationOptions.LABEL_TEXT
defaultFoldingEdgeConverter.foldingEdgeDefaults.labels.updateMasterOptions =
  FoldingSynchronizationOptions.LABEL_TEXT
defaultFoldingEdgeConverter.foldingEdgeDefaults.labels.autoAdjustPreferredSize = true
manager.foldingEdgeConverter = defaultFoldingEdgeConverter

geim.navigationInputMode.addEventListener(
  'group-collapsing',
  clearBendsOfFoldingEdges,
)

function clearBendsOfFoldingEdges(e: InputModeItemEventArgs<INode>) {
  const groupNode = e.item
  const foldingView = graph.foldingView!
  const edgeStateIds = foldingView.isExpanded(groupNode)
    ? foldingView.manager.getEdgesChangedAfterCollapse(
        foldingView,
        groupNode,
      )
    : foldingView.manager.getEdgesChangedAfterExpand(foldingView, groupNode)
  edgeStateIds.forEach((edgeStateId) => {
    if (!edgeStateId.sourceIsCollapsed && !edgeStateId.targetIsCollapsed) {
      // if neither source nor target node is collapsed, edgeStateId represents the unfolded master edge
      // so the bends also have to be cleared on the master graph
      foldingView.manager.masterGraph.clearBends(edgeStateId.masterEdge)
    } else {
      // otherwise the bends are cleared on the corresponding FoldingEdgeState
      foldingView.manager.getFoldingEdgeState(edgeStateId).clearBends()
    }
  })
}

geim.navigationInputMode.addEventListener(
  'group-expanding',
  clearBendsOfFoldingEdges,
)

function clearBendsOfFoldingEdges(e: InputModeItemEventArgs<INode>) {
  const groupNode = e.item
  const foldingView = graph.foldingView!
  const edgeStateIds = foldingView.isExpanded(groupNode)
    ? foldingView.manager.getEdgesChangedAfterCollapse(
        foldingView,
        groupNode,
      )
    : foldingView.manager.getEdgesChangedAfterExpand(foldingView, groupNode)
  edgeStateIds.forEach((edgeStateId) => {
    if (!edgeStateId.sourceIsCollapsed && !edgeStateId.targetIsCollapsed) {
      // if neither source nor target node is collapsed, edgeStateId represents the unfolded master edge
      // so the bends also have to be cleared on the master graph
      foldingView.manager.masterGraph.clearBends(edgeStateId.masterEdge)
    } else {
      // otherwise the bends are cleared on the corresponding FoldingEdgeState
      foldingView.manager.getFoldingEdgeState(edgeStateId).clearBends()
    }
  })
}

const state = manager.getFolderNodeState(masterNode)
state.style = new GroupNodeStyle()

const state = manager.getFoldingEdgeState(
  new FoldingEdgeStateId(
    masterEdge,
    masterSource,
    true,
    masterTarget,
    false,
  ),
)
state.style = new PolylineEdgeStyle({ stroke: Stroke.RED })

const state = manager.getFoldingEdgeState(
  new FoldingEdgeStateId(
    masterEdge,
    masterSource,
    true,
    masterTarget,
    false,
  ),
)
const portState = state.sourcePort
portState.locationParameter = FreeNodePortLocationModel.RIGHT

geim.navigationInputMode.addEventListener(
  'group-expanding',
  onGroupExpanding,
)

function onGroupExpanding(e: InputModeItemEventArgs<INode>) {
  // move the center of the expanded group node (together with all descendants) to the center of the folder
  const groupNode = e.item
  const foldingView = graph.foldingView!
  const masterItem = foldingView.getMasterItem(groupNode)!
  // calculate the delta by which the group node and its descendants have to be moved
  const delta = groupNode.layout.center.subtract(masterItem.layout.center)

  const masterGraph = foldingView.manager.masterGraph
  masterGraph.setNodeCenter(masterItem, groupNode.layout.center)
  const descendents = foldingView.manager.getNodesRevealedAfterExpand(
    foldingView,
    groupNode,
  )
  descendents.forEach((descendent) =>
    masterGraph.setNodeCenter(
      descendent,
      descendent.layout.center.add(delta),
    ),
  )
}