The <pacem-rescale> behavioral element is meant to add resizing/rescaling capabilities to a PacemElement (mainly using a mouse device).
Cursor changes give hints about rescaling capabilities on decorated elements.

Basic rescaling

In its raw fashion, the PacemRescaleElement scales freely the target custom element.

Example:

Constrained rescaling

You can also tweak <pacem-rescale> properties for more desirable results:

• handles: defines the enabled handles for rescaling, you're supposed to provide a spaced combination of top,right,bottom,left, otherwise all (default).
• maxWidth: the maximum width allowed when rescaling.
• minWidth: the minimum width allowed when rescaling.
• maxHeight: the maximum height allowed when rescaling.
• minHeight: the minimum height allowed when rescaling.
• keepProportions: whether to constrain or not the proportions between the 2 dimensions.

Example:

Virtual rescaling

Advanced use of <pacem-rescale> might exploit its dispatched events:

• rescalestart: fires when an available handle gets pressed.
• rescale: fires when a pressed handle gets moved around (cancelable).
• rescaleend: fires when the handle gets released.

The popped up custom event carries the following detail structure:

• element: the element being rescaled.
• targetRect: the eventually rendered Rect ({x: number, y: number, width: number, height: number}).
• currentPosition: the current handle position Point ({x: number, y: number});

Example:

The Alltogether!

Feel free to play with the cofiguration: