Concrete SnapContext implementation which handles snapping movement for IGraph items.
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
mode.snapContext = new GraphSnapContext()mode.snapContext = new GraphSnapContext({
nodeToNodeDistance: 30,
collectNodePairCenterSnapLines: true,
collectNodePairSegmentSnapLines: false
})const snapContext = inputModeContext.lookup(GraphSnapContext.$class)
if (snapContext && snapContext.isInitializing) {
// ...
}const snapContext = inputModeContext.lookup(
GraphSnapContext.$class
) as GraphSnapContext
if (snapContext && snapContext.isInitializing) {
// ...
}Related Programming Samples
- Snapping
- Shows how to enable snapping (guide lines) for interactive changes.
Type Details
- yfiles module
- view-component
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.input.GraphSnapContext
See Also
Constructors
Creates a new instance with default settings.
Parameters
A map of options to pass to the method.
- collectEdgeSnapLines - boolean
Whether this instance should collect fixed snap lines for edge segments. This option sets the collectEdgeSnapLines property on the created object.
- collectNodeSizes - boolean
Whether this instance should collect the sizes of fixed nodes. This option sets the collectNodeSizes property on the created object.
- collectNodeSnapLines - boolean
Whether this instance should collect fixed snap lines for nodes. This option sets the collectNodeSnapLines property on the created object.
- collectPortSnapLines - boolean
Whether this instance should collect fixed snap lines for ports. This option sets the collectPortSnapLines property on the created object.
- snapBendAdjacentSegments - boolean
Whether this context will automatically snap the movements of bends so that the two adjacent segments become horizontally or vertically oriented. This option sets the snapBendAdjacentSegments property on the created object.
- snapPortAdjacentSegments - boolean
Whether this context will automatically snap the movements of nodes so that the first and last segments of edges become orthogonal. This option sets the snapPortAdjacentSegments property on the created object.
- snapSegmentsToSnapLines - boolean
Whether this context will automatically snap orthogonal edge segments to snap lines. This option sets the snapSegmentsToSnapLines property on the created object.
- snapBendsToSnapLines - boolean
Whether this context will automatically snap the bends to snap lines. This option sets the snapBendsToSnapLines property on the created object.
- snapNodesToSnapLines - boolean
Whether INodeSnapResultProvider implementations should snap nodes to snap lines. This option sets the snapNodesToSnapLines property on the created object.
- nodeToNodeDistance - number
The preferred distance between node borders. This option sets the nodeToNodeDistance property on the created object.
- nodeToEdgeDistance - number
The preferred distance between node borders and edge segments. This option sets the nodeToEdgeDistance property on the created object.
- edgeToEdgeDistance - number
The preferred distance between edges. This option sets the edgeToEdgeDistance property on the created object.
- snapOrthogonalMovement - boolean
Whether this context will automatically snap the movement in such a way that the overall move gesture is constrained to the horizontal or vertical axis. This option sets the snapOrthogonalMovement property on the created object.
- collectNodePairCenterSnapLines - boolean
Whether this instance will try to align the centers of adjacent nodes so that their centers are equally far away from each other. This option sets the collectNodePairCenterSnapLines property on the created object.
- collectNodePairSnapLines - boolean
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. This option sets the collectNodePairSnapLines property on the created object.
- collectNodePairSegmentSnapLines - boolean
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. This option sets the collectNodePairSegmentSnapLines property on the created object.
- nodeGridConstraintProvider - IGridConstraintProvider<INode>
The grid constraint provider for the INodes. This option sets the nodeGridConstraintProvider property on the created object.
- bendGridConstraintProvider - IGridConstraintProvider<IBend>
The grid constraint provider for the IBends. This option sets the bendGridConstraintProvider property on the created object.
- portGridConstraintProvider - IGridConstraintProvider<IPort>
The grid constraint provider for the IPorts. This option sets the portGridConstraintProvider property on the created object.
- snapLineExtension - number
The amount by which snap lines that are induced by existing edge segments and node borders are being extended. This option sets the snapLineExtension property on the created object.
- cropSnapLines - boolean
A value indicating whether to crop the snap lines at obstacles. This option sets the cropSnapLines property on the created object.
- visualizeSnapResults - boolean
A value indicating whether to visualize the snap results. This option sets the visualizeSnapResults property on the created object.
- snapDistance - number
The global snap distance, which is the maximum distance between the current mouse coordinates and the coordinates to which the mouse will snap. This option sets the snapDistance property on the created object.
- gridSnapType - GridSnapTypes
The type of the grid snapping that should be performed. This option sets the gridSnapType property on the created object.
- gridSnapDistance - number
The GridSnapDistance. This option sets the gridSnapDistance property on the created object.
- enabled - boolean
A value indicating whether this SnapContext is enabled. This option sets the enabled property on the created object.
Properties
Gets the collection of additional OrthogonalSnapLines.
Gets or sets the grid constraint provider for the IBends.
Examples
const snapContext = new GraphSnapContext()
const gridInfo = new GridInfo(50)
snapContext.nodeGridConstraintProvider = new GridConstraintProvider(gridInfo)
snapContext.bendGridConstraintProvider = new GridConstraintProvider(gridInfo)
snapContext.portGridConstraintProvider = new GridConstraintProvider(gridInfo)
snapContext.gridSnapType = GridSnapTypes.GRID_POINTS
graphEditorInputMode.snapContext = snapContextGets or sets whether this instance should collect fixed snap lines for edge segments.
Remarks
true.See Also
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.
Remarks
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.
See Also
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.
See Also
Gets or sets whether this instance should collect the sizes of fixed nodes.
Remarks
true.See Also
Gets or sets whether this instance should collect fixed snap lines for nodes.
Remarks
true.See Also
Gets or sets whether this instance should collect fixed snap lines for ports.
Remarks
true.See Also
Gets or sets a value indicating whether to crop the snap lines at obstacles.
Gets the current input mode context.
Defined in
Gets or sets the preferred distance between edges.
Remarks
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.
See Also
Gets or sets a value indicating whether this SnapContext is enabled.
Defined in
Gets the nodes that stay fixed for the current edit.
Gets the collection of OrthogonalSnapLines for fixed nodes.
Gets the collection of OrthogonalSnapLines to which ports should be snapping.
Gets the collection of OrthogonalSnapLines for fixed segments.
Gets or sets the GridSnapDistance.
Remarks
Defined in
Gets or sets the type of the grid snapping that should be performed.
Remarks
Examples
Enabling grid snapping
const snapContext = new GraphSnapContext()
const gridInfo = new GridInfo(50)
snapContext.nodeGridConstraintProvider = new GridConstraintProvider(gridInfo)
snapContext.bendGridConstraintProvider = new GridConstraintProvider(gridInfo)
snapContext.portGridConstraintProvider = new GridConstraintProvider(gridInfo)
snapContext.gridSnapType = GridSnapTypes.GRID_POINTS
graphEditorInputMode.snapContext = snapContextNote that the grid visualization has to be enabled separately
graphComponent.backgroundGroup.addChild(new GridVisualCreator(gridInfo))See Also
Defined in
Gets whether the context is initialized.
Remarks
Defined in
Gets or sets a value indicating whether this instance is currently initializing.
Gets or sets the grid constraint provider for the INodes.
Examples
const snapContext = new GraphSnapContext()
const gridInfo = new GridInfo(50)
snapContext.nodeGridConstraintProvider = new GridConstraintProvider(gridInfo)
snapContext.bendGridConstraintProvider = new GridConstraintProvider(gridInfo)
snapContext.portGridConstraintProvider = new GridConstraintProvider(gridInfo)
snapContext.gridSnapType = GridSnapTypes.GRID_POINTS
graphEditorInputMode.snapContext = snapContextGets or sets the preferred distance between node borders and edge segments.
Remarks
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.
See Also
Gets or sets the preferred distance between node borders.
Remarks
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.
See Also
Gets the original location of the mouse at the time the gesture was initialized.
Gets or sets the grid constraint provider for the IPorts.
Examples
const snapContext = new GraphSnapContext()
const gridInfo = new GridInfo(50)
snapContext.nodeGridConstraintProvider = new GridConstraintProvider(gridInfo)
snapContext.bendGridConstraintProvider = new GridConstraintProvider(gridInfo)
snapContext.portGridConstraintProvider = new GridConstraintProvider(gridInfo)
snapContext.gridSnapType = GridSnapTypes.GRID_POINTS
graphEditorInputMode.snapContext = snapContextGets or sets whether this context will automatically snap the movements of bends so that the two adjacent segments become horizontally or vertically oriented.
Gets or sets whether this context will automatically snap the bends to snap lines.
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.
Remarks
The distance is interpreted in view coordinates.
The default is 5.0d
See Also
Defined in
Gets or sets whether INodeSnapResultProvider implementations should snap nodes to snap lines.
Gets or sets whether this context will automatically snap the movement in such a way that the overall move gesture is constrained to the horizontal or vertical axis.
Gets or sets whether this context will automatically snap the movements of nodes so that the first and last segments of edges become orthogonal.
Gets the collection of SnapResults.
Gets or sets whether this context will automatically snap orthogonal edge segments to snap lines.
Gets or sets a value indicating whether to visualize the snap results.
Methods
Adds MovementInfo representing an IBend that will be considered for the next drag gesture.
Remarks
Parameters
A map of options to pass to the method.
- 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.
Remarks
Parameters
A map of options to pass to the method.
- info - MovementInfo
- The MovementInfo representing the edge end to be reparented. Can be created with getMovementInfos.
- sourceEnd - boolean
trueif theinforepresents the source end of the edge.
Adds an item which will be reshaped.
Parameters
A map of options to pass to the method.
- item - IModelItem
- The item to be reshaped.
Adds MovementInfo representing an INode that will be considered for the next drag gesture.
Remarks
Parameters
A map of options to pass to the method.
- 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.
Remarks
Parameters
A map of options to pass to the method.
- 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.
Remarks
Parameters
A map of options to pass to the method.
- info - MovementInfo
- The MovementInfo representing the port to be moved. Can be created with getMovementInfo.
Adds an entry for the same-height-snapping.
Remarks
Parameters
A map of options to pass to the method.
- rectangle - Rect
- The rectangle to obtain the height value from. This rectangle will be used for the snap result visualization.
See Also
Adds an entry for the same-width-snapping.
Remarks
Parameters
A map of options to pass to the method.
- rectangle - Rect
- The rectangle to obtain the width value from. This rectangle will be used for the snap result visualization.
See Also
Called when a drag has been canceled.
Remarks
Defined in
Disposes of all previously temporarily collected state and clears the snapResults collection.
Remarks
Overrides
Collects the OrthogonalSnapLines for the nodes which are not moving.
Remarks
Collects the OrthogonalSnapLines for the ports which are not moving.
Remarks
Collects snap lines for edge segments.
Remarks
Collects all node widths and heights in the collections findSameWidthEntries and findSameHeightEntries.
Remarks
Finds pairs of nodes that are visually adjacent to create center and same distance snap lines.
Helper method used by createSnapResultsModelManager to create the ICanvasObjectDescriptor for the SnapResult type.
Returns
- ↪ICanvasObjectDescriptor
- An instance that can install SnapResults in a CanvasComponent.
Defined in
Helper method that creates the a CollectionModelManager<T> that can be used to present the current SnapResults in the provided CanvasComponent.
Parameters
A map of options to pass to the method.
- canvas - CanvasComponent
- The control to initialize the CollectionModelManager<T> with.
Returns
- ↪CollectionModelManager<SnapResult>
- The model manager that manages the visual representation of the SnapResults.
Defined in
Called when a drag has been successfully finished.
Remarks
Parameters
A map of options to pass to the method.
- newLocation - Point
- The current mouse location.
- snappingDisabled - boolean
- If set to
truesnapping is temporarily disabled. This will remove the snap line visualizations and return a SnapState with the unchanged coordinates and the NOT_SNAPPED snapType.
Returns
- ↪SnapState
- A SnapState that specifies the adjusted coordinates and how they have been adjusted. The unchanged coordinates if snapping has been temporarily disabled by setting
snappingDisabledtotrue.
Defined in
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.
Remarks
snappingDisabled parameter set to true.Parameters
A map of options to pass to the method.
- mouseLocation - Point
- The actual mouse location.
- finalSnapState - SnapState
- The final snap state that contains the location that has been used by the client code for the move and how it has been snapped.
Defined in
Collects a list of snap lines.
Remarks
See Also
Overrides
Finds the entries (Rects) that have been registered using the addSameHeightEntry previously that best match the given constraints.
Parameters
A map of options to pass to the method.
- size - number
- The size to find the closest set of identical sizes.
- maxSize - number
- The maximum allowed size.
- minSize - number
- The minimum allowed size.
Returns
- ↪IListEnumerable<Rect>
- The set of rectangles that have been added previously using addSameHeightEntry.
Finds the entries (Rects) that have been registered using the addSameWidthEntry previously that best match the given constraints.
Parameters
A map of options to pass to the method.
- size - number
- The size to find the closest set of identical sizes.
- maxSize - number
- The maximum allowed size.
- minSize - number
- The minimum allowed size.
Returns
- ↪IListEnumerable<Rect>
- The set of rectangles that have been added previously using addSameWidthEntry.
getAdditionalSnapLines
(orientation: SnapLineOrientation, snapType: SnapLineSnapTypes, area: Rect) : IEnumerable<OrthogonalSnapLine>Gets a subset of additionalSnapLines that matches the given orientation, snapType and intersects with the provided area.
Parameters
A map of options to pass to the method.
- orientation - SnapLineOrientation
- The orientation of the lines to return.
- snapType - SnapLineSnapTypes
- The snap type to be included.
- area - Rect
- The area to test for intersection.
Returns
- ↪IEnumerable<OrthogonalSnapLine>
- An enumerable of the snap lines that match the provided criteria.
getFixedNodeSnapLines
(orientation: SnapLineOrientation, snapType: SnapLineSnapTypes, area: Rect) : IEnumerable<OrthogonalSnapLine>Gets a subset of fixedNodeSnapLines that matches the given orientation, snapType and intersects with the provided area.
Parameters
A map of options to pass to the method.
- orientation - SnapLineOrientation
- The orientation of the lines to return.
- snapType - SnapLineSnapTypes
- The snap type to be included.
- area - Rect
- The area to test for intersection.
Returns
- ↪IEnumerable<OrthogonalSnapLine>
- An enumerable of the snap lines that match the provided criteria.
getFixedPortSnapLines
(orientation: SnapLineOrientation, snapType: SnapLineSnapTypes, area: Rect) : IEnumerable<OrthogonalSnapLine>Gets a subset of fixedPortSnapLines that matches the given orientation, snapType and intersects with the provided area.
Parameters
A map of options to pass to the method.
- orientation - SnapLineOrientation
- The orientation of the lines to return.
- snapType - SnapLineSnapTypes
- The snap type to be included.
- area - Rect
- The area to test for intersection.
Returns
- ↪IEnumerable<OrthogonalSnapLine>
- An enumerable of the snap lines that match the provided criteria.
getFixedSegmentSnapLines
(orientation: SnapLineOrientation, snapType: SnapLineSnapTypes, area: Rect) : IEnumerable<OrthogonalSnapLine>Gets a subset of fixedSegmentSnapLines that matches the given orientation, snapType and intersects with the provided area.
Parameters
A map of options to pass to the method.
- orientation - SnapLineOrientation
- The orientation of the lines to return.
- snapType - SnapLineSnapTypes
- The snap type to be included.
- area - Rect
- The area to test for intersection.
Returns
- ↪IEnumerable<OrthogonalSnapLine>
- An enumerable of the snap lines that match the provided criteria.
Gets the movement info for the given bend.
Remarks
Parameters
A map of options to pass to the method.
- bend - IBend
- The bend to obtain the info for.
Returns
- ↪MovementInfo
- An instance of MovementInfo that describes the movement of the bend.
Gets the movement info for the given node.
Remarks
Parameters
A map of options to pass to the method.
- node - INode
- The node to obtain the info for.
Returns
- ↪MovementInfo
- An instance of MovementInfo that describes the movement of the node.
Gets the movement info for the given port.
Remarks
Parameters
A map of options to pass to the method.
- port - IPort
- The port to obtain the info for.
Returns
- ↪MovementInfo
- An instance of MovementInfo that describes the movement of the port.
Gets the movement information for the provided edge.
Remarks
Parameters
A map of options to pass to the method.
- edge - IEdge
- The edge to obtain the movement information of.
Returns
- ↪IListEnumerable<MovementInfo>
- An IListEnumerable<T> of MovementInfos items that describe the geometry of the edge being modified.
Handles a move.
Remarks
snappingDisabled has to be set to true.Parameters
A map of options to pass to the method.
- newLocation - Point
- The current mouse location.
- snappingDisabled - boolean
- If set to
truesnapping is temporarily disabled. This will remove the snap line visualizations and return a SnapState with the unchanged coordinates and the snapType NOT_SNAPPED.
Returns
- ↪SnapState
- The adjusted coordinates and how they have been adjusted. The unchanged coordinates if snapping has been temporarily disabled by setting
snappingDisabledtotrue.
Defined in
Called by IInputMode implementations when an interactive drag is started.
Remarks
Parameters
A map of options to pass to the method.
- 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.
Overrides
Raises the cleanUp event.
Parameters
A map of options to pass to the method.
- evt - InputModeEventArgs
- The InputModeEventArgs instance containing the event data.
Defined in
Raises the CollectSnapLines event.
Parameters
A map of options to pass to the method.
- evt - CollectGraphSnapLinesEventArgs
- The CollectGraphSnapLinesEventArgs instance containing the event data.
Raises the CollectSnapResults event.
Parameters
A map of options to pass to the method.
- evt - CollectSnapResultsEventArgs
- The CollectSnapResultsEventArgs instance containing the event data.
Defined in
Raises the Initialized event.
Parameters
A map of options to pass to the method.
- evt - InputModeEventArgs
- The InputModeEventArgs instance containing the event data.
Defined in
Raises the Initializing event.
Parameters
A map of options to pass to the method.
- evt - InputModeEventArgs
- The InputModeEventArgs instance containing the event data.
Defined in
processSnapResults
(snapResults: List<SnapResult>, originalLocation: Point, newLocation: Point) : SnapStateChooses the current SnapResults from a temporary list.
Remarks
Parameters
A map of options to pass to the method.
- 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.
Returns
- ↪SnapState
- The adjusted coordinates and how they have been adjusted.
Defined in
Helper method that wraps the given context so that a lookup query on the wrapped context for the SnapContext type yields this instance.
Parameters
A map of options to pass to the method.
- context - IInputModeContext
- The context to wrap and delegate all calls to.
Returns
- ↪IInputModeContext
- A modified instance that yields this instance if it is queried for the SnapContext type.
Overrides
Events
Occurs when this instance has been cleaned up.
See Also
Defined in
Event Registration
addCleanedUpListener(function(this, InputModeEventArgs):void)Event Deregistration
removeCleanedUpListener(function(this, InputModeEventArgs):void)Signature Details
function(sender: this, evt: InputModeEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - InputModeEventArgs
- An object that contains the event data.
Occurs every time this instance has been initialized to collect OrthogonalSnapLines.
Remarks
See Also
Event Registration
addCollectSnapLinesListener(function(this, CollectGraphSnapLinesEventArgs):void)Event Deregistration
removeCollectSnapLinesListener(function(this, CollectGraphSnapLinesEventArgs):void)Signature Details
function(sender: this, evt: CollectGraphSnapLinesEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - CollectGraphSnapLinesEventArgs
- An object that contains the event data.
Occurs while moving items and handles.
Remarks
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.
Defined in
Event Registration
addCollectSnapResultsListener(function(this, CollectSnapResultsEventArgs):void)Event Deregistration
removeCollectSnapResultsListener(function(this, CollectSnapResultsEventArgs):void)Signature Details
function(sender: this, evt: CollectSnapResultsEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - CollectSnapResultsEventArgs
- An object that contains the event data.
Occurs when this instance has been initialized.
See Also
Defined in
Event Registration
addInitializedListener(function(this, InputModeEventArgs):void)Event Deregistration
removeInitializedListener(function(this, InputModeEventArgs):void)Signature Details
function(sender: this, evt: InputModeEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - InputModeEventArgs
- An object that contains the event data.
Occurs when this instance is about to be initialized.
See Also
Defined in
Event Registration
addInitializingListener(function(this, InputModeEventArgs):void)Event Deregistration
removeInitializingListener(function(this, InputModeEventArgs):void)Signature Details
function(sender: this, evt: InputModeEventArgs)
Parameters
- sender - this
- The source of the event.
- evt - InputModeEventArgs
- An object that contains the event data.