Resize & Rotate
JointJS+ provides a FreeTransform plugin that enables the ability to create a control panel above an element giving a user the ability to resize an element in any direction or rotate it.
Installation
Access FreeTransform
via the ui
namespace, and create an instance. Then, pass in the appropriate view, and call the
render()
method.
import { dia, shapes, ui } from '@joint/plus';
const graph = new dia.Graph({}, { cellNamespace: shapes });
const paper = new dia.Paper({
el: document.getElementById('paper'),
width: 500,
height: 500,
model: graph,
cellViewNamespace: shapes
});
paper.on('element:pointerup', (elementView) => {
const freeTransform = new ui.FreeTransform({ cellView: elementView });
freeTransform.render();
});
There is also a UMD version available
Include joint.ui.freetransform.js
and joint.ui.freetransform.css
in your HTML:
<link rel="stylesheet" type="text/css" href="joint.ui.freeTransform.css">
<script src="joint.js"></script>
<script src="joint.ui.freeTransform.js"></script>
Access FreeTransform
through the joint.ui
namespace:
const graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });
const paper = new joint.dia.Paper({
el: document.getElementById('paper'),
width: 500,
height: 500,
model: graph,
cellViewNamespace: joint.shapes
});
paper.on('element:pointerup', (elementView) => {
const freeTransform = new joint.ui.FreeTransform({ cellView: elementView });
freeTransform.render();
});
How does FreeTransform work?
FreeTransform
adds handles to a given element that allows the user to manipulate the element in terms of resizing and
rotation. It is assumed that there is only one free transform visible on the page at a time, so you don't have to keep
track of opened free transforms yourself. Some applications might need to have more than one free transform visible, so
this can also be configured.
Common FreeTransform usage
The usage of the FreeTransform
plugin is pretty straightforward. The following example creates a free transform
immediately, and also upon user interaction. When the user clicks on an element, a free transform is created, and the
render()
method is called on it.