Skip to main content

Grids

Grids​

Previous versions of the Toolkit supported imposing a grid when dragging elements, but not when running a layout or resizing groups. From version 5.x up the Toolkit offers a more comprehensive approach to imposing a grid on your UI, featuring:

  • the ability to restrict element dragging to a grid
  • the ability to fit auto sized groups to the grid
  • the ability to magnetize elements to a grid

Configuring a grid​

To set a grid on a Surface element, you need to specify it in the render options:

toolkitInstance.render(someElement, {
    ... 
    grid:{
        size:{w:50, h:50}
    } 
})

This will:

  • restrict element dragging so that elements can only be placed in 50 pixel increments in each axis
  • when auto sizing a group, ensure that the size chosen is a multiple of 50 pixels in each axis
  • restrict the magnetizer to only placing elements at 50 pixels increments in each axis when it runs.

This does not configure the underlying layout to use 50 pixels increments.

Drawing Tools​

The drawing tools plugin will, by default, observe any grid that is set on the Surface to which it is attached: elements will only be able to be resized in increments of the grid. You can switch off this behaviour if you wish to, by setting the ignoreGrid option on the drawing tools plugin:

toolkit.render(someElement, {
    ...
    plugins:[
        {
            type:"drawingTools",
            options:{
                ignoreGrid:true
            }
        }    
    ]
});

Drag/Drop Manager​

The drag/drop manager will honour any grid that is set on the Surface to which it is attached.

Grid backgrounds​

This is handled by the background plugin