import QtQuick 2.11
import QtQuick.Window 2.11

Window {
    id: window

    property int scalePercentage: 100
    readonly property real scaleFactor: scalePercentage / 100

    property real width_: 500
    property real height_: 50

    visible: true
    width: width_ * scaleFactor
    height: height_ * scaleFactor
    title: qsTr("Hello World")

    onScaleFactorChanged: {
        bufferedBackground.color = Qt.rgba(Math.random(), Math.random(), Math.random())
        bufferedBackground.color = "#d5d5d5"
    }

    MouseArea {
        anchors.fill: parent

        acceptedButtons: Qt.LeftButton | Qt.RightButton

        onClicked: {
            var step = 25
            var minimum = 50
            var maximum = 200
            if ((mouse.button & Qt.RightButton))
            {
                if (window.scalePercentage + step > maximum)
                    scalePercentage = minimum
                else
                    scalePercentage += step
            } else {
                if (window.scalePercentage - step < minimum)
                    scalePercentage = maximum
                else
                    scalePercentage -= step
            }
        }
    }

    Item {

        width: 500
        height: width
        transformOrigin: Item.TopLeft
        scale: window.scaleFactor

        Item {
            id: normal
            width: parent.width / 2
            height: parent.height

            Rectangle {
                id: normalBackground
                anchors.fill: parent

                color: "#d5d5d5"
            }

            Text {
                x: 20

                text: "Normal: Text"

                renderType: Text.QtRendering
                textFormat: Text.PlainText
            }
        }

        Item {
            id: buffered

            layer.enabled: true
            layer.smooth: true
            layer.samples: 8
            layer.textureSize: Qt.size(buffered.width * scaleFactor, buffered.height * scaleFactor)

            x: parent.width / 2
            width: parent.width / 2
            height: parent.height

            Rectangle {
                id: bufferedBackground
                anchors.fill: parent

                color: "#d5d5d5"
            }

            Text {
                x: 20

                text: "Layered: Text"

                renderType: Text.QtRendering
                textFormat: Text.PlainText
            }
        }

    }

    Text {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom

        width: 50
        height: 20

        text: window.scalePercentage + "%"
        color: "black"
    }
}