Force Layout with grid-snapping positioning


#1

We are using GoJS with force layout on complex nodes, and using AvoidNodes link routing without dragging or editing support. It happens quite a bit that a node ends up, due to the layout just a little bit higher than another node that it connects to making small “bumps” in the link, as attached.
Screenshot%20from%202018-12-17%2018-39-10

Is there a way to have GoJS layout the nodes with the force layout but with a “grid-snapping” behaviour so that nodes wont end up with a small height difference?


#2

Even though you have disabled the DraggingTool, you could set DraggingTool.isGridSnapEnabled to true, and after the layout you could call Diagram.moveParts on all of the Diagram.nodes with an offset of (0,0).

One way to do that would be to implement a “LayoutCompleted” DiagramEvent listener:

      $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
        { . . .,
          "draggingTool.gridSnapCellSize": new go.Size(50, 50),
          "draggingTool.isGridSnapEnabled": true,
          "LayoutCompleted": function(e) {
            e.diagram.moveParts(e.diagram.nodes, new go.Point(0, 0), false);
          }
        });

You’ll need to figure out the cell size that is appropriate for your app. The smaller the cell size, the less likely it is that two nodes will be snapped to occupy the same cell.


#3

Thank you,
Will try it and see if it works