import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3

Window {
    id: window
    width: 520
    height: 440
    visible: true
    title: "contentY: " + view.contentY.toFixed(2)
        + ", originY: " + view.originY.toFixed(2)
        + ", height: " + view.height.toFixed(2)
        + ", contentHeight: " + view.contentHeight.toFixed(2)
        + ", delegateHeight: " + (tumbler.height / tumbler.visibleItemCount).toFixed(2)

    property Item view: tumbler.contentItem.children[0]

    Tumbler {
        id: tumbler
        model: 30
        currentIndex: 15
        width: 200
        height: parent.height
        wrap: false
        visibleItemCount: 7

        delegate: Text {
            text: "index = " + index + ", displacement = " + Tumbler.displacement.toFixed(2)
            color: "black"
            opacity: tumbler.currendIndex === index ? 1.0 : 0.4 + Math.max(0, 1 - Math.abs(Tumbler.displacement)) * 0.6
            leftPadding: 12
            verticalAlignment: Text.AlignVCenter

            Rectangle {
                anchors.fill: parent
                color: "transparent"
                border.color: "black"
            }
        }
    }

    Rectangle {
        anchors.right: parent.right
        anchors.rightMargin: label.height
        width: 1
        height: tumbler.height / 2 - (tumbler.height / tumbler.visibleItemCount / 2)
        color: "black"

        Rectangle {
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            width: 5
            height: 1
            color: "black"
        }
    }
    Text {
        id: label
        text: "preferredHighlightBegin/End"
        anchors.left: parent.right
        rotation: 90
        transformOrigin: Item.TopLeft
    }
    Rectangle {
        anchors.right: parent.right
        anchors.rightMargin: label.height
        y: tumbler.height / 2 + (tumbler.height / tumbler.visibleItemCount / 2)
        width: 1
        height: tumbler.height - y
        color: "black"

        Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter
            width: 5
            height: 1
            color: "black"
        }
    }
}