Canvas 설정 이미지표시 추가

src/components/floor-plan/modal/grid/DotLineGrid.jsx

@@ -71,7 +71,7 @@ export default function DotLineGrid(props) {
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('DotLineGrid useEffect 실행')
-    // fetchGridSettings()
+    fetchGridSettings()
   }, [objectNo])
 
   const HandleClickClose = () => {
@@ -100,9 +100,9 @@ export default function DotLineGrid(props) {
       const patternData = {
         INTERVAL: {
           type: res.gridType,
-          horizontalInterval: res.gridHorizon,
+          horizontalInterval: res.gridHorizon * 10,
-          verticalInterval: res.gridVertical,
+          verticalInterval: res.gridVertical * 10,
-          ratioInterval: res.gridRatio,
+          ratioInterval: res.gridRatio * 10,
         },
         dimension: res.gridDimen,
         DOT: res.dotGridDisplay,

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

@@ -2,216 +2,19 @@ import React, { useEffect, useState } from 'react'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useMessage } from '@/hooks/useMessage'
 
-//import { useRecoilState, useRecoilValue } from 'recoil'
-//import { settingModalSecondOptionsState } from '@/store/settingAtom'
-//import { useAxios } from '@/hooks/useAxios'
-//import { useSwal } from '@/hooks/useSwal'
-//import { setSurfaceShapePattern } from '@/util/canvas-util'
-//import { canvasState } from '@/store/canvasAtom'
-//import { POLYGON_TYPE } from '@/common/common'
-
 export default function FirstOption() {
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
   const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
   const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
   const { getMessage } = useMessage()
 
-  //const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
-  //const { option1, option2, dimensionDisplay } = settingModalFirstOptions
-  //const { option3, option4 } = settingModalSecondOptions
-  //const { get, post } = useAxios()
-  //const { swalFire } = useSwal()
-  //const canvas = useRecoilValue(canvasState)
-
   const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('FirstOption useEffect 실행')
-    //fetchSettings()
-    //frontSettings()
   }, [objectNo])
 
-  // // Canvas Setting 조회 및 초기화
-  // const fetchSettings = async () => {
-  //   try {
-  //     const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
-  //     const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
-  //     const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
-  //     const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
-  //     const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
-  //     const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
-
-  //     // 데이터 설정
-  //     setSettingModalFirstOptions({
-  //       option1: optionData1,
-  //       option2: optionData2,
-  //       dimensionDisplay: optionData5,
-  //     })
-
-  //     setSettingModalSecondOptions({
-  //       option3: optionData3,
-  //       option4: optionData4,
-  //     })
-  //   } catch (error) {
-  //     console.error('Data fetching error:', error)
-  //   }
-  // }
-
-  // const onClickOption = async (option) => {
-  //   option.selected = !option.selected
-
-  //   setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
-  //   setSettingModalSecondOptions({ option3, option4 })
-
-  //   try {
-  //     // 서버에 전송할 데이터
-  //     const dataToSend = {
-  //       firstOption1: option1.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       firstOption2: option2.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       firstOption3: dimensionDisplay.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       // secondOption1: secondOptions[0].option1.map((item) => ({
-  //       //   name: item.id,
-  //       //   name: item.name,
-  //       //   // 필요한 경우 데이터 항목 추가
-  //       // })),
-  //       secondOption2: option4.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //     }
-
-  //     const patternData = {
-  //       objectNo,
-  //       //디스플레이 설정(다중)
-  //       allocDisplay: dataToSend.firstOption1[0].selected,
-  //       outlineDisplay: dataToSend.firstOption1[1].selected,
-  //       gridDisplay: dataToSend.firstOption1[2].selected,
-  //       lineDisplay: dataToSend.firstOption1[3].selected,
-  //       wordDisplay: dataToSend.firstOption1[4].selected,
-  //       circuitNumDisplay: dataToSend.firstOption1[5].selected,
-  //       flowDisplay: dataToSend.firstOption1[6].selected,
-  //       trestleDisplay: dataToSend.firstOption1[7].selected,
-  //       totalDisplay: dataToSend.firstOption1[8].selected,
-  //       //차수 표시(다건)
-  //       corridorDimension: dataToSend.firstOption3[0].selected,
-  //       realDimension: dataToSend.firstOption3[1].selected,
-  //       noneDimension: dataToSend.firstOption3[2].selected,
-  //       //화면 표시(다중)
-  //       onlyBorder: dataToSend.firstOption2[0].selected,
-  //       lineHatch: dataToSend.firstOption2[1].selected,
-  //       allPainted: dataToSend.firstOption2[2].selected,
-  //       //흡착범위 설정(단건)
-  //       adsorpRangeSmall: dataToSend.secondOption2[0].selected,
-  //       adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
-  //       adsorpRangeMedium: dataToSend.secondOption2[2].selected,
-  //       adsorpRangeLarge: dataToSend.secondOption2[3].selected,
-  //     }
-
-  //     // HTTP POST 요청 보내기
-  //     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
-  //       swalFire({ text: getMessage(res.returnMessage) })
-  //     })
-  //   } catch (error) {
-  //     swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
-  //   }
-  // }
-
-  // const onClickOnlyOne = async (item) => {
-  //   //화면 표시
-  //   if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
-  //     const options2 = settingModalFirstOptions?.option2.map((option2) => {
-  //       option2.selected = option2.id === item.id
-  //       return option2
-  //     })
-
-  //     const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
-
-  //     polygons.forEach((polygon) => {
-  //       setSurfaceShapePattern(polygon, item.column)
-  //     })
-
-  //     //치수 표시
-  //   } else {
-  //     const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
-  //       option.selected = option.id === item.id
-  //       return option
-  //     })
-  //   }
-
-  //   setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
-
-  //   try {
-  //     // 서버에 전송할 데이터
-  //     const dataToSend = {
-  //       firstOption1: option1.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       firstOption2: option2.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       firstOption3: dimensionDisplay.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       // secondOption1: secondOptions[0].option1.map((item) => ({
-  //       //   name: item.id,
-  //       //   name: item.name,
-  //       //   // 필요한 경우 데이터 항목 추가
-  //       // })),
-  //       secondOption2: option4.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //     }
-
-  //     const patternData = {
-  //       objectNo,
-  //       //디스플레이 설정(다중)
-  //       allocDisplay: dataToSend.firstOption1[0].selected,
-  //       outlineDisplay: dataToSend.firstOption1[1].selected,
-  //       gridDisplay: dataToSend.firstOption1[2].selected,
-  //       lineDisplay: dataToSend.firstOption1[3].selected,
-  //       wordDisplay: dataToSend.firstOption1[4].selected,
-  //       circuitNumDisplay: dataToSend.firstOption1[5].selected,
-  //       flowDisplay: dataToSend.firstOption1[6].selected,
-  //       trestleDisplay: dataToSend.firstOption1[7].selected,
-  //       totalDisplay: dataToSend.firstOption1[8].selected,
-  //       //차수 표시(다건)
-  //       corridorDimension: dataToSend.firstOption3[0].selected,
-  //       realDimension: dataToSend.firstOption3[1].selected,
-  //       noneDimension: dataToSend.firstOption3[2].selected,
-  //       //화면 표시(다중)
-  //       onlyBorder: dataToSend.firstOption2[0].selected,
-  //       lineHatch: dataToSend.firstOption2[1].selected,
-  //       allPainted: dataToSend.firstOption2[2].selected,
-  //       //흡착범위 설정(단건)
-  //       adsorpRangeSmall: dataToSend.secondOption2[0].selected,
-  //       adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
-  //       adsorpRangeMedium: dataToSend.secondOption2[2].selected,
-  //       adsorpRangeLarge: dataToSend.secondOption2[3].selected,
-  //     }
-
-  //     // HTTP POST 요청 보내기
-  //     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
-  //       swalFire({ text: getMessage(res.returnMessage) })
-  //     })
-  //   } catch (error) {
-  //     swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
-  //   }
-  // }
-
   return (
     <>
       <div className="modal-check-btn-wrap">

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

@@ -1,5 +1,4 @@
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-//import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
 import React, { useEffect, useState } from 'react'
 import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
@@ -10,20 +9,7 @@ import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/Pl
 import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 
-//import { useAxios } from '@/hooks/useAxios'
-//import { useSwal } from '@/hooks/useSwal'
-// import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
-
 export default function SecondOption() {
-  //const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
-  //const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
-  // const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
-  // const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
-  // const { option1, option2, dimensionDisplay } = settingModalFirstOptions
-  // const { option3, option4 } = settingModalSecondOptions
-  // const { get, post } = useAxios()
-  // const { swalFire } = useSwal()
-
   const { getMessage } = useMessage()
   const { addPopup, closePopup, closePopups } = usePopup()
   const [showFontSettingModal, setShowFontSettingModal] = useState(false)
@@ -43,106 +29,6 @@ export default function SecondOption() {
     //fetchSettings()
   }, [objectNo])
 
-  // Canvas Setting 조회 및 초기화
-  // const fetchSettings = async () => {
-  //   try {
-  //     const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
-  //     const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
-  //     const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
-  //     const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item, selected: res[item.column] }))
-  //     const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
-  //     const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
-
-  //     setSettingModalFirstOptions({
-  //       option1: optionData1,
-  //       option2: optionData2,
-  //       dimensionDisplay: optionData5,
-  //     })
-  //     setSettingModalSecondOptions({
-  //       option3: optionData3,
-  //       option4: optionData4,
-  //     })
-  //   } catch (error) {
-  //     console.error('Data fetching error:', error)
-  //   }
-  // }
-
-  // const onClickOption = async (option) => {
-  //   // option4에서 한 개만 선택 가능하도록 처리
-  //   const updatedOption4 = option4.map((item) =>
-  //     item.id === option.id
-  //       ? { ...item, selected: true }
-  //       : {
-  //           ...item,
-  //           selected: false,
-  //         },
-  //   )
-
-  //   setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
-  //   setSettingModalSecondOptions({ option3, option4: updatedOption4 })
-
-  //   try {
-  //     // 서버에 전송할 데이터
-  //     const dataToSend = {
-  //       firstOption1: option1.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       firstOption2: option2.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       firstOption3: dimensionDisplay.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //       // secondOption1: secondOptions[0].option3.map((item) => ({
-  //       //   name: item.id,
-  //       //   name: item.name,
-  //       //   // 필요한 경우 데이터 항목 추가
-  //       // })),
-  //       secondOption2: updatedOption4.map((item) => ({
-  //         column: item.column,
-  //         selected: item.selected,
-  //       })),
-  //     }
-  //     const patternData = {
-  //       objectNo,
-  //       //디스플레이 설정(다중)
-  //       allocDisplay: dataToSend.firstOption1[0].selected,
-  //       outlineDisplay: dataToSend.firstOption1[1].selected,
-  //       gridDisplay: dataToSend.firstOption1[2].selected,
-  //       lineDisplay: dataToSend.firstOption1[3].selected,
-  //       wordDisplay: dataToSend.firstOption1[4].selected,
-  //       circuitNumDisplay: dataToSend.firstOption1[5].selected,
-  //       flowDisplay: dataToSend.firstOption1[6].selected,
-  //       trestleDisplay: dataToSend.firstOption1[7].selected,
-  //       totalDisplay: dataToSend.firstOption1[8].selected,
-  //       //차수 표시(다건)
-  //       corridorDimension: dataToSend.firstOption3[0].selected,
-  //       realDimension: dataToSend.firstOption3[1].selected,
-  //       noneDimension: dataToSend.firstOption3[2].selected,
-  //       //화면 표시(다중)
-  //       onlyBorder: dataToSend.firstOption2[0].selected,
-  //       lineHatch: dataToSend.firstOption2[1].selected,
-  //       allPainted: dataToSend.firstOption2[2].selected,
-  //       //흡착범위 설정(단건)
-  //       adsorpRangeSmall: dataToSend.secondOption2[0].selected,
-  //       adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
-  //       adsorpRangeMedium: dataToSend.secondOption2[2].selected,
-  //       adsorpRangeLarge: dataToSend.secondOption2[3].selected,
-  //     }
-
-  //     // HTTP POST 요청 보내기
-  //     await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
-  //       swalFire({ text: getMessage(res.returnMessage) })
-  //     })
-  //   } catch (error) {
-  //     swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
-  //   }
-  //   setAdsorptionRange(option.range)
-  // }
-
   let dimensionId = null
   let fontId = null
   let planSizeId = null

src/hooks/option/useCanvasSetting.js

@@ -39,18 +39,29 @@ export function useCanvasSetting() {
     //fetchSettings()
     //onClickOption()
     //fetchSettings()
+  }, [adsorptionPointMode])
+
+  useEffect(() => {
+    console.log('useCanvasSetting useEffect 실행3')
+    //fetchSettings()
+    //onClickOption()
+    //fetchSettings()
   }, [settingModalFirstOptions, settingModalSecondOptions])
 
   const fetchSettings = async () => {
     try {
       const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+      console.log('res', res)
       const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
       const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
       const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
       const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
+      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item }))
-        ...item,
+
-      }))
+      const patternData = {
+        adsorpPoint: res.adsorpPoint,
+      }
+
       // 데이터 설정
       setSettingModalFirstOptions({
         option1: optionData1,
@@ -61,6 +72,10 @@ export function useCanvasSetting() {
         option3: optionData3,
         option4: optionData4,
       })
+
+      setAdsorptionPointMode(patternData.adsorpPoint)
+
+      console.log('adsorptionPointMode', adsorptionPointMode)
     } catch (error) {
       console.error('Data fetching error:', error)
     }
@@ -110,8 +125,23 @@ export function useCanvasSetting() {
 
       setSettingModalSecondOptions({ option3, option4: updatedOption4 })
 
+      //흡착점 ON / OFF
+    } else if (item === 'adsorpPoint') {
+      console.log('흡착점 ON / OFF ', item)
+      const options2 = settingModalFirstOptions?.option2.map((option2) => {
+        option2.selected = option2.id === item.id
+        return option2
+      })
+
+      const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+
+      polygons.forEach((polygon) => {
+        setSurfaceShapePattern(polygon, item.column)
+      })
+
       //디스플레이 설정(다 건 선택)
     } else {
+      //console.log('디스플레이 설정1 ', item.column)
       console.log('디스플레이 설정 ', item)
       item.selected = !item.selected
     }
@@ -155,7 +185,8 @@ export function useCanvasSetting() {
         circuitNumDisplay: dataToSend.firstOption1[5].selected,
         flowDisplay: dataToSend.firstOption1[6].selected,
         trestleDisplay: dataToSend.firstOption1[7].selected,
-        totalDisplay: dataToSend.firstOption1[8].selected,
+        imageDisplay: dataToSend.firstOption1[8].selected,
+        totalDisplay: dataToSend.firstOption1[9].selected,
         //차수 표시(단 건)
         corridorDimension: dataToSend.firstOption3[0].selected,
         realDimension: dataToSend.firstOption3[1].selected,
@@ -169,6 +200,8 @@ export function useCanvasSetting() {
         adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
         adsorpRangeMedium: dataToSend.secondOption2[2].selected,
         adsorpRangeLarge: dataToSend.secondOption2[3].selected,
+        //흡착점 ON/OFF
+        adsorpPoint: adsorptionPointMode,
       }
 
       console.log('patternData ', patternData)
@@ -199,6 +232,7 @@ export function useCanvasSetting() {
     // 'circuitNumDisplay' 회로번호 표시
     // 'flowDisplay' 흐름방향 표시   'arrow'
     // 'trestleDisplay' 가대 표시
+    // 'imageDisplay' 이미지 표시
     // 'totalDisplay' 집계표 표시
 
     let optionName //옵션명
@@ -230,9 +264,12 @@ export function useCanvasSetting() {
         case 'trestleDisplay': //가대 표시
           optionName = ['8']
           break
-        case 'totalDisplay': //집계표 표시
+        case 'imageDisplay': //이미지 표시
           optionName = ['9']
           break
+        case 'totalDisplay': //집계표 표시
+          optionName = ['10']
+          break
       }
       // 표시 선택 상태(true/false)
       optionSelected = option1[i].selected
@@ -259,10 +296,10 @@ export function useCanvasSetting() {
     setSettingModalFirstOptions,
     settingModalSecondOptions,
     setSettingModalSecondOptions,
+    adsorptionPointMode,
+    setAdsorptionPointMode,
     fetchSettings,
     onClickOption,
     frontSettings,
-    adsorptionPointMode,
-    setAdsorptionPointMode,
   }
 }

src/store/settingAtom.js

@@ -12,8 +12,8 @@ export const settingModalFirstOptionsState = atom({
       { id: 6, column: 'circuitNumDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
       { id: 7, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
       { id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
-      { id: 10, column: 'imageDisplay', name: 'modal.canvas.setting.first.option.image', selected: false },
+      { id: 9, column: 'imageDisplay', name: 'modal.canvas.setting.first.option.image', selected: false },
-      { id: 9, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
+      { id: 10, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
     ],
     dimensionDisplay: [
       {
@@ -160,6 +160,15 @@ export const trestleDisplaySelector = selector({
   },
 })
 
+// 디스플레이 설정 - 이미지 표시
+export const imageDisplaySelector = selector({
+  key: 'imageDisplaySelector',
+  get: ({ get }) => {
+    const settingModalFirstOptions = get(settingModalFirstOptionsState)
+    return settingModalFirstOptions.option1.find((option) => option.column === 'imageDisplay').selected
+  },
+})
+
 // 디스플레이 설정 - 집계표 표시
 export const totalDisplaySelector = selector({
   key: 'totalDisplaySelector',