Skip to main content

Transforamtion

We're gonna explore different block transformation featrues like draggable, resizable, rotatable.

Draggable​

Draggable basic transformation feature. You can simply enable this feature by passing draggable option as true in blocks.
Additonally you can capture state of the block on drag event by passing callable function to onDrag option.

warning

When you are using these transformation features you need to pass addtional selectale option as true. This will affect how you blocks beahve each other realted to zIndex.

function draggingAction() {
    console.log("dragging")
}
new Reactangle({...options, draggable: true, onDrag: draggingAction})

You can determine which axis you want to drag your block. Try to drag rectangle block in x and y axis, see what axis changeing. In our example only y axis will change.

new Reactangle({...options, dragX: false, dragY: true})

Resizing​

Resizing comes as in bounding box with 8 corners resizing, four corners resizing (top-left, top-right, bottom-left, bottom-right) and four side resizing (top, left, bottom, right). These corners calling as Hot Corners in blocks, these corners more adjustable to modification you can customize them as you want. More about Customizing hot corners

new Reactangle({...options, resizable: true})

You must always define how much resizement you want to do in blocks. Otherwise blocks will not grow and shrink without minWidth, maxWidth, minHeight and maxWidth options.

new Reactangle({...options, resizable: true, maxWidth: Infinity, maxHeight: 160})

Blocks support vertical and horizontal flip resizing you just need to pass which fliping you want.

new Reactangle({...options, horizontalFlipResize: true, verticalFlipResize: true})

You can disable some of the corner and side resizing on blocks.

new Reactangle({...options, resizeTopLeft: false, resizeTop: false, resizeTopRight: false })

Rotatable​

Rotating coming in 4 hot corners (top-left, top-right, bottom-left, bottom-right). As in previus examples you can choose which side of rotations you want to control and you can listen whenever this rotaiton changes by onRotate option.

function rotatingAction() {
    console.log("dragging")
}
new Reactangle({...options, rotatable: true,  onRotate: rotatingAction })