<div dir="ltr">I have solved it more or less with this:<div><br></div><div><pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">    </span><span style="color:rgb(128,128,0)">function</span><span style="color:rgb(192,192,192)"> </span><span style="font-style:italic">traverseItemTreeWithClipping</span>(item,<span style="color:rgb(192,192,192)"> </span>pt,<span style="color:rgb(192,192,192)"> </span>f,<span style="color:rgb(192,192,192)"> </span>rootItem)<span style="color:rgb(192,192,192)"> </span>{</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="font-style:italic;color:rgb(41,133,199)">rootItem</span><span style="color:rgb(192,192,192)"> </span>=<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">rootItem</span><span style="color:rgb(192,192,192)"> </span>||<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">item</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="color:rgb(128,128,0)">var</span><span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">p</span><span style="color:rgb(192,192,192)"> </span>=<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">item</span>.mapFromItem(<span style="font-style:italic;color:rgb(41,133,199)">rootItem</span>,<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">pt</span>)</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="color:rgb(128,128,0)">var</span><span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">inItemRect</span><span style="color:rgb(192,192,192)"> </span>=<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">p</span>.x<span style="color:rgb(192,192,192)"> </span>>=<span style="color:rgb(192,192,192)"> </span>0<span style="color:rgb(192,192,192)"> </span>&&<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">p</span>.y<span style="color:rgb(192,192,192)"> </span>>=<span style="color:rgb(192,192,192)"> </span>0<span style="color:rgb(192,192,192)"> </span>&&<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">p</span>.x<span style="color:rgb(192,192,192)"> </span><<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">item</span>.width<span style="color:rgb(192,192,192)"> </span>&&<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">p</span>.y<span style="color:rgb(192,192,192)"> </span><<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">item</span>.height</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="color:rgb(128,128,0)">if</span>(<span style="font-style:italic;color:rgb(41,133,199)">item</span>.clip<span style="color:rgb(192,192,192)"> </span>&&<span style="color:rgb(192,192,192)"> </span>!<span style="font-style:italic;color:rgb(41,133,199)">inItemRect</span>)<span style="color:rgb(192,192,192)"> </span><span style="color:rgb(128,128,0)">return</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="font-style:italic;color:rgb(41,133,199)">f</span>(<span style="font-style:italic;color:rgb(41,133,199)">item</span>,<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">p</span>,<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">inItemRect</span>)</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="color:rgb(128,128,0)">for</span>(<span style="color:rgb(128,128,0)">var</span><span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">i</span><span style="color:rgb(192,192,192)"> </span>=<span style="color:rgb(192,192,192)"> </span>0;<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">i</span><span style="color:rgb(192,192,192)"> </span><<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">item</span>.children.length;<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">i</span>++)</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="font-style:italic">traverseItemTreeWithClipping</span>(<span style="font-style:italic;color:rgb(41,133,199)">item</span>.children[<span style="font-style:italic;color:rgb(41,133,199)">i</span>],<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">pt</span>,<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">f</span>,<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">rootItem</span>)</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">    </span>}</pre>
<pre style="margin-top:0px;margin-bottom:0px"><br></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">    </span><span style="color:rgb(128,128,0)">function</span><span style="color:rgb(192,192,192)"> </span><span style="font-style:italic">hitTest</span>(rootItem,<span style="color:rgb(192,192,192)"> </span>pt)<span style="color:rgb(192,192,192)"> </span>{</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="color:rgb(128,128,0)">var</span><span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">result</span><span style="color:rgb(192,192,192)"> </span>=<span style="color:rgb(192,192,192)"> </span>undefined</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="color:rgb(128,128,0)">var</span><span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">z</span><span style="color:rgb(192,192,192)"> </span>=<span style="color:rgb(192,192,192)"> </span>-Infinity</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="font-style:italic">traverseItemTreeWithClipping</span>(<span style="font-style:italic;color:rgb(41,133,199)">rootItem</span>,<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">pt</span>,<span style="color:rgb(192,192,192)"> </span>(item,<span style="color:rgb(192,192,192)"> </span>p,<span style="color:rgb(192,192,192)"> </span>inItemRect)<span style="color:rgb(192,192,192)"> </span>=><span style="color:rgb(192,192,192)"> </span>{</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span><span style="color:rgb(128,128,0)">if</span>(<span style="font-style:italic;color:rgb(41,133,199)">item</span>.visible<span style="color:rgb(192,192,192)"> </span>&&<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">item</span>.z<span style="color:rgb(192,192,192)"> </span>>=<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">z</span><span style="color:rgb(192,192,192)"> </span>&&<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">inItemRect</span>)<span style="color:rgb(192,192,192)"> </span>{</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">                </span><span style="font-style:italic;color:rgb(41,133,199)">result</span><span style="color:rgb(192,192,192)"> </span>=<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">item</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">                </span><span style="font-style:italic;color:rgb(41,133,199)">z</span><span style="color:rgb(192,192,192)"> </span>=<span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">item</span>.z</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">            </span>}</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span>})</pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">        </span><span style="color:rgb(128,128,0)">return</span><span style="color:rgb(192,192,192)"> </span><span style="font-style:italic;color:rgb(41,133,199)">result</span></pre>
<pre style="margin-top:0px;margin-bottom:0px"><span style="color:rgb(192,192,192)">    </span>}</pre><pre style="margin-top:0px;margin-bottom:0px"><br></pre><pre style="margin-top:0px;margin-bottom:0px"><span style="font-family:Arial,Helvetica,sans-serif;white-space:normal">It only handles visibility and clipping. If there is a better way or I overlooked some QtQuick aspect, please let me know.</span><br></pre><pre style="margin-top:0px;margin-bottom:0px"><span style="font-family:Arial,Helvetica,sans-serif;white-space:normal">Cheers,</span></pre><pre style="margin-top:0px;margin-bottom:0px"><span style="font-family:Arial,Helvetica,sans-serif;white-space:normal">Federico Ferri</span></pre><pre style="margin-top:0px;margin-bottom:0px"><span style="font-family:Arial,Helvetica,sans-serif;white-space:normal"><br></span></pre></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, Jun 21, 2022 at 8:54 PM Federico Ferri <<a href="mailto:federico.ferri.it@gmail.com">federico.ferri.it@gmail.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div>Is it possible to find what is the topmost visible item given a pixel coordinate?<br></div><div><br></div><div>e.g. in this simplified example:</div><div><br></div><div>Rectangle {<br>    x: 20; y: 20; width: 20; height: 20; color: 'red';<br>    Rectangle {<br>        x: 5; y: 10; width: 5; height: 5; color: 'green';<br>    }<br>}<br></div><div><br></div><div>it would be the red Rectangle for coordinate (21,21), the green Rectangle for coordinate (26,32), and none for e.g. (15,15).</div><div><br></div><div>Alternatively, I'm happy to equip my Rectangles with a MouseArea {anchors.fill:parent} each. Is it possible then to synthesize mouse press events so to exploit Qt Quick's scenegraph/event processing magic?</div><div><br></div><div><br></div></div>
</blockquote></div>