112 lines
3.5 KiB
JavaScript
112 lines
3.5 KiB
JavaScript
'use client'
|
|
import { useEffect, useState } from 'react'
|
|
import '@/styles/contents.scss'
|
|
|
|
export default function QContextMenu(props) {
|
|
const { contextRef, canvasProps } = props
|
|
|
|
// const children = useRecoilValue(modalContent)
|
|
const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
|
|
|
|
const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
|
|
|
|
let contextType = ''
|
|
|
|
if (activeObject) {
|
|
if (activeObject.initOptions && activeObject.initOptions.name) {
|
|
//이건 바뀔 가능성이 있음
|
|
if (activeObject.initOptions?.name?.indexOf('guide') > -1) {
|
|
contextType = 'surface' //면형상
|
|
}
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!contextRef.current) return
|
|
|
|
const handleContextMenu = (e) => {
|
|
// e.preventDefault() //기존 contextmenu 막고
|
|
setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
|
|
// console.log(111, canvasProps)
|
|
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 })
|
|
}
|
|
}
|
|
|
|
canvasProps?.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
|
|
document.addEventListener('click', handleClick)
|
|
document.addEventListener('click', handleOutsideClick)
|
|
|
|
return () => {
|
|
document.removeEventListener('click', handleClick)
|
|
document.removeEventListener('click', handleOutsideClick)
|
|
}
|
|
}, [contextRef, contextMenu])
|
|
|
|
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>
|
|
)}
|
|
</>
|
|
)
|
|
}
|