diff --git a/src/hooks/roofcover/useMovementSetting.js b/src/hooks/roofcover/useMovementSetting.js index f3a30473..3b285e77 100644 --- a/src/hooks/roofcover/useMovementSetting.js +++ b/src/hooks/roofcover/useMovementSetting.js @@ -245,19 +245,17 @@ export function useMovementSetting(id) { let currentCalculatedValue = 0 const mouseMoveEvent = (e) => { - + //console.log('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'); - } - } - - + // 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) @@ -286,14 +284,38 @@ export function useMovementSetting(id) { 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 + wall.lines.forEach(line => { + + console.log(classifyWallLine(wall, line)) + + }) + + let linePosition = classifyWallLine(wall, target).position; if (target.y1 === target.y2) { //수평벽 + + const setRadioStates = (isUp) => { + if (UP_DOWN_REF.UP_RADIO_REF.current) { + UP_DOWN_REF.UP_RADIO_REF.current.checked = isUp; + } + if (UP_DOWN_REF.DOWN_RADIO_REF.current) { + UP_DOWN_REF.DOWN_RADIO_REF.current.checked = !isUp; + } + }; + + if (linePosition === 'top') { + setRadioStates(value.s !== -1); + } else if (linePosition === 'bottom') { + setRadioStates(value.s !== 1); + } + + + /* checkPoint = { x: midX.toNumber(), y: midY.plus(10).toNumber() } if (wall.inPolygon(checkPoint)) { //선택라인이 내부 - if (value.s !== -1) { - console.log('-1value:::', value.s) + 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 { @@ -302,7 +324,7 @@ export function useMovementSetting(id) { } } else { // if (value.s === 1) { //선택라인이 외부 - console.log('+1value:::', value.s) + console.log('2value:::', 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 { @@ -310,18 +332,38 @@ export function useMovementSetting(id) { if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false } } + */ } else { + + const setRadioStates = (isUp) => { + if (UP_DOWN_REF.UP_RADIO_REF.current) { + UP_DOWN_REF.UP_RADIO_REF.current.checked = isUp; + } + if (UP_DOWN_REF.DOWN_RADIO_REF.current) { + UP_DOWN_REF.DOWN_RADIO_REF.current.checked = !isUp; + } + }; + + if (linePosition === 'left') { + setRadioStates(value.s !== 1); + } else if (linePosition === 'right') { + setRadioStates(value.s !== -1); + } + /* checkPoint = { x: midX.plus(10).toNumber(), y: midY.toNumber() } if (wall.inPolygon(checkPoint)) { - if (value.s !== 1) { + if (value.s === 1) { + console.log('3value:::', 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 { 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 { @@ -329,6 +371,7 @@ export function useMovementSetting(id) { if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false } } + */ } } } @@ -406,6 +449,7 @@ export function useMovementSetting(id) { roof.moveSelectLine = target; const wall = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.WALL && obj.attributes.roofId === roofId) const baseLines = wall.baseLines + let centerPoint = wall.getCenterPoint(); let targetBaseLines = [] let isGableRoof if (typeRef.current === TYPE.FLOW_LINE) { @@ -544,6 +588,7 @@ export function useMovementSetting(id) { value = value.neg() } } else { + console.log("error::", UP_DOWN_REF) value = UP_DOWN_REF.FILLED_INPUT_REF.current.value !== '' ? Big(UP_DOWN_REF.FILLED_INPUT_REF.current.value) @@ -566,15 +611,33 @@ export function useMovementSetting(id) { // } 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() - } } + + let linePosition = classifyWallLine(wall, target).position; + + value = value.div(10) targetBaseLines .filter((line) => Math.sqrt(Math.pow(line.line.x2 - line.line.x1, 2) + Math.pow(line.line.y2 - line.line.y1, 2)) >= 1) .forEach((target) => { const currentLine = target.line + + console.log("linePosition::::::::::::::", linePosition) + if (UP_DOWN_REF.DOWN_RADIO_REF.current.checked ){ + //position확인 + if(linePosition === 'bottom' || linePosition === 'right') { + console.log("1value::::::::::::::", value.toString()) + value = value.neg() + + } + }else { + if(linePosition === 'top' || linePosition === 'left') { + console.log("1value::::::::::::::", value.toString()) + value = value.neg() + } + } + + console.log("2value::::::::::::::", value.toString()) const index = baseLines.findIndex((line) => line === currentLine) const nextLine = baseLines[(index + 1) % baseLines.length] const prevLine = baseLines[(index - 1 + baseLines.length) % baseLines.length] @@ -627,6 +690,55 @@ export function useMovementSetting(id) { closePopup(id) } + // javascript + const classifyWallLine = (wall, line, epsilon = 0.5, offset = 10)=> { + if (!wall || !line) return { orientation: 'unknown', position: 'unknown' } + + const center = wall.getCenterPoint() + const dx = Math.abs(line.x2 - line.x1) + const dy = Math.abs(line.y2 - line.y1) + + let orientation = 'slanted' + if (dy < epsilon && dx >= epsilon) orientation = 'horizontal' + else if (dx < epsilon && dy >= epsilon) orientation = 'vertical' + else orientation = dx > dy ? 'horizontal' : 'vertical' + + const midX = (line.x1 + line.x2) / 2 + const midY = (line.y1 + line.y2) / 2 + + // checkPoint: mid에서 center 방향으로 약간 이동한 점을 계산 + let checkX = midX + let checkY = midY + if (orientation === 'horizontal') { + const dir = Math.sign(center.y - midY) || 1 + checkY = midY + dir * offset + } else if (orientation === 'vertical') { + const dir = Math.sign(center.x - midX) || 1 + checkX = midX + dir * offset + } else { + const dirX = Math.sign(center.x - midX) || 1 + const dirY = Math.sign(center.y - midY) || 1 + checkX = midX + dirX * offset + checkY = midY + dirY * offset + } + + const inside = typeof wall.inPolygon === 'function' ? wall.inPolygon({ x: checkX, y: checkY }) : true + + let position = 'unknown' + if (orientation === 'horizontal') { + const dir = center.y - midY + if (inside) position = dir > 0 ? 'top' : 'bottom' + else position = dir > 0 ? 'bottom' : 'top' + } else if (orientation === 'vertical') { + const dir = center.x - midX + if (inside) position = dir > 0 ? 'left' : 'right' + else position = dir > 0 ? 'right' : 'left' + } + + return { orientation, position, mid: { x: midX, y: midY }, center, checkPoint: { x: checkX, y: checkY }, inside } + } + + return { TYPE, closePopup, @@ -636,5 +748,7 @@ export function useMovementSetting(id) { FLOW_LINE_REF, UP_DOWN_REF, handleSave, + classifyWallLine } } +