Overlapping Controls

Question

I'm having issues with the ColorRect i'm using as a canvas in my paint app.

I created a viewport, put the image inside and added scroll bars to the outside of the viewport. It works great, but the problem occurs when the viewport contains an image that it to large, making it invisibly overlap other controls.

I added events to disable / enable the viewports input when the mouse is over it but the mouseout event never fires if the image is too big. At a loss as what to do. I have tried many different configurations of nodes to no avail and ways to disable the input. Anyone have any idea how I can deal with this?

Comments

Do the scrollbars come before or after it? Nodes at the bottom of the list are added last, and are technically above the other nodes, so they take priority when it comes to input. It seems like you might need to move the scrollbars down in the node tree

---

Sadly I have already tried that.

Answer 1

If you suspect as you've said

viewport contains an image that it to large making it invisibly overlap other controls

Use anchors so that it doesn't or resize the colorRect and viewport

Another approach is to toggle MouseFiltering as needed as input starts at the node root and fillers down to branched children nodes
ColorRect.mouse_filter = MOUSE_FILTER_PASS to allow
ColorRect.mouse_filter = MOUSE_FILTER_STOP to block

If your $Background node has MOUSE_FILTER_STOP no node under its area will receive input

Comments

Your $Scroller node might actually be the culprit if it's rect size is full screened