Tree model with grid

GoJS
1

Hi,

I created a tree diagram with palette and overview and it works well.
I added a grid to the diagram, but now I have a problem in alignment of nodes.
I succeeded in follow grid cell size when moving nodes in the diagram, but as soon as I drop a node the diagram put the nodes in wrong position, i.e. not in the cell of grid.

Here is my code:

G = go.GraphObject.make;
var cellSize = new go.Size(105, 45);
myDiagram =
G(go.Diagram, divDiagram,
{
grid: G(go.Panel, “Grid”,
{ gridCellSize: cellSize },
G(go.Shape, “LineH”, { stroke: “lightgray” }),
G(go.Shape, “LineV”, { stroke: “lightgray” })
),
“draggingTool.isGridSnapEnabled”: true,
“draggingTool.gridSnapCellSpot”: go.Spot.Center,
“resizingTool.isGridSnapEnabled”: true,
allowDrop: true,
allowDelete: false,
allowVerticalScroll: true,
allowHorizontalScroll: false,
allowUndo: false
});

myDiagram.nodeTemplate =
G(go.Node, go.Panel.Auto,
{resizeObjectName: “SHAPE”,
locationSpot: new go.Spot(0, 0, cellSize.width / 2, (cellSize.height / 2))
},
G(go.Panel,
G(go.Shape, “RoundedRectangle”,
{ fill: “lightgreen”, width: 100, height: 40, minSize: new go.Size(100, 40) },
new go.Binding(“fill”,“relationType”)
),
G(go.TextBlock,
{ margin: 3, editable: false, font: “bold 12pt dosis-light” },
new go.Binding(“text”, “name”).makeTwoWay())

));
myDiagram.linkTemplate =
G(go.Link,
{ routing: go.Link.Orthogonal, corner: 5 },
G(go.Shape));

myDiagram.layout = new G(go.TreeLayout);
myDiagram.layout.angle = 180;//display from left to right

myDiagram.model = G(go.TreeModel,
{
nodeParentKeyProperty: “parentKey”
});

Could you please tell me how can I force the new node to be put in the grid cell?

Many thanks!

2

The presence of a grid does not affect the results of the TreeLayout (or any other layout).

The setting of Diagram.toolManager.draggingTool.isGridSnapEnabled to true does not affect the results of the TreeLayout – it only affects the DraggingTool.

So you need to customize the TreeLayout so that the nodes are aligned with the grid, if that is what you want. Basically you need to figure out what values you would like for the following initialization:
myDiagram.layout =
G(go.TreeLayout,
{ angle: 180, layerSpacing: ???, nodeSpacing: ??? });

3

Hi,

I tried to set layerSpacing and nodeSpacing as you told me but nothing happened. As soon as I drop a node from the palette the diagram re-positions all nodes, also those that I previously moved.
It seems that only angle is working for my diagram.
I also checked the Tree Layout samples and obviously everything is working fine there. I tried also to change the spacing in a transaction as performed in the layout function of the sample, but no success.
Any suggestions of diagram settings to check?

Many thanks

4

The reason that layout is being performed again when you add (or remove) a node (or a link) is that is the default behavior for layouts. In other words, by default a Layout assumes that whenever the “graph” has changed, the layout should be invalidated and a new layout should be performed soon.

You can change that behavior in several manners, depending on how you want to control it.

First, you can set Layout.isOngoing = false. http://gojs.net/latest/api/symbols/Layout.html#isOngoing

Second, you can set Part.layoutConditions to some combination of flags that suit your needs. http://gojs.net/latest/api/symbols/Part.html#layoutConditions