StringTemplateStripeStyle

In contrast to TemplateStripeStyle, the SVG template used by this style must be encoded as string and assigned to the svgContent property.

It is vital that the SVG snippet does not declare the SVG namespace itself. Its content is parsed in a dummy namespace in order to avoid immediate validation of the result. The resulting SVG elements are automatically created in the SVG namespace before they are added to the DOM.

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-selected
• yfiles-focused
• yfiles-highlighted