Perspective: components on top block click events in below components despite no events configured on top

v8.1.0

When two components are placed overlapping each other in a Coordinate container, the component on top will block any mouse click events on components below it where it overlaps. This is despite the top component not having any events configured on the parts of the components that overlap the component behind.

In Vision, it didn’t matter if components overlapped each other, if the top component(s) didn’t have events configured, the highest z-order component within the overlapping component which does have event would fire.

Here, the green transparent component is on top and overlaps the “Label” label which has an onClick event configured. In runtime, the onClick event only fires on the left side what isn’t overlapped by the green box. The green box has no configured events on it.
image

That’s not how Web Development works though. :frowning:

Basic rule is that whatever is on top receives the click - even if it doesn’t have an event.

:frowning: that makes things harder


(I’m not a web developer)
Does adding a handler with Prevent Default on the overlapping component do anything?

A colleague made a template for a repetitive set of valves, as below, and now the valves either side can’t be clicked (red circled valve is from the template left of the selected, and the pink is from the selected template but is unclickable because of the template to its right which is higher in z-order) because the embedded view’s bounding box covers them… While Perspective is great at a lot of things, some things I really have to question… I’m really not sure it’s quite ready for P&ID layouts I.e. SCADA
image

I keep promising this, but the first-party solution we have for P&ID is getting close to ready and I think you’ll be very happy with it.

1 Like

Spoiler free. :+1:

I think you mean “Spoiler free. :-1::smile:

There is a way to make it so that the top element gets ignored and when you click, you click on the one underneath. On the top element style, do pointerEvents = none.

5 Likes

I forgot I made this post and I do actually use pointer-events: none these days, very useful!