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

@@ -6,19 +6,29 @@ 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'
+import { canvasState } 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 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
@@ -26,13 +36,11 @@ export default function QContextMenu(props) {
     return e?.clientY - (contextLength * 25 + contextMenuList.length * 2 * 17)
   }
 
-  const handleContextMenu = (e) => {
+  useEffect(() => {
-    // e.preventDefault() //기존 contextmenu 막고
+    if (!contextRef.current) return
-
-    if (currentObject) {
-      const isArray = currentObject.hasOwnProperty('arrayData')
-      if (isArray && currentObject.arrayData.length === 0) return
 
+    const handleContextMenu = (e) => {
+      e.preventDefault() //기존 contextmenu 막고
       if (tempGridMode) return
       const position = {
         x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
@@ -40,24 +48,21 @@ export default function QContextMenu(props) {
       }
       setContextMenu({ visible: true, ...position, currentMousePos: canvasProps.getPointer(e) })
       addDocumentEventListener('keyup', document, handleKeyup)
+      canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
     }
-  }
 
-  const handleClick = (e) => {
+    const handleClick = (e) => {
-    // e.preventDefault()
+      // e.preventDefault()
-    setContextMenu({ ...contextMenu, visible: false })
-  }
-
-  const handleOutsideClick = (e) => {
-    // e.preventDefault()
-    if (contextMenu.visible) {
       setContextMenu({ ...contextMenu, visible: false })
-      removeDocumentEvent('keyup')
     }
-  }
 
-  useEffect(() => {
+    const handleOutsideClick = (e) => {
-    if (!contextRef.current) return
+      // e.preventDefault()
+      if (contextMenu.visible) {
+        setContextMenu({ ...contextMenu, visible: false })
+        removeDocumentEvent('keyup')
+      }
+    }
 
     canvasProps?.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
     document.addEventListener('click', handleClick)
@@ -67,9 +72,43 @@ export default function QContextMenu(props) {
       removeDocumentEvent('keyup')
       document.removeEventListener('click', handleClick)
       document.removeEventListener('click', handleOutsideClick)
-      canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
     }
-  }, [contextRef, contextMenuList, currentObject])
+  }, [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 (
     <>

src/hooks/module/useModulePlace.js

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
+import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { useMasterController } from '@/hooks/common/useMasterController'
+import { canvasSettingState, canvasState, currentCanvasPlanState, moduleSetupSurfaceState } from '@/store/canvasAtom'
+import { POLYGON_TYPE, BATCH_TYPE } from '@/common/common'
+import { useRoofFn } from '@/hooks/common/useRoofFn'
+import { roofDisplaySelector } from '@/store/settingAtom'
+import offsetPolygon from '@/util/qpolygon-utils'
+import { v4 as uuidv4 } from 'uuid'
+import { QPolygon } from '@/components/fabric/QPolygon'
+import { useEvent } from '@/hooks/useEvent'
+import { useSwal } from '@/hooks/useSwal'
+import { useMessage } from '@/hooks/useMessage'
+
+export function useModulePlace() {
+  const canvas = useRecoilValue(canvasState)
+  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
+  const [trestleDetailParams, setTrestleDetailParams] = useState([])
+  const [trestleDetailList, setTrestleDetailList] = useState([])
+  const selectedModules = useRecoilValue(selectedModuleState)
+  const { getTrestleDetailList } = useMasterController()
+  const canvasSetting = useRecoilValue(canvasSettingState)
+  const { setSurfaceShapePattern } = useRoofFn()
+  const roofDisplay = useRecoilValue(roofDisplaySelector)
+  const { addTargetMouseEventListener } = useEvent()
+  const setModuleSetupSurface = useSetRecoilState(moduleSetupSurfaceState)
+  const [saleStoreNorthFlg, setSaleStoreNorthFlg] = useState(false)
+  const { swalFire } = useSwal()
+  const { getMessage } = useMessage()
+
+  return {
+    selectedModules,
+  }
+}

src/hooks/useContextMenu.js

@@ -81,9 +81,9 @@ export function useContextMenu() {
     switch (selectedMenu) {
       case 'outline':
         break
-      // default:
+      default:
-      //   setContextMenu([])
+        setContextMenu([])
-      //   break
+        break
     }
   }