qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WithDraggable 공통화 작업

Browse Source
This commit is contained in:
김민식 2025-03-13 16:12:44 +09:00
parent c3a6c121ca
commit bba5a8d54c
45 changed files with 2305 additions and 2730 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/common/color-picker/ColorPickerModal.jsx
View File

@ -33,54 +33,43 @@ export default function ColorPickerModal(props) {
}, [isShow]) }, [isShow])
return ( return (
<WithDraggable isShow={true} pos={pos ?? ''} handle=".modal-handle"> <WithDraggable isShow={true} pos={pos ?? ''} handle=".modal-handle" className="lr">
<div className={`modal-pop-wrap lr mount`}> <WithDraggable.Header
<div className="modal-head modal-handle"> title={getMessage('modal.color.picker.title')}
<h1 className="title">{getMessage('modal.color.picker.title')}</h1> 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 <button
className="modal-close" className="btn-frame modal act"
onClick={() => { onClick={() => {
if (setIsShow) { if (setColor) setColor(originColor)
setIsShow(false) if (setIsShow) setIsShow(false)
}
console.log(id) //치수선색설정 아닐 때만 바로 저장 실행
if (name !== 'DimensionLineColor')
setSettingsDataSave({
...settingsData,
color: originColor,
})
closePopup(id, isConfig) closePopup(id, isConfig)
}} }}
> >
닫기 {getMessage('modal.common.save')}
</button> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }

56
src/components/common/draggable/WithDraggable.jsx
View File

@ -3,7 +3,16 @@
import { useState } from 'react' import { useState } from 'react'
import Draggable from 'react-draggable' 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 [position, setPosition] = useState(pos)
const handleOnDrag = (e, data) => { 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)} onDrag={(e, data) => handleOnDrag(e, data)}
handle={handle === '' ? '.modal-handle' : handle} handle={handle === '' ? '.modal-handle' : handle}
> >
{children} {isModal ? (
<div className={`modal-pop-wrap ${className}`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
{children}
{hasFooter && <WithDraggableFooter />}
</div>
) : (
<>{children}</>
)}
</Draggable> </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

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

@ -67,111 +67,101 @@ export default function FontSetting(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos} handle=".modal-handle"> <WithDraggable isShow={true} pos={pos} handle=".modal-handle" className="lrr">
<div className={`modal-pop-wrap lrr mount`}> <WithDraggable.Header
<div className="modal-head modal-handle"> title={getMessage('modal.font')}
<h1 className="title">{getMessage('modal.font')}</h1> onClose={() => {
<button if (setIsShow) setIsShow(false)
className="modal-close" closePopup(id, isConfig)
onClick={() => { }}
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> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }

153
src/components/floor-plan/modal/ImgLoad.jsx
View File

@ -76,99 +76,88 @@ export default function ImgLoad() {
}, [currentCanvasPlan]) }, [currentCanvasPlan])
return ( return (
<WithDraggable isShow={floorPlanState.refFileModalOpen} pos={{ x: 1000, y: 200 }}> <WithDraggable isShow={floorPlanState.refFileModalOpen} pos={{ x: 1000, y: 200 }} className="r">
<div className={`modal-pop-wrap r`}> <WithDraggable.Header
<div className="modal-head modal-handle"> title={getMessage('common.input.file')}
<h1 className="title">{getMessage('common.input.file')}</h1> onClose={() => setFloorPlanState({ ...floorPlanState, refFileModalOpen: false })}
<button />
className="modal-close"
onClick={() => { <WithDraggable.Body>
setFloorPlanState({ ...floorPlanState, refFileModalOpen: false }) <div className="img-flex-box">
}} <span className="normal-font mr10">{getMessage('modal.image.load.size.rotate')}</span>
> <label className="toggle-btn">
닫기 <input
</button> type="checkbox"
checked={floorPlanState.toggleRotate}
onChange={(e) => setFloorPlanState({ ...floorPlanState, toggleRotate: e.target.checked })}
/>
<span className="slider"></span>
</label>
</div> </div>
<div className="modal-body"> <div className="img-load-from">
<div className="left-bar modal-handle"></div> <div className="img-load-item">
<div className="right-bar modal-handle"></div> <div className="d-check-radio pop">
<div className="img-flex-box"> <input type="radio" name="radio03" id="ra06" value={'1'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '1'} />
<span className="normal-font mr10">{getMessage('modal.image.load.size.rotate')}</span> <label htmlFor="ra06">{getMessage('common.input.file')}</label>
<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> </div>
<div className="img-load-item"> <div className="img-flex-box">
<div className="d-check-radio pop"> <div className="img-edit-wrap">
<input type="radio" name="radio03" id="ra07" value={'2'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '2'} /> <label className="img-edit-btn" htmlFor="img_file">
<label htmlFor="ra07">{getMessage('common.input.address.load')}</label> <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>
<div className="img-flex-box for-address"> <div className="img-name-wrap">
<input <input
type="text" type="text"
ref={queryRef} className="input-origin al-l"
className="input-origin al-l mr10" value={refImage ? (refImage?.name ?? '') : (currentCanvasPlan?.bgImageName ?? '')}
placeholder={'住所入力'} readOnly
value={mapPositionAddress}
onChange={(e) => setMapPositionAddress(e.target.value)}
/> />
<div className="img-edit-wrap"> {refImage && <button className="img-check" onClick={handleFileDelete}></button>}
<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>
</div> </div>
<div className="grid-btn-wrap"> <div className="img-load-item">
<button className="btn-frame modal act" onClick={handleModal}> <div className="d-check-radio pop">
{getMessage('common.finish')} <input type="radio" name="radio03" id="ra07" value={'2'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '2'} />
</button> <label htmlFor="ra07">{getMessage('common.input.address.load')}</label>
{/* <button className="btn-frame modal act" onClick={() => handleCanvasToPng(2)}></button> */} </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> </div>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <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> </WithDraggable>
) )
} }

58
src/components/floor-plan/modal/Slope.jsx
View File

@ -13,42 +13,32 @@ export default function Slope({ id, pos = { x: 50, y: 230 } }) {
const inputRef = useRef() const inputRef = useRef()
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="xxxm">
<div className={`modal-pop-wrap xxxm`}> <WithDraggable.Header title={getMessage('plan.menu.placement.surface.slope.setting')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('plan.menu.placement.surface.slope.setting')} </h1> <div className="slope-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> <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> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }

66
src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
View File

@ -124,46 +124,36 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
setType(button.type) setType(button.type)
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="r">
<div className={`modal-pop-wrap r`}> <WithDraggable.Header title={getMessage('modal.auxiliary.drawing')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.auxiliary.drawing')}</h1> <div className="modal-btn-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> {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> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }

120
src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx
View File

@ -55,77 +55,67 @@ export default function AuxiliaryEdit(props) {
closePopup(id) closePopup(id)
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="xm">
<div className={`modal-pop-wrap xm mount`}> <WithDraggable.Header title={getMessage(type === 'copy' ? 'modal.auxiliary.copy' : 'modal.auxiliary.move')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage(type === 'copy' ? 'modal.auxiliary.copy' : 'modal.auxiliary.move')} </h1> <div className="grid-option-tit">{getMessage(type === 'copy' ? 'modal.auxiliary.copy.info' : 'modal.auxiliary.move.info')}</div>
<button className="modal-close" onClick={() => closePopup(id)}> <div className="grid-option-wrap">
닫기 <div className="grid-option-box">
</button> <div className="move-form">
</div> <p className="mb5">{getMessage('length')}</p>
<div className="modal-body"> <div className="input-move-wrap mb5">
<div className="left-bar modal-handle"></div> <div className="input-move">
<div className="right-bar modal-handle"></div> <input type="text" className="input-origin" value={verticalSize} onChange={(e) => setVerticalSize(e.target.value)} />
<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>
</div> </div>
<div className="input-move-wrap"> <span>mm</span>
<div className="input-move"> <div className="direction-move-wrap">
<input type="text" className="input-origin" value={horizonSize} onChange={(e) => setHorizonSize(e.target.value)} /> <button
</div> className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
<span>mm</span> onClick={() => {
<div className="direction-move-wrap"> setArrow1('↑')
<button document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
className={`direction left ${arrow2 === '←' ? 'act' : ''}`} }}
onClick={() => { ></button>
setArrow2('←') <button
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' })) className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
}} onClick={() => {
></button> setArrow1('↓')
<button document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
className={`direction right ${arrow2 === '→' ? 'act' : ''}`} }}
onClick={() => { ></button>
setArrow2('→') </div>
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' })) </div>
}} <div className="input-move-wrap">
></button> <div className="input-move">
</div> <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> </div>
</div> </div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={handleSave}>
{getMessage('modal.common.save')}
</button>
</div>
</div> </div>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <button className="btn-frame modal act" onClick={handleSave}>
{getMessage('modal.common.save')}
</button>
</div>
</WithDraggable.Body>
</WithDraggable> </WithDraggable>
) )
} }

100
src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx
View File

@ -111,63 +111,53 @@ export default function AuxiliarySize(props) {
closePopup(id) closePopup(id)
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="xm">
<div className={`modal-pop-wrap xm mount`}> <WithDraggable.Header title={getMessage('modal.auxiliary.size.edit')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.auxiliary.size.edit')} </h1> <div className="discrimination-box mb10">
<button className="modal-close" onClick={() => closePopup(id)}> <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> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }

120
src/components/floor-plan/modal/basic/BasicSetting.jsx
View File

@ -135,76 +135,66 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
}, [isManualModuleSetup, isClosePopup]) }, [isManualModuleSetup, isClosePopup])
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="lx-2">
<div className={`modal-pop-wrap lx-2`}> <WithDraggable.Header title={getMessage('plan.menu.module.circuit.setting.default')} onClose={() => handleClosePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1> <div className="roof-module-tab">
<button className="modal-close" onClick={() => handleClosePopup(id)}> <div className={`module-tab-bx act`}>{getMessage('modal.module.basic.setting.orientation.setting')}</div>
닫기 <span className={`tab-arr ${tabNum !== 1 ? 'act' : ''}`}></span>
</button> <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>
<div className="modal-body"> {tabNum === 1 && <Orientation ref={orientationRef} tabNum={tabNum} setTabNum={setTabNum} />}
<div className="left-bar modal-handle"></div> {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
<div className="right-bar modal-handle"></div> {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Module setTabNum={setTabNum} />}
<div className="roof-module-tab"> {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
<div className={`module-tab-bx act`}>{getMessage('modal.module.basic.setting.orientation.setting')}</div>
<span className={`tab-arr ${tabNum !== 1 ? 'act' : ''}`}></span>
<div className={`module-tab-bx ${tabNum !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
<span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
<div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
</div>
{tabNum === 1 && <Orientation ref={orientationRef} tabNum={tabNum} setTabNum={setTabNum} />}
{/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Module setTabNum={setTabNum} />}
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
{/*배치면 초기설정 - 입력방법: 육지붕*/} {/*배치면 초기설정 - 입력방법: 육지붕*/}
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && <PitchModule setTabNum={setTabNum} />} {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && ( {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 3 && (
<PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} /> <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 === 3 && (
{tabNum !== 1 && ( <>
<button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}> {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && (
{getMessage('modal.module.basic.setting.prev')} <>
</button> <button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
)} {getMessage('modal.module.basic.setting.passivity.placement')}
{/*{tabNum !== 3 && <button className="btn-frame modal act mr5">{getMessage('modal.common.save')}</button>}*/} </button>
{tabNum !== 3 && ( <button className="btn-frame modal act" onClick={() => autoModuleSetup(placementRef)}>
<button className="btn-frame modal" onClick={handleBtnNextStep}> {getMessage('modal.module.basic.setting.auto.placement')}
Next </button>
</button> </>
)} )}
{basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && (
{tabNum === 3 && ( <>
<> <button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
{basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && ( {getMessage('modal.module.basic.setting.passivity.placement')}
<> </button>
<button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}> <button className="btn-frame modal act" onClick={() => autoFlatroofModuleSetup(placementFlatRef)}>
{getMessage('modal.module.basic.setting.passivity.placement')} {getMessage('modal.module.basic.setting.auto.placement')}
</button> </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> </div>
<div className="modal-foot modal-handle"></div> </WithDraggable.Body>
</div>
</WithDraggable> </WithDraggable>
) )
} }

101
src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
View File

@ -612,64 +612,53 @@ export default function CircuitTrestleSetting({ id }) {
} }
return ( return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}> <WithDraggable isShow={true} pos={{ x: 50, y: 230 }} className="l-2">
<div className={`modal-pop-wrap l-2`}> <WithDraggable.Header title={getMessage('modal.circuit.trestle.setting')} onClose={() => handleClose()} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1> <div className="roof-module-tab">
{/* <button className="modal-close" onClick={() => closePopup(id)}> */} <div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
<button className="modal-close" onClick={handleClose}> <span className={`tab-arr ${tabNum === 2 ? 'act' : ''}`}></span>
닫기 <div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>
</button> {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
</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>
</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>
)}
</div> </div>
<div className="modal-foot modal-handle"></div> {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
</div> {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> </WithDraggable>
) )
} }

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

@ -122,95 +122,85 @@ export default function DimensionLineSetting(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="xm">
<div className={`modal-pop-wrap xm mount`}> <WithDraggable.Header title={getMessage('contextmenu.display.edit')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('contextmenu.display.edit')} </h1> <div className="guide">{getMessage('modal.display.edit.info')}</div>
<button className="modal-close" onClick={() => closePopup(id)}> <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> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }

78
src/components/floor-plan/modal/distance/Distance.jsx
View File

@ -16,62 +16,52 @@ export default function Distance(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="xxxm">
<div className={`modal-pop-wrap xxxm`}> <WithDraggable.Header title={getMessage('modal.distance')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.distance')} </h1> <div className="slope-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> <div className="eaves-keraba-table">
닫기 <div className="eaves-keraba-item">
</button> <div className="eaves-keraba-th">{getMessage('modal.distance.dual.point')}</div>
</div> <div className="eaves-keraba-td">
<div className="modal-body"> <div className="outline-form">
<div className="left-bar modal-handle"></div> <div className="input-grid mr5" style={{ width: '98px' }}>
<div className="right-bar modal-handle"></div> <input type="text" className="input-origin block" defaultValue={0} value={distance.diagonal} readOnly />
<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>
<span className="thin">mm</span>
</div> </div>
</div> </div>
<div className="eaves-keraba-item"> </div>
<div className="eaves-keraba-th">{getMessage('modal.distance.horizon')}</div> <div className="eaves-keraba-item">
<div className="eaves-keraba-td"> <div className="eaves-keraba-th">{getMessage('modal.distance.horizon')}</div>
<div className="outline-form"> <div className="eaves-keraba-td">
<div className="input-grid mr5" style={{ width: '98px' }}> <div className="outline-form">
<input type="text" className="input-origin block" defaultValue={0} value={distance.horizon} readOnly /> <div className="input-grid mr5" style={{ width: '98px' }}>
</div> <input type="text" className="input-origin block" defaultValue={0} value={distance.horizon} readOnly />
<span className="thin">mm</span>
</div> </div>
<span className="thin">mm</span>
</div> </div>
</div> </div>
<div className="eaves-keraba-item"> </div>
<div className="eaves-keraba-th">{getMessage('modal.distance.vertical')}</div> <div className="eaves-keraba-item">
<div className="eaves-keraba-td"> <div className="eaves-keraba-th">{getMessage('modal.distance.vertical')}</div>
<div className="outline-form"> <div className="eaves-keraba-td">
<div className="input-grid mr5" style={{ width: '98px' }}> <div className="outline-form">
<input type="text" className="input-origin block" defaultValue={0} value={distance.vertical} readOnly /> <div className="input-grid mr5" style={{ width: '98px' }}>
</div> <input type="text" className="input-origin block" defaultValue={0} value={distance.vertical} readOnly />
<span className="thin">mm</span>
</div> </div>
<span className="thin">mm</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={handleClose}>
{getMessage('common.ok')}
</button>
</div>
</div> </div>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <button className="btn-frame modal act" onClick={handleClose}>
{getMessage('common.ok')}
</button>
</div>
</WithDraggable.Body>
</WithDraggable> </WithDraggable>
) )
} }

42
src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
View File

@ -38,34 +38,24 @@ export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="r">
<div className={`modal-pop-wrap r`}> <WithDraggable.Header title={getMessage('modal.eaves.gable.edit')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1> <div className="modal-btn-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> {buttonMenu.map((item) => (
닫기 <button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}>
</button> {item.name}
</button>
))}
</div> </div>
<div className="modal-body"> <div className="properties-setting-wrap outer">
<div className="left-bar modal-handle"></div> <div className="setting-tit">{getMessage('setting')}</div>
<div className="right-bar modal-handle"></div> {type === TYPES.EAVES && <Eaves {...eavesProps} />}
<div className="modal-btn-wrap"> {type === TYPES.GABLE && <Gable {...gableProps} />}
{buttonMenu.map((item) => ( {type === TYPES.WALL_MERGE && <WallMerge {...wallMergeProps} />}
<button key={item.id} className={`btn-frame modal ${type === item.type ? 'act' : ''}`} onClick={() => setType(item.type)}> {type === TYPES.SHED && <Shed {...shedProps} />}
{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> </div>
<div className="modal-foot modal-handle"></div> </WithDraggable.Body>
</div>
</WithDraggable> </WithDraggable>
) )
} }

204
src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
View File

@ -63,123 +63,113 @@ export default function FlowDirectionSetting(props) {
) )
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="ml">
<div className={`modal-pop-wrap ml mount`}> <WithDraggable.Header title={getMessage('modal.shape.flow.direction.setting')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1> <div className="drawing-flow-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> <div className="discrimination-box">
닫기 <div className="discrimination-tit mb15">{getMessage('modal.flow.direction.setting')}</div>
</button> <div className="guide">{getMessage('modal.flow.direction.setting.info')}</div>
</div> <div className="object-direction-wrap">
<div className="modal-body"> <div className="plane-direction">
<div className="left-bar modal-handle"></div> <span className="top">{getMessage('commons.north')}</span>
<div className="right-bar modal-handle"></div> <button className={`plane-btn up ${flowDirection === 'north' ? 'act' : ''}`} onClick={() => setFlowDirection('north')}></button>
<div className="drawing-flow-wrap"> <span className="right">{getMessage('commons.east')}</span>
<div className="discrimination-box"> <button className={`plane-btn right ${flowDirection === 'east' ? 'act' : ''}`} onClick={() => setFlowDirection('east')}></button>
<div className="discrimination-tit mb15">{getMessage('modal.flow.direction.setting')}</div> <span className="bottom">{getMessage('commons.south')}</span>
<div className="guide">{getMessage('modal.flow.direction.setting.info')}</div> <button className={`plane-btn down ${flowDirection === 'south' ? 'act' : ''}`} onClick={() => setFlowDirection('south')}></button>
<div className="object-direction-wrap"> <span className="left">{getMessage('commons.west')}</span>
<div className="plane-direction"> <button className={`plane-btn left ${flowDirection === 'west' ? 'act' : ''}`} onClick={() => setFlowDirection('west')}></button>
<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>
</div> </div>
<div className="discrimination-box"> </div>
<div className="discrimination-tit mb15">{getMessage('modal.module.basic.setting.orientation.setting')}</div> <div className="discrimination-box">
<div className="guide">{getMessage('modal.shape.flow.direction.setting.orientation.setting.info')}</div> <div className="discrimination-tit mb15">{getMessage('modal.module.basic.setting.orientation.setting')}</div>
<div className="mb-box"> <div className="guide">{getMessage('modal.shape.flow.direction.setting.orientation.setting.info')}</div>
<div className="d-check-radio pop mb15"> <div className="mb-box">
<input <div className="d-check-radio pop mb15">
type="radio" <input
name="radio01" type="radio"
id="ra01" name="radio01"
checked={type === FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH} id="ra01"
onChange={(e) => { checked={type === FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH}
setCompasDeg(0) onChange={(e) => {
setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH) setCompasDeg(0)
}} setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
/> }}
<label htmlFor="ra01">{getMessage('modal.shape.flow.direction.setting.orientation.8')}</label> />
</div> <label htmlFor="ra01">{getMessage('modal.shape.flow.direction.setting.orientation.8')}</label>
<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>
<div className="mb-box"> <div className="grid-select ">
<div className="d-check-radio pop"> <QSelectBox
<input value={selectedOrientation}
type="radio" options={orientations}
name="radio01" onChange={(e) => {
id="ra02" setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
value={1} setSelectedOrientation(e)
checked={type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH} setCompasDeg(e.value)
onChange={(e) => { }}
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH) showKey={'name'}
}} targetKey={'value'}
/> sourceKey={'value'}
<label htmlFor="ra02">{getMessage('modal.shape.flow.direction.setting.orientation.24')}</label> />
</div>
</div> </div>
<div className="draw-flow-wrap"> </div>
<div className="compas-box"> <div className="mb-box">
<div className="compas-box-inner"> <div className="d-check-radio pop">
{Array.from({ length: 180 / 15 + 1 }).map((dot, index) => ( <input
<div type="radio"
key={index} name="radio01"
className={`circle ${compasDeg === 15 * (12 + index) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`} id="ra02"
onClick={() => { value={1}
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH) checked={type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH}
setCompasDeg(15 * (12 + index)) onChange={(e) => {
}} setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
></div> }}
))} />
{Array.from({ length: 180 / 15 - 1 }).map((dot, index) => ( <label htmlFor="ra02">{getMessage('modal.shape.flow.direction.setting.orientation.24')}</label>
<div </div>
key={index} </div>
className={`circle ${compasDeg === 15 * (index + 1) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`} <div className="draw-flow-wrap">
onClick={() => { <div className="compas-box">
setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH) <div className="compas-box-inner">
setCompasDeg(15 * (index + 1)) {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
}} <div
></div> key={index}
))} className={`circle ${compasDeg === 15 * (12 + index) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
<div className="compas"> onClick={() => {
<div setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
className="compas-arr" setCompasDeg(15 * (12 + index))
style={{ transform: `${type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH && `rotate(${compasDeg}deg)`}` }} }}
></div> ></div>
</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>
</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>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <button className="btn-frame modal act" onClick={() => changeSurfaceFlowDirection(target, flowDirection, compasDeg)}>
{getMessage('modal.common.save')}
</button>
</div>
</WithDraggable.Body>
</WithDraggable> </WithDraggable>
) )
} }

224
src/components/floor-plan/modal/grid/DotLineGrid.jsx
View File

@ -177,125 +177,115 @@ export default function DotLineGrid(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="ssm">
<div className={`modal-pop-wrap ssm mount`}> <WithDraggable.Header
<div className="modal-head modal-handle"> title={getMessage('modal.canvas.setting.grid.dot.line.setting')}
<h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1> onClose={() => {
<button setIsShow(false)
className="modal-close" closePopup(id, isConfig)
onClick={() => { }}
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> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }

104
src/components/floor-plan/modal/grid/GridCopy.jsx
View File

@ -20,67 +20,57 @@ export default function GridCopy(props) {
copy(currentObject, ['↑', '←'].includes(arrow) ? +length * -1 : +length) copy(currentObject, ['↑', '←'].includes(arrow) ? +length * -1 : +length)
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="xm">
<div className={`modal-pop-wrap xm mount`}> <WithDraggable.Header title={getMessage('modal.grid.copy')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.grid.copy')} </h1> <div className="grid-option-tit">{getMessage('modal.grid.copy.info')}</div>
<button className="modal-close" onClick={() => closePopup(id)}> <div className="grid-option-wrap">
닫기 <div className="grid-option-box">
</button> <div className="grid-input-form">
</div> <span className="mr10">{getMessage('modal.grid.copy.length')}</span>
<div className="modal-body"> <div className="input-grid mr5">
<div className="left-bar modal-handle"></div> <input type="text" className="input-origin" value={length} onChange={(e) => setLength(e.target.value)} />
<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>
</div> </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> </div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={handleApply}>
{getMessage('modal.grid.copy.save')}
</button>
</div>
</div> </div>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <button className="btn-frame modal act" onClick={handleApply}>
{getMessage('modal.grid.copy.save')}
</button>
</div>
</WithDraggable.Body>
</WithDraggable> </WithDraggable>
) )
} }

152
src/components/floor-plan/modal/grid/GridMove.jsx
View File

@ -73,93 +73,83 @@ export default function GridMove(props) {
closePopup(id) closePopup(id)
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="xm">
<div className={`modal-pop-wrap xm mount`}> <WithDraggable.Header title={getMessage('modal.grid.move')} onClose={() => handleClose()} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.grid.move')} </h1> <div className="grid-option-tit">{getMessage('modal.grid.move.info')}</div>
<button className="modal-close" onClick={handleClose}> <div className="grid-option-wrap">
닫기 <div className="d-check-box pop mb10">
</button> <input type="checkbox" id="ch99" checked={isAll} onChange={() => setIsAll(!isAll)} />
</div> <label htmlFor="ch99">{getMessage('modal.grid.move.all')}</label>
<div className="modal-body"> </div>
<div className="left-bar modal-handle"></div> <div className="grid-option-box">
<div className="right-bar modal-handle"></div> <div className="move-form">
<div className="grid-option-tit">{getMessage('modal.grid.move.info')}</div> <p className="mb5">{getMessage('modal.grid.move.length')}</p>
<div className="grid-option-wrap"> <div className="input-move-wrap mb5">
<div className="d-check-box pop mb10"> <div className="input-move">
<input type="checkbox" id="ch99" checked={isAll} onChange={() => setIsAll(!isAll)} /> <input
<label htmlFor="ch99">{getMessage('modal.grid.move.all')}</label> type="text"
</div> className="input-origin"
<div className="grid-option-box"> value={verticalSize}
<div className="move-form"> onChange={(e) => setVerticalSize(e.target.value)}
<p className="mb5">{getMessage('modal.grid.move.length')}</p> readOnly={!isAll && currentObject?.direction === 'vertical'}
<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>
</div> </div>
<div className="input-move-wrap"> <span>mm</span>
<div className="input-move"> <div className="direction-move-wrap">
<input <button
type="text" className={`direction up ${arrow1 === '↑' ? 'act' : ''} ${!isAll && currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
className="input-origin" onClick={() => {
value={horizonSize} setArrow1('↑')
onChange={(e) => setHorizonSize(e.target.value)} document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
readOnly={!isAll && currentObject?.direction === 'horizontal'} }}
/> ></button>
</div> <button
<span>mm</span> className={`direction down ${arrow1 === '↓' ? 'act' : ''} ${!isAll && currentObject?.direction === 'vertical' ? 'no-click' : ''}`}
<div className="direction-move-wrap"> onClick={() => {
<button setArrow1('↓')
className={`direction left ${arrow2 === '←' ? 'act' : ''} ${!isAll && currentObject?.direction === 'horizontal' ? 'no-click' : ''}`} document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
onClick={() => { }}
setArrow2('←') ></button>
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' })) </div>
}} </div>
></button> <div className="input-move-wrap">
<button <div className="input-move">
className={`direction right ${arrow2 === '→' ? 'act' : ''} ${!isAll && currentObject?.direction === 'horizontal' ? 'no-click' : ''}`} <input
onClick={() => { type="text"
setArrow2('→') className="input-origin"
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' })) value={horizonSize}
}} onChange={(e) => setHorizonSize(e.target.value)}
></button> readOnly={!isAll && currentObject?.direction === 'horizontal'}
</div> />
</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> </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>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <button className="btn-frame modal act" onClick={handleApply}>
{getMessage('modal.grid.move.save')}
</button>
</div>
</WithDraggable.Body>
</WithDraggable> </WithDraggable>
) )
} }

72
src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
View File

@ -50,51 +50,41 @@ export default function LinePropertySetting(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="r">
<div className={`modal-pop-wrap r mount`}> <WithDraggable.Header title={getMessage('contextmenu.line.property.edit')} onClose={() => handleClosePopup()} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('contextmenu.line.property.edit')} </h1> <div className="guide">
<button className="modal-close" onClick={() => handleClosePopup()}> <span className="mb10">{getMessage('modal.line.property.edit.info')}</span>
닫기 <span>
</button> {getMessage('modal.line.property.edit.selected')} [ {selectedProperty?.name} ]
</span>
</div> </div>
<div className="modal-body"> <div className="properties-setting-wrap outer">
<div className="left-bar modal-handle"></div> <div className="setting-tit">{getMessage('setting')}</div>
<div className="right-bar modal-handle"></div> <div className="outline-wrap">
<div className="guide"> <div className="radio-grid-wrap">
<span className="mb10">{getMessage('modal.line.property.edit.info')}</span> {properties.map((property, index) => {
<span> return (
{getMessage('modal.line.property.edit.selected')} [ {selectedProperty?.name} ] <div className="d-check-radio pop" key={index}>
</span> <input
</div> type="radio"
<div className="properties-setting-wrap outer"> name="radio01"
<div className="setting-tit">{getMessage('setting')}</div> id={'ra' + (index + 1 >= 10 ? index + 1 : `0${index + 1}`)}
<div className="outline-wrap"> onChange={(e) => setSelectedProperty(property)}
<div className="radio-grid-wrap"> />
{properties.map((property, index) => { <label htmlFor={'ra' + (index + 1 > 10 ? index + 1 : `0${index + 1}`)}>{property.name}</label>
return ( </div>
<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>
</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>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <button className="btn-frame modal act" onClick={() => changeSurfaceLineProperty(selectedProperty, target)}>
{getMessage('modal.common.save')}
</button>
</div>
</WithDraggable.Body>
</WithDraggable> </WithDraggable>
) )
} }

46
src/components/floor-plan/modal/module/CircuitNumberEdit.jsx
View File

@ -14,38 +14,28 @@ export default function CircuitNumberEdit(props) {
closePopup(id) closePopup(id)
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="xm">
<div className={`modal-pop-wrap xm mount`}> <WithDraggable.Header title={getMessage('modal.module.circuit.number.edit')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1> <div className="grid-option-tit"> {getMessage('modal.module.circuit.number.edit.info')}</div>
<button className="modal-close" onClick={() => closePopup(id)}> <div className="grid-option-wrap">
닫기 <div className="grid-option-box">
</button> <div className="outline-form">
</div> <span className="mr10" style={{ width: 'auto' }}>
<div className="modal-body"> {getMessage('modal.module.circuit.number')}
<div className="left-bar modal-handle"></div> </span>
<div className="right-bar modal-handle"></div> <div className="input-grid mr5">
<div className="grid-option-tit"> {getMessage('modal.module.circuit.number.edit.info')}</div> <input type="text" className="input-origin block" />
<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> </div>
</div> </div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={handleApply}>
{getMessage('modal.common.save')}
</button>
</div>
</div> </div>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <button className="btn-frame modal act" onClick={handleApply}>
{getMessage('modal.common.save')}
</button>
</div>
</WithDraggable.Body>
</WithDraggable> </WithDraggable>
) )
} }

117
src/components/floor-plan/modal/module/PanelEdit.jsx
View File

@ -91,75 +91,64 @@ export default function PanelEdit(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="xm">
<div className={`modal-pop-wrap xm mount`}> <WithDraggable.Header
<div className="modal-head modal-handle"> title={getMessage(
<h1 className="title"> [PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) ? 'modal.move.setting' : 'modal.copy.setting',
{getMessage( )}
[PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) onClose={() => closePopup(id)}
? 'modal.move.setting' />
: 'modal.copy.setting', <WithDraggable.Body>
)}{' '} <div className="grid-option-tit">
</h1> {getMessage(
<button className="modal-close" onClick={() => closePopup(id)}> [PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type)
닫기 ? 'modal.move.setting.info'
</button> : 'modal.copy.setting.info',
)}
</div> </div>
<div className="modal-body"> <div className="grid-option-wrap">
<div className="left-bar modal-handle"></div> <div className="grid-option-box">
<div className="right-bar modal-handle"></div> <div className="grid-input-form">
<div className="grid-option-tit"> <span className="mr10">{getMessage('margin')}</span>
{getMessage( <div className="input-grid mr5">
[PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.MOVE_ALL, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) <input type="text" className="input-origin" defaultValue={0} onKeyUp={(e) => setLength(e.target.value)} />
? '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> </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> </div>
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5" onClick={handleApply}>
{getMessage('modal.common.save')}
</button>
</div>
</div> </div>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <button className="btn-frame modal mr5" onClick={handleApply}>
{getMessage('modal.common.save')}
</button>
</div>
</WithDraggable.Body>
</WithDraggable> </WithDraggable>
) )
} }

144
src/components/floor-plan/modal/module/column/ColumnInsert.jsx
View File

@ -24,91 +24,69 @@ export default function ColumnInsert(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="r">
<div className={`modal-pop-wrap r mount`}> <WithDraggable.Header title={getMessage('modal.panel.column.insert')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.panel.column.insert')} </h1> <div className="properties-setting-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> <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> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }

136
src/components/floor-plan/modal/module/column/ColumnRemove.jsx
View File

@ -26,98 +26,64 @@ export default function ColumnRemove(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="r">
<div className={`modal-pop-wrap r mount`}> <WithDraggable.Header title={getMessage('modal.panel.column.remove')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.panel.column.remove')} </h1> <div className="properties-setting-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> <div className="setting-tit">{getMessage('modal.panel.column.remove.info')}</div>
닫기 <div className="additional-wrap">
</button> <div className="additional-radio-wrap">
</div> {types.map((type, index) => {
<div className="modal-body"> return (
<div className="left-bar modal-handle"></div> <div className="d-check-radio pop" key={index}>
<div className="right-bar modal-handle"></div> <input
<div className="properties-setting-wrap"> type="radio"
<div className="setting-tit">{getMessage('modal.panel.column.remove.info')}</div> name="radio01"
<div className="additional-wrap"> id={`ra0${index + 1}`}
<div className="additional-radio-wrap"> onClick={(e) => setSelectedType(e.target.value)}
{types.map((type, index) => { value={type.value}
return ( checked={selectedType === type.value}
<div className="d-check-radio pop" key={index}> />
<input <label htmlFor={`ra0${index + 1}`}>{type.name}</label>
type="radio" </div>
name="radio01" )
id={`ra0${index + 1}`} })}
onClick={(e) => setSelectedType(e.target.value)} </div>
value={type.value} <div className="additional-img-wrap">
checked={selectedType === type.value} {selectedType === MODULE_REMOVE_TYPE.LEFT && (
/> <Image src="/static/images/canvas/additional_del01.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
<label htmlFor={`ra0${index + 1}`}>{type.name}</label> )}
</div> {selectedType === MODULE_REMOVE_TYPE.RIGHT && (
) <Image src="/static/images/canvas/additional_del02.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
})} )}
</div> {selectedType === MODULE_REMOVE_TYPE.HORIZONTAL_SIDE && (
<div className="additional-img-wrap"> <Image src="/static/images/canvas/additional_del03.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
{selectedType === MODULE_REMOVE_TYPE.LEFT && ( )}
<Image {selectedType === MODULE_REMOVE_TYPE.NONE && (
src="/static/images/canvas/additional_del01.svg" <Image src="/static/images/canvas/additional_del04.svg" alt="react" width={0} height={0} style={{ width: 'auto', height: 'auto' }} />
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>
</div> </div>
<div className="properties-setting-wrap"> </div>
<div className="setting-tit">{getMessage('legend')}</div> <div className="properties-setting-wrap">
<div className="module-table-box"> <div className="setting-tit">{getMessage('legend')}</div>
<div className="module-table-inner"> <div className="module-table-box">
<div className="additional-color-wrap"> <div className="module-table-inner">
<div className="additional-color-box"> <div className="additional-color-wrap">
<span className="additional-color pink"></span> <div className="additional-color-box">
<span className="normal-font">{getMessage('modal.panel.select.column')}</span> <span className="additional-color pink"></span>
</div> <span className="normal-font">{getMessage('modal.panel.select.column')}</span>
</div> </div>
</div> </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>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <button className="btn-frame modal act" onClick={handleApply}>
{getMessage('modal.common.save')}
</button>
</div>
</WithDraggable.Body>
</WithDraggable> </WithDraggable>
) )
} }

155
src/components/floor-plan/modal/module/row/RowInsert.jsx
View File

@ -24,91 +24,82 @@ export default function RowInsert(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="r">
<div className={`modal-pop-wrap r mount`}> <WithDraggable.Header title={getMessage('modal.row.insert')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.row.insert')} </h1> <div className="properties-setting-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> <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> </button>
</div> </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 className="modal-foot modal-handle"></div>
</div> </WithDraggable.Body>
</WithDraggable> </WithDraggable>
) )
} }

160
src/components/floor-plan/modal/module/row/RowRemove.jsx
View File

@ -27,98 +27,88 @@ export default function RowRemove(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="r">
<div className={`modal-pop-wrap r mount`}> <WithDraggable.Header title={getMessage('modal.row.remove')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.row.remove')}</h1> <div className="properties-setting-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> <div className="setting-tit">{getMessage('modal.row.remove.info')}</div>
닫기 <div className="additional-wrap">
</button> <div className="additional-radio-wrap">
</div> {types.map((type, index) => {
<div className="modal-body"> return (
<div className="left-bar modal-handle"></div> <div className="d-check-radio pop" key={index}>
<div className="right-bar modal-handle"></div> <input
<div className="properties-setting-wrap"> type="radio"
<div className="setting-tit">{getMessage('modal.row.remove.info')}</div> name="radio01"
<div className="additional-wrap"> id={`ra0${index + 1}`}
<div className="additional-radio-wrap"> onClick={(e) => setSelectedType(e.target.value)}
{types.map((type, index) => { value={type.value}
return ( checked={selectedType === type.value}
<div className="d-check-radio pop" key={index}> />
<input <label htmlFor={`ra0${index + 1}`}>{type.name}</label>
type="radio" </div>
name="radio01" )
id={`ra0${index + 1}`} })}
onClick={(e) => setSelectedType(e.target.value)} </div>
value={type.value} <div className="additional-img-wrap">
checked={selectedType === type.value} {selectedType === MODULE_REMOVE_TYPE.TOP && (
/> <Image
<label htmlFor={`ra0${index + 1}`}>{type.name}</label> src="/static/images/canvas/additional_bundle-del01.svg"
</div> alt="react"
) width={0}
})} height={0}
</div> style={{ width: 'auto', height: 'auto' }}
<div className="additional-img-wrap"> />
{selectedType === MODULE_REMOVE_TYPE.TOP && ( )}
<Image {selectedType === MODULE_REMOVE_TYPE.BOTTOM && (
src="/static/images/canvas/additional_bundle-del01.svg" <Image
alt="react" src="/static/images/canvas/additional_bundle-del02.svg"
width={0} alt="react"
height={0} width={0}
style={{ width: 'auto', height: 'auto' }} height={0}
/> style={{ width: 'auto', height: 'auto' }}
)} />
{selectedType === MODULE_REMOVE_TYPE.BOTTOM && ( )}
<Image {selectedType === MODULE_REMOVE_TYPE.VERTICAL_SIDE && (
src="/static/images/canvas/additional_bundle-del02.svg" <Image
alt="react" src="/static/images/canvas/additional_bundle-del03.svg"
width={0} alt="react"
height={0} width={0}
style={{ width: 'auto', height: 'auto' }} height={0}
/> style={{ width: 'auto', height: 'auto' }}
)} />
{selectedType === MODULE_REMOVE_TYPE.VERTICAL_SIDE && ( )}
<Image {selectedType === MODULE_REMOVE_TYPE.NONE && (
src="/static/images/canvas/additional_bundle-del03.svg" <Image
alt="react" src="/static/images/canvas/additional_bundle-del04.svg"
width={0} alt="react"
height={0} width={0}
style={{ width: 'auto', height: 'auto' }} 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>
</div> </div>
<div className="properties-setting-wrap"> </div>
<div className="setting-tit">{getMessage('legend')}</div> <div className="properties-setting-wrap">
<div className="module-table-box"> <div className="setting-tit">{getMessage('legend')}</div>
<div className="module-table-inner"> <div className="module-table-box">
<div className="additional-color-wrap"> <div className="module-table-inner">
<div className="additional-color-box"> <div className="additional-color-wrap">
<span className="additional-color pink"></span> <div className="additional-color-box">
<span className="normal-font">{getMessage('modal.panel.select.row')}</span> <span className="additional-color pink"></span>
</div> <span className="normal-font">{getMessage('modal.panel.select.row')}</span>
</div> </div>
</div> </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>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <button className="btn-frame modal act" onClick={handleApply}>
{getMessage('modal.common.save')}
</button>
</div>
</WithDraggable.Body>
</WithDraggable> </WithDraggable>
) )
} }

46
src/components/floor-plan/modal/movement/MovementSetting.jsx
View File

@ -16,36 +16,26 @@ export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="r">
<div className={`modal-pop-wrap r`}> <WithDraggable.Header title={getMessage('plan.menu.roof.cover.movement.shape.updown')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1> <div className="modal-btn-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> {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> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }

112
src/components/floor-plan/modal/object/DormerOffset.jsx
View File

@ -40,73 +40,63 @@ export default function DormerOffset(props) {
// closePopup(id) // closePopup(id)
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="xm">
<div className={`modal-pop-wrap xm mount`}> <WithDraggable.Header title={title} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{title}</h1> <div className="grid-option-tit">{getMessage('modal.dormer.offset.info')}</div>
<button className="modal-close" onClick={() => closePopup(id)}> <div className="grid-option-wrap">
닫기 <div className="grid-option-box">
</button> <div className="move-form">
</div> <p className="mb5">{getMessage('length')}</p>
<div className="modal-body"> <div className="input-move-wrap mb5">
<div className="left-bar modal-handle"></div> <div className="input-move">
<div className="right-bar modal-handle"></div> <input type="text" className="input-origin" ref={arrow1LengthRef} placeholder="0" />
<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>
</div> </div>
<div className="input-move-wrap"> <span>mm</span>
<div className="input-move"> <div className="direction-move-wrap">
<input type="text" className="input-origin" ref={arrow2LengthRef} placeholder="0" /> <button
</div> className={`direction up ${arrow1 === 'up' ? 'act' : ''}`}
<span>mm</span> onClick={() => {
<div className="direction-move-wrap"> setArrow1('up')
<button }}
className={`direction left ${arrow2 === 'left' ? 'act' : ''}`} ></button>
onClick={() => { <button
setArrow2('left') className={`direction down ${arrow1 === 'down' ? 'act' : ''}`}
}} onClick={() => {
></button> setArrow1('down')
<button }}
className={`direction right ${arrow2 === 'right' ? 'act' : ''}`} ></button>
onClick={() => { </div>
setArrow2('right') </div>
}} <div className="input-move-wrap">
></button> <div className="input-move">
</div> <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> </div>
</div> </div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={handleOffsetDormer}>
{getMessage('modal.common.save')}
</button>
</div>
</div> </div>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <button className="btn-frame modal act" onClick={handleOffsetDormer}>
{getMessage('modal.common.save')}
</button>
</div>
</WithDraggable.Body>
</WithDraggable> </WithDraggable>
) )
} }

60
src/components/floor-plan/modal/object/ObjectSetting.jsx
View File

@ -100,43 +100,33 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
] ]
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="lrr" style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
<div className={`modal-pop-wrap lrr`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}> <WithDraggable.Header title={getMessage('plan.menu.placement.surface.object')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1> <div className="modal-btn-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> {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> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }

30
src/components/floor-plan/modal/object/RoofMaterialSetting.jsx
View File

@ -21,28 +21,18 @@ export default function RoofMaterialSetting(props) {
] ]
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="xxxm">
<div className={`modal-pop-wrap xxxm mount`}> <WithDraggable.Header title={getMessage('modal.roof.material.edit')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.roof.material.edit')} </h1> <div className="slope-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> <div className="grid-select">
닫기 <QSelectBox title={'지붕재 선택'} options={roofMaterials} />
</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>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
</div>
</WithDraggable.Body>
</WithDraggable> </WithDraggable>
) )
} }

74
src/components/floor-plan/modal/object/SizeSetting.jsx
View File

@ -40,60 +40,50 @@ export default function SizeSetting(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="ssm">
<div className={`modal-pop-wrap ssm mount`}> <WithDraggable.Header title={getMessage('modal.size.setting')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.size.setting')} </h1> <div className="slope-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> <div className="size-option-top">
닫기 <div className="size-option-wrap">
</button> <div className="size-option mb5">
</div> <input type="text" className="input-origin mr5" value={target?.width.toFixed(0) * 10} readOnly={true} />
<div className="modal-body"> <span className="normal-font">mm</span>
<div className="left-bar modal-handle"></div> </div>
<div className="right-bar modal-handle"></div> <div className="size-option">
<div className="slope-wrap"> <input type="text" className="input-origin mr5" defaultValue={target?.width.toFixed(0) * 10} ref={widthRef} />
<div className="size-option-top"> <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-wrap">
<div className="size-option mb5"> <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> <span className="normal-font">mm</span>
</div> </div>
<div className="size-option"> <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> <span className="normal-font">mm</span>
</div> </div>
</div> </div>
</div> </div>
<div className="size-inner-warp"> <div className="size-check-wrap">
<div className="size-option-side"> <button className={`size-btn ${settingTarget === 1 ? 'act' : ''}`} onClick={() => setSettingTarget(1)}></button>
<div className="size-option-wrap"> <button className={`size-btn ${settingTarget === 2 ? 'act' : ''}`} onClick={() => setSettingTarget(2)}></button>
<div className="size-option mb5"> <button className={`size-btn ${settingTarget === 3 ? 'act' : ''}`} onClick={() => setSettingTarget(3)}></button>
<input type="text" className="input-origin mr5" value={target?.height.toFixed(0) * 10} readOnly={true} /> <button className={`size-btn ${settingTarget === 4 ? 'act' : ''}`} onClick={() => setSettingTarget(4)}></button>
<span className="normal-font">mm</span> <div className="size-box"></div>
</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> </div>
</div> </div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={() => handleReSizeObject(id)}>
{getMessage('write')}
</button>
</div>
</div> </div>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <button className="btn-frame modal act" onClick={() => handleReSizeObject(id)}>
{getMessage('write')}
</button>
</div>
</WithDraggable.Body>
</WithDraggable> </WithDraggable>
) )
} }

54
src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
View File

@ -8,40 +8,30 @@ export default function PropertiesSetting(props) {
const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(id) const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(id)
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="ssm">
<div className={`modal-pop-wrap ssm`}> <WithDraggable.Header title={getMessage('modal.canvas.setting.wallline.properties.setting')} onClose={() => closeModal(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1> <div className="properties-guide">{getMessage('modal.canvas.setting.wallline.properties.setting.info')}</div>
<button className="modal-close" onClick={() => closeModal(id)}> <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> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }

84
src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
View File

@ -114,24 +114,18 @@ export default function WallLineSetting(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}> <WithDraggable isShow={true} pos={{ x: 50, y: 230 }} className="r">
<div className={`modal-pop-wrap r mount`}> <WithDraggable.Header title={getMessage('modal.cover.outline.drawing')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1> <div className="modal-btn-wrap">
<button className="modal-close" onClick={() => closePopup(id)}></button> {/*<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 ${type === OUTER_LINE_TYPE.OUTER_LINE ? 'act' : ''}`} className={`btn-frame modal ${type === OUTER_LINE_TYPE.OUTER_LINE ? 'act' : ''}`}
onClick={() => setType(OUTER_LINE_TYPE.OUTER_LINE)} onClick={() => setType(OUTER_LINE_TYPE.OUTER_LINE)}
> >
{getMessage('modal.cover.outline')} {getMessage('modal.cover.outline')}
</button>*/} </button>*/}
{/* <button -- 2025-03-11 #838 외벽선 이외에 버튼 숨김처리. 나중에 다시 활성화 할 수 있음. {/* <button -- 2025-03-11 #838 외벽선 이외에 버튼 숨김처리. 나중에 다시 활성화 할 수 있음.
className={`btn-frame modal ${type === OUTER_LINE_TYPE.RIGHT_ANGLE ? 'act' : ''}`} className={`btn-frame modal ${type === OUTER_LINE_TYPE.RIGHT_ANGLE ? 'act' : ''}`}
onClick={() => setType(OUTER_LINE_TYPE.RIGHT_ANGLE)} onClick={() => setType(OUTER_LINE_TYPE.RIGHT_ANGLE)}
> >
@ -152,41 +146,39 @@ export default function WallLineSetting(props) {
> >
{getMessage('modal.cover.outline.diagonal')} {getMessage('modal.cover.outline.diagonal')}
</button>*/} </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>
<div className="modal-foot modal-handle"></div> <div className="properties-setting-wrap">
</div> {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> </WithDraggable>
) )
} }

62
src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx
View File

@ -29,40 +29,42 @@ export default function PanelBatchStatistics() {
}, []) }, [])
return ( return (
<WithDraggable isShow={true} handle=".penal-wrap" pos={pos}> <WithDraggable isShow={true} handle=".penal-wrap" pos={pos} isModal={false}>
<div className={`penal-wrap ${!isFold ? 'act' : ''}`}> <WithDraggable.Panel>
<h2>{getMessage('modal.panel.batch.statistic')}</h2> <div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
<button className="penal-arr" onClick={() => setIsFold(!isFold)}></button> <h2>{getMessage('modal.panel.batch.statistic')}</h2>
<div className="penal-table-wrap"> <button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
<table className="penal-table"> <div className="penal-table-wrap">
<thead> <table className="penal-table">
<tr> <thead>
{header.map((item, index) => ( <tr>
<th key={`statistic-hd-${index}`}>{item.name}</th> {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>
))} ))}
</tr> </tr>
))} </thead>
<tr> <tbody>
{header.map((header, index) => ( {rows.map((row, index) => (
<td key={`statistic-ft-${index}`}> <tr key={`statistic-row-${index}`}>
{typeof footer[header.prop] === 'number' {header.map((item, i) => (
? footer[header.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 }) <td key={`statistic-col-${i}`}>{row[item.prop] ?? 0}</td>
: footer[header.prop]} ))}
</td> </tr>
))} ))}
</tr> <tr>
</tbody> {header.map((header, index) => (
</table> <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>
</div> </WithDraggable.Panel>
</WithDraggable> </WithDraggable>
) )
} }

64
src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
View File

@ -121,47 +121,33 @@ export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
setType(button.type) setType(button.type)
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="r">
<div className={`modal-pop-wrap r`}> <WithDraggable.Header title={getMessage('plan.menu.placement.surface.drawing')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('plan.menu.placement.surface.drawing')}</h1> <div className="modal-btn-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> {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> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }

379
src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
View File

@ -257,194 +257,191 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="ll">
<div className={`modal-pop-wrap ll mount`}> <WithDraggable.Header title={getMessage('plan.menu.placement.surface.initial.setting')} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1> <div className="left-bar modal-handle"></div>
</div> <div className="right-bar modal-handle"></div>
<div className="modal-body"> <div className="placement-table">
<div className="left-bar modal-handle"></div> <table>
<div className="right-bar modal-handle"></div> <colgroup>
<div className="placement-table"> <col style={{ width: '151px' }} />
<table> <col />
<colgroup> </colgroup>
<col style={{ width: '151px' }} /> <tbody>
<col /> <tr>
</colgroup> <th>{getMessage('modal.placement.initial.setting.plan.drawing')}</th>
<tbody> <td>{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}</td>
<tr> </tr>
<th>{getMessage('modal.placement.initial.setting.plan.drawing')}</th> <tr>
<td>{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')}</td> <th>
</tr> <div className="tip-wrap">
<tr> {getMessage('modal.placement.initial.setting.size')}
<th> <button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button>
<div className="tip-wrap"> </div>
{getMessage('modal.placement.initial.setting.size')} </th>
<button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button> <td>
</div> <div className="pop-form-radio">
</th> {currentRoof &&
<td> roofSizeSetArray.map((item) => (
<div className="pop-form-radio"> <div className="d-check-radio pop" key={item.id}>
{currentRoof && <input
roofSizeSetArray.map((item) => ( type="radio"
<div className="d-check-radio pop" key={item.id}> id={item.id}
<input name={item.name}
type="radio" value={item.value}
id={item.id} checked={String(currentRoof?.roofSizeSet) === item.value}
name={item.name} onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })}
value={item.value} />
checked={String(currentRoof?.roofSizeSet) === item.value} <label htmlFor={item.id}>{getMessage(item.message)}</label>
onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })} </div>
/> ))}
<label htmlFor={item.id}>{getMessage(item.message)}</label> </div>
</div> </td>
))} </tr>
</div> <tr>
</td> <th>{getMessage('modal.placement.initial.setting.roof.angle.setting')}</th>
</tr> <td>
<tr> <div className="pop-form-radio place">
<th>{getMessage('modal.placement.initial.setting.roof.angle.setting')}</th> {currentRoof &&
<td> roofAngleSetArray.map((item, index) => (
<div className="pop-form-radio place"> <div className="outline-form" key={item.id}>
{currentRoof && <span>
roofAngleSetArray.map((item, index) => ( <div className="d-check-radio pop">
<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">
<input <input
type="number" type="radio"
className="input-origin block" id={item.id}
readOnly={currentRoof?.roofAngleSet !== item.value} name={item.name}
value={index === 0 ? currentRoof?.pitch : currentRoof?.angle} value={item.value}
onChange={(e) => checked={String(currentRoof?.roofAngleSet) === item.value}
index === 0 onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })}
? setCurrentRoof({ ...currentRoof, pitch: e.target.value, angle: getDegreeByChon(e.target.value) })
: setCurrentRoof({ ...currentRoof, pitch: getChonByDegree(e.target.value), angle: e.target.value })
}
/> />
<label htmlFor={item.id}>{getMessage(item.message)}</label>
</div> </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> </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> </div>
</td> {currentRoof && ['R', 'C'].includes(currentRoof.widAuth) && (
</tr> <div className="flex-ment">
<tr> <span>W</span>
<th> <div className="input-grid" style={{ width: '84px' }}>
<div className="tip-wrap"> <input
{getMessage('modal.placement.initial.setting.roof.material')} type="text"
<button className="tooltip" onClick={() => setShowMaterialGuidModal(true)}></button> className="input-origin block"
</div> name={`width`}
</th> ref={roofRef.width}
<td> value={parseInt(currentRoof?.width)}
<div className="placement-option"> onChange={(e) => onlyNumberInputChange(e, changeInput)}
<div className="grid-select no-flx" style={{ width: '171px' }}> readOnly={currentRoof?.widAuth === 'R'}
<QSelectBox disabled={currentRoof?.roofSizeSet === '3'}
title={ />
currentRoof?.roofSizeSet === '3' </div>
? 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> </div>
{currentRoof && ['R', 'C'].includes(currentRoof.widAuth) && ( )}
<div className="flex-ment"> {currentRoof && ['R', 'C'].includes(currentRoof.lenAuth) && (
<span>W</span> <div className="flex-ment">
<div className="input-grid" style={{ width: '84px' }}> <span>L</span>
<input <div className="input-grid" style={{ width: '84px' }}>
type="text" <input
className="input-origin block" type="text"
name={`width`} className="input-origin block"
ref={roofRef.width} name={`length`}
value={parseInt(currentRoof?.width)} ref={roofRef.length}
onChange={(e) => onlyNumberInputChange(e, changeInput)} value={parseInt(currentRoof?.length)}
readOnly={currentRoof?.widAuth === 'R'} 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'} disabled={currentRoof?.roofSizeSet === '3'}
/> />
</div> </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 && ['R', 'C'].includes(currentRoof.lenAuth) && ( )}
<div className="flex-ment"> </div>
<span>L</span> {/* {currentRoof && (
<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 className="placement-roof-btn-wrap"> <div className="placement-roof-btn-wrap">
<div className="icon-btn-wrap mt10"> <div className="icon-btn-wrap mt10">
<button <button
@ -467,21 +464,19 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
</div> </div>
</div> </div>
)} */} )} */}
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={handleSaveBtn}>
{getMessage('modal.common.save')}
</button>
</div>
</div> </div>
{showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />} <div className="grid-btn-wrap">
{showMaterialGuideModal && <MaterialGuide setShowMaterialGuidModal={setShowMaterialGuidModal} />} <button className="btn-frame modal act" onClick={handleSaveBtn}>
<div className="modal-foot modal-handle"></div> {getMessage('modal.common.save')}
</div> </button>
</div>
</WithDraggable.Body>
{showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />}
{showMaterialGuideModal && <MaterialGuide setShowMaterialGuidModal={setShowMaterialGuidModal} />}
</WithDraggable> </WithDraggable>
) )
} }

60
src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx
View File

@ -41,43 +41,33 @@ export default function PlacementSurfaceLineProperty(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="lr">
<div className={`modal-pop-wrap mount lr`}> <WithDraggable.Header title={getMessage('modal.canvas.setting.roofline.properties.setting')} onClose={() => handleClose()} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.canvas.setting.roofline.properties.setting')}</h1> <div className="properties-guide">{getMessage('modal.canvas.setting.roofline.properties.setting.info')}</div>
<button className="modal-close" onClick={() => handleClose()}> <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> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }

92
src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
View File

@ -256,63 +256,49 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } })
}, []) }, [])
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="lr-2" isHidden={isHidden}>
<div className={`modal-pop-wrap lr-2`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}> <WithDraggable.Header title={getMessage('plan.menu.placement.surface.arrangement')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1> <div className="plane-frame-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> <div className="plane-shape-wrap">
닫기 <div className="plane-shape-menu">
</button> {types.map((type) => (
</div> <button key={type.id} className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`} onClick={() => setSelectedType(type)}>
<div className="modal-body"> <div className="shape-box">
<div className="left-bar modal-handle"></div> <Image
<div className="right-bar modal-handle"></div> src={`/static/images/canvas/plane_shape0${type?.id}.svg`}
<div className="plane-frame-wrap"> alt="react"
<div className="plane-shape-wrap"> width={0}
<div className="plane-shape-menu"> height={0}
{types.map((type) => ( style={{
<button width: 'auto',
key={type.id} height: 'auto',
className={`shape-menu-box ${selectedType?.id === type.id ? 'act' : ''}`} transform: getInversionState(),
onClick={() => setSelectedType(type)} }}
> />
<div className="shape-box"> </div>
<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')}
</button> </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>
</div> </div>
<div className="modal-foot modal-handle"></div> </WithDraggable.Body>
</div>
</WithDraggable> </WithDraggable>
) )
} }

81
src/components/floor-plan/modal/roofAllocation/ActualSizeSetting.jsx
View File

@ -61,65 +61,50 @@ export default function ActualSizeSetting(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="ssm">
<div className={`modal-pop-wrap ssm mount`}> <WithDraggable.Header title={getMessage('modal.actual.size.setting')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.actual.size.setting')}</h1> <div className="guide">
<button className="modal-close" onClick={() => closePopup(id)}> <span>{getMessage('modal.actual.size.setting.info')}</span>
닫기
</button>
</div> </div>
<div className="modal-body"> <div className="properties-setting-wrap outer">
<div className="left-bar modal-handle"></div> <div className="setting-tit">{getMessage('setting')}</div>
<div className="right-bar modal-handle"></div> <div className="outline-wrap">
<div className="guide"> <div className="eaves-keraba-table">
<span>{getMessage('modal.actual.size.setting.info')}</span> <div className="eaves-keraba-item">
</div> <div className="eaves-keraba-th">{getMessage('modal.actual.size.setting.plane.size.length')}</div>
<div className="properties-setting-wrap outer"> <div className="eaves-keraba-td">
<div className="setting-tit">{getMessage('setting')}</div> <div className="outline-form">
<div className="outline-wrap"> <div className="input-grid mr5">
<div className="eaves-keraba-table"> <input type="text" className="input-origin block" value={planeSize} readOnly={true} />
<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>
<span className="thin">mm</span>
</div> </div>
</div> </div>
<div className="eaves-keraba-item"> </div>
<div className="eaves-keraba-th">{getMessage('modal.actual.size.setting.actual.size.length')}</div> <div className="eaves-keraba-item">
<div className="eaves-keraba-td"> <div className="eaves-keraba-th">{getMessage('modal.actual.size.setting.actual.size.length')}</div>
<div className="outline-form"> <div className="eaves-keraba-td">
<div className="input-grid mr5"> <div className="outline-form">
<input <div className="input-grid mr5">
type="text" <input type="text" className="input-origin block" value={actualSize} onChange={(e) => setActualSize(Number(e.target.value))} />
className="input-origin block"
value={actualSize}
onChange={(e) => setActualSize(Number(e.target.value))}
/>
</div>
<span className="thin">mm</span>
</div> </div>
<span className="thin">mm</span>
</div> </div>
</div> </div>
</div> </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>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <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> </WithDraggable>
) )
} }

288
src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
View File

@ -47,22 +47,13 @@ export default function ContextRoofAllocationSetting(props) {
}, []) }, [])
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="lr">
<div className={`modal-pop-wrap lr mount`}> <WithDraggable.Header title={getMessage('plan.menu.estimate.roof.alloc')} onClose={() => closePopup(id)} />
{currentRoofList && ( {currentRoofList && (
<> <WithDraggable.Body>
<div className="modal-head modal-handle"> <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1> <div className="allocation-select-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> {/* <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
닫기
</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="grid-select"> <div className="grid-select">
<QSelectBox <QSelectBox
options={roofMaterials.map((roof) => { options={roofMaterials.map((roof) => {
@ -78,165 +69,162 @@ export default function ContextRoofAllocationSetting(props) {
targetKey={'roofMatlCd'} targetKey={'roofMatlCd'}
/> />
</div> */} </div> */}
<button <button
className="allocation-edit" className="allocation-edit"
onClick={() => { onClick={() => {
onAddRoofMaterial() onAddRoofMaterial()
}} }}
> >
<i className="edit-ico"></i> <i className="edit-ico"></i>
{getMessage('modal.roof.alloc.add.roof.material')} {getMessage('modal.roof.alloc.add.roof.material')}
</button> </button>
</div> </div>
<div className="grid-option-overflow"> <div className="grid-option-overflow">
<div className="grid-option-wrap"> <div className="grid-option-wrap">
{currentRoofList.map((roof, index) => { {currentRoofList.map((roof, index) => {
return ( return (
<div className="grid-option-box" key={index}> <div className="grid-option-box" key={index}>
<div className="d-check-radio pop no-text"> <div className="d-check-radio pop no-text">
<input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} /> <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
<label <label
htmlFor="ra01" htmlFor="ra01"
onClick={(e) => { onClick={(e) => {
handleDefaultRoofMaterial(index) handleDefaultRoofMaterial(index)
}} }}
></label> ></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"> </div>
<div className="block-box"> {roof.raftAuth && (
<div className="flex-ment"> <div className="block-box">
<div className="flex-ment">
<span>{getMessage('modal.placement.initial.setting.rafter')}</span>
{raftCodes.length > 0 && (
<div className="grid-select"> <div className="grid-select">
<QSelectBox <QSelectBox
// options={roofMaterials} options={raftCodes}
options={roofMaterials.map((roof2) => {
return { ...roof2, name: globalLocale === 'ko' ? roof2.roofMatlNm : roof2.roofMatlNmJp }
})}
value={roof} value={roof}
//showKey={'roofMatlNm'} showKey={'clCodeNm'}
showKey="name" sourceKey={'clCode'}
sourceKey={'roofMatlCd'} targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
targetKey={'roofMatlCd'} onChange={(e) => handleChangeRaft(e, index)}
onChange={(e) => handleChangeRoofMaterial(e, index)}
/> />
</div> </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>
{roof.raftAuth && ( </div>
<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>
)}
{(roof.widAuth || roof.lenAuth) && ( {(roof.widAuth || roof.lenAuth) && (
<> <>
{roof.widAuth && ( {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 && (
<div className="block-box"> <div className="block-box">
<div className="flex-ment"> <div className="flex-ment">
<span>{getMessage('hajebichi')}</span> <span>W</span>
<div className="input-grid"> <div className="input-grid">
<input <input
type="text" type="text"
className="input-origin block" className="input-origin block"
value={parseInt(roof.hajebichi)} defaultValue={roof.width}
readOnly={roof.roofPchAuth === 'R'} readOnly={roof.widAuth === 'R'}
onChange={(e) => handleChangeInput(e, 'hajebichi', index)} onChange={(e) => {
handleChangeInput(e, 'width', index)
}}
/> />
</div> </div>
</div> </div>
</div> </div>
)} )}
<div className="block-box"> {roof.lenAuth && (
<div className="flex-ment"> <div className="block-box">
<span>{getMessage('modal.object.setting.offset.slope')}</span> <div className="flex-ment">
<div className="input-grid"> <span>L</span>
<input <div className="input-grid">
type="text" <input
className="input-origin block" type="text"
onChange={(e) => { className="input-origin block"
// handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index) defaultValue={roof.length}
handleChangePitch(e, index) readOnly={roof.lenAuth === 'R'}
}} onChange={(e) => {
value={currentAngleType === 'slope' ? roof.pitch : roof.angle} handleChangeInput(e, 'length', index)
defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle} }}
/> />
</div>
</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>
</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>
</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="grid-btn-wrap">
<div className="modal-foot modal-handle"></div> <button className="btn-frame modal act" onClick={handleSaveContext}>
</div> {getMessage('modal.roof.alloc.apply')}
</button>
</div>
</WithDraggable.Body>
)}
</WithDraggable> </WithDraggable>
) )
} }

278
src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
View File

@ -47,22 +47,14 @@ export default function RoofAllocationSetting(props) {
}, []) }, [])
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="lr">
<div className={`modal-pop-wrap lr mount`}> <WithDraggable.Header title={getMessage('plan.menu.estimate.roof.alloc')} onClose={() => closePopup(id)} />
<WithDraggable.Body>
{currentRoofList && ( {currentRoofList && (
<> <>
<div className="modal-head modal-handle"> <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1> <div className="allocation-select-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> {/* <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
닫기
</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="grid-select"> <div className="grid-select">
<QSelectBox <QSelectBox
options={roofMaterials.map((roof) => { options={roofMaterials.map((roof) => {
@ -78,146 +70,146 @@ export default function RoofAllocationSetting(props) {
targetKey={'roofMatlCd'} targetKey={'roofMatlCd'}
/> />
</div> */} </div> */}
<button <button
className="allocation-edit" className="allocation-edit"
onClick={() => { onClick={() => {
onAddRoofMaterial() onAddRoofMaterial()
}} }}
> >
<i className="edit-ico"></i> <i className="edit-ico"></i>
{getMessage('modal.roof.alloc.add.roof.material')} {getMessage('modal.roof.alloc.add.roof.material')}
</button> </button>
</div> </div>
<div className="grid-option-overflow"> <div className="grid-option-overflow">
<div className="grid-option-wrap"> <div className="grid-option-wrap">
{currentRoofList.map((roof, index) => { {currentRoofList.map((roof, index) => {
return ( return (
<div className="grid-option-box" key={index}> <div className="grid-option-box" key={index}>
<div className="d-check-radio pop no-text"> <div className="d-check-radio pop no-text">
<input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} /> <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
<label <label
htmlFor="ra01" htmlFor="ra01"
onClick={(e) => { onClick={(e) => {
handleDefaultRoofMaterial(index) handleDefaultRoofMaterial(index)
}} }}
></label> ></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>
<div className="grid-option-block-form">
{roof.raftAuth && (
<div className="block-box"> <div className="block-box">
<div className="flex-ment"> <div className="flex-ment">
<div className="grid-select"> <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
<QSelectBox {raftCodes.length > 0 && (
//options={roofMaterials} <div className="grid-select">
options={roofMaterials.map((roof2) => { <QSelectBox
return { ...roof2, name: globalLocale === 'ko' ? roof2.roofMatlNm : roof2.roofMatlNmJp } options={raftCodes}
})} value={roof}
value={roof} showKey={'clCodeNm'}
//showKey={'roofMatlNm'} sourceKey={'clCode'}
showKey="name" targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
sourceKey={'roofMatlCd'} onChange={(e) => handleChangeRaft(e, index)}
targetKey={'roofMatlCd'} />
onChange={(e) => handleChangeRoofMaterial(e, index)} </div>
/>
</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> </div>
)}
{roof.raftAuth && ( {(roof.widAuth || roof.lenAuth) && (
<div className="block-box"> <>
<div className="flex-ment"> {roof.widAuth && (
<span>{getMessage('modal.placement.initial.setting.rafter')}</span> <div className="block-box">
{raftCodes.length > 0 && ( <div className="flex-ment">
<div className="grid-select"> <span>W</span>
<QSelectBox <div className="input-grid">
options={raftCodes} <input
value={roof} type="text"
showKey={'clCodeNm'} className="input-origin block"
sourceKey={'clCode'} defaultValue={roof.width}
targetKey={roof.raft ? 'raft' : 'raftBaseCd'} onChange={(e) => handleChangeInput(e, 'width', index)}
onChange={(e) => handleChangeRaft(e, index)} readOnly={roof.widAuth === 'R'}
/> />
</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}
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> </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="block-box">
<div className="flex-ment"> <div className="flex-ment">
<span>{getMessage('modal.object.setting.offset.slope')}</span> <span>{getMessage('hajebichi')}</span>
<div className="input-grid"> <div className="input-grid">
<input <input
type="text" type="text"
className="input-origin block" className="input-origin block"
onChange={(e) => { onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
handleChangePitch(e, index) value={parseInt(roof.hajebichi)}
}} readOnly={roof.roofPchAuth === 'R'}
value={currentAngleType === 'slope' ? roof.pitch : roof.angle}
defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
/> />
</div> </div>
<span className="absol">{pitchText}</span>
</div> </div>
</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"> <div className="icon-btn-wrap">
<button <button
className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''} className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
@ -238,22 +230,20 @@ export default function RoofAllocationSetting(props) {
</button> </button>
</div> </div>
</div> */} </div> */}
</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>
<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> </WithDraggable.Body>
</div>
</WithDraggable> </WithDraggable>
) )
} }

62
src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
View File

@ -29,48 +29,38 @@ export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 }
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="xxm">
<div className={`modal-pop-wrap xxm`}> <WithDraggable.Header title={getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1> <div className="modal-btn-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> {buttons.map((button) => (
닫기 <button key={button.id} className={`btn-frame modal ${type === button.type ? 'act' : ''}`} onClick={() => setType(button.type)}>
</button> {button.name}
</button>
))}
</div> </div>
<div className="modal-body"> <div className="modal-bottom-border-bx">
<div className="left-bar modal-handle"></div> <div className="setting-tit">{getMessage('setting')}</div>
<div className="right-bar modal-handle"></div> <div className="discrimination-box">
<div className="modal-btn-wrap"> {type === TYPES.EAVES && <Eaves {...eavesProps} />}
{buttons.map((button) => ( {type === TYPES.GABLE && <Gable {...gableProps} />}
<button key={button.id} className={`btn-frame modal ${type === button.type ? 'act' : ''}`} onClick={() => setType(button.type)}> {type === TYPES.SHED && <Shed {...shedProps} />}
{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> </div>
<div className="grid-btn-wrap"> <div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={() => handleSave(id)}> <button className="btn-frame sub-tab mr5" onClick={handleRollback}>
{getMessage('common.setting.finish')} {getMessage('common.setting.rollback')}
</button>
<button className="btn-frame sub-tab act" onClick={handleConfirm}>
{getMessage('apply')}
</button> </button>
</div> </div>
</div> </div>
<div className="modal-foot modal-handle"></div> <div className="grid-btn-wrap">
</div> <button className="btn-frame modal act" onClick={() => handleSave(id)}>
{getMessage('common.setting.finish')}
</button>
</div>
</WithDraggable.Body>
</WithDraggable> </WithDraggable>
) )
} }

56
src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
View File

@ -88,41 +88,31 @@ export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="lr">
<div className={`modal-pop-wrap lr mount`}> <WithDraggable.Header title={getMessage('modal.roof.shape.setting')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.roof.shape.setting')}</h1> <div className="roof-shape-menu">
<button className="modal-close" onClick={() => closePopup(id)}> {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> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }

52
src/components/floor-plan/modal/setting01/SettingModal01.jsx
View File

@ -72,39 +72,27 @@ export default function SettingModal01(props) {
} }
return ( return (
<> <WithDraggable isShow={true} pos={{ x: 1275, y: 180 }} className="sm">
<WithDraggable isShow={true} pos={{ x: 1275, y: 180 }}> <WithDraggable.Header title={getMessage('modal.canvas.setting')} onClose={() => closePopup(id, true)} />
<div className={`modal-pop-wrap sm mount`}> <WithDraggable.Body>
<div className="modal-head modal-handle"> <div className="modal-btn-wrap">
<h1 className="title">{getMessage('modal.canvas.setting')}</h1> <button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => handleBtnClick(1)}>
<button className="modal-close" onClick={() => closePopup(id, true)}> {getMessage('modal.canvas.setting.display')}
닫기 </button>
</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>
<button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => handleBtnClick(2)}> <button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => handleBtnClick(2)}>
{getMessage('modal.canvas.setting.font.plan')} {getMessage('modal.canvas.setting.font.plan')}
</button> </button>
{canGridOptionSeletorValue && ( {canGridOptionSeletorValue && (
<button className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} onClick={() => handleBtnClick(3)}> <button className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} onClick={() => handleBtnClick(3)}>
{getMessage('modal.canvas.setting.grid')} {getMessage('modal.canvas.setting.grid')}
</button> </button>
)} )}
</div>
{buttonAct === 1 && <FirstOption {...firstProps} />}
{buttonAct === 2 && <SecondOption {...secondProps} />}
{buttonAct === 3 && <GridOption {...gridProps} />}
</div>
<div className="modal-foot modal-handle"></div>
</div> </div>
</WithDraggable> {buttonAct === 1 && <FirstOption {...firstProps} />}
</> {buttonAct === 2 && <SecondOption {...secondProps} />}
{buttonAct === 3 && <GridOption {...gridProps} />}
</WithDraggable.Body>
</WithDraggable>
) )
} }

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

@ -190,78 +190,68 @@ export default function DimensionLineSetting(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="xxxm">
<div className={`modal-pop-wrap xxxm mount`}> <WithDraggable.Header
<div className="modal-head modal-handle"> title={getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')}
<h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1> onClose={() => {
<button setIsShow(false)
className="modal-close" closePopups([fontModalId, colorModalId, id])
onClick={() => { }}
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> </button>
</div> </div>
<div className="modal-body"> <div className="line-color-wrap">
<div className="left-bar modal-handle"></div> <div className="outline-form mb10">
<div className="right-bar modal-handle"></div> <span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.font.size')}</span>
<div className="font-btn-wrap"> <div className="grid-select mr5">
<button className="btn-frame modal" onClick={() => popupHandle('font')}> <QSelectBox options={pixels} value={originPixel} onChange={(e) => setOriginPixel(e)} />
{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> </div>
<span className="thin">pixel</span>
</div> </div>
<div className="font-ex-wrap"> <div className="outline-form">
<div className="font-ex-tit">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.display')}</div> <span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.color')}</span>
<div className="form-box"> <button className="color-btn" style={{ backgroundColor: originColor }} onClick={() => popupHandle('color')}></button>
<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> </div>
</div> </div>
<div className="modal-foot modal-handle"></div> <div className="font-ex-wrap">
</div> <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> </WithDraggable>
) )
} }

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

@ -55,59 +55,49 @@ export default function PlanSizeSetting(props) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="xsm">
<div className={`modal-pop-wrap xsm mount`}> <WithDraggable.Header
<div className="modal-head modal-handle"> title={getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}
<h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</h1> onClose={() => {
<button setIsShow(false)
className="modal-close" closePopup(id, true)
onClick={() => { }}
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> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }

48
src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
View File

@ -39,37 +39,27 @@ export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
} }
return ( return (
<WithDraggable isShow={true} pos={pos}> <WithDraggable isShow={true} pos={pos} className="r">
<div className={`modal-pop-wrap r`}> <WithDraggable.Header title={getMessage('modal.wallline.offset.setting')} onClose={() => closePopup(id)} />
<div className="modal-head modal-handle"> <WithDraggable.Body>
<h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1> <div className="modal-btn-wrap">
<button className="modal-close" onClick={() => closePopup(id)}> {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> </button>
</div> </div>
<div className="modal-body"> </WithDraggable.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> </WithDraggable>
) )
} }