홍기님 요청사항 수정

점 선 그리드 기능 수정
케라바의 경우 경사 필요 없음
This commit is contained in:
hyojun.choi 2025-01-07 15:31:20 +09:00
parent 0b5c190cf3
commit 3a4821374a
2 changed files with 44 additions and 42 deletions

View File

@ -29,6 +29,8 @@ export default function DotLineGrid(props) {
const { SelectOptions, currentSetting, setCurrentSetting, dotLineGridSettingState, setSettingModalGridOptions, setDotLineGridSettingState } = const { SelectOptions, currentSetting, setCurrentSetting, dotLineGridSettingState, setSettingModalGridOptions, setDotLineGridSettingState } =
useCanvasSetting() useCanvasSetting()
const [copyCurrentSetting, setCopyCurrentSetting] = useState({ ...currentSetting })
// //
useEffect(() => { useEffect(() => {
console.log('DotLineGrid useEffect 실행') console.log('DotLineGrid useEffect 실행')
@ -57,7 +59,7 @@ export default function DotLineGrid(props) {
const handleCheckBoxChange = (e) => { const handleCheckBoxChange = (e) => {
const { value, checked } = e.target const { value, checked } = e.target
setCurrentSetting((prev) => { setCopyCurrentSetting((prev) => {
return { return {
...prev, ...prev,
[value]: checked, [value]: checked,
@ -66,23 +68,23 @@ export default function DotLineGrid(props) {
} }
const handleSave = async () => { const handleSave = async () => {
if (!currentSetting.DOT && !currentSetting.LINE) { /*if (!currentSetting.DOT && !currentSetting.LINE) {
swalFire({ text: '배치할 그리드를 설정해주세요.' }) swalFire({ text: '배치할 그리드를 설정해주세요.' })
return return
} }*/
setDotLineGridSettingState((prev) => { setDotLineGridSettingState((prev) => {
return { return {
...prev, ...prev,
INTERVAL: { INTERVAL: {
type: currentSetting.INTERVAL.type, type: copyCurrentSetting.INTERVAL.type,
horizontalInterval: currentSetting.INTERVAL.horizontalInterval, horizontalInterval: copyCurrentSetting.INTERVAL.horizontalInterval,
verticalInterval: currentSetting.INTERVAL.verticalInterval, verticalInterval: copyCurrentSetting.INTERVAL.verticalInterval,
ratioInterval: currentSetting.INTERVAL.ratioInterval, ratioInterval: copyCurrentSetting.INTERVAL.ratioInterval,
dimension: currentSetting.INTERVAL.dimension, dimension: copyCurrentSetting.INTERVAL.dimension,
}, },
DOT: currentSetting.DOT, DOT: copyCurrentSetting.DOT,
LINE: currentSetting.LINE, LINE: copyCurrentSetting.LINE,
} }
//setDotLineGridSettingState({ ...currentSetting }) //setDotLineGridSettingState({ ...currentSetting })
}) })
@ -90,16 +92,18 @@ export default function DotLineGrid(props) {
setSettingsData({ setSettingsData({
...settingsData, ...settingsData,
INTERVAL: { INTERVAL: {
type: currentSetting.INTERVAL.type, type: copyCurrentSetting.INTERVAL.type,
horizontalInterval: currentSetting.INTERVAL.horizontalInterval, horizontalInterval: copyCurrentSetting.INTERVAL.horizontalInterval,
verticalInterval: currentSetting.INTERVAL.verticalInterval, verticalInterval: copyCurrentSetting.INTERVAL.verticalInterval,
ratioInterval: currentSetting.INTERVAL.ratioInterval, ratioInterval: copyCurrentSetting.INTERVAL.ratioInterval,
dimension: currentSetting.INTERVAL.dimension, dimension: copyCurrentSetting.INTERVAL.dimension,
}, },
DOT: currentSetting.DOT, DOT: copyCurrentSetting.DOT,
LINE: currentSetting.LINE, LINE: copyCurrentSetting.LINE,
}) })
setCurrentSetting({ ...copyCurrentSetting })
setIsShow(false) setIsShow(false)
closePopup(id, isConfig) closePopup(id, isConfig)
} }
@ -107,7 +111,7 @@ export default function DotLineGrid(props) {
const handleRadioChange = (e) => { const handleRadioChange = (e) => {
const { value, name, checked, selected } = e.target const { value, name, checked, selected } = e.target
setCurrentSetting((prev) => { setCopyCurrentSetting((prev) => {
return { return {
...prev, ...prev,
INTERVAL: { INTERVAL: {
@ -120,7 +124,7 @@ export default function DotLineGrid(props) {
const changeInput = (value, e) => { const changeInput = (value, e) => {
const { name } = e.target const { name } = e.target
setCurrentSetting((prev) => { setCopyCurrentSetting((prev) => {
return { return {
...prev, ...prev,
INTERVAL: { INTERVAL: {
@ -133,7 +137,7 @@ export default function DotLineGrid(props) {
const changeDimension = (result) => { const changeDimension = (result) => {
const { value } = result const { value } = result
setCurrentSetting((prev) => { setCopyCurrentSetting((prev) => {
return { return {
...prev, ...prev,
INTERVAL: { INTERVAL: {
@ -146,7 +150,7 @@ export default function DotLineGrid(props) {
// //
const reset = () => { const reset = () => {
canvas /*canvas
?.getObjects() ?.getObjects()
.filter((obj) => obj.name === 'lineGrid') .filter((obj) => obj.name === 'lineGrid')
.forEach((obj) => canvas?.remove(obj)) .forEach((obj) => canvas?.remove(obj))
@ -154,9 +158,9 @@ export default function DotLineGrid(props) {
?.getObjects() ?.getObjects()
.filter((obj) => obj.name === 'dotGrid') .filter((obj) => obj.name === 'dotGrid')
.forEach((obj) => canvas?.remove(obj)) .forEach((obj) => canvas?.remove(obj))
*/
// resetDotLineGridSetting() // resetDotLineGridSetting()
setCurrentSetting({ setCopyCurrentSetting({
INTERVAL: { INTERVAL: {
type: 2, // 1: , , 2: type: 2, // 1: , , 2:
ratioInterval: 910, ratioInterval: 910,
@ -188,11 +192,11 @@ export default function DotLineGrid(props) {
<div className="modal-body"> <div className="modal-body">
<div className="grid-check-form"> <div className="grid-check-form">
<div className="d-check-box pop"> <div className="d-check-box pop">
<input type="checkbox" id="ch01" value={TYPE.DOT} onChange={handleCheckBoxChange} checked={currentSetting.DOT} /> <input type="checkbox" id="ch01" value={TYPE.DOT} onChange={handleCheckBoxChange} checked={copyCurrentSetting.DOT} />
<label htmlFor="ch01">{getMessage('modal.canvas.setting.grid.dot.line.setting.dot.display')}</label> <label htmlFor="ch01">{getMessage('modal.canvas.setting.grid.dot.line.setting.dot.display')}</label>
</div> </div>
<div className="d-check-box pop"> <div className="d-check-box pop">
<input type="checkbox" id="ch02" value={TYPE.LINE} onChange={handleCheckBoxChange} checked={currentSetting.LINE} /> <input type="checkbox" id="ch02" value={TYPE.LINE} onChange={handleCheckBoxChange} checked={copyCurrentSetting.LINE} />
<label htmlFor="ch02">{getMessage('modal.canvas.setting.grid.dot.line.setting.line.display')}</label> <label htmlFor="ch02">{getMessage('modal.canvas.setting.grid.dot.line.setting.line.display')}</label>
</div> </div>
</div> </div>
@ -205,8 +209,8 @@ export default function DotLineGrid(props) {
id="ra01" id="ra01"
value={1} value={1}
onChange={handleRadioChange} onChange={handleRadioChange}
checked={(currentSetting.DOT || currentSetting.LINE) && currentSetting.INTERVAL.type === 1} checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 1}
readOnly={!currentSetting.DOT && !currentSetting.LINE} readOnly={!copyCurrentSetting.DOT && !copyCurrentSetting.LINE}
/> />
<label htmlFor="ra01"></label> <label htmlFor="ra01"></label>
</div> </div>
@ -217,7 +221,7 @@ export default function DotLineGrid(props) {
type="text" type="text"
className="input-origin" className="input-origin"
name={`horizontalInterval`} name={`horizontalInterval`}
value={currentSetting.INTERVAL.horizontalInterval} value={copyCurrentSetting.INTERVAL.horizontalInterval}
onChange={(e) => onlyNumberInputChange(e, changeInput)} onChange={(e) => onlyNumberInputChange(e, changeInput)}
/> />
</div> </div>
@ -230,7 +234,7 @@ export default function DotLineGrid(props) {
type="text" type="text"
className="input-origin" className="input-origin"
name={`verticalInterval`} name={`verticalInterval`}
value={currentSetting.INTERVAL.verticalInterval} value={copyCurrentSetting.INTERVAL.verticalInterval}
onChange={(e) => onlyNumberInputChange(e, changeInput)} onChange={(e) => onlyNumberInputChange(e, changeInput)}
/> />
</div> </div>
@ -245,8 +249,8 @@ export default function DotLineGrid(props) {
id="ra02" id="ra02"
value={2} value={2}
onChange={handleRadioChange} onChange={handleRadioChange}
checked={(currentSetting.DOT || currentSetting.LINE) && currentSetting.INTERVAL.type === 2} checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 2}
readOnly={!currentSetting.DOT && !currentSetting.LINE} readOnly={!copyCurrentSetting.DOT && !copyCurrentSetting.LINE}
/> />
<label htmlFor="ra02"></label> <label htmlFor="ra02"></label>
</div> </div>
@ -257,14 +261,21 @@ export default function DotLineGrid(props) {
type="text" type="text"
className="input-origin" className="input-origin"
name={`ratioInterval`} name={`ratioInterval`}
value={currentSetting.INTERVAL.ratioInterval} value={copyCurrentSetting.INTERVAL.ratioInterval}
onChange={(e) => onlyNumberInputChange(e, changeInput)} onChange={(e) => onlyNumberInputChange(e, changeInput)}
/> />
</div> </div>
<span>mm</span> <span>mm</span>
</div> </div>
<div className="grid-select"> <div className="grid-select">
<QSelectBox options={SelectOptions} onChange={changeDimension} value={selectOption} /> <QSelectBox
options={SelectOptions}
onChange={changeDimension}
value={selectOption}
showKey={'name'}
targetKey={'id'}
sourceKey={'id'}
/>
</div> </div>
</div> </div>
</div> </div>

View File

@ -7,15 +7,6 @@ export default function Gable({ offsetRef, pitchRef, pitchText }) {
const currentAngleType = useRecoilValue(currentAngleTypeSelector) const currentAngleType = useRecoilValue(currentAngleTypeSelector)
return ( return (
<> <>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '63px' }}>
{getMessage('slope')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
</div>
<span className="thin">{pitchText}</span>
</div>
<div className="outline-form mb10"> <div className="outline-form mb10">
<span className="mr10" style={{ width: '63px' }}> <span className="mr10" style={{ width: '63px' }}>
{getMessage('gable.offset')} {getMessage('gable.offset')}