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

contextmenu shortcut(단축키) 기능 추가

Browse Source
This commit is contained in:
minsik 2024-10-28 10:04:43 +09:00
parent c10d757f69
commit d834e68b23
4 changed files with 61 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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) //한번 노출 후 이벤트 삭제
}

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

@ -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 }) {
<div className="canvas-frame">
<canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>
<QContextMenu contextRef={canvasRef} canvasProps={canvas}>
<QContextMenu contextRef={canvasRef} canvasProps={canvas} handleKeyup={handleKeyup}>
{contextMenu.map((menus, index) => (
<ul key={index}>
{menus.map((menu) => (
<li
key={menu.id}
onClick={(e) => {
if (menu.fn) {
menu.fn()
}
handleClick(e, menu)
}}
>
<li key={menu.id} onClick={(e) => handleClick(e, menu)}>
{menu.name}
</li>
))}

43
src/hooks/useContextMenu.js
View File

@ -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: <AuxiliaryMove id={popupId} />,
},
{
id: 'auxiliaryCopy',
name: `${getMessage('contextmenu.auxiliary.copy')}(C)`,
shortcut: ['c', 'C'],
component: <AuxiliaryCopy id={popupId} />,
},
{
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,
}
}

11
src/store/contextMenu.js Normal file
View File

@ -0,0 +1,11 @@
import { atom } from 'recoil'
export const contextMenuState = atom({
key: 'contextMenuState',
default: {
visible: false,
x: 0,
y: 0,
},
dangerouslyAllowMutability: true,
})