C

NodeCreator<TDataItem>

Show Usages
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

NodeCreator

()
Creates a new creator for nodes or group nodes.

Parameters

Properties

defaults

: INodeDefaults
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

isGroupPredicate

: function(TDataItem): boolean
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

See Also

Developer's Guide

layoutBindings

: ObjectBindings<TDataItem>
Gets or sets an optional set of bindings that will be applied to the node's layout.
conversionfinal

See Also

Developer's Guide
API
applyLayoutBindings

layoutProvider

: function(TDataItem): Rect
Gets or sets an optional provider of a Rect that will be used as the node's layout for the source data item.
The layoutBindings may be used to bind each of the x, y, width and height values, separately. If no layout is provided, the defaults' size will be used and the node will be located at the origin.
conversionfinal

See Also

Developer's Guide
API
getLayout

styleBindings

: ObjectBindings<TDataItem>
Gets or sets an optional set of bindings that will be applied to the node's style.
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

styleProvider

: function(TDataItem): INodeStyle
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

See Also

Developer's Guide
API
getStyle

tagProvider

: function(TDataItem): any
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

See Also

Developer's Guide
API
getTag

Methods

addLabelsSource

<TLabelDataItem> (dataProvider: function(TDataItem): any, labelsSource: LabelsSource<TLabelDataItem>)
Adds the given labelsSource to this instance.
final

Parameters

dataProvider: function(TDataItem): any
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

API
createLabelsSource

applyLayoutBindings

(
graph: IGraph
node: INode
dataItem: TDataItem
)
Resolves the layoutBindings against the given dataItem and applies them on the given node layout.
The layoutProvider is not evaluated by this method.
final

Parameters

graph: IGraph
The managed graph.
node: INode
The node to update.
dataItem: TDataItem
The data item that is used.

See Also

API
updateLayout

applyStyleBindings

(
graph: IGraph
node: INode
dataItem: TDataItem
)
Resolves the styleBindings against the given dataItem and applies them to the node style.
The styleProvider is not evaluated by this method.
final

Parameters

graph: IGraph
The managed graph.
node: INode
The node to update.
dataItem: TDataItem
The data item that is used.

See Also

API
updateStyle

createLabelBinding

(text?: function(TDataItem): string): LabelCreator<TDataItem>
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): string
An optional provider for the text property. If the provider returns null or undefined no label will be created. To force creation of an empty label the provider must return an empty string instead.

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 : logisticsLabelStyle

It 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.
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): any
A function that provides a collection of label data items from the node data item.
id?: function(TLabelDataItem, any): any
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.

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.text

The 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.text

See Also

Developer's Guide

createNode

(
graph: IGraph
parent: INode
dataItem: TDataItem
): INode
Creates a node in the graph with the values of the bindings resolved against the dataItem.
This method will use the various helper methods in this class to determine the values for the node's layout, style, and tag. It will also add the labels to the node.

Parameters

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.

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

API
isGroupPredicate, getLayout, getStyle, getTag, applyLayoutBindings, applyStyleBindings

createNodeCore

(
graph: IGraph
groupNode: boolean
parent: INode
layout: Rect
style: INodeStyle
tag: INode['tag']
): INode
protected
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.

getLayout

(dataItem: TDataItem): Rect
protected
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

Rect
The value to use or null in case the defaults should be used.

See Also

API
layoutProvider, layoutBindings

getStyle

(dataItem: TDataItem): INodeStyle
protected
Obtains an INodeStyle instance or null by resolving the styleProvider.
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 null in case the defaults should be used.

See Also

API
styleProvider, styleBindings

getTag

(dataItem: TDataItem): any
protected
Obtains an object to use as tag by resolving the tagProvider on the data item.
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 null in case the defaults should be used.

See Also

API
tagProvider

getUpdatedLayout

(
graph: IGraph
node: INode
dataItem: TDataItem
): Rect
protected
Resolves the layoutProvider and then applies the layout bindings.
This method is called by updateLayout.
protected

Parameters

graph: IGraph
The managed graph.
node: INode
The node to update.
dataItem: TDataItem
The data item that is used.

Return Value

Rect
An updated Rect based on the given data item.

getUpdatedStyle

(
graph: IGraph
node: INode
dataItem: TDataItem
): INodeStyle
protected
Resolves the styleProvider and then applies the style bindings.
This method is called by updateStyle.
protected

Parameters

graph: IGraph
The managed graph.
node: INode
The node to update.
dataItem: TDataItem
The data item that is used.

Return Value

INodeStyle
The updated style instance. Either the value returned by getStyle, or the default style, if getStyle returns null.

getUpdatedTag

(
graph: IGraph
node: INode
dataItem: TDataItem
): any
protected
Resolves the tagProvider on the given data item.

By default, it only delegates to getTag.

This method is called by updateTag.

protected

Parameters

graph: IGraph
The managed graph.
node: INode
The node for which the new tag should be obtained.
dataItem: TDataItem
The data item that is used.

Return Value

any
Returns the updated tag object.

onNodeCreated

(
graph: IGraph
node: INode
dataItem: TDataItem
)
protected
Triggers the node-created event.
protected

Parameters

graph: IGraph
The graph in which the node has been created.
node: INode
The node that has been created.
dataItem: TDataItem
The data item from which the node has been created.

onNodeUpdated

(
graph: IGraph
node: INode
dataItem: TDataItem
)
protected
Triggers the node-updated event.
protected

Parameters

graph: IGraph
The graph in which the node has been updated.
node: INode
The node that has been updated.
dataItem: TDataItem
The data item with which the node has been updated.

updateLabels

(
graph: IGraph
node: INode
dataItem: 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)
})

Parameters

graph: IGraph
The managed graph.
node: INode
The node whose labels to update.
dataItem: TDataItem
The node data item with which the node's labels should be updated.

updateLayout

(
graph: IGraph
node: INode
dataItem: TDataItem
)
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.
final

Parameters

graph: IGraph
The managed graph.
node: INode
The node to update.
dataItem: TDataItem
The data item that is used for the update.

updateNode

(
graph: IGraph
node: INode
parent: INode
dataItem: TDataItem
)
Updates 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

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

API
updateLayout, updateStyle, updateTag, updateLabels

updateStyle

(
graph: IGraph
node: INode
dataItem: TDataItem
)
Updates the style of the node with the given dataItem by calling getUpdatedStyle and applying the style to the node in the graph.
final

Parameters

graph: IGraph
The managed graph.
node: INode
The node to update.
dataItem: TDataItem
The data item that is used for the update.

updateTag

(
graph: IGraph
node: INode
dataItem: TDataItem
)
Updates the tag of the node with the given dataItem by calling getUpdatedTag and setting the new tag on the node.
final

Parameters

graph: IGraph
The managed graph.
node: INode
The node to update.
dataItem: TDataItem
The data item that is used for the update.

Events

'node-created'

: GraphBuilderItemEventArgs<INode, TDataItem>
Occurs when a node has been created.

Properties of

GraphBuilderItemEventArgs<INode, TDataItem>
dataItem: TDataItem
Gets the object the item has been created from.
graph: IGraph
Gets the graph that can be used to modify the item.
item: TItem
Gets the item that is the subject of the event.

See Also

API
node-updated

'node-updated'

: GraphBuilderItemEventArgs<INode, TDataItem>
Occurs when a node has been updated.

Properties of

GraphBuilderItemEventArgs<INode, TDataItem>
dataItem: TDataItem
Gets the object the item has been created from.
graph: IGraph
Gets the graph that can be used to modify the item.
item: TItem
Gets the item that is the subject of the event.

See Also

Developer's Guide
API
node-created