🔲 Rectangle Area Handler

The RectangleAreaHandler allow easy manipulation of a start and end vector2d. It can be used as an handler to select a particular area, to crop an image, etc…

start and end are always normalized for easy manipulation (ie value are in between 0 and 1). The real coordinate are available with realStartX, realStartY, realEndX, realEndY.

By default the size of the handler is undefined. It should fill a parent.

import QtQuick 2.0
import Qaterial 1.0 as Qaterial

Rectangle
{
  width: 200
  height: 200

  Qaterial.RectangleAreaHandler
  {
    // Selected area will be render in 200x200 parent
    anchors.fill: parent

    // Default start point will be 50px, 50px
    start: Qt.vector2d(0.25, 0.25)
    // Default end point will be 150px, 150px
    end: Qt.vector2d(0.75, 0.75)

    onMoved: (start, end) => console.log(`moved start: ${start}, end: ${end}`)
  }
}

Try it live

Behavior

The RectangleAreaHandler behavior can be customized in many ways.

• Grabbing area that can be controlled with inMargin, outMargin, handleSize
• Allow to reverse the rectangle with reverseAllowed, horizontalReverseAllowed, verticalReverseAllowed.
• Specify a minimum area with minSize. Note: When using minSize, it automatically disable reverse behavior.

Grabbing Area

Grabbing Area can be controlled with 3 parameters:

• handleSize: Control the visible render size of handles. Rendered in green in example.
• outMargin: Margin to allow easy grab outside of visual handle. Rendered in cyan in example.
• inMargin: Margin inside visual handles before grabbing the full rectangle for move. Rendered in orange in the example.

import Qaterial 1.0 as Qaterial

Qaterial.RectangleAreaHandler
{
  inMargin: 8
  outMargin: 16
  handleSize: 32
}

QaterialOnline

Reverse Allowed

By default the selection will reversed itself if user try to do a negative rectangle. This can be disabled by settings reversedAllowed to false. This can be finer tuned by using horizontalReverseAllowed or verticalReverseAllowed to only disable on a particular axis.

import Qaterial 1.0 as Qaterial

Qaterial.RectangleAreaHandler
{
  horizontalReverseAllowed: true
  verticalReverseAllowed: true
}

QaterialOnline

Minimum Size

By default the minimum size of made with start/end is 0. This behavior can be changed by setting minSize.

import Qaterial 1.0 as Qaterial

Qaterial.RectangleAreaHandler
{
  minSize: Qt.vector2d(0.1, 0.1)
}

When using minSize, it automatically disable reverse behavior

Customization

A RectangleAreaHandler is made a 4 handle and 4 handleLinker that can be customized.

• handle: x, y, width, height are set by the loader. It should have a hovered property.
• handleLinked: x, y are set by the loader. It should have a hovered and horizontal property.
  • When horizontal is true, width is set by loader, height should be set by the item.
  • When horizontal is false, height is set by loader, width should be set by the item.

import QtQuick 2.0
import Qaterial 1.0 as Qaterial
import QtQuick.Shapes 1.14

Qaterial.RectangleAreaHandler
{
  id: root

  handle: Rectangle
  {
    property bool hovered
    color: "#FF9800"

    width: 10
    height: 10

    scale: hovered ? 2 : 1
    Behavior on scale { NumberAnimation { duration: 100 } }

    rotation: 45
    antialiasing: true
  }

  handleLinker: Item
  {
    id: _linker
    property bool horizontal
    property bool hovered

    Shape
    {
      ShapePath
      {
        strokeWidth: hovered ? 4 : 2
        Behavior on strokeWidth { NumberAnimation { duration: 50 } }
        strokeColor: "#FF9800"
        strokeStyle: ShapePath.DashLine
        dashPattern: [ 1, 4 ]
        PathLine
        {
          x: horizontal ? _linker.width : 0
          y: horizontal ? 0 : _linker.height
        }
      }
    }
  }
}

QaterialOnline