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

Custom styles

The FreeTransform frame and handles may be styled via CSS. This is especially useful when the useBordersToResize option is used, to make it clear to the users that they can interact with them. The default padding value is often overridden in this context as well.

The following example shows how to use the built-in CSS variables (--jj-free-transform-handle-size, --jj-free-transform-handle-offset) to make these customizations while ensuring that the expanded orthogonal resize handles keep having the correct dimensions:

Open Sandbox