diff --git a/src/hooks/roofcover/useAuxiliaryDrawing.js b/src/hooks/roofcover/useAuxiliaryDrawing.js index 37d1aa7a..68d27530 100644 --- a/src/hooks/roofcover/useAuxiliaryDrawing.js +++ b/src/hooks/roofcover/useAuxiliaryDrawing.js @@ -5,16 +5,6 @@ import { useEvent } from '@/hooks/useEvent' import { useMouse } from '@/hooks/useMouse' import { useLine } from '@/hooks/useLine' import { useTempGrid } from '@/hooks/useTempGrid' -import { - outerLineAngle1State, - outerLineAngle2State, - outerLineArrow1State, - outerLineArrow2State, - outerLineDiagonalState, - outerLineLength1State, - outerLineLength2State, - outerLineTypeState, -} from '@/store/outerLineAtom' import { calculateIntersection, distanceBetweenPoints, findClosestPoint, isPointOnLine } from '@/util/canvas-util' import { fabric } from 'fabric' import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint' @@ -23,6 +13,16 @@ import { usePopup } from '@/hooks/usePopup' import { calculateAngle, isSamePoint } from '@/util/qpolygon-utils' import { POLYGON_TYPE } from '@/common/common' import { useMessage } from '../useMessage' +import { + auxiliaryLineAngle1State, + auxiliaryLineAngle2State, + auxiliaryLineArrow1State, + auxiliaryLineArrow2State, + auxiliaryLineDiagonalState, + auxiliaryLineLength1State, + auxiliaryLineLength2State, + auxiliaryLineTypeState, +} from '@/store/auxiliaryLineAtom' // 보조선 작성 export function useAuxiliaryDrawing(id, isUseEffect = true) { @@ -49,20 +49,20 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) { const length2Ref = useRef(0) const angle1Ref = useRef('') const angle2Ref = useRef('') - const [length1, setLength1] = useRecoilState(outerLineLength1State) - const [length2, setLength2] = useRecoilState(outerLineLength2State) - const [arrow1, setArrow1] = useRecoilState(outerLineArrow1State) - const [arrow2, setArrow2] = useRecoilState(outerLineArrow2State) - const [type, setType] = useRecoilState(outerLineTypeState) - const [angle1, setAngle1] = useRecoilState(outerLineAngle1State) - const [angle2, setAngle2] = useRecoilState(outerLineAngle2State) - const [outerLineDiagonalLength, setOuterLineDiagonalLength] = useRecoilState(outerLineDiagonalState) + const [length1, setLength1] = useRecoilState(auxiliaryLineLength1State) + const [length2, setLength2] = useRecoilState(auxiliaryLineLength2State) + const [arrow1, setArrow1] = useRecoilState(auxiliaryLineArrow1State) + const [arrow2, setArrow2] = useRecoilState(auxiliaryLineArrow2State) + const [type, setType] = useRecoilState(auxiliaryLineTypeState) + const [angle1, setAngle1] = useRecoilState(auxiliaryLineAngle1State) + const [angle2, setAngle2] = useRecoilState(auxiliaryLineAngle2State) + const [auxiliaryLineDiagonalLength, setAuxiliaryLineDiagonalLength] = useRecoilState(auxiliaryLineDiagonalState) const arrow1Ref = useRef(arrow1) const arrow2Ref = useRef(arrow2) const typeRef = useRef(type) - const outerLineDiagonalLengthRef = useRef(0) + const auxiliaryLineDiagonalLengthRef = useRef(0) const intersectionPoints = useRef([]) const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState) @@ -124,7 +124,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) { setAngle1(0) setAngle2(0) - setOuterLineDiagonalLength(0) + setAuxiliaryLineDiagonalLength(0) } const move = (object, x, y) => { @@ -408,7 +408,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) { //대각선 완료될 경우 확인 const checkDiagonal = (direction) => { const activeElem = document.activeElement - const diagonalLength = outerLineDiagonalLengthRef.current.value // 대각선 길이 + const diagonalLength = auxiliaryLineDiagonalLengthRef.current.value // 대각선 길이 const length1Value = length1Ref.current.value @@ -913,9 +913,9 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) { angle2, setAngle2, angle2Ref, - outerLineDiagonalLength, - setOuterLineDiagonalLength, - outerLineDiagonalLengthRef, + auxiliaryLineDiagonalLength, + setAuxiliaryLineDiagonalLength, + auxiliaryLineDiagonalLengthRef, type, setType, handleFix, diff --git a/src/store/auxiliaryLineAtom.js b/src/store/auxiliaryLineAtom.js new file mode 100644 index 00000000..acecf0b3 --- /dev/null +++ b/src/store/auxiliaryLineAtom.js @@ -0,0 +1,71 @@ +import { atom } from 'recoil' + +// 보조선 타입 +export const AUXILIARY_LINE_TYPE = { + OUTER_LINE: 'outerLine', // 외벽선 + RIGHT_ANGLE: 'rightAngle', // 직각 + DOUBLE_PITCH: 'doublePitch', + ANGLE: 'angle', // 각도 + DIAGONAL_LINE: 'diagonalLine', // 대각선 +} + +/** + * 보조선 작성에서 사용하는 recoilState + */ + +export const auxiliaryLineLength1State = atom({ + //길이1 + key: 'auxiliaryLineLength1State', + default: 0, +}) + +export const auxiliaryLineLength2State = atom({ + // 길이2 + key: 'auxiliaryLineLength2State', + default: 0, +}) + +export const auxiliaryLineArrow1State = atom({ + // 방향1 + key: 'auxiliaryLineArrow1State', + default: '', +}) + +export const auxiliaryLineArrow2State = atom({ + // 방향2 + key: 'auxiliaryLineArrow2State', + default: '', +}) + +export const auxiliaryLineAngle1State = atom({ + // 각도1 + key: 'auxiliaryLineAngle1State', + default: 0, +}) + +export const auxiliaryLineAngle2State = atom({ + // 각도2 + key: 'auxiliaryLineAngle2State', + default: 0, +}) + +export const auxiliaryLineDiagonalState = atom({ + // 대각선 + key: 'auxiliaryLineDiagonalState', + default: 0, +}) + +export const auxiliaryLineTypeState = atom({ + key: 'auxiliaryLineTypeState', + default: AUXILIARY_LINE_TYPE.OUTER_LINE, +}) + +export const auxiliaryLinePointsState = atom({ + key: 'auxiliaryLinePointsState', + default: [], +}) + +export const auxiliaryLineFixState = atom({ + key: 'auxiliaryLineFixState', + default: false, +})