51 lines
1.7 KiB
JavaScript
51 lines
1.7 KiB
JavaScript
'use client'
|
|
import { useEffect, useState } from 'react'
|
|
import { useRecoilState, useRecoilValue } from 'recoil'
|
|
|
|
export default function QEmptyContextMenu(props) {
|
|
const { contextRef, canvasProps } = props
|
|
|
|
// const children = useRecoilValue(modalContent)
|
|
const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
|
|
|
|
useEffect(() => {
|
|
if (!contextRef.current) return
|
|
|
|
const handleContextMenu = (e) => {
|
|
e.preventDefault() //기존 contextmenu 막고
|
|
setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
|
|
canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
|
|
}
|
|
|
|
const handleClick = (e) => {
|
|
e.preventDefault()
|
|
setContextMenu({ ...contextMenu, visible: false })
|
|
}
|
|
|
|
const handleOutsideClick = (e) => {
|
|
e.preventDefault()
|
|
if (contextMenu.visible && !ref.current.contains(e.target)) {
|
|
setContextMenu({ ...contextMenu, visible: false })
|
|
}
|
|
}
|
|
|
|
// Prevent the default context menu from appearing on the canvas
|
|
canvasProps.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
|
|
document.addEventListener('click', handleClick)
|
|
document.addEventListener('click', handleOutsideClick)
|
|
|
|
return () => {
|
|
// canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu)
|
|
document.removeEventListener('click', handleClick)
|
|
document.removeEventListener('click', handleOutsideClick)
|
|
}
|
|
}, [contextRef, contextMenu])
|
|
|
|
const handleMenuClick = (option) => {
|
|
alert(`option ${option} clicked`)
|
|
setContextMenu({ ...contextMenu, visible: false })
|
|
}
|
|
|
|
return <></>
|
|
}
|