Problem with snap to grid

GoJS
1

Hi, I am adding a ‘snap to grid’ functionality to my diagram and, following documentation and samples, I have activated the grid as the following

grid: $(go.Panel, "Grid",
                  { gridCellSize: new go.Size(20, 20) },
                  $(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.5 }),
                  $(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.5 })
                ),          
          	"draggingTool.isGridSnapEnabled": true,
                "draggingTool.gridSnapCellSpot": go.Spot.TopLeft,

That’s fine, I have the grid and the nodes movements are now possible only by fixed steps but the node’s panel is NOT aligned with the grid lines
In the following image, nodes are initially placed by GoJS and they are obviously not aligned with the grid

but if I move the second box to the left for example, trying to align it with the grid it jumps of [gridCellSize] pixels and not of the amount necessary to align with the first grid line on the left, making impossible to align the two boxes on the left side.

How can I solve this problem?
Thanks, in advance
Marco

2

You need to not set the Node.locationSpot to go.Spot.Center or whatever you’ve set it to.

Grid snapping always moves parts so that their location point coincides with the nearest grid snap cell spot of the grid. I hope you can imagine situations where apps where users would want to align the centers of their nodes.

By the way, DraggingTool.gridSnapCellSpot defaults to go.Spot.TopLeft, so you don’t need to set that.

3

Thank you Walter, it works! I removed also the gridSnapCellspot setting.

Marco