배치면 초기설정, 지붕면할당 작업중

src/components/floor-plan/CanvasMenu.jsx

@@ -82,7 +82,6 @@ export default function CanvasMenu(props) {
   const commonUtils = useRecoilValue(commonUtilsState)
   const { commonFunctions } = useCommonUtils()
 
-  const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
   const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
   const { restoreModuleInstArea } = useModuleBasicSetting()
 

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -65,6 +65,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
       selected: true,
       layout: roofLayout,
     }
+    console.log('roofInfo', roofInfo)
 
     const addedRoofs = []
     addedRoofs.push(roofInfo)
@@ -208,7 +209,12 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           <div className="outline-form">
                             <span className="mr10">W</span>
                             <div className="input-grid" style={{ width: '63px' }}>
-                              <input type="text" className="input-origin block" ref={roofRef.width} value={parseInt(currentRoofMaterial.width)} />
+                              <input
+                                type="text"
+                                className="input-origin block"
+                                ref={roofRef.width}
+                                defaultValue={parseInt(currentRoofMaterial.width)}
+                              />
                             </div>
                           </div>
                         </div>
@@ -218,7 +224,12 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           <div className="outline-form">
                             <span className="mr10">L</span>
                             <div className="input-grid" style={{ width: '63px' }}>
-                              <input type="text" className="input-origin block" ref={roofRef.length} value={parseInt(currentRoofMaterial.length)} />
+                              <input
+                                type="text"
+                                className="input-origin block"
+                                ref={roofRef.length}
+                                defaultValue={parseInt(currentRoofMaterial.length)}
+                              />
                             </div>
                           </div>
                         </div>

src/components/floor-plan/modal/setting01/FirstOption.jsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react'
-import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useMessage } from '@/hooks/useMessage'
 import { POLYGON_TYPE } from '@/common/common'
-import { setSurfaceShapePattern } from '@/util/canvas-util'
 import { useEvent } from '@/hooks/useEvent'
+import { useRoofFn } from '@/hooks/common/useRoofFn'
 
 export default function FirstOption(props) {
   const { getMessage } = useMessage()
@@ -11,6 +10,7 @@ export default function FirstOption(props) {
   let { canvas, settingModalFirstOptions, setSettingModalFirstOptions, settingsData, setSettingsData, settingsDataSave, setSettingsDataSave } = props
   const { option1, option2, dimensionDisplay } = settingModalFirstOptions
   const { initEvent } = useEvent()
+  const { setSurfaceShapePattern } = useRoofFn()
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {

src/hooks/common/useCanvasConfigInitialize.js

@@ -2,12 +2,13 @@ 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 { getChonByDegree, getDegreeByChon } 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'
 import { usePolygon } from '@/hooks/usePolygon'
+import { useRoofFn } from '@/hooks/common/useRoofFn'
 
 export function useCanvasConfigInitialize() {
   const canvas = useRecoilValue(canvasState)
@@ -18,6 +19,7 @@ export function useCanvasConfigInitialize() {
   const setDotLineGridSetting = useSetRecoilState(dotLineGridSettingState)
   const pitchText = useRecoilValue(pitchTextSelector)
   const angleUnit = useRecoilValue(showAngleUnitSelector)
+  const { setSurfaceShapePattern } = useRoofFn()
   const {} = useFont()
   const {} = useGrid()
   const {} = useRoof()

src/hooks/common/useRoof.js

@@ -2,12 +2,13 @@ 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
@@ -23,7 +24,7 @@ export function useRoof() {
     canvas.renderAll()
   }, [allocDisplay])
 
-  const setSurfaceShapePattern = (polygon, mode = 'onlyBorder') => {
+  /*const setSurfaceShapePattern = (polygon, mode = 'onlyBorder') => {
     const ratio = window.devicePixelRatio || 1
 
     let width = 265 / 10
@@ -145,7 +146,7 @@ export function useRoof() {
     polygon.set('fill', null)
     polygon.set('fill', pattern)
     polygon.canvas?.renderAll()
-  }
+  }*/
 
   return {}
 }

src/hooks/common/useRoofFn.js

@@ -0,0 +1,143 @@
+import { useRecoilValue } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
+import { selectedRoofMaterialSelector } from '@/store/settingAtom'
+
+export function useRoofFn() {
+  const canvas = useRecoilValue(canvasState)
+  const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
+
+  //면형상 선택 클릭시 지붕 패턴 입히기
+  function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false) {
+    debugger
+    const ratio = window.devicePixelRatio || 1
+
+    let width = selectedRoofMaterial.width / 10
+    let height = selectedRoofMaterial.length / 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 (trestleMode) {
+      ctx.strokeStyle = 'black'
+      ctx.lineWidth = 0.2
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
+    } else {
+      ctx.fillStyle = 'rgba(255, 255, 255, 1)'
+    }
+
+    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' || trestleMode) {
+          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' || trestleMode) {
+            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' || trestleMode) {
+          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' || trestleMode) {
+            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 { setSurfaceShapePattern }
+}

src/hooks/module/useModuleBasicSetting.js

@@ -1,6 +1,6 @@
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
-import { rectToPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
+import { rectToPolygon } from '@/util/canvas-util'
 import { roofDisplaySelector } from '@/store/settingAtom'
 import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils'
 import { QPolygon } from '@/components/fabric/QPolygon'
@@ -13,6 +13,7 @@ import { useSwal } from '@/hooks/useSwal'
 import { canvasSettingState } from '@/store/canvasAtom'
 import { compasDegAtom } from '@/store/orientationAtom'
 import { QLine } from '@/components/fabric/QLine'
+import { useRoofFn } from '@/hooks/common/useRoofFn'
 
 export function useModuleBasicSetting() {
   const canvas = useRecoilValue(canvasState)
@@ -23,6 +24,7 @@ export function useModuleBasicSetting() {
   const { swalFire } = useSwal()
   const canvasSetting = useRecoilValue(canvasSettingState)
   const compasDeg = useRecoilValue(compasDegAtom)
+  const { setSurfaceShapePattern } = useRoofFn()
 
   // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   let selectedModuleInstSurfaceArray = []

src/hooks/object/useObjectBatch.js

@@ -5,13 +5,14 @@ import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { BATCH_TYPE, INPUT_TYPE } from '@/common/common'
 import { useEvent } from '@/hooks/useEvent'
-import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon, setSurfaceShapePattern, triangleToPolygon } from '@/util/canvas-util'
+import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon, triangleToPolygon } from '@/util/canvas-util'
 import { useSwal } from '@/hooks/useSwal'
 import * as turf from '@turf/turf'
 import { usePolygon } from '@/hooks/usePolygon'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { v4 as uuidv4 } from 'uuid'
 import { fontSelector } from '@/store/fontAtom'
+import { useRoofFn } from '@/hooks/common/useRoofFn'
 
 export function useObjectBatch({ isHidden, setIsHidden }) {
   const { getMessage } = useMessage()
@@ -20,6 +21,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
   // const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useContext(EventContext)
   const { swalFire } = useSwal()
   const { drawDirectionArrow } = usePolygon()
+  const { setSurfaceShapePattern } = useRoofFn()
   const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
 
   useEffect(() => {

src/hooks/option/useCanvasSetting.js

@@ -21,6 +21,7 @@ import {
   basicSettingState,
   settingsState,
   roofMaterialsAtom,
+  selectedRoofMaterialSelector,
 } from '@/store/settingAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { globalFontAtom } from '@/store/fontAtom'
@@ -28,6 +29,7 @@ import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 import { gridColorState } from '@/store/gridAtom'
 import { useColor } from 'react-color-palette'
 import { useMasterController } from '@/hooks/common/useMasterController'
+import { isObjectNotEmpty } from '@/util/common-utils'
 
 const defaultDotLineGridSetting = {
   INTERVAL: {
@@ -92,7 +94,7 @@ export function useCanvasSetting() {
 
   const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
   const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
-  const { getRoofMaterialList } = useMasterController()
+  const { getRoofMaterialList, getModuleTypeItemList } = useMasterController()
   const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom)
 
   const SelectOptions = [
@@ -102,18 +104,29 @@ export function useCanvasSetting() {
     { id: 4, name: '1/10', value: 1 / 10 },
   ]
 
+  const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
+
   useEffect(() => {
     addRoofMaterials()
   }, [])
 
+  useEffect(() => {
+    if (!selectedRoofMaterial || !isObjectNotEmpty(selectedRoofMaterial)) {
+      return
+    }
+
+    const { id } = selectedRoofMaterial
+    console.log(getModuleTypeItemList(id))
+  }, [selectedRoofMaterial])
+
   //지붕재 초기세팅
   const addRoofMaterials = async () => {
     const { data } = await getRoofMaterialList()
-    const roofLists = data.map((item) => ({
+    const roofLists = data.map((item, idx) => ({
       ...item,
       id: item.roofMatlCd,
       name: item.roofMatlNm,
-      selected: false,
+      selected: idx === 0,
       nameJp: item.roofMatlNmJp,
       length: item.lenBase && parseInt(item.lenBase),
       width: item.widBase && parseInt(item.widBase),

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -1,7 +1,6 @@
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
-import { setSurfaceShapePattern } from '@/util/canvas-util'
 import { useSwal } from '@/hooks/useSwal'
 import { usePolygon } from '@/hooks/usePolygon'
 import { basicSettingState, roofDisplaySelector, roofMaterialsSelector, selectedRoofMaterialSelector } from '@/store/settingAtom'
@@ -13,6 +12,7 @@ import { useMessage } from '@/hooks/useMessage'
 import useMenu from '@/hooks/common/useMenu'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import { menuTypeState } from '@/store/menuAtom'
+import { useRoofFn } from '@/hooks/common/useRoofFn'
 
 // 지붕면 할당
 export function useRoofAllocationSetting(id) {
@@ -33,6 +33,8 @@ export function useRoofAllocationSetting(id) {
   const [roofList, setRoofList] = useState([])
   const [editingLines, setEditingLines] = useState([])
 
+  const { setSurfaceShapePattern } = useRoofFn()
+
   useEffect(() => {
     setRoofList(basicSetting.roofs)
   }, [basicSetting])

src/hooks/surface/usePlacementShapeDrawing.js

@@ -13,7 +13,7 @@ import { useMouse } from '@/hooks/useMouse'
 import { useLine } from '@/hooks/useLine'
 import { useTempGrid } from '@/hooks/useTempGrid'
 import { useEffect, useRef } from 'react'
-import { distanceBetweenPoints, setSurfaceShapePattern } from '@/util/canvas-util'
+import { distanceBetweenPoints } from '@/util/canvas-util'
 import { fabric } from 'fabric'
 import { calculateAngle } from '@/util/qpolygon-utils'
 import {
@@ -33,6 +33,7 @@ import { POLYGON_TYPE } from '@/common/common'
 import { usePopup } from '@/hooks/usePopup'
 
 import { roofDisplaySelector } from '@/store/settingAtom'
+import { useRoofFn } from '@/hooks/common/useRoofFn'
 
 // 면형상 배치
 export function usePlacementShapeDrawing(id) {
@@ -46,6 +47,7 @@ export function usePlacementShapeDrawing(id) {
   const { addLine, removeLine } = useLine()
   const { addPolygonByLines, drawDirectionArrow } = usePolygon()
   const { tempGridMode } = useTempGrid()
+  const { setSurfaceShapePattern } = useRoofFn()
 
   const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)
   const adsorptionPointAddMode = useRecoilValue(adsorptionPointAddModeState)

src/hooks/surface/useSurfaceShapeBatch.js

@@ -3,7 +3,7 @@
 import { useRecoilValue } from 'recoil'
 import { canvasState, globalPitchState } from '@/store/canvasAtom'
 import { MENU, POLYGON_TYPE } from '@/common/common'
-import { getIntersectionPoint, setSurfaceShapePattern } from '@/util/canvas-util'
+import { getIntersectionPoint } from '@/util/canvas-util'
 import { degreesToRadians } from '@turf/turf'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { useSwal } from '@/hooks/useSwal'
@@ -15,6 +15,7 @@ import { usePolygon } from '@/hooks/usePolygon'
 import { fontSelector } from '@/store/fontAtom'
 import { slopeSelector } from '@/store/commonAtom'
 import { QLine } from '@/components/fabric/QLine'
+import { useRoofFn } from '@/hooks/common/useRoofFn'
 
 export function useSurfaceShapeBatch() {
   const { getMessage } = useMessage()
@@ -29,6 +30,7 @@ export function useSurfaceShapeBatch() {
   const { addCanvasMouseEventListener, initEvent } = useEvent()
   // const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   const { closePopup } = usePopup()
+  const { setSurfaceShapePattern } = useRoofFn()
 
   const applySurfaceShape = (surfaceRefs, selectedType, id) => {
     let length1, length2, length3, length4, length5

src/store/settingAtom.js

@@ -220,8 +220,7 @@ export const selectedRoofMaterialSelector = selector({
   key: 'selectedRoofMaterialSelector',
   get: ({ get }) => {
     const basicSetting = get(basicSettingState)
-    const roofMaterials = get(roofMaterialsAtom)
+    return basicSetting.selectedRoofMaterial
-    return basicSetting.selectedRoofMaterial ?? roofMaterials[0]
   },
 })
 

src/util/canvas-util.js

@@ -792,7 +792,7 @@ export const rectToPolygon = (rect) => {
 }
 
 //면형상 선택 클릭시 지붕 패턴 입히기
-export function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false) {
+function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false) {
   const ratio = window.devicePixelRatio || 1
 
   let width = 265 / 10