This class can be used to create and update INodes based on data items.
Inheritance Hierarchy
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.
Type Parameters
TDataItem
- The type of the data items in the source.
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<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
Developer's Guide
Members
Show:
Constructors
Creates a new creator for nodes or group nodes.
Creates a new creator for nodes or group nodes.
Parameters
Properties
Gets or sets a set of INodeDefaults that will be used for the nodes and node labels.
Gets or sets a set of INodeDefaults that will be used for the nodes and node labels.
The defaults of instances of this class created by one of the
GraphBuilders, e.g. GraphBuilder, cascade with the defaults of the GraphBuilder's graph.final
See Also
Developer's Guide
Gets or sets a predicate that determines whether the node created for a data item shall be a group node or not.
Gets or sets a predicate that determines whether the node created for a data item shall be a group node or not.
When this predicate returns
true but the node will not have any children associated, it will still be created as group node.final
Represents 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.
Return Value
- boolean
trueif obj meets the criteria defined within the method represented by this delegate; otherwise,false.
See Also
Developer's Guide
conversionfinal
A callback that provides an instance of type
TValue for the given dataItem.Parameters
- dataItem: TDataItem
- The data item for which a value shall be provided.
Return Value
See Also
Developer's Guide
API
- getLayout
Note that bindings will affect the properties of the instance created by getStyle. If the style is obtained from the defaults with shareStyleInstance set to
true, the properties of the same instance are overwritten each time. To get fresh copies, set shareStyleInstance to false.conversionfinal
See Also
Developer's Guide
API
- applyStyleBindings
Gets or sets an optional provider of an INodeStyle instance that will be used as the node's style for the source data item.
Gets or sets an optional provider of an INodeStyle instance that will be used as the node's style for the source data item.
By default the defaults' style will be used. Note that shareStyleInstance will be ignored if this provider returns a value. Use the styleBindings to reconfigure properties of the style instances.
conversionfinal
A callback that provides an instance of type
TValue for the given dataItem.Parameters
- dataItem: TDataItem
- The data item for which a value shall be provided.
Return Value
See Also
Developer's Guide
API
- getStyle
Gets or sets an optional provider of an object that will be used as the node's tag for the source data item.
Gets or sets an optional provider of an object that will be used as the node's tag for the source data item.
By default the source data item itself will be used as the tag.
conversionfinal
A callback that provides an instance of type
TValue for the given dataItem.Parameters
- dataItem: TDataItem
- The data item for which a value shall be provided.
Return Value
- any
See Also
Developer's Guide
API
- getTag
Methods
final
Parameters
- type: string
- A string which represents the type of the event to register as listed in events.
- listener: function(evt:EventArgs, sender:this): void
- The function which will be invoked when the event is raised.
- options?: ListenerOptions
- Options which specify how the listener will be invoked.
addLabelsSource
<TLabelDataItem> (dataProvider: function(TDataItem): any, labelsSource: LabelsSource<TLabelDataItem>)Adds the given labelsSource to this instance.
addLabelsSource
<TLabelDataItem> (dataProvider: function(TDataItem): any, labelsSource: LabelsSource<TLabelDataItem>)Adds the given
labelsSource to this instance.final
Parameters
- dataProvider: function(TDataItem): anyconversion
- A function that provides the label data items from the data item.A callback that provides an instance of type
TValuefor the givendataItem.Parameters- dataItem: TDataItem
- The data item for which a value shall be provided.
Return Value- any
- labelsSource: LabelsSource<TLabelDataItem>
- The source to which the data is added.
See Also
Creates a binding for labels that will be added to nodes created by this instance.
Creates a binding for labels that will be added to nodes created by this instance.
Use this method over createLabelsSource if the created nodes have a predetermined amount of labels. This method returns a LabelCreator<TDataItem> whose textProvider is configured with the given
text. Note that the item type of the returned LabelCreator<TDataItem> is the same as for this NodeCreator<TDataItem>.final
Parameters
- text?: function(TDataItem): stringconversion
- 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.A callback that provides an instance of typeTValuefor the givendataItem.Parameters- dataItem: TDataItem
- The data item for which a value shall be provided.
Return Value- string
Return Value
- 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({
href: employee.imageUrl,
iconSize: new Size(16, 16),
iconPlacement: ExteriorNodeLabelModel.LEFT,
})See Also
Developer's Guide
createLabelsSource
<TLabelDataItem> (data: function(TDataItem): any, id?: function(TLabelDataItem, any): any): LabelsSource<TLabelDataItem>Creates a new source of label data items that will be added to nodes created by this instance.
createLabelsSource
<TLabelDataItem> (data: function(TDataItem): any, id?: function(TLabelDataItem, any): any): LabelsSource<TLabelDataItem>Creates a new source of label data items that will be added to nodes created by this instance.
Use this method over createLabelBinding if the created nodes have a varying number of labels. Note that the
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.final
Parameters
- data: function(TDataItem): anyconversion
- A function that provides a collection of label data items from the node data item.A callback that provides an instance of type
TValuefor the givendataItem.Parameters- dataItem: TDataItem
- The data item for which a value shall be provided.
Return Value- any
- id?: function(TLabelDataItem, any): anyconversion
- 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.A callback that provides an unique identifier for the
dataItem.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.
Return Value- any
Return Value
- 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
Developer's Guide
Parameters
Return Value
- INode
- The newly created node.
Examples
In the context of a GraphBuilder, this method is called during buildGraph and updateGraph. Without a GraphBuilder, this method can be called directly to create a styled and labeled node:
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
Called from createNode and performs the actual node creation in the graph.
Called from createNode and performs the actual node creation in the graph.
protected
Parameters
- 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: INode['tag']
- The tag of the node.
Return Value
- INode
- The newly created node.
Obtains a Rect to use as layout or null by resolving the layoutProvider and afterwards applying the layoutBindings.
Obtains a Rect to use as layout or
null by resolving the layoutProvider and afterwards applying the layoutBindings.In case of
null, the defaults are used.protected
Parameters
- dataItem: TDataItem
- The data item on which the provider is resolved.
Return Value
- INodeStyle
- The value to use or
nullin case the defaults should be used.
See Also
The tag can be any value and does not need to be related to the original source data item or its ID.
protected
Parameters
- dataItem: TDataItem
- The data item on which the provider is resolved.
Return Value
- any
- The value to use or
nullin case the defaults should be used.
See Also
API
- tagProvider
Resolves the layoutProvider and then applies the layout bindings.
Resolves the layoutProvider and then applies the layout bindings.
This method is called by updateLayout.
protected
Parameters
Resolves the styleProvider and then applies the style bindings.
Resolves the styleProvider and then applies the style bindings.
This method is called by updateStyle.
protected
Parameters
Return Value
- 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.
Resolves the tagProvider on the given data item.
Triggers the node-created event.
Triggers the node-created event.
Triggers the node-updated event.
Triggers the node-updated event.
final
Parameters
- type: string
- A string which represents the type of the event to register as listed in events.
- listener: function(evt:EventArgs, sender:this): void
- The function which will be invoked when the event is raised.
- options?: ListenerOptions
- Options which specify how the listener will be invoked.
Can be used to update the labels of the node that have been added with this NodeCreator<TDataItem>.
Can be used to update the labels of the node that have been added with this NodeCreator<TDataItem>.
This only adds / removes labels based on the bound data. To update bound properties for the labels, call the respective update methods on the LabelCreator<TDataItem>:
// configure the LabelCreators to update non-structural aspects
const labelCreator1 = nodeCreator.createLabelBinding((item) => item.name)
labelCreator1.addEventListener('label-updated', (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.addEventListener('label-updated', (evt) => {
// only update properties which may change
labelCreator2.updateText(evt.graph, evt.item, evt.dataItem)
})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 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.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.addEventListener('node-updated', (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
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 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.
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.
Occurs when a node has been created.
Occurs when a node has been updated.
Occurs when a node has been updated.