This class can be used to create and update INodes based on data items.
Remarks
These data items can be any business or arbitrary data which should be represented by nodes.
NodeCreator<TDataItem> allows for conveniently binding properties of the data item to the properties of the created INode to control aspects like layout and styling.
This class can be used both standalone as well as in conjunction with any of the GraphBuilders, e.g. GraphBuilder.
In the context of the GraphBuilder, it is responsible to create the items from the associated NodesSource<TDataItem>s.
Examples
A NodeCreator<TDataItem> can either be used with a NodesSource<TDataItem> in conjunction with a GraphBuilder
const builder = new GraphBuilder()
const nodesSource = builder.createNodesSource(
nodeData,
(nodeData) => nodeData.nodeId
)
nodesSource.nodeCreator.defaults.shareStyleInstance = false
nodesSource.nodeCreator.defaults.style = new ShapeNodeStyle({
stroke: 'darkorange',
fill: 'lightyellow',
shape: 'round-rectangle'
})
nodesSource.nodeCreator.styleBindings.addBinding('stroke', (employee) =>
employee.position.includes('Chief') ? 'darkred' : 'darkorange'
)
nodesSource.nodeCreator.styleBindings.addBinding('shape', (employee) =>
employee.freelancer ? 'hexagon' : 'round-rectangle'
)
builder.buildGraph()or it can be used standalone. In that case, its createNode method can be used to create nodes.
const nodeCreator = new NodeCreator()
nodeCreator.defaults.shareStyleInstance = true
nodeCreator.defaults.style = new ShapeNodeStyle({
stroke: 'darkorange',
fill: 'lightyellow',
shape: 'round-rectangle'
})
nodeCreator.styleBindings.addBinding('stroke', (employee) =>
employee.position.includes('Chief') ? 'darkred' : 'darkorange'
)
nodeCreator.styleBindings.addBinding('shape', (employee) =>
employee.freelancer ? 'hexagon' : 'round-rectangle'
)
const node = nodeCreator.createNode(graph, null, dataItem)const nodeCreator = new NodeCreator<Employee>()
nodeCreator.defaults.shareStyleInstance = true
nodeCreator.defaults.style = new ShapeNodeStyle({
stroke: 'darkorange',
fill: 'lightyellow',
shape: 'round-rectangle'
})
nodeCreator.styleBindings.addBinding('stroke', (employee) =>
employee.position.includes('Chief') ? 'darkred' : 'darkorange'
)
nodeCreator.styleBindings.addBinding('shape', (employee) =>
employee.freelancer ? 'hexagon' : 'round-rectangle'
)
const node = nodeCreator.createNode(graph, null, dataItem)Type Parameters
- TDataItem
- The type of the data items in the source.
Type Details
- yfiles module
- view-component
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.binding.NodeCreator
See Also
Constructors
Creates a new creator for nodes or group nodes.
Parameters
A map of options to pass to the method.
- defaults - INodeDefaults
A set of INodeDefaults that will be used for the nodes and node labels. This option sets the defaults property on the created object.
- isGroup - function(TDataItem):boolean
A predicate that determines whether the node created for a data item shall be a group node or not. This option sets the isGroupPredicate property on the created object.
Signature Details
function(obj: TDataItem) : booleanRepresents the method that defines a set of criteria and determines whether the specified object meets those criteria.Parameters
- obj - TDataItem
- The object to compare against the criteria defined within the method represented by this delegate.
Returns
- boolean
trueif obj meets the criteria defined within the method represented by this delegate; otherwise,false.
- layoutBindings - ObjectBindings<TDataItem>
An optional set of bindings that will be applied to the node's layout. This option sets the layoutBindings property on the created object.
- layout - function(TDataItem):Rect
An optional provider of a Rect that will be used as the node's layout for the source data item. This option sets the layoutProvider property on the created object.
- styleBindings - ObjectBindings<TDataItem>
An optional set of bindings that will be applied to the node's style. This option sets the styleBindings property on the created object.
- style - function(TDataItem):INodeStyle
An optional provider of an INodeStyle instance that will be used as the node's style for the source data item. This option sets the styleProvider property on the created object.
Signature Details
function(dataItem: TDataItem) : INodeStyleA callback that provides an instance of typeTValuefor the givendataItem.Parameters
- dataItem - TDataItem
- The data item for which a value shall be provided.
Returns
- tag - function(TDataItem):Object
An optional provider of an object that will be used as the node's tag for the source data item. This option sets the tagProvider property on the created object.
Properties
Gets or sets a set of INodeDefaults that will be used for the nodes and node labels.
Remarks
GraphBuilders, e.g. GraphBuilder, cascade with the defaults of the GraphBuilder's graph.See Also
Gets or sets a predicate that determines whether the node created for a data item shall be a group node or not.
Remarks
true but the node will not have any children associated, it will still be created as group node.Signature Details
function(obj: TDataItem) : boolean
Parameters
- obj - TDataItem
- The object to compare against the criteria defined within the method represented by this delegate.
Returns
- boolean
trueif obj meets the criteria defined within the method represented by this delegate; otherwise,false.
See Also
Gets or sets an optional provider of a Rect that will be used as the node's layout for the source data item.
Remarks
Signature Details
function(dataItem: TDataItem) : Rect
TValue for the given dataItem.Parameters
- dataItem - TDataItem
- The data item for which a value shall be provided.
Returns
See Also
Gets or sets an optional set of bindings that will be applied to the node's style.
Remarks
true, the properties of the same instance are overwritten each time. To get fresh copies, set shareStyleInstance to false.See Also
Gets or sets an optional provider of an INodeStyle instance that will be used as the node's style for the source data item.
Remarks
Signature Details
function(dataItem: TDataItem) : INodeStyle
TValue for the given dataItem.Parameters
- dataItem - TDataItem
- The data item for which a value shall be provided.
Returns
See Also
Gets or sets an optional provider of an object that will be used as the node's tag for the source data item.
Remarks
Signature Details
function(dataItem: TDataItem) : any
TValue for the given dataItem.Parameters
- dataItem - TDataItem
- The data item for which a value shall be provided.
Returns
- any
See Also
Methods
addLabelsSource
<TLabelDataItem>(dataProvider: function(TDataItem):Object, labelsSource: LabelsSource<TLabelDataItem>)Adds the given labelsSource to this instance.
Type Parameters
- TLabelDataItem
- The type of the data items in the source.
Parameters
A map of options to pass to the method.
- dataProvider - function(TDataItem):Object
- A function that provides the label data items from the data item.
- labelsSource - LabelsSource<TLabelDataItem>
- The source to which the data is added.
See Also
Resolves the layoutBindings against the given dataItem and applies them on the given node layout.
Remarks
Parameters
A map of options to pass to the method.
- graph - IGraph
- The managed graph.
- node - INode
- The node to update.
- dataItem - TDataItem
- The data item that is used.
See Also
Resolves the styleBindings against the given dataItem and applies them to the node style.
Remarks
Parameters
A map of options to pass to the method.
- graph - IGraph
- The managed graph.
- node - INode
- The node to update.
- dataItem - TDataItem
- The data item that is used.
See Also
Creates a binding for labels that will be added to nodes created by this instance.
Remarks
text. Note that the item type of the returned LabelCreator<TDataItem> is the same as for this NodeCreator<TDataItem>.Parameters
A map of options to pass to the method.
- text - function(TDataItem):string
- An optional provider for the text property. If the provider returns
nullorundefinedno label will be created. To force creation of an empty label the provider must return an empty string instead.Signature Details
function(dataItem: TDataItem) : stringA callback that provides an instance of typeTValuefor the givendataItem.Parameters
- dataItem - TDataItem
- The data item for which a value shall be provided.
Returns
- string
- defaults - ILabelDefaults
A set of ILabelDefaults that will be used for the labels. This option sets the defaults property on the created object.
- layoutParameter - function(TDataItem):ILabelModelParameter
An optional provider of a label model parameter that will be used as the label's layoutParameter for the source data item. This option sets the layoutParameterProvider property on the created object.
Signature Details
function(dataItem: TDataItem) : ILabelModelParameterA callback that provides an instance of typeTValuefor the givendataItem.Parameters
- dataItem - TDataItem
- The data item for which a value shall be provided.
Returns
- style - function(TDataItem):ILabelStyle
An optional provider of an ILabelStyle instance that will be used as the label's style for the source data item. This option sets the styleProvider property on the created object.
Signature Details
function(dataItem: TDataItem) : ILabelStyleA callback that provides an instance of typeTValuefor the givendataItem.Parameters
- dataItem - TDataItem
- The data item for which a value shall be provided.
Returns
- preferredSize - function(TDataItem):Size
An optional provider of the size that will be used as the label's preferredSize for the source data item. This option sets the preferredSizeProvider property on the created object.
- tag - function(TDataItem):Object
An optional provider of an object that will be used as the label's tag for the source data item. This option sets the tagProvider property on the created object.
- styleBindings - ObjectBindings<Object>
An optional set of bindings that will be applied to the label's style. This option sets the styleBindings property on the created object.
- preferredSizeBindings - ObjectBindings<Object>
An optional binding that will be applied to the label. This option sets the preferredSizeBindings property on the created object.
Returns
- ↪LabelCreator<TDataItem>
- A new LabelCreator<TData> instance that can be further configured.
Examples
Without further configuration createLabelBinding creates labels with the text provided by the given text and the graph's default label style.
nodesSource.nodeCreator.createLabelBinding((employee) => employee.name)The returned LabelCreator<TDataItem> can be used to configure the label appearance further. Note that the data item it uses is the data item for the owning node:
const labelCreator = nodesSource.nodeCreator.createLabelBinding(
(employee) => employee.name
)
labelCreator.styleProvider = (employee) =>
employee.department === 'IT' ? itLabelStyle : logisticsLabelStyleIt is also possible to ignore the provided text and create an icon instead, using the IconLabelStyle:
const labelCreator = nodesSource.nodeCreator.createLabelBinding()
// to avoid empty labels to be created return null for missing image URL
labelCreator.textProvider = (employee) =>
typeof employee.imageUrl !== 'undefined' ? ' ' : null
labelCreator.styleProvider = (employee) =>
new IconLabelStyle({
icon: employee.imageUrl,
iconSize: new Size(16, 16),
iconPlacement: ExteriorLabelModel.WEST
})See Also
createLabelsSource
<TLabelDataItem>(data: function(TDataItem):Object, id?: function(TLabelDataItem, Object):Object) : LabelsSource<TLabelDataItem>Creates a new source of label data items that will be added to nodes created by this instance.
Remarks
data introduces a new item type for the returned LabelsSource<TDataItem>. Also note that the data is expected to return an IEnumerable<T> of that type.Type Parameters
- TLabelDataItem
- The type of the data items in the source.
Parameters
A map of options to pass to the method.
- data - function(TDataItem):Object
- A function that provides a collection of label data items from the node data item.
- id - function(TLabelDataItem, Object):Object
- An optional function that yields an id for each label data item that is provided from the label data provider. This id is used to identify the labels during updateLabels.
Signature Details
function(dataItem: TLabelDataItem, canonicalId: any) : anyA callback that provides an unique identifier for thedataItem.id provider are used in NodesSource.idProvider, EdgesSource.idProvider and LabelsSource.idProvider to identify the created nodes, edges and labels and avoid duplicate creation of items with the same ID.
The ID can also be used by parentIdProvider and sourceIdProvider and targetIdProvider to resolve the parent, source, or target nodes.
The ID is further used to identify nodes, edges, and labels during updateGraph.
Parameters
- dataItem - TLabelDataItem
- The value that will be passed in.
- canonicalId - any
- The original canonical id of the value. For data arrays and iterables this is the index into the collection. For Maps and data objects this is the key associated with a value.
Returns
- any
- defaults - ILabelDefaults
A set of ILabelDefaults that will be used for the labels. This option sets the defaults property on the created object.
- text - function(TLabelDataItem):string
An optional provider of the text that will be used as the label's text for the source data item. This option sets the textProvider property on the created object.
Signature Details
function(dataItem: TLabelDataItem) : stringA callback that provides an instance of typeTValuefor the givendataItem.Parameters
- dataItem - TLabelDataItem
- The data item for which a value shall be provided.
Returns
- string
- layoutParameter - function(TLabelDataItem):ILabelModelParameter
An optional provider of a label model parameter that will be used as the label's layoutParameter for the source data item. This option sets the layoutParameterProvider property on the created object.
Signature Details
function(dataItem: TLabelDataItem) : ILabelModelParameterA callback that provides an instance of typeTValuefor the givendataItem.Parameters
- dataItem - TLabelDataItem
- The data item for which a value shall be provided.
Returns
- preferredSize - function(TLabelDataItem):Size
An optional provider of the size that will be used as the label's preferredSize for the source data item. This option sets the preferredSizeProvider property on the created object.
- style - function(TLabelDataItem):ILabelStyle
An optional provider of an ILabelStyle instance that will be used as the label's style for the source data item. This option sets the styleProvider property on the created object.
Signature Details
function(dataItem: TLabelDataItem) : ILabelStyleA callback that provides an instance of typeTValuefor the givendataItem.Parameters
- dataItem - TLabelDataItem
- The data item for which a value shall be provided.
Returns
- tag - function(TLabelDataItem):Object
An optional provider of an object that will be used as the label's tag for the source data item. This option sets the tagProvider property on the created object.
- styleBindings - ObjectBindings<TLabelDataItem>
An optional set of bindings that will be applied to the label's style. This option sets the styleBindings property on the created object.
- preferredSizeBindings - ObjectBindings<TLabelDataItem>
An optional binding that will be applied to the label. This option sets the preferredSizeBindings property on the created object.
Returns
- ↪LabelsSource<TLabelDataItem>
- A new LabelsSource<TDataItem> instance whose LabelCreator<TDataItem> can be configured further.
Examples
A simple usage of createLabelsSource note that a textProvider has to be configured on the returned LabelsSource<TDataItem>'s labelCreator.
const labelsSource = nodesSource.nodeCreator.createLabelsSource(
(employee) => employee.labels
)
labelsSource.labelCreator.textProvider = (labelObject) => labelObject.textThe label objects might encode more information which can be used for individual styling of the labels:
const labelsSource = nodesSource.nodeCreator.createLabelsSource(
(employee) => employee.labels
)
labelsSource.labelCreator.styleProvider = (labelObject) =>
labelObject.style === 'Orange' ? orangeLabelStyle : defaultLabelStyle
labelsSource.labelCreator.textProvider = (labelObject) => labelObject.textSee Also
Creates a node in the graph with the values of the bindings resolved against the dataItem.
Remarks
Parameters
A map of options to pass to the method.
- graph - IGraph
- The graph to create the node in.
- parent - INode
- The parent node for the newly created node.
- dataItem - TDataItem
- The data item for which to create the node.
Returns
- ↪INode
- The newly created node.
Examples
const nodeCreator = new NodeCreator()
nodeCreator.defaults.shareStyleInstance = true
nodeCreator.defaults.style = new ShapeNodeStyle({
stroke: 'darkorange',
fill: 'lightyellow',
shape: 'round-rectangle'
})
nodeCreator.styleBindings.addBinding('stroke', (employee) =>
employee.position.includes('Chief') ? 'darkred' : 'darkorange'
)
nodeCreator.styleBindings.addBinding('shape', (employee) =>
employee.freelancer ? 'hexagon' : 'round-rectangle'
)
const node = nodeCreator.createNode(graph, null, dataItem)const nodeCreator = new NodeCreator<Employee>()
nodeCreator.defaults.shareStyleInstance = true
nodeCreator.defaults.style = new ShapeNodeStyle({
stroke: 'darkorange',
fill: 'lightyellow',
shape: 'round-rectangle'
})
nodeCreator.styleBindings.addBinding('stroke', (employee) =>
employee.position.includes('Chief') ? 'darkred' : 'darkorange'
)
nodeCreator.styleBindings.addBinding('shape', (employee) =>
employee.freelancer ? 'hexagon' : 'round-rectangle'
)
const node = nodeCreator.createNode(graph, null, dataItem)See Also
createNodeCore
(graph: IGraph, groupNode: boolean, parent: INode, layout: Rect, style: INodeStyle, tag: Object) : INodeCalled from createNode and performs the actual node creation in the graph.
Parameters
A map of options to pass to the method.
- graph - IGraph
- The graph to create the node in.
- groupNode - boolean
- Whether to create a group node.
- parent - INode
- Optional parent of the node.
- layout - Rect
- The layout of the node.
- style - INodeStyle
- The style of the node.
- tag - Object
- The tag of the node.
Returns
- ↪INode
- The newly created node.
Obtains a Rect to use as layout or null by resolving the layoutProvider and afterwards applying the layoutBindings.
Obtains an INodeStyle instance or null by resolving the styleProvider.
Remarks
null, the defaults are used.Parameters
A map of options to pass to the method.
- dataItem - TDataItem
- The data item on which the provider is resolved.
Returns
- ↪INodeStyle
- The value to use or
nullin case the defaults should be used.
See Also
Obtains an object to use as tag by resolving the tagProvider on the data item.
Remarks
Parameters
A map of options to pass to the method.
- dataItem - TDataItem
- The data item on which the provider is resolved.
Returns
- ↪any
- The value to use or
nullin case the defaults should be used.
See Also
Resolves the layoutProvider and then applies the layout bindings.
Remarks
Parameters
A map of options to pass to the method.
- graph - IGraph
- The managed graph.
- node - INode
- The node to update.
- dataItem - TDataItem
- The data item that is used.
Returns
Resolves the styleProvider and then applies the style bindings.
Remarks
Parameters
A map of options to pass to the method.
- graph - IGraph
- The managed graph.
- node - INode
- The node to update.
- dataItem - TDataItem
- The data item that is used.
Returns
- ↪INodeStyle
- The updated style instance. Either the value returned by getStyle, or the default style, if getStyle returns
null.
Resolves the tagProvider on the given data item.
Triggers the NodeCreated event.
Triggers the NodeUpdated event.
Can be used to update the labels of the node that have been added with this NodeCreator<TDataItem>.
Remarks
// configure the LabelCreators to update non-structural aspects
const labelCreator1 = nodeCreator.createLabelBinding((item) => item.name)
labelCreator1.addLabelUpdatedListener((sender, evt) => {
labelCreator1.updateText(evt.graph, evt.item, evt.dataItem)
labelCreator1.updateStyle(evt.graph, evt.item, evt.dataItem)
labelCreator1.updatePreferredSize(evt.graph, evt.item, evt.dataItem)
labelCreator1.updateLayoutParameter(evt.graph, evt.item, evt.dataItem)
labelCreator1.updateTag(evt.graph, evt.item, evt.dataItem)
})
// each LabelCreator has to be configured
const labelCreator2 = nodeCreator.createLabelBinding(
(item) => item.description
)
labelCreator2.addLabelUpdatedListener((sender, evt) => {
// only update properties which may change
labelCreator2.updateText(evt.graph, evt.item, evt.dataItem)
})Parameters
A map of options to pass to the method.
Updates the layout of the node in the graph with the given layout information of the given dataItem by calling getUpdatedLayout and applying it to the node.
Updates the node.
Remarks
By default, this method only performs a structural update of the node, i.e. it sets a new parent and updates its group node state.
To update other aspects of the node instance, call the respective update methods when the node is updated or overwrite this method.
// configure the NodeCreator to update non-structural aspects
nodesSource.nodeCreator.addNodeUpdatedListener((sender, evt) => {
nodesSource.nodeCreator.updateLayout(evt.graph, evt.item, evt.dataItem)
nodesSource.nodeCreator.updateStyle(evt.graph, evt.item, evt.dataItem)
nodesSource.nodeCreator.updateTag(evt.graph, evt.item, evt.dataItem)
nodesSource.nodeCreator.updateLabels(evt.graph, evt.item, evt.dataItem)
})
builder.updateGraph()Note that existing labels whose properties (e.g. text) may change have to be configured similarly.
Parameters
A map of options to pass to the method.
- graph - IGraph
- The graph that contains the node.
- node - INode
- The node to update.
- parent - INode
- The new parent of the node.
- dataItem - TDataItem
- The data item with which the node should be updated.
See Also
Updates the style of the node with the given dataItem by calling getUpdatedStyle and applying the style to the node in the graph.
Updates the tag of the node with the given dataItem by calling getUpdatedTag and setting the new tag on the node.
Events
Occurs when a node has been created.
See Also
Event Registration
addNodeCreatedListener(function(this, GraphBuilderItemEventArgs<INode,TDataItem>):void)Event Deregistration
removeNodeCreatedListener(function(this, GraphBuilderItemEventArgs<INode,TDataItem>):void)Signature Details
function(sender: this, evt: GraphBuilderItemEventArgs<INode,TDataItem>)
Parameters
- sender - this
- The source of the event.
- evt - GraphBuilderItemEventArgs<INode,TDataItem>
- An object that contains the event data.
Occurs when a node has been updated.
See Also
Event Registration
addNodeUpdatedListener(function(this, GraphBuilderItemEventArgs<INode,TDataItem>):void)Event Deregistration
removeNodeUpdatedListener(function(this, GraphBuilderItemEventArgs<INode,TDataItem>):void)Signature Details
function(sender: this, evt: GraphBuilderItemEventArgs<INode,TDataItem>)
Parameters
- sender - this
- The source of the event.
- evt - GraphBuilderItemEventArgs<INode,TDataItem>
- An object that contains the event data.