import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    property string asciiString: "The quick brown fox jumps over the lazy dog"
    property string unicodeString: "😙💆🤐👩😏😱🤐👷😷👦💋😃🕵👨🤠💁‍♂️💓💌😌😳👦💇‍♂️🤤😈😴💆🙍"

    ColumnLayout {
        anchors.centerIn: parent
        spacing: 10
        Repeater {
            model: [{
                    font: "Arial",
                    text: asciiString
                }, {
                    font: "Segoe UI Emoji",
                    text: asciiString
                }, {
                    font: "Arial",
                    text: unicodeString
                }, {
                    font: "Segoe UI Emoji",
                    text: unicodeString
                }]
            Text {
                id: label
                text: modelData.text
                font.family: modelData.font
                font.pointSize: 25
                textFormat: Text.PlainText
                renderType: Text.NativeRendering

                TextMetrics {
                    id: metrics
                    text: label.text
                    font: label.font
                }
                Rectangle {
                    z: -1
                    anchors.fill: parent
                    color: "lightgrey"
                }
                Rectangle {
                    z: 1
                    width: label.contentWidth
                    height: label.contentHeight
                    color: "transparent"
                    border.color: "green"
                }
                Rectangle {
                    z: 1
                    width: label.width
                    height: label.height
                    color: "transparent"
                    border.color: "yellow"
                }
                Rectangle {
                    z: 1
                    x: label.childrenRect.x
                    y: label.childrenRect.y
                    width: label.childrenRect.width
                    height: label.childrenRect.height
                    color: "transparent"
                    border.color: "blue"
                }
                Rectangle {
                    z: 1
                    //x: metrics.boundingRect.x
                    //y: metrics.boundingRect.y
                    width: metrics.boundingRect.width
                    height: metrics.boundingRect.height
                    color: "transparent"
                    border.color: "orange"
                }
                Rectangle {
                    z: 1
                    x: metrics.tightBoundingRect.x - metrics.boundingRect.x
                    y: metrics.tightBoundingRect.y - metrics.boundingRect.y
                    width: metrics.tightBoundingRect.width
                    height: metrics.tightBoundingRect.height
                    color: "transparent"
                    border.color: "red"
                }
            }
        }
    }
}