Some grid questions

We allow the user to change the grid options using preferences. When they save the preferences we update the grid. We are using this code to update the grid:

updateGrid: function() {
var me = this,
make = go.GraphObject.make,
lines = [],
prefs = Wp.base.util.Session.preferences;

if (prefs.get(‘showGrid’)) {
make(‘Shape’, ‘LineH’, {
stroke: ‘#BEBEBE’,
strokeWidth: 1
make(‘Shape’, ‘LineV’, {
stroke: ‘#BEBEBE’,
strokeWidth: 1
grid = make(‘Panel’, ‘Grid’, {
gridCellSize: new go.Size(prefs.get(‘gridSize’), prefs.get(‘gridSize’))

me.diagram.grid = grid;
me.diagram.toolManager.draggingTool.isGridSnapEnabled = prefs.get(‘snapToGridMove’);
me.diagram.toolManager.resizingTool.isGridSnapEnabled = prefs.get(‘snapToGridResize’);

I have some questions:

  1. After running the above code the grid disappears whether it is turned on or off. If it is on, moving the diagram makes it come back. Is there a call I need to make after updating the grid so it shows w/o having to move the diagram?

  2. When adding a new node is there a way to make it snap to grid if user has option turned on? I don’t see any options for ClickCreatingTool.

  3. Even though my grid stroke is 1 the lines are thicker than 1px. If I zoom with the mouse, sometimes they are 1px and sometimes 2px. My guess this could be something with anti-aliasing. Is there a way to turn this off for just the grid? Even doing 0.5 doesn’t fix it.


  1. You’re right, that’s a bug. It will be fixed in the next release (most likely sometime next week)

  2. See:

3. This is an issue related to all uses of HTML canvas (See for instance here). You could offset the grid by 0.5 pixels.

How I addressed 2 & 3 in case anyone else is looking for answers:

    if (Wp.base.util.Session.preferences.get('snapToGridMove')) {
        loc = loc.snapToGridPoint(diagram.grid.gridOrigin, diagram.grid.gridCellSize);
    grid = make('Panel', 'Grid', {
            gridCellSize: new go.Size(prefs.get('gridSize'), prefs.get('gridSize')),
            gridOrigin: new go.Point(0.5, 0.5) // Need to keep canvas from anti-aliasing 1px lines

#1 is now fixed in GoJS 1.3.4, which is now the latest build:

See also the changelog:

Works now - thx!

I also removed the transaction around it which doesn’t appear to be needed.

Update - after looking at the console it does appear the transaction is needed. The code works but complains that it wasn’t in a transaction.