qcast-front/src/hooks/useContextMenu.js

import { useRecoilValue } from 'recoil'
import { currentMenuState, currentObjectState } from '@/store/canvasAtom'
import { useEffect, useState } from 'react'
import { MENU } from '@/common/common'
import AuxiliaryMove from '@/components/floor-plan/modal/auxiliary/AuxiliaryMove'
import AuxiliarySize from '@/components/floor-plan/modal/auxiliary/AuxiliarySize'

export function useContextMenu({ externalFn }) {
  const currentMenu = useRecoilValue(currentMenuState)
  const [contextMenu, setContextMenu] = useState([[]])
  const [currentContextMenu, setCurrentContextMenu] = useState(null)
  const currentObject = useRecoilValue(currentObjectState)

  const currentMenuSetting = () => {
    console.log(currentMenu)
    switch (currentMenu) {
      case MENU.PLAN_DRAWING:
        setContextMenu([
          [
            {
              id: 'gridMove',
              name: '그리드 이동',
            },
            {
              id: 'gridCopy',
              name: '그리드 복사',
            },
            {
              id: 'gridColorEdit',
              name: '그리드 색 변경',
            },
            {
              id: 'remove',
              name: '삭제',
            },
            {
              id: 'removeAll',
              name: '전체 삭제',
            },
          ],
        ])
        break
      case MENU.ROOF_COVERING.EXTERIOR_WALL_LINE:
      case MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS:
      case MENU.ROOF_COVERING.ROOF_SHAPE_PASSIVITY_SETTINGS:
      case MENU.ROOF_COVERING.ROOF_SHAPE_EDITING:
      case MENU.ROOF_COVERING.HELP_LINE_DRAWING:
      case MENU.ROOF_COVERING.EAVES_KERAVA_EDIT:
      case MENU.ROOF_COVERING.MOVEMENT_SHAPE_UPDOWN:
      case MENU.ROOF_COVERING.OUTLINE_EDIT_OFFSET:
      case MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC:
      case MENU.ROOF_COVERING.DEFAULT:
        setContextMenu([
          [
            {
              id: 'refresh',
              name: '새로고침',
              fn: () => {
                externalFn.handleZoomClear()
              },
            },
            {
              id: 'roofMaterialPlacement',
              name: '지붕재 배치',
            },
            {
              id: 'roofMaterialRemove',
              name: '지붕재 삭제',
            },
            {
              id: 'roofMaterialRemoveAll',
              name: '지붕재 전체 삭제',
            },
            {
              id: 'selectMove',
              name: '선택・이동',
            },
            {
              id: 'wallLineRemove',
              name: '외벽선 삭제',
            },
          ],
          [
            {
              id: 'sizeEdit',
              name: '사이즈 변경',
              component: <AuxiliarySize setCurrentContextMenu={setCurrentContextMenu} />,
            },
            {
              id: 'auxiliaryMove',
              name: '보조선 이동(M)',
              component: <AuxiliaryMove setCurrentContextMenu={setCurrentContextMenu} />,
            },
            {
              id: 'auxiliaryCopy',
              name: '보조선 복사(C)',
            },
            {
              id: 'auxiliaryRemove',
              name: '보조선 삭제(D)',
            },
            {
              id: 'auxiliaryVerticalBisector',
              name: '보조선 수직이등분선',
            },
            {
              id: 'auxiliaryCut',
              name: '보조선 절삭',
            },
            {
              id: 'auxiliaryRemoveAll',
              name: '보조선 전체 삭제',
            },
          ],
        ])
        break
      case MENU.BATCH_CANVAS.SLOPE_SETTING:
      case MENU.BATCH_CANVAS.BATCH_DRAWING:
      case MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH:
      case MENU.BATCH_CANVAS.OBJECT_BATCH:
      case MENU.BATCH_CANVAS.ALL_REMOVE:
      case MENU.BATCH_CANVAS.DEFAULT:
        setContextMenu([
          [
            {
              id: 'sizeEdit',
              name: '사이즈 변경',
            },
            {
              id: 'remove',
              name: '삭제(D)',
            },
            {
              id: 'move',
              name: '이동(M)',
            },
            {
              id: 'copy',
              name: '복사(C)',
            },
          ],
          [
            {
              id: 'roofMaterialEdit',
              name: '지붕재 변경',
            },
            {
              id: 'linePropertyEdit',
              name: '각 변 속성 변경',
            },
            {
              id: 'flowDirectionEdit',
              name: '흐름 방향 변경',
            },
          ],
        ])
        break
      default:
        setContextMenu([])
        break
    }
  }
  useEffect(() => {
    currentMenuSetting()
  }, [currentMenu])

  useEffect(() => {
    if (currentObject?.name) {
      switch (currentObject.name) {
        case 'triangleDormer':
          setContextMenu([
            [
              {
                id: 'sizeEdit',
                name: '사이즈 변경',
              },
              {
                id: 'dormerRemove',
                name: '삭제(D)',
              },
              {
                id: 'dormerMove',
                name: '이동(M)',
              },
              {
                id: 'dormerCopy',
                name: '복사(C)',
              },
              {
                id: 'roofMaterialEdit',
                name: '지붕재 변경',
              },
              {
                id: 'dormerOffset',
                name: '도머 오프셋',
              },
            ],
          ])
          break
        case 'roof':
          setContextMenu([
            [
              {
                id: 'sizeEdit',
                name: '사이즈 변경',
              },
              {
                id: 'roofMaterialRemove',
                name: '삭제(D)',
              },
              {
                id: 'roofMaterialMove',
                name: '이동(M)',
              },
              {
                id: 'roofMaterialCopy',
                name: '복사(C)',
              },
            ],
            [
              {
                id: 'roofMaterialEdit',
                name: '지붕재 변경',
              },
              {
                id: 'linePropertyEdit',
                name: '각 변 속성 변경',
              },
              {
                id: 'flowDirectionEdit',
                name: '흐름 뱡향 변경',
              },
            ],
          ])
          break
        case 'opening':
          setContextMenu([
            [
              {
                id: 'sizeEdit',
                name: '사이즈 변경',
              },
              {
                id: 'openingRemove',
                name: '삭제(D)',
              },
              {
                id: 'openingMove',
                name: '이동(M)',
              },
              {
                id: 'openingCopy',
                name: '복사(C)',
              },
              {
                id: 'openingOffset',
                name: '개구 오프셋',
              },
            ],
          ])
          break
        default:
          currentMenuSetting()
      }
    } else {
      currentMenuSetting()
    }
  }, [currentObject])

  useEffect(() => {
    console.log(currentContextMenu)
  }, [currentContextMenu])

  return {
    contextMenu,
    currentContextMenu,
    setCurrentContextMenu,
  }
}