diff --git a/src/components/common/color-picker/ColorPickerModal.jsx b/src/components/common/color-picker/ColorPickerModal.jsx
index 03d9899f..37a5343c 100644
--- a/src/components/common/color-picker/ColorPickerModal.jsx
+++ b/src/components/common/color-picker/ColorPickerModal.jsx
@@ -8,13 +8,13 @@ import { contextPopupPositionState } from '@/store/popupAtom'
export default function ColorPickerModal(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState) // 현재 메뉴
- const { isShow, setIsShow, pos = contextPopupPosition, color = '#ff0000', setColor, id, isConfig = false } = props
- const { getMessage } = useMessage()
+ const { isShow, setIsShow, pos = contextPopupPosition, color, setColor, id, isConfig = false } = props //color = '#ff0000'
const [originColor, setOriginColor] = useState(color)
+ const { getMessage } = useMessage()
const { closePopup } = usePopup()
useEffect(() => {
- setOriginColor(color)
+ setOriginColor(originColor)
}, [isShow])
return (
diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
index f4caa40b..3928353c 100644
--- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx
+++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx
@@ -1,54 +1,44 @@
import WithDraggable from '@/components/common/draggable/WithDraggable'
import QSelectBox from '@/components/common/select/QSelectBox'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
import { useMessage } from '@/hooks/useMessage'
-import { canvasState, dotLineGridSettingState, dotLineIntervalSelector } from '@/store/canvasAtom'
-import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
+import { useRecoilValue } from 'recoil'
import { onlyNumberInputChange } from '@/util/input-utils'
-import { settingModalGridOptionsState } from '@/store/settingAtom'
-import { useAxios } from '@/hooks/useAxios'
-import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
+import { useSwal } from '@/hooks/useSwal'
const TYPE = {
DOT: 'DOT',
LINE: 'LINE',
}
-const defaultDotLineGridSetting = {
- INTERVAL: {
- type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
- ratioInterval: 910,
- verticalInterval: 910,
- horizontalInterval: 910,
- dimension: 1, // 치수
- },
- DOT: false,
- LINE: false,
-}
-
export default function DotLineGrid(props) {
// const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
- const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
- const [close, setClose] = useState(false)
+ //const interval = useRecoilValue(dotLineIntervalSelector)
const { id, setIsShow, pos = { x: 840, y: -815 }, isConfig = false } = props
- const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
-
const canvas = useRecoilValue(canvasState)
- const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
- const [currentSetting, setCurrentSetting] = useState(
- JSON.stringify(dotLineGridSetting) === JSON.stringify(defaultDotLineGridSetting) ? { ...defaultDotLineGridSetting } : { ...dotLineGridSetting },
- )
- const resetDotLineGridSetting = useResetRecoilState(dotLineGridSettingState)
- const interval = useRecoilValue(dotLineIntervalSelector)
-
const { getMessage } = useMessage()
- const { get, post } = useAxios()
- const { swalFire } = useSwal()
const { closePopup } = usePopup()
+ const { swalFire } = useSwal()
+ const {
+ selectOption,
+ setSelectOption,
+ SelectOptions,
+ currentSetting,
+ setCurrentSetting,
+ dotLineGridSettingState,
+ setSettingModalGridOptions,
+ setDotLineGridSettingState,
+ } = useCanvasSetting()
+
+ // 데이터를 최초 한 번만 조회
useEffect(() => {
+ console.log('DotLineGrid useEffect 실행')
+
return () => {
setSettingModalGridOptions((prev) => {
const newSettingOptions = [...prev]
@@ -58,20 +48,6 @@ export default function DotLineGrid(props) {
}
}, [])
- const SelectOption = [
- { id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 },
- { id: 2, name: '1/2', value: 1 / 2 },
- { id: 3, name: '1/4', value: 1 / 4 },
- { id: 4, name: '1/10', value: 1 / 10 },
- ]
- const [selectOption, setSelectOption] = useState(SelectOption[0])
-
- // 데이터를 최초 한 번만 조회
- useEffect(() => {
- console.log('DotLineGrid useEffect 실행')
- fetchGridSettings()
- }, [objectNo])
-
const HandleClickClose = () => {
// setClose(true)
// setTimeout(() => {
@@ -90,61 +66,31 @@ export default function DotLineGrid(props) {
})
}
- // Canvas Grid Setting 조회 및 초기화
- const fetchGridSettings = async () => {
- try {
- const res = await get({ url: `/api/canvas-management/canvas-grid-settings/by-object/${objectNo}` })
-
- const patternData = {
- INTERVAL: {
- type: res.gridType,
- horizontalInterval: res.gridHorizon * 10,
- verticalInterval: res.gridVertical * 10,
- ratioInterval: res.gridRatio * 10,
- },
- dimension: res.gridDimen,
- DOT: res.dotGridDisplay,
- LINE: res.lineGridDisplay,
- }
-
- const matchedOption = SelectOption.find((option) => option.value == res.gridDimen)
-
- // dimension 값에 맞는 옵션을 선택
- setSelectOption(matchedOption)
-
- // 서버에서 받은 데이터로 상태 업데이트
- setCurrentSetting(patternData)
- } catch (error) {
- console.error('Data fetching error:', error)
- }
- }
-
const handleSave = async () => {
if (!currentSetting.DOT && !currentSetting.LINE) {
swalFire({ text: '배치할 그리드를 설정해주세요.' })
return
}
- try {
- const patternData = {
- objectNo,
- dotGridDisplay: currentSetting.DOT,
- lineGridDisplay: currentSetting.LINE,
- gridType: currentSetting.INTERVAL.type,
- gridHorizon: currentSetting.INTERVAL.horizontalInterval / 10,
- gridVertical: currentSetting.INTERVAL.verticalInterval / 10,
- gridRatio: currentSetting.INTERVAL.ratioInterval / 10,
- gridDimen: currentSetting.INTERVAL.dimension,
- }
- // HTTP POST 요청 보내기
- await post({ url: `/api/canvas-management/canvas-grid-settings`, data: patternData }).then((res) => {
- swalFire({ text: getMessage(res.returnMessage) })
- setDotLineGridSettingState({ ...currentSetting })
- closePopup(id, isConfig)
- })
- } catch (error) {
- swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
- }
+ setDotLineGridSettingState((prev) => {
+ return {
+ ...prev,
+ INTERVAL: {
+ type: currentSetting.INTERVAL.type,
+ horizontalInterval: currentSetting.INTERVAL.horizontalInterval,
+ verticalInterval: currentSetting.INTERVAL.verticalInterval,
+ ratioInterval: currentSetting.INTERVAL.ratioInterval,
+ dimension: currentSetting.INTERVAL.dimension,
+ },
+ DOT: currentSetting.DOT,
+ LINE: currentSetting.LINE,
+ flag: true,
+ }
+ //setDotLineGridSettingState({ ...currentSetting })
+ })
+
+ setIsShow(false)
+ closePopup(id, isConfig)
}
const handleRadioChange = (e) => {
@@ -198,8 +144,19 @@ export default function DotLineGrid(props) {
.filter((obj) => obj.name === 'dotGrid')
.forEach((obj) => canvas?.remove(obj))
- resetDotLineGridSetting()
- setSelectOption(SelectOption[0])
+ // resetDotLineGridSetting()
+ setCurrentSetting({
+ INTERVAL: {
+ type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
+ ratioInterval: 910,
+ verticalInterval: 910,
+ horizontalInterval: 910,
+ dimension: 1, // 치수
+ },
+ DOT: false,
+ LINE: false,
+ })
+ setSelectOption(SelectOptions[0])
}
return (
@@ -296,7 +253,7 @@ export default function DotLineGrid(props) {
mm
-
+
diff --git a/src/components/floor-plan/modal/setting01/GridOption.jsx b/src/components/floor-plan/modal/setting01/GridOption.jsx
index f3465365..bb6adef7 100644
--- a/src/components/floor-plan/modal/setting01/GridOption.jsx
+++ b/src/components/floor-plan/modal/setting01/GridOption.jsx
@@ -4,12 +4,11 @@ import { settingModalGridOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import { adsorptionPointAddModeState } from '@/store/canvasAtom'
import { useTempGrid } from '@/hooks/useTempGrid'
-import { gridColorState } from '@/store/gridAtom'
-import { useColor } from 'react-color-palette'
import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
import { usePopup } from '@/hooks/usePopup'
import { v4 as uuidv4 } from 'uuid'
import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
export default function GridOption() {
const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
@@ -17,15 +16,16 @@ export default function GridOption() {
const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
const { getMessage } = useMessage()
const { tempGridMode, setTempGridMode } = useTempGrid()
- const [gridColor, setGridColor] = useRecoilState(gridColorState)
- const [color, setColor] = useColor(gridColor)
const [showColorPickerModal, setShowColorPickerModal] = useState(false)
const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
const { addPopup, closePopup, closePopups } = usePopup()
const [colorId, setColorId] = useState(uuidv4())
const [dotLineId, setDotLineId] = useState(uuidv4())
+ const { gridColor, setGridColor, color } = useCanvasSetting()
+
useEffect(() => {
+ console.log(gridColor, color)
setGridColor(color.hex)
}, [color])
diff --git a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
index a841efd5..e65d28ca 100644
--- a/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
+++ b/src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
@@ -75,8 +75,6 @@ export default function PlanSizeSetting(props) {
className="input-origin block"
name={`originHorizon`}
value={planSizeSettingMode.originHorizon}
- //onChange={(e) => setPlanSizeSettingMode({ ...planSizeSettingMode, originHorizon: Number(e.target.value), flag: false })}
- //onFocus={(e) => (originHorizon.current.value = '')}
onChange={(e) => onlyNumberInputChange(e, changeInput)}
/>
@@ -90,8 +88,6 @@ export default function PlanSizeSetting(props) {
className="input-origin block"
name={`originVertical`}
value={planSizeSettingMode.originVertical}
- //onChange={(e) => setPlanSizeSettingMode({ ...planSizeSettingMode, originVertical: Number(e.target.value), flag: false })}
- //onFocus={(e) => (originVertical.current.value = '')}
onChange={(e) => onlyNumberInputChange(e, changeInput)}
/>
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index c3155512..d37ce040 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -1,16 +1,34 @@
import { useCallback, useEffect, useState } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
-import { adsorptionPointModeState, adsorptionRangeState, canvasState, planSizeSettingState } from '@/store/canvasAtom'
+import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
+import { adsorptionPointModeState, adsorptionRangeState, canvasState, planSizeSettingState, dotLineGridSettingState } from '@/store/canvasAtom'
import { globalLocaleStore } from '@/store/localeAtom'
import { useMessage } from '@/hooks/useMessage'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
-import { correntObjectNoState, corridorDimensionSelector, settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+import {
+ correntObjectNoState,
+ corridorDimensionSelector,
+ settingModalFirstOptionsState,
+ settingModalSecondOptionsState,
+ settingModalGridOptionsState,
+} from '@/store/settingAtom'
import { POLYGON_TYPE } from '@/common/common'
import { globalFontAtom } from '@/store/fontAtom'
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
+import { gridColorState } from '@/store/gridAtom'
+import { useColor } from 'react-color-palette'
-let objectNo
+const defaultDotLineGridSetting = {
+ INTERVAL: {
+ type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
+ ratioInterval: 910,
+ verticalInterval: 910,
+ horizontalInterval: 910,
+ dimension: 1, // 치수
+ },
+ DOT: false,
+ LINE: false,
+}
export function useCanvasSetting() {
const canvas = useRecoilValue(canvasState)
@@ -21,7 +39,7 @@ export function useCanvasSetting() {
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
- const { option3, option4 } = settingModalSecondOptions
+ const { option4 } = settingModalSecondOptions
const corridorDimension = useRecoilValue(corridorDimensionSelector)
@@ -42,6 +60,24 @@ export function useCanvasSetting() {
const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
+ const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
+ const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
+ const resetDotLineGridSetting = useResetRecoilState(dotLineGridSettingState)
+ const [currentSetting, setCurrentSetting] = useState(
+ JSON.stringify(dotLineGridSetting) === JSON.stringify(defaultDotLineGridSetting) ? { ...defaultDotLineGridSetting } : { ...dotLineGridSetting },
+ )
+ const [gridColor, setGridColor] = useRecoilState(gridColorState)
+ const [color, setColor] = useColor(gridColor ?? '#FF0000')
+ const [colorTemp, setColorTemp] = useState()
+
+ const SelectOptions = [
+ { id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 },
+ { id: 2, name: '1/2', value: 1 / 2 },
+ { id: 3, name: '1/4', value: 1 / 4 },
+ { id: 4, name: '1/10', value: 1 / 10 },
+ ]
+ const [selectOption, setSelectOption] = useState(SelectOptions[0])
+
useEffect(() => {
if (!canvas) {
return
@@ -73,51 +109,58 @@ export function useCanvasSetting() {
}, [corridorDimension])
useEffect(() => {
- console.log('useCanvasSetting useEffect 실행1', correntObjectNo)
+ console.log('useCanvasSetting 실행1', correntObjectNo)
}, [])
//흡착점 ON/OFF 변경 시
useEffect(() => {
- console.log('useCanvasSetting useEffect 실행2', adsorptionPointMode.fontFlag, correntObjectNo)
-
+ //console.log('useCanvasSetting 실행2', adsorptionPointMode.fontFlag, correntObjectNo)
if (adsorptionPointMode.fontFlag) {
onClickOption2()
- frontSettings()
- fetchSettings()
}
}, [adsorptionPointMode])
// 1 과 2 변경 시
useEffect(() => {
- console.log('useCanvasSetting useEffect 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
+ //console.log('useCanvasSetting 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) {
onClickOption2()
- frontSettings()
- fetchSettings()
}
}, [settingModalFirstOptions, settingModalSecondOptions])
// 글꼴 변경 시
useEffect(() => {
- console.log('useCanvasSetting useEffect 실행4', globalFont.fontFlag, correntObjectNo)
+ //console.log('useCanvasSetting 실행4', globalFont.fontFlag, correntObjectNo)
if (globalFont.fontFlag) {
onClickOption2()
- frontSettings()
- fetchSettings()
}
}, [globalFont])
// 도명크기 변경 시
useEffect(() => {
- console.log('useCanvasSetting useEffect 실행5', planSizeSettingMode.flag, correntObjectNo)
-
+ //console.log('useCanvasSetting 실행5', planSizeSettingMode.flag, correntObjectNo)
if (planSizeSettingMode.flag) {
onClickOption2()
- frontSettings()
- fetchSettings()
}
}, [planSizeSettingMode])
+ // 점/선 그리드 변경 시
+ useEffect(() => {
+ //console.log('useCanvasSetting 실행6', dotLineGridSetting.flag)
+ if (dotLineGridSetting.flag) {
+ onClickOption2()
+ }
+ }, [dotLineGridSetting])
+
+ // 그리드 색 설정 변경 시
+ useEffect(() => {
+ console.log('useCanvasSetting 실행7', colorTemp, gridColor)
+ //colorTemp는 변경 전.. 값이 있고 변경된 컬러와 다를 때 실행
+ if (colorTemp !== undefined && colorTemp !== gridColor) {
+ onClickOption2()
+ }
+ }, [color])
+
const getFonts = (itemValue) => {
if (!itemValue) return { id: 1, name: 'MS PGothic', value: 'MS PGothic' }
const data = [
@@ -269,10 +312,35 @@ export function useCanvasSetting() {
//글꼴 설정 Flag
fontFlag: false,
}
- console.log('fontPatternData', fontPatternData)
//조회된 글꼴 데이터 set
setGlobalFont(fontPatternData)
+
+ //점/선 그리드
+ const patternData = {
+ INTERVAL: {
+ type: res.gridType,
+ horizontalInterval: res.gridHorizon * 10,
+ verticalInterval: res.gridVertical * 10,
+ ratioInterval: res.gridRatio * 10,
+ dimension: res.gridDimen,
+ },
+ DOT: res.dotGridDisplay,
+ LINE: res.lineGridDisplay,
+ flag: false,
+ }
+
+ const matchedOption = SelectOptions.find((option) => option.value == res.gridDimen)
+
+ // dimension 값에 맞는 옵션을 선택
+ setSelectOption(matchedOption)
+
+ setDotLineGridSettingState(patternData)
+ //setCurrentSetting(patternData)
+
+ //그리드 색 설정
+ setGridColor(res.gridColor)
+ setColorTemp(res.gridColor)
} else {
//조회된 글꼴 데이터가 없는 경우
@@ -299,6 +367,14 @@ export function useCanvasSetting() {
})
setGlobalFont({ ...globalFont, fontFlag: false })
+
+ //점/선 그리드
+ setDotLineGridSettingState({ ...defaultDotLineGridSetting, flag: false })
+ //setCurrentSetting({ ...defaultDotLineGridSetting })
+
+ //그리드 색 설정
+ setGridColor('#FF0000')
+ setColorTemp('#FF0000')
}
frontSettings()
} catch (error) {
@@ -394,13 +470,26 @@ export function useCanvasSetting() {
originPixel: dimensionLineSettings.pixel,
originColor: dimensionLineSettings.color,
- //치수선 설정
+ //도면크기 설정
originHorizon: planSizeSettingMode.originHorizon,
originVertical: planSizeSettingMode.originVertical,
+
+ dotGridDisplay: dotLineGridSetting.DOT,
+ lineGridDisplay: dotLineGridSetting.LINE,
+ gridType: dotLineGridSetting.INTERVAL.type,
+ gridHorizon: dotLineGridSetting.INTERVAL.horizontalInterval / 10,
+ gridVertical: dotLineGridSetting.INTERVAL.verticalInterval / 10,
+ gridRatio: dotLineGridSetting.INTERVAL.ratioInterval / 10,
+ gridDimen: dotLineGridSetting.INTERVAL.dimension,
+
+ //gridColor: gridColor.gridColor,
+ gridColor: gridColor,
}
console.log('patternData ', patternData)
+ setColorTemp(gridColor)
+
// HTTP POST 요청 보내기
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
.then((res) => {
@@ -408,13 +497,15 @@ export function useCanvasSetting() {
// Canvas 디스플레이 설정 시 해당 옵션 적용
frontSettings()
+ // 저장 후 재조회
+ fetchSettings()
})
.catch((error) => {
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
})
//setAdsorptionRange(item.range)
- }, [settingModalFirstOptions, settingModalSecondOptions, adsorptionPointMode, globalFont, planSizeSettingMode])
+ }, [settingModalFirstOptions, settingModalSecondOptions, adsorptionPointMode, globalFont, planSizeSettingMode, dotLineGridSetting, color])
// Canvas 디스플레이 설정 시 해당 옵션 적용
const frontSettings = async () => {
@@ -491,6 +582,7 @@ export function useCanvasSetting() {
return {
canvas,
+ correntObjectNo,
settingModalFirstOptions,
setSettingModalFirstOptions,
settingModalSecondOptions,
@@ -516,5 +608,18 @@ export function useCanvasSetting() {
setDimensionLineSettings,
planSizeSettingMode,
setPlanSizeSettingMode,
+ selectOption,
+ setSelectOption,
+ SelectOptions,
+ currentSetting,
+ setCurrentSetting,
+ dotLineGridSettingState,
+ setSettingModalGridOptions,
+ setDotLineGridSettingState,
+ resetDotLineGridSetting,
+ gridColor,
+ setGridColor,
+ color,
+ setColor,
}
}