social-graph/frontend/src/composables/useGraphNodeContextMenu.js

import { ref } from 'vue'

export function useGraphNodeContextMenu() {
  const contextMenuOpen = ref(false)
  const contextMenuNode = ref(null)
  const contextMenuX = ref(0)
  const contextMenuY = ref(0)

  function openContextMenu(node, event) {
    if (!node || !event) return
    contextMenuNode.value = node
    contextMenuX.value = event.clientX
    contextMenuY.value = event.clientY
    contextMenuOpen.value = true
  }

  function closeContextMenu() {
    contextMenuOpen.value = false
    contextMenuNode.value = null
  }

  function attachNodeContextHandlers(network, getNodes) {
    const onContext = (params) => {
      const domEvent = params.event?.srcEvent || params.event
      domEvent?.preventDefault?.()
      if (params.nodes?.length > 0) {
        const id = params.nodes[0]
        const node = getNodes().find((n) => String(n.id) === String(id))
        if (node) openContextMenu(node, domEvent)
        return
      }
      closeContextMenu()
    }

    network.on('oncontext', onContext)
    return () => network.off('oncontext', onContext)
  }

  return {
    contextMenuOpen,
    contextMenuNode,
    contextMenuX,
    contextMenuY,
    openContextMenu,
    closeContextMenu,
    attachNodeContextHandlers,
  }
}