feat: click-outside deselects a selected marker
Esc was already wired but nobody stumbles onto it. A capture-phase pointerdown listener is installed while selectedMarkerId is set; any click that doesn't land on a .timeline-marker (or on an open dialog/menu) clears the selection. Listener is torn down automatically when selection clears or the component unmounts. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
4cb3a74dfb
commit
616973b0fa
1 file changed
+18
@@ -412,6 +412,23 @@ function onOutBracketPointerUp(e: PointerEvent) {
|
|||||||
const selectedMarkerId = ref<string | null>(null)
|
const selectedMarkerId = ref<string | null>(null)
|
||||||
const markerDrag = ref<{ id: string; startX: number; moved: boolean } | null>(null)
|
const markerDrag = ref<{ id: string; startX: number; moved: boolean } | null>(null)
|
||||||
|
|
||||||
|
function onOutsideMarkerPointerDown(e: PointerEvent) {
|
||||||
|
const el = e.target as HTMLElement | null
|
||||||
|
// Leave selection alone when the click lands on the marker itself
|
||||||
|
// (or any menu/dialog — treat anything inside a popup as "not outside").
|
||||||
|
if (el?.closest('.timeline-marker')) return
|
||||||
|
if (el?.closest('.dialog, .kf-menu, .track-menu')) return
|
||||||
|
selectedMarkerId.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(selectedMarkerId, (id) => {
|
||||||
|
if (id) {
|
||||||
|
document.addEventListener('pointerdown', onOutsideMarkerPointerDown, true)
|
||||||
|
} else {
|
||||||
|
document.removeEventListener('pointerdown', onOutsideMarkerPointerDown, true)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
function markerTimeFromEvent(e: PointerEvent, markerEl: HTMLElement): number {
|
function markerTimeFromEvent(e: PointerEvent, markerEl: HTMLElement): number {
|
||||||
const ruler = markerEl.parentElement as HTMLElement | null
|
const ruler = markerEl.parentElement as HTMLElement | null
|
||||||
if (!ruler) return 0
|
if (!ruler) return 0
|
||||||
@@ -1878,6 +1895,7 @@ onBeforeUnmount(() => {
|
|||||||
ro?.disconnect()
|
ro?.disconnect()
|
||||||
ro = null
|
ro = null
|
||||||
document.removeEventListener('pointerdown', onDocumentPointerDown, true)
|
document.removeEventListener('pointerdown', onDocumentPointerDown, true)
|
||||||
|
document.removeEventListener('pointerdown', onOutsideMarkerPointerDown, true)
|
||||||
document.removeEventListener('keydown', onKeyDown)
|
document.removeEventListener('keydown', onKeyDown)
|
||||||
document.removeEventListener('keydown', onDocumentKeyDown)
|
document.removeEventListener('keydown', onDocumentKeyDown)
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in new issue
Block a user