An INodeStyle that uses an SVG snippet as template for the visualization of INodes.
Remarks
In contrast to TemplateNodeStyle, 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 one of the properties of the node that are exposed by the ITemplateStyleBindingContext interface.
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
Related Programming Samples
- Graph Builder
- Interactively builds and modifies a graph from JSON business data using class
GraphBuilder
.
Type Details
- yfiles module
- styles-template
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.styles.StringTemplateNodeStyle
See Also
Constructors
Creates a new instance using the given SVG template and a custom renderer instance.
Parameters
A map of options to pass to the method.
- svgContent - string
- The SVG snippet that will be used as a template for the component.
- renderer - TemplateNodeStyleRenderer
- The custom renderer for this instance. If none is provided, the default implementation is used.
- styleTag - Object
The tag that is associated with this style instance. This option sets the styleTag property on the created object.
- contextLookup - IContextLookup
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. This option sets the contextLookup property on the created object.
- cssClass - string
An additional CSS class that will be added to the template's root element. This option sets the cssClass property on the created object.
- insets - Insets
The insets the INodeInsetsProvider implementation for INode should yield for this instance. This option sets the insets property on the created object.
- minimumSize - Size
The minimum size an INodeSizeConstraintProvider implementation for INode should yield. This option sets the minimumSize property on the created object.
- normalizedOutline - GeneralPath
The normalized outline of a node that will be displayed using the created visual. This option sets the normalizedOutline property on the created object.
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
null
for this property. The default value is EMPTY_CONTEXT_LOOKUPDefined in
Gets or sets an additional CSS class that will be added to the template's root element.
Remarks
The default value is an empty string, in which case nothing is added.
Multiple classes can be set by separating them with spaces, just like with the SVG class
attribute.
Defined in
Gets or sets the insets the INodeInsetsProvider implementation for INode should yield for this instance.
Remarks
5
for all insets.See Also
Defined in
Gets or sets the minimum size an INodeSizeConstraintProvider implementation for INode should yield.
Gets or sets the normalized outline of a node that will be displayed using the created visual.
Remarks
This shape will be used to satisfy requests to isInBox, isHit, as well as for IShapeGeometry methods (which affect edge cropping at the node outline).
This property may be left at or set to null
to indicate default (rectangular) behavior.
The default value is null
.
Defined in
Gets the renderer implementation that can be queried for implementations that provide details about the visual appearance and visual behavior for a given node and this style instance.
Remarks
const creator = style.renderer.getVisualCreator(node, style)
const visual = creator.createVisual(context)
See Also
Implements
Gets or sets the tag that is associated with this style instance.
Remarks
See Also
Defined in
Gets or sets the SVG content that is the template for the node visualization.
See Also
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 TemplateNodeStyleRenderer to create the visual that will be used for the display of the node.
Parameters
A map of options to pass to the method.
- context - IRenderContext
- The context for which the visual should be created.
- node - INode
- The node 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
Default Properties
Specifies whether code contained in the templates should be included in the DOM.
Remarks
Script tags and event listeners can be used to inject malicious code. This property should only be enabled if the templates originate from trusted sources. If the application allows to load external GraphML files, this property should probably not be enabled.
This setting is shared by StringTemplateNodeStyle, StringTemplateLabelStyle, StringTemplatePortStyle, and StringTemplateStripeStyle.
See Also
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.