This class can be used to create and update IEdges based on data items.
Inheritance Hierarchy
Remarks
These data items can be any business or arbitrary data which should be represented by edges.
EdgeCreator<TDataItem> allows for conveniently binding properties of the data item to the properties of the created IEdge to control aspects like the 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 EdgesSource<TDataItem>s.
Type Parameters
TDataItem
- The type of the data items in the source.
Examples
An EdgeCreator<TDataItem> can either be used with an EdgesSource<TDataItem> in conjunction with a GraphBuilder
const builder = new GraphBuilder()
const edgeCreator = builder.createEdgesSource(
edgeData,
(item) => item.from,
(item) => item.to,
).edgeCreator
edgeCreator.defaults.shareStyleInstance = false
edgeCreator.defaults.style = new PolylineEdgeStyle()
edgeCreator.styleBindings.addBinding('stroke', (item) =>
item.assistant ? 'darkred' : 'darkorange',
)
builder.buildGraph()or it can be used standalone. In that case, its createEdge method can be used to create edges.
const edgeCreator = new EdgeCreator<EdgeData>()
edgeCreator.defaults.shareStyleInstance = false
edgeCreator.defaults.style = new PolylineEdgeStyle()
edgeCreator.styleBindings.addBinding('stroke', (item) =>
item.assistant ? 'darkred' : 'darkorange',
)
const edge = edgeCreator.createEdge(
graph,
sourceNode,
targetNode,
dataItem,
)See Also
Developer's Guide
Members
Show:
Constructors
Properties
Gets or sets an optional provider of an object that will be used as the edge's bends locations for the source data item.
Gets or sets an optional provider of an object that will be used as the edge's bends locations for the source data item.
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
- getBends
Gets or sets a set of IEdgeDefaults that will be used for the edges and edge labels.
Gets or sets a set of IEdgeDefaults that will be used for the edges and edge 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
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 IEdgeStyle instance that will be used as the edge's style for the source data item.
Gets or sets an optional provider of an IEdgeStyle instance that will be used as the edge'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 edge's tag for the source data item.
Gets or sets an optional provider of an object that will be used as the edge'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
The styleProvider is not evaluated by this method.
final
This method determines the values to pass on to createEdgeCore.
Parameters
Return Value
- IEdge
- The newly created edge.
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 edge:
const edgeCreator = new EdgeCreator<EdgeData>()
edgeCreator.defaults.shareStyleInstance = false
edgeCreator.defaults.style = new PolylineEdgeStyle()
edgeCreator.styleBindings.addBinding('stroke', (item) =>
item.assistant ? 'darkred' : 'darkorange',
)
const edge = edgeCreator.createEdge(
graph,
sourceNode,
targetNode,
dataItem,
)Called from createEdge and performs the actual edge creation in the graph.
Called from createEdge and performs the actual edge creation in the graph.
protected
Parameters
- graph: IGraph
- The graph to create the edge in.
- source: INode
- The source node.
- target: INode
- The target node.
- style: IEdgeStyle
- The style of the edge.
- tag: IEdge['tag']
- The tag of the edge.
Return Value
- IEdge
- The newly created edge.
Creates a binding for labels that will be added to edges created by this instance.
Creates a binding for labels that will be added to edges created by this instance.
Use this method over createLabelsSource if the created edges 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 EdgeCreator<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.
edgesSource.edgeCreator.createLabelBinding(
(edgeObject) => edgeObject.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 edge:
const labelCreator = edgesSource.edgeCreator.createLabelBinding(
(edgeObject) => edgeObject.name,
)
labelCreator.styleProvider = (edgeObject) =>
edgeObject.edgeType === 'Main' ? mainLabelStyle : defaultLabelStyleIt is also possible to ignore the provided text and create an icon instead, using the IconLabelStyle:
const labelCreator = edgesSource.edgeCreator.createLabelBinding()
// to avoid empty labels to be created return null for missing image URL
labelCreator.textProvider = (edgeObject) =>
typeof edgeObject.imageUrl !== 'undefined' ? ' ' : null
labelCreator.styleProvider = (edgeObject) =>
new IconLabelStyle({
href: edgeObject.imageUrl,
iconSize: new Size(16, 16),
iconPlacement: ExteriorNodeLabelModel.LEFT,
})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 edges 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 edges created by this instance.
Use this method over createLabelBinding if the created edges 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 edge 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 = edgesSource.edgeCreator.createLabelsSource(
(edgeObject) => edgeObject.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 = edgesSource.edgeCreator.createLabelsSource(
(edgeObject) => edgeObject.labels,
)
labelsSource.labelCreator.styleProvider = (labelObject) =>
labelObject.style === 'Orange'
? orangeLabelStyle
: defaultLabelStyle
labelsSource.labelCreator.textProvider = (labelObject) =>
labelObject.textObtains an Point array by resolving the bendsProvider.
Obtains an Point array by resolving the bendsProvider.
protected
Parameters
- dataItem: TDataItem
- The data item on which the provider is resolved.
Return Value
- IEnumerable<Point>
- The value to use or
nullin case no bend locations are given.
See Also
In case of
null, the defaults are used.protected
Parameters
- dataItem: TDataItem
- The data item on which the provider is resolved.
Return Value
- IEdgeStyle
- 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 bendsProvider on the given data item.
Resolves the bendsProvider on the given data item.
This method is called by updateBends. By default, it only delegates to getBends.
protected
Parameters
Return Value
- IEnumerable<Point>
- Returns the updated bends object.
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
- IEdgeStyle
- 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 edge-created event.
Triggers the edge-created event.
Triggers the edge-updated event.
Triggers the edge-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.
Updates the bends of the edge with the given dataItem by calling getUpdatedBends and updating the bends on the edge in the graph.
Updates the bends of the
edge with the given dataItem by calling getUpdatedBends and updating the bends on the edge in the graph.By default, this method only fires the edge-updated event.
To update other aspects of the edge instance, call the respective update methods when the edge is updated or overwrite this method.
// configure the EdgeCreator to update non-structural aspects
edgeCreator.addEventListener('edge-updated', (evt) => {
edgeCreator.updateBends(evt.graph, evt.item, evt.dataItem)
edgeCreator.updateLabels(evt.graph, evt.item, evt.dataItem)
edgeCreator.updateStyle(evt.graph, evt.item, evt.dataItem)
edgeCreator.updateTag(evt.graph, evt.item, evt.dataItem)
})Note that existing labels whose properties (e.g. text) may change have to be configured similarly.
Parameters
See Also
Can be used to update the labels of the edge that have been added with this EdgeCreator<TDataItem>.
Can be used to update the labels of the edge that have been added with this EdgeCreator<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 = edgeCreator.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 = edgeCreator.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 style of the edge with the given dataItem by calling getUpdatedStyle and applying the style to the edge in the graph.
Updates the style of the
edge with the given dataItem by calling getUpdatedStyle and applying the style to the edge in the graph.Updates the tag of the edge with the given dataItem by calling getUpdatedTag and setting the new tag on the edge.
Updates the tag of the
edge with the given dataItem by calling getUpdatedTag and setting the new tag on the edge.Events
Occurs when a edge has been created.
Occurs when a edge has been created.
Occurs when a edge has been updated.
Occurs when a edge has been updated.