FreeTransform

FreeTransform creates a control panel above an element that allows resizing in any direction or rotation.

Learn more about the FreeTransform plugin.

constructor

constructor(opt?: FreeTransform.Options);

The ui.FreeTransform constructor accepts several parameters:

allowOrthogonalResize

[optional] Set to false if you only want the four corner handles to be displayed. The default is true.

allowRotation

[optional] Set to false if you want the rotating handle to be omitted from the handles. The default is true.

cellView

[optional] The view for the element you want the free transform handles to be displayed for.

clearAll

[optional] If set to true (the default value), clear all the existing free transforms from the page when a new free transform is created. This is the most common behavior as it is assumed that there is only one free transform visible on the page at a time. However, some applications might need to have more than one free transform visible. In this case, set clearAll to false (and make sure to call remove() once you don't need a free transform anymore).

clearOnBlankPointerdown

[optional] If set to true (the default value), clear the free transform when a user clicks the blank area of the paper.

maxHeight

[optional] The maximum height allowed for the element when resizing. The default is Infinity.

It can be defined as a number, or as a function returning a number according to the signature (cell, freeTransform, direction) => number, where:

• cell is the current cell.
• freeTransform is the current FreeTransform instance (for context).
• direction is the direction of the handle that the user is interacting with.

maxWidth

[optional] The maximum width allowed for the element when resizing. The default is Infinity.

It can be defined as a number, or as a function returning a number according to the signature (cell, freeTransform, direction) => number, where:

• cell is the current cell.
• freeTransform is the current FreeTransform instance (for context).
• direction is the direction of the handle that the user is interacting with.

minHeight

[optional] The minimum height allowed for the element when resizing. The default is 0.

It can be defined as a number, or as a function returning a number according to the signature (cell, freeTransform, direction) => number, where:

• cell is the current cell.
• freeTransform is the current FreeTransform instance (for context).
• direction is the direction of the handle that the user is interacting with.

minWidth

[optional] The minimum width allowed for the element when resizing. The default is 0.

It can be defined as a number, or as a function returning a number according to the signature (cell, freeTransform, direction) => number, where:

• cell is the current cell.
• freeTransform is the current FreeTransform instance (for context).
• direction is the direction of the handle that the user is interacting with.

padding

[optional] The gap between the element and the free transform frame. It defaults to 3px.

preserveAspectRatio

[optional] Set to true if you want the resizing to preserve the aspect ratio of the element. The default is false.

resizeDirections

[optional] 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.

resizeGrid

[optional] Set to { width: number, height: number } if you want the resizing to snap to grid by specified dimensions. The default is undefined.

rotateAngleGrid

[optional] The steps in angle when rotating the element. The default is 15.

useBordersToResize

[optional] If set to true, all orthogonal resize handles are hidden and expanded to make all of their respective FreeTransform borders interactive. The default is false.

The diagonal resize handles are not affected by this option, except that their border-radius is changed to 0px (so that there are no non-interactive holes between the diagonal resize handles and the hidden orthogonal resize handles around them).

This option operates independently from other options such as allowOrthogonalResize and resizeDirections. Notably, if this option were applied on a FreeTransform with only diagonal resize handles enabled, the user would not see any difference.

usePaperScale

[optional] If set to true, the free transform frame and its handles scale with the paper.

Methods

remove()

freeTransform.remove(): this;

Remove the free transform widget.

render()

freeTransform.render(): this;

Render the free transform widget. You should call this right after you instantiate the free transform object.

Static Methods

clear()

ui.FreeTransform.clear(paper: dia.Paper): void;

Clear all the free transform widgets from a JointJS paper.

Events

resize:start

Triggered when the user starts resizing the element. The handler is passed the event object as an argument.

resize

Triggered while the element is being resized. The handler is passed the event object as an argument.

resize:stop

Triggered when the user finishes resizing the element. The handler is passed the event object as an argument.

rotate:start

Triggered when the user starts rotating the element. The handler is passed the event object as an argument.

rotate

Triggered while the element is being rotated. The handler is passed the event object as an argument.

rotate:stop

Triggered when the user finishes rotating the element. The handler is passed the event object as an argument.

Types

Directions

type Directions = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

Options

interface Options extends mvc.ViewOptions<undefined> {
    cellView?: dia.CellView;
    cell?: dia.Cell;
    paper?: dia.Paper;
    rotateAngleGrid?: number;
    resizeGrid?: { width: number, height: number };
    preserveAspectRatio?: boolean;
    minWidth?: SizeConstraint;
    minHeight?: SizeConstraint;
    maxWidth?: SizeConstraint;
    maxHeight?: SizeConstraint;
    allowOrthogonalResize?: boolean;
    allowRotation?: boolean;
    clearAll?: boolean;
    clearOnBlankPointerdown?: boolean;
    usePaperScale?: boolean;
    padding?: dia.Padding;
    resizeDirections?: Directions[];
    useBordersToResize?: boolean;
}

SizeConstraint

type SizeConstraint = number | ((cell: dia.Cell, FreeTransform: FreeTransform, direction: Directions) => number);