diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js index 028eb492..24073c0e 100644 --- a/src/hooks/roofcover/useRoofAllocationSetting.js +++ b/src/hooks/roofcover/useRoofAllocationSetting.js @@ -1,6 +1,6 @@ import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil' import { canvasState, currentAngleTypeSelector, currentObjectState } from '@/store/canvasAtom' -import { useContext, useEffect, useState } from 'react' +import { useContext, useEffect, useRef, useState } from 'react' import { useAxios } from '@/hooks/useAxios' import { useSwal } from '@/hooks/useSwal' import { usePolygon } from '@/hooks/usePolygon' @@ -76,6 +76,8 @@ export function useRoofAllocationSetting(id) { const { changeCorridorDimensionText } = useText() const { saveSnapshot, clearStacks } = useUndoRedo() const outlineDisplay = useRecoilValue(outlineDisplaySelector) + // [UNSELECT-RESTORE] 보조선/능선/골짜기 선택 강조 시 직전 스타일을 저장 → 선택 해제·변경·팝업 닫힘 때 원복 + const highlightedLineRef = useRef(null) useEffect(() => { /** 배치면 초기설정에서 선택한 지붕재 배열 설정 */ @@ -86,6 +88,13 @@ export function useRoofAllocationSetting(id) { /** 지붕면 조회 */ const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) /** roofPolygon.innerLines */ + // [UNSELECT-RESTORE] 이전에 강조했던 라인을 선택 해제·변경 시 원래 스타일로 복구 + const prevHighlighted = highlightedLineRef.current + if (prevHighlighted && prevHighlighted.obj !== currentObject) { + prevHighlighted.obj.set({ stroke: prevHighlighted.stroke, strokeWidth: prevHighlighted.strokeWidth }) + highlightedLineRef.current = null + } + roofBases.forEach((roof) => { roof.innerLines.forEach((line) => { /** 실측값이 없는 경우 라인 두께 4로 설정 */ @@ -102,8 +111,14 @@ export function useRoofAllocationSetting(id) { /** 현재 선택된 객체가 보조라인, 피라미드, 힙인 경우 두께 4로 설정 */ if (currentObject && currentObject.name && ['auxiliaryLine', 'ridge', 'hip'].includes(currentObject.name)) { + // [UNSELECT-RESTORE] 강조 직전(innerLines 리셋 반영 후) 스타일을 1회만 저장해 복구 기준으로 사용 + if (highlightedLineRef.current?.obj !== currentObject) { + highlightedLineRef.current = { obj: currentObject, stroke: currentObject.stroke, strokeWidth: currentObject.strokeWidth } + } currentObject.set({ strokeWidth: 4, stroke: '#EA10AC' }) } + + canvas.renderAll() }, [currentObject]) useEffect(() => { @@ -118,6 +133,18 @@ export function useRoofAllocationSetting(id) { fetchBasicSettings(basicSetting.planNo) }, []) + // [UNSELECT-RESTORE] 팝업 닫힘(언마운트) 시 마지막으로 강조한 라인을 원래 스타일로 복구 + useEffect(() => { + return () => { + const highlighted = highlightedLineRef.current + if (highlighted) { + highlighted.obj.set({ stroke: highlighted.stroke, strokeWidth: highlighted.strokeWidth }) + highlightedLineRef.current = null + canvas?.renderAll() + } + } + }, []) + /** * 배치면 초기설정 조회 */