diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js index 1f6466f5..4204dc71 100644 --- a/src/hooks/useCanvasEvent.js +++ b/src/hooks/useCanvasEvent.js @@ -1,9 +1,10 @@ import { useEffect, useState } from 'react' import { useRecoilState, useRecoilValue } from 'recoil' import { v4 as uuidv4 } from 'uuid' -import { canvasSizeState, canvasState, canvasZoomState, currentObjectState } from '@/store/canvasAtom' +import { canvasSizeState, canvasState, canvasZoomState, currentMenuState, currentObjectState } from '@/store/canvasAtom' import { QPolygon } from '@/components/fabric/QPolygon' import { fontSelector } from '@/store/fontAtom' +import { MENU } from '@/common/common' // 캔버스에 필요한 이벤트 export function useCanvasEvent() { @@ -13,11 +14,16 @@ export function useCanvasEvent() { const canvasSize = useRecoilValue(canvasSizeState) const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState) const lengthTextOption = useRecoilValue(fontSelector('lengthText')) + const currentMenu = useRecoilValue(currentMenuState) useEffect(() => { canvas?.setZoom(canvasZoom / 100) }, [canvasZoom]) + useEffect(() => { + attachDefaultEventOnCanvas() + }, [currentMenu]) + // 기본적인 이벤트 필요시 추가 const attachDefaultEventOnCanvas = () => { removeEventOnCanvas() @@ -198,7 +204,7 @@ export function useCanvasEvent() { if (selected?.length > 0) { selected.forEach((obj) => { - if (obj.type === 'QPolygon') { + if (obj.type === 'QPolygon' && currentMenu !== MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) { obj.set({ stroke: 'red' }) } }) @@ -211,7 +217,7 @@ export function useCanvasEvent() { if (deselected?.length > 0) { deselected.forEach((obj) => { - if (obj.type === 'QPolygon') { + if (obj.type === 'QPolygon' && currentMenu !== MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) { if (obj.name !== 'moduleSetupSurface') { obj.set({ stroke: 'black' }) } @@ -227,7 +233,7 @@ export function useCanvasEvent() { if (deselected?.length > 0) { deselected.forEach((obj) => { - if (obj.type === 'QPolygon') { + if (obj.type === 'QPolygon' && currentMenu !== MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) { obj.set({ stroke: 'black' }) } }) @@ -235,7 +241,7 @@ export function useCanvasEvent() { if (selected?.length > 0) { selected.forEach((obj) => { - if (obj.type === 'QPolygon') { + if (obj.type === 'QPolygon' && currentMenu !== MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) { obj.set({ stroke: 'red' }) } })