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

- 점.선 그리드 모달 추가

Browse Source
This commit is contained in:
minsik 2024-09-25 11:16:46 +09:00
parent 658776ea6d
commit cec4c90443
9 changed files with 70 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,13 +8,19 @@ export default function WithDraggable({ isShow, children, pos }) {
const handleOnDrag = (e, data) => {
e.stopPropagation()
console.log('pos', data)
setPosition({ x: data.x, y: data.y })
}
useEffect(() => {
setPosition({ ...pos })
}, [])
return <>{isShow && <Draggable onDrag={(e, data) => handleOnDrag(e, data)}>{children}</Draggable>}</>
return (
<>
{isShow && (
<Draggable position={{ x: position.x, y: position.y }} onDrag={(e, data) => handleOnDrag(e, data)}>
{children}
</Draggable>
)}
</>
)
}

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

@ -1,20 +1,22 @@
'use client'
import { useEffect, useState } from 'react'
import '@/styles/contents.scss'
import CanvasMenu from '@/components/floor-plan/CanvasMenu'
import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
import CanvasLayout from '@/components/floor-plan/CanvasLayout'
import '@/styles/contents.scss'
import OuterLineWall from '@/components/floor-plan/modal/outerlinesetting/OuterLineWall'
import { useEffect, useState } from 'react'
import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
export default function FloorPlan() {
const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
const [showOutlineModal, setShowOutlineModal] = useState(false)
const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
const [showDotLineGridModal, setShowDotLineGridModal] = useState(true)
const [showGridCopyModal, setShowGridCopyModal] = useState(false)
const [showGridMoveModal, setShowGridMoveModal] = useState(false)
const canvasSettingProps = {
setShowCanvasSettingModal,
setShowDotLineGridModal,
}
const outlineProps = {

1
src/components/floor-plan/MenuDepth01.jsx
View File

@ -10,6 +10,7 @@ export default function MenuDepth01(props) {
const [activeMenu, setActiveMenu] = useState()
const onClickMenu = (menuNum) => {
setActiveMenu(menuNum)
console.log(menuNum)
if (type === 'outline') {
setShowOutlineModal(menuNum === 0)
}

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

@ -1,27 +1,37 @@
import WithDraggable from '@/components/common/draggable/withDraggable'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
export default function DotLineGrid(props) {
// const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
const [close, setClose] = useState(false)
const SelectOption = [{ name: 'オンライン保証シ' }, { name: 'ステム' }]
const { setShowDotLineGridModal } = props
const { getMessage } = useMessage()
const SelectOption = [
{ id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin') },
{ id: 2, name: '1/2' },
{
id: 3,
name: '1/4',
},
{ id: 4, name: '1/10' },
]
const HandleClickClose = () => {
setClose(true)
setTimeout(() => {
setModalOption({ ...modalOption, gridoption: false })
setClose(false)
}, 180)
// setClose(true)
// setTimeout(() => {
// setModalOption({ ...modalOption, gridoption: false })
// setClose(false)
// }, 180)
}
return (
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap ssm mount `}>
<WithDraggable isShow={true} pos={{ x: 50, y: 30 }}>
<div className={`modal-pop-wrap ssm `}>
{/* <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}>
<h1 className="title">{getMessage('modal.canvas.setting.grid.dot.line.setting')}</h1>
<button className="modal-close" onClick={() => setShowDotLineGridModal(false)}>
닫기
</button>
</div>
@ -29,11 +39,11 @@ export default function DotLineGrid(props) {
<div className="grid-check-form">
<div className="d-check-box pop">
<input type="checkbox" id="ch01" />
<label htmlFor="ch01">点グリッド表示</label>
<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" />
<label htmlFor="ch02">ライングリッドの表示</label>
<label htmlFor="ch02">{getMessage('modal.canvas.setting.grid.dot.line.setting.line.display')}</label>
</div>
</div>
<div className="grid-option-wrap">
@ -43,14 +53,14 @@ export default function DotLineGrid(props) {
<label htmlFor="ra01"></label>
</div>
<div className="grid-input-form">
<span className="mr10">横間隔</span>
<span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.horizon')}</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>
<span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.vertical')}</span>
<div className="input-grid mr5">
<input type="text" className="input-origin" defaultValue={910} />
</div>
@ -63,20 +73,20 @@ export default function DotLineGrid(props) {
<label htmlFor="ra02"></label>
</div>
<div className="grid-input-form">
<span className="mr10">横間隔</span>
<span className="mr10">{getMessage('modal.canvas.setting.grid.dot.line.setting.ratio')}</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} />
<QSelectBox title={'原寸'} options={SelectOption} />
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal mr5">初期化</button>
<button className="btn-frame modal act">保存</button>
<button className="btn-frame modal mr5">{getMessage('modal.canvas.setting.grid.dot.line.setting.reset')}</button>
<button className="btn-frame modal act">{getMessage('modal.canvas.setting.grid.dot.line.setting.save')}</button>
</div>
</div>
</div>

4
src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
View File

@ -347,8 +347,8 @@ export default function OuterLineWall(props) {
})
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -1000 + 50 }}>
<div className={`modal-pop-wrap ssm`}>
<WithDraggable isShow={true} pos={{ x: -1390, y: 30 }}>
<div className={`modal-pop-wrap ssm mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
<button className="modal-close" onClick={() => setShowOutlineModal(false)}>

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

@ -1,11 +1,10 @@
import React, { useState } from 'react'
import React 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() {
export default function GridOption(props) {
const { setShowDotLineGridModal } = props
const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
const { getMessage } = useMessage()

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

@ -8,12 +8,12 @@ import { useMessage } from '@/hooks/useMessage'
import GridOption from '@/components/floor-plan/modal/setting01/GridOption'
export default function SettingModal01(props) {
const { setShowCanvasSettingModal } = props
const { setShowCanvasSettingModal, setShowDotLineGridModal } = props
const [buttonAct, setButtonAct] = useState(1)
const { getMessage } = useMessage()
return (
<WithDraggable isShow={true} pos={{ x: window.innerWidth - 450 - 50, y: -1000 + 50 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 30 }}>
<div className={`modal-pop-wrap sm`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.canvas.setting')}</h1>
@ -36,7 +36,7 @@ export default function SettingModal01(props) {
</div>
{buttonAct === 1 && <FirstOption />}
{buttonAct === 2 && <SecondOption />}
{buttonAct === 3 && <GridOption />}
{buttonAct === 3 && <GridOption setShowDotLineGridModal={setShowDotLineGridModal} />}
</div>
</div>
</WithDraggable>

9
src/locales/ja.json
View File

@ -60,6 +60,15 @@
"modal.canvas.setting.grid": "그리드(JA)",
"modal.canvas.setting.grid.optional.line": "ランダムグリッド",
"modal.canvas.setting.grid.dot.line": "ドット・ライングリッド",
"modal.canvas.setting.grid.dot.line.setting": "ドット・ライングリッドの設定",
"modal.canvas.setting.grid.dot.line.setting.dot.display": "点グリッド表示",
"modal.canvas.setting.grid.dot.line.setting.line.display": "ライングリッドの表示",
"modal.canvas.setting.grid.dot.line.setting.line.origin": "原寸",
"modal.canvas.setting.grid.dot.line.setting.horizon": "横間隔",
"modal.canvas.setting.grid.dot.line.setting.vertical": "縦間隔",
"modal.canvas.setting.grid.dot.line.setting.ratio": "比間隔",
"modal.canvas.setting.grid.dot.line.setting.reset": "初期化",
"modal.canvas.setting.grid.dot.line.setting.save": "保存",
"modal.canvas.setting.grid.absorption.add": "吸着点を追加",
"modal.canvas.setting.grid.color.setting": "グリッド色の設定",
"modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",

9
src/locales/ko.json
View File

@ -57,6 +57,15 @@
"modal.canvas.setting.grid": "그리드",
"modal.canvas.setting.grid.optional.line": "임의 그리드",
"modal.canvas.setting.grid.dot.line": "점·선 그리드",
"modal.canvas.setting.grid.dot.line.setting": "점·선 그리드 설정",
"modal.canvas.setting.grid.dot.line.setting.dot.display": "점 그리드 표시",
"modal.canvas.setting.grid.dot.line.setting.line.display": "선 그리드 표시",
"modal.canvas.setting.grid.dot.line.setting.line.origin": "원치수",
"modal.canvas.setting.grid.dot.line.setting.horizon": "가로간격",
"modal.canvas.setting.grid.dot.line.setting.vertical": "세로간격",
"modal.canvas.setting.grid.dot.line.setting.ratio": "비율간격",
"modal.canvas.setting.grid.dot.line.setting.reset": "초기화",
"modal.canvas.setting.grid.dot.line.setting.save": "저장",
"modal.canvas.setting.grid.absorption.add": "흡착점 추가",
"modal.canvas.setting.grid.color.setting": "그리드 색 설정",
"modal.canvas.setting.font.plan.edit": "글꼴 및 크기 변경",