<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[[SOLVED]QML mouse selection rectangle]]></title><description><![CDATA[<p dir="auto">Hi everyone,<br />
just throwing this topic here in search of ideas if anyone has already stumbled on this matter.<br />
I need to implement a mouse selection area in QML.<br />
Something like this:<br />
<a href="http://www.codeproject.com/KB/WPF/SimpleDragSelection/SimpleDragSelection1.png" target="_blank" rel="noopener noreferrer nofollow ugc">http://www.codeproject.com/KB/WPF/SimpleDragSelection/SimpleDragSelection1.png</a></p>
<p dir="auto">I am inside a Flickable element containing a Canvas.<br />
My idea is to do it with some drag&amp;drop properties, showing and resizing a semi-transparent Rectangle as long as the mouse button is pressed.</p>
<p dir="auto">Is there any efficient way you can think of ?<br />
Any help is greatly appreciated.<br />
If I come up with a working solution soon, I will post it here.</p>
<p dir="auto">Thanks !</p>
]]></description><link>https://forum.qt.io/topic/52249/solved-qml-mouse-selection-rectangle</link><generator>RSS for Node</generator><lastBuildDate>Sun, 14 Jun 2026 03:25:23 GMT</lastBuildDate><atom:link href="https://forum.qt.io/topic/52249.rss" rel="self" type="application/rss+xml"/><pubDate>Sun, 15 Mar 2015 11:42:27 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to [SOLVED]QML mouse selection rectangle on Tue, 30 Oct 2018 22:20:10 GMT]]></title><description><![CDATA[<p dir="auto">In case you come across this a bit more complete example, including handling of contentY changing because of scroll...:</p>
<p dir="auto">MouseArea<br />
{id: selectionMouseArea<br />
property alias selectionRect : selectionRect<br />
property int initialXPos<br />
property int initialYPos<br />
property int mouseX<br />
property int mouseY<br />
anchors.fill: grid<br />
acceptedButtons: Qt.LeftButton | Qt.MiddleButton | Qt.RightButton</p>
<pre><code>Rectangle
{id: selectionRect
    visible: false
    x: 0
    y: 0
    z: 99
    width: 0
    height: 0
    rotation: 0
    radius: 5
    color: "#5F227CEB"
    border.width: 1
    border.color: "#103A6E"
    transformOrigin: Item.TopLeft
} //selectionRect

 //moving close to top or bot end scrolls view depending on speed
Timer {repeat: true;running: ( parent.mouseY &lt; 0 &amp;&amp; grid.contentY&gt;0 ) &amp;&amp; parent.pressed &amp;&amp; !grid.atYBeginning;
    interval: 10; onTriggered: grid.contentY -= (-1 * parent.mouseY), returnToBounds()
}
Timer {repeat: true;running: ( parent.mouseY &gt; grid.height) &amp;&amp; parent.pressed  &amp;&amp; !grid.atYEnd
    interval: 10; onTriggered: grid.contentY += 1 * ( parent.mouseY -grid.height ), returnToBounds()
}

//makes the rectangle smooth
Connections
{
    target: grid
    onContentYChanged: //selectionRect needs to be depending onConentY as its size and position depends on that
    {
        if (selectionRect.rotation == 0 || selectionRect.rotation == -180)
        {
            selectionRect.y = selectionMouseArea.initialYPos - grid.contentY
            selectionRect.height = Math.abs(selectionMouseArea.mouseY - selectionMouseArea.initialYPos + grid.contentY)
            selectionRect.width = Math.abs(selectionMouseArea.mouseX - selectionRect.x)
        }
        else
        {
            selectionRect.y =  selectionMouseArea.initialYPos - grid.contentY
            selectionRect.height = Math.abs(selectionMouseArea.mouseX - selectionRect.x)
            selectionRect.width = Math.abs(selectionMouseArea.mouseY - selectionRect.y)
        }
    }
}

onClicked:
{
    if(mouse.button == Qt.RightButton)
    {
        mouse.accepted=false
        return;
    }
    if ( wasHeld || mouse.modifiers &amp; Qt.ControlModifier )
        return;
    initialXPos=mouse.x; initialYPos=mouse.y;mouseX=mouse.x;mouseY=mouse.y
    
}
onPressed:
{
    if(mouse.button == Qt.RightButton)
    {
        mouse.accepted=false
        return;
    }
    if (mouse.modifiers &amp; Qt.ControlModifier)
        {
        console.log("ControlModifier");
        mouse.accepted=false
        return;
    }
    if (mouse.button == Qt.LeftButton)
    {


        initialXPos = mouse.x
        initialYPos = mouse.y+grid.contentY
        
        grid.interactive = false
        selectionRect.x = mouse.x
        selectionRect.y = mouse.y
        selectionRect.width = 0
        selectionRect.height = 0
    }
    if(itemAt(mouse.x,mouse.y+grid.contentY).hovered)
        mouse.accepted=false
    if(itemAt(mouse.x,mouse.y+grid.contentY).hovered===false)
    {
        ufm().resetSelection()
    grid.currentIndex=-1
}
}
onPositionChanged:
{
  //  console.log(selectionRect.height);
   // console.log(selectionRect.width);

    if(mouse.button == Qt.RightButton)
    {
        mouse.accepted=false
        return;
    }
    if (mouse.modifiers &amp; Qt.ControlModifier)
        {
        return;
    }
    selectionRect.visible = true

    if (selectionRect.visible === false)
    {
        selectionRect.x = 0
        selectionRect.y = 0
        selectionRect.width = 0
        selectionRect.height = 0

        initialXPos = 0
        initialYPos = 0
    }

    if (selectionRect.visible === true)
    {
        mouseX = mouse.x
        mouseY = mouse.y
        if (Math.abs(mouseX, initialXPos)&gt;30) wasHeld = true
        if (Math.abs(mouseY, initialYPos)&gt;30) wasHeld = true

        if (mouse.x &gt;= initialXPos)
        {
            if (mouse.y+grid.contentY &gt;= initialYPos)
                selectionRect.rotation = 0
            else
                selectionRect.rotation = -90
        }
        else if (mouse.x &lt;= initialXPos)
        {
            if (mouse.y+grid.contentY &gt;= initialYPos)
                selectionRect.rotation = 90
            else
                selectionRect.rotation = -180
        }
        if (selectionRect.rotation == 0 || selectionRect.rotation == -180)
        {               
            selectionRect.y = initialYPos - grid.contentY
            selectionRect.height = Math.abs(mouse.y - initialYPos + grid.contentY)
            selectionRect.width = Math.abs(mouse.x - selectionRect.x)
        }
        else
        {
            selectionRect.y = initialYPos - grid.contentY
            selectionRect.height = Math.abs(mouse.x - selectionRect.x)
            selectionRect.width = Math.abs(mouse.y - selectionRect.y)
        }
    }
}

onReleased:
{
    selectionRect.visible = false

    // restore the Flickable duties
    grid.interactive = true
}
onWheel:
{
    if (wheel.angleDelta.y &gt; 0 &amp;&amp; !grid.atYBeginning) grid.contentY -= 50
    else if (wheel.angleDelta.y &lt; 0 &amp;&amp; !grid.atYEnd) grid.contentY += 50
}
</code></pre>
<p dir="auto">}</p>
]]></description><link>https://forum.qt.io/post/490164</link><guid isPermaLink="true">https://forum.qt.io/post/490164</guid><dc:creator><![CDATA[damianatorrpm]]></dc:creator><pubDate>Tue, 30 Oct 2018 22:20:10 GMT</pubDate></item><item><title><![CDATA[Reply to [SOLVED]QML mouse selection rectangle on Sun, 15 Mar 2015 19:38:37 GMT]]></title><description><![CDATA[<p dir="auto">Add [SOLVED] to the beginning of the subject line.</p>
]]></description><link>https://forum.qt.io/post/265487</link><guid isPermaLink="true">https://forum.qt.io/post/265487</guid><dc:creator><![CDATA[xargs1]]></dc:creator><pubDate>Sun, 15 Mar 2015 19:38:37 GMT</pubDate></item><item><title><![CDATA[Reply to [SOLVED]QML mouse selection rectangle on Sun, 15 Mar 2015 14:16:40 GMT]]></title><description><![CDATA[<p dir="auto">Now how the heck do I mark this thread as "solved" ?<br />
Quoting:</p>
<blockquote>
<p dir="auto">The ‘thread tools’ at the bottom of a thread let the poster or moderators ‘mark a thread as solved’. This will add a ‘Solved’ tag to the post in the category view to help people find solved posts easily.</p>
</blockquote>
<p dir="auto">The only option I have is "Delete topic"...nice...</p>
]]></description><link>https://forum.qt.io/post/265453</link><guid isPermaLink="true">https://forum.qt.io/post/265453</guid><dc:creator><![CDATA[mcallegari79]]></dc:creator><pubDate>Sun, 15 Mar 2015 14:16:40 GMT</pubDate></item><item><title><![CDATA[Reply to [SOLVED]QML mouse selection rectangle on Sun, 15 Mar 2015 14:09:41 GMT]]></title><description><![CDATA[<p dir="auto">OK, took me a couple of hours to implement it.<br />
Here's the code. Might not be 100% perfect but it gives the idea:</p>
<pre><code>Rectangle {
        id: selectionRect
        visible: false
        x: 0
        y: 0
        z: 99
        width: 0
        height: 0
        rotation: 0
        color: "#5F227CEB"
        border.width: 1
        border.color: "#103A6E"
        transformOrigin: Item.TopLeft
    }

    MouseArea {
        id: selectionMouseArea
        property int initialXPos
        property int initialYPos
        property bool justStarted

        anchors.fill: parent
        z: 2 // make sure we're above other elements
        onPressed: {
            if (mouse.button == Qt.LeftButton &amp;&amp; mouse.modifiers &amp; Qt.ShiftModifier)
            {
                console.log("Mouse area shift-clicked !")
                // initialize local variables to determine the selection orientation
                initialXPos = mouse.x
                initialYPos = mouse.y
                justStarted = true

                flickableView.interactive = false // in case the event started over a Flickable element
                selectionRect.x = mouse.x
                selectionRect.y = mouse.y
                selectionRect.width = 0
                selectionRect.height = 0
                selectionRect.visible = true
            }
        }
        onPositionChanged: {
            if (selectionRect.visible == true)
            {
                if (justStarted == true &amp;&amp; (mouse.x != initialXPos || mouse.y != initialYPos))
                {
                    if (mouse.x &gt;= initialXPos)
                    {
                        if (mouse.y &gt;= initialYPos)
                           selectionRect.rotation = 0
                        else
                           selectionRect.rotation = -90
                    }
                    else
                    {
                        if (mouse.y &gt;= initialYPos)
                            selectionRect.rotation = 90
                        else
                            selectionRect.rotation = -180
                    }

                    justStarted = false
                    //console.log("Selection rotation: " + selectionRect.rotation)
                }

                if (selectionRect.rotation == 0 || selectionRect.rotation == -180)
                {
                    selectionRect.width = Math.abs(mouse.x - selectionRect.x)
                    selectionRect.height = Math.abs(mouse.y - selectionRect.y)
                }
                else
                {
                    selectionRect.width = Math.abs(mouse.y - selectionRect.y)
                    selectionRect.height = Math.abs(mouse.x - selectionRect.x)
                }
            }
        }

        onReleased: {
            selectionRect.visible = false
            // restore the Flickable duties
            flickableView.interactive = true
        }
    }
</code></pre>
]]></description><link>https://forum.qt.io/post/265451</link><guid isPermaLink="true">https://forum.qt.io/post/265451</guid><dc:creator><![CDATA[mcallegari79]]></dc:creator><pubDate>Sun, 15 Mar 2015 14:09:41 GMT</pubDate></item><item><title><![CDATA[Reply to [SOLVED]QML mouse selection rectangle on Sun, 15 Mar 2015 12:17:15 GMT]]></title><description><![CDATA[<p dir="auto">Adding one bit.</p>
<p dir="auto">The Flickable item steals every mouse click.<br />
I want the selection rectangle to be activated with the SHIFT key modifier only.<br />
Is there a way to tell Flickable to ignore the mouse events if the SHIFT key is pressed ?</p>
]]></description><link>https://forum.qt.io/post/265445</link><guid isPermaLink="true">https://forum.qt.io/post/265445</guid><dc:creator><![CDATA[mcallegari79]]></dc:creator><pubDate>Sun, 15 Mar 2015 12:17:15 GMT</pubDate></item></channel></rss>