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

import { canvasState } from '@/store/canvasAtom'
import { allocDisplaySelector, roofDisplaySelector } from '@/store/settingAtom'
import { useRecoilValue } from 'recoil'
import { useEffect } from 'react'
import { useRoofFn } from '@/hooks/common/useRoofFn'

export function useRoof() {
  const canvas = useRecoilValue(canvasState)
  const allocDisplay = useRecoilValue(allocDisplaySelector)
  const roofDisplay = useRecoilValue(roofDisplaySelector)
  const { setSurfaceShapePattern } = useRoofFn()
  useEffect(() => {
    if (!canvas) return
    canvas
      .getObjects()
      .filter((polygon) => polygon.name === 'roof')
      .forEach((polygon) => {
        if (allocDisplay) {
          if (polygon.roofMaterial) {
            setSurfaceShapePattern(polygon, roofDisplay.column, false, polygon.roofMaterial, true)
          }
        } else {
          polygon.set('fill', null)
        }
      })
    canvas.renderAll()
  }, [allocDisplay])

  /*const setSurfaceShapePattern = (polygon, mode = 'onlyBorder') => {
    const ratio = window.devicePixelRatio || 1

    let width = 265 / 10
    let height = 150 / 10
    let roofStyle = 2
    const inputPatternSize = { width: width, height: height } //임시 사이즈
    const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해

    if (polygon.direction === 'east' || polygon.direction === 'west') {
      //세로형이면 width height를 바꿈
      ;[patternSize.width, patternSize.height] = [inputPatternSize.height, patternSize.width]
    }

    // 패턴 소스를 위한 임시 캔버스 생성
    const patternSourceCanvas = document.createElement('canvas')
    patternSourceCanvas.width = polygon.width * ratio
    patternSourceCanvas.height = polygon.height * ratio
    const ctx = patternSourceCanvas.getContext('2d')
    let offset = roofStyle === 1 ? 0 : patternSize.width / 2

    const rows = Math.floor(patternSourceCanvas.height / patternSize.height)
    const cols = Math.floor(patternSourceCanvas.width / patternSize.width)

    ctx.strokeStyle = mode === 'allPainted' ? 'black' : 'green'
    ctx.lineWidth = mode === 'allPainted' ? 1 : 0.4
    ctx.fillStyle = mode === 'allPainted' ? 'rgba(0, 159, 64, 0.7)' : 'white'

    if (polygon.direction === 'east' || polygon.direction === 'west') {
      offset = roofStyle === 1 ? 0 : patternSize.height / 2
      for (let col = 0; col <= cols; col++) {
        const x = col * patternSize.width
        const yStart = 0
        const yEnd = patternSourceCanvas.height
        ctx.beginPath()
        ctx.moveTo(x, yStart) // 선 시작점
        ctx.lineTo(x, yEnd) // 선 끝점
        ctx.stroke()
        if (mode === 'allPainted') {
          ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart)
        }

        for (let row = 0; row <= rows; row++) {
          const y = row * patternSize.height + (col % 2 === 0 ? 0 : offset)
          const xStart = col * patternSize.width
          const xEnd = xStart + patternSize.width
          ctx.beginPath()
          ctx.moveTo(xStart, y) // 선 시작점
          ctx.lineTo(xEnd, y) // 선 끝점
          ctx.stroke()
          if (mode === 'allPainted') {
            ctx.fillRect(xStart, y, xEnd - xStart, patternSize.height)
          }
        }
      }
    } else {
      for (let row = 0; row <= rows; row++) {
        const y = row * patternSize.height

        ctx.beginPath()
        ctx.moveTo(0, y) // 선 시작점
        ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점
        ctx.stroke()
        if (mode === 'allPainted') {
          ctx.fillRect(0, y, patternSourceCanvas.width, patternSize.height)
        }

        for (let col = 0; col <= cols; col++) {
          const x = col * patternSize.width + (row % 2 === 0 ? 0 : offset)
          const yStart = row * patternSize.height
          const yEnd = yStart + patternSize.height

          ctx.beginPath()
          ctx.moveTo(x, yStart) // 선 시작점
          ctx.lineTo(x, yEnd) // 선 끝점
          ctx.stroke()
          if (mode === 'allPainted') {
            ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart)
          }
        }
      }
    }

    const hachingPatternSourceCanvas = document.createElement('canvas')

    if (mode === 'lineHatch') {
      hachingPatternSourceCanvas.width = polygon.width * ratio
      hachingPatternSourceCanvas.height = polygon.height * ratio

      const ctx1 = hachingPatternSourceCanvas.getContext('2d')

      const gap = 10

      ctx1.strokeStyle = 'green' // 선 색상
      ctx1.lineWidth = 0.3 // 선 두께

      for (let x = 0; x < hachingPatternSourceCanvas.width + hachingPatternSourceCanvas.height; x += gap) {
        ctx1.beginPath()
        ctx1.moveTo(x, 0) // 선 시작점
        ctx1.lineTo(0, x) // 선 끝점
        ctx1.stroke()
      }
    }

    const combinedPatternCanvas = document.createElement('canvas')
    combinedPatternCanvas.width = polygon.width * ratio
    combinedPatternCanvas.height = polygon.height * ratio
    const combinedCtx = combinedPatternCanvas.getContext('2d')

    // 첫 번째 패턴을 그린 후 두 번째 패턴을 덧입힘
    combinedCtx.drawImage(patternSourceCanvas, 0, 0)
    combinedCtx.drawImage(hachingPatternSourceCanvas, 0, 0)

    // 패턴 생성
    const pattern = new fabric.Pattern({
      source: combinedPatternCanvas,
      repeat: 'repeat',
    })

    polygon.set('fill', null)
    polygon.set('fill', pattern)
    polygon.canvas?.renderAll()
  }*/

  return {}
}