From a75ea4c98abdcfa7d6970319813989184d3c6ace Mon Sep 17 00:00:00 2001 From: ysCha Date: Wed, 29 Oct 2025 16:02:28 +0900 Subject: [PATCH] =?UTF-8?q?=ED=98=84=EC=9D=98=20=EC=83=81(out),=20?= =?UTF-8?q?=ED=95=98(in)=20=EC=9D=98=EB=AF=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/roofcover/useMovementSetting.js | 200 ++++++++++++++-------- 1 file changed, 124 insertions(+), 76 deletions(-) diff --git a/src/hooks/roofcover/useMovementSetting.js b/src/hooks/roofcover/useMovementSetting.js index d4c9ff9f..f3a30473 100644 --- a/src/hooks/roofcover/useMovementSetting.js +++ b/src/hooks/roofcover/useMovementSetting.js @@ -91,7 +91,7 @@ export function useMovementSetting(id) { } wall.baseLines.forEach((line) => { if (type === TYPE.UP_DOWN) { - line.set({ selectable: true, visible: true, stroke: '#1083E3', strokeWidth: 5 }) + line.set({ selectable: true, visible: true, stroke: '#1085E5', strokeWidth: 5 }) line.setCoords() line.bringToFront() } else { @@ -102,7 +102,7 @@ export function useMovementSetting(id) { /** outerLines 속성처리*/ const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') - outerLines.forEach((line) => line.set({ visible: false })) + outerLines.forEach((line) => line.set({ visible: true })) canvas.renderAll() }, [type]) @@ -194,101 +194,144 @@ export function useMovementSetting(id) { canvas.renderAll() }, [currentObject]) + const clearRef = () => { if (type === TYPE.FLOW_LINE) { - FLOW_LINE_REF.POINTER_INPUT_REF.current.value = '' - FLOW_LINE_REF.FILLED_INPUT_REF.current.value = '' - - if (FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked || FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked) { - // If one is checked, uncheck the other - FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = !FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked; - FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = !FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked; - }else{ - FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true - FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = false + // 안전한 ref 접근 + if (FLOW_LINE_REF.POINTER_INPUT_REF.current) { + FLOW_LINE_REF.POINTER_INPUT_REF.current.value = '' + } + if (FLOW_LINE_REF.FILLED_INPUT_REF.current) { + FLOW_LINE_REF.FILLED_INPUT_REF.current.value = '' } + const upRightChecked = FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current?.checked || false + const downLeftChecked = FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current?.checked || false + + if (upRightChecked || downLeftChecked) { + if (FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current) { + FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = !downLeftChecked + } + if (FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current) { + FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = !upRightChecked + } + } else { + if (FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current) { + FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true + } + if (FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current) { + FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = false + } + } } + if (type === TYPE.UP_DOWN) { - UP_DOWN_REF.POINTER_INPUT_REF.current.value = '' - UP_DOWN_REF.FILLED_INPUT_REF.current.value = '' - UP_DOWN_REF.UP_RADIO_REF.current.checked = true - UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false + // 안전한 ref 접근 + if (UP_DOWN_REF.POINTER_INPUT_REF.current) { + UP_DOWN_REF.POINTER_INPUT_REF.current.value = '' + } + if (UP_DOWN_REF.FILLED_INPUT_REF.current) { + UP_DOWN_REF.FILLED_INPUT_REF.current.value = '' + } + if (UP_DOWN_REF.UP_RADIO_REF.current) { + UP_DOWN_REF.UP_RADIO_REF.current.checked = true + } + if (UP_DOWN_REF.DOWN_RADIO_REF.current) { + UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false + } } } let currentCalculatedValue = 0 const mouseMoveEvent = (e) => { + const target = canvas.getActiveObject() if (!target) return + // 디버깅 로그 추가 + if (typeRef.current === TYPE.UP_DOWN) { + console.log('UP_DOWN_REF.POINTER_INPUT_REF.current:', UP_DOWN_REF.POINTER_INPUT_REF.current); + if (!UP_DOWN_REF.POINTER_INPUT_REF.current) { + console.warn('UP_DOWN_REF.POINTER_INPUT_REF.current is null/undefined'); + } + } + + + const { top: targetTop, left: targetLeft } = target - const currentX = Big(getIntersectMousePoint(e).x) //.round(0, Big.roundUp) - const currentY = Big(getIntersectMousePoint(e).y) //.round(0, Big.roundUp) + const currentX = Big(getIntersectMousePoint(e).x) + const currentY = Big(getIntersectMousePoint(e).y) let value = '' if (Math.abs(target.y1 - target.y2) < 0.5) { - // 가로라인의 경우 value = Big(targetTop).minus(currentY).times(10).round(0) - console.log('가로라인 계산:', `${targetTop} - ${currentY.toNumber()} = ${value.toNumber()}`) } else { - // 세로라인의 경우 value = Big(targetLeft).minus(currentX).times(10).round(0).neg() - console.log('세로라인 계산:', `-(${targetLeft} - ${currentX.toNumber()}) = ${value.toNumber()}`) } currentCalculatedValue = value.toNumber() - if (typeRef.current === TYPE.FLOW_LINE) { - FLOW_LINE_REF.POINTER_INPUT_REF.current.value = value.toNumber() - } else { - UP_DOWN_REF.POINTER_INPUT_REF.current.value = value.abs().toNumber() - const midX = Big(target.x1).plus(target.x2).div(2) - const midY = Big(target.y1).plus(target.y2).div(2) - const wall = canvas.getObjects().find((obj) => obj.id === target.attributes.wallId) - let checkPoint - if (target.y1 === target.y2) { - checkPoint = { x: midX.toNumber(), y: midY.plus(10).toNumber() } - if (wall.inPolygon(checkPoint)) { - if (value.s === -1) { - UP_DOWN_REF.UP_RADIO_REF.current.checked = false - UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true - } else { - UP_DOWN_REF.UP_RADIO_REF.current.checked = true - UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false - } - } else { - if (value.s === 1) { - UP_DOWN_REF.UP_RADIO_REF.current.checked = false - UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true - } else { - UP_DOWN_REF.UP_RADIO_REF.current.checked = true - UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false - } - } + if (typeRef.current === TYPE.FLOW_LINE) { + // ref가 존재하는지 확인 후 값 설정 + if (FLOW_LINE_REF.POINTER_INPUT_REF.current) { + FLOW_LINE_REF.POINTER_INPUT_REF.current.value = value.toNumber() + } + } else { + // UP_DOWN 타입일 때 안전한 접근 + if (UP_DOWN_REF.POINTER_INPUT_REF.current) { + UP_DOWN_REF.POINTER_INPUT_REF.current.value = value.abs().toNumber() + } + + const midX = Big(target.x1).plus(target.x2).div(2) + const midY = Big(target.y1).plus(target.y2).div(2) + const wall = canvas.getObjects().find((obj) => obj.id === target.attributes.wallId) + let checkPoint + + + if (target.y1 === target.y2) { //수평벽 + checkPoint = { x: midX.toNumber(), y: midY.plus(10).toNumber() } + if (wall.inPolygon(checkPoint)) { //선택라인이 내부 + if (value.s !== -1) { + console.log('-1value:::', value.s) + if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = false + if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true } else { - checkPoint = { x: midX.plus(10).toNumber(), y: midY.toNumber() } - if (wall.inPolygon(checkPoint)) { - if (value.s === 1) { - UP_DOWN_REF.UP_RADIO_REF.current.checked = false - UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true - } else { - UP_DOWN_REF.UP_RADIO_REF.current.checked = true - UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false - } - } else { - if (value.s === -1) { - UP_DOWN_REF.UP_RADIO_REF.current.checked = false - UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true - } else { - UP_DOWN_REF.UP_RADIO_REF.current.checked = true - UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false - } - } + if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = true + if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false + } + } else { // + if (value.s === 1) { //선택라인이 외부 + console.log('+1value:::', value.s) + if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = false + if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true + } else { + if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = true + if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false + } + } + } else { + checkPoint = { x: midX.plus(10).toNumber(), y: midY.toNumber() } + if (wall.inPolygon(checkPoint)) { + if (value.s !== 1) { + if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = false + if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true + } else { + if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = true + if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false + } + } else { + if (value.s === -1) { + if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = false + if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true + } else { + if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = true + if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false } } } + } + } @@ -348,14 +391,15 @@ export function useMovementSetting(id) { const roof = canvas.getObjects().find((obj) => obj.id === roofId) // 현이동, 동이동 추가 - let flPointValue = FLOW_LINE_REF.POINTER_INPUT_REF.current?.value??0; - let flFilledValue = FLOW_LINE_REF.FILLED_INPUT_REF.current?.value??0; - flPointValue = (flFilledValue > 0 || flFilledValue < 0)? flFilledValue : flPointValue; + let flPointValue = FLOW_LINE_REF.POINTER_INPUT_REF.current?.value ?? 0; + let flFilledValue = FLOW_LINE_REF.FILLED_INPUT_REF.current?.value ?? 0; + flPointValue = (flFilledValue > 0 || flFilledValue < 0) ? flFilledValue : flPointValue; const moveFlowLine = typeRef.current === TYPE.FLOW_LINE ? flPointValue : 0 - let udPointValue = UP_DOWN_REF.POINTER_INPUT_REF.current?.value??0; - let udFilledValue = UP_DOWN_REF.FILLED_INPUT_REF.current?.value??0; + + let udPointValue = UP_DOWN_REF.POINTER_INPUT_REF.current?.value ?? 0; + let udFilledValue = UP_DOWN_REF.FILLED_INPUT_REF.current?.value ?? 0; udPointValue = udFilledValue > 0 ? udFilledValue : udPointValue; - const moveUpDown = typeRef.current === TYPE.UP_DOWN ? udPointValue: 0 + const moveUpDown = typeRef.current === TYPE.UP_DOWN ? udPointValue : 0 roof.moveFlowLine = parseInt(moveFlowLine, 10) || 0; roof.moveUpDown = parseInt(moveUpDown, 10) || 0; roof.moveDirect = ""; @@ -448,6 +492,7 @@ export function useMovementSetting(id) { break } } else { + roof.moveDirect = UP_DOWN_REF.UP_RADIO_REF.current.checked ? 'out' : UP_DOWN_REF.DOWN_RADIO_REF.current.checked ? 'in' : 'out' targetBaseLines.push({ line: target, distance: 0 }) } @@ -516,9 +561,12 @@ export function useMovementSetting(id) { const inPolygon = wall.inPolygon(checkPoint) - if (UP_DOWN_REF.UP_RADIO_REF.current.checked && inPolygon) { - value = value.neg() - } else if (UP_DOWN_REF.DOWN_RADIO_REF.current.checked && !inPolygon) { + // if (UP_DOWN_REF.UP_RADIO_REF.current.checked && inPolygon) { + // value = value.neg() + // } else if (UP_DOWN_REF.DOWN_RADIO_REF.current.checked && !inPolygon) { + // value = value.neg() + // } + if (UP_DOWN_REF.DOWN_RADIO_REF.current.checked){ value = value.neg() } }