How to render a circle on top of the UI at the current cursor position without blocking pointer events to elements below?

[tadeohepperle]

I want to do a very simple thing: render a circle on top of all other UI elements at the cursor position. If the left mouse button is pressed, I want the circle to be red, blue otherwise.

Now the problem is: If I put e.g. a TouchArea over the entire window it blocks pointer events to all elements below, see this example code. How can I get the current cursor position and press status on screen while still being able to interact with all UI elements below?

export component TestWindow inherits Window {
    min-width: 400px;
    min-height: 400px;
    Rectangle {
        width: parent.width;
        height: parent.height;
        background: area.pressed ? red : orange;
    }

    VerticalLayout {
        alignment: center;
        spacing: 20px;

        StandardButton { }
    }

    area := TouchArea {
        clicked => {
            debug("Hello!")
        }
    }
}

[ogoffart]

So basically you cant to have a TouchArea on top, that intercepts events, but only the mouve and let the click go trough.

Unfortunately, this is not yet implemented.
This is tracked in issue #9840