Wraps an HTMLElement as Visual.
Type Details
- yfiles module
- view-component
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.view.HtmlVisual
See Also
Constructors
Static Methods
Creates a new TypedSvgVisual<TElement> for the given element.
Remarks
The purpose of this factory method is to get an instance of SvgVisual but with a better matching type for the element property.
Note that this method still returns an instance of the SvgVisual class, since TypedSvgVisual<TElement> is just a typeScript type. The main benefit is the added type-safety.
Type Parameters
- TElement: HTMLElement
- The type of the element, which will typically be inferred from the argument.
Parameters
A map of options to pass to the method.
- element - TElement
- The element to wrap.
Returns
- ↪TypedHtmlVisual<TElement>
- A properly typed SvgVisual for the given element.
See Also
from
<TElementextends HTMLElement,TTag>(element: TElement, tag: TTag) : TaggedHtmlVisual<TElement,TTag>Creates a new TaggedSvgVisual<TElement,TTag> for the given element and tag object.
Remarks
The purpose of this factory method is to get an instance of SvgVisual but with a better matching type of the element property and the ability to store an user-provided object as tag with type-safety.
Note that this method still returns an instance of the SvgVisual class, since TaggedSvgVisual<TElement,TTag> is just a typeScript type. The main benefit is the added type-safety.
Type Parameters
- TElement: HTMLElement
- The type of the element, typically inferred from the first argument.
- TTag
- The type of the cache value, typically inferred from the second argument.
Parameters
A map of options to pass to the method.
- element - TElement
- The element to wrap.
- tag - TTag
Returns
- ↪TaggedHtmlVisual<TElement,TTag>
- A properly typed SvgVisual for the given element and tag value.
See Also
Sets the translation and size values of a given HtmlElement to the provided values so that it works well inside an HtmlVisual in a CanvasComponent.
Remarks
This implementation uses caching if possible and thus performs better than using the plain DOM API when called frequently.
This implementation uses the style property of the element to set the position to absolute and specify left, top, width, and height to specified the px values.
Parameters
A map of options to pass to the method.
- element - HTMLElement
- The element that should be arranged in the HtmlVisual.
- layout - IRectangle
- The values for the rectangle.
Sets the translation and size values of a given HtmlElement to the provided values so that it works well inside an HtmlVisual in a CanvasComponent.
Remarks
This implementation uses caching if possible and thus performs better than using the plain DOM API when called frequently.
This implementation uses the style property of the element to set the position to absolute and specify left, top, width, and height to specified the px values.
Parameters
A map of options to pass to the method.
- element - HTMLElement
- The element that should be arranged in the HtmlVisual.
- dx - number
- The offset on the x-axis.
- dy - number
- The offset on the y-axis.
- width - number
- The width to set to the element.
- height - number
- The height to set to the element.
Sets the translation values of a given HtmlElement to the provided values so that it works well inside an HtmlVisual in a CanvasComponent.
Remarks
Parameters
A map of options to pass to the method.
- element - HTMLElement
- The element that should be translated.
- dx - number
- The offset on the x-axis.
- dy - number
- The offset on the y-axis.