How to use DropArea ?

sanwangshan

Forgive my poor English.

I write two samples as following.

Sample1:
@import QtQuick 2.0

Item {
width: 200; height: 200

DropArea {
    x: 75; y: 75
    width: 100; height: 100

    Rectangle {
        anchors.fill: parent
        color: "green"
    }

    onEntered: console.debug("onEntered")
    onExited: console.debug('onExited')

    DropArea {
        width: 50; height: 50

        Rectangle {
            anchors.fill: parent
            color: "blue"
        }

        onEntered: console.debug("onEntered 2")
        onExited: console.debug('onExited 2')
    }
}

Rectangle {
    x: 10; y: 10
    width: 20; height: 20
    color: "red"

    Drag.active: dragArea.drag.active

    MouseArea {
        id: dragArea
        anchors.fill: parent

        drag.target: parent
    }
}

}@

Sample2:
@import QtQuick 2.0

Item {
width: 200; height: 200

Rectangle {
    x: 75; y: 75
    width: 100; height: 100
    color: "green"

    DropArea {
        anchors.fill: parent

        onEntered: console.debug("onEntered")
        onExited: console.debug('onExited')

    }

    Rectangle {
        width: 50; height: 50
        color: "blue"

        DropArea {
            anchors.fill: parent

            onEntered: console.debug("onEntered 2")
            onExited: console.debug('onExited 2')
        }
    }
}

Rectangle {
    x: 10; y: 10
    width: 20; height: 20
    color: "red"

    Drag.active: dragArea.drag.active

    MouseArea {
        id: dragArea
        anchors.fill: parent

        drag.target: parent
    }
}

}@

You see. The two samples is similiar. But their outputs is different.
You can do as following to test the two samples:

Drag the 'red' rectangle to 'blue' rectangle.
Then drag the 'red' rectangle to 'green' rectangle.
Then drag the 'red' rectangle back to 'blue' rectangle.
Finally drag the 'red' rectangle back to 'white' background.
I use qmlscene to test the two samples in qt5.0.1.
The sample1's output is:
@onEntered

onEntered 2

onExited 2

onEntered 2

onExited 2

onExited@

The sample2's output is:
@onEntered 2

onExited 2

onEntered

onExited@

So Where is the problem?

tzander

bq. So Where is the problem?

That a good question, what is the problem? Why did you write here?

sanwangshan

My questions are :
1) Why the sample1’s output is different to sample2’s output ?
2) How to emit the signals (like onEntered / onExited) of DropArea ? I am confused to see the outputs of sample1 and sample2 ?

sanwangshan

Sorry for my poor English.

I have to explain my question2 once more.

How to emit the signals (like onEntered / onExited) of DropArea ? I am confused to see the outputs of sample1 and sample2 ?
----------- l only meant : What are the principles the qt quick follows to emit signals (like onEntered / onExited) of DropArea ?

sanwangshan

I can write another sample as following.
Sample3
@import QtQuick 2.0

Item {
width: 500; height: 500

Rectangle {
    id: rectGreen
    x: 50; y: 50
    width: 100; height: 100
    color: "green"

    DropArea {
        id: dropArea1

        anchors.fill: parent

        onEntered: console.debug("onEntered")
        onExited: console.debug('onExited')
    }
}

Rectangle {
    id: rectBlue
    x: 100; y: 50; z: 10
    width: 100; height: 100
    color: "blue"
    opacity: 0.5

    DropArea {
        id: dropArea2

        anchors.fill: parent

        onEntered: console.debug("onEntered 2")
        onExited: console.debug('onExited 2')
    }
}

Rectangle {
    id: rectDrag

    x: 10; y: 10; z:20
    width: 20; height: 20
    color: "red"

    Drag.active: dragArea.drag.active

    MouseArea {
        id: dragArea
        anchors.fill: parent

        drag.target: parent
    }
}

}@
I do as following to test this sample:

Drag 'rectDrag' to 'rectGreen'. --- console print: onEntered
Then drag 'rectDrag' to the intersection between 'rectGreen' and 'rectBlue'. --- console print nothing (Why ? This is my third question.)
Then drag 'rectDrag' to 'rectBlue'. --- console print: onExited onEntered 2
Then drag 'rectDrag' back to the intersection between 'rectGreen' and 'rectBlue'. --- console print nothing (Why ? This is my fourth question.)
Then drag 'rectDrag' to 'rectGreen'. --- console print: onExited 2 onEntered
Finally drag 'rectDrag' back to 'white' background. --- console print: onExited
I use qmlscene to test this samples in qt5.0.1. (os: windows 7)

tzander

Not sure why you are unclear about these, maybe you missed some basics of QML;

items lower in the file are placed at higher z-index (i.e. on top) of stuff that came before it.
an mouse area or drop area on top of another blocks events from the one below it.

sanwangshan

Thank you for your reply, Thomas Zander.

I know the basics of QML you mention.
My problem is that the behavior of the samples I have described doesn't follow the 'basic 2' (an mouse area or drop area on top of another blocks events from the one below it.).

Check the 'Sample3'. 'dropArea2' is on top of 'dropArea1'.
When I do "2) Then drag ‘rectDrag’ to the intersection between ‘rectGreen’ and ‘rectBlue’.", the 'dropArea2' should block 'dropArea1' (console should print: onExited 2 onEntered) following the 'basic 2'. But it doesn't happen, so console prints nothing.
Notice: you should do "1) Drag ‘rectDrag’ to ‘rectGreen’. —- console print: onEntered" first, then do "2) Then drag ‘rectDrag’ to the intersection between ‘rectGreen’ and ‘rectBlue’.".

Similiarly, you can check the 'Sample1' and 'Sample2'.
In 'Sample1', when I do "1) Drag the ‘red’ rectangle to ‘blue’ rectangle.", the console should print 'onEntered 2', but the console print 'onEntered onEntered 2'.
The DropArea hierarchy in 'Sample1' is the same as DropArea hierarchy in 'Sample2'. But their behavior is different.

stevenhurd

I am definitely seeing what you are seeing sanwangshan. It definitely appears that there are some peculiarities when rectangles intersect that have child DropAreas. I've been looking at your samples for about 15 minutes and still can't quite figure out how to characterize the behavior.

sanwangshan

Yes, my question is like what stevenhurd said.

sanwangshan

Everyone who is interesting in this thread should watch "QTBUG-30305":https://bugreports.qt-project.org/browse/QTBUG-30305?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel .