Setting DraggingTool.gridSnapCellSpot has no effect

GoJS
#1

Hi there,

I want to add snap to grid to my diagrams. The default for gridSnapCellSpot seems to be center, but that doesn’t look good in my case. So I changed it to TopLeft but that has no effect at all.

My Code:
var draggingTool = diagram.toolManager.draggingTool;
draggingTool.isGridSnapEnabled = true;
draggingTool.gridSnapCellSpot = go.Spot.TopLeft;
draggingTool.gridSnapCellSize = new go.Size(20, 20);

isGridSnapEnabled and gridSnapCellSize both work, but gridSnapCellSpot does not. Do you have any idea why?
I use GoJS version 1.6.7.

Thanks.

#2

I’m not sure what behavior you are getting and how you would prefer it to work. Some tiny screenshots would have been useful.

The DraggingTool’s snapping behavior is for moving the node’s Node.location to the nearest grid point, as determined by the DraggingTool.gridSnapCellSpot. You have tried changing this property, but what is the value of Node.locationSpot? What spot of the node do you want to line up with what spot in each grid cell?

#3

Ok, I didn’t know of Node.locationSpot. I tried using DraggingTool.gridSnapCellSpot for that but I was only moving the grid with that option.
Setting locationSpot in my node style template gets me what I need.

Thanks for your help.

#4

I have another question about the grid:
These settings are only for the dragging tool but it would be nice if the TreeLayout would consider the grid settings as well. Is there a way?

#5

If the nodes are sized the same as a grid cell or a multiple, and if the spacing is also a grid cell or multiple, I think that you can make it work.

If you want the spacing to be smaller than a grid cell, then the nodes will need to be smaller than a multiple of the grid cell by the spacing size. This might be trickier to setup.

#6

Ok, spacing is no problem. The nodes with fixed sizes are also no problem. But how do I get dynamic sizes to a multiple of the grid size? Resizing is disabled so the automatic sizing has to do it. Until now, I only have a max width defined.
Any idea?

#7

Ok, it does not work at all.

The circle is 40 wide. layerSpacing is also 40. You can see, that the next element is already off a few pixels.
I think without native grid support for layouts, this won’t work very well.

#8

I just tried this by modifying a random sample that uses TreeLayout: the Fault Tree sample, https://gojs.net/latest/samples/faultTree.html.

First I modified the node template so that each node had exactly the same size. Each node turns out to be 121x80.

Second, I specified the TreeLayout.nodeSpacing and TreeLayout.layerSpacing to 30.

Third I specified the Diagram.grid to be:

          grid:
            $(go.Panel, "Grid",
              { gridCellSize: new go.Size((121+30)/2, 80+30) },
              $(go.Shape, "LineH"),
              $(go.Shape, "LineV")
            ),
          layout:
            $(go.TreeLayout,
              { angle: 90, layerSpacing: 30, nodeSpacing: 30 }),

This resulted in the following grid and alignments after a layout:

Pasted image611×561 17.8 KB

Modifying the graph by collapsing and expanding subtrees kept all the nodes aligned on the grid.