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:
{ x: Number, y: Number, width: Number, height: Number }
) that defines the area in which the element represented by elementView
can be moved.
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;
};
}