qcast-front/src/hooks/common/useCanvasConfigInitialize.js

import { useEffect } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { basicSettingState, roofDisplaySelector, settingModalFirstOptionsState } from '@/store/settingAtom'
import { canvasState, dotLineGridSettingState, pitchText, pitchTextSelector, showAngleUnitSelector } from '@/store/canvasAtom'
import { getChonByDegree, getDegreeByChon, setSurfaceShapePattern } from '@/util/canvas-util'
import { useFont } from '@/hooks/common/useFont'
import { useGrid } from '@/hooks/common/useGrid'
import { globalFontAtom } from '@/store/fontAtom'
import { useRoof } from '@/hooks/common/useRoof'

export function useCanvasConfigInitialize() {
  const canvas = useRecoilValue(canvasState)
  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
  const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
  const roofDisplay = useRecoilValue(roofDisplaySelector)
  const setGlobalFonts = useSetRecoilState(globalFontAtom)
  const setDotLineGridSetting = useSetRecoilState(dotLineGridSettingState)
  const pitchText = useRecoilValue(pitchTextSelector)
  const angleUnit = useRecoilValue(showAngleUnitSelector)
  const {} = useFont()
  const {} = useGrid()
  const {} = useRoof()

  useEffect(() => {
    if (!canvas) return
    canvas
      .getObjects()
      .filter((polygon) => polygon.name === 'roof')
      .forEach((polygon) => {
        setSurfaceShapePattern(polygon, roofDisplay.column)
      })
    canvas.renderAll()
  }, [roofDisplay])

  useEffect(() => {
    if (!canvas) return
    const offsetTexts = canvas.getObjects().filter((obj) => obj.name === 'pitchText')
    const flowTexts = canvas.getObjects().filter((obj) => obj.name === 'flowText')
    if (basicSetting.roofAngleSet === 'slope') {
      offsetTexts.forEach((obj) => {
        obj.set({ text: `${obj.originText}-∠${obj.pitch}${angleUnit}` })
      })
      flowTexts.forEach((obj) => {
        obj.set({ text: `${obj.originText}-∠${obj.pitch}${pitchText}` })
      })
    }

    if (basicSetting.roofAngleSet === 'flat') {
      offsetTexts.forEach((obj) => {
        obj.set({ text: `${obj.originText}-∠${getDegreeByChon(obj.pitch)}${angleUnit}` })
      })
      flowTexts.forEach((obj) => {
        obj.set({ text: `${obj.originText}-∠${getDegreeByChon(obj.pitch)}${pitchText}` })
      })
    }

    canvas.renderAll()
  }, [basicSetting])

  const canvasLoadInit = () => {
    roofInit() //화면표시 초기화
    groupDimensionInit()
    reGroupInit() //그룹 객체 재그룹
  }

  const gridInit = () => {
    setDotLineGridSetting((prev) => {
      return { ...prev, INTERVAL: { ...prev.INTERVAL } }
    })
  }

  //치수표시, 화면표시, 글꼴등 초기화
  const roofInit = () => {
    setSettingModalFirstOptions((prev) => {
      // ...prev에서 내부에 있는 option2 객체의 주소값도 다르게 만들어줘
      const option1 = prev.option1.map((option) => {
        return { ...option }
      })
      const option2 = prev.option2.map((option) => {
        return { ...option }
      })
      const dimensionDisplay = prev.dimensionDisplay.map((option) => {
        return { ...option }
      })
      return { ...prev, option1, option2, dimensionDisplay }
    })
    gridInit()

    setGlobalFonts((prev) => {
      const commonText = { ...prev.commonText }
      const dimensionLineText = { ...prev.dimensionLineText }
      const flowText = { ...prev.flowText }
      const lengthText = { ...prev.lengthText }
      const circuitNumberText = { ...prev.circuitNumberText }
      return { commonText, dimensionLineText, flowText, lengthText, circuitNumberText }
    })
  }

  const groupDimensionInit = () => {
    const groups = canvas.getObjects().filter((obj) => obj.groupYn && obj.name === 'dimensionGroup')
    const groupIds = []

    groups.forEach((group) => {
      if (!groupIds.includes(group.id)) {
        groupIds.push(group.id)
      }
    })

    groupIds.forEach((id) => {
      const groupObjects = canvas.getObjects().filter((obj) => obj.id === id && obj.type !== 'text')
      const objectsName = canvas.getObjects().filter((obj) => obj.id === id && obj.type !== 'text')[0].groupName
      const lineDirection = canvas.getObjects().filter((obj) => obj.id === id && obj.name === 'centerLine')[0].lineDirection
      const text = canvas.getObjects().filter((obj) => obj.id === id && obj.type === 'text')[0]

      let objectArray = []

      if (groupObjects) {
        groupObjects.forEach((obj) => {
          objectArray.push(obj)
        })
      }
      objectArray.push(text)

      objectArray.forEach((obj) => {
        canvas?.remove(obj)
      })

      const group = new fabric.Group(objectArray, {
        groupId: id,
        name: objectsName,
        selectable: true,
        lockMovementX: true,
        lockMovementY: true,
        originX: 'center',
        originY: 'center',
        lineDirection: lineDirection,
      })
      canvas.add(group)
    })
  }

  const reGroupInit = () => {
    const excludeObjects = ['dimensionGroup', 'dimensionLineText']

    const groups = canvas.getObjects().filter((obj) => obj.groupYn && !obj.name.includes(excludeObjects))
    const groupIds = []

    groups.forEach((group) => {
      if (!groupIds.includes(group.groupId)) {
        groupIds.push(group.groupId)
      }
    })

    groupIds.forEach((id) => {
      //그룹아이디로 캔버스의 객체를 조회함
      const groupObjects = canvas.getObjects().filter((obj) => obj.groupId === id || obj.id === id)
      const objectsName = canvas.getObjects().filter((obj) => obj.groupId === id || obj.id === id)[0].groupName
      const objectsParentId = canvas.getObjects().filter((obj) => obj.groupId === id || obj.id === id)[0].parentId

      let objectArray = []

      //그룹객체가 있으면 배열에 추가함
      if (groupObjects) {
        groupObjects.forEach((obj) => {
          objectArray.push(obj)
        })
      }

      //그룹객체를 캔버스에서 제거함
      objectArray.forEach((obj) => {
        canvas?.remove(obj)
      })

      //그룹 객체로 다시 만든다 (좌표때문에)
      const group = new fabric.Group(objectArray, {
        groupId: id,
        name: objectsName,
        selectable: true,
        lockMovementX: true,
        lockMovementY: true,
        originX: 'center',
        originY: 'center',
        parentId: objectsParentId,
      })
      canvas.add(group)

      //그룹 객체 재그룹 완료
      group.getObjects().forEach((obj) => {
        obj.fire('modified')
      })
    })
  }

  return { canvasLoadInit, gridInit }
}