Skip to main content

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 a number, or a function returning a number (cell) => number;.

maxWidth​

[optional] The maximum width allowed for the element when resizing. The default is Infinity. It can be a number, or a function returning a number (cell) => number;.

minHeight​

[optional] The minimum height allowed for the element when resizing. The default is 0. It can be a number, or a function returning a number (cell) => number;.

minWidth​

[optional] The minimum width allowed for the element when resizing. The default is 0. It can be a number, or a function returning a number (cell) => number;.

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.

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[];
}

SizeConstraint​

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