WithDraggable 공통화 작업
This commit is contained in:
김민식
parent
c3a6c121ca
commit
bba5a8d54c
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -3,7 +3,16 @@
|
||||
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 = '',
|
||||
isModal = true,
|
||||
hasFooter = true,
|
||||
isHidden = false,
|
||||
}) {
|
||||
const [position, setPosition] = useState(pos)
|
||||
|
||||
const handleOnDrag = (e, data) => {
|
||||
@ -22,9 +31,52 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 },
|
||||
onDrag={(e, data) => handleOnDrag(e, data)}
|
||||
handle={handle === '' ? '.modal-handle' : handle}
|
||||
>
|
||||
{children}
|
||||
{isModal ? (
|
||||
<div className={`modal-pop-wrap ${className}`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
|
||||
{children}
|
||||
{hasFooter && <WithDraggableFooter />}
|
||||
</div>
|
||||
) : (
|
||||
<>{children}</>
|
||||
)}
|
||||
</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 WithDraggablePanel({ children }) {
|
||||
return <>{children}</>
|
||||
}
|
||||
|
||||
function WithDraggableFooter() {
|
||||
return <div className="modal-foot modal-handle"></div>
|
||||
}
|
||||
|
||||
WithDraggable.Header = WithDraggableHeader
|
||||
WithDraggable.Body = WithDraggableBody
|
||||
WithDraggable.Panel = WithDraggablePanel
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -135,76 +135,66 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
|
||||
}, [isManualModuleSetup, isClosePopup])
|
||||
|
||||
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>
|
||||
<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>
|
||||
<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} />}
|
||||
{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} />
|
||||
{/*배치면 초기설정 - 입력방법: 육지붕*/}
|
||||
{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">
|
||||
{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>
|
||||
)}
|
||||
|
||||
{tabNum === 3 && (
|
||||
<>
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
|
||||
<>
|
||||
<button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
|
||||
{getMessage('modal.module.basic.setting.passivity.placement')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={() => autoModuleSetup(placementRef)}>
|
||||
{getMessage('modal.module.basic.setting.auto.placement')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && (
|
||||
<>
|
||||
<button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
|
||||
{getMessage('modal.module.basic.setting.passivity.placement')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={() => autoFlatroofModuleSetup(placementFlatRef)}>
|
||||
{getMessage('modal.module.basic.setting.auto.placement')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{tabNum === 3 && (
|
||||
<>
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
|
||||
<>
|
||||
<button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
|
||||
{getMessage('modal.module.basic.setting.passivity.placement')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={() => autoModuleSetup(placementRef)}>
|
||||
{getMessage('modal.module.basic.setting.auto.placement')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && (
|
||||
<>
|
||||
<button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
|
||||
{getMessage('modal.module.basic.setting.passivity.placement')}
|
||||
</button>
|
||||
<button className="btn-frame modal act" onClick={() => autoFlatroofModuleSetup(placementFlatRef)}>
|
||||
{getMessage('modal.module.basic.setting.auto.placement')}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -29,40 +29,42 @@ export default function PanelBatchStatistics() {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} handle=".penal-wrap" pos={pos}>
|
||||
<div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
|
||||
<h2>{getMessage('modal.panel.batch.statistic')}</h2>
|
||||
<button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
|
||||
<div className="penal-table-wrap">
|
||||
<table className="penal-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{header.map((item, index) => (
|
||||
<th key={`statistic-hd-${index}`}>{item.name}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row, index) => (
|
||||
<tr key={`statistic-row-${index}`}>
|
||||
{header.map((item, i) => (
|
||||
<td key={`statistic-col-${i}`}>{row[item.prop] ?? 0}</td>
|
||||
<WithDraggable isShow={true} handle=".penal-wrap" pos={pos} isModal={false}>
|
||||
<WithDraggable.Panel>
|
||||
<div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
|
||||
<h2>{getMessage('modal.panel.batch.statistic')}</h2>
|
||||
<button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
|
||||
<div className="penal-table-wrap">
|
||||
<table className="penal-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{header.map((item, index) => (
|
||||
<th key={`statistic-hd-${index}`}>{item.name}</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
<tr>
|
||||
{header.map((header, index) => (
|
||||
<td key={`statistic-ft-${index}`}>
|
||||
{typeof footer[header.prop] === 'number'
|
||||
? footer[header.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 })
|
||||
: footer[header.prop]}
|
||||
</td>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row, index) => (
|
||||
<tr key={`statistic-row-${index}`}>
|
||||
{header.map((item, i) => (
|
||||
<td key={`statistic-col-${i}`}>{row[item.prop] ?? 0}</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<tr>
|
||||
{header.map((header, index) => (
|
||||
<td key={`statistic-ft-${index}`}>
|
||||
{typeof footer[header.prop] === 'number'
|
||||
? footer[header.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 })
|
||||
: footer[header.prop]}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable.Panel>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -55,59 +55,49 @@ export default function PlanSizeSetting(props) {
|
||||
}
|
||||
|
||||
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}
|
||||
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 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>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user