Implementing a selection

[MBex]

Hello,

i have some rectangles organized in rows and columns in a Qml Grid.
But I dont have an idea how to realize a selection (including multi selection) like in QTableView.

Can anyone give me an hint about how to implement such an issue?

I am using Qml together with c++.
Qt 4.7.1

greets

[xeento]

As far as i know, pure qml doesn't support multiselection in data views. you have to write your own qml extension in c++ with this functionality

[MBex]

Ok I think I have to explain a little bit more.

I am not using a GridView in Qml. I would like to use a normal Grid due to the fact that I have a fixed number of rows and columns.

I know that I need to implement the selection on my own, but thats the problem. I have no idea how to implement it.

Does someone know an open source project where such a selection is implemented so that I can have a look at it?

[MBex]

Actually I am testing some possible implementations.

import Qt 4.7
 
Rectangle {
    id: main
    width: 1100
    height: 900
 
    MouseArea {
        id: area
        anchors.fill: parent
        hoverEnabled: true
        onPressed: {
            hoverEnabled = true;
            console.debug("x: " + mouse.x + "y: " + mouse.y);
            test.x = mouse.x;
            test.y = mouse.y;
            test.width = 1;
            test.height = 1;
            test.visible = true;
        }
        onReleased: {
            test.visible = false;
            hoverEnabled = false;
            console.debug("x: " + mouse.x + "y: " + mouse.y)
        }
 
        onMousePositionChanged: {
            test.width = mouse.x - test.x;
            test.height = mouse.y - test.y;
        }
    }
 
    Rectangle {
        id: test
        color:  "blue"
        opacity: 0.5
        visible: false
    }
}

import Qt 4.7

Rectangle {
    id: main
    width: 1100
    height: 900

    MouseArea {
        id: area
        anchors.fill: parent
        hoverEnabled: true
        onPressed: {
            hoverEnabled = true;
            console.debug("x: " + mouse.x + "y: " + mouse.y);
            test.x = mouse.x;
            test.y = mouse.y;
            test.width = 1;
            test.height = 1;
            test.visible = true;
        }
        onReleased: {
            test.visible = false;
            hoverEnabled = false;
            console.debug("x: " + mouse.x + "y: " + mouse.y)
        }

        onMousePositionChanged: {
            test.width = mouse.x - test.x;
            test.height = mouse.y - test.y;
        }
    }

    Rectangle {
        id: test
        color:  "blue"
        opacity: 0.5
        visible: false
    }
}

To copy to clipboard, switch view to plain text mode 

When I press and move the mouse, a rectangle should be shown in this area. If I move the mouse to the right bottom, the rectangle is displayed correctly. But if I move the mouse to the left top it works not correctly.

test.width = mouse.x - test.x;
   test.height = mouse.y - test.y;

test.width = mouse.x - test.x;
   test.height = mouse.y - test.y;

To copy to clipboard, switch view to plain text mode 

This code calculates negative values in this case. It looks like negative values could not be assigned to test.widht and test.heigth.
But if I do the following:

Rectangle {
   x: 50; y: 50;
   width: -10; height: -10
   color: "red"
}

Rectangle {
   x: 50; y: 50;
   width: -10; height: -10
   color: "red"
}

To copy to clipboard, switch view to plain text mode 

It works with negative values.
Has anyone an idea?

greets