TaggedSvgVisual<TElement extends SVGElement,TTag>

type CircleCache = { radius: number }
type CircleVisual = TaggedSvgVisual<SVGCircleElement, CircleCache>

class CircleStyle extends NodeStyleBase<CircleVisual> {
  protected createVisual(): CircleVisual | null {
    const svgElement = document.createElementNS(
      'http://www.w3.org/2000/svg',
      'circle',
    )
    svgElement.r.baseVal.value = 4
    // TODO - Configure the element and/or create some children
    // Create a typed visual and add as tag an object that caches relevant values
    return SvgVisual.from(svgElement, { radius: 4 })
  }

  protected updateVisual(
    context: IRenderContext,
    oldVisual: CircleVisual,
    node: INode,
  ): CircleVisual | null {
    // Get the typed element and the cache object from the typed visual
    const { svgElement: circle, tag } = oldVisual
    // TODO - Update the element and the cache, finally return the updated visual
    return oldVisual
  }
}