JointJS+ FreeTransform

ui.FreeTransform

FreeTransfrom plugin creates a control panel above an element giving an user the ability to resize an element in any direction or rotate it.

Installation

Include joint.ui.freetransform.css, joint.ui.freetransform.js and joint.dia.freetransform.js files to your HTML:

<link rel="stylesheet" type="text/css" href="joint.ui.freeTransform.css">
<script src="joint.dia.freeTransform.js"></script>
<script src="joint.ui.freeTransform.js"></script>

Usage

The usage of the ui.FreeTransform plugin is pretty straightforward. Just instantiate an object of the joint.ui.FreeTransform type and pass in the view for the element you want to have the free transform handles hooked onto:

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({ el: $('#paper'), width: 500, height: 500, model: graph });

paper.on('cell:pointerup', function(cellView) {
    // We don't want to transform links.
    if (cellView.model instanceof joint.dia.Link) return;

    var freeTransform = new joint.ui.FreeTransform({ cellView: cellView });
    freeTransform.render();
});

Configuration

The joint.ui.FreeTransform constructor accepts the following options:

cellView The view for the element you want the free transform handles to be displayed for.
preserveAspectRatio Set to true if you want the resizing to preserve the aspect ratio of the element. Default is false.
resizeGrid Set to { width: number, height: number } if you want the resizing to snap to grid by specified dimensions. Default is undefined.
allowRotation Set to false if you want the rotating handle to be omitted from the handles. Default is true.
minWidth The minimum width allowed for the element when resizing. Default is 0. It can be a number or a function returning a number (cell) => number;.
maxWidth The maximum width allowed for the element when resizing. Default is Infinity. It can be a number or a function returning a number (cell) => number;.
minHeight The minimum height allowed for the element when resizing. Default is 0. It can be a number or a function returning a number (cell) => number;.
maxHeight The maximum height allowed for the element when resizing. Default is Infinity. It can be a number or a function returning a number (cell) => number;.
rotateAngleGrid The steps in angle when rotating the element. Default is 15.
allowOrthogonalResize Set to false if you only want the four corner handles to be displayed. Default is true.
resizeDirections The list of the resize handles to be displayed referenced by their direction. It defaults to ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'] i.e. all resize handles are displayed.
clearAll If set to true (the default value), clear all the existing freeTransforms from the page when a new freeTransform is created. This is the most common behavior as it is assumed that there is only one freeTransform visible on the page at a time. However, some applications might need to have more than one freeTransform visible. In this case, set clearAll to false (and make sure to call remove() once you don't need a freeTransform anymore)
clearOnBlankPointerdown If set to true (the default value), clear the freeTransform when a user clicks the blank area of the paper.
usePaperScale If set to true, the freeTransform frame and its handles scale with the paper.
padding The gap between the element and the freeTransform frame. It defaults to 3px.

API

The joint.ui.FreeTransform objects provide the following methods:

render() Render the free transform widget. You should call this right after you instantiate the free transform object.
remove() Remove the free transform widget.
joint.ui.FreeTransform.clear(paper) Clear all the free transform widgets from a JointJS paper.

Events

The plugin fires the following events.

Event Name Handler Signature Description
resize:start (evt: dia.Event) Triggered when the user starts resizing the element.
resize (evt: dia.Event) Triggered while the element is being resized.
resize:stop (evt: dia.Event) Triggered when the user finishes resizing the element.
rotate:start (evt: dia.Event) Triggered when the user starts rotating the element.
rotate (evt: dia.Event) Triggered while the element is being rotated.
rotate:stop (evt: dia.Event) Triggered when the user finishes rotating the element.