Dynamic grid snapping when guided line appear

I want to implement, custom grid snapping where, the node dragging should be smooth, and when guided lines appear in the canvas, the shape should start to snap to the the guided line,(in other words the shape should tends to move towards the guided lines and when no guided line is not present then, the node dragging should be smooth again).
How do we achieve this?

I’m following from these links.

You will need to modify/adapt the GuidedDraggingTool.

I haven’t tried this, but I am guessing you just need to change the GuidedDraggingTool.doDragOver method so that it always snaps, if enabled:

GuidedDraggingTool.prototype.doDragOver = function(pt, obj) {
  // clear all existing guidelines in case either show... method decides to show a guideline

  // gets the selected part
  var partItr = (this.copiedParts || this.draggedParts).iterator;
  if (partItr.next()) {
    var part = partItr.key;

    this.showHorizontalMatches(part, this.isGuidelineEnabled, this.isGuidelineEnabled);
    this.showVerticalMatches(part, this.isGuidelineEnabled, this.isGuidelineEnabled);

got it,
How do I achieve the below guided lines

Currently im getting this

Im using the below code
(mostly similar to the default guidedDragging.html code)

Do you mean show three horizontal guidelines at the same time? You’ll need to modify the GuidedDraggingTool.

Yes, I want the horizontal guided lines. Can u suggest some logic around it. as I have used the default code only.

The GuidedDraggingTool does have three horizontal guidelines and three vertical guidelines. However the design of the two show… methods only picks the one best horizontal match and the one best vertical match. You’ll have to change that code to show more than one at once.

Furthermore, what you are going to do when more than one vertical match is acceptable and the method is asked to snap the node? You can’t move the node to two or three different vertical positions at the same time. So you’ll need to decide what to do.

Following this guidedDraggingTool.ts
As per the method comments I added Infinity instead of some value, but it doesn’t work.
How do i make the search radius for the whole diagram?

const searchRadius=1000

I’ll look into why Infinity doesn’t work for searchDistance. [EDIT:] Ah, it turns out that it calls Rect.inflate which requires real numbers as arguments. I’ll fix GuidedDraggingTool to accept Infinity.

Meanwhile, use a large finite number.