Rectangle rotation and width depends on mouse position

[nhojyer07]

Hi guys! I have here a QML:

@import QtQuick 1.0

Rectangle {
property alias running: tmr.running
property alias angle: linerotation.angle
x: 0; y: 0
width: 20
height: 20
color: "#006903"
radius: 9
border.width: 2
transform:
Rotation {
id: linerotation
}
Timer {
id: tmr
interval: 10000
onTriggered: {rect.noofline--;parent.destroy()}
}
}@

and the screen:

@import QtQuick 1.0
import "game.js" as Game

Rectangle {
id: rect
width: 360
height: 360

property int noofline: 0

MouseArea {
    id: linearea
    anchors.fill: parent
    z: 2
    onPressed: {
        Game.func(mouse, mouseX, mouseY)
    }
    onMousePositionChanged: {
        Game.func2(mouse)
    }
    onReleased: {
        Game.func3()
    }
}

}@

and the javascript file:

@var component
var object = null;
var tempX
var tempY

function func(mouse, x, y) {
if (noofline < 3) {
var component = Qt.createComponent("Line.qml")
object = component.createObject(rect)
object.x = mouse.x - object.width / 2
object.y = mouse.y - object.height / 2
noofline++
tempX = x
tempY = y
}
}

function func2(mouse) {
if ((object.angle >= 0 && object.angle < 90) || (object.angle > 270 && object.angle <= 360)) {
if (mouse.x > tempX) {
object.width += (mouse.x - tempX)
} else {
if (object.width - (tempX - mouse.x) > 20)
object.width -= (tempX - mouse.x)
}
}
if (mouse.y > tempY) {
object.angle += (mouse.y - tempY)
} else {
object.angle -= (tempY - mouse.y)
}
tempX = mouse.x
tempY = mouse.y
}
function func3() {
if (object != null) {
object.running = true
object = null
}
}
@

what I have done as of now is moving in the x axis changes the width of the created rectangle and moving on the y axis rotates it.. (just made a test on how to do this)

what I need to do is change its rotation while at the same time change its width (or height if that's better) while the mouse position is changed.. any thoughts on this? thank you.