Snapping

function addSnapLine(
  graphSnapContext: GraphSnapContext,
  start: Point,
  end: Point
): void {
  const snapLine = createSnapLine(start, end)
  if (snapLine !== null) {
    // add a snap line for all graph elements
    graphSnapContext.addEventListener('collect-snap-references', (evt) =>
      evt.addSnapReference(snapLine)
    )
  }
}

function createSnapLine(
  start: Point,
  end: Point
): OrthogonalSnapLine | null {
  // calculate the center of the snap line
  const center = start.add(end).multiply(0.5)
  // create a vertical snap line
  if (start.x === end.x) {
    return new OrthogonalSnapLine(
      SnapLineOrientation.VERTICAL,
      SnapLineSnapTypes.CENTER,
      SnapReferenceVisualizationType.FIXED_LINE,
      center,
      start.y,
      end.y,
      false,
      50
    )
  }
  // create a horizontal snap line
  if (start.y === end.y) {
    return new OrthogonalSnapLine(
      SnapLineOrientation.HORIZONTAL,
      SnapLineSnapTypes.CENTER,
      SnapReferenceVisualizationType.FIXED_LINE,
      center,
      start.x,
      end.x,
      false,
      50
    )
  }
  // we do not add non-orthogonal snap lines here
  return null
}

function paintSnapLine(start: Point, end: Point): void {
  const lineElement = document.createElementNS(
    'http://www.w3.org/2000/svg',
    'line'
  )
  lineElement.setAttribute('x1', String(start.x))
  lineElement.setAttribute('y1', String(start.y))
  lineElement.setAttribute('x2', String(end.x))
  lineElement.setAttribute('y2', String(end.y))
  lineElement.setAttribute('stroke', 'black')

  const renderTree = graphComponent.renderTree
  renderTree.createElement(
    renderTree.backgroundGroup,
    new SvgVisual(lineElement)
  )
}

const nodeDecorator = graphComponent.graph.decorator.nodes

nodeDecorator.snapReferenceProvider.addWrapperFactory((node, wrapped) =>
  ISnapReferenceProvider.create(
    (
      context: GraphSnapContext,
      evt: CollectSnapReferencesEventArgs
    ) => {
      // add default snap references
      if (wrapped !== null) {
        wrapped.addSnapReferences(context, evt)
      }
      // add a snap lines 10 pixels above the top border of a node
      const layout = node.layout.toRect()
      const center = new Point(layout.centerX, layout.y - 10)
      const snapLine = new OrthogonalSnapLine(
        SnapLineOrientation.HORIZONTAL,
        SnapLineSnapTypes.BOTTOM,
        SnapReferenceVisualizationType.FIXED_LINE,
        center,
        layout.x - 50,
        layout.maxX + 50,
        false,
        100
      )
      evt.addSnapReference(snapLine)
    }
  )
)

class CustomNodeSnapResultProvider extends NodeSnapResultProvider {
  protected collectGridSnapResults(
    context: GraphSnapContext,
    evt: CollectSnapResultsEventArgs,
    snapGrid: SnapGrid,
    suggestedLayout: Rect,
    node: INode
  ) {
    // add the default grid snap results (center of the node)
    super.collectGridSnapResults(
      context,
      evt,
      snapGrid,
      suggestedLayout,
      node
    )
    // add the top left corner of the node as grid snap result
    this.collectGridSnapResult(
      context,
      evt,
      snapGrid,
      suggestedLayout.topLeft,
      node
    )
  }
}

const nodeDecorator = graphComponent.graph.decorator.nodes
nodeDecorator.snapResultProvider.addConstant(
  new CustomNodeSnapResultProvider()
)