An utility type for SvgVisual that restricts the type of the svgElement property and adds a tag property to store additional data.
Inheritance Hierarchy
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.
Type Parameters
TElement
- The type of the
property. TTag
- The type of the
property.
Examples
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
}
}See Also
Developer's Guide
API
- TypedSvgVisual
Members
No filters for this type