홍기님 요청사항 수정
점 선 그리드 기능 수정 케라바의 경우 경사 필요 없음
This commit is contained in:
parent
0b5c190cf3
commit
3a4821374a
@ -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>
|
||||||
|
|||||||
@ -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')}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user