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-11-25 18:16:09 +09:00
parent 5d4832e5bc
commit a5e49e6b23
10 changed files with 685 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/common/font/FontSetting.jsx
View File

@ -1,10 +1,11 @@
import WithDraggable from '@/components/common/draggable/WithDraggable'
import QSelectBox from '@/components/common/select/QSelectBox'
import { usePopup } from '@/hooks/usePopup'
import { useState } from 'react'
import { useEffect, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
const fonts = [
{ id: 1, name: 'MS PGothic', value: 'MS PGothic' },
@ -12,7 +13,6 @@ const fonts = [
{ id: 3, name: 'Yu Gothic', value: 'Yu Gothic' },
{ id: 4, name: '@Yu Gothic UI', value: '@Yu Gothic UI' },
{ id: 5, name: 'Yu Gothic UI', value: 'Yu Gothic UI' },
3,
]
const fontSizes = [
@ -36,14 +36,11 @@ export default function FontSetting(props) {
const [selectedFontWeight, setSelectedFontWeight] = useState(font.fontWeight)
const [selectedFontSize, setSelectedFontSize] = useState(font.fontSize)
const [selectedFontColor, setSelectedFontColor] = useState(font.fontColor)
const fontOptions = [
{ id: 'normal', name: getMessage('font.style.normal'), value: 'normal' },
{ id: 'italic', name: getMessage('font.style.italic'), value: 'italic' },
{
id: 'bold',
name: getMessage('font.style.bold'),
value: 'bold',
},
{ id: 'bold', name: getMessage('font.style.bold'), value: 'bold' },
{ id: 'boldAndItalic', name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' },
]
const fontColors = [
@ -57,12 +54,30 @@ export default function FontSetting(props) {
{ id: 'gold', name: getMessage('color.gold'), value: 'gold' },
{ id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' },
]
useEffect(() => {
if (font.fontFamily) {
setSelectedFont(fonts.filter((data) => data.value === font.fontFamily)[0])
}
if (font.fontWeight) {
setSelectedFontWeight(fontOptions.filter((data) => data.value === font.fontWeight)[0])
}
if (font.fontSize) {
setSelectedFontSize(fontSizes.filter((data) => data.value === font.fontSize)[0])
}
if (font.fontColor) {
setSelectedFontColor(fontColors.filter((data) => data.value === font.fontColor)[0])
}
}, [])
const handleSaveBtn = () => {
onSave({
fontFamily: selectedFont,
fontWeight: selectedFontWeight,
fontSize: selectedFontSize,
fontColor: selectedFontColor,
fontWeight: selectedFontWeight,
})
if (setIsShow) setIsShow(false)
closePopup(id, isConfig)
@ -117,9 +132,9 @@ export default function FontSetting(props) {
<span
style={{
fontFamily: selectedFont?.value ?? '',
fontWeight: selectedFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
fontStyle: selectedFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
fontSize: selectedFontSize?.value ?? '12px',
fontStyle: selectedFontWeight?.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
fontWeight: selectedFontWeight?.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
color: selectedFontColor?.value ?? 'black',
}}
>

18
src/components/floor-plan/FloorPlan.jsx
View File

@ -1,22 +1,20 @@
'use client'
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { useContext, useEffect } from 'react'
//import { useRecoilState } from 'recoil'
import CanvasMenu from '@/components/floor-plan/CanvasMenu'
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
import { usePopup } from '@/hooks/usePopup'
//import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
//import { correntObjectNoState } from '@/store/settingAtom'
import '@/styles/contents.scss'
export default function FloorPlan({ children }) {
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
//const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
//const [correntObjectNo, setCorrentObjectNo] = useRecoilState(correntObjectNoState)
const { closeAll } = usePopup()
const { menuNumber, setMenuNumber } = useCanvasMenu()
const { fetchSettings } = useCanvasSetting()
const modalProps = {
@ -25,11 +23,13 @@ export default function FloorPlan({ children }) {
}
useEffect(() => {
///setCorrentObjectNo(floorPlanState.objectNo)
//console.log('FloorPlan objectNo ', floorPlanState.objectNo, correntObjectNo)
fetchSettings()
return () => {
closeAll()
}
}, [objectNo])
}, [])
return (
<>

39
src/components/floor-plan/modal/setting01/FirstOption.jsx
View File

@ -1,19 +1,46 @@
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'
export default function FirstOption() {
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
const { getMessage } = useMessage()
const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
const { canvas, settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
// 데이터를 최초 한 번만 조회
useEffect(() => {
console.log('FirstOption useEffect 실행')
}, [objectNo])
}, [])
const onClickOption = async (item) => {
//치수 표시(단 건 선택)
if (item.column === 'corridorDimension' || item.column === 'realDimension' || item.column === 'noneDimension') {
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') {
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 {
item.selected = !item.selected
}
setSettingModalFirstOptions({ ...settingModalFirstOptions, option1, option2, dimensionDisplay, fontFlag: true })
}
return (
<>

109
src/components/floor-plan/modal/setting01/SecondOption.jsx
View File

@ -16,32 +16,40 @@ export default function SecondOption() {
const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false)
const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
const { adsorptionPointMode, setAdsorptionPointMode } = useCanvasSetting()
const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
const commonFont = useRecoilValue(fontSelector('commonText'))
const flowFont = useRecoilValue(fontSelector('flowText'))
const lengthFont = useRecoilValue(fontSelector('lengthText'))
const circuitNumberTextFont = useRecoilValue(fontSelector('circuitNumberText'))
const [dimensionId, setDimensionId] = useState(uuidv4())
const [fontId, setFontId] = useState(uuidv4())
const [planSizeId, setPlanSizeId] = useState(uuidv4())
const {
//horizon, setHorizon, vertical, setVertical,
// originHorizon,
// setOriginHorizon,
// originVertical,
// setOriginVertical,
planSizeSettingMode,
setPlanSizeSettingMode,
settingModalSecondOptions,
setSettingModalSecondOptions,
adsorptionPointMode,
setAdsorptionPointMode,
setAdsorptionRange,
} = useCanvasSetting()
const { option3, option4 } = settingModalSecondOptions
// const [horizon, setHorizon] = useState(originHorizon)
// const [vertical, setVertical] = useState(originVertical)
// 데이터를 최초 한 번만 조회
useEffect(() => {
//fetchSettings()
}, [objectNo])
console.log('SecondOption useEffect 실행', planSizeSettingMode)
}, [])
const dimensionProps = {
id: dimensionId,
isShow: showDimensionLineSettingModal,
setIsShow: setShowDimensionLineSettingModal,
}
const [horizon, setHorizon] = useState(1600)
const [vertical, setVertical] = useState(1600)
const handlePopup = (type) => {
setShowDimensionLineSettingModal(false)
setShowPlanSizeSettingModal(false)
setShowFontSettingModal(false)
@ -51,8 +59,8 @@ export default function SecondOption() {
setShowFontSettingModal(true)
setShowDimensionLineSettingModal(false)
fontProps.type = 'commonText'
fontProps.id = fontId + 1
fontProps.font = commonFont
fontProps.id = fontId + 1
addPopup(fontId + 1, 2, <FontSetting {...fontProps} />, true)
break
}
@ -96,9 +104,9 @@ export default function SecondOption() {
setShowDimensionLineSettingModal(true)
fontProps.font = {
fontFamily: '',
fontColor: '',
fontSize: '',
fontWeight: '',
fontSize: '',
fontColor: '',
}
addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />, true)
} else {
@ -110,9 +118,13 @@ export default function SecondOption() {
case 'planSize': {
//도면크기 설정
setShowPlanSizeSettingModal(true)
setShowDimensionLineSettingModal(false)
addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />, true)
if (!showPlanSizeSettingModal) {
setShowPlanSizeSettingModal(true)
addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />, true)
} else {
setShowPlanSizeSettingModal(false)
closePopup(planSizeId, true)
}
break
}
}
@ -123,11 +135,12 @@ export default function SecondOption() {
return {
...prev,
[fontProps.type]: {
fontFamily: font.fontFamily,
fontWeight: font.fontWeight,
fontSize: font.fontSize,
fontColor: font.fontColor,
fontFamily: font.fontFamily.value,
fontWeight: font.fontWeight.value,
fontSize: font.fontSize.value,
fontColor: font.fontColor.value,
},
fontFlag: true,
}
})
}
@ -140,16 +153,48 @@ export default function SecondOption() {
isConfig: true,
}
const dimensionProps = {
id: dimensionId,
isShow: showDimensionLineSettingModal,
setIsShow: setShowDimensionLineSettingModal,
}
const planSizeProps = {
id: planSizeId,
horizon,
setHorizon,
vertical,
setVertical,
// horizon,
// setHorizon,
// vertical,
// setVertical,
horizon: planSizeSettingMode.originHorizon,
vertical: planSizeSettingMode.originVertical,
isShow: showPlanSizeSettingModal,
setIsShow: setShowPlanSizeSettingModal,
pos: { x: 1025, y: 180 },
}
const onClickOption = async (item) => {
//흡착범위 설정(단 건 선택)
if (
item.column === 'adsorpRangeSmall' ||
item.column === 'adsorpRangeSmallSemi' ||
item.column === 'adsorpRangeMedium' ||
item.column === 'adsorpRangeLarge'
) {
// option4에서 한 개만 선택 가능하도록 처리
//const updatedOption4 = option4.map((option) => (option.id === item.id ? { ...option, selected: true } : { ...option, selected: false }))
const options = settingModalSecondOptions?.option4.map((option4) => {
option4.selected = option4.id === item.id
return option4
})
setSettingModalSecondOptions({ ...settingModalSecondOptions, option3, option4, fontFlag: true })
} else if (item === 'adsorpPoint') {
setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: !adsorptionPointMode.adsorptionPoint, fontFlag: true })
}
//setAdsorptionRange(item.range) //사용여부 확인 필요
setAdsorptionRange(50)
}
return (
<>
<div className="modal-check-btn-wrap">
@ -184,12 +229,12 @@ export default function SecondOption() {
</button>
<button
className="adsorption-point act"
onClick={(e) => {
setAdsorptionPointMode(!adsorptionPointMode)
onClick={() => {
onClickOption('adsorpPoint')
}}
>
<span>{getMessage('modal.canvas.setting.font.plan.absorption.point')}</span>
<i>{adsorptionPointMode ? 'ON' : 'OFF'}</i>
<i>{adsorptionPointMode.adsorptionPoint ? 'ON' : 'OFF'}</i>
</button>
</div>
</div>

122
src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
View File

@ -9,6 +9,28 @@ import { useMessage } from '@/hooks/useMessage'
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
import { useRecoilState } from 'recoil'
import { globalFontAtom } from '@/store/fontAtom'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
const fonts = [
{ id: 1, name: 'MS PGothic', value: 'MS PGothic' },
{ id: 2, name: '@Yu Gothic', value: '@Yu Gothic' },
{ id: 3, name: 'Yu Gothic', value: 'Yu Gothic' },
{ id: 4, name: '@Yu Gothic UI', value: '@Yu Gothic UI' },
{ id: 5, name: 'Yu Gothic UI', value: 'Yu Gothic UI' },
//3,
]
const fontSizes = [
...Array.from({ length: 4 }).map((_, index) => {
return { id: index + 8, name: index + 8, value: index + 8 }
}),
...Array.from({ length: 9 }).map((_, index) => {
return { id: (index + 6) * 2, name: (index + 6) * 2, value: (index + 6) * 2 }
}),
{ id: 36, name: 36, value: 36 },
{ id: 48, name: 48, value: 48 },
{ id: 72, name: 72, value: 72 },
]
export default function DimensionLineSetting(props) {
const { isShow, setIsShow, id, pos = { x: 985, y: 180 } } = props
@ -16,28 +38,79 @@ export default function DimensionLineSetting(props) {
const pixels = Array.from({ length: 5 }).map((_, index) => {
return { id: index, name: index + 1, value: index + 1 }
})
const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
const [originPixel, setOriginPixel] = useState(dimensionLineSettings.pixel)
const [originColor, setOriginColor] = useState(dimensionLineSettings.color)
const [originFont, setOriginFont] = useState(globalFont.dimensionLineText.fontFamily)
const [originFontColor, setOriginFontColor] = useState(globalFont.dimensionLineText.fontColor)
const [originFontSize, setOriginFontSize] = useState(globalFont.dimensionLineText.fontSize)
const [originFontWeight, setOriginFontWeight] = useState(globalFont.dimensionLineText.fontWeight)
const [fontModalId, setFontModalId] = useState(uuidv4())
//const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
//const [originPixel, setOriginPixel] = useState(dimensionLineSettings.pixel)
//const [originColor, setOriginColor] = useState(dimensionLineSettings.color)
//const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
const [fontModalId, setFontModalId] = useState(uuidv4())
const [colorModalId, setColorModalId] = useState(uuidv4())
const [showColorPickerModal, setShowColorPickerModal] = useState(false)
const [showFontModal, setShowFontModal] = useState(false)
const { getMessage } = useMessage()
const { globalFont, setGlobalFont, dimensionLineSettings, setDimensionLineSettings } = useCanvasSetting()
const [originFont, setOriginFont] = useState(globalFont.dimensionLineText.fontFamily)
const [originFontWeight, setOriginFontWeight] = useState(globalFont.dimensionLineText.fontWeight)
const [originFontSize, setOriginFontSize] = useState(globalFont.dimensionLineText.fontSize)
const [originFontColor, setOriginFontColor] = useState(globalFont.dimensionLineText.fontColor)
const [originPixel, setOriginPixel] = useState(dimensionLineSettings.pixel)
const [originColor, setOriginColor] = useState(dimensionLineSettings.color)
const fontOptions = [
{ id: 'normal', name: getMessage('font.style.normal'), value: 'normal' },
{ id: 'italic', name: getMessage('font.style.italic'), value: 'italic' },
{ id: 'bold', name: getMessage('font.style.bold'), value: 'bold' },
{ id: 'boldAndItalic', name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' },
]
const fontColors = [
{ id: 'black', name: getMessage('color.black'), value: 'black' },
{ id: 'red', name: getMessage('color.red'), value: 'red' },
{ id: 'blue', name: getMessage('color.blue'), value: 'blue' },
{ id: 'gray', name: getMessage('color.gray'), value: 'gray' },
{ id: 'yellow', name: getMessage('color.yellow'), value: 'yellow' },
{ id: 'green', name: getMessage('color.green'), value: 'green' },
{ id: 'pink', name: getMessage('color.pink'), value: 'pink' },
{ id: 'gold', name: getMessage('color.gold'), value: 'gold' },
{ id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' },
]
let originPixelView
useEffect(() => {
if (originPixel) {
setOriginPixel(pixels?.filter((data) => data.value === originPixel)[0])
originPixelView = originPixel
}
if (globalFont.dimensionLineText.fontFamily) {
setOriginFont(fonts.filter((data) => data.value === globalFont.dimensionLineText.fontFamily)[0])
}
if (globalFont.dimensionLineText.fontWeight) {
setOriginFontWeight(fontOptions.filter((data) => data.value === globalFont.dimensionLineText.fontWeight)[0])
}
if (globalFont.dimensionLineText.fontSize) {
setOriginFontSize(fontSizes.filter((data) => data.value === globalFont.dimensionLineText.fontSize)[0])
}
if (globalFont.dimensionLineText.fontColor) {
setOriginFontColor(fontColors.filter((data) => data.value === globalFont.dimensionLineText.fontColor)[0])
}
setIsShow(true)
}, [])
useEffect(() => {
if (originPixel.name) {
originPixelView = originPixel.name
setOriginPixel(originPixel)
}
}, [originPixel])
useEffect(() => {
if (!isShow) {
closePopups([fontModalId, colorModalId])
@ -46,9 +119,9 @@ export default function DimensionLineSetting(props) {
const handleFontSave = (font) => {
setOriginFont(font.fontFamily)
setOriginFontWeight(font.fontWeight)
setOriginFontSize(font.fontSize)
setOriginFontColor(font.fontColor)
setOriginFontWeight(font.fontWeight)
}
const handleColorSave = () => {}
@ -69,10 +142,10 @@ export default function DimensionLineSetting(props) {
isShow: showFontModal,
setIsShow: setShowFontModal,
font: {
fontFamily: originFont,
fontSize: originFontSize,
fontColor: originFontColor,
fontWeight: originFontWeight,
fontFamily: originFont?.value,
fontWeight: originFontWeight?.value,
fontSize: originFontSize?.value,
fontColor: originFontColor?.value,
},
onSave: handleFontSave,
isConfig: true,
@ -99,17 +172,18 @@ export default function DimensionLineSetting(props) {
return {
...prev,
dimensionLineText: {
fontFamily: originFont,
fontWeight: originFontWeight,
fontSize: originFontSize,
fontColor: originFontColor,
fontFamily: originFont.value,
fontWeight: originFontWeight.value,
fontSize: originFontSize.value,
fontColor: originFontColor.value,
},
fontFlag: true,
}
})
setDimensionLineSettings((prev) => {
return {
...prev,
pixel: originPixel?.value,
pixel: originPixel.name,
color: originColor,
}
})
@ -125,8 +199,8 @@ export default function DimensionLineSetting(props) {
<button
className="modal-close"
onClick={() => {
closePopups([fontModalId, colorModalId, id])
setIsShow(false)
closePopups([fontModalId, colorModalId, id])
}}
>
닫기
@ -160,10 +234,10 @@ export default function DimensionLineSetting(props) {
className="font"
style={{
fontFamily: originFont?.value ?? '',
color: originFontColor.value ?? 'black',
fontWeight: originFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
fontStyle: originFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
fontSize: originFontSize?.value ?? '12px',
fontStyle: originFontWeight?.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
fontWeight: originFontWeight?.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
color: originFontColor?.value ?? 'black',
}}
>
9,999
@ -173,7 +247,7 @@ export default function DimensionLineSetting(props) {
style={{
backgroundColor: originColor,
borderColor: originColor,
height: originPixel?.value,
height: originPixel.name,
}}
></span>
</div>

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

@ -1,18 +1,64 @@
import { useState } from 'react'
import { useEffect, useState } from 'react'
import { useRecoilValue } from 'recoil'
import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { canvasState } from '@/store/canvasAtom'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
import { onlyNumberInputChange } from '@/util/input-utils'
export default function PlanSizeSetting(props) {
const { horizon, setHorizon, vertical, setVertical, id, pos = { x: 985, y: 180 }, setIsShow } = props
const { setIsShow, horizon, vertical, id, pos = { x: 985, y: 180 } } = props
const { closePopup } = usePopup()
const { getMessage } = useMessage()
const [originHorizon, setOriginHorizon] = useState(horizon)
const [originVertical, setOriginVertical] = useState(vertical)
const canvas = useRecoilValue(canvasState)
// const [originHorizon, setOriginHorizon] = useCanvasSetting(horizon)
// const [originVertical, setOriginVertical] = useCanvasSetting(vertical)
// const { originHorizon, setOriginHorizon, originVertical, setOriginVertical } = useCanvasSetting()
const { planSizeSettingMode, setPlanSizeSettingMode } = useCanvasSetting()
// 데이터를 최초 한 번만 조회
useEffect(() => {
console.log('PlanSizeSetting useEffect 실행')
console.log('11111', planSizeSettingMode)
//setOriginHorizon({ originHorizon: horizon, flag: false })
//setOriginVertical({ originVertical: vertical, flag: false })
}, [])
const onSave = () => {
console.log('22222', planSizeSettingMode)
setPlanSizeSettingMode((prev) => {
console.log('4', prev)
return {
...prev,
originHorizon: planSizeSettingMode.originHorizon,
originVertical: planSizeSettingMode.originVertical,
flag: true,
}
})
canvas.setWidth(planSizeSettingMode.originHorizon)
canvas.setHeight(planSizeSettingMode.originVertical)
canvas.renderAll()
setIsShow(false)
closePopup(id, true)
}
const changeInput = (value, e) => {
const { name } = e.target
console.log('name', name, value)
setPlanSizeSettingMode((prev) => {
return {
...prev,
[name]: value,
flag: false,
}
})
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xsm mount`}>
@ -33,7 +79,15 @@ export default function PlanSizeSetting(props) {
<div className="outline-form mb10">
<span style={{ width: 'auto' }}>{getMessage('common.horizon')}</span>
<div className="input-grid mr5" style={{ width: '90px' }}>
<input type="text" className="input-origin block" value={originHorizon} onChange={(e) => setOriginHorizon(Number(e.target.value))} />
<input
type="text"
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>
<span className="thin">mm</span>
</div>
@ -43,26 +97,18 @@ export default function PlanSizeSetting(props) {
<input
type="text"
className="input-origin block"
value={originVertical}
onChange={(e) => setOriginVertical(Number(e.target.value))}
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>
<span className="thin">mm</span>
</div>
</div>
<div className="grid-btn-wrap">
<button
className="btn-frame modal act"
onClick={() => {
setHorizon(originHorizon)
setVertical(originVertical)
setIsShow(false)
closePopup(id)
canvas.setWidth(originHorizon)
canvas.setHeight(originVertical)
canvas.renderAll()
}}
>
<button className="btn-frame modal act" onClick={onSave}>
{getMessage('modal.common.save')}
</button>
</div>

12
src/hooks/common/useFont.js
View File

@ -12,7 +12,7 @@ export function useFont() {
const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
useEffect(() => {
if (canvas) {
if (canvas && commonText.fontWeight?.value) {
const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'commonText')
textObjs.forEach((obj) => {
obj.set({
@ -28,7 +28,7 @@ export function useFont() {
}, [commonText])
useEffect(() => {
if (canvas) {
if (canvas && dimensionLineText.fontWeight?.value) {
const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText')
textObjs.forEach((obj) => {
obj.set({
@ -44,8 +44,8 @@ export function useFont() {
}, [dimensionLineText])
useEffect(() => {
if (canvas) {
const textObjs = canvas.getObjects().filter((obj) => obj.name === 'flowText')
if (canvas && flowText.fontWeight?.value) {
const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText')
textObjs.forEach((obj) => {
obj.set({
fontFamily: flowText.fontFamily.value,
@ -60,8 +60,8 @@ export function useFont() {
}, [flowText])
useEffect(() => {
if (canvas) {
const textObjs = canvas.getObjects().filter((obj) => obj.name === 'lengthText')
if (canvas && lengthText.fontWeight?.value) {
const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText')
textObjs.forEach((obj) => {
obj.set({
fontFamily: lengthText.fontFamily.value,

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

@ -1,16 +1,22 @@
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { adsorptionPointModeState, adsorptionRangeState, canvasState } from '@/store/canvasAtom'
import { useCallback, useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { adsorptionPointModeState, adsorptionRangeState, canvasState, planSizeSettingState } 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 { correntObjectNoState, corridorDimensionSelector, settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { POLYGON_TYPE } from '@/common/common'
import { fontSelector, globalFontAtom } from '@/store/fontAtom'
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
let objectNo
export function useCanvasSetting() {
const canvas = useRecoilValue(canvasState)
// canvas가 null이 아닐 때에만 getObjects 호출
const canvasObjects = canvas ? canvas.getObjects() : []
const [correntObjectNo, setCorrentObjectNo] = useRecoilState(correntObjectNoState)
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
@ -25,9 +31,21 @@ export function useCanvasSetting() {
const { swalFire } = useSwal()
const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState)
const [planSizeSettingMode, setPlanSizeSettingMode] = useRecoilState(adsorptionRangeState)
//const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const [selectedFont, setSelectedFont] = useState()
const [selectedFontWeight, setSelectedFontWeight] = useState()
const [selectedFontSize, setSelectedFontSize] = useState()
const [selectedFontColor, setSelectedFontColor] = useState()
const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
//const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
//const [originHorizon, setOriginHorizon] = useState({ originHorizon: 1600, flag: false })
//const [originVertical, setOriginVertical] = useState({ originVertical: 1600, flag: false })
useEffect(() => {
if (!canvas) {
@ -56,199 +74,354 @@ export function useCanvasSetting() {
})
break
}
canvas.renderAll()
canvas?.renderAll()
}, [corridorDimension])
useEffect(() => {
console.log('useCanvasSetting useEffect 실행1')
fetchSettings()
}, [objectNo])
console.log('useCanvasSetting useEffect 실행1', correntObjectNo)
}, [])
//흡착점 ON/OFF 변경 시
useEffect(() => {
console.log('useCanvasSetting useEffect 실행2')
//fetchSettings()
//onClickOption()
//fetchSettings()
console.log('useCanvasSetting useEffect 실행2', adsorptionPointMode.fontFlag, correntObjectNo)
if (adsorptionPointMode.fontFlag) {
onClickOption2()
frontSettings()
fetchSettings()
}
}, [adsorptionPointMode])
// 1 과 2 변경 시
useEffect(() => {
console.log('useCanvasSetting useEffect 실행3')
//fetchSettings()
//onClickOption()
//fetchSettings()
console.log('useCanvasSetting useEffect 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) {
onClickOption2()
fetchSettings()
}
frontSettings()
}, [settingModalFirstOptions, settingModalSecondOptions])
// 글꼴 변경 시
useEffect(() => {
console.log('useCanvasSetting useEffect 실행4', globalFont.fontFlag, correntObjectNo)
if (globalFont.fontFlag) {
onClickOption2()
frontSettings()
fetchSettings()
}
}, [globalFont])
// 도명크기 변경 시
useEffect(() => {
console.log(
'useCanvasSetting useEffect 실행5',
correntObjectNo,
planSizeSettingMode.flag,
planSizeSettingMode.originHorizon,
planSizeSettingMode.originVertical,
)
if (planSizeSettingMode.flag) {
onClickOption2()
frontSettings()
fetchSettings()
}
}, [planSizeSettingMode.flag])
const fetchSettings = async () => {
try {
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${correntObjectNo}` })
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,
if (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 }))
//setObjectNo(floorPlanState.objectNo)
//흡착점 ON/OFF
setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: res.adsorpPoint, fontFlag: false })
//치수선 설정
setDimensionLineSettings({ ...dimensionLineSettings, pixel: res.originPixel, color: res.originColor })
//도면크기 설정
setPlanSizeSettingMode({
...planSizeSettingMode,
originHorizon: res.originHorizon,
originVertical: res.originVertical,
flag: false,
})
// setOriginHorizon({
// ...originHorizon,
// originHorizon: res.originHorizon,
// flag: false,
// })
// setOriginVertical({
// ...originVertical,
// originVertical: res.originVertical,
// flag: false,
// })
// 데이터 설정
setSettingModalFirstOptions({
...settingModalFirstOptions,
option1: optionData1,
option2: optionData2,
dimensionDisplay: optionData5,
fontFlag: false,
})
setSettingModalSecondOptions({
...settingModalSecondOptions,
option3: optionData3,
option4: optionData4,
fontFlag: false,
})
const fontPatternData = {
commonText: {
//문자 글꼴 조회 데이터
fontFamily: res.wordFont,
fontWeight: res.wordFontStyle,
fontSize: res.wordFontSize,
fontColor: res.wordFontColor,
},
flowText: {
//흐름방향 글꼴 조회 데이터
fontFamily: res.flowFont,
fontWeight: res.flowFontStyle,
fontSize: res.flowFontSize,
fontColor: res.flowFontColor,
},
dimensionLineText: {
//치수 글꼴 조회 데이터
fontFamily: res.dimensioFont,
fontWeight: res.dimensioFontStyle,
fontSize: res.dimensioFontSize,
fontColor: res.dimensioFontColor,
},
circuitNumberText: {
//회로번호 글꼴 조회 데이터
fontFamily: res.circuitNumFont,
fontWeight: res.circuitNumFontStyle,
fontSize: res.circuitNumFontSize,
fontColor: res.circuitNumFontColor,
},
lengthText: {
//치수선 글꼴 조회 데이터
fontFamily: res.lengthFont,
fontWeight: res.lengthFontStyle,
fontSize: res.lengthFontSize,
fontColor: res.lengthFontColor,
},
//글꼴 설정 Flag
fontFlag: false,
}
//console.log('fontPatternData', fontPatternData)
//조회된 글꼴 데이터 set
setGlobalFont(fontPatternData)
} else {
//조회된 글꼴 데이터가 없는 경우
//흡착점 ON/OFF
setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: false, fontFlag: false })
//치수선 설정
setDimensionLineSettings({ ...dimensionLineSettings })
//도면크기 설정
setPlanSizeSettingMode({
...planSizeSettingMode,
flag: false,
})
// setOriginHorizon({
// ...originHorizon,
// flag: false,
// })
// setOriginVertical({
// ...originVertical,
// flag: false,
// })
// 데이터 설정
setSettingModalFirstOptions({
...settingModalFirstOptions,
fontFlag: false,
})
setSettingModalSecondOptions({
...settingModalSecondOptions,
fontFlag: false,
})
//console.log('globalFont2', globalFont)
const fontPatternData = {
commonText: {
//문자 글꼴
fontFamily: globalFont.commonText.fontFamily.value,
fontWeight: globalFont.commonText.fontWeight.value,
fontSize: globalFont.commonText.fontSize.value,
fontColor: globalFont.commonText.fontColor.value,
},
flowText: {
//흐름방향 글꼴
fontFamily: globalFont.flowText.fontFamily.value,
fontWeight: globalFont.flowText.fontWeight.value,
fontSize: globalFont.flowText.fontSize.value,
fontColor: globalFont.flowText.fontColor.value,
},
dimensionLineText: {
//치수 글꼴
fontFamily: globalFont.dimensionLineText.fontFamily.value,
fontWeight: globalFont.dimensionLineText.fontWeight.value,
fontSize: globalFont.dimensionLineText.fontSize.value,
fontColor: globalFont.dimensionLineText.fontColor.value,
},
circuitNumberText: {
//회로번호 글꼴
fontFamily: globalFont.circuitNumberText.fontFamily.value,
fontWeight: globalFont.circuitNumberText.fontWeight.value,
fontSize: globalFont.circuitNumberText.fontSize.value,
fontColor: globalFont.circuitNumberText.fontColor.value,
},
lengthText: {
//치수선 글꼴
fontFamily: globalFont.lengthText.fontFamily.value,
fontWeight: globalFont.lengthText.fontWeight.value,
fontSize: globalFont.lengthText.fontSize.value,
fontColor: globalFont.lengthText.fontColor.value,
},
//글꼴 설정 Flag
fontFlag: false,
}
//console.log('fontPatternData', fontPatternData)
setGlobalFont(fontPatternData)
//setGlobalFont({ ...globalFont, fontFlag: false })
}
// 데이터 설정
setSettingModalFirstOptions({
option1: optionData1,
option2: optionData2,
dimensionDisplay: optionData5,
})
setSettingModalSecondOptions({
option3: optionData3,
option4: optionData4,
})
setAdsorptionPointMode(patternData.adsorpPoint)
console.log('adsorptionPointMode', adsorptionPointMode)
frontSettings()
} 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
const onClickOption2 = useCallback(async () => {
// 서버에 전송할 데이터
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,
})),
secondOption2: option4.map((item) => ({
column: item.column,
selected: item.selected,
})),
}
setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
const patternData = {
//견적서 번호
objectNo: correntObjectNo,
//디스플레이 설정(다중)
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.adsorptionPoint,
//??: adsorptionRange, 사용여부 확인 필요
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,
})),
}
//글꼴 설정
//문자 글꼴
wordFont: globalFont.commonText.fontFamily,
wordFontStyle: globalFont.commonText.fontWeight,
wordFontSize: globalFont.commonText.fontSize,
wordFontColor: globalFont.commonText.fontColor,
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,
}
//흐름방향 글꼴
flowFont: globalFont.flowText.fontFamily,
flowFontStyle: globalFont.flowText.fontWeight,
flowFontSize: globalFont.flowText.fontSize,
flowFontColor: globalFont.flowText.fontColor,
console.log('patternData ', patternData)
//치수 글꼴
dimensioFont: globalFont.dimensionLineText.fontFamily,
dimensioFontStyle: globalFont.dimensionLineText.fontWeight,
dimensioFontSize: globalFont.dimensionLineText.fontSize,
dimensioFontColor: globalFont.dimensionLineText.fontColor,
// HTTP POST 요청 보내기
await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
//회로번호 글꼴
circuitNumFont: globalFont.circuitNumberText.fontFamily,
circuitNumFontStyle: globalFont.circuitNumberText.fontWeight,
circuitNumFontSize: globalFont.circuitNumberText.fontSize,
circuitNumFontColor: globalFont.circuitNumberText.fontColor,
//치수선 글꼴
lengthFont: globalFont.lengthText.fontFamily,
lengthFontStyle: globalFont.lengthText.fontWeight,
lengthFontSize: globalFont.lengthText.fontSize,
lengthFontColor: globalFont.lengthText.fontColor,
//치수선 설정
originPixel: dimensionLineSettings.pixel,
originColor: dimensionLineSettings.color,
//치수선 설정
originHorizon: planSizeSettingMode.originHorizon,
originVertical: planSizeSettingMode.originVertical,
// originHorizon: originHorizon.originHorizon,
// originVertical: originVertical.originVertical,
}
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' })
}
.catch((error) => {
swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
})
setAdsorptionRange(item.range)
}
//setAdsorptionRange(item.range)
}, [settingModalFirstOptions, settingModalSecondOptions, adsorptionPointMode, globalFont, planSizeSettingMode])
// Canvas 디스플레이 설정 시 해당 옵션 적용
const frontSettings = async () => {
@ -260,7 +433,7 @@ export function useCanvasSetting() {
// 'lineDisplay' 지붕선 표시 'roof', POLYGON_TYPE.ROOF
// 'wordDisplay' 문자 표시
// 'circuitNumDisplay' 회로번호 표시
// 'flowDisplay' 흐름방향 표시 'arrow'
// 'flowDisplay' 흐름방향 표시 'arrow', 'flowText'
// 'trestleDisplay' 가대 표시
// 'imageDisplay' 이미지 표시
// 'totalDisplay' 집계표 표시
@ -304,8 +477,8 @@ export function useCanvasSetting() {
// 표시 선택 상태(true/false)
optionSelected = option1[i].selected
canvas
.getObjects()
//canvas.getObjects() >> canvasObjects
canvasObjects
.filter((obj) => optionName.includes(obj.name))
//.filter((obj) => obj.name === optionName)
.forEach((obj) => {
@ -313,7 +486,7 @@ export function useCanvasSetting() {
//obj.set({ visible: !obj.visible })
})
canvas.renderAll()
canvas?.renderAll()
// console.log(
// 'optionName',
@ -324,14 +497,31 @@ export function useCanvasSetting() {
}
return {
canvas,
settingModalFirstOptions,
setSettingModalFirstOptions,
settingModalSecondOptions,
setSettingModalSecondOptions,
adsorptionPointMode,
setAdsorptionPointMode,
adsorptionRange,
setAdsorptionRange,
fetchSettings,
onClickOption,
//onClickOption,
frontSettings,
globalFont,
setGlobalFont,
selectedFont,
setSelectedFont,
selectedFontWeight,
setSelectedFontWeight,
selectedFontSize,
setSelectedFontSize,
selectedFontColor,
setSelectedFontColor,
dimensionLineSettings,
setDimensionLineSettings,
planSizeSettingMode,
setPlanSizeSettingMode,
}
}

6
src/store/canvasAtom.js
View File

@ -222,6 +222,12 @@ export const adsorptionRangeState = atom({
default: 50,
})
// 도면크기 설정
export const planSizeSettingState = atom({
key: 'planSizeSettingMode',
default: { originHorizon: 1600, originVertical: 1600 },
})
// 점,선 그리드 설정
export const dotLineGridSettingState = atom({
key: 'gridSettingState',

8
src/store/fontAtom.js
View File

@ -1,10 +1,10 @@
import { atom, selectorFamily } from 'recoil'
const defaultFont = {
fontFamily: { name: 'MS PGothic', value: 'MS PGothic' },
fontWeight: { name: '보통', value: 'normal' },
fontSize: { name: '16', value: '16' },
fontColor: { name: '검정색', value: 'black' },
fontFamily: { id: 1, name: 'MS PGothic', value: 'MS PGothic' },
fontWeight: { id: 'normal', name: '보통', value: 'normal' },
fontSize: { id: 16, name: 16, value: 16 },
fontColor: { id: 'black', name: '검정색', value: 'black' },
}
export const globalFontAtom = atom({