우클릭 메뉴 수정

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

@@ -1,6 +1,5 @@
 'use client'
-import { useEffect, useState } from 'react'
+import { Children, useEffect, useState } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
 
 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) => {
+  const handleObjectMove = () => {
-    alert(`option ${option} clicked`)
+    activeObject.set({
-    setContextMenu({ ...contextMenu, visible: false })
+      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)}>
+            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectMove()}>
-              Option 1
+              이동
             </li>
-            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(2)}>
+            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectDelete()}>
-              Option 2
+              삭제
             </li>
-            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(3)}>
+            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectCopy()}>
-              Option 3
+              복사
             </li>
+            {props.children}
           </ul>
         </div>
       )}

src/components/common/context-menu/QPolygonContextMenu.jsx

@@ -1,88 +1,20 @@
 'use client'
-import { useEffect, useState } from 'react'
+import QContextMenu from './QContextMenu'
-import { useRecoilState, useRecoilValue } from 'recoil'
 
 export default function QPolygonContextMenu(props) {
   const { contextRef, canvasProps } = props
 
-  //   const children = useRecoilValue(modalContent)
+  function handleMenuClick(index) {
-  const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
+    alert('test')
-
-  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 })
   }
 
   return (
-    <>
+    <QContextMenu contextRef={contextRef} canvasProps={canvasProps}>
-      {contextMenu.visible && (
+      <>
-        <div style={{ position: 'absolute', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
+        <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(4)}>
-          <ul style={{ listStyle: 'none', margin: 0, padding: '5px' }}>
+          모듈 채우기
-            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(1)}>
+        </li>
-              polygon
+      </>
-            </li>
+    </QContextMenu>
-            <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>
-      )}
-    </>
   )
 }

src/components/ui/SurfaceShape.jsx

@@ -599,37 +599,25 @@ export const SurfaceShapeModal = ({ canvas }) => {
           break
         }
       }
-      if (type !== 22) {
+
-        obj = new QPolygon(points, {
+      const options = {
-          fill: 'transparent',
+        fill: 'transparent',
-          stroke: 'black',
+        stroke: 'black',
-          strokeWidth: 2,
+        strokeWidth: 2,
-          selectable: true,
+        selectable: true,
-          fontSize: fontSize,
+        fontSize: fontSize,
-          lockMovementX: true, // X 축 이동 잠금
+        lockMovementX: true, // X 축 이동 잠금
-          lockMovementY: true, // Y 축 이동 잠금
+        lockMovementY: true, // Y 축 이동 잠금
-          lockRotation: true, // 회전 잠금
+        lockRotation: true, // 회전 잠금
-          lockScalingX: true, // X 축 크기 조정 잠금
+        lockScalingX: true, // X 축 크기 조정 잠금
-          lockScalingY: true, // Y 축 크기 조정 잠금
+        lockScalingY: true, // Y 축 크기 조정 잠금
-          name: 'guideTriangle',
+        name: 'guideTriangle',
-        })
+        flipX: type === 22 ? true : false,
-      } 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,
-        })
       }
 
+      obj = new QPolygon(points, options)
+      obj.setCoords() //좌표 변경 적용
+
       canvas?.add(obj)
       obj.set({ direction: direction })
       setCurrentPattern(obj)