Open topic with navigation

Drag Size

Block Group:	Logic
Icon:

Allows the user to resize an object by dragging that object or one of its children.

Input/Output Properties

These properties can take input and give output.

• dragStart (trigger)
• dragEnd (trigger)
• percents (boolean)
• minWidth (number)
• minHeight (number)
• maxWidth (number)
• maxHeight (number)
• dragMode (string)

dragStart specifies the mouse event that starts moving the object. Typically, this is the onMouseDown event for the child. In that case, find the event in the child’s Advanced properties and bind it to this property.

dragEnd specifies the event that stops moving the object. Typically, this is onMouseUpGlobal.

percents determines whether the minWidth, minHeight, maxWidth, and maxHeight properties are pixel values or percent values.

• TRUE: The width values are a percentage of the width of the parent of the element being resized. The height values are a percentage of the height of the parent of the element being resized.
• FALSE: The values are in pixels.

minWidth specifies the smallest width that the element can be resized to, as a pixel value or a percentage of its parent’s width.

minHeight specifies the smallest height that the element can be resized to, as a pixel value or a percentage of its parent’s height.

maxWidth specifies the largest width that the element can be resized to, as a pixel value or a percentage of its parent’s width.

maxHeight specifies the largest height that the element can be resized to, as a pixel value or a percentage of its parent’s height.

dragMode specifies restrictions on the direction of resizing.

• maxWidth: Resizing is not restricted.
• maxHeight: The user can resize the object vertically by dragging, but not horizontally.
• dragMode: The user can resize the object horizontally by dragging, but not vertically.

Output Properties

These properties can give output. They cannot take input.

• isResizing (boolean): Returns TRUE if the dragStart event for this block has occurred and the dragEnd event has not occurred yet.

Remarks

Use onMouseUpGlobal, not onMouseUp, to ensure that the resize works correctly, even if the parent’s size is restricted and the cursor leaves the parent bounds.

For the Cursor property, choose the Resize cursor.

Model

In this example, when the user drags the shape, the group resizes. The maximum height of the group is 100 pixels. Even if the cursor is outside the shape when the button is released, the drag finishes successfully.

Use Cases

Typically, a small child image in the lower right-hand corner of a group is used to resize the entire group. To create this effect:

1. Open dataflow for the group, and add a Drag Size block.
2. Select the child in the Outline.
3. Bind the child’s onMouseDown Advanced property to the block’s dragStart property.
4. Bind the child’s onMouseUpGlobal Advanced property to the block’s dragEnd property.

Make sure the Drag Size block belongs to the group, not the child. If it belongs to the child, delete the block and start again.