338 lines
12 KiB
JavaScript
338 lines
12 KiB
JavaScript
import { useEffect, useState } from 'react'
|
|
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
|
|
import { adsorptionPointModeState, adsorptionRangeState, canvasState } from '@/store/canvasAtom'
|
|
import { globalLocaleStore } from '@/store/localeAtom'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { useAxios } from '@/hooks/useAxios'
|
|
import { useSwal } from '@/hooks/useSwal'
|
|
import { corridorDimensionSelector, settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
|
|
import { setSurfaceShapePattern } from '@/util/canvas-util'
|
|
import { POLYGON_TYPE } from '@/common/common'
|
|
|
|
export function useCanvasSetting() {
|
|
const canvas = useRecoilValue(canvasState)
|
|
|
|
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
|
|
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
|
|
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
|
|
const { option3, option4 } = settingModalSecondOptions
|
|
|
|
const corridorDimension = useRecoilValue(corridorDimensionSelector)
|
|
|
|
const globalLocaleState = useRecoilValue(globalLocaleStore)
|
|
const { get, post } = useAxios(globalLocaleState)
|
|
const { getMessage } = useMessage()
|
|
const { swalFire } = useSwal()
|
|
|
|
const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
|
|
const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
|
|
|
|
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
|
|
|
|
useEffect(() => {
|
|
if (!canvas) {
|
|
return
|
|
}
|
|
const { column } = corridorDimension
|
|
const lengthTexts = canvas.getObjects().filter((obj) => obj.name === 'lengthText')
|
|
switch (column) {
|
|
case 'corridorDimension':
|
|
lengthTexts.forEach((obj) => {
|
|
if (obj.planeSize) {
|
|
obj.set({ text: obj.planeSize.toString() })
|
|
}
|
|
})
|
|
break
|
|
case 'realDimension':
|
|
lengthTexts.forEach((obj) => {
|
|
if (obj.actualSize) {
|
|
obj.set({ text: obj.actualSize.toString() })
|
|
}
|
|
})
|
|
break
|
|
case 'noneDimension':
|
|
lengthTexts.forEach((obj) => {
|
|
obj.set({ text: '' })
|
|
})
|
|
break
|
|
}
|
|
canvas.renderAll()
|
|
}, [corridorDimension])
|
|
|
|
useEffect(() => {
|
|
console.log('useCanvasSetting useEffect 실행1')
|
|
fetchSettings()
|
|
}, [objectNo])
|
|
|
|
useEffect(() => {
|
|
console.log('useCanvasSetting useEffect 실행2')
|
|
//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) => ({ ...item }))
|
|
|
|
const patternData = {
|
|
adsorpPoint: res.adsorpPoint,
|
|
}
|
|
|
|
// 데이터 설정
|
|
setSettingModalFirstOptions({
|
|
option1: optionData1,
|
|
option2: optionData2,
|
|
dimensionDisplay: optionData5,
|
|
})
|
|
setSettingModalSecondOptions({
|
|
option3: optionData3,
|
|
option4: optionData4,
|
|
})
|
|
|
|
setAdsorptionPointMode(patternData.adsorpPoint)
|
|
|
|
console.log('adsorptionPointMode', adsorptionPointMode)
|
|
} catch (error) {
|
|
console.error('Data fetching error:', error)
|
|
}
|
|
}
|
|
|
|
// 옵션 클릭 후 저장
|
|
const onClickOption = async (item) => {
|
|
//치수 표시(단 건 선택)
|
|
if (item.column === 'corridorDimension' || item.column === 'realDimension' || item.column === 'noneDimension') {
|
|
console.log('치수 표시 ', item)
|
|
const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
|
|
option.selected = option.id === item.id
|
|
return option
|
|
})
|
|
|
|
//화면 표시(단 건 선택)
|
|
} else if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
|
|
console.log('화면 표시 ', 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 if (
|
|
item.column === 'adsorpRangeSmall' ||
|
|
item.column === 'adsorpRangeSmallSemi' ||
|
|
item.column === 'adsorpRangeMedium' ||
|
|
item.column === 'adsorpRangeLarge'
|
|
) {
|
|
console.log('화면 표시2 ', item, option4)
|
|
// option4에서 한 개만 선택 가능하도록 처리
|
|
const updatedOption4 = option4.map((option) =>
|
|
option.id === item.id
|
|
? { ...option, selected: true }
|
|
: {
|
|
...option,
|
|
selected: false,
|
|
},
|
|
)
|
|
|
|
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
|
|
}
|
|
|
|
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,
|
|
imageDisplay: dataToSend.firstOption1[8].selected,
|
|
totalDisplay: dataToSend.firstOption1[9].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,
|
|
//흡착점 ON/OFF
|
|
adsorpPoint: adsorptionPointMode,
|
|
}
|
|
|
|
console.log('patternData ', patternData)
|
|
|
|
// HTTP POST 요청 보내기
|
|
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
|
|
swalFire({ text: getMessage(res.returnMessage) })
|
|
|
|
// Canvas 디스플레이 설정 시 해당 옵션 적용
|
|
frontSettings()
|
|
})
|
|
} catch (error) {
|
|
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
|
|
}
|
|
|
|
setAdsorptionRange(item.range)
|
|
}
|
|
|
|
// Canvas 디스플레이 설정 시 해당 옵션 적용
|
|
const frontSettings = async () => {
|
|
const option1 = settingModalFirstOptions.option1
|
|
|
|
// 'allocDisplay' 할당 표시
|
|
// 'outlineDisplay' 외벽선 표시 'outerLine', POLYGON_TYPE.WALL
|
|
// 'gridDisplay' 그리드 표시 'lindGrid', 'dotGrid'
|
|
// 'lineDisplay' 지붕선 표시 'roof', POLYGON_TYPE.ROOF
|
|
// 'wordDisplay' 문자 표시
|
|
// 'circuitNumDisplay' 회로번호 표시
|
|
// 'flowDisplay' 흐름방향 표시 'arrow'
|
|
// 'trestleDisplay' 가대 표시
|
|
// 'imageDisplay' 이미지 표시
|
|
// 'totalDisplay' 집계표 표시
|
|
|
|
let optionName //옵션명
|
|
let optionSelected //옵션상태
|
|
|
|
for (let i = 0; i < option1.length; i++) {
|
|
switch (option1[i].column) {
|
|
case 'allocDisplay': //할당 표시
|
|
optionName = ['1']
|
|
break
|
|
case 'outlineDisplay': //외벽선 표시
|
|
optionName = ['outerLine', POLYGON_TYPE.WALL]
|
|
break
|
|
case 'gridDisplay': //그리드 표시
|
|
optionName = ['lindGrid', 'dotGrid', 'tempGrid']
|
|
break
|
|
case 'lineDisplay': //지붕선 표시
|
|
optionName = ['roof', POLYGON_TYPE.ROOF]
|
|
break
|
|
case 'wordDisplay': //문자 표시
|
|
optionName = ['commonText']
|
|
break
|
|
case 'circuitNumDisplay': //회로번호 표시
|
|
optionName = ['7']
|
|
break
|
|
case 'flowDisplay': //흐름방향 표시
|
|
optionName = ['arrow', 'flowText']
|
|
break
|
|
case 'trestleDisplay': //가대 표시
|
|
optionName = ['8']
|
|
break
|
|
case 'imageDisplay': //이미지 표시
|
|
optionName = ['9']
|
|
break
|
|
case 'totalDisplay': //집계표 표시
|
|
optionName = ['10']
|
|
break
|
|
}
|
|
// 표시 선택 상태(true/false)
|
|
optionSelected = option1[i].selected
|
|
|
|
canvas
|
|
.getObjects()
|
|
.filter((obj) => optionName.includes(obj.name))
|
|
//.filter((obj) => obj.name === optionName)
|
|
.forEach((obj) => {
|
|
obj.set({ visible: optionSelected })
|
|
//obj.set({ visible: !obj.visible })
|
|
})
|
|
|
|
canvas.renderAll()
|
|
|
|
// console.log(
|
|
// 'optionName',
|
|
// optionName,
|
|
// canvas.getObjects().filter((obj) => optionName.includes(obj.name)),
|
|
// )
|
|
}
|
|
}
|
|
|
|
return {
|
|
settingModalFirstOptions,
|
|
setSettingModalFirstOptions,
|
|
settingModalSecondOptions,
|
|
setSettingModalSecondOptions,
|
|
adsorptionPointMode,
|
|
setAdsorptionPointMode,
|
|
fetchSettings,
|
|
onClickOption,
|
|
frontSettings,
|
|
}
|
|
}
|