95 lines
3.5 KiB
JavaScript
95 lines
3.5 KiB
JavaScript
'use client'
|
|
import { useEffect } from 'react'
|
|
import '@/styles/contents.scss'
|
|
import { useRecoilState, useRecoilValue } from 'recoil'
|
|
import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
|
|
import { useTempGrid } from '@/hooks/useTempGrid'
|
|
import { useContextMenu } from '@/hooks/useContextMenu'
|
|
import { useEvent } from '@/hooks/useEvent'
|
|
import { canvasState, currentObjectState } from '@/store/canvasAtom'
|
|
|
|
export default function QContextMenu(props) {
|
|
const canvas = useRecoilValue(canvasState)
|
|
const { contextRef, canvasProps } = props
|
|
const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
|
|
const contextMenuList = useRecoilValue(contextMenuListState)
|
|
const currentObject = useRecoilValue(currentObjectState)
|
|
const { tempGridMode, setTempGridMode } = useTempGrid()
|
|
const { handleKeyup } = useContextMenu()
|
|
const { addDocumentEventListener, removeDocumentEvent } = useEvent()
|
|
// const { addDocumentEventListener, removeDocumentEvent } = useContext(EventContext)
|
|
|
|
const getYPosition = (e) => {
|
|
const contextLength = contextMenuList.reduce((acc, cur, index) => {
|
|
return acc + cur.length
|
|
}, 0)
|
|
return e?.clientY - (contextLength * 25 + contextMenuList.length * 2 * 17)
|
|
}
|
|
|
|
const handleContextMenu = (e) => {
|
|
// e.preventDefault() //기존 contextmenu 막고
|
|
|
|
if (currentObject) {
|
|
const isArray = currentObject.hasOwnProperty('arrayData')
|
|
if (isArray && currentObject.arrayData.length === 0) return
|
|
|
|
if (tempGridMode) return
|
|
const position = {
|
|
x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
|
|
y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY,
|
|
}
|
|
setContextMenu({ visible: true, ...position, currentMousePos: canvasProps.getPointer(e) })
|
|
addDocumentEventListener('keyup', document, handleKeyup)
|
|
}
|
|
}
|
|
|
|
const handleClick = (e) => {
|
|
// e.preventDefault()
|
|
setContextMenu({ ...contextMenu, visible: false })
|
|
}
|
|
|
|
const handleOutsideClick = (e) => {
|
|
// e.preventDefault()
|
|
if (contextMenu.visible) {
|
|
setContextMenu({ ...contextMenu, visible: false })
|
|
removeDocumentEvent('keyup')
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!contextRef.current) return
|
|
|
|
canvasProps?.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
|
|
document.addEventListener('click', handleClick)
|
|
document.addEventListener('click', handleOutsideClick)
|
|
|
|
return () => {
|
|
removeDocumentEvent('keyup')
|
|
document.removeEventListener('click', handleClick)
|
|
document.removeEventListener('click', handleOutsideClick)
|
|
canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
|
|
}
|
|
}, [contextRef, contextMenuList, currentObject])
|
|
|
|
return (
|
|
<>
|
|
{contextMenu.visible && (
|
|
<div className="context-menu-wrap" style={{ position: 'fixed', top: contextMenu.y, left: contextMenu.x }}>
|
|
{/*<ul>*/}
|
|
{/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectMove()}>*/}
|
|
{/* 이동*/}
|
|
{/*</li>*/}
|
|
{/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectDelete()}>*/}
|
|
{/* 삭제*/}
|
|
{/*</li>*/}
|
|
{/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectCopy()}>*/}
|
|
{/* 복사*/}
|
|
{/*</li>*/}
|
|
{/*</ul>*/}
|
|
{props.children}
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|