This implementation deals with the proper firing of events and handling of default values.
This implementation has inherent support for undoability. If the undoEngineEnabled property is set to true, changes to the structure of the graph will automatically be recorded using the UndoEngine instance that can be queried from this instance's lookup method. Clients that wish to enqueue custom undo events or that need to make non-structural changes to the graph can use the UndoEngine to do so. The current instance of UndoEngine can be queried using the lookup method of this instance. Also there are several protected methods Create...UndoUnit that will be used by this instance to create the actual undo units for structural changes in the graph's structure. If clients need to customize these units they can create a subclass of Graph and override these methods.
Finally this implementation supports grouped graphs.
The settings that are obtained from the instance influence newly created elements only. Setting different defaults afterward does not influence existing elements.
This is a live view of the edges that always represents the current state of the graph. The same reference will be returned for each invocation.
Note that even though edges can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the edges in your own list, if possible. This is not necessary for the first or last element or when iterating over the edges via a foreach loop.
The settings that are obtained from the instance influence newly created elements only. Setting different defaults afterwards does not influence existing elements.
Gets a view of the labels contained in this graph.
This is a live view of the labels that always represents the current state of the graph. The same reference will be returned for each invocation.
Note that even though labels can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the labels in your own list, if possible. This is not necessary for the first or last element or when iterating over the labels via a foreach loop.
The settings that are obtained from the instance influence newly created elements only. Setting different defaults afterwards does not influence existing elements.
This is a live view of the nodes that always represents the current state of the graph. The same reference will be returned for each invocation.
Note that even though nodes can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the nodes in your own list, if possible. This is not necessary for the first or last element or when iterating over the nodes via a foreach loop.
This is a live view of the ports that always represents the current state of the graph. The same reference will be returned for each invocation.
Note that even though ports can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the ports in your own list, if possible. This is not necessary for the first or last element or when iterating over the ports via a foreach loop.
Gets or sets the tag object associated with this item instance.
The tag is an optional user-defined object which can be used to store arbitrary data related to this item. The item itself just provides the storage for the object.
Gets or sets whether the UndoEngine used for this instance should be enabled.
The default is false. In order to enable undoability for this instance, set this property to true and lookup the UndoEngine type. Disabling this property clears and removes the current UndoEngine (and all enqueued IUndoUnits).
The coordinates to use for the newly created bend. To change the location after the bend has been added, use setBendLocation.
index?: number
The index for the newly added bend; A negative value (which is the default) indicates that the bend should be appended to the end of the list of bends.
The label model parameter instance to use. If omitted the default parameter will be set. To change the parameter after the label has been added, use setLabelLayoutParameter.
The initial values to use for the preferredSize. If omitted size will be determined automatically. To change the preferred size after the label has been added, use setLabelPreferredSize.
This will resize the group node bounds such that the node requires the least amount of space. If the node does not have any children, its bounds will be left unchanged. This will also respect any INodeSizeConstraintProviders for INodes that are available in the lookup of the groupNode.
// create a group nodeconst group = graph.createGroupNode()// add some child nodesgraph.createNode(group, new Rect(10, 10, 30, 30))graph.createNode(group, new Rect(50, 10, 30, 30))graph.createNode(group, new Rect(50, 50, 30, 30))// adjust the group node's layout to include all its childrengraph.adjustGroupNodeLayout(group)
AdjustGroupNodeLayout only affects the node it is called for. To properly adjust all of its ancestors, too, one has to adjust all of them from the given node to the root:
for (const nodeToAdjust of graph.groupingSupport.getAncestors( innermostGroup,)) { graph.adjustGroupNodeLayout(nodeToAdjust)}
This implementation uses the style's renderer for the label to determine the preferred rendering size. This is useful after the label's content or style have been changed.
For more control over how to apply a layout use LayoutExecutor.
This method is not available unless the module view-layout-bridge is loaded. Either load the module 'view-layout-bridge' explicitly or ensure that the LayoutExecutor type is available at runtime.
This method can be used to bracket several undo units. All edits added to the queue after this call and before a call to cancel or commit will be placed into the queue as a single block.
Client code needs to make sure that either the cancel or commit method is called on the returned instance.
This method uses the IMementoSupport returned by the provider to record the state of an item at the beginning of the edit and when commit is called to create an IUndoUnit that can revert the item to the recorded state and back. If no provider is given, this method uses the IMementoSupport returned by the lookup implementation of the items to record the state of an item at the beginning of the edit and when commit is called to create an IUndoUnit that can revert the item to the recorded state and back.
Calling this method will immediately enqueue an IUndoUnit into the undo queue. Subsequent additions to the queue will be added after the created instance, even if they are added to the queue before the commit method has been called.
Parameters
undoName: string
The undoName of the IUndoUnit that will be placed into the undo queue after commit has been called.
redoName: string
The redoName of the IUndoUnit that will be placed into the undo queue after commit has been called.
An implementation of the ICompoundEdit interface whose commit or cancel methods need to be called after the items have been modified.
Examples
The following is an example implementation of an item that is being managed using IMementoSupport:
A sample business object that implements ILookup to return IMementoSupport
class Employee extends BaseClass<ILookup>(ILookup) implements ILookup { _name: string position: string age: number constructor(name: string, position: string, age: number) { super() this._name = name this.position = position this.age = age } get name(): string { return this._name } // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint lookup<T extends any>(type: Constructor<any>): T | null { if (type === IMementoSupport) { return new EmployeeMementoSupport() as T } return null }}
A collection of items from this type can then be watched using the following code snippet:
Using an ICompoundEdit
const edit = graph.beginEdit( undoName, redoName, listWithMyEmployeesToWatch,)// changes to the employees are done hereif (!success) { // if we don't want the changes to be done after all, then we need to cancel the edit edit.cancel()}
Alternatively, when using a specific provider, consider the following examples. The following is an example implementation of an item that is being managed using IMementoSupport:
A sample business object
class SimpleEmployee { private readonly _name: string position: string age: number constructor(name: string, position: string, age: number) { this._name = name this.position = position this.age = age } get name(): string { return this._name }}
A collection of items from this type can then be watched using the following code snippet, using the provider to return an appropriate IMementoSupport implementation:
Using an ICompoundEdit
const edit = graph.beginEdit( undoName, redoName, listWithMyEmployeesToWatch, (item) => new EmployeeMementoSupport(),)// changes to the employees are done hereif (!success) { // if we don't want the changes to be done after all, then we need to cancel the edit edit.cancel()}
Implementing the IMementoSupport interface is quite unrestrained, the type of the state returned by getState method can by anything as long as the applyState and stateEquals methods can deal with it:
Sample implementation of IMementoSupport
class EmployeeMementoSupport extends BaseClass<IMementoSupport>(IMementoSupport) implements IMementoSupport{ getState(subject: any): EmployeeState | null { if (subject instanceof Employee) { return new EmployeeState(subject.position, subject.age) } return null } applyState(subject: any, state: any): void { if (subject instanceof Employee && state instanceof EmployeeState) { subject.position = state.position subject.age = state.age } } stateEquals(state1: any, state2: any): boolean { if ( state1 instanceof EmployeeState && state2 instanceof EmployeeState ) { return ( state1.position === state2.position && state1.age === state2.age ) } return state1 === state2 }}class EmployeeState { _position: string _age: number constructor(position: string, age: number) { this._position = position this._age = age } get position(): string { return this._position } get age(): number { return this._age }}
In summary, use this concept when you want to track the state of items during certain operations for undo/redo. This is efficient if it's easier to handle an item's state than the changes to the item themselves. If you want to focus on the changes or on certain events, you should use custom IUndoUnit
The generic type arguments of the created layout data are compatible with instances of IGraph, but the layout data is not bound to a specific graph instance. Therefore, the created layout data still has to be passed as an argument of applyLayout in order to be applied.
This method is not available unless the module view-layout-bridge is loaded. Either load the module 'view-layout-bridge' explicitly or ensure that the LayoutExecutor type is available at runtime.
Either a location model parameter that matches the location, or the default parameter to use for the IPortOwner as returned by getLocationParameterInstance.
Creates and returns an edge that connects to the given node instances using the given style instance.
The nodes must be part of this graph at the time of the invocation, and the implementation will choose the IPort instances to which the edge will be connected. The edge will be a part of this graph after the method returns. This will trigger the corresponding events.
Creates and returns an edge that connects to the given port instances.
The ports must be part of this graph at the time of the invocation. The edge will be a part of this graph after the method returns. This will trigger the corresponding events.
The style instance that will be assigned to the newly created instance. This is done by reference. If omitted the default style will be set. To change the style after the edge has been created, use setStyle.
tag?: IEdge['tag']
The initial value of the tag that will be assigned to the new edge.
The generic type arguments of the created layout data are compatible with instances of IGraph, but the layout data is not bound to a specific graph instance. Therefore, the created layout data still has to be passed as an argument of applyLayout in order to be applied.
This method is not available unless the module view-layout-bridge is loaded. Either load the module 'view-layout-bridge' explicitly or ensure that the LayoutExecutor type is available at runtime.
The node to use as the parent in the grouping hierarchy or null if the new node should become a top-level node. To change the parent after the group node has been created, use setParent.
The initial layout to use for the new node. If omitted the node will be placed with its top left corner at 0,0 and the default size. To change the layout after the group node has been created, use setNodeLayout.
The layout to use initially. The values will be copied to the node's layout field. To change the layout after the node has been created, use setNodeLayout.
The style instance that will be assigned to the newly created instance. This is done by reference. If omitted the default style will be set. To change the style after the node has been added, use setStyle.
tag?: INode['tag']
The initial value of the tag that will be assigned to the new node.
The node to use as the parent in the grouping hierarchy or null if the new node should become a top-level node. To change the parent after the group node has been created, use setParent.
The layout to use initially. The values will be copied to the node's layout field. If omitted the default size will be set and the node's top left corner will be placed at 0,0. To change the layout after the group node has been created, use setNodeLayout.
Returns an IListEnumerable<T> for the incoming, the outgoing, or all edges adjacent to the given port, depending on type.
If the given type is ALL, adjacent self-loops will appear twice in the returned enumerable. For INCOMING or OUTGOING, self-loops will only appear once.
Note that even though edges can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases, it is recommended to store the edges in your own list, if possible. This is not necessary for the first or last element or when iterating over the adjacent edges via a foreach loop.
Returns an IListEnumerable<T> for the incoming, the outgoing, or all edges adjacent to the given port owner, depending on type.
If the given type is ALL, adjacent self-loops will appear twice in the returned enumerable. For INCOMING or OUTGOING, self-loops will only appear once.
Note that even though edges can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases, it is recommended to store the edges in your own list, if possible. This is not necessary for the first or last element or when iterating over the adjacent edges via a foreach loop.
Groups the nodes in children into the provided group node.
The parent needs to be a group node at the time of the invocation. This operation is basically the same as calling setParent for each node in children whose parent is not part of the set.How to create add multiple children to a group node
// create some nodesconst children = []for (let i = 0; i < 5; i++) { children.push(graph.createNode())}// create a group nodeconst parent = graph.createGroupNode()// add the nodes as children to the groupgraph.groupNodes(parent, children)// adjust the group node's layout to include all its childrengraph.adjustGroupNodeLayout(parent)
Groups the nodes in children into a newly created group node.
The group node will be created at the common ancestor level of all nodes in children.How to create a new group node with multiple children
// create some nodesconst children = []for (let i = 0; i < 5; i++) { children.push(graph.createNode())}// create a group node and add the given nodes as childrenconst group = graph.groupNodes(children)// adjust the group node's layout to include all its childrengraph.adjustGroupNodeLayout(group)
Note that even though edges can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the edges in your own list, if possible. This is not necessary for the first or last element or when iterating over the incoming edges via a foreach loop.
Note that even though edges can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the edges in your own list, if possible. This is not necessary for the first or last element or when iterating over the incoming edges via a foreach loop.
Clients can call this method to force an invalidation of the displays that show this graph instance. This implementation delegates to onInvalidateDisplays.
Returns an instance that provides another aspect of this instance of the given type or null.
Typically, this method will be called in order to obtain a different view or aspect of the current instance. This is quite similar to casting or using a super type or interface of this instance, but is not limited to inheritance or compile-time constraints. This method is not required to return non-null implementations for the types, nor does it have to return the same instance any time. Also, it depends on the type and context whether the instance returned stays up to date or needs to be re-obtained for subsequent use.
Note that even though edges can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the edges in your own list, if possible. This is not necessary for the first or last element or when iterating over the outgoing edges via a foreach loop.
Note that even though edges can be accessed via index, the underlying graph structure in the default IGraph implementation is a linked list and indexed access can be slow. In those cases it is recommended to store the edges in your own list, if possible. This is not necessary for the first or last element or when iterating over the outgoing edges via a foreach loop.
If the item is a node, the node-removed event will be triggered. This will remove all adjacent edges and their corresponding ports in proper order before the node will be removed. Also, this will trigger the removal of all labels owned by this instance.
If the item is an edge, the edge-removed event will be triggered. Also, this will trigger the removal of all labels and bends owned by this instance. An implementation may decide to remove the corresponding ports from the node if no other edge connects to them after the given edge has been removed. The implementations provided by yFiles do so according to the value set to autoCleanUp in their IPortDefaults.
If the item is a bend, the bend-removed event will be triggered.
If the item is a port, the port-removed event will be triggered. This will also remove all edges that are currently connected to the port and all labels and bends owned by this instance.
Sets the ports of the given edge to the new values.
This will trigger an edge-ports-changed event if source or target ports differ from the current ones. Both ports and the edge must belong to the current graph instance. If autoCleanUp is enabled, this method will remove unoccupied ports after they have been changed.
Use null as parent to make node a top-level node for this graph.
This method does not move or enlarge the parent to enclose its new node. Developers have to take care to adjust the node layout after grouping, e.g. by calling adjustGroupNodeLayout.
If parent is not a group node before the call it will be converted into one.
Tries to set the absolute coordinates of the given port to the given values.
For full control over the placement of the ports, the setPortLocationParameter method should be used instead. This implementation will use the port's locationParameter's model to obtain a new IPortLocationModelParameter via the createParameter method. This might result in the port using a different location, because the model might not support parameters that result in the given location. This will also trigger an invalidateDisplays call.
Styles are automatically converted between WebGL and SVG rendering modes. Due to differences in feature sets, conversion may not be exact. For better control, apply styles specific to the rendering mode or use a WebGLEdgeStyleDecorator style when switching render modes.
Occurs when a bend has been added to an edge in this graph.
This event is intended to provide notification of low level changes in the graph structure. Please use the bend-created event if you are interested only in bend creation events that result from user interaction.
Occurs when a bend has been removed from an edge in this graph.
This event will be triggered, too, if an edge has been removed from the graph, for each of the bends that belonged to the edge.
This event is intended to provide notification of low level changes in the graph structure. Please use the deleted-item event if you are interested only in bend removal events that result from user interaction.
This event is intended to provide notification of low level changes in the graph structure. Please use the edge-created event if you are interested only in edge creation events that result from user interaction.
This event will be triggered, too, prior to a node removal.
This event is intended to provide notification of low level changes in the graph structure. Please use the deleted-item event if you are interested only in edge removal events that result from user interaction.
Occurs when a label has been added to this graph instance.
This event is intended to provide notification of low level changes in the graph structure. Please use the label-added event if you are interested only in label creation events that result from user interaction.
Occurs when a label has been removed from this graph instance.
This event will also be triggered, prior to the removal of the owner of the label.
This event is intended to provide notification of low level changes in the graph structure. Please use the deleted-item event if you are interested only in label removal events that result from user interaction.
This event is intended to provide notification of low level changes in the graph structure. Please use the node-created event if you are interested only in node creation events that result from user interaction.
This event is intended to provide notification of low level changes in the graph structure. Please use the deleted-item event if you are interested only in node removal events that result from user interaction.
Occurs when a port has been removed from its owner.
This event will also be triggered prior to the removal of the corresponding owner of the port.
This event is intended to provide notification of low level changes in the graph structure. Please use the deleted-item event if you are interested only in port removal events that result from user interaction.