우클릭 메뉴 수정
This commit is contained in:
yjnoh
parent
f883f60780
commit
e4f1bf484c
@ -1,6 +1,5 @@
|
||||
'use client'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import { Children, useEffect, useState } from 'react'
|
||||
|
||||
export default function QContextMenu(props) {
|
||||
const { contextRef, canvasProps } = props
|
||||
@ -8,6 +7,17 @@ export default function QContextMenu(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.name.indexOf('guide') > -1) {
|
||||
contextType = 'surface' //면형상
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!contextRef.current) return
|
||||
|
||||
@ -29,21 +39,49 @@ export default function QContextMenu(props) {
|
||||
}
|
||||
}
|
||||
|
||||
// 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 })
|
||||
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 (
|
||||
@ -51,15 +89,16 @@ export default function QContextMenu(props) {
|
||||
{contextMenu.visible && (
|
||||
<div style={{ position: 'absolute', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
|
||||
<ul style={{ listStyle: 'none', margin: 0, padding: '5px' }}>
|
||||
<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(1)}>
|
||||
Option 1
|
||||
<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectMove()}>
|
||||
이동
|
||||
</li>
|
||||
<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(2)}>
|
||||
Option 2
|
||||
<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectDelete()}>
|
||||
삭제
|
||||
</li>
|
||||
<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(3)}>
|
||||
Option 3
|
||||
<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectCopy()}>
|
||||
복사
|
||||
</li>
|
||||
{props.children}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -1,88 +1,20 @@
|
||||
'use client'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||
import QContextMenu from './QContextMenu'
|
||||
|
||||
export default function QPolygonContextMenu(props) {
|
||||
const { contextRef, canvasProps } = props
|
||||
|
||||
// const children = useRecoilValue(modalContent)
|
||||
const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
|
||||
|
||||
const polygon = canvasProps.getActiveObject() //액티브된 객체를 가져옴
|
||||
let contextType = ''
|
||||
|
||||
if (polygon.initOptions.name.indexOf('guide') > -1) {
|
||||
contextType = 'surface' //면형상
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!contextRef.current) return
|
||||
|
||||
const handleContextMenu = (e) => {
|
||||
e.preventDefault() //기존 contextmenu 막고
|
||||
|
||||
// Fabric.js 상의 객체에 직접 이벤트를 트리거할 수는 없으므로,
|
||||
// 캔버스 요소에 이벤트를 디스패치하여 처리
|
||||
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 })
|
||||
function handleMenuClick(index) {
|
||||
alert('test')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{contextMenu.visible && (
|
||||
<div style={{ position: 'absolute', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
|
||||
<ul style={{ listStyle: 'none', margin: 0, padding: '5px' }}>
|
||||
<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(1)}>
|
||||
polygon
|
||||
</li>
|
||||
<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(1)}>
|
||||
Option 1
|
||||
</li>
|
||||
<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(2)}>
|
||||
Option 2
|
||||
</li>
|
||||
<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(3)}>
|
||||
Option 3
|
||||
</li>
|
||||
{contextType === 'surface' ? (
|
||||
<>
|
||||
<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(4)}>
|
||||
모듈 채우기
|
||||
</li>
|
||||
</>
|
||||
) : null}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
<QContextMenu contextRef={contextRef} canvasProps={canvasProps}>
|
||||
<>
|
||||
<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(4)}>
|
||||
모듈 채우기
|
||||
</li>
|
||||
</>
|
||||
</QContextMenu>
|
||||
)
|
||||
}
|
||||
|
||||
@ -599,37 +599,25 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
break
|
||||
}
|
||||
}
|
||||
if (type !== 22) {
|
||||
obj = new QPolygon(points, {
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
fontSize: fontSize,
|
||||
lockMovementX: true, // X 축 이동 잠금
|
||||
lockMovementY: true, // Y 축 이동 잠금
|
||||
lockRotation: true, // 회전 잠금
|
||||
lockScalingX: true, // X 축 크기 조정 잠금
|
||||
lockScalingY: true, // Y 축 크기 조정 잠금
|
||||
name: 'guideTriangle',
|
||||
})
|
||||
} else {
|
||||
obj = new QPolygon(points, {
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
fontSize: fontSize,
|
||||
name: 'guideTriangle',
|
||||
lockMovementX: true, // X 축 이동 잠금
|
||||
lockMovementY: true, // Y 축 이동 잠금
|
||||
lockRotation: true, // 회전 잠금
|
||||
lockScalingX: true, // X 축 크기 조정 잠금
|
||||
lockScalingY: true, // Y 축 크기 조정 잠금
|
||||
flipX: true,
|
||||
})
|
||||
|
||||
const options = {
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: true,
|
||||
fontSize: fontSize,
|
||||
lockMovementX: true, // X 축 이동 잠금
|
||||
lockMovementY: true, // Y 축 이동 잠금
|
||||
lockRotation: true, // 회전 잠금
|
||||
lockScalingX: true, // X 축 크기 조정 잠금
|
||||
lockScalingY: true, // Y 축 크기 조정 잠금
|
||||
name: 'guideTriangle',
|
||||
flipX: type === 22 ? true : false,
|
||||
}
|
||||
|
||||
obj = new QPolygon(points, options)
|
||||
obj.setCoords() //좌표 변경 적용
|
||||
|
||||
canvas?.add(obj)
|
||||
obj.set({ direction: direction })
|
||||
setCurrentPattern(obj)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user