Files
mqttx/src/composables/useContextMenu.ts
T
Joe Allen 6ced5c8444 feat: global right-click control + topic tree context menu
- 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
2026-08-18 14:58:31 +08:00

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)
})
}