documentationfor yFiles for HTML 2.6

TypedSvgVisual<TElementextends SVGElement>

An utility type for SvgVisual that restricts the type of the svgElement property.

Inheritance Hierarchy
TypedSvgVisual

Remarks

The main usage of this type is as type parameter of a "Base" style like NodeStyleBase<TVisual>.

You can obtain an instance of such a type from the factory method from.

Examples

/**
 * @typedef {TypedSvgVisual.<SVGCircleElement>} CircleVisual
 */

class CircleStyle extends NodeStyleBase {
  /**
   * @returns {?CircleVisual}
   */
  createVisual() {
    const circleElement = document.createElementNS(
      'http://www.w3.org/2000/svg',
      'circle'
    )
    // TODO - Configure the element and/or create some children
    // Create a typed visual
    return SvgVisual.from(circleElement)
  }

  /**
   * @param {!IRenderContext} context
   * @param {!CircleVisual} oldVisual
   * @param {!INode} node
   * @returns {?CircleVisual}
   */
  updateVisual(context, oldVisual, node) {
    const circleElement = oldVisual.svgElement
    // TODO - Update the element and return the updated visual
    return oldVisual
  }
}type CircleVisual = TypedSvgVisual<SVGCircleElement>

class CircleStyle extends NodeStyleBase<CircleVisual> {
  protected createVisual(): CircleVisual | null {
    const circleElement = document.createElementNS(
      'http://www.w3.org/2000/svg',
      'circle'
    )
    // TODO - Configure the element and/or create some children
    // Create a typed visual
    return SvgVisual.from(circleElement)
  }

  protected updateVisual(
    context: IRenderContext,
    oldVisual: CircleVisual,
    node: INode
  ): CircleVisual | null {
    const circleElement = oldVisual.svgElement
    // TODO - Update the element and return the updated visual
    return oldVisual
  }
}

Type Parameters

TElement: SVGElement
The type of the property.

Type Details

yfiles module
view-component
yfiles-umd modules
All view modules
Legacy UMD name
yfiles.view.TypedSvgVisual

See Also

Properties