`restrictTranslate` - restrict the translation (movement) of elements by a given bounding box. If set to `true`, the user will not be able to move elements outside the boundary of the paper area. It's set to `false` by default. This option also accepts a function with signature `function(elementView, x0, y0)` in which case it must return one of the following:
• rectangle - (an object of the form `{ x: Number, y: Number, width: Number, height: Number }`) that defines the area in which the element represented by `elementView` can be moved.
• null - no restriction for element translation
• (x, y) => Position - For a given element position `x,y` return a new position `{ x: Number, y: Number }`. The function is invoked every time the user moves the pointer.

For example, to restrict translation of embedded elements by the bounding box defined by their parent element, you can do:

``````restrictTranslate: function(elementView) {
const parent = elementView.model.getParentCell();
return parent
? parent.getBBox() // children movement is constrained by the parent area
: null; // parent movement is not restricted
}``````

Or restrict an element movement along a path:

``````restrictTranslate: function(elementView, x0, y0) {
// x0 and y0 are pointer coordinates at the start of the translation
const path = new g.Path('M 20 20 L 200 200 L 380 20');
const { x: x1, y: y1, width, height } = elementView.model.getBBox();
// The initial difference between the pointer coordinates and the element position
const dx = x1 - x0;
const dy = y1 - y0;
return function(x, y) {
// Find the point on the path.
const point = path.closestPoint({ x: x - dx, y: y - dy });
// Put the center of the element on this point
point.offset(-width / 2, -height / 2);
return point;
};
}``````