fix(studio): keep preview selection overlay visible for selected item#777
Conversation
There was a problem hiding this comment.
The intent is solid — the overlay disappearing when you select an element and the playhead is outside its range is genuinely annoying UX.
However, the removed check was there for a reason: it prevents the selection overlay from rendering on elements that aren't visible at the current time. Consider this scenario:
- Select Scene 1 (active 0–5s)
- Seek to 7s (where Scene 2 is active)
- Scene 1 is now hidden by the player framework, but the overlay still renders
The overlay uses getBoundingClientRect() on the underlying DOM element. If the element is hidden via opacity: 0 (which is how GSAP animations often exit elements), the rect is still valid — so you'd get green selection handles floating on an invisible element.
Alternative approach worth considering: instead of removing the timeline check entirely, use the existing getTimelineLayerVisibilityInPreview from the same timelineInspector.ts file to check if the DOM element itself is actually visible at render time:
const shouldShowSelectedDomBounds =
inspectorPanelActive &&
!panelLayout.rightCollapsed &&
!isPlaying;This simplified version (what the PR does) is probably fine in practice — most users won't select-then-seek — but be aware of the edge case. If it ships and users report phantom overlays, that's the root cause.
The code cleanup is clean — selectedTimelineElement, selectedTimelineElementId, and the two imports are correctly removed since they have no other consumers in App.tsx.
|
admin-merged btw |
What
Keep the Studio preview selection overlay visible while an element is still selected
Why
The overlay can disappear evenn though the element is still selected. Because overlay visibility was tied to timeline active state.
How
Remove the timeline active-state check from
shouldShowSelectedDomBounds. The overlay should be visible based on selection and inspector state, not timeline activity.Test plan
How was this tested?