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

context menu 위치 조정

Browse Source
This commit is contained in:
minsik 2024-10-24 17:57:40 +09:00
parent 6f75e25fb9
commit 4aac7c650f
14 changed files with 277 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,9 +3,12 @@ import ColorPicker from '@/components/common/color-picker/ColorPicker'
import { useMessage } from '@/hooks/useMessage'
import { useEffect, useState } from 'react'
import { usePopup } from '@/hooks/usePopup'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
export default function ColorPickerModal(props) {
const { isShow, setIsShow, pos = { x: 770, y: -815 }, color = '#ff0000', setColor, id } = props
const contextPopupPosition = useRecoilValue(contextPopupPositionState) // 현재 메뉴
const { isShow, setIsShow, pos = contextPopupPosition, color = '#ff0000', setColor, id } = props
const { getMessage } = useMessage()
const [originColor, setOriginColor] = useState(color)
const { closePopup } = usePopup()
@ -15,14 +18,17 @@ export default function ColorPickerModal(props) {
}, [isShow])
return (
<WithDraggable isShow={true} pos={pos}>
<WithDraggable isShow={true} pos={pos ?? ''}>
<div className={`modal-pop-wrap lr mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.color.picker.title')}</h1>
<button
className="modal-close"
onClick={() => {
setIsShow(false)
if (setIsShow) {
setIsShow(false)
}
console.log(id)
closePopup(id)
}}
>
@ -40,8 +46,9 @@ export default function ColorPickerModal(props) {
<button
className="btn-frame modal act"
onClick={() => {
setColor(originColor)
setIsShow(false)
if (setColor) setColor(originColor)
if (setIsShow) setIsShow(false)
closePopup(id)
}}
>

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

@ -1,11 +1,11 @@
import WithDraggable from '@/components/common/draggable/WithDraggable'
import QSelectBox from '@/components/common/select/QSelectBox'
import { usePopup } from '@/hooks/usePopup'
import { useEffect, useState } from 'react'
import { useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useRecoilState, useRecoilValue } from 'recoil'
import { fontSelector, globalFontAtom } from '@/store/fontAtom'
import { useFont } from '@/hooks/common/useFont'
import { contextPopupPositionState } from '@/store/popupAtom'
const fonts = [
{ name: 'MS PGothic', value: 'MS PGothic' },
@ -46,7 +46,8 @@ const fontColors = [
{ name: '남색', value: 'darkblue' },
]
export default function FontSetting(props) {
const { id, setIsShow, pos = { x: 455, y: 180 }, type } = props
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, setIsShow, pos = contextPopupPosition, type } = props
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
@ -69,7 +70,7 @@ export default function FontSetting(props) {
},
}
})
setIsShow(false)
if (setIsShow) setIsShow(false)
closePopup(id)
}
@ -81,7 +82,7 @@ export default function FontSetting(props) {
<button
className="modal-close"
onClick={() => {
setIsShow(false)
if (setIsShow) setIsShow(false)
closePopup(id)
}}
>

5
src/components/floor-plan/CanvasFrame.jsx
View File

@ -15,7 +15,7 @@ export default function CanvasFrame({ plan }) {
const canvasRef = useRef(null)
const { canvas } = useCanvas('canvas')
const { handleZoomClear } = useCanvasEvent()
const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu({
const { contextMenu, currentContextMenu, setCurrentContextMenu, handleClick } = useContextMenu({
externalFn: {
handleZoomClear,
},
@ -91,7 +91,7 @@ export default function CanvasFrame({ plan }) {
if (menu.fn) {
menu.fn()
}
setCurrentContextMenu(menu)
handleClick(e, menu)
}}
>
{menu.name}
@ -100,7 +100,6 @@ export default function CanvasFrame({ plan }) {
</ul>
))}
</QContextMenu>
{currentContextMenu?.component}
</div>
)
}

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

@ -5,14 +5,13 @@ import { useRecoilState, useRecoilValue } from 'recoil'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import '@/styles/contents.scss'
import CanvasMenu from '@/components/floor-plan/CanvasMenu'
import CanvasLayout from '@/components/floor-plan/CanvasLayout'
import '@/styles/contents.scss'
export default function FloorPlan() {
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { get } = useAxios(globalLocaleState)
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
@ -23,7 +22,6 @@ export default function FloorPlan() {
menuNumber,
setMenuNumber,
}
useEffect(() => {
console.log('FloorPlan useEffect 실행')
fetchSettings()

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

@ -1,14 +1,20 @@
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { usePopup } from '@/hooks/usePopup'
export default function AuxiliaryMove({ setCurrentContextMenu }) {
export default function AuxiliaryMove(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, pos = contextPopupPosition } = props
const { getMessage } = useMessage()
const { closePopup } = usePopup()
return (
<WithDraggable isShow={true} pos={{ x: 0, y: 150 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">補助線の移動 </h1>
<button className="modal-close" onClick={() => setCurrentContextMenu(null)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>

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

@ -1,14 +1,20 @@
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { usePopup } from '@/hooks/usePopup'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
export default function AuxiliarySize({ setCurrentContextMenu }) {
export default function AuxiliarySize(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, pos = contextPopupPosition } = props
const { getMessage } = useMessage()
const { closePopup } = usePopup()
return (
<WithDraggable isShow={true} pos={{ x: 0, y: 150 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm`}>
<div className="modal-head">
<h1 className="title">補助線サイズ変更 </h1>
<button className="modal-close" onClick={() => setCurrentContextMenu(null)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>

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

@ -1,16 +1,21 @@
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
export default function GridCopy(props) {
const { setShowGridMoveModal, setShowGridCopyModal } = props
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, pos = contextPopupPosition } = props
const { getMessage } = useMessage()
const { closePopup } = usePopup()
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 380 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.grid.copy')} </h1>
<button className="modal-close" onClick={() => setShowGridCopyModal(false)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>

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

@ -1,16 +1,21 @@
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
export default function GridMove(props) {
const { setShowGridMoveModal, setShowGridCopyModal } = props
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, pos = contextPopupPosition } = props
const { getMessage } = useMessage()
const { closePopup } = usePopup()
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 30 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.grid.move')} </h1>
<button className="modal-close" onClick={() => setShowGridMoveModal(false)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>

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

@ -3,8 +3,12 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'
import { usePopup } from '@/hooks/usePopup'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
export default function RoofAllocationSetting({ id, pos = { x: 50, y: 230 } }) {
export default function RoofAllocationSetting(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, pos = contextPopupPosition } = props
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const { handleSave, onAddRoofMaterial, onDeleteRoofMaterial, values, roofMaterials, selectedRoofMaterial, setSelectedRoofMaterial } =

28
src/hooks/common/useCommonUtils.js
View File

@ -4,11 +4,15 @@ import { wordDisplaySelector } from '@/store/settingAtom'
import { useEvent } from '@/hooks/useEvent'
import { checkLineOrientation, getDistance } from '@/util/canvas-util'
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
import { v4 as uuidv4 } from 'uuid'
import { usePopup } from '@/hooks/usePopup'
import Distance from '@/components/floor-plan/modal/distance/Distance'
export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionState }) {
const wordDisplay = useRecoilValue(wordDisplaySelector)
const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
const { addPopup } = usePopup()
useEffect(() => {
initEvent()
@ -98,7 +102,8 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
const lineOptions = {
stroke: dimensionSettings.color,
strokeWidth: dimensionSettings.pixel,
selectable: false,
name: 'dimensionLine',
selectable: true,
}
// 캔버스에 클릭 이벤트 추가
@ -273,6 +278,7 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
const pointer = canvas.getPointer(options.e)
let point
console.log(options)
if (points.length === 0) {
// 첫 번째 포인트는 그대로 클릭한 위치에 추가
point = new fabric.Circle({
@ -285,7 +291,6 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
} else if (points.length === 1) {
// 두 번째 포인트는 첫 번째 포인트를 기준으로 수평 또는 수직으로만 배치
const p1 = points[0]
point = new fabric.Circle({
left: pointer.x - 5, // 반지름 반영
top: pointer.y - 5, // 반지름 반영
@ -313,9 +318,9 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
canvas.add(line2)
canvas.add(line3)
const distance1 = getDistance(p1CenterX, p1CenterY, p2CenterX, p2CenterY)
const distance2 = getDistance(p2CenterX, p2CenterY, p3.x, p3.y)
const distance3 = getDistance(p3.x, p3.y, p1CenterX, p1CenterY)
const distance1 = getDistance(p1CenterX, p1CenterY, p2CenterX, p2CenterY) // 대각선
const distance2 = getDistance(p2CenterX, p2CenterY, p3.x, p3.y) // 수직거리
const distance3 = getDistance(p3.x, p3.y, p1CenterX, p1CenterY) // 수평거리
// 거리 텍스트가 이미 있으면 업데이트하고, 없으면 새로 생성
distanceText = new fabric.Text(`${distance1 * 10}`, {
@ -339,6 +344,19 @@ export function useCommonUtils({ canvas, commonFunctionState, setCommonFunctionS
// 거리 계산 후, 다음 측정을 위해 초기화
points = []
const id = uuidv4()
addPopup(
id,
1,
<Distance
id={id}
distance={{
horizon: distance3 * 10,
vertical: distance2 * 10,
diagonal: distance1 * 10,
}}
/>,
)
}
// 캔버스 다시 그리기

6
src/hooks/roofcover/useRoofAllocationSetting.js
View File

@ -86,6 +86,12 @@ export function useRoofAllocationSetting(id) {
swalFire({ text: '할당할 지붕이 없습니다.' })
closePopup(id)
}
// if (type === 'roofBase') {
// // 지붕면 할당
//
// } else if ('roof') {
// // 지붕재 변경
// }
}, [])
const onAddRoofMaterial = () => {

194
src/hooks/useContextMenu.js
View File

@ -1,18 +1,36 @@
import { useRecoilValue } from 'recoil'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { currentMenuState, currentObjectState } from '@/store/canvasAtom'
import { useEffect, useState } from 'react'
import { MENU } from '@/common/common'
import AuxiliaryMove from '@/components/floor-plan/modal/auxiliary/AuxiliaryMove'
import AuxiliarySize from '@/components/floor-plan/modal/auxiliary/AuxiliarySize'
import { usePopup } from '@/hooks/usePopup'
import { v4 as uuidv4 } from 'uuid'
import GridMove from '@/components/floor-plan/modal/grid/GridMove'
import GridCopy from '@/components/floor-plan/modal/grid/GridCopy'
import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
import { gridColorState } from '@/store/gridAtom'
import { contextPopupPositionState } from '@/store/popupAtom'
import AuxiliaryCopy from '@/components/floor-plan/modal/auxiliary/AuxiliaryCopy'
import SizeSetting from '@/components/floor-plan/modal/object/SizeSetting'
import RoofMaterialSetting from '@/components/floor-plan/modal/object/RoofMaterialSetting'
import DormerOffset from '@/components/floor-plan/modal/object/DormerOffset'
import FontSetting from '@/components/common/font/FontSetting'
import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/LinePropertySetting'
import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting'
export function useContextMenu({ externalFn }) {
const currentMenu = useRecoilValue(currentMenuState)
const [contextMenu, setContextMenu] = useState([[]])
const [currentContextMenu, setCurrentContextMenu] = useState(null)
const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴
const [contextMenu, setContextMenu] = useState([[]]) // 메뉴.object 별 context menu
const [currentContextMenu, setCurrentContextMenu] = useState(null) // 선택한 contextMenu
const currentObject = useRecoilValue(currentObjectState)
const currentMenuSetting = () => {
console.log(currentMenu)
const { addPopup } = usePopup()
const [popupId, setPopupId] = useState(uuidv4())
const [gridColor, setGridColor] = useRecoilState(gridColorState)
const currentMenuSetting = (position) => {
switch (currentMenu) {
case MENU.PLAN_DRAWING:
setContextMenu([
@ -20,14 +38,17 @@ export function useContextMenu({ externalFn }) {
{
id: 'gridMove',
name: '그리드 이동',
component: <GridMove id={popupId} />,
},
{
id: 'gridCopy',
name: '그리드 복사',
component: <GridCopy id={popupId} />,
},
{
id: 'gridColorEdit',
name: '그리드 색 변경',
component: <ColorPickerModal id={popupId} color={gridColor} setColor={setGridColor} />,
},
{
id: 'remove',
@ -84,16 +105,17 @@ export function useContextMenu({ externalFn }) {
{
id: 'sizeEdit',
name: '사이즈 변경',
component: <AuxiliarySize setCurrentContextMenu={setCurrentContextMenu} />,
component: <AuxiliarySize id={popupId} />,
},
{
id: 'auxiliaryMove',
name: '보조선 이동(M)',
component: <AuxiliaryMove setCurrentContextMenu={setCurrentContextMenu} />,
component: <AuxiliaryMove id={popupId} />,
},
{
id: 'auxiliaryCopy',
name: '보조선 복사(C)',
component: <AuxiliaryCopy id={popupId} />,
},
{
id: 'auxiliaryRemove',
@ -160,19 +182,35 @@ export function useContextMenu({ externalFn }) {
break
}
}
useEffect(() => {
currentMenuSetting()
}, [currentMenu])
const handleClick = (e, menu) => {
setContextPopupPosition({
x: e.clientX,
y: e.clientY,
})
setCurrentContextMenu(menu)
}
useEffect(() => {
currentMenuSetting()
}, [gridColor, currentMenu])
useEffect(() => {
if (currentContextMenu?.component) addPopup(popupId, 1, currentContextMenu?.component)
}, [currentContextMenu])
useEffect(() => {
console.log('object name', currentObject?.name)
if (currentObject?.name) {
switch (currentObject.name) {
case 'triangleDormer':
case 'pentagonDormer':
setContextMenu([
[
{
id: 'sizeEdit',
name: '사이즈 변경',
component: <SizeSetting id={popupId} />,
},
{
id: 'dormerRemove',
@ -189,10 +227,12 @@ export function useContextMenu({ externalFn }) {
{
id: 'roofMaterialEdit',
name: '지붕재 변경',
component: <RoofMaterialSetting id={popupId} />,
},
{
id: 'dormerOffset',
name: '도머 오프셋',
component: <DormerOffset id={popupId} />,
},
],
])
@ -203,6 +243,7 @@ export function useContextMenu({ externalFn }) {
{
id: 'sizeEdit',
name: '사이즈 변경',
component: <SizeSetting id={popupId} />,
},
{
id: 'roofMaterialRemove',
@ -221,14 +262,17 @@ export function useContextMenu({ externalFn }) {
{
id: 'roofMaterialEdit',
name: '지붕재 변경',
component: <RoofAllocationSetting id={popupId} />,
},
{
id: 'linePropertyEdit',
name: '각 변 속성 변경',
component: <LinePropertySetting id={popupId} />,
},
{
id: 'flowDirectionEdit',
name: '흐름 뱡향 변경',
component: <FlowDirectionSetting id={popupId} />,
},
],
])
@ -259,6 +303,127 @@ export function useContextMenu({ externalFn }) {
],
])
break
case 'lengthText':
setContextMenu([
[
{
id: 'lengthTextRemove',
name: '삭제',
},
{
id: 'lengthTextMove',
name: '이동',
},
{
id: 'lengthTextAuxiliaryLineEdit',
name: '치수 보조선 변경',
},
{
id: 'displayEdit',
name: '표시 변경',
},
],
])
break
case 'commonText':
setContextMenu([
[
{
id: 'commonTextRemove',
name: '삭제',
},
{
id: 'commonTextMove',
name: '이동',
},
{
id: 'commonTextCopy',
name: '복사',
},
{
id: 'commonTextFontSetting',
name: '폰트 설정',
component: <FontSetting id={popupId} type={'commonText'} />,
},
{
id: 'commonTextEdit',
name: '편집',
},
],
])
break
case 'lineGrid':
setContextMenu([
[
{
id: 'gridMove',
name: '그리드 이동',
},
{
id: 'gridCopy',
name: '그리드 복사',
},
{
id: 'gridColorEdit',
name: '그리드 색 변경',
},
{
id: 'remove',
name: '삭제',
},
{
id: 'removeAll',
name: '전체 삭제',
},
],
])
break
case 'dimensionLine':
setContextMenu([
[
{
id: 'dimensionLineRemove',
name: '삭제',
},
{
id: 'dimensionLineMove',
name: '이동',
},
{
id: 'dimensionAuxiliaryLineEdit',
name: '치수 보조선 변경',
},
{
id: 'dimensionLineDisplayEdit',
name: '표시 변경',
component: <DimensionLineSetting id={popupId} />,
},
],
])
break
case 'shadow':
setContextMenu([
[
{
id: 'sizeEdit',
name: '사이즈 변경',
component: <SizeSetting id={popupId} />,
},
{
id: 'remove',
name: '삭제(D)',
},
{
id: 'move',
name: '이동(M)',
},
{
id: 'copy',
name: '복사(C)',
},
],
])
break
default:
currentMenuSetting()
}
@ -267,13 +432,10 @@ export function useContextMenu({ externalFn }) {
}
}, [currentObject])
useEffect(() => {
console.log(currentContextMenu)
}, [currentContextMenu])
return {
contextMenu,
currentContextMenu,
setCurrentContextMenu,
handleClick,
}
}

6
src/hooks/usePopup.js
View File

@ -1,20 +1,14 @@
import { useRecoilState } from 'recoil'
import { popupState } from '@/store/popupAtom'
import { useEffect } from 'react'
export function usePopup() {
const [popup, setPopup] = useRecoilState(popupState)
useEffect(() => {
console.log(popup)
}, [popup])
const addPopup = (id, depth, component) => {
setPopup({ children: [...filterDepth(depth), { id: id, depth: depth, component: component }] })
}
const closePopup = (id) => {
console.log(id)
setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] })
}

9
src/store/popupAtom.js
View File

@ -11,3 +11,12 @@ export const popupState = atom({
},
dangerouslyAllowMutability: true,
})
export const contextPopupPositionState = atom({
key: 'contextPopupPositionState',
default: {
x: 50,
y: 180,
},
dangerouslyAllowMutability: true,
})