Skip to main content

Grids

In JsPlumb, you can use a grid to control:

  • Where elements can be dragged to
  • The size of auto sized groups
  • Where the magnetizer will place elements
  • The dimensions a user can resize elements to with the Drawing Tools plugin
  • The size of a visible gridded background

Configuring a grid​

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

Vanilla JS
React
Angular
Vue
Svelte
import { newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.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.
caution

Setting a grid in your render options does not cause the underlying layout to snap to a grid.

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:

Vanilla JS
React
Angular
Vue
Svelte
import { newInstance } from "@jsplumbtoolkit/browser-ui"

const toolkit = newInstance()
    
const surface = toolkit.render(someElement, {
  "plugins": [
    {
      "type": DrawingToolsPlugin.type,
      "options": {
        "ignoreGrid": true
      }
    }
  ]
});

Drag/Drop Manager​

The drag/drop manager and shape library palette components will honour any grid that is set on the surface to which they are attached. When a user drags a new element from a palette its placement will be snapped to the grid that is in effect.

Grid backgrounds​

The BackgroundPlugin has the ability to draw gridded backgrounds. When doing so, it will detect any grid that is in effect and conform to it. For more information check the background plugin documentation