qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Canvas 그리드색 설정 수정

Browse Source
This commit is contained in:
changkyu choi 2024-12-02 15:06:41 +09:00
parent 186c15bedf
commit 0a9618e642
5 changed files with 189 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/color-picker/ColorPickerModal.jsx
View File

@ -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 (

151
src/components/floor-plan/modal/grid/DotLineGrid.jsx
View File

@ -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) {
<span>mm</span>
</div>
<div className="grid-select">
<QSelectBox options={SelectOption} onChange={changeDimension} value={selectOption} />
<QSelectBox options={SelectOptions} onChange={changeDimension} value={selectOption} />
</div>
</div>
</div>

8
src/components/floor-plan/modal/setting01/GridOption.jsx
View File

@ -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])

4
src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
View File

@ -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)}
/>
</div>
@ -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)}
/>
</div>

151
src/hooks/option/useCanvasSetting.js
View File

@ -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,
}
}