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,
+})