C

GraphSnapContext

Concrete SnapContext implementation which handles snapping movement for IGraph items.
Inheritance Hierarchy

Remarks

Snapping is enabled for IGraph items by setting an instance of this on the GraphEditorInputMode as snapContext.

This class provides a set of properties that determine the way snapping operations are being performed in the context of IGraphs.

IPositionHandler implementations and the like can retrieve instances of this class from the IInputModeContext.

Examples

Enabling snapping by setting the snap context
mode.snapContext = new GraphSnapContext()
Customizing the snap context
mode.snapContext = new GraphSnapContext({
  nodeDistance: 30,
  collectNodePairCenterSnapLines: true,
  collectNodePairSegmentSnapLines: false,
})
Retrieving a GraphSnapContext instance from the input mode context
const snapContext = inputModeContext.lookup(GraphSnapContext)
if (snapContext?.isInitializing) {
  // ...
}

See Also

Developer's Guide

API

GraphEditorInputMode, snapContext

Demos

Shows how to enable snapping (guide lines) for interactive changes.

Members

Show:

Constructors

Creates a new instance with default settings.

Parameters

Properties

Gets the items that were affected by the drag gesture.
Affected items were previously added using addNodeToBeMoved, addBendToBeMoved, addPortToBeMoved, and addLabelToBeMoved.
readonlyfinal
Gets or sets the grid constraint provider for the IBends.
final

Property Value

The bend grid constraint provider, or null if none is set.

Examples

Enabling grid snapping
const snapContext = new GraphSnapContext()

const gridInfo = new GridInfo(50, 50)
snapContext.nodeGridConstraintProvider = new GridConstraintProvider(
  gridInfo,
)
snapContext.bendGridConstraintProvider = new GridConstraintProvider(
  gridInfo,
)
snapContext.portGridConstraintProvider = new GridConstraintProvider(
  gridInfo,
)
snapContext.gridSnapType = GridSnapTypes.GRID_POINTS

graphEditorInputMode.snapContext = snapContext
Gets or sets whether this instance should collect snap references for fixed edge segments.
Gets or sets whether this instance will try to align the centers of adjacent nodes so that their centers are equally far away from each other.

Note that this will only make a difference for differently sized nodes.

By default this feature is turned off, so that the instance will try to distribute nodes evenly, so that there is the same spacing between their borders, not between their centers.

final

See Also

Developer's Guide
Gets or sets a value indicating whether this instance will collect pairs of adjacent nodes and add snapping logic so that moved edge segments will snap so that the distances to the adjacent nodes are equal.
final

Property Value

true if pairs of nodes should be collected for additional edge snap lines; false otherwise. The default is true

See Also

Developer's Guide
Gets or sets a value indicating whether this instance will collect pairs of adjacent nodes and add snapping logic so that moved nodes will snap so that the distances to the adjacent nodes are equal.
final

Property Value

true if pairs of nodes should be collected for additional snap lines; false otherwise. The default is true

See Also

Developer's Guide
Gets or sets whether this instance should collect the sizes of fixed nodes.
Gets or sets whether this instance should collect snap references for fixed nodes.
Gets or sets whether this instance should collect snap references for fixed ports.
Gets or sets whether this instance should collect snap lines in parallel to the edge path of the label owner at the distance of other edge labels in the graph.
The default is false.
final

Property Value

true if this instance should collect this kind of snap lines; false otherwise.

See Also

Developer's Guide
Gets or sets whether this instance should collect two snap lines in parallel to the edge path of the label owner at the initial distance of the edge label.
The default is true.
final

Property Value

true if this instance should collect this kind of snap lines; false otherwise.

See Also

Developer's Guide
Gets or sets whether this instance should collect snap lines in parallel to the edge path of the label owner at the distances of all edge labels of that owner.
The default is true.
final

Property Value

true if this instance should collect this kind of snap lines; false otherwise.

See Also

Developer's Guide
Gets or sets whether this instance should collect snap lines on the edge path.
The default is true.
final

Property Value

true if this instance should collect this kind of snap lines; false otherwise.

See Also

Developer's Guide
Gets or sets whether this instance should collect snap lines for the initial position of a label.
The default is true.
final

Property Value

true if this instance should collect snap lines for the initial position of a label; false otherwise.

See Also

Developer's Guide
Gets or sets whether this instance should collect snap lines in parallel to the border of the label owner at the distance of other node labels in the graph.

Note that the label snaps to these snap lines with the side that is closer to the node's border. That way, snapping to such a snap line preserves the perceived distance from the node border for both labels inside and outside the node bounds.

The default is false.

final

Property Value

true if this instance should collect this kind of snap lines; false otherwise.

See Also

Developer's Guide
Gets or sets whether this instance should collect four snap lines in parallel to the owner's borders at the initial label distance.

Note that the label snaps to these snap lines with the side that is closer to the node's border. That way, snapping to such a snap line preserves the perceived distance from the node border for both labels inside and outside the node bounds.

The default is true.

final

Property Value

true if this instance should collect snap lines through the border and center of the label owner; otherwise, false.

See Also

Developer's Guide
Gets or sets whether this instance should collect snap lines in parallel to the border of the label owner at the distance of other node labels of that owner.

Note that the label snaps to these snap lines with the side that is closer to the node's border. That way, snapping to such a snap line preserves the perceived distance from the node border for both labels inside and outside the node bounds.

The default is true.

final

Property Value

true if this instance should collect this kind of snap lines; false otherwise.

See Also

Developer's Guide
Gets or sets whether this instance should collect six snap lines, two through the center and four through the border sides of the label owner.
The default is true.
final

Property Value

true if this instance should collect snap lines through the border and center of the label owner; otherwise, false.

See Also

Developer's Guide
Gets or sets whether this instance should collect snap lines to the center of the owner port.
The default is true.
final

Property Value

true if this instance should collect snap lines through the center of the label owner; otherwise, false.

See Also

Developer's Guide
Gets or sets a value indicating whether to crop the orthogonal snap lines at obstacles.

Note that only croppable OrthogonalSnapLines are considered for cropping.

The default is true.

final

See Also

Developer's Guide
Gets the current input mode context.
protectedreadonlyfinal

Property Value

The current input mode context if this instance isInitialized or isInitializing, otherwise null.
Gets or sets the preferred distance between edges.

This will influence the creation of the segment snap lines. For each orthogonally oriented fixed segment there will be snap lines on the segment itself and to both sides of the segment at the specified distance.

The default is 0.0d which disables parallel snap lines.

final

See Also

Developer's Guide
Gets or sets a value indicating whether this SnapContext is enabled.
final

Property Value

true if enabled; false otherwise.

See Also

Developer's Guide
Gets the nodes that stay fixed for the current edit.
protectedreadonlyfinal

Property Value

The fixed nodes.
Gets or sets the GridSnapDistance.
The maximum distance between the current mouse coordinates and the coordinates to which the mouse will snap. The distance is interpreted in view coordinates.
final
Gets or sets which types of items IGridConstraintProvider<T> implementations should snap.

Additionally to this selection of item types, it is necessary to specify the corresponding IGridConstraintProvider<T>.

Note that items may still snap to other items or SnapReferences when the necessary result providers are registered, and they are included in the snappableItems.

The default is ALL.

conversionfinal

See Also

Developer's Guide
Gets or sets the type of the grid snapping that should be performed.
Determines which grid elements an object should snap to.
conversionfinal

Examples

Enabling grid snapping

const snapContext = new GraphSnapContext()

const gridInfo = new GridInfo(50, 50)
snapContext.nodeGridConstraintProvider = new GridConstraintProvider(
  gridInfo,
)
snapContext.bendGridConstraintProvider = new GridConstraintProvider(
  gridInfo,
)
snapContext.portGridConstraintProvider = new GridConstraintProvider(
  gridInfo,
)
snapContext.gridSnapType = GridSnapTypes.GRID_POINTS

graphEditorInputMode.snapContext = snapContext

Note that the grid visualization has to be enabled separately

graphComponent.renderTree.createElement(
  graphComponent.renderTree.backgroundGroup,
  gridInfo,
  new GridRenderer(),
)

See Also

API
nodeGridConstraintProvider, bendGridConstraintProvider, portGridConstraintProvider
Gets a value indicating whether the context is initialized.
The context is initialized between the calls to dragInitialized and dragFinished or cancelDrag.
readonlyfinal
Gets a value indicating whether this instance is currently initializing.
readonlyfinal

Property Value

true if this instance is initializing; false otherwise.

See Also

API
initialized, initializing, isInitialized
Gets or sets the preferred distance between node borders.

This will influence the creation of the node snap lines. For each fixed node there will be snap lines on the borders of the node itself and around the node at the specified distance.

The default is 0.0d which disables distant snap lines around the nodes.

final

See Also

Developer's Guide
Gets or sets the grid constraint provider for the INodes.
final

Property Value

The node grid constraint provider, or null if none is set.

Examples

Enabling grid snapping
const snapContext = new GraphSnapContext()

const gridInfo = new GridInfo(50, 50)
snapContext.nodeGridConstraintProvider = new GridConstraintProvider(
  gridInfo,
)
snapContext.bendGridConstraintProvider = new GridConstraintProvider(
  gridInfo,
)
snapContext.portGridConstraintProvider = new GridConstraintProvider(
  gridInfo,
)
snapContext.gridSnapType = GridSnapTypes.GRID_POINTS

graphEditorInputMode.snapContext = snapContext
Gets or sets the preferred distance between node borders and edge segments.

This will influence the creation of the node snap lines. For each fixed node there will be snap lines on the borders of the node itself and around the node at the specified distance to which orthogonal edge segments can snap.

The default is -1.0d which disables distant snap lines around the nodes for edge segments.

final

See Also

Developer's Guide
Gets the original location of the mouse at the time the gesture was initialized.
readonlyfinal

Property Value

The original location.

See Also

API
initializeDrag
Gets or sets the grid constraint provider for the IPorts.
final

Property Value

The port grid constraint provider, or null if none is set.

Examples

Enabling grid snapping
const snapContext = new GraphSnapContext()

const gridInfo = new GridInfo(50, 50)
snapContext.nodeGridConstraintProvider = new GridConstraintProvider(
  gridInfo,
)
snapContext.bendGridConstraintProvider = new GridConstraintProvider(
  gridInfo,
)
snapContext.portGridConstraintProvider = new GridConstraintProvider(
  gridInfo,
)
snapContext.gridSnapType = GridSnapTypes.GRID_POINTS

graphEditorInputMode.snapContext = snapContext
Gets or sets the global snap distance, which is the maximum distance between the current mouse coordinates and the coordinates to which the mouse will snap.

The distance is interpreted in view coordinates.

The default is 5.0d

final

See Also

API
snapDistance
Gets or sets the amount by which snap lines that are induced by existing edge segments and node borders are being extended.
The default is 40.0d, this value will be used to extend the ends of the snap lines.
final

See Also

Developer's Guide
Gets or sets which types of items snap result provider implementations should snap.

Note that items may still snap to the grid when the necessary IGridConstraintProvider<T> are registered, and they are included in the gridSnappableItems.

The default is NODE | ORTHOGONAL_SEGMENT | PORT_ADJACENT_SEGMENT | BEND_ADJACENT_SEGMENT | LABEL

conversionfinal

See Also

Developer's Guide
Gets the collection of snapReferences other than OrthogonalSnapLines.
This collection is only available if isInitialized is true. snappableItems should be used to determine if the moved item may be snapped to these references.
readonlyfinal
Gets the collection of SnapResults.
This collection is automatically updated during moving the mouse.
readonlyfinal
Gets or sets a value indicating whether to visualize the snap results.
final

Property Value

true if the results should be visualized, false otherwise.

See Also

API
createSnapResultsModelManager

Methods

Adds MovementInfo representing an IBend that will be considered for the next drag gesture.
The default IHandle of an IBend calls this method in its initializeDrag method so snap results are calculated when this bend is repositioned. Custom IHandle implementations can add infos created by getMovementInfo.

Parameters

info: MovementInfo
The MovementInfo representing the bend to be moved. Can be created with getMovementInfo.
Adds MovementInfo representing the end of an IEdge that will be considered for the next drag gesture.
The IHandle returned by the default IEdgePortHandleProvider of an IEdge calls this method in its initializeDrag method so snap results are calculated when reparenting this edge end. Custom IHandle implementations can call getMovementInfos and add the first or last MovementInfo of the returned list.

Parameters

info: MovementInfo
The MovementInfo representing the edge end to be reparented. Can be created with getMovementInfos.
sourceEnd: boolean
true if the info represents the source end of the edge.
Adds an item which will be reshaped.

Parameters

item: IModelItem
The item to be reshaped.
Adds MovementInfo representing an ILabel that will be considered for the next drag gesture.
The default LabelPositionHandler calls this method in its initializeDrag method so snap results are calculated for this label. Custom LabelPositionHandler implementations can add infos created by getMovementInfo.

Parameters

info: MovementInfo
The MovementInfo representing the label to be moved. Can be created with getMovementInfo.
Adds MovementInfo representing an INode that will be considered for the next drag gesture.
The default IPositionHandler of an INode calls this method in its initializeDrag method so snap results are calculated when this node is repositioned. Custom IPositionHandler implementations can add infos created by getMovementInfo.

Parameters

info: MovementInfo
The MovementInfo representing the node to be moved. Can be created with getMovementInfo.
Adds an orthogonally moved segment to this context for which this instance will automatically collect SnapResults and provide a default visualization.

Parameters

start: MovementInfo
The starting point of the manipulated segment.
end: MovementInfo
The end point of the manipulated segment.
Adds MovementInfo representing an IPort that will be considered for the next drag gesture.
The default IHandle of an IPort calls this method in its initializeDrag method so snap results are calculated for this port. Custom IHandle implementations can add infos created by getMovementInfo.

Parameters

info: MovementInfo
The MovementInfo representing the port to be moved. Can be created with getMovementInfo.
Adds an entry for the same-height-snapping.
During initialization, this method can be used to register entries that can later be retrieved using the SnapSize. The rectangle will be used to obtain the height value and will also be used for the visualization of the snap result.

Parameters

rectangle: Rect
The rectangle to obtain the height value from. This rectangle will be used for the snap result visualization.

See Also

API
addSameWidthEntry
Adds an entry for the same-width-snapping.
During initialization, this method can be used to register entries that can later be retrieved using the SnapSize. The rectangle will be used to obtain the width value and will also be used for the visualization of the snap result.

Parameters

rectangle: Rect
The rectangle to obtain the width value from. This rectangle will be used for the snap result visualization.

See Also

API
addSameHeightEntry
Called when a drag has been canceled.
Clears all temporary lists and sets isInitialized back to false, as well as performs cleanUp and finally triggers the cleaned-up event.
Disposes of all previously temporarily collected state and clears the snapResults collection.
Subclasses should make sure to call the base implementation as their last operation.
protected
Collects the SnapReferences for the nodes which are not moving.
Delegates to the ISnapReferenceProvider implementation in the lookup of the INode.
protected

Parameters

evt: CollectSnapReferencesEventArgs
The CollectSnapReferencesEventArgs required for adding snap references.
Collects the SnapReferences for the ports which are not moving.
Delegates to the ISnapReferenceProvider implementation in the lookup of the IPort.
protected

Parameters

evt: CollectSnapReferencesEventArgs
The CollectSnapReferencesEventArgs required for adding snap references.
Collects snap references for edge segments.
Delegates to the ISnapReferenceProvider implementation in the lookup of the IEdge. This implementation should then make use of getMovementInfos to determine what segments are fixed.
protected

Parameters

evt: CollectSnapReferencesEventArgs
The CollectSnapReferencesEventArgs required for adding snap references.
Collects SnapGrids for bends, ports, and nodes if the corresponding bendGridConstraintProvider, portGridConstraintProvider, or nodeGridConstraintProvider are set.
protected

Parameters

evt: CollectSnapReferencesEventArgs
The CollectSnapReferencesEventArgs required for adding snap references.

See Also

Developer's Guide
Collects all node widths and heights in collections used by the SnapSize.
This method will only be called if collectNodeSizes is enabled and delegates to addSameHeightEntry and addSameWidthEntry.
protected
Collects first the entries with same size and then SnapSize for snapping to the width and height of these sizes.
protected

Parameters

evt: CollectSnapReferencesEventArgs
The CollectSnapReferencesEventArgs required for adding snap references.
Finds pairs of nodes that are visually adjacent to create center and same distance snap lines.
protected

Parameters

evt: CollectSnapReferencesEventArgs
The CollectSnapReferencesEventArgs required for adding snap references.
Helper method used by createSnapResultsModelManager to create the IObjectRenderer<SnapResult> for the SnapResult type.

Return Value

IObjectRenderer<SnapResult>
An instance that can install SnapResults in a CanvasComponent.
Helper method that creates a CollectionModelManager<T> that can be used to present the current SnapResults in the provided CanvasComponent.

Parameters

canvasComponent: CanvasComponent
The control to initialize the CollectionModelManager<T> with.

Return Value

CollectionModelManager<SnapResult>
The model manager that manages the visual representation of the SnapResults.
Called when a drag has been successfully finished.
Clears all temporary lists and sets isInitialized back to false. Also the cleanUp method is invoked and the cleaned-up event is triggered.

Parameters

newLocation: Point
The current mouse location.
snappingDisabled: boolean
If set to true snapping is temporarily disabled. This will remove the snap reference visualizations and return the unchanged coordinates.

Return Value

Point
The adjusted coordinates or the unchanged coordinates if snapping has been temporarily disabled by setting snappingDisabled to true.
This method needs to be called by the client IInputMode that initialized this instance after it has performed the actual move operation with the adjusted coordinates after a call to handleMove.
Most of the client code implementations will just call this method with the exact location returned by handleMove. This method does not need to be called if snapping has been temporarily disabled by calling handleMove with its snappingDisabled parameter set to true.

Parameters

mouseLocation: Point
The actual mouse location.
finalLocation: Point
The final snap location that has been used by the client code for the move.
Collects a list of snap lines.
This method has been overridden to collect the snap lines for all fixed graph elements and crop them after collection.

See Also

API
onCollectSnapReferences, cropSnapLines
Gets the movement info for the given bend.
This is either the info passed to addBendToBeMoved or a dynamically created instance if no specific one had been registered.

Parameters

bend: IBend
The bend to obtain the info for.

Return Value

MovementInfo
An instance of MovementInfo that describes the movement of the bend.
Gets the movement info for the given node.
This is either the info passed to addNodeToBeMoved or another, dynamically created instance, if no specific one had been registered.

Parameters

node: INode
The node to obtain the info for.

Return Value

MovementInfo
An instance of MovementInfo that describes the movement of the node.
Gets the movement info for the given label.
This is either the info passed to addLabelToBeMoved or another, dynamically created instance, if no specific one had been registered.

Parameters

label: ILabel
The node to obtain the info for.

Return Value

MovementInfo
An instance of MovementInfo that describes the movement of the node.
Gets the movement info for the given port.
This is either the info passed to addNodeToBeMoved or another, dynamically created instance, if no specific one had been registered.

Parameters

port: IPort
The port to obtain the info for.

Return Value

MovementInfo
An instance of MovementInfo that describes the movement of the port.
Gets the MovementInfo for the provided edge.
The result describes the shape of the edge and the reshaping behavior of the geometry. The first element in the enumerable is the source end of the edge, followed by bend-like elements and the target side. Note that it cannot in general be assumed movedItem of the first and last element is either a IPort or IEdge, also items in between may not necessarily be bound to IBends and therefore their movedItem can be of a different type than IBend.

Parameters

edge: IEdge
The edge to obtain the movement information of.

Return Value

IListEnumerable<MovementInfo>
An IListEnumerable<T> of MovementInfo items that describe the geometry of the edge being modified.
Handles a move.
This method returns the adjusted (mouse) coordinates. It also manages the collection of SnapResults. If snapping should be temporarily (for a mouse move) disabled, snappingDisabled has to be set to true.

Parameters

newLocation: Point
The current mouse location.
snappingDisabled: boolean
If set to true, snapping is temporarily disabled. This will remove the snap reference visualizations and return the unchanged coordinates.

Return Value

Point
The adjusted coordinates or the unchanged coordinates if snapping has been temporarily disabled by setting snappingDisabled to true.
Called by IInputMode implementations when an interactive drag is started.
Initializes the list of nodes to be moved. Called by the wrapping position handler on initialization of a drag action.

Parameters

context: IInputModeContext
The context in which the interactive drag is started.
originalLocation: Point
The original location of the mouse.

Throws

Exception ({ name: 'InvalidOperationError' })
If this context is already initialized.
Raises the cleanUp event.
protected

Parameters

evt: InputModeEventArgs
The InputModeEventArgs instance containing the event data.
Raises the collect-snap-references event.
protected

Parameters

evt: CollectSnapReferencesEventArgs
The CollectSnapReferencesEventArgs instance containing the event data.
Raises the collect-snap-results event.
protected

Parameters

evt: CollectSnapResultsEventArgs
The CollectSnapResultsEventArgs instance containing the event data.
Raises the initialized event.
protected

Parameters

evt: InputModeEventArgs
The InputModeEventArgs instance containing the event data.
Raises the initializing event.
protected

Parameters

evt: InputModeEventArgs
The InputModeEventArgs instance containing the event data.
Chooses the current SnapResults from a temporary list.
Chooses from a list of possible results the most important ones. Also maintains the collection of snap results.
protected

Parameters

snapResults: List<SnapResult>
A temporary list of suggested SnapResults.
originalLocation: Point
The point in world coordinates where the mouse move started.
newLocation: Point
The current mouse location.

Return Value

Point
The adjusted coordinates.
Helper method that wraps the given context so that a lookup query on the wrapped context for the SnapContext type yields this instance.

Parameters

context: IInputModeContext
The context to wrap and delegate all calls to.

Return Value

IInputModeContext
A modified instance that yields this instance if it is queried for the SnapContext type.

Events

Occurs when this instance has been cleaned up.

Properties of

InputModeEventArgs
context: IInputModeContext
Gets the context for the current event.

See Also

API
cleanUp
Occurs every time this instance has been initialized to collect OrthogonalSnapLines.
Event handlers should add snap lines to the caller using the methods provided by CollectSnapReferencesEventArgs.
context: IInputModeContext
Gets the context for the current event.

See Also

Developer's Guide
Occurs while moving items and handles.

The moving model items must register for this event, preferably in the initializeDrag method of the IDragHandler.

The event handler has to add SnapResults for the moving object to the list. The IDragHandlers of the moved items have to take care themselves whether to add a handler to the list depending on their settings.

context: IInputModeContext
Gets the context for the current event.
delta: Point
Gets the vector by which the mouse has been moved since initialization of the snapping process.
gridSnapDistance: number
Gets the zoom invariant grid snap distance.
newLocation: Point
Gets the new (current) location of the mouse that is going to be manipulated by the snapping process.
originalLocation: Point
Gets the original location of the mouse at the beginning of the gesture.
snapDistance: number
Gets the zoom invariant snap distance.
Occurs when this instance has been initialized.

Properties of

InputModeEventArgs
context: IInputModeContext
Gets the context for the current event.

See Also

API
initializeDrag
Occurs when this instance is about to be initialized.

Properties of

InputModeEventArgs
context: IInputModeContext
Gets the context for the current event.

See Also

API
initializeDrag