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

모달 추가

Browse Source
This commit is contained in:
Minsiki 2024-09-24 18:19:44 +09:00
parent 0d4edc84e3
commit 91f8f7fb03
9 changed files with 119 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/common/draggable/withDraggable.jsx
View File

@ -6,7 +6,9 @@ import Draggable from 'react-draggable'
export default function WithDraggable({ isShow, children, pos }) {
const [position, setPosition] = useState({ x: 0, y: 0 })
const handleOnDrag = (data) => {
const handleOnDrag = (e, data) => {
e.stopPropagation()
console.log('pos', data)
setPosition({ x: data.x, y: data.y })
}
@ -14,13 +16,5 @@ export default function WithDraggable({ isShow, children, pos }) {
setPosition({ ...pos })
}, [])
return (
<>
{isShow && (
<Draggable position={{ x: position.x, y: position.y }} onDrag={(_, data) => handleOnDrag(data)}>
{children}
</Draggable>
)}
</>
)
return <>{isShow && <Draggable onDrag={(e, data) => handleOnDrag(e, data)}>{children}</Draggable>}</>
}

10
src/components/floor-plan/FloorPlan.jsx
View File

@ -10,7 +10,9 @@ import { useEffect, useState } from 'react'
export default function FloorPlan() {
const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
const [showOutlineModal, setShowOutlineModal] = useState(false)
const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
const [showGridCopyModal, setShowGridCopyModal] = useState(false)
const [showGridMoveModal, setShowGridMoveModal] = useState(false)
const canvasSettingProps = {
setShowCanvasSettingModal,
}
@ -25,6 +27,11 @@ export default function FloorPlan() {
setShowOutlineModal,
}
const dotLineProps = {
showDotLineGridModal,
setShowDotLineGridModal,
}
useEffect(() => {}, [showOutlineModal])
return (
@ -35,6 +42,7 @@ export default function FloorPlan() {
<CanvasLayout />
{showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />}
{showOutlineModal && <OuterLineWall {...outlineProps} />}
{showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
</div>
</div>
</>

85
src/components/floor-plan/modal/grid/DotLineGrid.jsx Normal file
View File

@ -0,0 +1,85 @@
import WithDraggable from '@/components/common/draggable/withDraggable'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useState } from 'react'
export default function DotLineGrid(props) {
// const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
const [close, setClose] = useState(false)
const SelectOption = [{ name: 'オンライン保証シ' }, { name: 'ステム' }]
const HandleClickClose = () => {
setClose(true)
setTimeout(() => {
setModalOption({ ...modalOption, gridoption: false })
setClose(false)
}, 180)
}
return (
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap ssm mount `}>
{/* <div className={`modal-pop-wrap ssm ${modalOption.gridoption ? 'mount' : ''} ${close ? 'unmount' : ''} `}> */}
<div className="modal-head">
<h1 className="title">ドット・ライングリッドの設定</h1>
<button className="modal-close" onClick={HandleClickClose}>
닫기
</button>
</div>
<div className="modal-body">
<div className="grid-check-form">
<div className="d-check-box pop">
<input type="checkbox" id="ch01" />
<label htmlFor="ch01">点グリッド表示</label>
</div>
<div className="d-check-box pop">
<input type="checkbox" id="ch02" />
<label htmlFor="ch02">ライングリッドの表示</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" />
<label htmlFor="ra01"></label>
</div>
<div className="grid-input-form">
<span className="mr10">横間隔</span>
<div className="input-grid mr5">
<input type="text" className="input-origin" defaultValue={910} />
</div>
<span>mm</span>
</div>
<div className="grid-input-form">
<span className="mr10">横間隔</span>
<div className="input-grid mr5">
<input type="text" className="input-origin" defaultValue={910} />
</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" />
<label htmlFor="ra02"></label>
</div>
<div className="grid-input-form">
<span className="mr10">横間隔</span>
<div className="input-grid mr5">
<input type="text" className="input-origin" defaultValue={910} />
</div>
<span>mm</span>
</div>
<div className="grid-select">
<QSelectBox title={'原寸'} option={SelectOption} />
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5">初期化</button>
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

2
src/components/floor-plan/modal/grid/GridCopy.jsx Normal file
View File

@ -0,0 +1,2 @@
export default function GridCopy(props) {
}

2
src/components/floor-plan/modal/grid/GridMove.jsx Normal file
View File

@ -0,0 +1,2 @@
export default function GridMove(props) {
}

9
src/components/floor-plan/modal/setting01/GridOption.jsx
View File

@ -1,7 +1,9 @@
import React from 'react'
import React, { useState } from 'react'
import { useRecoilState } from 'recoil'
import { settingModalGridOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import { useScopedI18n } from '@/locales/client'
import DotLineGrid from '../grid/DotLineGrid'
export default function GridOption() {
const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
@ -10,6 +12,11 @@ export default function GridOption() {
const onClickOption = (option) => {
option.selected = !option.selected
setGridOptions([...gridOptions])
if (option.id === 2) {
// 점.선 그리드
setShowDotLineGridModal(true)
}
}
return (
<>

8
src/locales/ja.json
View File

@ -58,10 +58,10 @@
"modal.canvas.setting.display": "ディスプレイ設定",
"modal.canvas.setting.font.plan": " フォントと図面サイズの設定",
"modal.canvas.setting.grid": "그리드(JA)",
"modal.canvas.setting.grid.option": "임의 그리드(JA)",
"modal.canvas.setting.grid.dot.line": "점·선 그리드(JA)",
"modal.canvas.setting.grid.absorption.add": "흡착점 추가(JA)",
"modal.canvas.setting.grid.color.setting": "그리드 색 설정(JA)",
"modal.canvas.setting.grid.optional.line": "ランダムグリッド",
"modal.canvas.setting.grid.dot.line": "ドット・ライングリッド",
"modal.canvas.setting.grid.absorption.add": "吸着点を追加",
"modal.canvas.setting.grid.color.setting": "グリッド色の設定",
"modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",
"modal.canvas.setting.font.plan.edit.word": "文字フォントの変更",
"modal.canvas.setting.font.plan.edit.flow": "フロー方向フォントの変更",

2
src/locales/ko.json
View File

@ -55,7 +55,7 @@
"modal.canvas.setting.display": "디스플레이 설정",
"modal.canvas.setting.font.plan": "글꼴 및 도면 크기 설정",
"modal.canvas.setting.grid": "그리드",
"modal.canvas.setting.grid.option": "임의 그리드",
"modal.canvas.setting.grid.optional.line": "임의 그리드",
"modal.canvas.setting.grid.dot.line": "점·선 그리드",
"modal.canvas.setting.grid.absorption.add": "흡착점 추가",
"modal.canvas.setting.grid.color.setting": "그리드 색 설정",

8
src/store/settingAtom.js
View File

@ -52,10 +52,10 @@ export const settingModalSecondOptionsState = atom({
export const settingModalGridOptionsState = atom({
key: 'settingModalGridOptions',
default: [
{ id: 1, name: 'modal.canvas.setting.grid.dot.line', selected: false },
{ id: 2, name: 'modal.canvas.setting.grid.absorption.add', selected: false },
{ id: 3, name: 'modal.canvas.setting.grid.color.setting', selected: false },
{ id: 4, name: 'modal.canvas.setting.font.plan.edit', selected: false },
{ id: 1, name: 'modal.canvas.setting.grid.optional.line', selected: false },
{ id: 2, name: 'modal.canvas.setting.grid.dot.line', selected: false },
{ id: 3, name: 'modal.canvas.setting.grid.absorption.add', selected: false },
{ id: 4, name: 'modal.canvas.setting.grid.color.setting', selected: false },
],
dangerouslyAllowMutability: true,
})