Как изменить размер элемента после трансформации Scale?

В QML есть такая проблема. Если элемент смасштабировать, то по-сути смасштабируется только его графическое представление, а, например его свойства width и height останутся прежними. С этим я более-менее разобрался:

https://webhamster.ru/mytetrashare/index/mtb0/1516351538jyd6u91xdf

Но все же хотелось бы, чтобы при масштабировании размеры объекта width и height тоже менялись. Я, например, сейчас пытаюсь разместить смасштабированные (уменьшенные) объекты на GridLayout, и не могу это толком сделать, потому что их width и height остались прежними. И GridLayout резервирует под них место так, как если бы они были не смасштабированы. Те же самые проблемы возникают и при выравнивании: выравниваются несмасштабированные прямоугольники элементов.

Я пытаюсь задать width и height вручную, с учетом масштаба, но тогда происходит что-то странное: некоторые подэлементы исчезают, MouseArea, развернутое на весь элемент, не обрабатывается.

В общем, никак не могу решить эту проблему.

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.2

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    GridLayout {
        id: grid
        anchors.fill: parent
        columnSpacing: 0
        Rectangle {
                id: plate
                Layout.leftMargin: (Layout.preferredWidth - Layout.preferredWidth*scale.xScale)/2 //это свойство автоматом для остальных Rectangle
                Layout.topMargin: Layout.preferredHeight - Layout.preferredHeight*scale.yScale
                Layout.preferredHeight: Layout.preferredWidth/2
                Layout.preferredWidth: window.width/3
                color: "lightblue"
                transform: [
                    Rotation {
                        id: rot
                        origin.x: plate.width/2
                        origin.y: plate.height/2
                        angle: 0
                        NumberAnimation on angle {
                            id: na
                            running: false
                            loops: Animation.Infinite
                            from: 0; to: 360
                            duration: 3000
                        }
                    },
                    Scale {
                        id: scale
                        xScale: 1
                        yScale: 1
                    }
                ]
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        na.running = true
                        scale.xScale = 0.5
                        scale.yScale = 0.5
                    }
                }
            }
        Rectangle {
                id: plate2
                Layout.topMargin: Layout.preferredHeight - Layout.preferredHeight*scale2.yScale
                Layout.preferredHeight: Layout.preferredWidth/2
                Layout.preferredWidth: window.width/3
                color: "lightgreen"
                transform: [
                    Rotation {
                        id: rot2
                        origin.x: plate2.width/2
                        origin.y: plate2.height/2
                        angle: 0
                        NumberAnimation on angle {
                            id: na2
                            running: false
                            loops: Animation.Infinite
                            from: 0; to: 360
                            duration: 3000
                        }
                    },
                    Scale {
                        id: scale2
                        xScale: 1
                        yScale: 1
                    }
                ]
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        na2.running = true
                        scale2.xScale = 0.5
                        scale2.yScale = 0.5
                    }
                }
            }
        Rectangle {
                id: plate3
                Layout.topMargin: Layout.preferredHeight - Layout.preferredHeight*scale3.yScale
                Layout.preferredHeight: Layout.preferredWidth/2
                Layout.preferredWidth: window.width/3
                color: "tomato"
                transform: [
                    Rotation {
                        id: rot3
                        origin.x: plate3.width/2
                        origin.y: plate3.height/2
                        angle: 0
                        NumberAnimation on angle {
                            id: na3
                            running: false
                            loops: Animation.Infinite
                            from: 0; to: 360
                            duration: 3000
                        }
                    },
                    Scale {
                        id: scale3
                        xScale: 1
                        yScale: 1
                    }
                ]
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        na3.running = true
                        scale3.xScale = 0.5
                        scale3.yScale = 0.5
                    }
                }
            }
}
}