Close context menu when using mouse wheel or menu touching scrollbars

This commit is contained in:
Andrew Kingston 2023-06-20 08:01:41 +01:00
parent 901ba53630
commit 7486d3dde0
2 changed files with 16 additions and 0 deletions

View File

@ -12,6 +12,7 @@
bounds, bounds,
hoveredRowId, hoveredRowId,
hiddenColumnsWidth, hiddenColumnsWidth,
menu,
} = getContext("grid") } = getContext("grid")
export let scrollVertically = false export let scrollVertically = false
@ -30,6 +31,11 @@
const handleWheel = e => { const handleWheel = e => {
e.preventDefault() e.preventDefault()
debouncedHandleWheel(e.deltaX, e.deltaY, e.clientY) debouncedHandleWheel(e.deltaX, e.deltaY, e.clientY)
// If a context menu was visible, hide it
if ($menu.visible) {
menu.actions.close()
}
} }
const debouncedHandleWheel = domDebounce((deltaX, deltaY, clientY) => { const debouncedHandleWheel = domDebounce((deltaX, deltaY, clientY) => {
const { top, left } = $scroll const { top, left } = $scroll

View File

@ -16,6 +16,7 @@
scrollTop, scrollTop,
height, height,
isDragging, isDragging,
menu,
} = getContext("grid") } = getContext("grid")
// State for dragging bars // State for dragging bars
@ -45,6 +46,13 @@
$: availWidth = renderWidth - barWidth $: availWidth = renderWidth - barWidth
$: barLeft = ScrollBarSize + availWidth * ($scrollLeft / $maxScrollLeft) $: barLeft = ScrollBarSize + availWidth * ($scrollLeft / $maxScrollLeft)
// Helper to close the context menu if it's open
const closeMenu = () => {
if ($menu.visible) {
menu.actions.close()
}
}
// V scrollbar drag handlers // V scrollbar drag handlers
const startVDragging = e => { const startVDragging = e => {
e.preventDefault() e.preventDefault()
@ -53,6 +61,7 @@
document.addEventListener("mousemove", moveVDragging) document.addEventListener("mousemove", moveVDragging)
document.addEventListener("mouseup", stopVDragging) document.addEventListener("mouseup", stopVDragging)
isDraggingV = true isDraggingV = true
closeMenu()
} }
const moveVDragging = domDebounce(e => { const moveVDragging = domDebounce(e => {
const delta = e.clientY - initialMouse const delta = e.clientY - initialMouse
@ -77,6 +86,7 @@
document.addEventListener("mousemove", moveHDragging) document.addEventListener("mousemove", moveHDragging)
document.addEventListener("mouseup", stopHDragging) document.addEventListener("mouseup", stopHDragging)
isDraggingH = true isDraggingH = true
closeMenu()
} }
const moveHDragging = domDebounce(e => { const moveHDragging = domDebounce(e => {
const delta = e.clientX - initialMouse const delta = e.clientX - initialMouse