element.translate(tx, [ty], [opt])
Translate an element by tx
pixels in x axis and ty
pixels in y axis.
ty
is optional in which case the translation in y axis will be considered zero.
The optional options object opt
can be used to pass additional parameters to the event handlers
listening on 'change:position'
events. opt.transition
can be used to initiate an animated
transition rather than a sudden move of the element. See joint.dia.Element:transition for more info
on transitions. If opt.restrictedArea
is set, the translation of the element will be restricted to that area only.
The restrictedArea
is an object of the form { x: Number, y: Number, width: Number, height: Number }
.
This is useful, e.g. if you want to restrict the translation of an embedded element within its parent. The only thing
you have to do in this case is to pass the bounding box of the parent element to the restrictedArea
option:
myElement.translate(50, 50, { restrictedArea: graph.getCell(myElement.get('parent')).getBBox() })
The code above makes sure that the element myElement
never crosses the bounding box of its parent element.
note that this also works if the element myElement
has other embedded elements. In other words, the
bounding box of the myElement
that is used to calculate the restriction is the total bounding box,
including all its children (in case they are sticking out
).