Creating an "overlay" which does not block events

I am working on an editor extension which works a little similar to Shader Graph. I’ll have nodes and edges.

So, for creating an edge, I’ll have a basic IMGUI Container which fills the space between two nodes. Then I draw a line on that. In the end it will look like an edge.

Here is the problem:
The IMGUI Container will have the size of a bounding box around that edge. So at some point, multiple boxes will overlap each other or other nodes. But then, the very top one will block mouse events for all below.

This is a prototype:

The red box will later be adjusted and filled with the edge.

Everything within that red box does not receive any event. Not even the buttons “A”.

Is there a way to “ignore” all events on that box?

Or is there maybe a completely different method to create edges like it is done in shader graph?

Felix

So basically I am asking how to make an edge like Shader Graph did :smile:

Looks like I figured it out eventhough I am not sure if this is a good solution:

When extending VisualElement you can override a method called ContainsPoint(Vector2). It looks like the event validation is based on that method because when just returning false, the box just ignores every event.

Can you try setting “pickingMode=Ignore” on your element?

1 Like

That actually did the job too! Thanks
But since I want the edge to be selectable (only on the line, not the entire box, tho), I think I will stick to ContainsPoint for more flexibility.

Do you know how it was done in shader graph?

Yes it probably uses that method.

1 Like