feature/ysCha #23
@ -202,6 +202,7 @@ export const SAVE_KEY = [
|
||||
'fontStyle',
|
||||
'fontWeight',
|
||||
'dormerAttributes',
|
||||
'toFixed',
|
||||
]
|
||||
|
||||
export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype, fabric.Group.prototype]
|
||||
|
||||
@ -33,54 +33,43 @@ export default function ColorPickerModal(props) {
|
||||
}, [isShow])
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos ?? ''} handle=".modal-handle">
|
||||
<div className={`modal-pop-wrap lr mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.color.picker.title')}</h1>
|
||||
<WithDraggable isShow={true} pos={pos ?? ''} handle=".modal-handle" className="lr">
|
||||
<WithDraggable.Header
|
||||
title={getMessage('modal.color.picker.title')}
|
||||
onClose={() => {
|
||||
if (setIsShow) {
|
||||
setIsShow(false)
|
||||
}
|
||||
closePopup(id, isConfig)
|
||||
}}
|
||||
/>
|
||||
<WithDraggable.Body>
|
||||
<div className="color-setting-wrap">
|
||||
<div className="color-picker">
|
||||
<ColorPicker color={originColor} setColor={setOriginColor} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button
|
||||
className="modal-close"
|
||||
className="btn-frame modal act"
|
||||
onClick={() => {
|
||||
if (setIsShow) {
|
||||
setIsShow(false)
|
||||
}
|
||||
console.log(id)
|
||||
if (setColor) setColor(originColor)
|
||||
if (setIsShow) setIsShow(false)
|
||||
|
||||
//치수선색설정 아닐 때만 바로 저장 실행
|
||||
if (name !== 'DimensionLineColor')
|
||||
setSettingsDataSave({
|
||||
...settingsData,
|
||||
color: originColor,
|
||||
})
|
||||
|
||||
closePopup(id, isConfig)
|
||||
}}
|
||||
>
|
||||
닫기
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="color-setting-wrap">
|
||||
<div className="color-picker">
|
||||
<ColorPicker color={originColor} setColor={setOriginColor} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button
|
||||
className="btn-frame modal act"
|
||||
onClick={() => {
|
||||
if (setColor) setColor(originColor)
|
||||
if (setIsShow) setIsShow(false)
|
||||
|
||||
//치수선색설정 아닐 때만 바로 저장 실행
|
||||
if (name !== 'DimensionLineColor')
|
||||
setSettingsDataSave({
|
||||
...settingsData,
|
||||
color: originColor,
|
||||
})
|
||||
|
||||
closePopup(id, isConfig)
|
||||
}}
|
||||
>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -113,7 +113,7 @@ export default function QContextMenu(props) {
|
||||
return (
|
||||
<>
|
||||
{contextMenu.visible && (
|
||||
<div className="context-menu-wrap" style={{ position: 'fixed', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
|
||||
<div className="context-menu-wrap" style={{ position: 'fixed', top: contextMenu.y, left: contextMenu.x }}>
|
||||
{/*<ul>*/}
|
||||
{/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectMove()}>*/}
|
||||
{/* 이동*/}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import { useState } from 'react'
|
||||
import Draggable from 'react-draggable'
|
||||
|
||||
export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 }, handle = '' }) {
|
||||
export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 }, handle = '', className = '', hasFooter = true, isHidden = false }) {
|
||||
const [position, setPosition] = useState(pos)
|
||||
|
||||
const handleOnDrag = (e, data) => {
|
||||
@ -22,9 +22,43 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 },
|
||||
onDrag={(e, data) => handleOnDrag(e, data)}
|
||||
handle={handle === '' ? '.modal-handle' : handle}
|
||||
>
|
||||
{children}
|
||||
<div className={`modal-pop-wrap ${className}`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
|
||||
{children}
|
||||
{hasFooter && <WithDraggableFooter />}
|
||||
</div>
|
||||
</Draggable>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function WithDraggableHeader({ title, onClose, children }) {
|
||||
return (
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{title}</h1>
|
||||
{onClose && (
|
||||
<button className="modal-close" onClick={() => onClose()}>
|
||||
닫기
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function WithDraggableBody({ children }) {
|
||||
return (
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<>{children}</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function WithDraggableFooter() {
|
||||
return <div className="modal-foot modal-handle"></div>
|
||||
}
|
||||
|
||||
WithDraggable.Header = WithDraggableHeader
|
||||
WithDraggable.Body = WithDraggableBody
|
||||
WithDraggable.Footer = WithDraggableFooter
|
||||
|
||||
@ -67,111 +67,101 @@ export default function FontSetting(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos} handle=".modal-handle">
|
||||
<div className={`modal-pop-wrap lrr mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.font')}</h1>
|
||||
<button
|
||||
className="modal-close"
|
||||
onClick={() => {
|
||||
if (setIsShow) setIsShow(false)
|
||||
closePopup(id, isConfig)
|
||||
}}
|
||||
>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} handle=".modal-handle" className="lrr">
|
||||
<WithDraggable.Header
|
||||
title={getMessage('modal.font')}
|
||||
onClose={() => {
|
||||
if (setIsShow) setIsShow(false)
|
||||
closePopup(id, isConfig)
|
||||
}}
|
||||
/>
|
||||
<WithDraggable.Body>
|
||||
<div className="slope-wrap">
|
||||
<div className="font-option-warp">
|
||||
<div className="font-option-item">
|
||||
<div className="option-item-tit">{getMessage('modal.font')}(F)</div>
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
options={fonts}
|
||||
value={selectedFont}
|
||||
onChange={(e) => {
|
||||
setSelectedFont(e)
|
||||
}}
|
||||
showKey={'name'}
|
||||
sourceKey={'value'}
|
||||
targetKey={'value'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="font-option-item">
|
||||
<div className="option-item-tit">{getMessage('modal.font.style')}(Y)</div>
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
options={fontOptions}
|
||||
value={selectedFontWeight}
|
||||
onChange={(e) => {
|
||||
setSelectedFontWeight(e)
|
||||
}}
|
||||
showKey={'name'}
|
||||
targetKey={'id'}
|
||||
sourceKey={'id'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="font-option-item">
|
||||
<div className="option-item-tit">{getMessage('modal.font.size')}(S)</div>
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
options={fontSizes}
|
||||
value={selectedFontSize}
|
||||
onChange={(e) => setSelectedFontSize(e)}
|
||||
showKey={'name'}
|
||||
sourceKey={'value'}
|
||||
targetKey={'value'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="font-option-item">
|
||||
<div className="option-item-tit">{getMessage('modal.font.color')}</div>
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
title={''}
|
||||
options={fontColors}
|
||||
showKey={'name'}
|
||||
sourceKey={'id'}
|
||||
targetKey={'id'}
|
||||
value={selectedFontColor}
|
||||
onChange={(e) => {
|
||||
setSelectedFontColor(e)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="font-ex-wrap">
|
||||
<div className="font-ex-tit">{getMessage('modal.font.setting.display')}</div>
|
||||
<div className="font-ex-box">
|
||||
<span
|
||||
style={{
|
||||
fontFamily: selectedFont?.value ?? 'MS PGothic',
|
||||
fontWeight: selectedFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||
fontStyle: selectedFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||
fontSize: selectedFontSize?.value ?? 16,
|
||||
color: selectedFontColor?.value ?? 'black',
|
||||
}}
|
||||
>
|
||||
Aaあぁアァ
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="normal-font">{getMessage('modal.font.setting.info')}</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSaveBtn}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="slope-wrap">
|
||||
<div className="font-option-warp">
|
||||
<div className="font-option-item">
|
||||
<div className="option-item-tit">{getMessage('modal.font')}(F)</div>
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
options={fonts}
|
||||
value={selectedFont}
|
||||
onChange={(e) => {
|
||||
setSelectedFont(e)
|
||||
}}
|
||||
showKey={'name'}
|
||||
sourceKey={'value'}
|
||||
targetKey={'value'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="font-option-item">
|
||||
<div className="option-item-tit">{getMessage('modal.font.style')}(Y)</div>
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
options={fontOptions}
|
||||
value={selectedFontWeight}
|
||||
onChange={(e) => {
|
||||
setSelectedFontWeight(e)
|
||||
}}
|
||||
showKey={'name'}
|
||||
targetKey={'id'}
|
||||
sourceKey={'id'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="font-option-item">
|
||||
<div className="option-item-tit">{getMessage('modal.font.size')}(S)</div>
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
options={fontSizes}
|
||||
value={selectedFontSize}
|
||||
onChange={(e) => setSelectedFontSize(e)}
|
||||
showKey={'name'}
|
||||
sourceKey={'value'}
|
||||
targetKey={'value'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="font-option-item">
|
||||
<div className="option-item-tit">{getMessage('modal.font.color')}</div>
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
title={''}
|
||||
options={fontColors}
|
||||
showKey={'name'}
|
||||
sourceKey={'id'}
|
||||
targetKey={'id'}
|
||||
value={selectedFontColor}
|
||||
onChange={(e) => {
|
||||
setSelectedFontColor(e)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="font-ex-wrap">
|
||||
<div className="font-ex-tit">{getMessage('modal.font.setting.display')}</div>
|
||||
<div className="font-ex-box">
|
||||
<span
|
||||
style={{
|
||||
fontFamily: selectedFont?.value ?? 'MS PGothic',
|
||||
fontWeight: selectedFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||
fontStyle: selectedFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||
fontSize: selectedFontSize?.value ?? 16,
|
||||
color: selectedFontColor?.value ?? 'black',
|
||||
}}
|
||||
>
|
||||
Aaあぁアァ
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="normal-font">{getMessage('modal.font.setting.info')}</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSaveBtn}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
7
src/components/common/spinner/PopSpinner.jsx
Normal file
7
src/components/common/spinner/PopSpinner.jsx
Normal file
@ -0,0 +1,7 @@
|
||||
export default function PopSpinner() {
|
||||
return (
|
||||
<div className="pop-spinner">
|
||||
<span className="loader"></span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -58,6 +58,9 @@ export default function Estimate({}) {
|
||||
|
||||
const [storePriceList, setStorePriceList] = useState([]) //가격표시 option
|
||||
|
||||
const [cableItemList, setCableItemList] = useState([]) //케이블 리스트
|
||||
const [cableItem, setCableItem] = useState('') //케이블 선택값
|
||||
|
||||
const [startDate, setStartDate] = useState(new Date())
|
||||
const singleDatePickerProps = {
|
||||
startDate,
|
||||
@ -107,6 +110,16 @@ export default function Estimate({}) {
|
||||
setHonorificCodeList(code1)
|
||||
}
|
||||
|
||||
// 케이블제품 공통코드
|
||||
const code2 = findCommonCode(117900)
|
||||
if (code2 != null) {
|
||||
code2.map((item) => {
|
||||
item.value = item.clRefChr1
|
||||
item.label = item.clRefChr2
|
||||
})
|
||||
setCableItemList(code2)
|
||||
}
|
||||
|
||||
//아이템 자동완성 목록 가져오기
|
||||
const param = {
|
||||
saleStoreId: session.storeId,
|
||||
@ -467,10 +480,6 @@ export default function Estimate({}) {
|
||||
|
||||
//Pricing 버튼
|
||||
const handlePricing = async (showPriceCd) => {
|
||||
//todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요
|
||||
if (estimateContextState.estimateType === 'YJSS') {
|
||||
return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' })
|
||||
}
|
||||
const param = {
|
||||
saleStoreId: session.storeId,
|
||||
sapSalesStoreCd: session.custCd,
|
||||
@ -551,7 +560,7 @@ export default function Estimate({}) {
|
||||
}
|
||||
|
||||
const getAbledItems = (items) => {
|
||||
return items.filter((items) => items.paDispOrder === null)
|
||||
return items.filter((items) => items.dispCableFlg !== '1' && items.paDispOrder === null)
|
||||
}
|
||||
|
||||
const onChangeSelectAll = (e) => {
|
||||
@ -684,12 +693,20 @@ export default function Estimate({}) {
|
||||
setItemChangeYn(true)
|
||||
}
|
||||
|
||||
/* 케이블 select 변경시 */
|
||||
const onChangeDisplayCableItem = (value, itemList) => {
|
||||
itemList.map((item, index) => {
|
||||
if (item.dispCableFlg === '1') {
|
||||
if (value !== '') {
|
||||
onChangeDisplayItem(value, item.dispOrder, index, true)
|
||||
}
|
||||
}
|
||||
})
|
||||
setCableItem(value)
|
||||
}
|
||||
|
||||
// 아이템 자동완성 검색시 아이템 추가/변경시
|
||||
const onChangeDisplayItem = (itemId, dispOrder, index) => {
|
||||
//todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요
|
||||
if (estimateContextState.estimateType === 'YJSS') {
|
||||
return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' })
|
||||
}
|
||||
const onChangeDisplayItem = (itemId, dispOrder, index, flag) => {
|
||||
const param = {
|
||||
itemId: itemId,
|
||||
coldZoneFlg: estimateContextState?.coldRegionFlg,
|
||||
@ -719,7 +736,7 @@ export default function Estimate({}) {
|
||||
updates.itemGroup = res.itemGroup
|
||||
updates.delFlg = '0' // 삭제플래그 0
|
||||
updates.saleTotPrice = (res.salePrice * estimateContextState.itemList[index].amount).toString()
|
||||
updates.amount = ''
|
||||
updates.amount = flag ? estimateContextState.itemList[index].amount : ''
|
||||
updates.openFlg = res.openFlg
|
||||
|
||||
if (estimateContextState.estimateType === 'YJSS') {
|
||||
@ -782,6 +799,7 @@ export default function Estimate({}) {
|
||||
bomItem.objectNo = objectNo
|
||||
bomItem.planNo = planNo
|
||||
bomItem.addFlg = true //봄 추가시도 addFlg
|
||||
bomItem.openFlg = '0' //봄 컴포넌트는 무조건 0으로
|
||||
})
|
||||
|
||||
updateList = updateList.filter((item) => item.delFlg === '0')
|
||||
@ -1000,7 +1018,7 @@ export default function Estimate({}) {
|
||||
item.showSaleTotPrice = '0'
|
||||
}
|
||||
})
|
||||
|
||||
let dispCableFlgCnt = 0
|
||||
estimateContextState.itemList.forEach((item) => {
|
||||
if (item.delFlg === '0') {
|
||||
let amount = Number(item.amount?.replace(/[^0-9]/g, '').replaceAll(',', '')) || 0
|
||||
@ -1035,8 +1053,18 @@ export default function Estimate({}) {
|
||||
item.showSalePrice = '0'
|
||||
item.showSaleTotPrice = '0'
|
||||
}
|
||||
|
||||
if (item.dispCableFlg === '1') {
|
||||
dispCableFlgCnt++
|
||||
setCableItem(item.itemId)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (dispCableFlgCnt === 0) {
|
||||
setCableItem('100038')
|
||||
}
|
||||
|
||||
let pkgAsp = estimateContextState.pkgAsp ? Number(estimateContextState.pkgAsp.replaceAll(',', '')) : 0
|
||||
|
||||
totals.pkgTotPrice = pkgAsp * totals.totVolKw * 1000
|
||||
@ -1064,6 +1092,7 @@ export default function Estimate({}) {
|
||||
}
|
||||
})
|
||||
|
||||
let dispCableFlgCnt = 0
|
||||
estimateContextState.itemList.forEach((item) => {
|
||||
delete item.showSalePrice
|
||||
delete item.showSaleTotPrice
|
||||
@ -1091,9 +1120,21 @@ export default function Estimate({}) {
|
||||
item.showSalePrice = '0'
|
||||
item.showSaleTotPrice = '0'
|
||||
}
|
||||
|
||||
if (item.dispCableFlg === '1') {
|
||||
dispCableFlgCnt++
|
||||
}
|
||||
|
||||
if (item.dispCableFlg === '1') {
|
||||
setCableItem(item.itemId)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (dispCableFlgCnt === 0) {
|
||||
setCableItem('100038')
|
||||
}
|
||||
|
||||
totals.vatPrice = totals.supplyPrice * 0.1
|
||||
totals.totPrice = totals.supplyPrice + totals.vatPrice
|
||||
|
||||
@ -1136,6 +1177,26 @@ export default function Estimate({}) {
|
||||
}
|
||||
}, [estimateContextState])
|
||||
|
||||
useEffect(() => {
|
||||
if (cableItemList.lenght > 0 || estimateContextState?.itemList.length > 0) {
|
||||
let dispCableFlgCnt = 0
|
||||
estimateContextState.itemList.map((item) => {
|
||||
if (item.dispCableFlg === '1') {
|
||||
dispCableFlgCnt++
|
||||
cableItemList.map((cable) => {
|
||||
if (item.itemId === cable.clRefChr1) {
|
||||
cable.clRefChr3 = item.itemName
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
if (dispCableFlgCnt === 0) {
|
||||
setCableItem('100038')
|
||||
}
|
||||
}
|
||||
}, [estimateContextState?.itemList, cableItemList])
|
||||
|
||||
return (
|
||||
<div className="sub-content estimate">
|
||||
<div className="sub-content-inner">
|
||||
@ -1281,7 +1342,7 @@ export default function Estimate({}) {
|
||||
</th>
|
||||
<td colSpan={3}>
|
||||
<div className="radio-wrap">
|
||||
{/* <div className="d-check-radio light mr10">
|
||||
<div className="d-check-radio light mr10">
|
||||
<input
|
||||
type="radio"
|
||||
name="estimateType"
|
||||
@ -1295,7 +1356,7 @@ export default function Estimate({}) {
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="YJSS">{getMessage('estimate.detail.estimateType.yjss')}</label>
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="d-check-radio light">
|
||||
<input
|
||||
type="radio"
|
||||
@ -1304,8 +1365,7 @@ export default function Estimate({}) {
|
||||
value={'YJOD'}
|
||||
checked={estimateContextState?.estimateType === 'YJOD' ? true : false}
|
||||
onChange={(e) => {
|
||||
//todo: 추후 YJSS가 다시 나타날 경우 아래 주석풀기
|
||||
// setHandlePricingFlag(true)
|
||||
setHandlePricingFlag(true)
|
||||
setEstimateContextState({ estimateType: e.target.value })
|
||||
}}
|
||||
/>
|
||||
@ -1602,9 +1662,8 @@ export default function Estimate({}) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* //todo: 추후 YJSS가 다시 나타날 경우 주석 풀기 */}
|
||||
{/* YJOD면 아래영역 숨김 */}
|
||||
{/* <div className="common-table bt-able" style={{ display: estimateContextState?.estimateType === 'YJSS' ? '' : 'none' }}>
|
||||
<div className="common-table bt-able" style={{ display: estimateContextState?.estimateType === 'YJSS' ? '' : 'none' }}>
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '160px' }} />
|
||||
@ -1639,7 +1698,7 @@ export default function Estimate({}) {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div> */}
|
||||
</div>
|
||||
{/* 제품정보 끝 */}
|
||||
{/* 가격표시영역시작 */}
|
||||
<div className="estimate-product-option">
|
||||
@ -1678,6 +1737,24 @@ export default function Estimate({}) {
|
||||
{getMessage('estimate.detail.showPrice.pricingBtn')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="product-price-wrap ml10">
|
||||
<div className="select-wrap">
|
||||
<select
|
||||
className="select-light"
|
||||
onChange={(e) => {
|
||||
onChangeDisplayCableItem(e.target.value, estimateContextState.itemList)
|
||||
}}
|
||||
value={cableItem}
|
||||
>
|
||||
{cableItemList.length > 0 &&
|
||||
cableItemList.map((row) => (
|
||||
<option key={row.clRefChr1} value={row.clRefChr1}>
|
||||
{row.clRefChr2}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="product-edit-wrap">
|
||||
<ul className="product-edit-explane">
|
||||
<li className="explane-item item01">
|
||||
@ -1757,7 +1834,7 @@ export default function Estimate({}) {
|
||||
<input
|
||||
type="checkbox"
|
||||
id={item?.dispOrder}
|
||||
disabled={!!item?.paDispOrder}
|
||||
disabled={!!item?.paDispOrder || item.dispCableFlg === '1'}
|
||||
onChange={() => onChangeSelect(item.dispOrder)}
|
||||
checked={!!selection.has(item.dispOrder)}
|
||||
/>
|
||||
@ -1768,27 +1845,50 @@ export default function Estimate({}) {
|
||||
<td>
|
||||
<div className="form-flex-wrap">
|
||||
<div className="select-wrap mr5">
|
||||
<Select
|
||||
name="long-value-select1"
|
||||
instanceId="long-value-select1"
|
||||
className="react-select-custom"
|
||||
classNamePrefix="custom"
|
||||
placeholder="Select"
|
||||
options={originDisplayItemList}
|
||||
onChange={(e) => {
|
||||
if (isObjectNotEmpty(e)) {
|
||||
onChangeDisplayItem(e.itemId, item.dispOrder, index)
|
||||
}
|
||||
}}
|
||||
menuPlacement={'auto'}
|
||||
getOptionLabel={(x) => x.itemName}
|
||||
getOptionValue={(x) => x.itemId}
|
||||
isClearable={false}
|
||||
isDisabled={!!item?.paDispOrder}
|
||||
value={displayItemList.filter(function (option) {
|
||||
return option.itemId === item.itemId
|
||||
})}
|
||||
/>
|
||||
{item.dispCableFlg !== '1' ? (
|
||||
<Select
|
||||
name="long-value-select1"
|
||||
instanceId="long-value-select1"
|
||||
className="react-select-custom"
|
||||
classNamePrefix="custom"
|
||||
placeholder="Select"
|
||||
options={originDisplayItemList}
|
||||
onChange={(e) => {
|
||||
if (isObjectNotEmpty(e)) {
|
||||
onChangeDisplayItem(e.itemId, item.dispOrder, index, false)
|
||||
}
|
||||
}}
|
||||
menuPlacement={'auto'}
|
||||
getOptionLabel={(x) => x.itemName}
|
||||
getOptionValue={(x) => x.itemNo}
|
||||
isClearable={false}
|
||||
isDisabled={!!item?.paDispOrder}
|
||||
value={displayItemList.filter(function (option) {
|
||||
if (item.itemNo === '') {
|
||||
return false
|
||||
} else {
|
||||
return option.itemId === item.itemId
|
||||
}
|
||||
})}
|
||||
/>
|
||||
) : (
|
||||
<Select
|
||||
name="long-value-select11"
|
||||
instanceId="long-value-select11"
|
||||
className="react-select-custom"
|
||||
classNamePrefix="custom"
|
||||
placeholder="Select"
|
||||
options={cableItemList}
|
||||
menuPlacement={'auto'}
|
||||
getOptionLabel={(x) => x.clRefChr3}
|
||||
getOptionValue={(x) => x.clRefChr1}
|
||||
isClearable={false}
|
||||
isDisabled={true}
|
||||
value={cableItemList.filter(function (option) {
|
||||
return option.clRefChr1 === item.itemId
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{item?.itemChangeFlg === '1' && (
|
||||
<div className="btn-area">
|
||||
|
||||
@ -23,6 +23,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
||||
initOptions: null,
|
||||
direction: null,
|
||||
arrow: null,
|
||||
toFixed: 1,
|
||||
initialize: function (points, options, canvas) {
|
||||
this.lines = []
|
||||
this.texts = []
|
||||
@ -33,11 +34,12 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
||||
this.innerLines = []
|
||||
this.children = []
|
||||
this.separatePolygon = []
|
||||
this.toFixed = options.toFixed ?? 1
|
||||
|
||||
// 소수점 전부 제거
|
||||
points.forEach((point) => {
|
||||
point.x = Number(point.x.toFixed(1))
|
||||
point.y = Number(point.y.toFixed(1))
|
||||
point.x = Number(point.x.toFixed(this.toFixed))
|
||||
point.y = Number(point.y.toFixed(this.toFixed))
|
||||
})
|
||||
options.selectable = options.selectable ?? true
|
||||
options.sort = options.sort ?? true
|
||||
|
||||
@ -111,7 +111,7 @@ export default function CanvasMenu(props) {
|
||||
//임시
|
||||
const { selectedPlan } = usePlan()
|
||||
const handleExcelPdfFileDown = async (donwloadType, drawingFlg) => {
|
||||
const url = '/api/estimate/excel-download'
|
||||
const url = '/api/pwrGnrSimulation/excel-download'
|
||||
|
||||
const params = {
|
||||
objectNo: objectNo,
|
||||
@ -365,11 +365,6 @@ export default function CanvasMenu(props) {
|
||||
|
||||
// 견적서 초기화 버튼
|
||||
const handleEstimateReset = () => {
|
||||
//todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요
|
||||
if (estimateRecoilState.estimateType === 'YJSS') {
|
||||
return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' })
|
||||
}
|
||||
|
||||
swalFire({
|
||||
text: getMessage('estimate.detail.reset.confirmMsg'),
|
||||
type: 'confirm',
|
||||
|
||||
@ -76,99 +76,88 @@ export default function ImgLoad() {
|
||||
}, [currentCanvasPlan])
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={floorPlanState.refFileModalOpen} pos={{ x: 1000, y: 200 }}>
|
||||
<div className={`modal-pop-wrap r`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('common.input.file')}</h1>
|
||||
<button
|
||||
className="modal-close"
|
||||
onClick={() => {
|
||||
setFloorPlanState({ ...floorPlanState, refFileModalOpen: false })
|
||||
}}
|
||||
>
|
||||
닫기
|
||||
</button>
|
||||
<WithDraggable isShow={floorPlanState.refFileModalOpen} pos={{ x: 1000, y: 200 }} className="r">
|
||||
<WithDraggable.Header
|
||||
title={getMessage('common.input.file')}
|
||||
onClose={() => setFloorPlanState({ ...floorPlanState, refFileModalOpen: false })}
|
||||
/>
|
||||
|
||||
<WithDraggable.Body>
|
||||
<div className="img-flex-box">
|
||||
<span className="normal-font mr10">{getMessage('modal.image.load.size.rotate')}</span>
|
||||
<label className="toggle-btn">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={floorPlanState.toggleRotate}
|
||||
onChange={(e) => setFloorPlanState({ ...floorPlanState, toggleRotate: e.target.checked })}
|
||||
/>
|
||||
<span className="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="img-flex-box">
|
||||
<span className="normal-font mr10">{getMessage('modal.image.load.size.rotate')}</span>
|
||||
<label className="toggle-btn">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={floorPlanState.toggleRotate}
|
||||
onChange={(e) => setFloorPlanState({ ...floorPlanState, toggleRotate: e.target.checked })}
|
||||
/>
|
||||
<span className="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="img-load-from">
|
||||
<div className="img-load-item">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio03" id="ra06" value={'1'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '1'} />
|
||||
<label htmlFor="ra06">{getMessage('common.input.file')}</label>
|
||||
</div>
|
||||
<div className="img-flex-box">
|
||||
<div className="img-edit-wrap">
|
||||
<label className="img-edit-btn" htmlFor="img_file">
|
||||
<span className="img-edit"></span>
|
||||
{getMessage('common.load')}
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="img_file"
|
||||
style={{ display: 'none' }}
|
||||
onChange={refFileMethod === '1' ? (e) => handleRefFile(e.target.files[0]) : () => {}}
|
||||
/>
|
||||
</div>
|
||||
<div className="img-name-wrap">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin al-l"
|
||||
value={refImage ? (refImage?.name ?? '') : (currentCanvasPlan?.bgImageName ?? '')}
|
||||
readOnly
|
||||
/>
|
||||
{refImage && <button className="img-check" onClick={handleFileDelete}></button>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="img-load-from">
|
||||
<div className="img-load-item">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio03" id="ra06" value={'1'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '1'} />
|
||||
<label htmlFor="ra06">{getMessage('common.input.file')}</label>
|
||||
</div>
|
||||
<div className="img-load-item">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio03" id="ra07" value={'2'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '2'} />
|
||||
<label htmlFor="ra07">{getMessage('common.input.address.load')}</label>
|
||||
<div className="img-flex-box">
|
||||
<div className="img-edit-wrap">
|
||||
<label className="img-edit-btn" htmlFor="img_file">
|
||||
<span className="img-edit"></span>
|
||||
{getMessage('common.load')}
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="img_file"
|
||||
style={{ display: 'none' }}
|
||||
onChange={refFileMethod === '1' ? (e) => handleRefFile(e.target.files[0]) : () => {}}
|
||||
/>
|
||||
</div>
|
||||
<div className="img-flex-box for-address">
|
||||
<div className="img-name-wrap">
|
||||
<input
|
||||
type="text"
|
||||
ref={queryRef}
|
||||
className="input-origin al-l mr10"
|
||||
placeholder={'住所入力'}
|
||||
value={mapPositionAddress}
|
||||
onChange={(e) => setMapPositionAddress(e.target.value)}
|
||||
className="input-origin al-l"
|
||||
value={refImage ? (refImage?.name ?? '') : (currentCanvasPlan?.bgImageName ?? '')}
|
||||
readOnly
|
||||
/>
|
||||
<div className="img-edit-wrap">
|
||||
<button
|
||||
className={`img-edit-btn ${mapPositionAddress.trim().length === 0 ? 'no-click' : ''}`}
|
||||
onClick={refFileMethod === '2' ? handleMapImageDown : () => {}}
|
||||
>
|
||||
{getMessage('common.finish')}
|
||||
</button>
|
||||
</div>
|
||||
{mapPositionAddress && <button className="check-address fail" onClick={handleAddressDelete}></button>}
|
||||
{/* <span className="check-address success"></span> */}
|
||||
{refImage && <button className="img-check" onClick={handleFileDelete}></button>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleModal}>
|
||||
{getMessage('common.finish')}
|
||||
</button>
|
||||
{/* <button className="btn-frame modal act" onClick={() => handleCanvasToPng(2)}></button> */}
|
||||
<div className="img-load-item">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio03" id="ra07" value={'2'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '2'} />
|
||||
<label htmlFor="ra07">{getMessage('common.input.address.load')}</label>
|
||||
</div>
|
||||
<div className="img-flex-box for-address">
|
||||
<input
|
||||
type="text"
|
||||
ref={queryRef}
|
||||
className="input-origin al-l mr10"
|
||||
placeholder={'住所入力'}
|
||||
value={mapPositionAddress}
|
||||
onChange={(e) => setMapPositionAddress(e.target.value)}
|
||||
/>
|
||||
<div className="img-edit-wrap">
|
||||
<button
|
||||
className={`img-edit-btn ${mapPositionAddress.trim().length === 0 ? 'no-click' : ''}`}
|
||||
onClick={refFileMethod === '2' ? handleMapImageDown : () => {}}
|
||||
>
|
||||
{getMessage('common.finish')}
|
||||
</button>
|
||||
</div>
|
||||
{mapPositionAddress && <button className="check-address fail" onClick={handleAddressDelete}></button>}
|
||||
{/* <span className="check-address success"></span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleModal}>
|
||||
{getMessage('common.finish')}
|
||||
</button>
|
||||
{/* <button className="btn-frame modal act" onClick={() => handleCanvasToPng(2)}></button> */}
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -13,42 +13,32 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
|
||||
const inputRef = useRef()
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xxxm`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('plan.menu.placement.surface.slope.setting')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="xxxm">
|
||||
<WithDraggable.Header title={getMessage('plan.menu.placement.surface.slope.setting')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="slope-wrap">
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: 'auto' }}>
|
||||
{getMessage('slope')}
|
||||
</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={globalPitch} ref={inputRef} />
|
||||
</div>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button
|
||||
className="btn-frame modal act"
|
||||
onClick={() => {
|
||||
setGlobalPitch(inputRef.current.value)
|
||||
closePopup(id)
|
||||
}}
|
||||
>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="slope-wrap">
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: 'auto' }}>
|
||||
{getMessage('slope')}
|
||||
</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={globalPitch} ref={inputRef} />
|
||||
</div>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button
|
||||
className="btn-frame modal act"
|
||||
onClick={() => {
|
||||
setGlobalPitch(inputRef.current.value)
|
||||
closePopup(id)
|
||||
}}
|
||||
>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -124,46 +124,36 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
|
||||
setType(button.type)
|
||||
}
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap r`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.auxiliary.drawing')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="r">
|
||||
<WithDraggable.Header title={getMessage('modal.auxiliary.drawing')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="modal-btn-wrap">
|
||||
{types.map((type, idx) => (
|
||||
<button key={idx} className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`} onClick={() => onClickButton(type)}>
|
||||
{type.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
{buttonAct === 1 && <OuterLineWall props={outerLineProps} />}
|
||||
{buttonAct === 2 && <RightAngle props={rightAngleProps} />}
|
||||
{buttonAct === 3 && <DoublePitch props={doublePitchProps} />}
|
||||
{buttonAct === 4 && <Angle props={angleProps} />}
|
||||
{buttonAct === 5 && <Diagonal props={diagonalLineProps} />}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleRollback}>
|
||||
{getMessage('modal.cover.outline.rollback')}
|
||||
</button>
|
||||
<button className="btn-frame modal mr5" onClick={cutAuxiliary}>
|
||||
{getMessage('contextmenu.auxiliary.cut')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={() => handleFix(id)}>
|
||||
{getMessage('apply')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="modal-btn-wrap">
|
||||
{types.map((type, idx) => (
|
||||
<button key={idx} className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`} onClick={() => onClickButton(type)}>
|
||||
{type.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
{buttonAct === 1 && <OuterLineWall props={outerLineProps} />}
|
||||
{buttonAct === 2 && <RightAngle props={rightAngleProps} />}
|
||||
{buttonAct === 3 && <DoublePitch props={doublePitchProps} />}
|
||||
{buttonAct === 4 && <Angle props={angleProps} />}
|
||||
{buttonAct === 5 && <Diagonal props={diagonalLineProps} />}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleRollback}>
|
||||
{getMessage('modal.cover.outline.rollback')}
|
||||
</button>
|
||||
<button className="btn-frame modal mr5" onClick={cutAuxiliary}>
|
||||
{getMessage('contextmenu.auxiliary.cut')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={() => handleFix(id)}>
|
||||
{getMessage('apply')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -55,77 +55,67 @@ export default function AuxiliaryEdit(props) {
|
||||
closePopup(id)
|
||||
}
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xm mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage(type === 'copy' ? 'modal.auxiliary.copy' : 'modal.auxiliary.move')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="grid-option-tit">{getMessage(type === 'copy' ? 'modal.auxiliary.copy.info' : 'modal.auxiliary.move.info')}</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="move-form">
|
||||
<p className="mb5">{getMessage('length')}</p>
|
||||
<div className="input-move-wrap mb5">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" value={verticalSize} onChange={(e) => setVerticalSize(e.target.value)} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('↑')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('↓')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
<WithDraggable isShow={true} pos={pos} className="xm">
|
||||
<WithDraggable.Header title={getMessage(type === 'copy' ? 'modal.auxiliary.copy' : 'modal.auxiliary.move')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="grid-option-tit">{getMessage(type === 'copy' ? 'modal.auxiliary.copy.info' : 'modal.auxiliary.move.info')}</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="move-form">
|
||||
<p className="mb5">{getMessage('length')}</p>
|
||||
<div className="input-move-wrap mb5">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" value={verticalSize} onChange={(e) => setVerticalSize(e.target.value)} />
|
||||
</div>
|
||||
<div className="input-move-wrap">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" value={horizonSize} onChange={(e) => setHorizonSize(e.target.value)} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('←')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('→')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('↑')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('↓')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-move-wrap">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" value={horizonSize} onChange={(e) => setHorizonSize(e.target.value)} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('←')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('→')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -111,63 +111,53 @@ export default function AuxiliarySize(props) {
|
||||
closePopup(id)
|
||||
}
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xm mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.auxiliary.size.edit')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="xm">
|
||||
<WithDraggable.Header title={getMessage('modal.auxiliary.size.edit')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="discrimination-box mb10">
|
||||
<div className="d-check-radio pop mb10">
|
||||
<input type="radio" name="radio01" id="ra01" onClick={(e) => setCheckedRadio(1)} />
|
||||
<label htmlFor="ra01">1{getMessage('modal.auxiliary.size.edit.point')}</label>
|
||||
</div>
|
||||
<div className="outline-form mb15">
|
||||
<div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={currentObject?.attributes.planeSize} readOnly={true} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span style={{ width: 'auto' }}>{getMessage('length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" value={value1} readOnly={checkedRadio !== 1} onChange={handleInput} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="discrimination-box ">
|
||||
<div className="d-check-radio pop mb10">
|
||||
<input type="radio" name="radio01" id="ra02" onClick={(e) => setCheckedRadio(2)} />
|
||||
<label htmlFor="ra02">2{getMessage('modal.auxiliary.size.edit.point')}</label>
|
||||
</div>
|
||||
<div className="outline-form mb15">
|
||||
<div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={currentObject?.attributes.planeSize} readOnly={true} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span style={{ width: 'auto' }}>{getMessage('length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" value={value2} readOnly={checkedRadio !== 2} onChange={handleInput} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="discrimination-box mb10">
|
||||
<div className="d-check-radio pop mb10">
|
||||
<input type="radio" name="radio01" id="ra01" onClick={(e) => setCheckedRadio(1)} />
|
||||
<label htmlFor="ra01">1{getMessage('modal.auxiliary.size.edit.point')}</label>
|
||||
</div>
|
||||
<div className="outline-form mb15">
|
||||
<div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={currentObject?.attributes.planeSize} readOnly={true} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span style={{ width: 'auto' }}>{getMessage('length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" value={value1} readOnly={checkedRadio !== 1} onChange={handleInput} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="discrimination-box ">
|
||||
<div className="d-check-radio pop mb10">
|
||||
<input type="radio" name="radio01" id="ra02" onClick={(e) => setCheckedRadio(2)} />
|
||||
<label htmlFor="ra02">2{getMessage('modal.auxiliary.size.edit.point')}</label>
|
||||
</div>
|
||||
<div className="outline-form mb15">
|
||||
<div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={currentObject?.attributes.planeSize} readOnly={true} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span style={{ width: 'auto' }}>{getMessage('length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" value={value2} readOnly={checkedRadio !== 2} onChange={handleInput} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ import { usePopup } from '@/hooks/usePopup'
|
||||
import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
|
||||
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
|
||||
import { useEvent } from '@/hooks/useEvent'
|
||||
import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
|
||||
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
|
||||
import { addedRoofsState, corridorDimensionSelector, basicSettingState } from '@/store/settingAtom'
|
||||
import { isObjectNotEmpty } from '@/util/common-utils'
|
||||
import Swal from 'sweetalert2'
|
||||
@ -38,6 +38,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
|
||||
const [isClosePopup, setIsClosePopup] = useState({ close: false, id: 0 })
|
||||
const [checkedModules, setCheckedModules] = useRecoilState(checkedModuleState)
|
||||
|
||||
const [manualSetupMode, setManualSetupMode] = useState('manualSetup')
|
||||
|
||||
@ -50,6 +51,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup, manualModuleLayoutSetup } =
|
||||
useModuleBasicSetting(tabNum)
|
||||
const { updateObjectDate } = useMasterController()
|
||||
|
||||
const handleBtnNextStep = () => {
|
||||
if (tabNum === 1) {
|
||||
orientationRef.current.handleNextStep()
|
||||
@ -163,36 +165,43 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
}
|
||||
}, [layoutSetup])
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap lx-2`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>
|
||||
<button className="modal-close" onClick={() => handleClosePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="roof-module-tab">
|
||||
<div className={`module-tab-bx act`}>{getMessage('modal.module.basic.setting.orientation.setting')}</div>
|
||||
<span className={`tab-arr ${tabNum !== 1 ? 'act' : ''}`}></span>
|
||||
<div className={`module-tab-bx ${tabNum !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
|
||||
<span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
|
||||
<div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
|
||||
</div>
|
||||
{tabNum === 1 && <Orientation ref={orientationRef} tabNum={tabNum} setTabNum={setTabNum} />}
|
||||
{/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Module setTabNum={setTabNum} />}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && (
|
||||
<Placement setTabNum={setTabNum} ref={placementRef} setLayoutSetup={setLayoutSetup} layoutSetup={layoutSetup} />
|
||||
)}
|
||||
useEffect(() => {
|
||||
setIsManualModuleSetup(false)
|
||||
}, [checkedModules])
|
||||
|
||||
{/*배치면 초기설정 - 입력방법: 육지붕*/}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && (
|
||||
<PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos} className="lx-2">
|
||||
<WithDraggable.Header title={getMessage('plan.menu.module.circuit.setting.default')} onClose={() => handleClosePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="roof-module-tab">
|
||||
<div className={`module-tab-bx act`}>{getMessage('modal.module.basic.setting.orientation.setting')}</div>
|
||||
<span className={`tab-arr ${tabNum !== 1 ? 'act' : ''}`}></span>
|
||||
<div className={`module-tab-bx ${tabNum !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
|
||||
<span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
|
||||
<div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
|
||||
</div>
|
||||
{tabNum === 1 && <Orientation ref={orientationRef} tabNum={tabNum} setTabNum={setTabNum} />}
|
||||
{/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Module setTabNum={setTabNum} />}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
|
||||
|
||||
{/*배치면 초기설정 - 입력방법: 육지붕*/}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && (
|
||||
<PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
|
||||
)}
|
||||
|
||||
<div className="grid-btn-wrap">
|
||||
{tabNum !== 1 && (
|
||||
<button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
|
||||
{getMessage('modal.module.basic.setting.prev')}
|
||||
</button>
|
||||
)}
|
||||
{/*{tabNum !== 3 && <button className="btn-frame modal act mr5">{getMessage('modal.common.save')}</button>}*/}
|
||||
{tabNum !== 3 && (
|
||||
<button className="btn-frame modal" onClick={handleBtnNextStep}>
|
||||
Next
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="grid-btn-wrap">
|
||||
@ -237,8 +246,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -612,64 +612,53 @@ export default function CircuitTrestleSetting({ id }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
|
||||
<div className={`modal-pop-wrap l-2`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
|
||||
{/* <button className="modal-close" onClick={() => closePopup(id)}> */}
|
||||
<button className="modal-close" onClick={handleClose}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="roof-module-tab">
|
||||
<div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
|
||||
<span className={`tab-arr ${tabNum === 2 ? 'act' : ''}`}></span>
|
||||
<div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>
|
||||
{getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
|
||||
</div>
|
||||
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }} className="l-2">
|
||||
<WithDraggable.Header title={getMessage('modal.circuit.trestle.setting')} onClose={() => handleClose()} />
|
||||
<WithDraggable.Body>
|
||||
<div className="roof-module-tab">
|
||||
<div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
|
||||
<span className={`tab-arr ${tabNum === 2 ? 'act' : ''}`}></span>
|
||||
<div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>
|
||||
{getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
|
||||
</div>
|
||||
{tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
|
||||
{tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
|
||||
<PassivityCircuitAllocation {...passivityProps} ref={passivityCircuitAllocationRef} />
|
||||
)}
|
||||
{tabNum === 2 && <StepUp {...stepUpProps} onInitialize={handleStepUpInitialize} />}
|
||||
{tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5 act" onClick={() => onAutoRecommend()}>
|
||||
{getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={() => onPassivityAllocation()}>
|
||||
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5 " onClick={() => onClickPrev()}>
|
||||
{getMessage('modal.common.prev')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={() => handleStepUp()}>
|
||||
{getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{tabNum === 2 && (
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={() => onClickPrev()}>
|
||||
{getMessage('modal.common.prev')}
|
||||
</button>
|
||||
{/* <button className="btn-frame modal act" onClick={() => apply()}> */}
|
||||
<button className="btn-frame modal act" onClick={onApply}>
|
||||
{getMessage('modal.common.save')}({getMessage('modal.circuit.trestle.setting.circuit.allocation')})
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
{tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
|
||||
{tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
|
||||
<PassivityCircuitAllocation {...passivityProps} ref={passivityCircuitAllocationRef} />
|
||||
)}
|
||||
{tabNum === 2 && <StepUp {...stepUpProps} onInitialize={handleStepUpInitialize} />}
|
||||
{tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5 act" onClick={() => onAutoRecommend()}>
|
||||
{getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={() => onPassivityAllocation()}>
|
||||
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5 " onClick={() => onClickPrev()}>
|
||||
{getMessage('modal.common.prev')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={() => handleStepUp()}>
|
||||
{getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{tabNum === 2 && (
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={() => onClickPrev()}>
|
||||
{getMessage('modal.common.prev')}
|
||||
</button>
|
||||
{/* <button className="btn-frame modal act" onClick={() => apply()}> */}
|
||||
<button className="btn-frame modal act" onClick={onApply}>
|
||||
{getMessage('modal.common.save')}({getMessage('modal.circuit.trestle.setting.circuit.allocation')})
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -160,6 +160,20 @@ export default function PowerConditionalSelect(props) {
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (selectedModels.find((m) => m.pcsSerParallelYn === 'Y') && selectedRow.pcsSerParallelYn === 'Y') {
|
||||
return
|
||||
}
|
||||
|
||||
if (selectedRow.pcsSerParallelYn === 'Y' && selectedModels.length === 0 && selectedMaker.pcsMkrMultiType === PCS_MKR_MULTI_TYPE.SINGLE_P) {
|
||||
swalFire({
|
||||
title: getMessage('modal.module.pcs.error1'),
|
||||
icon: 'warning',
|
||||
})
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (selectedMaker.pcsMkrMultiType === PCS_MKR_MULTI_TYPE.MULTI) {
|
||||
setSelectedModels([...selectedModels, { ...selectedRow, id: uuidv4() }])
|
||||
} else if (!selectedModels.find((m) => m.itemId === selectedRow.itemId)) {
|
||||
@ -169,6 +183,11 @@ export default function PowerConditionalSelect(props) {
|
||||
}
|
||||
|
||||
const onRemoveSelectedModel = (model) => {
|
||||
const tempModels = selectedModels.filter((m) => m.id !== model.id)
|
||||
if (tempModels.length === 1 && tempModels[0].pcsSerParallelYn === 'Y') {
|
||||
setSelectedModels([])
|
||||
return
|
||||
}
|
||||
setSelectedModels(selectedModels.filter((m) => m.id !== model.id))
|
||||
}
|
||||
|
||||
@ -277,14 +296,6 @@ export default function PowerConditionalSelect(props) {
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>
|
||||
{getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={() => setTabNum(tabNum + 1)}>
|
||||
{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
|
||||
</button>
|
||||
</div> */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -122,95 +122,85 @@ export default function DimensionLineSetting(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xm mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('contextmenu.display.edit')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="xm">
|
||||
<WithDraggable.Header title={getMessage('contextmenu.display.edit')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="guide">{getMessage('modal.display.edit.info')}</div>
|
||||
<div className="mb-box">
|
||||
<div className="slope-wrap">
|
||||
<div className="outline-form mb15">
|
||||
<span className="mr10">{getMessage('modal.display.edit.before.length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" value={basicLength} readOnly />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-box">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('modal.display.edit.after.length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
defaultValue={''}
|
||||
value={changeLength}
|
||||
onChange={(e) => {
|
||||
console.log(e.target)
|
||||
setChangeLength(e.target.value)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-check-box pop">
|
||||
<input type="checkbox" id="ch99" checked={slopeAble} onChange={() => setSlopeAble(!slopeAble)} />
|
||||
<label htmlFor="ch99">{getMessage('modal.display.edit.input.slope')}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="slope-wrap">
|
||||
<div className="warning">{getMessage('modal.display.edit.input.slope')}</div>
|
||||
<div className="display-change-wrap">
|
||||
<div className="outline-form mb15">
|
||||
<span className="mr10">{getMessage('slope')}</span>
|
||||
<div className="grid-select mr10">
|
||||
<QSelectBox
|
||||
title={''}
|
||||
options={options}
|
||||
disabled={!slopeAble}
|
||||
value={selectedSlope1}
|
||||
onChange={(e) => setSelectedSlope1(e)}
|
||||
showKey={'name'}
|
||||
sourceKey={'value'}
|
||||
targetKey={'value'}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('slope')}</span>
|
||||
<div className="grid-select mr10">
|
||||
<QSelectBox
|
||||
title={''}
|
||||
options={options}
|
||||
disabled={!slopeAble}
|
||||
value={selectedSlope2}
|
||||
onChange={(e) => setSelectedSlope2(e)}
|
||||
showKey={'name'}
|
||||
sourceKey={'value'}
|
||||
targetKey={'value'}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="warning">{getMessage('modal.display.edit.input.slope.info')}</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleChangeLength}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="guide">{getMessage('modal.display.edit.info')}</div>
|
||||
<div className="mb-box">
|
||||
<div className="slope-wrap">
|
||||
<div className="outline-form mb15">
|
||||
<span className="mr10">{getMessage('modal.display.edit.before.length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" value={basicLength} readOnly />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-box">
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('modal.display.edit.after.length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
defaultValue={''}
|
||||
value={changeLength}
|
||||
onChange={(e) => {
|
||||
console.log(e.target)
|
||||
setChangeLength(e.target.value)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-check-box pop">
|
||||
<input type="checkbox" id="ch99" checked={slopeAble} onChange={() => setSlopeAble(!slopeAble)} />
|
||||
<label htmlFor="ch99">{getMessage('modal.display.edit.input.slope')}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="slope-wrap">
|
||||
<div className="warning">{getMessage('modal.display.edit.input.slope')}</div>
|
||||
<div className="display-change-wrap">
|
||||
<div className="outline-form mb15">
|
||||
<span className="mr10">{getMessage('slope')}</span>
|
||||
<div className="grid-select mr10">
|
||||
<QSelectBox
|
||||
title={''}
|
||||
options={options}
|
||||
disabled={!slopeAble}
|
||||
value={selectedSlope1}
|
||||
onChange={(e) => setSelectedSlope1(e)}
|
||||
showKey={'name'}
|
||||
sourceKey={'value'}
|
||||
targetKey={'value'}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span className="mr10">{getMessage('slope')}</span>
|
||||
<div className="grid-select mr10">
|
||||
<QSelectBox
|
||||
title={''}
|
||||
options={options}
|
||||
disabled={!slopeAble}
|
||||
value={selectedSlope2}
|
||||
onChange={(e) => setSelectedSlope2(e)}
|
||||
showKey={'name'}
|
||||
sourceKey={'value'}
|
||||
targetKey={'value'}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">{pitchText}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="warning">{getMessage('modal.display.edit.input.slope.info')}</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleChangeLength}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -16,62 +16,52 @@ export default function Distance(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xxxm`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.distance')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="slope-wrap">
|
||||
<div className="eaves-keraba-table">
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">{getMessage('modal.distance.dual.point')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '98px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={0} value={distance.diagonal} readOnly />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
<WithDraggable isShow={true} pos={pos} className="xxxm">
|
||||
<WithDraggable.Header title={getMessage('modal.distance')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="slope-wrap">
|
||||
<div className="eaves-keraba-table">
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">{getMessage('modal.distance.dual.point')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '98px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={0} value={distance.diagonal} readOnly />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">{getMessage('modal.distance.horizon')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '98px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={0} value={distance.horizon} readOnly />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">{getMessage('modal.distance.horizon')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '98px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={0} value={distance.horizon} readOnly />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">{getMessage('modal.distance.vertical')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '98px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={0} value={distance.vertical} readOnly />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">{getMessage('modal.distance.vertical')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '98px' }}>
|
||||
<input type="text" className="input-origin block" defaultValue={0} value={distance.vertical} readOnly />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleClose}>
|
||||
{getMessage('common.ok')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleClose}>
|
||||
{getMessage('common.ok')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -38,34 +38,24 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap r`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
<WithDraggable isShow={true} pos={pos} className="r">
|
||||
<WithDraggable.Header title={getMessage('modal.eaves.gable.edit')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="modal-btn-wrap">
|
||||
{buttonMenu.map((item) => (
|
||||
<button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="modal-btn-wrap">
|
||||
{buttonMenu.map((item) => (
|
||||
<button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
{type === TYPES.EAVES && <Eaves {...eavesProps} />}
|
||||
{type === TYPES.GABLE && <Gable {...gableProps} />}
|
||||
{type === TYPES.WALL_MERGE && <WallMerge {...wallMergeProps} />}
|
||||
{type === TYPES.SHED && <Shed {...shedProps} />}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
{type === TYPES.EAVES && <Eaves {...eavesProps} />}
|
||||
{type === TYPES.GABLE && <Gable {...gableProps} />}
|
||||
{type === TYPES.WALL_MERGE && <WallMerge {...wallMergeProps} />}
|
||||
{type === TYPES.SHED && <Shed {...shedProps} />}
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -63,123 +63,113 @@ export default function FlowDirectionSetting(props) {
|
||||
)
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap ml mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="drawing-flow-wrap">
|
||||
<div className="discrimination-box">
|
||||
<div className="discrimination-tit mb15">{getMessage('modal.flow.direction.setting')}</div>
|
||||
<div className="guide">{getMessage('modal.flow.direction.setting.info')}</div>
|
||||
<div className="object-direction-wrap">
|
||||
<div className="plane-direction">
|
||||
<span className="top">{getMessage('commons.north')}</span>
|
||||
<button className={`plane-btn up ${flowDirection === 'north' ? 'act' : ''}`} onClick={() => setFlowDirection('north')}></button>
|
||||
<span className="right">{getMessage('commons.east')}</span>
|
||||
<button className={`plane-btn right ${flowDirection === 'east' ? 'act' : ''}`} onClick={() => setFlowDirection('east')}></button>
|
||||
<span className="bottom">{getMessage('commons.south')}</span>
|
||||
<button className={`plane-btn down ${flowDirection === 'south' ? 'act' : ''}`} onClick={() => setFlowDirection('south')}></button>
|
||||
<span className="left">{getMessage('commons.west')}</span>
|
||||
<button className={`plane-btn left ${flowDirection === 'west' ? 'act' : ''}`} onClick={() => setFlowDirection('west')}></button>
|
||||
</div>
|
||||
<WithDraggable isShow={true} pos={pos} className="ml">
|
||||
<WithDraggable.Header title={getMessage('modal.shape.flow.direction.setting')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="drawing-flow-wrap">
|
||||
<div className="discrimination-box">
|
||||
<div className="discrimination-tit mb15">{getMessage('modal.flow.direction.setting')}</div>
|
||||
<div className="guide">{getMessage('modal.flow.direction.setting.info')}</div>
|
||||
<div className="object-direction-wrap">
|
||||
<div className="plane-direction">
|
||||
<span className="top">{getMessage('commons.north')}</span>
|
||||
<button className={`plane-btn up ${flowDirection === 'north' ? 'act' : ''}`} onClick={() => setFlowDirection('north')}></button>
|
||||
<span className="right">{getMessage('commons.east')}</span>
|
||||
<button className={`plane-btn right ${flowDirection === 'east' ? 'act' : ''}`} onClick={() => setFlowDirection('east')}></button>
|
||||
<span className="bottom">{getMessage('commons.south')}</span>
|
||||
<button className={`plane-btn down ${flowDirection === 'south' ? 'act' : ''}`} onClick={() => setFlowDirection('south')}></button>
|
||||
<span className="left">{getMessage('commons.west')}</span>
|
||||
<button className={`plane-btn left ${flowDirection === 'west' ? 'act' : ''}`} onClick={() => setFlowDirection('west')}></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="discrimination-box">
|
||||
<div className="discrimination-tit mb15">{getMessage('modal.module.basic.setting.orientation.setting')}</div>
|
||||
<div className="guide">{getMessage('modal.shape.flow.direction.setting.orientation.setting.info')}</div>
|
||||
<div className="mb-box">
|
||||
<div className="d-check-radio pop mb15">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra01"
|
||||
checked={type === FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH}
|
||||
onChange={(e) => {
|
||||
setCompasDeg(0)
|
||||
setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="ra01">{getMessage('modal.shape.flow.direction.setting.orientation.8')}</label>
|
||||
</div>
|
||||
<div className="grid-select ">
|
||||
<QSelectBox
|
||||
value={selectedOrientation}
|
||||
options={orientations}
|
||||
onChange={(e) => {
|
||||
setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
|
||||
setSelectedOrientation(e)
|
||||
setCompasDeg(e.value)
|
||||
}}
|
||||
showKey={'name'}
|
||||
targetKey={'value'}
|
||||
sourceKey={'value'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="discrimination-box">
|
||||
<div className="discrimination-tit mb15">{getMessage('modal.module.basic.setting.orientation.setting')}</div>
|
||||
<div className="guide">{getMessage('modal.shape.flow.direction.setting.orientation.setting.info')}</div>
|
||||
<div className="mb-box">
|
||||
<div className="d-check-radio pop mb15">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra01"
|
||||
checked={type === FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH}
|
||||
onChange={(e) => {
|
||||
setCompasDeg(0)
|
||||
setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="ra01">{getMessage('modal.shape.flow.direction.setting.orientation.8')}</label>
|
||||
</div>
|
||||
<div className="mb-box">
|
||||
<div className="d-check-radio pop">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra02"
|
||||
value={1}
|
||||
checked={type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH}
|
||||
onChange={(e) => {
|
||||
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="ra02">{getMessage('modal.shape.flow.direction.setting.orientation.24')}</label>
|
||||
</div>
|
||||
<div className="grid-select ">
|
||||
<QSelectBox
|
||||
value={selectedOrientation}
|
||||
options={orientations}
|
||||
onChange={(e) => {
|
||||
setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
|
||||
setSelectedOrientation(e)
|
||||
setCompasDeg(e.value)
|
||||
}}
|
||||
showKey={'name'}
|
||||
targetKey={'value'}
|
||||
sourceKey={'value'}
|
||||
/>
|
||||
</div>
|
||||
<div className="draw-flow-wrap">
|
||||
<div className="compas-box">
|
||||
<div className="compas-box-inner">
|
||||
{Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`circle ${compasDeg === 15 * (12 + index) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
|
||||
setCompasDeg(15 * (12 + index))
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
{Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`circle ${compasDeg === 15 * (index + 1) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
|
||||
setCompasDeg(15 * (index + 1))
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
<div className="compas">
|
||||
<div
|
||||
className="compas-arr"
|
||||
style={{ transform: `${type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH && `rotate(${compasDeg}deg)`}` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-box">
|
||||
<div className="d-check-radio pop">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra02"
|
||||
value={1}
|
||||
checked={type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH}
|
||||
onChange={(e) => {
|
||||
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="ra02">{getMessage('modal.shape.flow.direction.setting.orientation.24')}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="draw-flow-wrap">
|
||||
<div className="compas-box">
|
||||
<div className="compas-box-inner">
|
||||
{Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`circle ${compasDeg === 15 * (12 + index) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
|
||||
setCompasDeg(15 * (12 + index))
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
{Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`circle ${compasDeg === 15 * (index + 1) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
|
||||
setCompasDeg(15 * (index + 1))
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
<div className="compas">
|
||||
<div
|
||||
className="compas-arr"
|
||||
style={{ transform: `${type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH && `rotate(${compasDeg}deg)`}` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={() => changeSurfaceFlowDirection(target, flowDirection, compasDeg)}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={() => changeSurfaceFlowDirection(target, flowDirection, compasDeg)}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -177,125 +177,115 @@ export default function DotLineGrid(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap ssm mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1>
|
||||
<button
|
||||
className="modal-close"
|
||||
onClick={() => {
|
||||
setIsShow(false)
|
||||
closePopup(id, isConfig)
|
||||
}}
|
||||
>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="ssm">
|
||||
<WithDraggable.Header
|
||||
title={getMessage('modal.canvas.setting.grid.dot.line.setting')}
|
||||
onClose={() => {
|
||||
setIsShow(false)
|
||||
closePopup(id, isConfig)
|
||||
}}
|
||||
/>
|
||||
<WithDraggable.Body>
|
||||
<div className="grid-check-form">
|
||||
<div className="d-check-box pop">
|
||||
<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>
|
||||
</div>
|
||||
<div className="d-check-box pop">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="d-check-radio pop no-text">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra01"
|
||||
value={1}
|
||||
onChange={handleRadioChange}
|
||||
checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 1}
|
||||
readOnly={!copyCurrentSetting.DOT && !copyCurrentSetting.LINE}
|
||||
/>
|
||||
<label htmlFor="ra01"></label>
|
||||
</div>
|
||||
<div className="grid-input-form">
|
||||
<span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.horizon')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin"
|
||||
name={`horizontalInterval`}
|
||||
value={copyCurrentSetting.INTERVAL.horizontalInterval}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
/>
|
||||
</div>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
<div className="grid-input-form">
|
||||
<span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.vertical')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin"
|
||||
name={`verticalInterval`}
|
||||
value={copyCurrentSetting.INTERVAL.verticalInterval}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
/>
|
||||
</div>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-option-box">
|
||||
<div className="d-check-radio pop no-text">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra02"
|
||||
value={2}
|
||||
onChange={handleRadioChange}
|
||||
checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 2}
|
||||
readOnly={!copyCurrentSetting.DOT && !copyCurrentSetting.LINE}
|
||||
/>
|
||||
<label htmlFor="ra02"></label>
|
||||
</div>
|
||||
<div className="grid-input-form">
|
||||
<span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.ratio')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin"
|
||||
name={`ratioInterval`}
|
||||
value={copyCurrentSetting.INTERVAL.ratioInterval}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
/>
|
||||
</div>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
<div className="grid-select">
|
||||
{selectOption && (
|
||||
<QSelectBox
|
||||
options={SelectOptions}
|
||||
onChange={changeDimension}
|
||||
value={selectOption}
|
||||
showKey={'name'}
|
||||
targetKey={'id'}
|
||||
sourceKey={'id'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={reset}>
|
||||
{getMessage('modal.canvas.setting.grid.dot.line.setting.reset')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
{getMessage('modal.canvas.setting.grid.dot.line.setting.save')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="grid-check-form">
|
||||
<div className="d-check-box pop">
|
||||
<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>
|
||||
</div>
|
||||
<div className="d-check-box pop">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="d-check-radio pop no-text">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra01"
|
||||
value={1}
|
||||
onChange={handleRadioChange}
|
||||
checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 1}
|
||||
readOnly={!copyCurrentSetting.DOT && !copyCurrentSetting.LINE}
|
||||
/>
|
||||
<label htmlFor="ra01"></label>
|
||||
</div>
|
||||
<div className="grid-input-form">
|
||||
<span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.horizon')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin"
|
||||
name={`horizontalInterval`}
|
||||
value={copyCurrentSetting.INTERVAL.horizontalInterval}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
/>
|
||||
</div>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
<div className="grid-input-form">
|
||||
<span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.vertical')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin"
|
||||
name={`verticalInterval`}
|
||||
value={copyCurrentSetting.INTERVAL.verticalInterval}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
/>
|
||||
</div>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-option-box">
|
||||
<div className="d-check-radio pop no-text">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra02"
|
||||
value={2}
|
||||
onChange={handleRadioChange}
|
||||
checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 2}
|
||||
readOnly={!copyCurrentSetting.DOT && !copyCurrentSetting.LINE}
|
||||
/>
|
||||
<label htmlFor="ra02"></label>
|
||||
</div>
|
||||
<div className="grid-input-form">
|
||||
<span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.ratio')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin"
|
||||
name={`ratioInterval`}
|
||||
value={copyCurrentSetting.INTERVAL.ratioInterval}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
/>
|
||||
</div>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
<div className="grid-select">
|
||||
{selectOption && (
|
||||
<QSelectBox
|
||||
options={SelectOptions}
|
||||
onChange={changeDimension}
|
||||
value={selectOption}
|
||||
showKey={'name'}
|
||||
targetKey={'id'}
|
||||
sourceKey={'id'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={reset}>
|
||||
{getMessage('modal.canvas.setting.grid.dot.line.setting.reset')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
{getMessage('modal.canvas.setting.grid.dot.line.setting.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -20,67 +20,57 @@ export default function GridCopy(props) {
|
||||
copy(currentObject, ['↑', '←'].includes(arrow) ? +length * -1 : +length)
|
||||
}
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xm mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.grid.copy')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="grid-option-tit">{getMessage('modal.grid.copy.info')}</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="grid-input-form">
|
||||
<span className="mr10">{getMessage('modal.grid.copy.length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin" value={length} onChange={(e) => setLength(e.target.value)} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
<div className="grid-direction">
|
||||
<button
|
||||
className={`direction up ${arrow === '↑' ? 'act' : ''} ${currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
if (currentObject?.direction === 'vertical') return
|
||||
setArrow('↑')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction down ${arrow === '↓' ? 'act' : ''} ${currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
if (currentObject?.direction === 'vertical') return
|
||||
setArrow('↓')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction left ${arrow === '←' ? 'act' : ''} ${currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
if (currentObject?.direction === 'horizontal') return
|
||||
setArrow('←')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction right ${arrow === '→' ? 'act' : ''} ${currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
if (currentObject?.direction === 'horizontal') return
|
||||
setArrow('→')
|
||||
}}
|
||||
></button>
|
||||
<WithDraggable isShow={true} pos={pos} className="xm">
|
||||
<WithDraggable.Header title={getMessage('modal.grid.copy')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="grid-option-tit">{getMessage('modal.grid.copy.info')}</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="grid-input-form">
|
||||
<span className="mr10">{getMessage('modal.grid.copy.length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin" value={length} onChange={(e) => setLength(e.target.value)} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
<div className="grid-direction">
|
||||
<button
|
||||
className={`direction up ${arrow === '↑' ? 'act' : ''} ${currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
if (currentObject?.direction === 'vertical') return
|
||||
setArrow('↑')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction down ${arrow === '↓' ? 'act' : ''} ${currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
if (currentObject?.direction === 'vertical') return
|
||||
setArrow('↓')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction left ${arrow === '←' ? 'act' : ''} ${currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
if (currentObject?.direction === 'horizontal') return
|
||||
setArrow('←')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction right ${arrow === '→' ? 'act' : ''} ${currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
if (currentObject?.direction === 'horizontal') return
|
||||
setArrow('→')
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.grid.copy.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.grid.copy.save')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -73,93 +73,83 @@ export default function GridMove(props) {
|
||||
closePopup(id)
|
||||
}
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xm mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.grid.move')} </h1>
|
||||
<button className="modal-close" onClick={handleClose}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="grid-option-tit">{getMessage('modal.grid.move.info')}</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="d-check-box pop mb10">
|
||||
<input type="checkbox" id="ch99" checked={isAll} onChange={() => setIsAll(!isAll)} />
|
||||
<label htmlFor="ch99">{getMessage('modal.grid.move.all')}</label>
|
||||
</div>
|
||||
<div className="grid-option-box">
|
||||
<div className="move-form">
|
||||
<p className="mb5">{getMessage('modal.grid.move.length')}</p>
|
||||
<div className="input-move-wrap mb5">
|
||||
<div className="input-move">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin"
|
||||
value={verticalSize}
|
||||
onChange={(e) => setVerticalSize(e.target.value)}
|
||||
readOnly={!isAll && currentObject?.direction === 'vertical'}
|
||||
/>
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction up ${arrow1 === '↑' ? 'act' : ''} ${!isAll && currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('↑')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction down ${arrow1 === '↓' ? 'act' : ''} ${!isAll && currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('↓')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
<WithDraggable isShow={true} pos={pos} className="xm">
|
||||
<WithDraggable.Header title={getMessage('modal.grid.move')} onClose={() => handleClose()} />
|
||||
<WithDraggable.Body>
|
||||
<div className="grid-option-tit">{getMessage('modal.grid.move.info')}</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="d-check-box pop mb10">
|
||||
<input type="checkbox" id="ch99" checked={isAll} onChange={() => setIsAll(!isAll)} />
|
||||
<label htmlFor="ch99">{getMessage('modal.grid.move.all')}</label>
|
||||
</div>
|
||||
<div className="grid-option-box">
|
||||
<div className="move-form">
|
||||
<p className="mb5">{getMessage('modal.grid.move.length')}</p>
|
||||
<div className="input-move-wrap mb5">
|
||||
<div className="input-move">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin"
|
||||
value={verticalSize}
|
||||
onChange={(e) => setVerticalSize(e.target.value)}
|
||||
readOnly={!isAll && currentObject?.direction === 'vertical'}
|
||||
/>
|
||||
</div>
|
||||
<div className="input-move-wrap">
|
||||
<div className="input-move">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin"
|
||||
value={horizonSize}
|
||||
onChange={(e) => setHorizonSize(e.target.value)}
|
||||
readOnly={!isAll && currentObject?.direction === 'horizontal'}
|
||||
/>
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction left ${arrow2 === '←' ? 'act' : ''} ${!isAll && currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('←')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction right ${arrow2 === '→' ? 'act' : ''} ${!isAll && currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('→')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction up ${arrow1 === '↑' ? 'act' : ''} ${!isAll && currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('↑')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction down ${arrow1 === '↓' ? 'act' : ''} ${!isAll && currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('↓')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-move-wrap">
|
||||
<div className="input-move">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin"
|
||||
value={horizonSize}
|
||||
onChange={(e) => setHorizonSize(e.target.value)}
|
||||
readOnly={!isAll && currentObject?.direction === 'horizontal'}
|
||||
/>
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction left ${arrow2 === '←' ? 'act' : ''} ${!isAll && currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('←')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction right ${arrow2 === '→' ? 'act' : ''} ${!isAll && currentObject?.direction === 'horizontal' ? 'no-click' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('→')
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.grid.move.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.grid.move.save')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -50,51 +50,41 @@ export default function LinePropertySetting(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap r mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('contextmenu.line.property.edit')} </h1>
|
||||
<button className="modal-close" onClick={() => handleClosePopup()}>
|
||||
닫기
|
||||
</button>
|
||||
<WithDraggable isShow={true} pos={pos} className="r">
|
||||
<WithDraggable.Header title={getMessage('contextmenu.line.property.edit')} onClose={() => handleClosePopup()} />
|
||||
<WithDraggable.Body>
|
||||
<div className="guide">
|
||||
<span className="mb10">{getMessage('modal.line.property.edit.info')}</span>
|
||||
<span>
|
||||
{getMessage('modal.line.property.edit.selected')} [ {selectedProperty?.name} ]
|
||||
</span>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="guide">
|
||||
<span className="mb10">{getMessage('modal.line.property.edit.info')}</span>
|
||||
<span>
|
||||
{getMessage('modal.line.property.edit.selected')} [ {selectedProperty?.name} ]
|
||||
</span>
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
<div className="outline-wrap">
|
||||
<div className="radio-grid-wrap">
|
||||
{properties.map((property, index) => {
|
||||
return (
|
||||
<div className="d-check-radio pop" key={index}>
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id={'ra' + (index + 1 >= 10 ? index + 1 : `0${index + 1}`)}
|
||||
onChange={(e) => setSelectedProperty(property)}
|
||||
/>
|
||||
<label htmlFor={'ra' + (index + 1 > 10 ? index + 1 : `0${index + 1}`)}>{property.name}</label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
<div className="outline-wrap">
|
||||
<div className="radio-grid-wrap">
|
||||
{properties.map((property, index) => {
|
||||
return (
|
||||
<div className="d-check-radio pop" key={index}>
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id={'ra' + (index + 1 >= 10 ? index + 1 : `0${index + 1}`)}
|
||||
onChange={(e) => setSelectedProperty(property)}
|
||||
/>
|
||||
<label htmlFor={'ra' + (index + 1 > 10 ? index + 1 : `0${index + 1}`)}>{property.name}</label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={() => changeSurfaceLineProperty(selectedProperty, target)}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={() => changeSurfaceLineProperty(selectedProperty, target)}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -14,38 +14,28 @@ export default function CircuitNumberEdit(props) {
|
||||
closePopup(id)
|
||||
}
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xm mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="grid-option-tit"> {getMessage('modal.module.circuit.number.edit.info')}</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: 'auto' }}>
|
||||
{getMessage('modal.module.circuit.number')}
|
||||
</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" />
|
||||
</div>
|
||||
<WithDraggable isShow={true} pos={pos} className="xm">
|
||||
<WithDraggable.Header title={getMessage('modal.module.circuit.number.edit')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="grid-option-tit"> {getMessage('modal.module.circuit.number.edit.info')}</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="outline-form">
|
||||
<span className="mr10" style={{ width: 'auto' }}>
|
||||
{getMessage('modal.module.circuit.number')}
|
||||
</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -91,75 +91,64 @@ export default function PanelEdit(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xm mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">
|
||||
{getMessage(
|
||||
[PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type)
|
||||
? 'modal.move.setting'
|
||||
: 'modal.copy.setting',
|
||||
)}{' '}
|
||||
</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
<WithDraggable isShow={true} pos={pos} className="xm">
|
||||
<WithDraggable.Header
|
||||
title={getMessage(
|
||||
[PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) ? 'modal.move.setting' : 'modal.copy.setting',
|
||||
)}
|
||||
onClose={() => closePopup(id)}
|
||||
/>
|
||||
<WithDraggable.Body>
|
||||
<div className="grid-option-tit">
|
||||
{getMessage(
|
||||
[PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type)
|
||||
? 'modal.move.setting.info'
|
||||
: 'modal.copy.setting.info',
|
||||
)}
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="grid-option-tit">
|
||||
{getMessage(
|
||||
[PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type)
|
||||
? 'modal.move.setting.info'
|
||||
: 'modal.copy.setting.info',
|
||||
)}
|
||||
</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="grid-input-form">
|
||||
<span className="mr10">{getMessage('margin')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin" defaultValue={0} onKeyUp={(e) => setLength(e.target.value)} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
<div className="grid-direction">
|
||||
<button
|
||||
className={`direction up ${direction === 'up' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setDirection('up')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction down ${direction === 'down' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setDirection('down')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction left ${direction === 'left' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setDirection('left')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction right ${direction === 'right' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setDirection('right')
|
||||
}}
|
||||
></button>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="grid-input-form">
|
||||
<span className="mr10">{getMessage('margin')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin" defaultValue={0} onKeyUp={(e) => setLength(e.target.value)} />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
</div>
|
||||
<div className="grid-direction">
|
||||
<button
|
||||
className={`direction up ${direction === 'up' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setDirection('up')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction down ${direction === 'down' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setDirection('down')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction left ${direction === 'left' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setDirection('left')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction right ${direction === 'right' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setDirection('right')
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -24,91 +24,69 @@ export default function ColumnInsert(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap r mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.panel.column.insert')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="r">
|
||||
<WithDraggable.Header title={getMessage('modal.panel.column.insert')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('modal.panel.column.insert.info')}</div>
|
||||
<div className="additional-wrap">
|
||||
<div className="additional-radio-wrap">
|
||||
<div className="d-check-radio pop">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra01"
|
||||
onChange={handleRadioChange}
|
||||
value={MODULE_INSERT_TYPE.LEFT}
|
||||
checked={selectedType === MODULE_INSERT_TYPE.LEFT}
|
||||
/>
|
||||
<label htmlFor="ra01">{getMessage('modal.panel.column.insert.type.left')}</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra02"
|
||||
onChange={handleRadioChange}
|
||||
value={MODULE_INSERT_TYPE.RIGHT}
|
||||
checked={selectedType === MODULE_INSERT_TYPE.RIGHT}
|
||||
/>
|
||||
<label htmlFor="ra02">{getMessage('modal.panel.column.insert.type.right')}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="additional-img-wrap">
|
||||
{selectedType === MODULE_INSERT_TYPE.LEFT && (
|
||||
<Image src="/static/images/canvas/additional-edit01.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
|
||||
)}
|
||||
{selectedType === MODULE_INSERT_TYPE.RIGHT && (
|
||||
<Image src="/static/images/canvas/additional-edit02.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('legend')}</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="additional-color-wrap">
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color pink"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.select.column')}</span>
|
||||
</div>
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color white"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.insert.column')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('modal.panel.column.insert.info')}</div>
|
||||
<div className="additional-wrap">
|
||||
<div className="additional-radio-wrap">
|
||||
<div className="d-check-radio pop">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra01"
|
||||
onChange={handleRadioChange}
|
||||
value={MODULE_INSERT_TYPE.LEFT}
|
||||
checked={selectedType === MODULE_INSERT_TYPE.LEFT}
|
||||
/>
|
||||
<label htmlFor="ra01">{getMessage('modal.panel.column.insert.type.left')}</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra02"
|
||||
onChange={handleRadioChange}
|
||||
value={MODULE_INSERT_TYPE.RIGHT}
|
||||
checked={selectedType === MODULE_INSERT_TYPE.RIGHT}
|
||||
/>
|
||||
<label htmlFor="ra02">{getMessage('modal.panel.column.insert.type.right')}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="additional-img-wrap">
|
||||
{selectedType === MODULE_INSERT_TYPE.LEFT && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional-edit01.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === MODULE_INSERT_TYPE.RIGHT && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional-edit02.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('legend')}</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="additional-color-wrap">
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color pink"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.select.column')}</span>
|
||||
</div>
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color white"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.insert.column')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -26,98 +26,64 @@ export default function ColumnRemove(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap r mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.panel.column.remove')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('modal.panel.column.remove.info')}</div>
|
||||
<div className="additional-wrap">
|
||||
<div className="additional-radio-wrap">
|
||||
{types.map((type, index) => {
|
||||
return (
|
||||
<div className="d-check-radio pop" key={index}>
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id={`ra0${index + 1}`}
|
||||
onClick={(e) => setSelectedType(e.target.value)}
|
||||
value={type.value}
|
||||
checked={selectedType === type.value}
|
||||
/>
|
||||
<label htmlFor={`ra0${index + 1}`}>{type.name}</label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="additional-img-wrap">
|
||||
{selectedType === MODULE_REMOVE_TYPE.LEFT && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_del01.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === MODULE_REMOVE_TYPE.RIGHT && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_del02.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === MODULE_REMOVE_TYPE.HORIZONTAL_SIDE && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_del03.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === MODULE_REMOVE_TYPE.NONE && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_del04.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<WithDraggable isShow={true} pos={pos} className="r">
|
||||
<WithDraggable.Header title={getMessage('modal.panel.column.remove')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('modal.panel.column.remove.info')}</div>
|
||||
<div className="additional-wrap">
|
||||
<div className="additional-radio-wrap">
|
||||
{types.map((type, index) => {
|
||||
return (
|
||||
<div className="d-check-radio pop" key={index}>
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id={`ra0${index + 1}`}
|
||||
onClick={(e) => setSelectedType(e.target.value)}
|
||||
value={type.value}
|
||||
checked={selectedType === type.value}
|
||||
/>
|
||||
<label htmlFor={`ra0${index + 1}`}>{type.name}</label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="additional-img-wrap">
|
||||
{selectedType === MODULE_REMOVE_TYPE.LEFT && (
|
||||
<Image src="/static/images/canvas/additional_del01.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
|
||||
)}
|
||||
{selectedType === MODULE_REMOVE_TYPE.RIGHT && (
|
||||
<Image src="/static/images/canvas/additional_del02.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
|
||||
)}
|
||||
{selectedType === MODULE_REMOVE_TYPE.HORIZONTAL_SIDE && (
|
||||
<Image src="/static/images/canvas/additional_del03.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
|
||||
)}
|
||||
{selectedType === MODULE_REMOVE_TYPE.NONE && (
|
||||
<Image src="/static/images/canvas/additional_del04.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('legend')}</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="additional-color-wrap">
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color pink"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.select.column')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('legend')}</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="additional-color-wrap">
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color pink"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.select.column')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -24,91 +24,82 @@ export default function RowInsert(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap r mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.row.insert')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="r">
|
||||
<WithDraggable.Header title={getMessage('modal.row.insert')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('modal.row.insert.info')}</div>
|
||||
<div className="additional-wrap">
|
||||
<div className="additional-radio-wrap">
|
||||
<div className="d-check-radio pop">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra01"
|
||||
onChange={HandleRadioChange}
|
||||
value={MODULE_INSERT_TYPE.TOP}
|
||||
checked={selectedType === MODULE_INSERT_TYPE.TOP}
|
||||
/>
|
||||
<label htmlFor="ra01">{getMessage('modal.row.insert.type.up')}</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra02"
|
||||
onChange={HandleRadioChange}
|
||||
value={MODULE_INSERT_TYPE.BOTTOM}
|
||||
checked={selectedType === MODULE_INSERT_TYPE.BOTTOM}
|
||||
/>
|
||||
<label htmlFor="ra02">{getMessage('modal.row.insert.type.down')}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="additional-img-wrap">
|
||||
{selectedType === MODULE_INSERT_TYPE.TOP && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-edit01.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === MODULE_INSERT_TYPE.BOTTOM && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-edit02.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('legend')}</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="additional-color-wrap">
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color pink"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.select.row')}</span>
|
||||
</div>
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color white"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.insert.row')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('modal.row.insert.info')}</div>
|
||||
<div className="additional-wrap">
|
||||
<div className="additional-radio-wrap">
|
||||
<div className="d-check-radio pop">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra01"
|
||||
onChange={HandleRadioChange}
|
||||
value={MODULE_INSERT_TYPE.TOP}
|
||||
checked={selectedType === MODULE_INSERT_TYPE.TOP}
|
||||
/>
|
||||
<label htmlFor="ra01">{getMessage('modal.row.insert.type.up')}</label>
|
||||
</div>
|
||||
<div className="d-check-radio pop">
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id="ra02"
|
||||
onChange={HandleRadioChange}
|
||||
value={MODULE_INSERT_TYPE.BOTTOM}
|
||||
checked={selectedType === MODULE_INSERT_TYPE.BOTTOM}
|
||||
/>
|
||||
<label htmlFor="ra02">{getMessage('modal.row.insert.type.down')}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="additional-img-wrap">
|
||||
{selectedType === MODULE_INSERT_TYPE.TOP && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-edit01.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === MODULE_INSERT_TYPE.BOTTOM && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-edit02.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('legend')}</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="additional-color-wrap">
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color pink"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.select.row')}</span>
|
||||
</div>
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color white"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.insert.row')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -27,98 +27,88 @@ export default function RowRemove(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap r mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.row.remove')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('modal.row.remove.info')}</div>
|
||||
<div className="additional-wrap">
|
||||
<div className="additional-radio-wrap">
|
||||
{types.map((type, index) => {
|
||||
return (
|
||||
<div className="d-check-radio pop" key={index}>
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id={`ra0${index + 1}`}
|
||||
onClick={(e) => setSelectedType(e.target.value)}
|
||||
value={type.value}
|
||||
checked={selectedType === type.value}
|
||||
/>
|
||||
<label htmlFor={`ra0${index + 1}`}>{type.name}</label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="additional-img-wrap">
|
||||
{selectedType === MODULE_REMOVE_TYPE.TOP && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-del01.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === MODULE_REMOVE_TYPE.BOTTOM && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-del02.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === MODULE_REMOVE_TYPE.VERTICAL_SIDE && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-del03.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === MODULE_REMOVE_TYPE.NONE && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-del04.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<WithDraggable isShow={true} pos={pos} className="r">
|
||||
<WithDraggable.Header title={getMessage('modal.row.remove')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('modal.row.remove.info')}</div>
|
||||
<div className="additional-wrap">
|
||||
<div className="additional-radio-wrap">
|
||||
{types.map((type, index) => {
|
||||
return (
|
||||
<div className="d-check-radio pop" key={index}>
|
||||
<input
|
||||
type="radio"
|
||||
name="radio01"
|
||||
id={`ra0${index + 1}`}
|
||||
onClick={(e) => setSelectedType(e.target.value)}
|
||||
value={type.value}
|
||||
checked={selectedType === type.value}
|
||||
/>
|
||||
<label htmlFor={`ra0${index + 1}`}>{type.name}</label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="additional-img-wrap">
|
||||
{selectedType === MODULE_REMOVE_TYPE.TOP && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-del01.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === MODULE_REMOVE_TYPE.BOTTOM && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-del02.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === MODULE_REMOVE_TYPE.VERTICAL_SIDE && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-del03.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
{selectedType === MODULE_REMOVE_TYPE.NONE && (
|
||||
<Image
|
||||
src="/static/images/canvas/additional_bundle-del04.svg"
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{ width: 'auto', height: 'auto' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('legend')}</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="additional-color-wrap">
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color pink"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.select.row')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('legend')}</div>
|
||||
<div className="module-table-box">
|
||||
<div className="module-table-inner">
|
||||
<div className="additional-color-wrap">
|
||||
<div className="additional-color-box">
|
||||
<span className="additional-color pink"></span>
|
||||
<span className="normal-font">{getMessage('modal.panel.select.row')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -16,36 +16,26 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap r`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="r">
|
||||
<WithDraggable.Header title={getMessage('plan.menu.roof.cover.movement.shape.updown')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="modal-btn-wrap">
|
||||
{buttonType.map((item) => (
|
||||
<button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
{type === TYPE.FLOW_LINE && <FlowLine {...flowLineProps} />}
|
||||
{type === TYPE.UP_DOWN && <Updown {...updownProps} />}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="modal-btn-wrap">
|
||||
{buttonType.map((item) => (
|
||||
<button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
{type === TYPE.FLOW_LINE && <FlowLine {...flowLineProps} />}
|
||||
{type === TYPE.UP_DOWN && <Updown {...updownProps} />}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -40,73 +40,63 @@ export default function DormerOffset(props) {
|
||||
// closePopup(id)
|
||||
}
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xm mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{title}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="grid-option-tit">{getMessage('modal.dormer.offset.info')}</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="move-form">
|
||||
<p className="mb5">{getMessage('length')}</p>
|
||||
<div className="input-move-wrap mb5">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" ref={arrow1LengthRef} placeholder="0" />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction up ${arrow1 === 'up' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('up')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction down ${arrow1 === 'down' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('down')
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
<WithDraggable isShow={true} pos={pos} className="xm">
|
||||
<WithDraggable.Header title={title} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="grid-option-tit">{getMessage('modal.dormer.offset.info')}</div>
|
||||
<div className="grid-option-wrap">
|
||||
<div className="grid-option-box">
|
||||
<div className="move-form">
|
||||
<p className="mb5">{getMessage('length')}</p>
|
||||
<div className="input-move-wrap mb5">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" ref={arrow1LengthRef} placeholder="0" />
|
||||
</div>
|
||||
<div className="input-move-wrap">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" ref={arrow2LengthRef} placeholder="0" />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction left ${arrow2 === 'left' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('left')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction right ${arrow2 === 'right' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('right')
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction up ${arrow1 === 'up' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('up')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction down ${arrow1 === 'down' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow1('down')
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="input-move-wrap">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" ref={arrow2LengthRef} placeholder="0" />
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
<button
|
||||
className={`direction left ${arrow2 === 'left' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('left')
|
||||
}}
|
||||
></button>
|
||||
<button
|
||||
className={`direction right ${arrow2 === 'right' ? 'act' : ''}`}
|
||||
onClick={() => {
|
||||
setArrow2('right')
|
||||
}}
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleOffsetDormer}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleOffsetDormer}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -100,43 +100,33 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
]
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap lrr`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="lrr" style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
|
||||
<WithDraggable.Header title={getMessage('plan.menu.placement.surface.object')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="modal-btn-wrap">
|
||||
{buttonMenu.map((item) => (
|
||||
<button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
{buttonAct === 1 && <OpenSpace ref={objectPlacement} />}
|
||||
{buttonAct === 2 && <Shadow ref={objectPlacement} />}
|
||||
{buttonAct === 3 && <TriangleDormer ref={dormerPlacement} />}
|
||||
{buttonAct === 4 && <PentagonDormer ref={dormerPlacement} />}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button
|
||||
className="btn-frame modal act"
|
||||
onClick={() => {
|
||||
applyObject()
|
||||
}}
|
||||
>
|
||||
{getMessage('write')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="modal-btn-wrap">
|
||||
{buttonMenu.map((item) => (
|
||||
<button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
{buttonAct === 1 && <OpenSpace ref={objectPlacement} />}
|
||||
{buttonAct === 2 && <Shadow ref={objectPlacement} />}
|
||||
{buttonAct === 3 && <TriangleDormer ref={dormerPlacement} />}
|
||||
{buttonAct === 4 && <PentagonDormer ref={dormerPlacement} />}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button
|
||||
className="btn-frame modal act"
|
||||
onClick={() => {
|
||||
applyObject()
|
||||
}}
|
||||
>
|
||||
{getMessage('write')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -21,28 +21,18 @@ export default function RoofMaterialSetting(props) {
|
||||
]
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xxxm mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.roof.material.edit')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="slope-wrap">
|
||||
<div className="grid-select">
|
||||
<QSelectBox title={'지붕재 선택'} options={roofMaterials} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
||||
<WithDraggable isShow={true} pos={pos} className="xxxm">
|
||||
<WithDraggable.Header title={getMessage('modal.roof.material.edit')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="slope-wrap">
|
||||
<div className="grid-select">
|
||||
<QSelectBox title={'지붕재 선택'} options={roofMaterials} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -40,60 +40,50 @@ export default function SizeSetting(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap ssm mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.size.setting')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="slope-wrap">
|
||||
<div className="size-option-top">
|
||||
<WithDraggable isShow={true} pos={pos} className="ssm">
|
||||
<WithDraggable.Header title={getMessage('modal.size.setting')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="slope-wrap">
|
||||
<div className="size-option-top">
|
||||
<div className="size-option-wrap">
|
||||
<div className="size-option mb5">
|
||||
<input type="text" className="input-origin mr5" value={target?.width.toFixed(0) * 10} readOnly={true} />
|
||||
<span className="normal-font">mm</span>
|
||||
</div>
|
||||
<div className="size-option">
|
||||
<input type="text" className="input-origin mr5" defaultValue={target?.width.toFixed(0) * 10} ref={widthRef} />
|
||||
<span className="normal-font">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="size-inner-warp">
|
||||
<div className="size-option-side">
|
||||
<div className="size-option-wrap">
|
||||
<div className="size-option mb5">
|
||||
<input type="text" className="input-origin mr5" value={target?.width.toFixed(0) * 10} readOnly={true} />
|
||||
<input type="text" className="input-origin mr5" value={target?.height.toFixed(0) * 10} readOnly={true} />
|
||||
<span className="normal-font">mm</span>
|
||||
</div>
|
||||
<div className="size-option">
|
||||
<input type="text" className="input-origin mr5" defaultValue={target?.width.toFixed(0) * 10} ref={widthRef} />
|
||||
<input type="text" className="input-origin mr5" defaultValue={target?.height.toFixed(0) * 10} ref={heightRef} />
|
||||
<span className="normal-font">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="size-inner-warp">
|
||||
<div className="size-option-side">
|
||||
<div className="size-option-wrap">
|
||||
<div className="size-option mb5">
|
||||
<input type="text" className="input-origin mr5" value={target?.height.toFixed(0) * 10} readOnly={true} />
|
||||
<span className="normal-font">mm</span>
|
||||
</div>
|
||||
<div className="size-option">
|
||||
<input type="text" className="input-origin mr5" defaultValue={target?.height.toFixed(0) * 10} ref={heightRef} />
|
||||
<span className="normal-font">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="size-check-wrap">
|
||||
<button className={`size-btn ${settingTarget === 1 ? 'act' : ''}`} onClick={() => setSettingTarget(1)}></button>
|
||||
<button className={`size-btn ${settingTarget === 2 ? 'act' : ''}`} onClick={() => setSettingTarget(2)}></button>
|
||||
<button className={`size-btn ${settingTarget === 3 ? 'act' : ''}`} onClick={() => setSettingTarget(3)}></button>
|
||||
<button className={`size-btn ${settingTarget === 4 ? 'act' : ''}`} onClick={() => setSettingTarget(4)}></button>
|
||||
<div className="size-box"></div>
|
||||
</div>
|
||||
<div className="size-check-wrap">
|
||||
<button className={`size-btn ${settingTarget === 1 ? 'act' : ''}`} onClick={() => setSettingTarget(1)}></button>
|
||||
<button className={`size-btn ${settingTarget === 2 ? 'act' : ''}`} onClick={() => setSettingTarget(2)}></button>
|
||||
<button className={`size-btn ${settingTarget === 3 ? 'act' : ''}`} onClick={() => setSettingTarget(3)}></button>
|
||||
<button className={`size-btn ${settingTarget === 4 ? 'act' : ''}`} onClick={() => setSettingTarget(4)}></button>
|
||||
<div className="size-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={() => handleReSizeObject(id)}>
|
||||
{getMessage('write')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={() => handleReSizeObject(id)}>
|
||||
{getMessage('write')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -8,40 +8,30 @@ export default function PropertiesSetting(props) {
|
||||
const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(id)
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap ssm`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
|
||||
<button className="modal-close" onClick={() => closeModal(id)}>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="ssm">
|
||||
<WithDraggable.Header title={getMessage('modal.canvas.setting.wallline.properties.setting')} onClose={() => closeModal(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="properties-guide">{getMessage('modal.canvas.setting.wallline.properties.setting.info')}</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
<div className="setting-btn-wrap">
|
||||
<button className="setting-btn green mr5" onClick={handleSetEaves}>
|
||||
{getMessage('modal.canvas.setting.wallline.properties.setting.eaves')}
|
||||
</button>
|
||||
<button className="setting-btn blue" onClick={handleSetGable}>
|
||||
{getMessage('modal.canvas.setting.wallline.properties.setting.edge')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleRollback}>
|
||||
{getMessage('modal.cover.outline.rollback')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={() => handleFix()}>
|
||||
{getMessage('modal.cover.outline.finish')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="properties-guide">{getMessage('modal.canvas.setting.wallline.properties.setting.info')}</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
<div className="setting-btn-wrap">
|
||||
<button className="setting-btn green mr5" onClick={handleSetEaves}>
|
||||
{getMessage('modal.canvas.setting.wallline.properties.setting.eaves')}
|
||||
</button>
|
||||
<button className="setting-btn blue" onClick={handleSetGable}>
|
||||
{getMessage('modal.canvas.setting.wallline.properties.setting.edge')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleRollback}>
|
||||
{getMessage('modal.cover.outline.rollback')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={() => handleFix()}>
|
||||
{getMessage('modal.cover.outline.finish')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -114,24 +114,18 @@ export default function WallLineSetting(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
|
||||
<div className={`modal-pop-wrap r mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="modal-btn-wrap">
|
||||
{/*<button
|
||||
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }} className="r">
|
||||
<WithDraggable.Header title={getMessage('modal.cover.outline.drawing')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="modal-btn-wrap">
|
||||
{/*<button
|
||||
className={`btn-frame modal ${type === OUTER_LINE_TYPE.OUTER_LINE ? 'act' : ''}`}
|
||||
onClick={() => setType(OUTER_LINE_TYPE.OUTER_LINE)}
|
||||
>
|
||||
{getMessage('modal.cover.outline')}
|
||||
</button>*/}
|
||||
|
||||
{/* <button -- 2025-03-11 #838 외벽선 이외에 버튼 숨김처리. 나중에 다시 활성화 할 수 있음.
|
||||
{/* <button -- 2025-03-11 #838 외벽선 이외에 버튼 숨김처리. 나중에 다시 활성화 할 수 있음.
|
||||
className={`btn-frame modal ${type === OUTER_LINE_TYPE.RIGHT_ANGLE ? 'act' : ''}`}
|
||||
onClick={() => setType(OUTER_LINE_TYPE.RIGHT_ANGLE)}
|
||||
>
|
||||
@ -152,41 +146,39 @@ export default function WallLineSetting(props) {
|
||||
>
|
||||
{getMessage('modal.cover.outline.diagonal')}
|
||||
</button>*/}
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
{type === OUTER_LINE_TYPE.OUTER_LINE ? (
|
||||
<OuterLineWall props={outerLineProps} />
|
||||
) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
|
||||
<RightAngle props={rightAngleProps} />
|
||||
) : type === OUTER_LINE_TYPE.DOUBLE_PITCH ? (
|
||||
<DoublePitch props={doublePitchProps} />
|
||||
) : type === OUTER_LINE_TYPE.ANGLE ? (
|
||||
<Angle props={angleProps} />
|
||||
) : type === OUTER_LINE_TYPE.DIAGONAL_LINE ? (
|
||||
<Diagonal props={diagonalLineProps} />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleRollback}>
|
||||
{getMessage('modal.cover.outline.rollback')}
|
||||
</button>
|
||||
<button
|
||||
className="btn-frame modal act"
|
||||
onClick={() => {
|
||||
handleFix()
|
||||
// closePopup(id)
|
||||
|
||||
// setShowPropertiesSettingModal(true)
|
||||
}}
|
||||
>
|
||||
{getMessage('modal.cover.outline.fix')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
{type === OUTER_LINE_TYPE.OUTER_LINE ? (
|
||||
<OuterLineWall props={outerLineProps} />
|
||||
) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
|
||||
<RightAngle props={rightAngleProps} />
|
||||
) : type === OUTER_LINE_TYPE.DOUBLE_PITCH ? (
|
||||
<DoublePitch props={doublePitchProps} />
|
||||
) : type === OUTER_LINE_TYPE.ANGLE ? (
|
||||
<Angle props={angleProps} />
|
||||
) : type === OUTER_LINE_TYPE.DIAGONAL_LINE ? (
|
||||
<Diagonal props={diagonalLineProps} />
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleRollback}>
|
||||
{getMessage('modal.cover.outline.rollback')}
|
||||
</button>
|
||||
<button
|
||||
className="btn-frame modal act"
|
||||
onClick={() => {
|
||||
handleFix()
|
||||
// closePopup(id)
|
||||
|
||||
// setShowPropertiesSettingModal(true)
|
||||
}}
|
||||
>
|
||||
{getMessage('modal.cover.outline.fix')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -11,25 +11,31 @@ import { canvasState } from '@/store/canvasAtom'
|
||||
import { POLYGON_TYPE } from '@/common/common'
|
||||
import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
|
||||
import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
|
||||
import Draggable from 'react-draggable'
|
||||
|
||||
export default function PanelBatchStatistics() {
|
||||
const { getMessage } = useMessage()
|
||||
const [isFold, setIsFold] = useState(false)
|
||||
const [pos, setPos] = useState({
|
||||
x: 0,
|
||||
y: 30,
|
||||
})
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
|
||||
const { setModuleStatisticsData } = useCircuitTrestle(true)
|
||||
const [moduleSelectionDataStore, setModuleSelectionDataStore] = useRecoilState(moduleSelectionDataState)
|
||||
const [position, setPosition] = useState({
|
||||
x: 0,
|
||||
y: 30,
|
||||
})
|
||||
|
||||
const handleOnDrag = (e, data) => {
|
||||
e.stopPropagation()
|
||||
setPosition({ x: data.x, y: data.y })
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (moduleSelectionDataStore && moduleSelectionDataStore.module) setModuleStatisticsData()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} handle=".penal-wrap" pos={pos}>
|
||||
<Draggable position={{ x: position.x, y: position.y }} onDrag={(e, data) => handleOnDrag(e, data)} handle=".penal-wrap">
|
||||
<div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
|
||||
<h2>{getMessage('modal.panel.batch.statistic')}</h2>
|
||||
<button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
|
||||
@ -63,6 +69,6 @@ export default function PanelBatchStatistics() {
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
</Draggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -121,47 +121,33 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
|
||||
setType(button.type)
|
||||
}
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap r`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('plan.menu.placement.surface.drawing')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="r">
|
||||
<WithDraggable.Header title={getMessage('plan.menu.placement.surface.drawing')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="modal-btn-wrap">
|
||||
{types.map((type, idx) => (
|
||||
<button key={`placement-${idx}`} className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`} onClick={() => onClickButton(type)}>
|
||||
{type.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
{buttonAct === 1 && <OuterLineWall props={outerLineProps} />}
|
||||
{buttonAct === 2 && <RightAngle props={rightAngleProps} />}
|
||||
{buttonAct === 3 && <DoublePitch props={doublePitchProps} />}
|
||||
{buttonAct === 4 && <Angle props={angleProps} />}
|
||||
{buttonAct === 5 && <Diagonal props={diagonalLineProps} />}
|
||||
</div>
|
||||
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleRollback}>
|
||||
{getMessage('modal.cover.outline.rollback')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={handleFix}>
|
||||
{getMessage('modal.placement.surface.drawing.fix')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="modal-btn-wrap">
|
||||
{types.map((type, idx) => (
|
||||
<button
|
||||
key={`placement-${idx}`}
|
||||
className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`}
|
||||
onClick={() => onClickButton(type)}
|
||||
>
|
||||
{type.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
{buttonAct === 1 && <OuterLineWall props={outerLineProps} />}
|
||||
{buttonAct === 2 && <RightAngle props={rightAngleProps} />}
|
||||
{buttonAct === 3 && <DoublePitch props={doublePitchProps} />}
|
||||
{buttonAct === 4 && <Angle props={angleProps} />}
|
||||
{buttonAct === 5 && <Diagonal props={diagonalLineProps} />}
|
||||
</div>
|
||||
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleRollback}>
|
||||
{getMessage('modal.cover.outline.rollback')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={handleFix}>
|
||||
{getMessage('modal.placement.surface.drawing.fix')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -257,194 +257,191 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap ll mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="placement-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '151px' }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{getMessage('modal.placement.initial.setting.plan.drawing')}</th>
|
||||
<td>{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<div className="tip-wrap">
|
||||
{getMessage('modal.placement.initial.setting.size')}
|
||||
<button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<div className="pop-form-radio">
|
||||
{currentRoof &&
|
||||
roofSizeSetArray.map((item) => (
|
||||
<div className="d-check-radio pop" key={item.id}>
|
||||
<input
|
||||
type="radio"
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
value={item.value}
|
||||
checked={String(currentRoof?.roofSizeSet) === item.value}
|
||||
onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })}
|
||||
/>
|
||||
<label htmlFor={item.id}>{getMessage(item.message)}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{getMessage('modal.placement.initial.setting.roof.angle.setting')}</th>
|
||||
<td>
|
||||
<div className="pop-form-radio place">
|
||||
{currentRoof &&
|
||||
roofAngleSetArray.map((item, index) => (
|
||||
<div className="outline-form" key={item.id}>
|
||||
<span>
|
||||
<div className="d-check-radio pop">
|
||||
<input
|
||||
type="radio"
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
value={item.value}
|
||||
checked={String(currentRoof?.roofAngleSet) === item.value}
|
||||
onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })}
|
||||
/>
|
||||
<label htmlFor={item.id}>{getMessage(item.message)}</label>
|
||||
</div>
|
||||
</span>
|
||||
<div className="input-grid mr5">
|
||||
<WithDraggable isShow={true} pos={pos} className="ll">
|
||||
<WithDraggable.Header title={getMessage('plan.menu.placement.surface.initial.setting')} />
|
||||
<WithDraggable.Body>
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="placement-table">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style={{ width: '151px' }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{getMessage('modal.placement.initial.setting.plan.drawing')}</th>
|
||||
<td>{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<div className="tip-wrap">
|
||||
{getMessage('modal.placement.initial.setting.size')}
|
||||
<button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<div className="pop-form-radio">
|
||||
{currentRoof &&
|
||||
roofSizeSetArray.map((item) => (
|
||||
<div className="d-check-radio pop" key={item.id}>
|
||||
<input
|
||||
type="radio"
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
value={item.value}
|
||||
checked={String(currentRoof?.roofSizeSet) === item.value}
|
||||
onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })}
|
||||
/>
|
||||
<label htmlFor={item.id}>{getMessage(item.message)}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{getMessage('modal.placement.initial.setting.roof.angle.setting')}</th>
|
||||
<td>
|
||||
<div className="pop-form-radio place">
|
||||
{currentRoof &&
|
||||
roofAngleSetArray.map((item, index) => (
|
||||
<div className="outline-form" key={item.id}>
|
||||
<span>
|
||||
<div className="d-check-radio pop">
|
||||
<input
|
||||
type="number"
|
||||
className="input-origin block"
|
||||
readOnly={currentRoof?.roofAngleSet !== item.value}
|
||||
value={index === 0 ? currentRoof?.pitch : currentRoof?.angle}
|
||||
onChange={(e) =>
|
||||
index === 0
|
||||
? setCurrentRoof({ ...currentRoof, pitch: e.target.value, angle: getDegreeByChon(e.target.value) })
|
||||
: setCurrentRoof({ ...currentRoof, pitch: getChonByDegree(e.target.value), angle: e.target.value })
|
||||
}
|
||||
type="radio"
|
||||
id={item.id}
|
||||
name={item.name}
|
||||
value={item.value}
|
||||
checked={String(currentRoof?.roofAngleSet) === item.value}
|
||||
onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })}
|
||||
/>
|
||||
<label htmlFor={item.id}>{getMessage(item.message)}</label>
|
||||
</div>
|
||||
<span className="thin">{index === 0 ? '寸' : '度'}</span>
|
||||
</span>
|
||||
<div className="input-grid mr5">
|
||||
<input
|
||||
type="number"
|
||||
className="input-origin block"
|
||||
readOnly={currentRoof?.roofAngleSet !== item.value}
|
||||
value={index === 0 ? currentRoof?.pitch : currentRoof?.angle}
|
||||
onChange={(e) =>
|
||||
index === 0
|
||||
? setCurrentRoof({ ...currentRoof, pitch: e.target.value, angle: getDegreeByChon(e.target.value) })
|
||||
: setCurrentRoof({ ...currentRoof, pitch: getChonByDegree(e.target.value), angle: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
<span className="thin">{index === 0 ? '寸' : '度'}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<div className="tip-wrap">
|
||||
{getMessage('modal.placement.initial.setting.roof.material')}
|
||||
<button className="tooltip" onClick={() => setShowMaterialGuidModal(true)}></button>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<div className="placement-option">
|
||||
<div className="grid-select no-flx" style={{ width: '171px' }}>
|
||||
<QSelectBox
|
||||
title={
|
||||
currentRoof?.roofSizeSet === '3'
|
||||
? getMessage('modal.placement.initial.setting.size.none.pitch')
|
||||
: globalLocale === 'ko'
|
||||
? currentRoof?.roofMatlNm
|
||||
: currentRoof?.roofMatlNmJp
|
||||
}
|
||||
options={roofMaterials.map((roof) => {
|
||||
return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
|
||||
})}
|
||||
value={currentRoof?.roofSizeSet === '3' ? null : currentRoof?.roofMatlCd}
|
||||
onChange={(e) => handleRoofTypeChange(e.roofMatlCd)}
|
||||
sourceKey="id"
|
||||
targetKey="id"
|
||||
showKey="name"
|
||||
disabled={currentRoof?.roofSizeSet === '3'}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<div className="tip-wrap">
|
||||
{getMessage('modal.placement.initial.setting.roof.material')}
|
||||
<button className="tooltip" onClick={() => setShowMaterialGuidModal(true)}></button>
|
||||
</div>
|
||||
</th>
|
||||
<td>
|
||||
<div className="placement-option">
|
||||
<div className="grid-select no-flx" style={{ width: '171px' }}>
|
||||
<QSelectBox
|
||||
title={
|
||||
currentRoof?.roofSizeSet === '3'
|
||||
? getMessage('modal.placement.initial.setting.size.none.pitch')
|
||||
: globalLocale === 'ko'
|
||||
? currentRoof?.roofMatlNm
|
||||
: currentRoof?.roofMatlNmJp
|
||||
}
|
||||
options={roofMaterials.map((roof) => {
|
||||
return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
|
||||
})}
|
||||
value={currentRoof?.roofSizeSet === '3' ? null : currentRoof?.roofMatlCd}
|
||||
onChange={(e) => handleRoofTypeChange(e.roofMatlCd)}
|
||||
sourceKey="id"
|
||||
targetKey="id"
|
||||
showKey="name"
|
||||
disabled={currentRoof?.roofSizeSet === '3'}
|
||||
/>
|
||||
{currentRoof && ['R', 'C'].includes(currentRoof.widAuth) && (
|
||||
<div className="flex-ment">
|
||||
<span>W</span>
|
||||
<div className="input-grid" style={{ width: '84px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
name={`width`}
|
||||
ref={roofRef.width}
|
||||
value={parseInt(currentRoof?.width)}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
readOnly={currentRoof?.widAuth === 'R'}
|
||||
disabled={currentRoof?.roofSizeSet === '3'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{currentRoof && ['R', 'C'].includes(currentRoof.widAuth) && (
|
||||
<div className="flex-ment">
|
||||
<span>W</span>
|
||||
<div className="input-grid" style={{ width: '84px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
name={`width`}
|
||||
ref={roofRef.width}
|
||||
value={parseInt(currentRoof?.width)}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
readOnly={currentRoof?.widAuth === 'R'}
|
||||
)}
|
||||
{currentRoof && ['R', 'C'].includes(currentRoof.lenAuth) && (
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="input-grid" style={{ width: '84px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
name={`length`}
|
||||
ref={roofRef.length}
|
||||
value={parseInt(currentRoof?.length)}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
readOnly={currentRoof?.lenAuth === 'R'}
|
||||
disabled={currentRoof?.roofSizeSet === '3'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{currentRoof && ['C', 'R'].includes(currentRoof.raftAuth) && (
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
{raftCodes?.length > 0 && (
|
||||
<div className="select-wrap" style={{ width: '160px' }}>
|
||||
<QSelectBox
|
||||
options={raftCodes}
|
||||
title={
|
||||
raftCodes?.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft))
|
||||
.clCodeNm
|
||||
}
|
||||
value={currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft}
|
||||
onChange={(e) => handleRafterChange(e.clCode)}
|
||||
sourceKey="clCode"
|
||||
targetKey={currentRoof?.raft ? 'raft' : 'raftBaseCd'}
|
||||
showKey="clCodeNm"
|
||||
disabled={currentRoof?.roofSizeSet === '3'}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{currentRoof && ['C', 'R'].includes(currentRoof?.roofPchAuth) && (
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<div className="input-grid" style={{ width: '84px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
name={`hajebichi`}
|
||||
ref={roofRef.hajebichi}
|
||||
value={parseInt(currentRoof?.hajebichi)}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
readOnly={currentRoof?.roofPchAuth === 'R'}
|
||||
disabled={currentRoof?.roofSizeSet === '3'}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{currentRoof && ['R', 'C'].includes(currentRoof.lenAuth) && (
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="input-grid" style={{ width: '84px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
name={`length`}
|
||||
ref={roofRef.length}
|
||||
value={parseInt(currentRoof?.length)}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
readOnly={currentRoof?.lenAuth === 'R'}
|
||||
disabled={currentRoof?.roofSizeSet === '3'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{currentRoof && ['C', 'R'].includes(currentRoof.raftAuth) && (
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
{raftCodes?.length > 0 && (
|
||||
<div className="select-wrap" style={{ width: '160px' }}>
|
||||
<QSelectBox
|
||||
options={raftCodes}
|
||||
title={
|
||||
raftCodes?.find((r) => r.clCode === (currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft))
|
||||
.clCodeNm
|
||||
}
|
||||
value={currentRoof?.raft === undefined ? currentRoof?.raftBaseCd : currentRoof?.raft}
|
||||
onChange={(e) => handleRafterChange(e.clCode)}
|
||||
sourceKey="clCode"
|
||||
targetKey={currentRoof?.raft ? 'raft' : 'raftBaseCd'}
|
||||
showKey="clCodeNm"
|
||||
disabled={currentRoof?.roofSizeSet === '3'}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{currentRoof && ['C', 'R'].includes(currentRoof?.roofPchAuth) && (
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<div className="input-grid" style={{ width: '84px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
name={`hajebichi`}
|
||||
ref={roofRef.hajebichi}
|
||||
value={parseInt(currentRoof?.hajebichi)}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
readOnly={currentRoof?.roofPchAuth === 'R'}
|
||||
disabled={currentRoof?.roofSizeSet === '3'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* {currentRoof && (
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* {currentRoof && (
|
||||
<div className="placement-roof-btn-wrap">
|
||||
<div className="icon-btn-wrap mt10">
|
||||
<button
|
||||
@ -467,21 +464,19 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
|
||||
</div>
|
||||
</div>
|
||||
)} */}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSaveBtn}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />}
|
||||
{showMaterialGuideModal && <MaterialGuide setShowMaterialGuidModal={setShowMaterialGuidModal} />}
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSaveBtn}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
{showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />}
|
||||
{showMaterialGuideModal && <MaterialGuide setShowMaterialGuidModal={setShowMaterialGuidModal} />}
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -41,43 +41,33 @@ export default function PlacementSurfaceLineProperty(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap mount lr`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.canvas.setting.roofline.properties.setting')}</h1>
|
||||
<button className="modal-close" onClick={() => handleClose()}>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="lr">
|
||||
<WithDraggable.Header title={getMessage('modal.canvas.setting.roofline.properties.setting')} onClose={() => handleClose()} />
|
||||
<WithDraggable.Body>
|
||||
<div className="properties-guide">{getMessage('modal.canvas.setting.roofline.properties.setting.info')}</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
<div className="setting-btn-wrap">
|
||||
<button className="setting-btn green mr5" onClick={handleSetEaves}>
|
||||
{getMessage('modal.canvas.setting.wallline.properties.setting.eaves')}
|
||||
</button>
|
||||
<button className="setting-btn blue mr5" onClick={handleSetGable}>
|
||||
{getMessage('modal.canvas.setting.wallline.properties.setting.edge')}
|
||||
</button>
|
||||
<button className="setting-btn gray" onClick={handleSetRidge}>
|
||||
{getMessage('modal.canvas.setting.wallline.properties.setting.ridge')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleRollback}>
|
||||
{getMessage('modal.cover.outline.rollback')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={() => handleFix()}>
|
||||
{getMessage('modal.cover.outline.finish')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="properties-guide">{getMessage('modal.canvas.setting.roofline.properties.setting.info')}</div>
|
||||
<div className="properties-setting-wrap">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
<div className="setting-btn-wrap">
|
||||
<button className="setting-btn green mr5" onClick={handleSetEaves}>
|
||||
{getMessage('modal.canvas.setting.wallline.properties.setting.eaves')}
|
||||
</button>
|
||||
<button className="setting-btn blue mr5" onClick={handleSetGable}>
|
||||
{getMessage('modal.canvas.setting.wallline.properties.setting.edge')}
|
||||
</button>
|
||||
<button className="setting-btn gray" onClick={handleSetRidge}>
|
||||
{getMessage('modal.canvas.setting.wallline.properties.setting.ridge')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleRollback}>
|
||||
{getMessage('modal.cover.outline.rollback')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={() => handleFix()}>
|
||||
{getMessage('modal.cover.outline.finish')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -256,63 +256,49 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap lr-2`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="plane-frame-wrap">
|
||||
<div className="plane-shape-wrap">
|
||||
<div className="plane-shape-menu">
|
||||
{types.map((type) => (
|
||||
<button
|
||||
key={type.id}
|
||||
className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`}
|
||||
onClick={() => setSelectedType(type)}
|
||||
>
|
||||
<div className="shape-box">
|
||||
<Image
|
||||
src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
transform: getInversionState(),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="shape-library">
|
||||
<button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
|
||||
{/* <button className="library-btn ico01" onClick={() => setRotate((rotate + 1) % 4)}></button> */}
|
||||
{/* <button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
|
||||
<button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button> */}
|
||||
<button className="library-btn ico02" onClick={() => handleInversion('y')}></button>
|
||||
<button className="library-btn ico03" onClick={() => handleInversion('x')}></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="plane-detail-wrap">
|
||||
<PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
|
||||
<div className="plane-shape-btn">
|
||||
<button className="btn-frame modal act" onClick={applySurfaces}>
|
||||
{getMessage('write')}
|
||||
<WithDraggable isShow={true} pos={pos} className="lr-2" isHidden={isHidden}>
|
||||
<WithDraggable.Header title={getMessage('plan.menu.placement.surface.arrangement')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="plane-frame-wrap">
|
||||
<div className="plane-shape-wrap">
|
||||
<div className="plane-shape-menu">
|
||||
{types.map((type) => (
|
||||
<button key={type.id} className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`} onClick={() => setSelectedType(type)}>
|
||||
<div className="shape-box">
|
||||
<Image
|
||||
src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
|
||||
alt="react"
|
||||
width={0}
|
||||
height={0}
|
||||
style={{
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
transform: getInversionState(),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="shape-library">
|
||||
<button className="library-btn ico01" onClick={() => setRotate((yInversion !== xInversion ? rotate - 1 : rotate + 1) % 4)}></button>
|
||||
{/* <button className="library-btn ico01" onClick={() => setRotate((rotate + 1) % 4)}></button> */}
|
||||
{/* <button className="library-btn ico02" onClick={() => setYInversion(!yInversion)}></button>
|
||||
<button className="library-btn ico03" onClick={() => setXInversion(!xInversion)}></button> */}
|
||||
<button className="library-btn ico02" onClick={() => handleInversion('y')}></button>
|
||||
<button className="library-btn ico03" onClick={() => handleInversion('x')}></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="plane-detail-wrap">
|
||||
<PlacementSurface {...placementSurfaceProps} ref={surfaceRefs} />
|
||||
<div className="plane-shape-btn">
|
||||
<button className="btn-frame modal act" onClick={applySurfaces}>
|
||||
{getMessage('write')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -61,65 +61,50 @@ export default function ActualSizeSetting(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap ssm mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.actual.size.setting')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
<WithDraggable isShow={true} pos={pos} className="ssm">
|
||||
<WithDraggable.Header title={getMessage('modal.actual.size.setting')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="guide">
|
||||
<span>{getMessage('modal.actual.size.setting.info')}</span>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="guide">
|
||||
<span>{getMessage('modal.actual.size.setting.info')}</span>
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
<div className="outline-wrap">
|
||||
<div className="eaves-keraba-table">
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">{getMessage('modal.actual.size.setting.plane.size.length')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" value={planeSize} readOnly={true} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
<div className="outline-wrap">
|
||||
<div className="eaves-keraba-table">
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">{getMessage('modal.actual.size.setting.plane.size.length')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" value={planeSize} readOnly={true} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">{getMessage('modal.actual.size.setting.actual.size.length')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={actualSize}
|
||||
onChange={(e) => setActualSize(Number(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="eaves-keraba-item">
|
||||
<div className="eaves-keraba-th">{getMessage('modal.actual.size.setting.actual.size.length')}</div>
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" value={actualSize} onChange={(e) => setActualSize(Number(e.target.value))} />
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleFinish}>
|
||||
{getMessage('common.setting.finish')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('apply')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal mr5" onClick={handleFinish}>
|
||||
{getMessage('common.setting.finish')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={handleApply}>
|
||||
{getMessage('apply')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -47,22 +47,13 @@ export default function ContextRoofAllocationSetting(props) {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap lr mount`}>
|
||||
{currentRoofList && (
|
||||
<>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
|
||||
<div className="allocation-select-wrap">
|
||||
{/* <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
|
||||
<WithDraggable isShow={true} pos={pos} className="lr">
|
||||
<WithDraggable.Header title={getMessage('plan.menu.estimate.roof.alloc')} onClose={() => closePopup(id)} />
|
||||
{currentRoofList && (
|
||||
<WithDraggable.Body>
|
||||
<div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
|
||||
<div className="allocation-select-wrap">
|
||||
{/* <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
options={roofMaterials.map((roof) => {
|
||||
@ -78,165 +69,162 @@ export default function ContextRoofAllocationSetting(props) {
|
||||
targetKey={'roofMatlCd'}
|
||||
/>
|
||||
</div> */}
|
||||
<button
|
||||
className="allocation-edit"
|
||||
onClick={() => {
|
||||
onAddRoofMaterial()
|
||||
}}
|
||||
>
|
||||
<i className="edit-ico"></i>
|
||||
{getMessage('modal.roof.alloc.add.roof.material')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid-option-overflow">
|
||||
<div className="grid-option-wrap">
|
||||
{currentRoofList.map((roof, index) => {
|
||||
return (
|
||||
<div className="grid-option-box" key={index}>
|
||||
<div className="d-check-radio pop no-text">
|
||||
<input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
|
||||
<label
|
||||
htmlFor="ra01"
|
||||
onClick={(e) => {
|
||||
handleDefaultRoofMaterial(index)
|
||||
}}
|
||||
></label>
|
||||
<button
|
||||
className="allocation-edit"
|
||||
onClick={() => {
|
||||
onAddRoofMaterial()
|
||||
}}
|
||||
>
|
||||
<i className="edit-ico"></i>
|
||||
{getMessage('modal.roof.alloc.add.roof.material')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid-option-overflow">
|
||||
<div className="grid-option-wrap">
|
||||
{currentRoofList.map((roof, index) => {
|
||||
return (
|
||||
<div className="grid-option-box" key={index}>
|
||||
<div className="d-check-radio pop no-text">
|
||||
<input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
|
||||
<label
|
||||
htmlFor="ra01"
|
||||
onClick={(e) => {
|
||||
handleDefaultRoofMaterial(index)
|
||||
}}
|
||||
></label>
|
||||
</div>
|
||||
<div className="grid-option-block-form">
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
// options={roofMaterials}
|
||||
options={roofMaterials.map((roof2) => {
|
||||
return { ...roof2, name: globalLocale === 'ko' ? roof2.roofMatlNm : roof2.roofMatlNmJp }
|
||||
})}
|
||||
value={roof}
|
||||
//showKey={'roofMatlNm'}
|
||||
showKey="name"
|
||||
sourceKey={'roofMatlCd'}
|
||||
targetKey={'roofMatlCd'}
|
||||
onChange={(e) => handleChangeRoofMaterial(e, index)}
|
||||
/>
|
||||
</div>
|
||||
{index === 0 && <span className="absol dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
|
||||
{index !== 0 && (
|
||||
<span className="absol">
|
||||
<button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid-option-block-form">
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
</div>
|
||||
{roof.raftAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
{raftCodes.length > 0 && (
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
// options={roofMaterials}
|
||||
options={roofMaterials.map((roof2) => {
|
||||
return { ...roof2, name: globalLocale === 'ko' ? roof2.roofMatlNm : roof2.roofMatlNmJp }
|
||||
})}
|
||||
options={raftCodes}
|
||||
value={roof}
|
||||
//showKey={'roofMatlNm'}
|
||||
showKey="name"
|
||||
sourceKey={'roofMatlCd'}
|
||||
targetKey={'roofMatlCd'}
|
||||
onChange={(e) => handleChangeRoofMaterial(e, index)}
|
||||
showKey={'clCodeNm'}
|
||||
sourceKey={'clCode'}
|
||||
targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
|
||||
onChange={(e) => handleChangeRaft(e, index)}
|
||||
/>
|
||||
</div>
|
||||
{index === 0 && <span className="absol dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
|
||||
{index !== 0 && (
|
||||
<span className="absol">
|
||||
<button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{roof.raftAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
{raftCodes.length > 0 && (
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
options={raftCodes}
|
||||
value={roof}
|
||||
showKey={'clCodeNm'}
|
||||
sourceKey={'clCode'}
|
||||
targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
|
||||
onChange={(e) => handleChangeRaft(e, index)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(roof.widAuth || roof.lenAuth) && (
|
||||
<>
|
||||
{roof.widAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>W</span>
|
||||
<div className="input-grid">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
defaultValue={roof.width}
|
||||
readOnly={roof.widAuth === 'R'}
|
||||
onChange={(e) => {
|
||||
handleChangeInput(e, 'width', index)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{roof.lenAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="input-grid">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
defaultValue={roof.length}
|
||||
readOnly={roof.lenAuth === 'R'}
|
||||
onChange={(e) => {
|
||||
handleChangeInput(e, 'length', index)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{roof.roofPchAuth && (
|
||||
{(roof.widAuth || roof.lenAuth) && (
|
||||
<>
|
||||
{roof.widAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<span>W</span>
|
||||
<div className="input-grid">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={parseInt(roof.hajebichi)}
|
||||
readOnly={roof.roofPchAuth === 'R'}
|
||||
onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
|
||||
defaultValue={roof.width}
|
||||
readOnly={roof.widAuth === 'R'}
|
||||
onChange={(e) => {
|
||||
handleChangeInput(e, 'width', index)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.object.setting.offset.slope')}</span>
|
||||
<div className="input-grid">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
onChange={(e) => {
|
||||
// handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
|
||||
handleChangePitch(e, index)
|
||||
}}
|
||||
value={currentAngleType === 'slope' ? roof.pitch : roof.angle}
|
||||
defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
|
||||
/>
|
||||
{roof.lenAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="input-grid">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
defaultValue={roof.length}
|
||||
readOnly={roof.lenAuth === 'R'}
|
||||
onChange={(e) => {
|
||||
handleChangeInput(e, 'length', index)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span className="absol">{pitchText}</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{roof.roofPchAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<div className="input-grid">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={parseInt(roof.hajebichi)}
|
||||
readOnly={roof.roofPchAuth === 'R'}
|
||||
onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.object.setting.offset.slope')}</span>
|
||||
<div className="input-grid">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
onChange={(e) => {
|
||||
// handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
|
||||
handleChangePitch(e, index)
|
||||
}}
|
||||
value={currentAngleType === 'slope' ? roof.pitch : roof.angle}
|
||||
defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
|
||||
/>
|
||||
</div>
|
||||
<span className="absol">{pitchText}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSaveContext}>
|
||||
{getMessage('modal.roof.alloc.apply')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSaveContext}>
|
||||
{getMessage('modal.roof.alloc.apply')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
)}
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -47,22 +47,14 @@ export default function RoofAllocationSetting(props) {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap lr mount`}>
|
||||
<WithDraggable isShow={true} pos={pos} className="lr">
|
||||
<WithDraggable.Header title={getMessage('plan.menu.estimate.roof.alloc')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
{currentRoofList && (
|
||||
<>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
|
||||
<div className="allocation-select-wrap">
|
||||
{/* <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
|
||||
<div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
|
||||
<div className="allocation-select-wrap">
|
||||
{/* <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
options={roofMaterials.map((roof) => {
|
||||
@ -78,146 +70,146 @@ export default function RoofAllocationSetting(props) {
|
||||
targetKey={'roofMatlCd'}
|
||||
/>
|
||||
</div> */}
|
||||
<button
|
||||
className="allocation-edit"
|
||||
onClick={() => {
|
||||
onAddRoofMaterial()
|
||||
}}
|
||||
>
|
||||
<i className="edit-ico"></i>
|
||||
{getMessage('modal.roof.alloc.add.roof.material')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid-option-overflow">
|
||||
<div className="grid-option-wrap">
|
||||
{currentRoofList.map((roof, index) => {
|
||||
return (
|
||||
<div className="grid-option-box" key={index}>
|
||||
<div className="d-check-radio pop no-text">
|
||||
<input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
|
||||
<label
|
||||
htmlFor="ra01"
|
||||
onClick={(e) => {
|
||||
handleDefaultRoofMaterial(index)
|
||||
}}
|
||||
></label>
|
||||
<button
|
||||
className="allocation-edit"
|
||||
onClick={() => {
|
||||
onAddRoofMaterial()
|
||||
}}
|
||||
>
|
||||
<i className="edit-ico"></i>
|
||||
{getMessage('modal.roof.alloc.add.roof.material')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid-option-overflow">
|
||||
<div className="grid-option-wrap">
|
||||
{currentRoofList.map((roof, index) => {
|
||||
return (
|
||||
<div className="grid-option-box" key={index}>
|
||||
<div className="d-check-radio pop no-text">
|
||||
<input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
|
||||
<label
|
||||
htmlFor="ra01"
|
||||
onClick={(e) => {
|
||||
handleDefaultRoofMaterial(index)
|
||||
}}
|
||||
></label>
|
||||
</div>
|
||||
<div className="grid-option-block-form">
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
//options={roofMaterials}
|
||||
options={roofMaterials.map((roof2) => {
|
||||
return { ...roof2, name: globalLocale === 'ko' ? roof2.roofMatlNm : roof2.roofMatlNmJp }
|
||||
})}
|
||||
value={roof}
|
||||
//showKey={'roofMatlNm'}
|
||||
showKey="name"
|
||||
sourceKey={'roofMatlCd'}
|
||||
targetKey={'roofMatlCd'}
|
||||
onChange={(e) => handleChangeRoofMaterial(e, index)}
|
||||
/>
|
||||
</div>
|
||||
{index === 0 && <span className="absol dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
|
||||
{index !== 0 && (
|
||||
<span className="absol">
|
||||
<button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-option-block-form">
|
||||
|
||||
{roof.raftAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
//options={roofMaterials}
|
||||
options={roofMaterials.map((roof2) => {
|
||||
return { ...roof2, name: globalLocale === 'ko' ? roof2.roofMatlNm : roof2.roofMatlNmJp }
|
||||
})}
|
||||
value={roof}
|
||||
//showKey={'roofMatlNm'}
|
||||
showKey="name"
|
||||
sourceKey={'roofMatlCd'}
|
||||
targetKey={'roofMatlCd'}
|
||||
onChange={(e) => handleChangeRoofMaterial(e, index)}
|
||||
/>
|
||||
</div>
|
||||
{index === 0 && <span className="absol dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
|
||||
{index !== 0 && (
|
||||
<span className="absol">
|
||||
<button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>
|
||||
</span>
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
{raftCodes.length > 0 && (
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
options={raftCodes}
|
||||
value={roof}
|
||||
showKey={'clCodeNm'}
|
||||
sourceKey={'clCode'}
|
||||
targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
|
||||
onChange={(e) => handleChangeRaft(e, index)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{roof.raftAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
|
||||
{raftCodes.length > 0 && (
|
||||
<div className="grid-select">
|
||||
<QSelectBox
|
||||
options={raftCodes}
|
||||
value={roof}
|
||||
showKey={'clCodeNm'}
|
||||
sourceKey={'clCode'}
|
||||
targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
|
||||
onChange={(e) => handleChangeRaft(e, index)}
|
||||
{(roof.widAuth || roof.lenAuth) && (
|
||||
<>
|
||||
{roof.widAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>W</span>
|
||||
<div className="input-grid">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
defaultValue={roof.width}
|
||||
onChange={(e) => handleChangeInput(e, 'width', index)}
|
||||
readOnly={roof.widAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(roof.widAuth || roof.lenAuth) && (
|
||||
<>
|
||||
{roof.widAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>W</span>
|
||||
<div className="input-grid">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
defaultValue={roof.width}
|
||||
onChange={(e) => handleChangeInput(e, 'width', index)}
|
||||
readOnly={roof.widAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{roof.lenAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="input-grid">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
defaultValue={roof.length}
|
||||
onChange={(e) => handleChangeInput(e, 'length', index)}
|
||||
readOnly={roof.lenAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{roof.roofPchAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<div className="input-grid">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
|
||||
value={parseInt(roof.hajebichi)}
|
||||
readOnly={roof.roofPchAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
{roof.lenAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>L</span>
|
||||
<div className="input-grid">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
defaultValue={roof.length}
|
||||
onChange={(e) => handleChangeInput(e, 'length', index)}
|
||||
readOnly={roof.lenAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{roof.roofPchAuth && (
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.object.setting.offset.slope')}</span>
|
||||
<span>{getMessage('hajebichi')}</span>
|
||||
<div className="input-grid">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
onChange={(e) => {
|
||||
handleChangePitch(e, index)
|
||||
}}
|
||||
value={currentAngleType === 'slope' ? roof.pitch : roof.angle}
|
||||
defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
|
||||
onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
|
||||
value={parseInt(roof.hajebichi)}
|
||||
readOnly={roof.roofPchAuth === 'R'}
|
||||
/>
|
||||
</div>
|
||||
<span className="absol">{pitchText}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="block-box">
|
||||
)}
|
||||
<div className="block-box">
|
||||
<div className="flex-ment">
|
||||
<span>{getMessage('modal.object.setting.offset.slope')}</span>
|
||||
<div className="input-grid">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
onChange={(e) => {
|
||||
handleChangePitch(e, index)
|
||||
}}
|
||||
value={currentAngleType === 'slope' ? roof.pitch : roof.angle}
|
||||
defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
|
||||
/>
|
||||
</div>
|
||||
<span className="absol">{pitchText}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="block-box">
|
||||
<div className="icon-btn-wrap">
|
||||
<button
|
||||
className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
|
||||
@ -238,22 +230,20 @@ export default function RoofAllocationSetting(props) {
|
||||
</button>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
{getMessage('modal.roof.alloc.apply')}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
{getMessage('modal.roof.alloc.apply')}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -29,48 +29,38 @@ export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 }
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xxm`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
</button>
|
||||
<WithDraggable isShow={true} pos={pos} className="xxm">
|
||||
<WithDraggable.Header title={getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="modal-btn-wrap">
|
||||
{buttons.map((button) => (
|
||||
<button key={button.id} className={`btn-frame modal ${type === button.type ? 'act' : ''}`} onClick={() => setType(button.type)}>
|
||||
{button.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="modal-btn-wrap">
|
||||
{buttons.map((button) => (
|
||||
<button key={button.id} className={`btn-frame modal ${type === button.type ? 'act' : ''}`} onClick={() => setType(button.type)}>
|
||||
{button.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="modal-bottom-border-bx">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
<div className="discrimination-box">
|
||||
{type === TYPES.EAVES && <Eaves {...eavesProps} />}
|
||||
{type === TYPES.GABLE && <Gable {...gableProps} />}
|
||||
{type === TYPES.SHED && <Shed {...shedProps} />}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame sub-tab mr5" onClick={handleRollback}>
|
||||
{getMessage('common.setting.rollback')}
|
||||
</button>
|
||||
<button className="btn-frame sub-tab act" onClick={handleConfirm}>
|
||||
{getMessage('apply')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-bottom-border-bx">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
<div className="discrimination-box">
|
||||
{type === TYPES.EAVES && <Eaves {...eavesProps} />}
|
||||
{type === TYPES.GABLE && <Gable {...gableProps} />}
|
||||
{type === TYPES.SHED && <Shed {...shedProps} />}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={() => handleSave(id)}>
|
||||
{getMessage('common.setting.finish')}
|
||||
<button className="btn-frame sub-tab mr5" onClick={handleRollback}>
|
||||
{getMessage('common.setting.rollback')}
|
||||
</button>
|
||||
<button className="btn-frame sub-tab act" onClick={handleConfirm}>
|
||||
{getMessage('apply')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={() => handleSave(id)}>
|
||||
{getMessage('common.setting.finish')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -88,41 +88,31 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap lr mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.roof.shape.setting')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="lr">
|
||||
<WithDraggable.Header title={getMessage('modal.roof.shape.setting')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="roof-shape-menu">
|
||||
{shapeMenu.map((item) => (
|
||||
<button key={item.id} className={`shape-menu-box ${shapeNum === item.id ? 'act' : ''}`} onClick={() => setShapeNum(item.id)}>
|
||||
<div className="shape-box">
|
||||
<Image src={`/static/images/canvas/shape_menu0${item.id}.svg`} alt="react" width={64} height={64} />
|
||||
</div>
|
||||
<div className="shape-title">{item.name}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
{shapeNum === 1 && <Ridge {...ridgeProps} />}
|
||||
{(shapeNum === 2 || shapeNum === 3) && <Pattern {...patternProps} />}
|
||||
{shapeNum === 4 && <Side {...sideProps} />}
|
||||
{(shapeNum === 5 || shapeNum === 6 || shapeNum === 7 || shapeNum === 8) && <Direction {...directionProps} />}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={() => handleSave(id)}>
|
||||
{getMessage('common.setting.finish')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="roof-shape-menu">
|
||||
{shapeMenu.map((item) => (
|
||||
<button key={item.id} className={`shape-menu-box ${shapeNum === item.id ? 'act' : ''}`} onClick={() => setShapeNum(item.id)}>
|
||||
<div className="shape-box">
|
||||
<Image src={`/static/images/canvas/shape_menu0${item.id}.svg`} alt="react" width={64} height={64} />
|
||||
</div>
|
||||
<div className="shape-title">{item.name}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap">
|
||||
{shapeNum === 1 && <Ridge {...ridgeProps} />}
|
||||
{(shapeNum === 2 || shapeNum === 3) && <Pattern {...patternProps} />}
|
||||
{shapeNum === 4 && <Side {...sideProps} />}
|
||||
{(shapeNum === 5 || shapeNum === 6 || shapeNum === 7 || shapeNum === 8) && <Direction {...directionProps} />}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={() => handleSave(id)}>
|
||||
{getMessage('common.setting.finish')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -72,39 +72,27 @@ export default function SettingModal01(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<WithDraggable isShow={true} pos={{ x: 1275, y: 180 }}>
|
||||
<div className={`modal-pop-wrap sm mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.canvas.setting')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id, true)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="modal-btn-wrap">
|
||||
<button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => handleBtnClick(1)}>
|
||||
{getMessage('modal.canvas.setting.display')}
|
||||
</button>
|
||||
<WithDraggable isShow={true} pos={{ x: 1275, y: 180 }} className="sm">
|
||||
<WithDraggable.Header title={getMessage('modal.canvas.setting')} onClose={() => closePopup(id, true)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="modal-btn-wrap">
|
||||
<button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => handleBtnClick(1)}>
|
||||
{getMessage('modal.canvas.setting.display')}
|
||||
</button>
|
||||
|
||||
<button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => handleBtnClick(2)}>
|
||||
{getMessage('modal.canvas.setting.font.plan')}
|
||||
</button>
|
||||
{canGridOptionSeletorValue && (
|
||||
<button className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} onClick={() => handleBtnClick(3)}>
|
||||
{getMessage('modal.canvas.setting.grid')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{buttonAct === 1 && <FirstOption {...firstProps} />}
|
||||
{buttonAct === 2 && <SecondOption {...secondProps} />}
|
||||
{buttonAct === 3 && <GridOption {...gridProps} />}
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
<button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => handleBtnClick(2)}>
|
||||
{getMessage('modal.canvas.setting.font.plan')}
|
||||
</button>
|
||||
{canGridOptionSeletorValue && (
|
||||
<button className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} onClick={() => handleBtnClick(3)}>
|
||||
{getMessage('modal.canvas.setting.grid')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</WithDraggable>
|
||||
</>
|
||||
{buttonAct === 1 && <FirstOption {...firstProps} />}
|
||||
{buttonAct === 2 && <SecondOption {...secondProps} />}
|
||||
{buttonAct === 3 && <GridOption {...gridProps} />}
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -190,78 +190,68 @@ export default function DimensionLineSetting(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xxxm mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1>
|
||||
<button
|
||||
className="modal-close"
|
||||
onClick={() => {
|
||||
setIsShow(false)
|
||||
closePopups([fontModalId, colorModalId, id])
|
||||
}}
|
||||
>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="xxxm">
|
||||
<WithDraggable.Header
|
||||
title={getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')}
|
||||
onClose={() => {
|
||||
setIsShow(false)
|
||||
closePopups([fontModalId, colorModalId, id])
|
||||
}}
|
||||
/>
|
||||
<WithDraggable.Body>
|
||||
<div className="font-btn-wrap">
|
||||
<button className="btn-frame modal" onClick={() => popupHandle('font')}>
|
||||
{getMessage('modal.font.setting')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="font-btn-wrap">
|
||||
<button className="btn-frame modal" onClick={() => popupHandle('font')}>
|
||||
{getMessage('modal.font.setting')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="line-color-wrap">
|
||||
<div className="outline-form mb10">
|
||||
<span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.font.size')}</span>
|
||||
<div className="grid-select mr5">
|
||||
<QSelectBox options={pixels} value={originPixel} onChange={(e) => setOriginPixel(e)} />
|
||||
</div>
|
||||
<span className="thin">pixel</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.color')}</span>
|
||||
<button className="color-btn" style={{ backgroundColor: originColor }} onClick={() => popupHandle('color')}></button>
|
||||
<div className="line-color-wrap">
|
||||
<div className="outline-form mb10">
|
||||
<span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.font.size')}</span>
|
||||
<div className="grid-select mr5">
|
||||
<QSelectBox options={pixels} value={originPixel} onChange={(e) => setOriginPixel(e)} />
|
||||
</div>
|
||||
<span className="thin">pixel</span>
|
||||
</div>
|
||||
<div className="font-ex-wrap">
|
||||
<div className="font-ex-tit">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.display')}</div>
|
||||
<div className="form-box">
|
||||
<div className="line-form">
|
||||
<div className="line-font-box">
|
||||
<span
|
||||
className="font"
|
||||
style={{
|
||||
fontFamily: originFont?.value ?? '',
|
||||
fontWeight: originFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||
fontStyle: originFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||
fontSize: originFontSize?.value ?? '12px',
|
||||
color: originFontColor?.value ?? 'black',
|
||||
}}
|
||||
>
|
||||
9,999
|
||||
</span>
|
||||
<span
|
||||
className="line"
|
||||
style={{
|
||||
backgroundColor: originColor,
|
||||
borderColor: originColor,
|
||||
height: originPixel.name,
|
||||
}}
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={onSave}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
<div className="outline-form">
|
||||
<span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.color')}</span>
|
||||
<button className="color-btn" style={{ backgroundColor: originColor }} onClick={() => popupHandle('color')}></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
<div className="font-ex-wrap">
|
||||
<div className="font-ex-tit">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.display')}</div>
|
||||
<div className="form-box">
|
||||
<div className="line-form">
|
||||
<div className="line-font-box">
|
||||
<span
|
||||
className="font"
|
||||
style={{
|
||||
fontFamily: originFont?.value ?? '',
|
||||
fontWeight: originFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
|
||||
fontStyle: originFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
|
||||
fontSize: originFontSize?.value ?? '12px',
|
||||
color: originFontColor?.value ?? 'black',
|
||||
}}
|
||||
>
|
||||
9,999
|
||||
</span>
|
||||
<span
|
||||
className="line"
|
||||
style={{
|
||||
backgroundColor: originColor,
|
||||
borderColor: originColor,
|
||||
height: originPixel.name,
|
||||
}}
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={onSave}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -49,65 +49,55 @@ export default function PlanSizeSetting(props) {
|
||||
setPlanSizeSettingMode((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
[name]: Number(value),
|
||||
[name]: Number(value) / 10,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap xsm mount`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</h1>
|
||||
<button
|
||||
className="modal-close"
|
||||
onClick={() => {
|
||||
setIsShow(false)
|
||||
closePopup(id, true)
|
||||
}}
|
||||
>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="xsm">
|
||||
<WithDraggable.Header
|
||||
title={getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}
|
||||
onClose={() => {
|
||||
setIsShow(false)
|
||||
closePopup(id, true)
|
||||
}}
|
||||
/>
|
||||
<WithDraggable.Body>
|
||||
<div className="slope-wrap">
|
||||
<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"
|
||||
name={`originHorizon`}
|
||||
value={planSizeSettingMode.originHorizon * 10}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span style={{ width: 'auto' }}>{getMessage('common.vertical')}</span>
|
||||
<div className="input-grid mr5" style={{ width: '90px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
name={`originVertical`}
|
||||
value={planSizeSettingMode.originVertical * 10}
|
||||
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={onSave}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="slope-wrap">
|
||||
<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"
|
||||
name={`originHorizon`}
|
||||
value={planSizeSettingMode.originHorizon}
|
||||
onChange={(e) => onlyNumberInputChange(e, changeInput)}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
<div className="outline-form">
|
||||
<span style={{ width: 'auto' }}>{getMessage('common.vertical')}</span>
|
||||
<div className="input-grid mr5" style={{ width: '90px' }}>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
name={`originVertical`}
|
||||
value={planSizeSettingMode.originVertical}
|
||||
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={onSave}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -39,37 +39,27 @@ export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={pos}>
|
||||
<div className={`modal-pop-wrap r`}>
|
||||
<div className="modal-head modal-handle">
|
||||
<h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1>
|
||||
<button className="modal-close" onClick={() => closePopup(id)}>
|
||||
닫기
|
||||
<WithDraggable isShow={true} pos={pos} className="r">
|
||||
<WithDraggable.Header title={getMessage('modal.wallline.offset.setting')} onClose={() => closePopup(id)} />
|
||||
<WithDraggable.Body>
|
||||
<div className="modal-btn-wrap">
|
||||
{buttonMenu.map((item) => (
|
||||
<button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
{type === TYPES.WALL_LINE_EDIT && <WallLine ref={wallLineEditRef} {...wallLineProps} />}
|
||||
{type === TYPES.OFFSET && <Offset {...offsetProps} />}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="left-bar modal-handle"></div>
|
||||
<div className="right-bar modal-handle"></div>
|
||||
<div className="modal-btn-wrap">
|
||||
{buttonMenu.map((item) => (
|
||||
<button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="properties-setting-wrap outer">
|
||||
<div className="setting-tit">{getMessage('setting')}</div>
|
||||
{type === TYPES.WALL_LINE_EDIT && <WallLine ref={wallLineEditRef} {...wallLineProps} />}
|
||||
{type === TYPES.OFFSET && <Offset {...offsetProps} />}
|
||||
</div>
|
||||
<div className="grid-btn-wrap">
|
||||
<button className="btn-frame modal act" onClick={handleSave}>
|
||||
{getMessage('modal.common.save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot modal-handle"></div>
|
||||
</div>
|
||||
</WithDraggable.Body>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@ export default function Offset({ length1Ref, arrow1Ref, currentWallLineRef }) {
|
||||
|
||||
const keyDown = (e) => {
|
||||
if (currentWallLineRef.current === null) {
|
||||
alert('보조선을 먼저 선택하세요')
|
||||
// alert('보조선을 먼저 선택하세요')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
@ -199,7 +199,7 @@ export default function MainContents({ setFaqOpen, setFaqModalNoticeNo }) {
|
||||
</div>
|
||||
)}
|
||||
</ProductItem>
|
||||
<ProductItem num={4} name={'Data Download'}>
|
||||
<ProductItem num={4} name={getMessage('main.archive')}>
|
||||
{fileList.length > 0 ? (
|
||||
<div className="data-download-wrap">
|
||||
{fileList?.map((file) => (
|
||||
|
||||
@ -140,6 +140,7 @@ export default function StuffDetail() {
|
||||
headerName: getMessage('stuff.detail.planGridHeader.moduleModel'),
|
||||
flex: 1,
|
||||
wrapText: true,
|
||||
autoHeight: true,
|
||||
cellStyle: { alignItems: 'flex-start' /* 좌측정렬*/, cursor: 'pointer' },
|
||||
cellRenderer: (params) => {
|
||||
let origin = params.value
|
||||
@ -370,6 +371,7 @@ export default function StuffDetail() {
|
||||
swalFire({
|
||||
text: getMessage('stuff.detail.header.notExistObjectNo'),
|
||||
type: 'alert',
|
||||
icon: 'error',
|
||||
confirmFn: () => {
|
||||
router.push('/management/stuff', { scroll: false })
|
||||
},
|
||||
@ -387,6 +389,7 @@ export default function StuffDetail() {
|
||||
swalFire({
|
||||
text: getMessage('stuff.detail.header.notExistObjectNo'),
|
||||
type: 'alert',
|
||||
icon: 'error',
|
||||
confirmFn: () => {
|
||||
router.push('/management/stuff', { scroll: false })
|
||||
},
|
||||
|
||||
@ -33,6 +33,8 @@ export const useCommonCode = () => {
|
||||
clCode: code.clCode,
|
||||
clCodeNm: globalLocale === 'ko' ? code.clCodeNm : code.clCodeJp,
|
||||
clPriority: code.clPriority,
|
||||
clRefChr1: code.clRefChr1,
|
||||
clRefChr2: code.clRefChr2,
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
@ -129,6 +129,7 @@ export const useEstimateController = (planNo, flag) => {
|
||||
delFlg: '0', //삭제 플래그 0 삭제하면 1
|
||||
addFlg: true,
|
||||
paDispOrder: null,
|
||||
dispCableFlg: '0',
|
||||
},
|
||||
],
|
||||
})
|
||||
@ -165,11 +166,6 @@ export const useEstimateController = (planNo, flag) => {
|
||||
|
||||
//견적서 저장
|
||||
const handleEstimateSubmit = async () => {
|
||||
//todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요
|
||||
if (estimateData.estimateType === 'YJSS') {
|
||||
return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' })
|
||||
}
|
||||
|
||||
//0. 필수체크
|
||||
let flag = true
|
||||
let originFileFlg = false
|
||||
@ -298,6 +294,21 @@ export const useEstimateController = (planNo, flag) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (item.salePrice === null) {
|
||||
item.salePrice = '0'
|
||||
} else if (isNaN(item.salePrice)) {
|
||||
item.salePrice = '0'
|
||||
}
|
||||
|
||||
if (item.unitPrice === null) {
|
||||
item.unitPrice = '0'
|
||||
} else if (isNaN(item.unitPrice)) {
|
||||
item.unitPrice = '0'
|
||||
}
|
||||
|
||||
//봄 컴포넌트 제품은 0으로
|
||||
item.openFlg = '0'
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -382,6 +393,7 @@ export const useEstimateController = (planNo, flag) => {
|
||||
|
||||
estimateData.estimateOption = estimateOptions
|
||||
// console.log('최종아이템:::', estimateData.itemList)
|
||||
|
||||
if (fileList?.length > 0) {
|
||||
estimateData.fileList = fileList
|
||||
} else {
|
||||
@ -409,7 +421,7 @@ export const useEstimateController = (planNo, flag) => {
|
||||
})
|
||||
} catch (e) {
|
||||
setIsGlobalLoading(false)
|
||||
console.log('error::::::::::::', e.response.data.message)
|
||||
console.error('error::::::::::::', e.response.data.message)
|
||||
}
|
||||
}
|
||||
|
||||
@ -419,10 +431,6 @@ export const useEstimateController = (planNo, flag) => {
|
||||
* T01관리자 계정 및 1차판매점에게만 제공
|
||||
*/
|
||||
const handleEstimateCopy = async (sendPlanNo, copyReceiveUser, saleStoreId, otherSaleStoreId, setEstimateCopyPopupOpen) => {
|
||||
//todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요
|
||||
if (estimateData.estimateType === 'YJSS') {
|
||||
return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' })
|
||||
}
|
||||
if (saleStoreId === '') {
|
||||
return swalFire({
|
||||
text: getMessage('estimate.detail.productFeaturesPopup.requiredStoreId'),
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { useState } from 'react'
|
||||
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
|
||||
|
||||
import {
|
||||
canvasSettingState,
|
||||
canvasState,
|
||||
@ -8,6 +9,7 @@ import {
|
||||
isManualModuleLayoutSetupState,
|
||||
isManualModuleSetupState,
|
||||
} from '@/store/canvasAtom'
|
||||
|
||||
import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon, toFixedWithoutRounding } from '@/util/canvas-util'
|
||||
import { basicSettingState, roofDisplaySelector } from '@/store/settingAtom'
|
||||
import offsetPolygon, { calculateAngle, createLinesFromPolygon } from '@/util/qpolygon-utils'
|
||||
@ -436,7 +438,6 @@ export function useModuleBasicSetting(tabNum) {
|
||||
if (isManualModuleLayoutSetup) {
|
||||
setIsManualModuleLayoutSetup(false)
|
||||
}
|
||||
|
||||
const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
|
||||
|
||||
if (isManualModuleSetup) {
|
||||
@ -506,20 +507,20 @@ export function useModuleBasicSetting(tabNum) {
|
||||
|
||||
const points = [
|
||||
{
|
||||
x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)),
|
||||
y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)),
|
||||
x: toFixedWithoutRounding(mousePoint.x, 2) + toFixedWithoutRounding(width / 2, 2),
|
||||
y: toFixedWithoutRounding(mousePoint.y, 2) - toFixedWithoutRounding(height / 2, 2),
|
||||
},
|
||||
{
|
||||
x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)),
|
||||
y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)),
|
||||
x: toFixedWithoutRounding(mousePoint.x, 2) + toFixedWithoutRounding(width / 2, 2),
|
||||
y: toFixedWithoutRounding(mousePoint.y, 2) + toFixedWithoutRounding(height / 2, 2),
|
||||
},
|
||||
{
|
||||
x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)),
|
||||
y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)),
|
||||
x: toFixedWithoutRounding(mousePoint.x, 2) - toFixedWithoutRounding(width / 2, 2),
|
||||
y: toFixedWithoutRounding(mousePoint.y, 2) - toFixedWithoutRounding(height / 2, 2),
|
||||
},
|
||||
{
|
||||
x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)),
|
||||
y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)),
|
||||
x: toFixedWithoutRounding(mousePoint.x, 2) - toFixedWithoutRounding(width / 2, 2),
|
||||
y: toFixedWithoutRounding(mousePoint.y, 2) + toFixedWithoutRounding(height / 2, 2),
|
||||
},
|
||||
]
|
||||
|
||||
@ -535,10 +536,10 @@ export function useModuleBasicSetting(tabNum) {
|
||||
fill: 'white',
|
||||
stroke: 'black',
|
||||
strokeWidth: 0.3,
|
||||
width: Number(width.toFixed(1)),
|
||||
height: Number(height.toFixed(1)),
|
||||
left: Number(mousePoint.x.toFixed(1) - Number((width / 2).toFixed(1))),
|
||||
top: Number(mousePoint.y.toFixed(1) - Number((height / 2).toFixed(1))),
|
||||
width: toFixedWithoutRounding(width, 2),
|
||||
height: toFixedWithoutRounding(height, 2),
|
||||
left: toFixedWithoutRounding(mousePoint.x, 2) - toFixedWithoutRounding(width / 2, 2),
|
||||
top: toFixedWithoutRounding(mousePoint.y, 2) - toFixedWithoutRounding(height / 2, 2),
|
||||
selectable: false,
|
||||
lockMovementX: true,
|
||||
lockMovementY: true,
|
||||
@ -571,67 +572,84 @@ export function useModuleBasicSetting(tabNum) {
|
||||
? moduleSetupSurfaces[i].trestleDetail.moduleIntvlVer / 10
|
||||
: moduleSetupSurfaces[i].trestleDetail.moduleIntvlHor / 10
|
||||
|
||||
const trestleLeft = Number(moduleSetupSurfaces[i].left.toFixed(1)) - Number((moduleSetupSurfaces[i].width / 2).toFixed(1))
|
||||
const trestleTop = Number(moduleSetupSurfaces[i].top.toFixed(1)) - Number((moduleSetupSurfaces[i].height / 2).toFixed(1))
|
||||
const trestleRight = Number(moduleSetupSurfaces[i].left.toFixed(1)) + Number((moduleSetupSurfaces[i].width / 2).toFixed(1))
|
||||
const trestleBottom = Number(moduleSetupSurfaces[i].top.toFixed(1)) + Number((moduleSetupSurfaces[i].height / 2).toFixed(1))
|
||||
const trestleLeft = toFixedWithoutRounding(moduleSetupSurfaces[i].left, 2) - toFixedWithoutRounding(moduleSetupSurfaces[i].width / 2, 2)
|
||||
const trestleTop = toFixedWithoutRounding(moduleSetupSurfaces[i].top, 2) - toFixedWithoutRounding(moduleSetupSurfaces[i].height / 2, 2)
|
||||
const trestleRight =
|
||||
toFixedWithoutRounding(moduleSetupSurfaces[i].left, 2) + toFixedWithoutRounding(moduleSetupSurfaces[i].width / 2, 2)
|
||||
const trestleBottom =
|
||||
toFixedWithoutRounding(moduleSetupSurfaces[i].top, 2) + toFixedWithoutRounding(moduleSetupSurfaces[i].height / 2, 2)
|
||||
const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2
|
||||
|
||||
// 이동하는 모듈의 경계 좌표
|
||||
const smallLeft = Number(tempModule.left.toFixed(1))
|
||||
const smallTop = Number(tempModule.top.toFixed(1))
|
||||
const smallRight = smallLeft + Number(tempModule.width.toFixed(1))
|
||||
const smallBottom = smallTop + Number(tempModule.height.toFixed(1))
|
||||
const smallCenterX = smallLeft + Number((tempModule.width / 2).toFixed(1))
|
||||
const smallCenterY = smallTop + Number((tempModule.height / 2).toFixed(1))
|
||||
const smallLeft = toFixedWithoutRounding(tempModule.left, 2)
|
||||
const smallTop = toFixedWithoutRounding(tempModule.top, 2)
|
||||
const smallRight = smallLeft + toFixedWithoutRounding(tempModule.width, 2)
|
||||
const smallBottom = smallTop + toFixedWithoutRounding(tempModule.height, 2)
|
||||
const smallCenterX = smallLeft + toFixedWithoutRounding(tempModule.width / 2, 2)
|
||||
const smallCenterY = smallTop + toFixedWithoutRounding(tempModule.height / 2, 2)
|
||||
|
||||
/**
|
||||
* 미리 깔아놓은 셀이 있을때 셀에 흡착됨
|
||||
*/
|
||||
if (manualDrawModules) {
|
||||
manualDrawModules.forEach((cell) => {
|
||||
const holdCellLeft = cell.left
|
||||
const holdCellTop = cell.top
|
||||
const holdCellRight = holdCellLeft + Number(cell.width.toFixed(1))
|
||||
const holdCellBottom = holdCellTop + Number(cell.height.toFixed(1))
|
||||
const holdCellCenterX = holdCellLeft + Number((cell.width / 2).toFixed(1))
|
||||
const holdCellCenterY = holdCellTop + Number((cell.height / 2).toFixed(1))
|
||||
const holdCellLeft = toFixedWithoutRounding(cell.left, 2)
|
||||
const holdCellTop = toFixedWithoutRounding(cell.top, 2)
|
||||
const holdCellRight = holdCellLeft + toFixedWithoutRounding(cell.width, 2)
|
||||
const holdCellBottom = holdCellTop + toFixedWithoutRounding(cell.height, 2)
|
||||
const holdCellCenterX = holdCellLeft + toFixedWithoutRounding(cell.width / 2, 2)
|
||||
const holdCellCenterY = holdCellTop + toFixedWithoutRounding(cell.height / 2, 2)
|
||||
|
||||
//가운데 -> 가운대
|
||||
if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) {
|
||||
tempModule.left = holdCellCenterX - toFixedWithoutRounding(width / 2, 2)
|
||||
}
|
||||
|
||||
//왼쪽 -> 가운데
|
||||
if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) {
|
||||
// console.log('holdCellCenterX', holdCellCenterX)
|
||||
// console.log('smallLeft', smallLeft)
|
||||
|
||||
// console.log('모듈 센터에 스냅')
|
||||
tempModule.left = holdCellCenterX + intvHor / 2
|
||||
|
||||
// console.log('tempModule.left', tempModule.left)
|
||||
}
|
||||
// 오른쪽 -> 가운데
|
||||
if (Math.abs(smallRight - holdCellCenterX) < snapDistance) {
|
||||
tempModule.left = holdCellCenterX - width - intvHor / 2
|
||||
}
|
||||
|
||||
//설치된 셀에 좌측에 스냅
|
||||
if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
|
||||
// console.log('모듈 좌측 스냅')
|
||||
tempModule.left = holdCellLeft - width - intvHor
|
||||
}
|
||||
|
||||
//설치된 셀에 우측에 스냅
|
||||
if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
|
||||
// console.log('모듈 우측 스냅')
|
||||
tempModule.left = holdCellRight + intvHor
|
||||
}
|
||||
|
||||
//설치된 셀에 위쪽에 스냅
|
||||
if (Math.abs(smallBottom - holdCellTop) < snapDistance) {
|
||||
if (Math.abs(smallBottom - holdCellTop) < 10) {
|
||||
tempModule.top = holdCellTop - height - intvVer
|
||||
}
|
||||
|
||||
//설치된 셀에 밑쪽에 스냅
|
||||
if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
|
||||
if (Math.abs(smallTop - holdCellBottom) < 10) {
|
||||
tempModule.top = holdCellBottom + intvVer
|
||||
}
|
||||
//가운데 -> 가운데
|
||||
if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) {
|
||||
tempModule.left = holdCellCenterX - Number((width / 2).toFixed(1))
|
||||
}
|
||||
//왼쪽 -> 가운데
|
||||
if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) {
|
||||
tempModule.left = holdCellCenterX
|
||||
}
|
||||
// 오른쪽 -> 가운데
|
||||
if (Math.abs(smallRight - holdCellCenterX) < snapDistance) {
|
||||
tempModule.left = holdCellCenterX - width
|
||||
|
||||
//설치된 셀에 윗쪽에 스냅
|
||||
if (Math.abs(smallTop - holdCellTop) < 10) {
|
||||
tempModule.top = holdCellTop
|
||||
}
|
||||
|
||||
//세로 가운데 -> 가운데
|
||||
if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) {
|
||||
tempModule.top = holdCellCenterY - Number((height / 2).toFixed(1))
|
||||
}
|
||||
// if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) {
|
||||
// tempModule.top = holdCellCenterY - toFixedWithoutRounding(height / 2, 1)
|
||||
// }
|
||||
// //위쪽 -> 가운데
|
||||
// if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) {
|
||||
// tempModule.top = holdCellCenterY
|
||||
@ -713,13 +731,19 @@ export function useModuleBasicSetting(tabNum) {
|
||||
if (!inside) return
|
||||
if (tempModule) {
|
||||
const rectPoints = [
|
||||
{ x: Number(tempModule.left.toFixed(1)), y: Number(tempModule.top.toFixed(1)) },
|
||||
{ x: Number(tempModule.left.toFixed(1)) + Number(tempModule.width.toFixed(1)), y: Number(tempModule.top.toFixed(1)) },
|
||||
{ x: toFixedWithoutRounding(tempModule.left, 2), y: toFixedWithoutRounding(tempModule.top, 2) },
|
||||
{
|
||||
x: Number(tempModule.left.toFixed(1)) + Number(tempModule.width.toFixed(1)),
|
||||
y: Number(tempModule.top.toFixed(1)) + Number(tempModule.height.toFixed(1)),
|
||||
x: toFixedWithoutRounding(tempModule.left, 2) + toFixedWithoutRounding(tempModule.width, 2),
|
||||
y: toFixedWithoutRounding(tempModule.top, 2),
|
||||
},
|
||||
{
|
||||
x: toFixedWithoutRounding(tempModule.left, 2) + toFixedWithoutRounding(tempModule.width, 2),
|
||||
y: toFixedWithoutRounding(tempModule.top, 2) + toFixedWithoutRounding(tempModule.height, 2),
|
||||
},
|
||||
{
|
||||
x: toFixedWithoutRounding(tempModule.left, 2),
|
||||
y: toFixedWithoutRounding(tempModule.top, 2) + toFixedWithoutRounding(tempModule.height, 2),
|
||||
},
|
||||
{ x: Number(tempModule.left.toFixed(1)), y: Number(tempModule.top.toFixed(1)) + Number(tempModule.height.toFixed(1)) },
|
||||
]
|
||||
|
||||
tempModule.set({ points: rectPoints })
|
||||
@ -756,11 +780,13 @@ export function useModuleBasicSetting(tabNum) {
|
||||
let manualModule = new QPolygon(tempModule.points, {
|
||||
...moduleOptions,
|
||||
moduleInfo: checkedModule[0],
|
||||
left: Number(tempModule.left.toFixed(1)),
|
||||
top: Number(tempModule.top.toFixed(1)),
|
||||
width: Number(tempModule.width.toFixed(1)),
|
||||
height: Number(tempModule.height.toFixed(1)),
|
||||
left: toFixedWithoutRounding(tempModule.left, 2),
|
||||
top: toFixedWithoutRounding(tempModule.top, 2),
|
||||
width: toFixedWithoutRounding(tempModule.width, 2),
|
||||
height: toFixedWithoutRounding(tempModule.height, 2),
|
||||
toFixed: 2,
|
||||
})
|
||||
|
||||
canvas?.add(manualModule)
|
||||
manualDrawModules.push(manualModule)
|
||||
setModuleStatisticsData()
|
||||
|
||||
@ -619,6 +619,9 @@ export const useTrestle = () => {
|
||||
|
||||
//module Rack 정보를 얻기위한 데이터 가공
|
||||
function moduleTransformData(arr) {
|
||||
//arr의 moduleTpCd를 이용하여 정렬
|
||||
arr = arr.sort((a, b) => a.moduleTpCd.localeCompare(b.moduleTpCd))
|
||||
|
||||
let counts = {}
|
||||
|
||||
arr.forEach((item) => {
|
||||
@ -1649,10 +1652,29 @@ export const useTrestle = () => {
|
||||
}
|
||||
}
|
||||
|
||||
switch (direction) {
|
||||
case 'south': {
|
||||
startPointY -= 5
|
||||
break
|
||||
}
|
||||
case 'east': {
|
||||
startPointX -= 5
|
||||
break
|
||||
}
|
||||
case 'west': {
|
||||
startPointX -= 5
|
||||
break
|
||||
}
|
||||
case 'north': {
|
||||
startPointY -= 5
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const bracket = new fabric.Rect({
|
||||
left: startPointX - 5,
|
||||
top: startPointY - 5,
|
||||
left: startPointX,
|
||||
top: startPointY,
|
||||
fill: 'green',
|
||||
name: TRESTLE_MATERIAL.BRACKET,
|
||||
parentId: module.id,
|
||||
@ -1664,14 +1686,15 @@ export const useTrestle = () => {
|
||||
})
|
||||
canvas.add(bracket)
|
||||
canvas.renderAll()
|
||||
const maxIntvl = Math.max(moduleIntvlHor, moduleIntvlVer)
|
||||
if (direction === 'south') {
|
||||
startPointY -= height - moduleIntvlVer / 10
|
||||
startPointY -= height + maxIntvl / 10
|
||||
} else if (direction === 'north') {
|
||||
startPointY += height + moduleIntvlVer / 10
|
||||
startPointY += height + maxIntvl / 10
|
||||
} else if (direction === 'east') {
|
||||
startPointX -= width - moduleIntvlHor / 10
|
||||
startPointX -= width + maxIntvl / 10
|
||||
} else if (direction === 'west') {
|
||||
startPointX += width + moduleIntvlHor / 10
|
||||
startPointX += width + maxIntvl / 10
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1730,7 +1753,7 @@ export const useTrestle = () => {
|
||||
const { width, height } = { ...module }
|
||||
widthArr.push(width)
|
||||
heightArr.push(height)
|
||||
centerPoints.push({ x, y, width: Math.floor(width), height: Math.floor(height), index, moduleInfo: module.moduleInfo })
|
||||
centerPoints.push({ x, y, width: Math.floor(width), height: Math.floor(height), index, moduleInfo: module.moduleInfo, module })
|
||||
})
|
||||
|
||||
//widthArr 중복 제거 1이상 차이가 나지 않으면 같은 너비로 간주
|
||||
@ -1804,7 +1827,13 @@ export const useTrestle = () => {
|
||||
let rightExposedHalfTopPoints = []
|
||||
|
||||
centerPoints.forEach((centerPoint, index) => {
|
||||
let { x, y, width, height, widthArr, heightArr } = { ...centerPoint }
|
||||
let { x, y, width, height, widthArr, heightArr, module } = { ...centerPoint }
|
||||
|
||||
/* 디버깅용
|
||||
const originFill = module.fill
|
||||
module.set('fill', 'red')
|
||||
canvas.renderAll()*/
|
||||
|
||||
// centerPoints중에 현재 centerPoint와 x값이 같고, y값이 y-height값과 같은 centerPoint가 있는지 확인
|
||||
let bottomCell
|
||||
let bottomLeftPoint
|
||||
@ -1894,7 +1923,12 @@ export const useTrestle = () => {
|
||||
|
||||
break
|
||||
}
|
||||
/**
|
||||
* 디버깅용
|
||||
|
||||
module.set('fill', originFill)
|
||||
canvas.renderAll()
|
||||
*/
|
||||
if (bottomCell) {
|
||||
return
|
||||
}
|
||||
@ -1911,13 +1945,18 @@ export const useTrestle = () => {
|
||||
}
|
||||
} else if (leftBottomCnt + rightBottomCnt === 0) {
|
||||
exposedBottomPoints.push(centerPoint)
|
||||
} else if (leftBottomCnt + rightBottomCnt === 2) {
|
||||
touchDimension++
|
||||
}
|
||||
})
|
||||
// 노출상면 및 접면 체크
|
||||
|
||||
centerPoints.forEach((centerPoint, index) => {
|
||||
let { x, y, width, height, widthArr, heightArr } = { ...centerPoint }
|
||||
|
||||
let { x, y, width, height, widthArr, heightArr, module } = { ...centerPoint }
|
||||
const originFill = module.fill
|
||||
/* 디버깅용
|
||||
module.set('fill', 'blue')
|
||||
canvas.renderAll()*/
|
||||
let topCell
|
||||
let topLeftPoint
|
||||
let topRightPoint
|
||||
@ -1930,7 +1969,8 @@ export const useTrestle = () => {
|
||||
height = height + vertical
|
||||
heightArr.forEach((h) => {
|
||||
if (topCell) return
|
||||
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y + h)) < maxY)
|
||||
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y - h)) < maxY)
|
||||
|
||||
if (leftTopCnt === 0) {
|
||||
topLeftPoint = { x: x - width / 2, y: y - h }
|
||||
leftTopCnt = centerPoints.filter(
|
||||
@ -1949,7 +1989,7 @@ export const useTrestle = () => {
|
||||
height = height + vertical
|
||||
heightArr.forEach((h) => {
|
||||
if (topCell) return
|
||||
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y - h)) < maxY)
|
||||
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y + h)) < maxY)
|
||||
if (leftTopCnt === 0) {
|
||||
topLeftPoint = { x: x + width / 2, y: y + h }
|
||||
leftTopCnt = centerPoints.filter(
|
||||
@ -1968,7 +2008,7 @@ export const useTrestle = () => {
|
||||
width = width + horizontal
|
||||
widthArr.forEach((w) => {
|
||||
if (topCell) return
|
||||
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x + w)) < maxX && Math.abs(centerPoint.y - y) < maxY)
|
||||
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x - w)) < maxX && Math.abs(centerPoint.y - y) < maxY)
|
||||
if (leftTopCnt === 0) {
|
||||
topLeftPoint = { x: x - w, y: y + height / 2 }
|
||||
leftTopCnt = centerPoints.filter(
|
||||
@ -1988,7 +2028,7 @@ export const useTrestle = () => {
|
||||
width = width + horizontal
|
||||
widthArr.forEach((w) => {
|
||||
if (topCell) return
|
||||
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x - w)) < maxX && Math.abs(centerPoint.y - y) < maxY)
|
||||
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x + w)) < maxX && Math.abs(centerPoint.y - y) < maxY)
|
||||
if (leftTopCnt === 0) {
|
||||
topLeftPoint = { x: x + w, y: y - height / 2 }
|
||||
leftTopCnt = centerPoints.filter(
|
||||
@ -2010,6 +2050,13 @@ export const useTrestle = () => {
|
||||
return
|
||||
}
|
||||
|
||||
/**
|
||||
* 디버깅 용
|
||||
|
||||
module.set('fill', originFill)
|
||||
canvas.renderAll()
|
||||
*/
|
||||
|
||||
if (leftTopCnt + rightTopCnt === 2) {
|
||||
touchDimension++
|
||||
return
|
||||
|
||||
@ -612,6 +612,9 @@ export function useCanvasSetting(executeEffect = true) {
|
||||
|
||||
/** 도면크기 설정 */
|
||||
setPlanSizeSettingMode({ ...planSizeSettingMode, originHorizon: res.originHorizon, originVertical: res.originVertical })
|
||||
canvas.setWidth(res.originHorizon)
|
||||
canvas.setHeight(res.originVertical)
|
||||
canvas.renderAll()
|
||||
|
||||
/** 데이터 설정 */
|
||||
setSettingModalFirstOptions({
|
||||
|
||||
@ -22,6 +22,7 @@ import { useSwal } from '@/hooks/useSwal'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import { calculateAngle, isSamePoint } from '@/util/qpolygon-utils'
|
||||
import { POLYGON_TYPE } from '@/common/common'
|
||||
import { useMessage } from '../useMessage'
|
||||
|
||||
// 보조선 작성
|
||||
export function useAuxiliaryDrawing(id, isUseEffect = true) {
|
||||
@ -34,6 +35,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
|
||||
const { swalFire } = useSwal()
|
||||
const { getAdsorptionPoints } = useAdsorptionPoint()
|
||||
const { closePopup } = usePopup()
|
||||
const { getMessage } = useMessage()
|
||||
|
||||
const adsorptionRange = useRecoilValue(adsorptionRangeState)
|
||||
|
||||
@ -411,7 +413,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
|
||||
const length1Value = length1Ref.current.value
|
||||
|
||||
if (diagonalLength <= length1Value) {
|
||||
alert('대각선 길이는 직선 길이보다 길어야 합니다.')
|
||||
// alert('대각선 길이는 직선 길이보다 길어야 합니다.')
|
||||
return
|
||||
}
|
||||
|
||||
@ -832,7 +834,8 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
|
||||
}
|
||||
|
||||
const handleFix = () => {
|
||||
if (!confirm('지붕선 완료하시겠습니까?')) {
|
||||
// if (!confirm('보조선 작성을 완료하시겠습니까?')) {
|
||||
if (!confirm(getMessage('want.to.complete.auxiliary.creation'))) {
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
@ -567,7 +567,7 @@ export function useOuterLineWall(id, propertiesId) {
|
||||
const length1Value = length1Ref.current.value
|
||||
|
||||
if (diagonalLength <= length1Value) {
|
||||
alert('대각선 길이는 직선 길이보다 길어야 합니다.')
|
||||
// alert('대각선 길이는 직선 길이보다 길어야 합니다.')
|
||||
return
|
||||
}
|
||||
|
||||
@ -890,7 +890,7 @@ export function useOuterLineWall(id, propertiesId) {
|
||||
})
|
||||
|
||||
if (isAllRightAngle) {
|
||||
alert('부정확한 다각형입니다.')
|
||||
// alert('부정확한 다각형입니다.')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
@ -446,12 +446,10 @@ export function useRoofAllocationSetting(id) {
|
||||
* 지붕재 변경
|
||||
*/
|
||||
const handleChangeRoofMaterial = (value, index) => {
|
||||
const selectedIndex = roofMaterials.findIndex((roof) => roof.selected)
|
||||
|
||||
const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value.id)
|
||||
const newRoofList = currentRoofList.map((roof, idx) => {
|
||||
if (idx === index) {
|
||||
return { ...selectedRoofMaterial }
|
||||
return { ...selectedRoofMaterial, selected: roof.selected }
|
||||
}
|
||||
return roof
|
||||
})
|
||||
|
||||
@ -192,7 +192,7 @@ export function useWallLineOffsetSetting(id) {
|
||||
|
||||
const handleSave = () => {
|
||||
if (currentWallLineRef.current === null) {
|
||||
alert('보조선을 먼저 선택하세요')
|
||||
// alert('보조선을 먼저 선택하세요')
|
||||
return
|
||||
}
|
||||
switch (type) {
|
||||
|
||||
@ -564,7 +564,7 @@ export function usePlacementShapeDrawing(id) {
|
||||
const length1Value = length1Ref.current.value
|
||||
|
||||
if (diagonalLength <= length1Value) {
|
||||
alert('대각선 길이는 직선 길이보다 길어야 합니다.')
|
||||
// alert('대각선 길이는 직선 길이보다 길어야 합니다.')
|
||||
return
|
||||
}
|
||||
|
||||
@ -886,7 +886,7 @@ export function usePlacementShapeDrawing(id) {
|
||||
})
|
||||
|
||||
if (isAllRightAngle) {
|
||||
alert('부정확한 다각형입니다.')
|
||||
// alert('부정확한 다각형입니다.')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
@ -5,11 +5,11 @@
|
||||
"header.menus.management": "見積書管理画面",
|
||||
"header.menus.management.newStuff": "新規見積登録",
|
||||
"header.menus.management.detail": "物件詳細",
|
||||
"header.menus.management.stuffList": "見積状況",
|
||||
"header.menus.management.stuffList": "物件検索",
|
||||
"header.menus.community": "コミュニティ",
|
||||
"header.menus.community.notice": "お知らせ",
|
||||
"header.menus.community.faq": "FAQ",
|
||||
"header.menus.community.archive": "見積書出力",
|
||||
"header.menus.community.archive": "各種資料ダウンロード",
|
||||
"header.logout": "ログアウト",
|
||||
"header.go": "移動",
|
||||
"header.online.warranty.system": "オンライン保証システム",
|
||||
@ -178,7 +178,7 @@
|
||||
"modal.roof.alloc.select.parallel": "筋配置",
|
||||
"modal.roof.alloc.select.stairs": "千鳥配置",
|
||||
"modal.roof.alloc.apply": "選択した屋根材として割り当て",
|
||||
"plan.menu.estimate.docDown": "見積書出力",
|
||||
"plan.menu.estimate.docDown": "各種資料ダウンロード",
|
||||
"plan.menu.estimate.save": "保存",
|
||||
"plan.menu.estimate.reset": "初期化",
|
||||
"plan.menu.estimate.copy": "見積書のコピー",
|
||||
@ -229,7 +229,7 @@
|
||||
"modal.dormer.offset.info": "移動する距離と方向を入力してください。",
|
||||
"modal.common.save": "保存",
|
||||
"modal.common.add": "追加",
|
||||
"modal.common.prev": "以前",
|
||||
"modal.common.prev": "前に戻る",
|
||||
"modal.common.next": "次",
|
||||
"modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",
|
||||
"modal.canvas.setting.font.plan.edit.word": "文字フォントの変更",
|
||||
@ -557,7 +557,7 @@
|
||||
"board.notice.sub.title": "お知らせ一覧",
|
||||
"board.faq.title": "FAQ",
|
||||
"board.faq.sub.title": "FAQリスト",
|
||||
"board.archive.title": "資料のダウンロード",
|
||||
"board.archive.title": "各種資料ダウンロード",
|
||||
"board.archive.sub.title": "見積書一覧",
|
||||
"board.list.header.rownum": "番号",
|
||||
"board.list.header.title": "タイトル",
|
||||
@ -849,9 +849,10 @@
|
||||
"main.storeName": "販売店名",
|
||||
"main.objectNo": "物件番号",
|
||||
"main.faq": "FAQ",
|
||||
"main.archive": "各種資料ダウンロード",
|
||||
"main.content.objectList.noData1": "登録された商品情報はありません。",
|
||||
"main.content.objectList.noData2": "下のボタンをクリックして商品情報を登録してください。",
|
||||
"main.content.objectList": "最近の更新物件一覧",
|
||||
"main.content.objectList": "直近の見積書一覧",
|
||||
"main.content.notice": "お知らせ",
|
||||
"main.content.download1": "操作マニュアル",
|
||||
"main.content.download2": "屋根の説明書",
|
||||
@ -1032,5 +1033,6 @@
|
||||
"canvas.infomation.text": "数字は [半角] 入力のみ可能です。",
|
||||
"roof.exceed.count": "屋根材は4つまで選択可能です。",
|
||||
"outerLine.property.fix": "外壁線の属性設定 を完了しますか？",
|
||||
"outerLine.property.close": "外壁線の属性設定 を終了しますか？"
|
||||
"outerLine.property.close": "外壁線の属性設定 を終了しますか？",
|
||||
"want.to.complete.auxiliary.creation": "보補助線の作成を完了しますか?"
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
"header.menus.community": "커뮤니티",
|
||||
"header.menus.community.notice": "공지사항",
|
||||
"header.menus.community.faq": "FAQ",
|
||||
"header.menus.community.archive": "문서다운로드",
|
||||
"header.menus.community.archive": "각종 자료 다운로드",
|
||||
"header.logout": "로그아웃",
|
||||
"header.go": "이동",
|
||||
"header.online.warranty.system": "온라인보증시스템",
|
||||
@ -557,7 +557,7 @@
|
||||
"board.notice.sub.title": "공지사항 목록",
|
||||
"board.faq.title": "FAQ",
|
||||
"board.faq.sub.title": "FAQ 목록",
|
||||
"board.archive.title": "자료 다운로드",
|
||||
"board.archive.title": "각종 자료 다운로드",
|
||||
"board.archive.sub.title": "문서 목록",
|
||||
"board.list.header.rownum": "번호",
|
||||
"board.list.header.title": "제목",
|
||||
@ -849,6 +849,7 @@
|
||||
"main.storeName": "판매점명",
|
||||
"main.objectNo": "물건번호",
|
||||
"main.faq": "FAQ",
|
||||
"main.archive": "각종 자료 다운로드",
|
||||
"main.content.objectList.noData1": "등록된 물건정보가 없습니다.",
|
||||
"main.content.objectList.noData2": "아래 버튼을 클릭하여 물건정보를 등록하십시오.",
|
||||
"main.content.objectList": "최근 갱신 물건목록",
|
||||
@ -1032,5 +1033,6 @@
|
||||
"canvas.infomation.text": "숫자는 [반각] 입력만 가능합니다.",
|
||||
"roof.exceed.count": "지붕재는 4개까지 선택 가능합니다.",
|
||||
"outerLine.property.fix": "외벽선 속성 설정을 완료하시겠습니까?",
|
||||
"outerLine.property.close": "외벽선 속성 설정을 종료하시겠습니까?"
|
||||
"outerLine.property.close": "외벽선 속성 설정을 종료하시겠습니까?",
|
||||
"want.to.complete.auxiliary.creation": "보조선 작성을 완료하시겠습니까?"
|
||||
}
|
||||
|
||||
@ -43,7 +43,7 @@ export const fontSizeState = atom({
|
||||
export const canvasSizeState = atom({
|
||||
key: 'canvasSize',
|
||||
default: {
|
||||
vertical: 1000,
|
||||
vertical: 1600,
|
||||
horizontal: 1600,
|
||||
},
|
||||
})
|
||||
|
||||
@ -86,6 +86,7 @@
|
||||
border: 1px solid #E9E9E9;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
|
||||
z-index: 110000;
|
||||
ul{
|
||||
padding: 17px 0;
|
||||
border-bottom: 1px solid #E9E9E9;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -320,7 +320,7 @@ export const drawGabledRoof = (roofId, canvas, textMode) => {
|
||||
const wallLines = canvas?.getObjects().find((object) => object.name === POLYGON_TYPE.WALL && object.attributes.roofId === roof.id).lines
|
||||
const hasNonParallelLines = roofLines.filter((line) => line.x1 !== line.x2 && line.y1 !== line.y2)
|
||||
if (hasNonParallelLines.length > 0) {
|
||||
alert('대각선이 존재합니다.')
|
||||
// alert('대각선이 존재합니다.')
|
||||
return
|
||||
}
|
||||
|
||||
@ -648,7 +648,7 @@ export const drawShedRoof = (roofId, canvas, textMode) => {
|
||||
const roof = canvas?.getObjects().find((object) => object.id === roofId)
|
||||
const hasNonParallelLines = roof.lines.filter((line) => Math.abs(line.x1 - line.x2) > 1 && Math.abs(line.y1 - line.y2) > 1)
|
||||
if (hasNonParallelLines.length > 0) {
|
||||
alert('대각선이 존재합니다.')
|
||||
// alert('대각선이 존재합니다.')
|
||||
return
|
||||
}
|
||||
|
||||
@ -739,7 +739,7 @@ export const drawRidgeRoof = (roofId, canvas, textMode) => {
|
||||
//Math.abs(line.x1 - line.x2) > 1 && Math.abs(line.y1 - line.y2) > 1
|
||||
const hasNonParallelLines = roof.lines.filter((line) => Big(line.x1).minus(Big(line.x2)).gt(1) && Big(line.y1).minus(Big(line.y2)).gt(1))
|
||||
if (hasNonParallelLines.length > 0) {
|
||||
alert('대각선이 존재합니다.')
|
||||
// alert('대각선이 존재ㄴ합니다.')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user