TaggedSvgVisual<TElementextends SVGElement,TTag>

/**
 * @typedef {Object} CircleCache
 * @property {number} radius
 */
/**
 * @typedef {TaggedSvgVisual.<SVGCircleElement,CircleCache>} CircleVisual
 */

class CircleStyle extends NodeStyleBase {
  /**
   * @returns {?CircleVisual}
   */
  createVisual() {
    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 })
  }

  /**
   * @param {!IRenderContext} context
   * @param {!CircleVisual} oldVisual
   * @param {!INode} node
   * @returns {?CircleVisual}
   */
  updateVisual(context, oldVisual, node) {
    // 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
  }
}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
  }
}