diff --git a/src/hooks/roofcover/useMovementSetting.js b/src/hooks/roofcover/useMovementSetting.js index f09aee6b..2141eb43 100644 --- a/src/hooks/roofcover/useMovementSetting.js +++ b/src/hooks/roofcover/useMovementSetting.js @@ -1,10 +1,11 @@ import { useRecoilValue } from 'recoil' -import { canvasState } from '@/store/canvasAtom' +import { canvasState, currentObjectState } from '@/store/canvasAtom' import { usePopup } from '@/hooks/usePopup' import { useMessage } from '@/hooks/useMessage' import { useEffect, useRef, useState } from 'react' import { useEvent } from '@/hooks/useEvent' import { POLYGON_TYPE } from '@/common/common' +import { OUTER_LINE_TYPE } from '@/store/outerLineAtom' //동선이동 형 올림 내림 export function useMovementSetting(id) { @@ -16,6 +17,7 @@ export function useMovementSetting(id) { const { initEvent, addCanvasMouseEventListener } = useEvent() const { closePopup } = usePopup() const { getMessage } = useMessage() + const currentObject = useRecoilValue(currentObjectState) const buttonType = [ { id: 1, name: getMessage('modal.movement.flow.line.move'), type: TYPE.FLOW_LINE }, { id: 2, name: getMessage('modal.movement.flow.line.updown'), type: TYPE.UP_DOWN }, @@ -46,8 +48,11 @@ export function useMovementSetting(id) { wallLines.forEach((line) => { line.set({ visible: false }) }) + const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true outerLines.forEach((line) => { + line.set({ stroke: 'black' }) + line.set({ visible: true }) line.bringToFront() line.set({ selectable: true }) }) @@ -64,6 +69,22 @@ export function useMovementSetting(id) { } }, []) + useEffect(() => { + const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true + outerLines.forEach((line) => { + line.set({ stroke: 'black' }) + }) + if (!currentObject) { + return + } + + if (currentObject.name === OUTER_LINE_TYPE.OUTER_LINE) { + currentObject.set({ stroke: 'red' }) + currentObject.bringToFront() + } + canvas.renderAll() + }, [currentObject]) + const mouseMoveEvent = (e) => { if (typeRef.current === TYPE.FLOW_LINE) { flowLineEvent(e)