qcast-front/src/hooks/roofcover/useMovementSetting.js

import { useRecoilValue } from 'recoil'
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage'
import { useEffect, useRef, useState } from 'react'
import { useEvent } from '@/hooks/useEvent'
import { POLYGON_TYPE } from '@/common/common'
import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'

//동선이동 형 올림 내림
export function useMovementSetting(id) {
  const TYPE = {
    FLOW_LINE: 'flowLine', // 동선이동
    UP_DOWN: 'updown', //형 올림내림
  }
  const canvas = useRecoilValue(canvasState)
  const { initEvent, addCanvasMouseEventListener } = useEvent()
  const { closePopup } = usePopup()
  const { getMessage } = useMessage()
  const currentObject = useRecoilValue(currentObjectState)
  const buttonType = [
    { id: 1, name: getMessage('modal.movement.flow.line.move'), type: TYPE.FLOW_LINE },
    { id: 2, name: getMessage('modal.movement.flow.line.updown'), type: TYPE.UP_DOWN },
  ]
  const [type, setType] = useState(TYPE.FLOW_LINE)
  const typeRef = useRef(type)

  const FLOW_LINE_REF = {
    DOWN_LEFT_INPUT_REF: useRef(null),
    UP_RIGHT_INPUT_REF: useRef(null),
    DOWN_LEFT_RADIO_REF: useRef(null),
    UP_RIGHT_RADIO_REF: useRef(null),
  }

  const UP_DOWN_REF = {
    UP_INPUT_REF: useRef(null),
    DOWN_INPUT_REF: useRef(null),
    UP_RADIO_REF: useRef(null),
    DOWN_RADIO_REF: useRef(null),
  }

  useEffect(() => {
    typeRef.current = type
    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
    outerLines.forEach((line) => {
      line.set({ stroke: 'black' })
      line.set({ visible: false })
    })
    canvas.getObjects().forEach((obj) => {
      obj.set({ selectable: false })
    })
    const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // 기존 wallLine의 visible false
    roofs.forEach((roof) => {
      roof.innerLines.forEach((line) => {
        line.bringToFront()
        line.set({ selectable: false })
        line.set({ strokeWidth: 1 })
      })
    })
    if (type === TYPE.FLOW_LINE) {
      roofs.forEach((roof) => {
        roof.innerLines.forEach((line) => {
          line.bringToFront()
          line.set({ selectable: true })
          line.set({ strokeWidth: 4 })
        })
      })
    } else if (type === TYPE.UP_DOWN) {
      const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
      outerLines.forEach((line) => {
        line.set({ stroke: 'black' })
        line.set({ visible: true })
        line.bringToFront()
        line.set({ selectable: true })
      })
    }
    canvas.renderAll()
  }, [type])

  useEffect(() => {
    /*const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL) // 기존 wallLine의 visible false
    wallLines.forEach((line) => {
      line.set({ visible: false })
    })*/

    canvas.renderAll()
    addCanvasMouseEventListener('mouse:move', mouseMoveEvent)
    return () => {
      initEvent()
      const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
      wallLines.forEach((line) => {
        line.set({ visible: true })
      })

      const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
      outerLines.forEach((line) => {
        line.set({ stroke: 'black' })
        line.set({ visible: false })
      })

      canvas.renderAll()
    }
  }, [])

  useEffect(() => {
    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
    outerLines.forEach((line) => {
      line.set({ stroke: 'black' })
    })
    clearRef()
    if (!currentObject) {
      return
    }

    if (currentObject.name === OUTER_LINE_TYPE.OUTER_LINE) {
      currentObject.set({ stroke: '#EA10AC' })
      currentObject.bringToFront()
    }
    canvas.renderAll()
  }, [currentObject])

  const clearRef = () => {
    if (type === TYPE.FLOW_LINE) {
      FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
      FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
      FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = false
      FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = false
    }
    if (type === TYPE.UP_DOWN) {
      UP_DOWN_REF.UP_INPUT_REF.current.value = ''
      UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
      UP_DOWN_REF.UP_RADIO_REF.current.checked = false
      UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false
    }
  }

  const mouseMoveEvent = (e) => {
    if (typeRef.current === TYPE.FLOW_LINE) {
      flowLineEvent(e)
    } else {
      updownEvent(e)
    }
  }
  const flowLineEvent = (e) => {
    const target = canvas.getActiveObject()
    if (!target) {
      return
    }
    const direction = target.direction
    const { top: targetTop, left: targetLeft } = target
    const currentX = canvas.getPointer(e.e).x
    const currentY = Math.floor(canvas.getPointer(e.e).y)

    if (direction === 'left' || direction === 'right') {
      if (targetTop > currentY) {
        console.log('targetTop > currentY')
        FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = true
        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''

        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
      } else {
        FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true
        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''

        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
      }
    } else {
      if (targetLeft > currentX) {
        FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true
        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''

        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
      } else {
        FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = true
        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''

        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
      }
    }

    canvas?.renderAll()
  }

  const updownEvent = (e) => {
    const target = canvas.getActiveObject()
    if (!target) {
      return
    }
    const direction = target.direction
    const { top: targetTop, left: targetLeft } = target
    const currentX = canvas.getPointer(e.e).x
    const currentY = Math.floor(canvas.getPointer(e.e).y)

    if (direction === 'left' || direction === 'right') {
      if (targetTop > currentY) {
        UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
        UP_DOWN_REF.UP_INPUT_REF.current.value = ''

        UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
      } else {
        UP_DOWN_REF.UP_RADIO_REF.current.checked = true
        UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''

        UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
      }
    } else {
      if (targetLeft > currentX) {
        UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
        UP_DOWN_REF.UP_INPUT_REF.current.value = ''

        UP_DOWN_REF.DOWN_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
      } else {
        UP_DOWN_REF.UP_RADIO_REF.current.checked = true
        UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''

        UP_DOWN_REF.UP_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
      }
    }

    canvas?.renderAll()
  }

  const handleSave = () => {
    if (type === TYPE.FLOW_LINE) {
      // 동선이동
      if (FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked) {
        // 높이 변경: 아래, 왼쪽 체크
      } else {
        // 높이 변경: 위, 오른쪽 체크
      }
    } else {
      // 형 올림내림
      if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {
        // 자릿수를 올리다 체크
        const length = Number(UP_DOWN_REF.UP_INPUT_REF.current.value)
      } else {
        // 자릿수를 내리다 체크
        const length = Number(UP_DOWN_REF.DOWN_INPUT_REF.current.value)
      }
    }
  }

  return {
    TYPE,
    closePopup,
    buttonType,
    type,
    setType,
    FLOW_LINE_REF,
    UP_DOWN_REF,
    handleSave,
  }
}