qcast-front/src/components/common/context-menu/QContextMenu.jsx

'use client'
import { useContext, 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 { EventContext } from '@/app/floor-plan/EventProvider'

export default function QContextMenu(props) {
  const { contextRef, canvasProps } = props
  const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
  const contextMenuList = useRecoilValue(contextMenuListState)
  const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
  const { tempGridMode, setTempGridMode } = useTempGrid()
  const { handleKeyup } = useContextMenu()
  // const { addDocumentEventListener, removeDocumentEvent } = useEvent()
  const { addDocumentEventListener, removeDocumentEvent } = useContext(EventContext)

  let contextType = ''

  if (activeObject) {
    if (activeObject.initOptions && activeObject.initOptions.name) {
      //이건 바뀔 가능성이 있음
      if (activeObject.initOptions?.name?.indexOf('guide') > -1) {
        contextType = 'surface' //면형상
      }
    }
  }
  const getYPosition = (e) => {
    const contextLength = contextMenuList.reduce((acc, cur, index) => {
      return acc + cur.length
    }, 0)
    return e?.clientY - (contextLength * 25 + contextMenuList.length * 2 * 17)
  }

  useEffect(() => {
    if (!contextRef.current) return

    const handleContextMenu = (e) => {
      // e.preventDefault() //기존 contextmenu 막고
      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 })
      addDocumentEventListener('keyup', document, handleKeyup)
      canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
    }

    const handleClick = (e) => {
      // e.preventDefault()
      setContextMenu({ ...contextMenu, visible: false })
    }

    const handleOutsideClick = (e) => {
      // e.preventDefault()
      if (contextMenu.visible) {
        setContextMenu({ ...contextMenu, visible: false })
        removeDocumentEvent('keyup')
      }
    }

    canvasProps?.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
    document.addEventListener('click', handleClick)
    document.addEventListener('click', handleOutsideClick)

    return () => {
      removeDocumentEvent('keyup')
      document.removeEventListener('click', handleClick)
      document.removeEventListener('click', handleOutsideClick)
    }
  }, [contextRef, contextMenuList])

  const handleObjectMove = () => {
    activeObject.set({
      lockMovementX: false, // X 축 이동 잠금
      lockMovementY: false, // Y 축 이동 잠금
    })

    canvasProps?.on('object:modified', function (e) {
      activeObject.set({
        lockMovementX: true, // X 축 이동 잠금
        lockMovementY: true, // Y 축 이동 잠금
      })
    })
  }

  const handleObjectDelete = () => {
    if (confirm('삭제하실거?')) {
      canvasProps.remove(activeObject)
    }
  }

  const handleObjectCopy = () => {
    activeObject.clone((cloned) => {
      cloned.set({
        left: activeObject.left + activeObject.width + 20,
        initOptions: { ...activeObject.initOptions },
        lockMovementX: true, // X 축 이동 잠금
        lockMovementY: true, // Y 축 이동 잠금
        lockRotation: true, // 회전 잠금
        lockScalingX: true, // X 축 크기 조정 잠금
        lockScalingY: true, // Y 축 크기 조정 잠금
      })
      canvasProps?.add(cloned)
    })
  }

  return (
    <>
      {contextMenu.visible && (
        <div className="context-menu-wrap" style={{ position: 'fixed', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
          {/*<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>
      )}
    </>
  )
}