An IStripeStyle implementation that uses an SVG snippet as a template for the visualization of IStripes.
Remarks
The styleResourceKey is used to determine the template that will be applied to the Visual. The template must be specified in the DOM in a script tag with type='text/yfiles-template'.
The SVG template snippet can contain bindings in the form attribute="{Binding propertyName}" that bind the attribute value to the value of the property with the given name in the node's tag. The tag itself can be bound with attribute="{Binding}". If the bound object provides the function addPropertyChangedListener(listener) or implements IPropertyObservable, bindings to properties of the business object are dynamically updated if the registered listeners are called on property change. Business objects can be made observable by calling makeObservable.
TemplateBindings in the form attribute="{TemplateBinding propertyName}" bind the attribute value to a set of well-defined properties of the node that are provided by the style. The available template binding properties are:
- width: The width of the graph element
- height: The height of the graph element
- bounds: The bounding rectangle of the graph element
- canvas: The GraphComponent the element is rendered in
- zoom: The current zoom level of the GraphComponent
- itemSelected: Whether the element is selected
- itemFocused: Whether the element has the focus
- itemHighlighted: Whether the element is highlighted
- styleTag: The tag associated with the element's style instance
Bindings can specify converters and converter parameters. Converters are simple functions with the signature function(value:object, parameter:object):object. A converter has to be registered under its name either in the converter store or with the window object before it can be used.
TextWrapConverter is a built-in converter function which emits wrapped text as SVG elements. It can be used to display wrapped text in a template style. To use the TextWrapConverter the template style must include a <g> element that binds a property containing the text to be wrapped to data-content. TextWrapConverter must be specified as the converter function. The converter’s parameters are passed using a shorthand notation for width, height, font, trimming and color. See Text Wrapping in a Template Style for more details.
Depending on the current state, the following CSS classes are added to the root element of the template:
yfiles-selectedyfiles-focusedyfiles-highlighted
Related Programming Samples
- Template Styles
- Shows SVG template styles for nodes, labels and ports.
- Organization Chart
- An interactive viewer for organization charts with adaptive styles and automatic layout.
Type Details
- yfiles module
- view-table
- yfiles-umd modules
- view-table, view
- Legacy UMD name
- yfiles.styles.TemplateStripeStyle
See Also
Constructors
Creates a new instance using the given resource key and a custom renderer instance.
Parameters
A map of options to pass to the method.
- styleResourceKey - string
- The key of the style resource that will be used for the component.
- renderer - TemplateStripeStyleRenderer
- The custom renderer for this style instance.
Properties
Gets or sets an implementation of IContextLookup that can be used to satisfy queries that are made to the implementation which is returned by calls to getContext that are made on the style renderer that is associated with this style instance.
Remarks
Defined in
Convenience getter that yields the TemplateStripeStyleRenderer that is used by this instance.
Gets or sets the tag that is associated with this style instance.
Remarks
Defined in
Methods
Performs a shallow clone of this instance, except for the value of styleTag which is cloned, too, if it can be cloned.
Factory method that is called by the TemplateStripeStyleRenderer to create the visual that will be used for the display of the stripe.
Parameters
A map of options to pass to the method.
- context - IRenderContext
- The context for which the visual should be created.
- stripe - IStripe
- The stripe that will be rendered.
Returns
- ↪SvgVisual
- The readily styled visual.
Defined in
Raises the PropertyChanged event.
Parameters
A map of options to pass to the method.
- evt - PropertyChangedEventArgs
- The PropertyChangedEventArgs instance containing the event data.
Defined in
Events
Occurs when a property value changes.
Overrides
Event Registration
addPropertyChangedListener(function(this, PropertyChangedEventArgs):void)Event Deregistration
removePropertyChangedListener(function(this, PropertyChangedEventArgs):void)Signature Details
function(sender: any, args: PropertyChangedEventArgs)
Parameters
- sender - any
- The object which dispatched the event.
- args - PropertyChangedEventArgs
- The arguments which define the change.
Constants
Gets the storage object for binding converters.
Remarks
Static Methods
Makes an object observable to bindings in template styles.
Remarks
Bindings to observable objects react to changes in the bound data. This enables dynamic styling of graph items that reacts to changes of the underlying business data of each graph item.
This method adds the functions firePropertyChanged, addPropertyChangedListener and removePropertyChangedListener to the given object. Call firePropertyChanged(propertyName: string) each time a bound property value changes in order to update the related bindings.
Parameters
A map of options to pass to the method.
- dataObject - Object
- The object to make observable.
Returns
- ↪Object
- The object that was passed in.