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

modal class 추가

Browse Source
This commit is contained in:
minsik 2024-10-31 18:07:51 +09:00
parent 119103a539
commit a7c21830f8
17 changed files with 43 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/common/context-menu/QContextMenu.jsx
View File

@ -2,12 +2,14 @@
import { useEffect } from 'react'
import '@/styles/contents.scss'
import { useRecoilState } from 'recoil'
import { contextMenuState } from '@/store/contextMenu'
import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
export default function QContextMenu(props) {
const { contextRef, canvasProps, handleKeyup } = props
const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
const [contextMenuList, setContextMenuList] = useRecoilState(contextMenuListState)
const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
let contextType = ''
if (activeObject) {
@ -19,12 +21,22 @@ export default function QContextMenu(props) {
}
}
const getYPosition = (e) => {
const contextLength = contextMenuList.reduce((acc, cur, index) => {
return acc + cur.length
}, 0)
return e?.clientY - (contextLength * 25 + contextMenuList.length * 2 * 17)
}
useEffect(() => {
if (!contextRef.current) return
const handleContextMenu = (e) => {
// e.preventDefault() //기존 contextmenu 막고
setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
const position = {
x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY,
}
setContextMenu({ visible: true, ...position })
document.addEventListener('keyup', (e) => handleKeyup(e))
canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
}

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

@ -15,7 +15,11 @@ export default function MenuDepth01() {
const subMenus = useRecoilValue(subMenusState)
const onClickMenu = ({ id, menu }) => {
setCurrentMenu(menu)
if (menu === currentMenu) {
handleMenu(type)
} else {
setCurrentMenu(menu)
}
}
useEffect(() => {

2
src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx
View File

@ -14,7 +14,7 @@ export default function AuxiliaryCopy(props) {
const [arrow2, setArrow2] = useState(null)
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm`}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.auxiliary.copy')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>

2
src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx
View File

@ -16,7 +16,7 @@ export default function AuxiliaryMove(props) {
const [arrow2, setArrow2] = useState(null)
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm`}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.auxiliary.move')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>

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

@ -11,7 +11,7 @@ export default function AuxiliarySize(props) {
const { closePopup } = usePopup()
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm`}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.auxiliary.size.edit')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>

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

@ -1,17 +1,16 @@
import { useState, useEffect, useRef } from 'react'
import { useEffect, useRef, useState } from 'react'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage'
import { useRecoilState, useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import QSelectBox from '@/components/common/select/QSelectBox'
import { pitchTextSelector } from '@/store/canvasAtom'
import { canvasState, pitchTextSelector } from '@/store/canvasAtom'
import { defaultSlope } from '@/store/commonAtom'
import { canvasState } from '@/store/canvasAtom'
export default function DimensionLineSetting(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, setIsShow, pos = contextPopupPosition } = props
let { id, setIsShow, pos = contextPopupPosition } = props
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const canvas = useRecoilValue(canvasState)
@ -79,7 +78,7 @@ export default function DimensionLineSetting(props) {
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm`}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('contextmenu.display.edit')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
@ -131,7 +130,9 @@ export default function DimensionLineSetting(props) {
<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 className="btn-frame modal act" onClick={handleChangeLength}>
{getMessage('modal.common.save')}
</button>
</div>
</div>
</div>

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

@ -60,7 +60,7 @@ export default function FlowDirectionSetting(props) {
}, [compasDeg])
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lx`}>
<div className={`modal-pop-wrap lx mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>

2
src/components/floor-plan/modal/image/ImageSizeSetting.jsx
View File

@ -14,7 +14,7 @@ export default function ImageSizeSetting(props) {
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxxm`}>
<div className={`modal-pop-wrap xxxm mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.image.size.setting')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>

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

@ -15,7 +15,7 @@ export default function CircuitNumberEdit(props) {
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm`}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head">
<h1 className="title"> {getMessage('modal.module.circuit.number.edit')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>

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

@ -23,7 +23,7 @@ export default function ColumnInsert(props) {
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}>
<div className={`modal-pop-wrap r mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.panel.column.insert')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>

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

@ -25,7 +25,7 @@ export default function ColumnRemove(props) {
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}>
<div className={`modal-pop-wrap r mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.panel.column.remove')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>

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

@ -23,7 +23,7 @@ export default function RowInsert(props) {
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}>
<div className={`modal-pop-wrap r mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.row.insert')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>

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

@ -25,7 +25,7 @@ export default function RowRemove(props) {
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}>
<div className={`modal-pop-wrap r mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.row.remove')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>

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

@ -14,7 +14,7 @@ export default function DormerOffset(props) {
const [arrow2, setArrow2] = useState(null)
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm`}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('contextmenu.dormer.offset')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>

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

@ -59,12 +59,12 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
}
//개구배치, 그림자배치
setIsHidden(true)
if (buttonAct === 1 || buttonAct === 2) {
applyOpeningAndShadow(objectPlacement, buttonAct, surfaceShapePolygons)
} else {
applyDormers(dormerPlacement, buttonAct, surfaceShapePolygons)
}
setIsHidden(true)
}
const buttonMenu = [
@ -73,7 +73,7 @@ export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
{ id: 3, name: getMessage('modal.object.setting.type.triangle.dormer') },
{ id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') },
]
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lrr`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>

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

@ -22,9 +22,9 @@ export default function RoofMaterialSetting(props) {
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxxm`}>
<div className={`modal-pop-wrap xxxm mount`}>
<div className="modal-head">
<h1 className="title">変更 </h1>
<h1 className="title">{getMessage('modal.roof.material.edit')} </h1>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
@ -36,7 +36,7 @@ export default function RoofMaterialSetting(props) {
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">ストレージ</button>
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
</div>
</div>
</div>

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

@ -16,7 +16,7 @@ export default function RoofAllocationSetting(props) {
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ml`}>
<div className={`modal-pop-wrap ml mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
<button className="modal-close" onClick={() => closePopup(id)}>