This class can be used to create and update IEdges based on data items.
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.
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()
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)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)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.EdgeCreator
See Also
Constructors
Creates a new creator for edges.
Parameters
A map of options to pass to the method.
- defaults - IEdgeDefaults
A set of IEdgeDefaults that will be used for the edges and edge labels. This option sets the defaults property on the created object.
- styleBindings - ObjectBindings<TDataItem>
An optional set of bindings that will be applied to the edge's style. This option sets the styleBindings property on the created object.
- style - function(TDataItem):IEdgeStyle
An optional provider of an IEdgeStyle instance that will be used as the edge's style for the source data item. This option sets the styleProvider property on the created object.
Signature Details
function(dataItem: TDataItem) : IEdgeStyleA 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 edge's tag for the source data item. This option sets the tagProvider property on the created object.
- bends - function(TDataItem):IEnumerable<Point>
An optional provider of an object that will be used as the edge's bends locations for the source data item. This option sets the bendsProvider property on the created object.
Signature Details
function(dataItem: TDataItem) : IEnumerable<Point>A callback that provides an instance of typeTValuefor the givendataItem.Parameters
- dataItem - TDataItem
- The data item for which a value shall be provided.
Returns
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.
Signature Details
function(dataItem: TDataItem) : IEnumerable<Point>
TValue for the given dataItem.Parameters
- dataItem - TDataItem
- The data item for which a value shall be provided.
Returns
See Also
Gets or sets a set of IEdgeDefaults that will be used for the edges and edge labels.
Remarks
GraphBuilders, e.g. GraphBuilder, cascade with the defaults of the GraphBuilder's graph.See Also
Gets or sets an optional set of bindings that will be applied to the edge'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 IEdgeStyle instance that will be used as the edge's style for the source data item.
Remarks
Signature Details
function(dataItem: TDataItem) : IEdgeStyle
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 edge'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 styleBindings against the given dataItem and applies them to the given edge style.
Remarks
Parameters
A map of options to pass to the method.
Creates an edge 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 edge in.
- source - INode
- The source node.
- target - INode
- The target node.
- dataItem - TDataItem
- The data item from which the edge is created.
Returns
- ↪IEdge
- The newly created edge.
Examples
const edgeCreator = new EdgeCreator()
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)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.
Creates a binding for labels that will be added to edges created by this instance.
Remarks
text. Note that the item type of the returned LabelCreator<TDataItem> is the same as for this EdgeCreator<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.
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({
icon: edgeObject.imageUrl,
iconSize: new Size(16, 16),
iconPlacement: ExteriorLabelModel.WEST
})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 edges 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 edge 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 = 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.
Parameters
A map of options to pass to the method.
- dataItem - TDataItem
- The data item on which the provider is resolved.
Returns
- ↪IEnumerable<Point>
- The value to use or
nullin case no bend locations are given.
See Also
Obtains an IEdgeStyle 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
- ↪IEdgeStyle
- 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 bendsProvider on the given data item.
Remarks
Parameters
A map of options to pass to the method.
- 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.
Returns
- ↪IEnumerable<Point>
- Returns the updated bends object.
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.
- edge - IEdge
- The edge to update.
- dataItem - TDataItem
- The data item that is used.
Returns
- ↪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.
Triggers the EdgeCreated event.
Triggers the EdgeUpdated 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 edge.
Remarks
By default, this method only fires the EdgeUpdated 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.addEdgeUpdatedListener((sender, 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
A map of options to pass to the method.
- 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>.
Remarks
// configure the LabelCreators to update non-structural aspects
const labelCreator1 = edgeCreator.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 = edgeCreator.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 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.
Events
Occurs when a edge has been created.
See Also
Event Registration
addEdgeCreatedListener(function(this, GraphBuilderItemEventArgs<IEdge,TDataItem>):void)Event Deregistration
removeEdgeCreatedListener(function(this, GraphBuilderItemEventArgs<IEdge,TDataItem>):void)Signature Details
function(sender: this, evt: GraphBuilderItemEventArgs<IEdge,TDataItem>)
Parameters
- sender - this
- The source of the event.
- evt - GraphBuilderItemEventArgs<IEdge,TDataItem>
- An object that contains the event data.
Occurs when a edge has been updated.
See Also
Event Registration
addEdgeUpdatedListener(function(this, GraphBuilderItemEventArgs<IEdge,TDataItem>):void)Event Deregistration
removeEdgeUpdatedListener(function(this, GraphBuilderItemEventArgs<IEdge,TDataItem>):void)Signature Details
function(sender: this, evt: GraphBuilderItemEventArgs<IEdge,TDataItem>)
Parameters
- sender - this
- The source of the event.
- evt - GraphBuilderItemEventArgs<IEdge,TDataItem>
- An object that contains the event data.