Class GuidedDraggingTool

GoJS® Diagramming Components
version 3.1.0
by Northwoods Software®

This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

Hierarchy (view full)

The GuidedDraggingTool class makes guidelines visible as the parts are dragged around a diagram when the selected part is nearly aligned with another part, or when a part is nearly positioned between two other parts with equal space on both sides.

During dragging, this tool will show temporary Parts named "guide..." to indicate what the dragged Part will align with. You can customize the appearance of those Parts by setting those properties. By default they are Parts in the "Tool" Layer holding magenta or cyan dashed lines. You may also set some of those "guide..." properties to null if you do not want those guides to be shown and do not want to snap to those alignments.

Normally as the user drags a Part, that Part will snap to center itself with equal spacing on both sides, or it will line up with a nearby Part. If you do not want that snapping behavior during a drag, the user can hold down the Shift modifier key in order to move the Part smoothly, or you can set isRealtimeSnapEnabled to false. When that property is set to false, snapping will still happen upon mouse-up.

You can set the isGuidelineSnapEnabled or isEqualSpacingSnapEnabled property to false to avoid that kind of snapping behavior. When both those properties are true, as they are by default, and when a Part is near a point that provides both equal spacing between two Parts and alignment with a nearby Part, the equal spacing snapping takes precedence.

The maximum distance from perfect algnment that a dragged Part will snap to is controlled by the guideSnapDistance property. This tends to be a small value.

The maximum distance at which another Part might affect the alignment of the dragged Part is controlled by the searchDistance property. This tends to be a large value.

If you want to experiment with this extension, try the Guided Dragging sample.

Index

Constructors

Accessors

  • Gets or sets the Part to show on the left side when the moved Part leaves nearly the same spacing left and right between this Part and the nearest Parts on either side of it. This defaults to a vertical cyan dashed line. Set this to null to not show anything for this case.

  • Gets or sets the Part to show on the right side when the moved Part leaves nearly the same spacing left and right between this Part and the nearest Parts on either side of it. This defaults to a vertical cyan dashed line. Set this to null to not show anything for this case.

  • Gets or sets the margin of error for which guidelines show up.

    The default value is 6. Guidelines will show up when the aligned nodes are ± 6px away from perfect alignment.

  • Gets or sets the Part to show below when the moved Part leaves nearly the same spacing above and below between this Part and the nearest Parts above and below it. This defaults to a vertical cyan dashed line. Set this to null to not show anything for this case.

  • Gets or sets the Part to show above when the moved Part leaves nearly the same spacing above and below between this Part and the nearest Parts above and below it. This defaults to a vertical cyan dashed line. Set this to null to not show anything for this case.

  • Gets or sets the Part to show when the moved Part's bottom lines up with a stationary Part. This defaults to a horizontal magenta dashed line. Set this to null to not show anything for this case.

  • Gets or sets the Part to show when the moved Part's center lines up with a stationary Part. This defaults to a horizontal magenta dashed line. Set this to null to not show anything for this case.

  • Gets or sets the Part to show when the moved Part's top lines up with a stationary Part. This defaults to a horizontal magenta dashed line. Set this to null to not show anything for this case.

  • Gets or sets the Part to show when the moved Part's center lines up with a stationary Part. This defaults to a vertical magenta dashed line. Set this to null to not show anything for this case.

  • Gets or sets the Part to show when the moved Part's left side lines up with a stationary Part. This defaults to a vertical magenta dashed line. Set this to null to not show anything for this case.

  • Gets or sets the Part to show when the moved Part's right side lines up with a stationary Part. This defaults to a vertical magenta dashed line. Set this to null to not show anything for this case.

  • Gets or sets whether snapping to have equal space on both sides of the moved Part is enabled.

    The default value is true.

  • Gets or sets whether snapping to guidelines provided by nearby Parts is enabled.

    The default value is true.

  • Gets or sets the distance around the selected part to search for aligned parts.

    The default value is 2000. Set this to Infinity if you want to search the entire diagram no matter how far away.

  • Gets or sets whether the guidelines are shown or not. Setting this to false causes no horizontal or vertical guidelines, nor the spacing guides, to be shown. However, snapping may still take place, during the drag if isRealtimeSnapEnabled is true, or at the end on mouse-up.

    The default value is true.

Methods

  • Removes all of the guidelines from the grid.

    Returns void

  • Calls the base method and removes the guidelines from the graph.

    Returns void

  • On a mouse-up, snaps the selected part to the nearest guideline. If not snapping, the part remains at its position.

    Parameters

    Returns void

  • When nodes are shifted due to being guided upon a drop, make sure all connected link routes are invalidated, since the node is likely to have moved a different amount than all its connected links in the regular operation of the DraggingTool.

    Parameters

    Returns void

  • This predicate decides whether or not the given Part should guide the dragged part.

    Parameters

    • part: Part

      a stationary Part to which the dragged part might be aligned

    • guidedpart: Part

      the Part being dragged

    Returns boolean

  • This finds parts that are aligned near the selected part along horizontal and vertical lines. It compares the selected part to all parts within a rectangle approximately twice the searchDistance wide. The guidelines appear when a part is aligned within a margin-of-error equal to guideSnapDistance.

    Parameters

    • part: Part

      the Part being moved

    • guide: boolean

      if true, show guideline

    • snap: boolean

      if true, snap the part to where the guideline would be

    Returns void