diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index 4e8b5a01..ec47b201 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -29,6 +29,7 @@ import { modalContent, modalState } from '@/store/modalAtom' import { useAxios } from '@/hooks/useAxios' import QPolygonContextMenu from '@/components/common/context-menu/QPolygonContextMenu' import QLineContextMenu from '@/components/common/context-menu/QLineContextMenu' +import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMenu' import InitSettingsModal from './InitSettingsModal' import GridSettingsModal from './GridSettingsModal' @@ -599,7 +600,7 @@ export default function Roof2(props) { 모드 DEFAULT setMode(Mode.DRAW_LINE)}> - 기준선 긋기 모드 + 임의 그리드 모드 setMode(Mode.EDIT)}> 에디팅모드 @@ -767,7 +768,9 @@ export default function Roof2(props) { - {!canvas ? null : currentObject?.type === 'QPolygon' ? ( + {!canvas ? null : mode === Mode.DRAW_LINE ? ( + + ) : currentObject?.type === 'QPolygon' ? ( ) : currentObject?.type === 'QLine' ? ( diff --git a/src/components/common/context-menu/QEmptyContextMenu.jsx b/src/components/common/context-menu/QEmptyContextMenu.jsx new file mode 100644 index 00000000..c4734fc4 --- /dev/null +++ b/src/components/common/context-menu/QEmptyContextMenu.jsx @@ -0,0 +1,50 @@ +'use client' +import { useEffect, useState } from 'react' +import { useRecoilState, useRecoilValue } from 'recoil' + +export default function QEmptyContextMenu(props) { + const { contextRef, canvasProps } = props + + // const children = useRecoilValue(modalContent) + const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 }) + + useEffect(() => { + if (!contextRef.current) return + + const handleContextMenu = (e) => { + e.preventDefault() //기존 contextmenu 막고 + setContextMenu({ visible: true, x: e.pageX, y: e.pageY }) + canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제 + } + + const handleClick = (e) => { + e.preventDefault() + setContextMenu({ ...contextMenu, visible: false }) + } + + const handleOutsideClick = (e) => { + e.preventDefault() + if (contextMenu.visible && !ref.current.contains(e.target)) { + setContextMenu({ ...contextMenu, visible: false }) + } + } + + // Prevent the default context menu from appearing on the canvas + canvasProps.upperCanvasEl.addEventListener('contextmenu', handleContextMenu) + document.addEventListener('click', handleClick) + document.addEventListener('click', handleOutsideClick) + + return () => { + // canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) + document.removeEventListener('click', handleClick) + document.removeEventListener('click', handleOutsideClick) + } + }, [contextRef, contextMenu]) + + const handleMenuClick = (option) => { + alert(`option ${option} clicked`) + setContextMenu({ ...contextMenu, visible: false }) + } + + return <>> +} diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index f5fe698e..ae970461 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -365,10 +365,13 @@ export function useMode() { canvas?.off('mouse:down') switch (mode) { case 'drawLine': - canvas?.on('mouse:down', mouseEvent.drawLineMode) + canvas?.on('mouse:down', mouseEvent.drawLineModeLeftClick) + window.document.removeEventListener('contextmenu', mouseEvent.drawLineModeRightClick) + window.document.addEventListener('contextmenu', mouseEvent.drawLineModeRightClick) break case 'edit': canvas?.on('mouse:down', mouseEvent.editMode) + break case 'textbox': canvas?.on('mouse:down', mouseEvent.textboxMode) @@ -655,7 +658,7 @@ export function useMode() { } const mouseEvent = { - drawLineMode: (options) => { + drawLineModeLeftClick: (options) => { const pointer = canvas?.getPointer(options.e) const line = new QLine( @@ -672,6 +675,21 @@ export function useMode() { canvas?.add(line) canvas?.renderAll() }, + drawLineModeRightClick: (options) => { + const line = new fabric.Line( + [0, options.offsetY, canvas.width, options.offsetY], // y축에 1자 선을 그립니다. + { + stroke: 'black', + strokeWidth: 2, + viewLengthText: true, + selectable: false, + fontSize: fontSize, + }, + ) + + canvas?.add(line) + canvas?.renderAll() + }, editMode: (options) => { let pointer = canvas?.getPointer(options.e)