NodeStyleBase<TVisual>

abstract

/// <summary>
/// A custom node style that displays a node always as an exact circle inscribed in the node's
/// layout rectangle.
/// </summary>

class CircleNodeStyle extends NodeStyleBase {
  // The only method we actually *have* to implement

  createVisual(context: IRenderContext, node: INode): Visual | null {
    const size = Math.min(node.layout.width, node.layout.height)

    // we create a circular Element
    const circle = document.createElementNS(
      'http://www.w3.org/2000/svg',
      'ellipse',
    )
    circle.setAttribute('rx', (size / 2).toString())
    circle.setAttribute('ry', (size / 2).toString())
    circle.setAttribute('stroke', 'black')
    circle.setAttribute('fill', 'red')

    // We now need to tell yFiles where to place the circle. This is done with
    SvgVisual.setTranslate(circle, node.layout.x, node.layout.y)
    return new SvgVisual(circle)
  }
}

updateVisual(
  context: IRenderContext,
  oldVisual: Visual,
  node: INode,
): Visual | null {
  // Our style does not have any options that can change, so the only thing left
  // to do here is to update location and size via SetCanvasArrangeRect
  const size = Math.min(node.layout.width, node.layout.height)

  const element = (oldVisual as SvgVisual).svgElement

  element.setAttribute('rx', (size / 2).toString())
  element.setAttribute('ry', (size / 2).toString())
  SvgVisual.setTranslate(element, node.layout.x, node.layout.y)

  return oldVisual
}

isHit(context: IInputModeContext, location: Point, node: INode): boolean {
  const size = Math.min(node.layout.width, node.layout.height)
  const circleBounds = new Rect(node.layout.center, new Size(size, size))
  // Also observe the hit-test radius from the context so that clicking just outside
  // the bounds of the circle will still register as a hit.
  // This is less important with node styles, but for edges that are usually just
  // displayed as a line, it's very hard to hit that line otherwise.
  return GeometryUtilities.ellipseContains(
    circleBounds,
    location,
    context.hitTestRadius,
  )

  // In our case, since we know our visualization is always a circle, we also could have done the math
  // ourselves:

  // The point only hits the circle when the distance to the circle's center is less than
  // its radius (plus the hit-test radius again):

  // return node.layout.center.distanceTo(location) <= size / 2 + context.hitTestRadius;
}