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);