Snap to grid for unconnected connectors

GoJS
1

Hi,

Is it possible to make snap connector to grid when user moves unconnected connector with mouse via entire connector or moves unconnected end of the connector?

2

I’m not sure about snapping the Link being dragged.

For the customized RelinkingTool that snaps the end point of such links, try this:

  function SnappingRelinkingTool() {
    go.RelinkingTool.call(this);
  }
  go.Diagram.inherit(SnappingRelinkingTool, go.RelinkingTool);

  SnappingRelinkingTool.prototype.doMouseMove = function() {
    var e = this.diagram.lastInput;
    var grid = this.diagram.grid;
    e.documentPoint = e.documentPoint.copy().snapToGridPoint(grid.gridOrigin, grid.gridCellSize);
    e.viewPoint = e.diagram.transformDocToView(e.documentPoint);
    go.RelinkingTool.prototype.doMouseMove.call(this);
  }

  SnappingRelinkingTool.prototype.doMouseUp = function() {
    var e = this.diagram.lastInput;
    var grid = this.diagram.grid;
    e.documentPoint = e.documentPoint.copy().snapToGridPoint(grid.gridOrigin, grid.gridCellSize);
    e.viewPoint = e.diagram.transformDocToView(e.documentPoint);
    go.RelinkingTool.prototype.doMouseUp.call(this);
  }

Install it by replacing the standard RelinkingTool:

$(go.Diagram, . . . ,
  { . . .,
    relinkingTool: new SnappingRelinkingTool()
  })
3

Thank you for the response. It works well, but it is still a partial decision. When user is creating new connector by dragging it from the port, or dragging a new connector from toolbox it is not working :(

4

For drawing a new Link, you also need to override LinkingTool.doMouseMove and replace the standard ToolManager.linkingTool in the same manner as for the RelinkingTool shown above.

For dragging within a diagram or between diagrams (as from a Palette to a regular Diagram), Simon will hopefully address this issue as soon as he has had the time to work on it.

5

We have enabled Part.dragComputation to work for disconnected Links. This means that this will allow dragged Links to snap:

myDiagram.linkTemplate =
  $(go.Link,
    {
      dragComputation: function(part, pt, gridpt) { return gridpt; }
    },

This will be released with the next version.

6

Thanks a lot. We really need this feature.Everything else is working fine.

7

There is one more issue with not connected connectors snapped to grid. If to try to locate connector along grid lines (see screenshot), they look not straight. Is there way to fix it?

8

This seems odd. Are you sure the points of the link really are on the grid lines?

9

Yes, we have the same behavior in our app and I reproduced it also on Draggable Link sample, just added customized RelinkingTool from walter’s comment:
function SnappingRelinkingTool() {
go.RelinkingTool.call(this);
}
go.Diagram.inherit(SnappingRelinkingTool, go.RelinkingTool);

SnappingRelinkingTool.prototype.doMouseMove = function() {
var e = this.diagram.lastInput;
var grid = this.diagram.grid;
e.documentPoint = e.documentPoint.copy().snapToGridPoint(grid.gridOrigin, grid.gridCellSize);
e.viewPoint = e.diagram.transformDocToView(e.documentPoint);
go.RelinkingTool.prototype.doMouseMove.call(this);
}