diff --git a/src/components/common/context-menu/QContextMenu.jsx b/src/components/common/context-menu/QContextMenu.jsx index 8e3e2314..d1d73df3 100644 --- a/src/components/common/context-menu/QContextMenu.jsx +++ b/src/components/common/context-menu/QContextMenu.jsx @@ -1,15 +1,13 @@ 'use client' -import { useEffect, useState } from 'react' +import { useEffect } from 'react' import '@/styles/contents.scss' +import { useRecoilState } from 'recoil' +import { contextMenuState } from '@/store/contextMenu' export default function QContextMenu(props) { - const { contextRef, canvasProps } = props - - // const children = useRecoilValue(modalContent) - const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 }) - + const { contextRef, canvasProps, handleKeyup } = props + const [contextMenu, setContextMenu] = useRecoilState(contextMenuState) const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴 - let contextType = '' if (activeObject) { @@ -27,7 +25,7 @@ export default function QContextMenu(props) { const handleContextMenu = (e) => { // e.preventDefault() //기존 contextmenu 막고 setContextMenu({ visible: true, x: e.pageX, y: e.pageY }) - // console.log(111, canvasProps) + document.addEventListener('keyup', (e) => handleKeyup(e)) canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제 } diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index f9183be8..c2a73b63 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -23,7 +23,7 @@ export default function CanvasFrame({ plan }) { const { canvasLoadInit, gridInit } = useCanvasConfigInitialize() const currentObject = useRecoilValue(currentObjectState) const currentMenu = useRecoilValue(currentMenuState) - const { contextMenu, handleClick } = useContextMenu() + const { contextMenu, handleClick, handleKeyup } = useContextMenu() const { checkCanvasObjectEvent, checkUnsavedCanvasPlan, resetModifiedPlans } = usePlan() useEvent() @@ -55,19 +55,11 @@ export default function CanvasFrame({ plan }) {
- + {contextMenu.map((menus, index) => (
    {menus.map((menu) => ( -
  • { - if (menu.fn) { - menu.fn() - } - handleClick(e, menu) - }} - > +
  • handleClick(e, menu)}> {menu.name}
  • ))} diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js index d4e690e7..c5134e25 100644 --- a/src/hooks/useContextMenu.js +++ b/src/hooks/useContextMenu.js @@ -22,6 +22,7 @@ import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/Line import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting' import { useMessage } from '@/hooks/useMessage' import { useCanvasEvent } from '@/hooks/useCanvasEvent' +import { contextMenuState } from '@/store/contextMenu' export function useContextMenu() { const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴 @@ -33,6 +34,7 @@ export function useContextMenu() { const { addPopup } = usePopup() const [popupId, setPopupId] = useState(uuidv4()) const [gridColor, setGridColor] = useRecoilState(gridColorState) + const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState) const { handleZoomClear } = useCanvasEvent() const currentMenuSetting = (position) => { switch (currentMenu) { @@ -112,15 +114,18 @@ export function useContextMenu() { { id: 'auxiliaryMove', name: `${getMessage('contextmenu.auxiliary.move')}(M)`, + shortcut: ['m', 'M'], component: , }, { id: 'auxiliaryCopy', name: `${getMessage('contextmenu.auxiliary.copy')}(C)`, + shortcut: ['c', 'C'], component: , }, { id: 'auxiliaryRemove', + shortcut: ['d', 'D'], name: `${getMessage('contextmenu.auxiliary.remove')}(D)`, }, { @@ -152,14 +157,17 @@ export function useContextMenu() { }, { id: 'remove', + shortcut: ['d', 'D'], name: `${getMessage('contextmenu.remove')}(D)`, }, { id: 'move', + shortcut: ['m', 'M'], name: `${getMessage('contextmenu.move')}(M)`, }, { id: 'copy', + shortcut: ['c', 'C'], name: `${getMessage('contextmenu.copy')}(C)`, }, ], @@ -187,11 +195,29 @@ export function useContextMenu() { } const handleClick = (e, menu) => { + if (menu?.fn) { + menu.fn() + } setContextPopupPosition({ - x: e.clientX, - y: e.clientY, + x: e?.clientX, + y: e?.clientY, }) setCurrentContextMenu(menu) + setQContextMenu({ ...qContextMenu, visible: false }) + } + + const handleKeyup = (e) => { + let menu = null + + for (let i = 0; i < contextMenu.length; i++) { + const temp = contextMenu[i].filter((menu) => { + return menu.shortcut?.includes(e.key) + }) + + if (temp.length > 0) menu = temp + } + + handleClick(null, menu) } useEffect(() => { @@ -216,14 +242,17 @@ export function useContextMenu() { }, { id: 'dormerRemove', + shortcut: ['d', 'D'], name: `${getMessage('contextmenu.remove')}(D)`, }, { id: 'dormerMove', + shortcut: ['m', 'M'], name: `${getMessage('contextmenu.move')}(M)`, }, { id: 'dormerCopy', + shortcut: ['c', 'C'], name: `${getMessage('contextmenu.copy')}(C)`, }, { @@ -249,14 +278,17 @@ export function useContextMenu() { }, { id: 'roofMaterialRemove', + shortcut: ['d', 'D'], name: `${getMessage('contextmenu.remove')}(D)`, }, { id: 'roofMaterialMove', + shortcut: ['m', 'M'], name: `${getMessage('contextmenu.move')}(M)`, }, { id: 'roofMaterialCopy', + shortcut: ['c', 'C'], name: `${getMessage('contextmenu.copy')}(C)`, }, ], @@ -288,14 +320,17 @@ export function useContextMenu() { }, { id: 'openingRemove', + shortcut: ['d', 'D'], name: `${getMessage('contextmenu.remove')}(D)`, }, { id: 'openingMove', + shortcut: ['m', 'M'], name: `${getMessage('contextmenu.move')}(M)`, }, { id: 'openingCopy', + shortcut: ['c', 'C'], name: `${getMessage('contextmenu.copy')}(C)`, }, { @@ -413,14 +448,17 @@ export function useContextMenu() { }, { id: 'remove', + shortcut: ['d', 'D'], name: `${getMessage('contextmenu.remove')}(D)`, }, { id: 'move', + shortcut: ['m', 'M'], name: `${getMessage('contextmenu.move')}(M)`, }, { id: 'copy', + shortcut: ['c', 'C'], name: `${getMessage('contextmenu.copy')}(C)`, }, ], @@ -439,5 +477,6 @@ export function useContextMenu() { currentContextMenu, setCurrentContextMenu, handleClick, + handleKeyup, } } diff --git a/src/store/contextMenu.js b/src/store/contextMenu.js new file mode 100644 index 00000000..31b18f53 --- /dev/null +++ b/src/store/contextMenu.js @@ -0,0 +1,11 @@ +import { atom } from 'recoil' + +export const contextMenuState = atom({ + key: 'contextMenuState', + default: { + visible: false, + x: 0, + y: 0, + }, + dangerouslyAllowMutability: true, +})