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.
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
See Also
Developer's Guide
API
- getStyle
Methods
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): 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
The styleProvider is not evaluated by this method.
final
Parameters
This method determines the values to pass on to createEdgeCore.
Parameters
- graph: IGraph
- The graph to create the edge in.
- source: INode
- The source node.
- target: INode
- The target node.
- dataItem: TDataItem
- The data item from which the edge is created.
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): 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.
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): any
- A function that provides a collection of label data items from the edge 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 = 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
- graph: IGraph
- The managed graph.
- edge: IEdge
- The edge for which the new tag should be obtained.
- dataItem: TDataItem
- The data item that is used.
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
- graph: IGraph
- The managed graph.
- edge: IEdge
- The edge to update.
- dataItem: TDataItem
- The data item that is used.
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.
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
- graph: IGraph
- The graph that contains the edge.
- edge: IEdge
- The edge to update.
- dataItem: TDataItem
- The data item with which the edge should be updated.
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)
})Parameters
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.
Properties of
GraphBuilderItemEventArgs<IEdge, TDataItem>- dataItem: TDataItem
- Gets the object the item has been created from.
- item: TItem
- Gets the item that is the subject of the event.
See Also
API
- edge-updated
Occurs when a edge has been updated.
Occurs when a edge has been updated.
Properties of
GraphBuilderItemEventArgs<IEdge, TDataItem>- dataItem: TDataItem
- Gets the object the item has been created from.
- item: TItem
- Gets the item that is the subject of the event.
See Also
Developer's Guide
API
- edge-created