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:

index.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:

index.js

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.

Open Sandbox