Some grid questions

GoJS
1

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,
grid,
lines = [],
prefs = Wp.base.util.Session.preferences;


if (prefs.get(‘showGrid’)) {
lines.push(
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’))
},
lines
);


me.diagram.startTransaction(‘updateGrid’);
me.diagram.grid = grid;
me.diagram.toolManager.draggingTool.isGridSnapEnabled = prefs.get(‘snapToGridMove’);
me.diagram.toolManager.resizingTool.isGridSnapEnabled = prefs.get(‘snapToGridResize’);
me.diagram.commitTransaction(‘updateGrid’);
},

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.

Thanks!

2

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

  2. See: http://www.gojs.net/latest/api/symbols/Diagram.html#moveParts

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.

3

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
        },
        lines
    );
4

#1 is now fixed in GoJS 1.3.4, which is now the latest build: http://www.gojs.net/latest/index.html

See also the changelog: http://www.gojs.net/latest/doc/changelog.html

5

Works now - thx!

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

6

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.