- UseContextMenu composable: global right-click prevention - PROD: prevent default browser context menu everywhere - DEV: allow native context menu for debugging - ContextMenu component: reusable custom right-click menu - TopicTree: right-click nodes for copy topic / subscribe / unsubscribe / filter - Copy topic to clipboard - Subscribe with QoS 0/1/2 - Unsubscribe with confirmation - Filter by topic
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { onMounted, onUnmounted } from 'vue'
|
|
|
|
const contextMenuHandlers = new Set<(e: MouseEvent) => void>()
|
|
|
|
/**
|
|
* Register a custom right-click handler.
|
|
* The handler should call `e.preventDefault()` if it handles the event.
|
|
*/
|
|
export function registerContextMenu(handler: (e: MouseEvent) => void) {
|
|
contextMenuHandlers.add(handler)
|
|
}
|
|
|
|
export function unregisterContextMenu(handler: (e: MouseEvent) => void) {
|
|
contextMenuHandlers.delete(handler)
|
|
}
|
|
|
|
/**
|
|
* Global context menu controller.
|
|
* In production: prevents default browser context menu everywhere.
|
|
* In debug (dev mode): allows native context menu.
|
|
* Custom handlers registered via registerContextMenu take priority.
|
|
*/
|
|
export function useContextMenuController() {
|
|
function onContextMenu(e: MouseEvent) {
|
|
for (const handler of contextMenuHandlers) {
|
|
handler(e)
|
|
if (e.defaultPrevented) return
|
|
}
|
|
if (import.meta.env.PROD) {
|
|
e.preventDefault()
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('contextmenu', onContextMenu)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
document.removeEventListener('contextmenu', onContextMenu)
|
|
})
|
|
} |