QtQuick Grid, mouse events no propagating over adjacent mouse areas - qt

Question

I've written this simple qml app that allows to paint pixels over a grid:
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Grid {
id: grid
anchors.fill: parent
rows: 32
columns: 64
Repeater {
model: grid.columns * grid.rows;
delegate: delegateGridImage
}
}
Component {
id: delegateGridImage
Item {
id: gridItem
property int currentColumn: index % grid.columns
property int currentRow: Math.floor(index / grid.rows);
// Resize to screen size
width: grid.width / grid.columns
height: grid.height / grid.rows
Rectangle {
id: pixel
anchors.fill: parent
property bool pixel_state: true
color: if (pixel_state == true ) { "white" } else { "black" }
MouseArea {
anchors.fill: parent
hoverEnabled: true
propagateComposedEvents: true
acceptedButtons: Qt.LeftButton | Qt.RightButton
onEntered: console.log(index)
onPressed: pixel.pixel_state ^= true
}
}
}
}
}
This works fine:
I would like to be able to paint multiple pixels with a single mouse click pressed.
I've tried the onEntered event, but it only listens to the active mouse area until the click button is released. Is there a way to not block the events from the other mouse areas?

Answer 1

You can use a global MouseArea and deduct the current item below the cursor via childAt(...) of the Grid.
Window {
... // remove the MouseArea of pixel
MouseArea {
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.LeftButton | Qt.RightButton
property bool pixel_activate: true
onPressed: {
var child = grid.childAt(mouse.x, mouse.y)
child.pixel_state ^= true
pixel_activate = child.pixel_state
}
onPositionChanged: {
if (!pressed) return;
var child = grid.childAt(mouse.x, mouse.y)
child.pixel_state = pixel_activate
}
}
}
You just have to decide what action you want to perform once you hold the button pressed (currently it performs first action activate/deactivate and all following). Also take a look at the MouseEvent passed by the signals pressed and positionChanged so you can differentiate what key was pressed.

Answer 2

Lasall's solution works great. This is the final result:
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Grid {
id: grid
anchors.fill: parent
rows: 32
columns: 64
Repeater {
model: grid.columns * grid.rows;
delegate: delegateGridImage
}
}
Component {
id: delegateGridImage
Item {
id: gridItem
property int currentColumn: index % grid.columns
property int currentRow: Math.floor(index / grid.rows);
property bool pixel_state: false
// Resize to screen size
width: grid.width / grid.columns
height: grid.height / grid.rows
Rectangle {
id: pixel
anchors.fill: parent
color: if (gridItem.pixel_state == true ) { "white" } else { "black" }
}
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.LeftButton | Qt.RightButton
property bool pixel_activate: true
onPressed: {
var child = grid.childAt(mouse.x, mouse.y)
child.pixel_state ^= true
pixel_activate = child.pixel_state
}
onPositionChanged: {
if (!pressed) return;
var child = grid.childAt(mouse.x, mouse.y)
child.pixel_state = pixel_activate
}
}
}