qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dev #411

Merged
ysCha merged 10 commits from dev into prd-deploy 2025-11-03 09:17:00 +09:00
Conversation 0 Commits 10 Files Changed 3 +1167 -272
3 changed files with 1167 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/floor-plan/modal/movement/type/Updown.jsx
View File

@ -12,7 +12,7 @@ const UP_DOWN_TYPE = {
export default function Updown({ UP_DOWN_REF }) { export default function Updown({ UP_DOWN_REF }) {
const { getMessage } = useMessage() const { getMessage } = useMessage()
const [type, setType] = useState(UP_DOWN_TYPE.UP) const [type, setType] = useState(UP_DOWN_TYPE.UP)
const [filledInput, setFilledInput] = useState('') const [filledInput, setFilledInput] = useState('100')
const currentObject = useRecoilValue(currentObjectState) const currentObject = useRecoilValue(currentObjectState)
const handleFocus = () => { const handleFocus = () => {
if (currentObject === null) { if (currentObject === null) {
@ -71,7 +71,6 @@ export default function Updown({ UP_DOWN_REF }) {
<input <input
type="text" type="text"
className="input-origin block" className="input-origin block"
defaultValue={100}
ref={UP_DOWN_REF.FILLED_INPUT_REF} ref={UP_DOWN_REF.FILLED_INPUT_REF}
value={filledInput} value={filledInput}
onFocus={handleFocus} onFocus={handleFocus}

319
src/hooks/roofcover/useMovementSetting.js
View File

@ -8,6 +8,7 @@ import { useSwal } from '@/hooks/useSwal'
import { LINE_TYPE, POLYGON_TYPE } from '@/common/common' import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
import Big from 'big.js' import Big from 'big.js'
import { calcLinePlaneSize } from '@/util/qpolygon-utils' import { calcLinePlaneSize } from '@/util/qpolygon-utils'
import { getSelectLinePosition } from '@/util/skeleton-utils'
import { useMouse } from '@/hooks/useMouse' import { useMouse } from '@/hooks/useMouse'
//동선이동 형 올림 내림 //동선이동 형 올림 내림
@ -91,7 +92,7 @@ export function useMovementSetting(id) {
} }
wall.baseLines.forEach((line) => { wall.baseLines.forEach((line) => {
if (type === TYPE.UP_DOWN) { 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.setCoords()
line.bringToFront() line.bringToFront()
} else { } else {
@ -102,7 +103,7 @@ export function useMovementSetting(id) {
/** outerLines 속성처리*/ /** outerLines 속성처리*/
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') 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() canvas.renderAll()
}, [type]) }, [type])
@ -194,101 +195,215 @@ export function useMovementSetting(id) {
canvas.renderAll() canvas.renderAll()
}, [currentObject]) }, [currentObject])
const clearRef = () => { const clearRef = () => {
if (type === TYPE.FLOW_LINE) { if (type === TYPE.FLOW_LINE) {
FLOW_LINE_REF.POINTER_INPUT_REF.current.value = '' // 안전한 ref 접근
FLOW_LINE_REF.FILLED_INPUT_REF.current.value = '' if (FLOW_LINE_REF.POINTER_INPUT_REF.current) {
FLOW_LINE_REF.POINTER_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 if (FLOW_LINE_REF.FILLED_INPUT_REF.current) {
FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = !FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked; FLOW_LINE_REF.FILLED_INPUT_REF.current.value = ''
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
} }
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) { if (type === TYPE.UP_DOWN) {
UP_DOWN_REF.POINTER_INPUT_REF.current.value = '' // 안전한 ref 접근
UP_DOWN_REF.FILLED_INPUT_REF.current.value = '' if (UP_DOWN_REF.POINTER_INPUT_REF.current) {
UP_DOWN_REF.UP_RADIO_REF.current.checked = true UP_DOWN_REF.POINTER_INPUT_REF.current.value = ''
UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false }
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 let currentCalculatedValue = 0
const mouseMoveEvent = (e) => { const mouseMoveEvent = (e) => {
//console.log('mouseMoveEvent:::::',e)
const target = canvas.getActiveObject() const target = canvas.getActiveObject()
if (!target) return 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 { top: targetTop, left: targetLeft } = target
const currentX = Big(getIntersectMousePoint(e).x) //.round(0, Big.roundUp) const currentX = Big(getIntersectMousePoint(e).x)
const currentY = Big(getIntersectMousePoint(e).y) //.round(0, Big.roundUp) const currentY = Big(getIntersectMousePoint(e).y)
let value = '' let value = ''
if (Math.abs(target.y1 - target.y2) < 0.5) { let direction = ''
// 가로라인의 경우
if (Math.abs(target.y1 - target.y2) < 0.5) { // 수평 라인
value = Big(targetTop).minus(currentY).times(10).round(0) value = Big(targetTop).minus(currentY).times(10).round(0)
console.log('가로라인 계산:', `${targetTop} - ${currentY.toNumber()} = ${value.toNumber()}`)
} else { // 방향 감지
// 세로라인의 경우 if (value.toNumber() > 0) {
direction = 'up' // 마우스가 라인 위쪽에 있음 (위로 움직임)
} else if (value.toNumber() < 0) {
direction = 'down' // 마우스가 라인 아래쪽에 있음 (아래로 움직임)
}
} else { // 수직 라인
value = Big(targetLeft).minus(currentX).times(10).round(0).neg() value = Big(targetLeft).minus(currentX).times(10).round(0).neg()
console.log('세로라인 계산:', `-(${targetLeft} - ${currentX.toNumber()}) = ${value.toNumber()}`)
// 방향 감지
if (value.toNumber() > 0) {
direction = 'right' // 마우스가 라인 오른쪽에 있음 (오른쪽으로 움직임)
} else if (value.toNumber() < 0) {
direction = 'left' // 마우스가 라인 왼쪽에 있음 (왼쪽으로 움직임)
}
} }
// 방향 정보를 사용하여 라디오 버튼 상태 업데이트
//console.log(`방향: ${direction}, 값: ${value.toNumber()}`)
currentCalculatedValue = value.toNumber() currentCalculatedValue = value.toNumber()
if (typeRef.current === TYPE.FLOW_LINE) { if (typeRef.current === TYPE.FLOW_LINE) {
FLOW_LINE_REF.POINTER_INPUT_REF.current.value = value.toNumber() // ref가 존재하는지 확인 후 값 설정
} else { if (FLOW_LINE_REF.POINTER_INPUT_REF.current) {
UP_DOWN_REF.POINTER_INPUT_REF.current.value = value.abs().toNumber() FLOW_LINE_REF.POINTER_INPUT_REF.current.value = value.toNumber()
const midX = Big(target.x1).plus(target.x2).div(2) }
const midY = Big(target.y1).plus(target.y2).div(2) } else {
const wall = canvas.getObjects().find((obj) => obj.id === target.attributes.wallId) // UP_DOWN 타입일 때 안전한 접근
let checkPoint if (UP_DOWN_REF.POINTER_INPUT_REF.current) {
if (target.y1 === target.y2) { UP_DOWN_REF.POINTER_INPUT_REF.current.value = value.abs().toNumber()
checkPoint = { x: midX.toNumber(), y: midY.plus(10).toNumber() } }
if (wall.inPolygon(checkPoint)) {
if (value.s === -1) { const midX = Big(target.x1).plus(target.x2).div(2)
UP_DOWN_REF.UP_RADIO_REF.current.checked = false const midY = Big(target.y1).plus(target.y2).div(2)
UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true const wall = canvas.getObjects().find((obj) => obj.id === target.attributes.wallId)
} else {
UP_DOWN_REF.UP_RADIO_REF.current.checked = true
UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false
} const result = getSelectLinePosition(wall, target, {
} else { testDistance: 5, // 테스트 거리
if (value.s === 1) { debug: true // 디버깅 로그 출력
UP_DOWN_REF.UP_RADIO_REF.current.checked = false });
UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true //console.log("1111litarget:::::", target);
} else { //console.log("1111linePosition:::::", result.position); // 'top', 'bottom', 'left', 'right'
UP_DOWN_REF.UP_RADIO_REF.current.checked = true
UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false let linePosition = result.position;
} //console.log("1111linePosition:::::", direction, linePosition);
}
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);
}
if(direction === 'up') {
}
/*
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 { } else {
checkPoint = { x: midX.plus(10).toNumber(), y: midY.toNumber() } if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = true
if (wall.inPolygon(checkPoint)) { if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false
if (value.s === 1) { }
UP_DOWN_REF.UP_RADIO_REF.current.checked = false } else { //
UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true if (value.s === 1) { //선택라인이 외부
} else { console.log('2value:::', value.s)
UP_DOWN_REF.UP_RADIO_REF.current.checked = true if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = false
UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = true
} } else {
} else { if (UP_DOWN_REF.UP_RADIO_REF.current) UP_DOWN_REF.UP_RADIO_REF.current.checked = true
if (value.s === -1) { if (UP_DOWN_REF.DOWN_RADIO_REF.current) UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false
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 {
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) {
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 {
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,20 +463,23 @@ export function useMovementSetting(id) {
const roof = canvas.getObjects().find((obj) => obj.id === roofId) const roof = canvas.getObjects().find((obj) => obj.id === roofId)
// 현이동, 동이동 추가 // 현이동, 동이동 추가
let flPointValue = FLOW_LINE_REF.POINTER_INPUT_REF.current?.value??0; let flPointValue = FLOW_LINE_REF.POINTER_INPUT_REF.current?.value ?? 0;
let flFilledValue = FLOW_LINE_REF.FILLED_INPUT_REF.current?.value??0; let flFilledValue = FLOW_LINE_REF.FILLED_INPUT_REF.current?.value ?? 0;
flPointValue = (flFilledValue > 0 || flFilledValue < 0)? flFilledValue : flPointValue; flPointValue = (flFilledValue > 0 || flFilledValue < 0) ? flFilledValue : flPointValue;
const moveFlowLine = typeRef.current === TYPE.FLOW_LINE ? flPointValue : 0 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; 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.moveFlowLine = parseInt(moveFlowLine, 10) || 0;
roof.moveUpDown = parseInt(moveUpDown, 10) || 0; roof.moveUpDown = parseInt(moveUpDown, 10) || 0;
roof.moveDirect = ""; roof.moveDirect = "";
roof.moveSelectLine = target; roof.moveSelectLine = target
//console.log("target::::", target, roof.moveSelectLine)
const wall = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.WALL && obj.attributes.roofId === roofId) const wall = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.WALL && obj.attributes.roofId === roofId)
const baseLines = wall.baseLines const baseLines = wall.baseLines
let centerPoint = wall.getCenterPoint();
let targetBaseLines = [] let targetBaseLines = []
let isGableRoof let isGableRoof
if (typeRef.current === TYPE.FLOW_LINE) { if (typeRef.current === TYPE.FLOW_LINE) {
@ -448,6 +566,7 @@ export function useMovementSetting(id) {
break break
} }
} else { } 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 }) targetBaseLines.push({ line: target, distance: 0 })
} }
@ -499,6 +618,7 @@ export function useMovementSetting(id) {
value = value.neg() value = value.neg()
} }
} else { } else {
//console.log("error::", UP_DOWN_REF)
value = value =
UP_DOWN_REF.FILLED_INPUT_REF.current.value !== '' UP_DOWN_REF.FILLED_INPUT_REF.current.value !== ''
? Big(UP_DOWN_REF.FILLED_INPUT_REF.current.value) ? Big(UP_DOWN_REF.FILLED_INPUT_REF.current.value)
@ -516,17 +636,50 @@ export function useMovementSetting(id) {
const inPolygon = wall.inPolygon(checkPoint) const inPolygon = wall.inPolygon(checkPoint)
if (UP_DOWN_REF.UP_RADIO_REF.current.checked && inPolygon) { // if (UP_DOWN_REF.UP_RADIO_REF.current.checked && inPolygon) {
value = value.neg() // value = value.neg()
} else if (UP_DOWN_REF.DOWN_RADIO_REF.current.checked && !inPolygon) { // } else if (UP_DOWN_REF.DOWN_RADIO_REF.current.checked && !inPolygon) {
value = value.neg() // value = value.neg()
} // }
} }
// console.log("2222titarget:::::", target);
// console.log("2222저장된 moveSelectLine:", roof.moveSelectLine);
// console.log("222wall::::", wall.points)
const result = getSelectLinePosition(wall, target, {
testDistance: 5, // 테스트 거리
debug: true // 디버깅 로그 출력
});
//console.log("2222linePosition:::::", result.position);
//console.log("222moveDirect:::::", roof.moveDirect);
// 디버깅용 분류 결과 확인
let linePosition = result.position;
roof.movePosition = linePosition
value = value.div(10) value = value.div(10)
targetBaseLines targetBaseLines
.filter((line) => Math.sqrt(Math.pow(line.line.x2 - line.line.x1, 2) + Math.pow(line.line.y2 - line.line.y1, 2)) >= 1) .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) => { .forEach((target) => {
const currentLine = target.line 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 index = baseLines.findIndex((line) => line === currentLine)
const nextLine = baseLines[(index + 1) % baseLines.length] const nextLine = baseLines[(index + 1) % baseLines.length]
const prevLine = baseLines[(index - 1 + baseLines.length) % baseLines.length] const prevLine = baseLines[(index - 1 + baseLines.length) % baseLines.length]
@ -579,6 +732,9 @@ export function useMovementSetting(id) {
closePopup(id) closePopup(id)
} }
// javascript
return { return {
TYPE, TYPE,
closePopup, closePopup,
@ -590,3 +746,4 @@ export function useMovementSetting(id) {
handleSave, handleSave,
} }
} }

1117
src/util/skeleton-utils.js
View File

File diff suppressed because it is too large Load Diff