diff --git a/src/util/skeleton-utils.js b/src/util/skeleton-utils.js index 3e12f626..9f1962c2 100644 --- a/src/util/skeleton-utils.js +++ b/src/util/skeleton-utils.js @@ -8,6 +8,7 @@ import { line } from 'framer-motion/m' import { QPolygon } from '@/components/fabric/QPolygon' import { point } from '@turf/turf' import { add } from 'mathjs' +import wallLine from '@/components/floor-plan/modal/wallLineOffset/type/WallLine' /** * 지붕 폴리곤의 스켈레톤(중심선)을 생성하고 캔버스에 그립니다. @@ -405,6 +406,8 @@ export const skeletonBuilder = (roofId, canvas, textMode) => { canvas.skeleton.lastPoints = points canvas.set("skeleton", cleanSkeleton); canvas.renderAll() + + console.log('skeleton rendered.', canvas); } catch (e) { console.error('스켈레톤 생성 중 오류 발생:', e) @@ -560,18 +563,20 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { if (!lineExists) { - addLines.push(sktLine); - - let p1Line = findClosestRoofLine(p1, roof.lines) let p2Line = findClosestRoofLine(p2, roof.lines) - let p1wallLine = findClosestRoofLine(p1, wall.lines) - let p2wallLine = findClosestRoofLine(p2, wall.lines) + + let p1wallLine = findClosestRoofLine(p1, wall.baseLines) + let p2wallLine = findClosestRoofLine(p2, wall.baseLines) console.log("p1LineV",p1Line) console.log("p2LineV",p2Line) console.log("p1wallLineV",p1wallLine) console.log("p2wallLineV",p2wallLine) + //skt는 시계방향 p1 -> p2 + //와곽라인은 시계, 반시계 + // + //외벽선과 접점이 없으면 if(p1Line.distance > 0 && p2Line.distance > 0) { @@ -589,12 +594,12 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { console.log("p1,p2:::::",p1, p2) if(isSamePoint(p1, p1Line.line.startPoint) || isSamePoint(p1, p1Line.line.endPoint)) { - p1.y = p2wallLine.line.endPoint.y + //p1.y = p2wallLine.line.endPoint.y return } if(isSamePoint(p2, p2Line.line.startPoint) || isSamePoint(p2, p2Line.line.endPoint)) { - p2.y = p1wallLine.line.endPoint.y + //p2.y = p1wallLine.line.endPoint.y return } @@ -620,131 +625,125 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { } - const linesAtP1 = roof.lines.filter(roofLines => { - console.log(roofLines.startPoint, roofLines.endPoint); - console.log(isSamePoint(roofLines.startPoint, p1)) - console.log(isSamePoint(roofLines.endPoint, p1)) - return isSamePoint(roofLines.startPoint, p1) || isSamePoint(roofLines.endPoint, p1); - }); + const orgP1 = { ...p1 }; + const orgP2 = { ...p2 }; + let p3,p4; - const linesAtP2 = roof.lines.filter(roofLines => { - console.log(roofLines.startPoint, roofLines.endPoint); - console.log(isSamePoint(roofLines.startPoint, p2)) - console.log(isSamePoint(roofLines.endPoint, p2)) - return isSamePoint(roofLines.startPoint, p2) || isSamePoint(roofLines.endPoint, p2); - }); + let roofIdx = p2Line.index + const changeLine = roof.lines[roofIdx] + const changeWallLine = wall.baseLines[roofIdx] - // if(p2Line.distance > p1Line.distance){ - // p1Line = p2Line; - // p2Line = p1Line; - // } - // //x점이 만날때.. - // if(Math.abs(p1.x - p1Line.line.startPoint.x) < 0.1) { - // p1.y = p1Line.line.startPoint.y - // } else if(Math.abs(p1.x - p1Line.line.endPoint.x) < 0.1){ - // p1.y = p1Line.line.endPoint.y - // } - // //y점이 만날때 - // if(Math.abs(p2.x - p2Line.line.startPoint.x) < 0.1) { - // p2.y = p2Line.line.startPoint.y - // } else if(Math.abs(p2.x - p2Line.line.endPoint.x) < 0.1){ - // p2.y = p2Line.line.endPoint.y - // } + p1 = p2Line.line.endPoint //changeLine.startPoint + p2.x = changeWallLine.endPoint.x + p2.y = changeLine.startPoint.y + if(Math.abs(orgP2.y - changeLine.endPoint.y) < 0.1){ + p2 = orgP2 + + } + + if(p1Line.distance > p2Line.distance){ + //반시계 + roofIdx = p1Line.index + const changeLine2 = roof.lines[roofIdx] + const changeWallLine2 = wall.baseLines[roofIdx] + p1 = p1Line.line.endPoint.x//changeLine2.endPoint + p2.x = changeLine2.endPoint.x + p2.y = changeWallLine2.startPoint.y + if(Math.abs(orgP1.x - changeLine2.endPoint.x) < 0.1){ + p2 = orgP1 + } + } + + + if (Array.isArray(addLines)) { + // 이미 동일한 p1, p2를 가진 객체가 있는지 확인 + const isDuplicate = addLines.some(line => + (line.p1.x === p1.x && line.p1.y === p1.y && + line.p2.x === p2.x && line.p2.y === p2.y) || + (line.p1.x === p2.x && line.p1.y === p2.y && + line.p2.x === p1.x && line.p2.y === p1.y) + ); + + if (isDuplicate) { + return; // 중복된 라인이 있으면 함수 종료 + } + + // 중복이 없으면 추가 + addLines.push({p1, p2}); + + + + if(addLines.length === 2){ + + //기존 라인삭제 + + const existingNewLine2 = canvas.getObjects().find(obj => obj.lineName === "helpLine"); + if (existingNewLine2) { + canvas.remove(existingNewLine2); + canvas.renderAll(); + } + const line1 = addLines[0]; + const line2 = addLines[1]; + // Find the common point (the vertex of the right angle) + let commonPoint, p3, p4; + + if (line1.p1.x === line2.p1.x || line1.p1.x === line2.p2.x) { + commonPoint = line1.p1; + } else { + commonPoint = line1.p2; + } + + // Find the other two points + const otherPoint1 = line1.p1 === commonPoint ? line1.p2 : line1.p1; + const otherPoint2 = line2.p1 === commonPoint ? line2.p2 : line2.p1; + + // Calculate the fourth point to form a rectangle + p3 = { + x: otherPoint1.x + (otherPoint2.x - commonPoint.x), + y: otherPoint1.y + (otherPoint2.y - commonPoint.y) + }; + + // Create the rectangle points in order (clockwise or counter-clockwise) + const rectPoints = [commonPoint, otherPoint1, p3, otherPoint2]; + + const rect = new QPolygon(rectPoints, { + type: POLYGON_TYPE.ROOF, + fill: 'transparent', + stroke: 'black', + strokeWidth: 2, + selectable: false, + evented: false + }); + canvas.add(rect); + canvas.renderAll(); + return; + } + } const lineId = `${p1.x},${p1.y}-${p2.x},${p2.y}`; + const newLine2 = new QLine( [p1.x, p1.y, p2.x, p2.y], { parentId : roof.id, fontSize : roof.fontSize, - stroke : 'yellow', - strokeWidth: lineStyle.width, - name : (sktLine.attributes.isOuterEdge) ? 'eaves' : attributes.type, + stroke : 'black', + strokeWidth: 2, + name : 'auxiliaryLine', attributes : attributes, direction : direction, isBaseLine : sktLine.attributes.isOuterEdge, - lineName : (sktLine.attributes.isOuterEdge) ? 'outerLine' : attributes.type, - selectable : (!sktLine.attributes.isOuterEdge), + lineName : 'helpLine', + isFixed: true, + selectable : true, roofId : roofId, lineId: lineId + } ); canvas.add(newLine2); - -/* - console.log("그리는 선::::",p1,p2) - - console.log("그리는 선::::",p1Line,p2Line) - - console.log("p1:", p1); - console.log("p1Line.intersectionPoint:", p1Line.intersectionPoint); - console.log("p2:", p2); - console.log("p2Line.intersectionPoint:", p2Line.intersectionPoint); - - const isP1Same = isSamePoint(p1, p1Line.intersectionPoint); - const isP2Same = isSamePoint(p2, p2Line.intersectionPoint); - console.log("isP1Same:", isP1Same, "isP2Same:", isP2Same, "combined:", isP1Same && isP2Same); - - if (isP1Same && isP2Same) { - console.log("Condition is true"); - } else { - console.log("Condition is false"); - } - const xMatch = Math.abs(p1Line.intersectionPoint.x - p2Line.intersectionPoint.x) < 0.1; // x 좌표가 일치하는지 (0.1 오차 허용) - const yMatch = Math.abs(p1Line.intersectionPoint.y - p2Line.intersectionPoint.y) < 0.1; // y 좌표가 일치하는지 (0.1 오차 허용) - - if(xMatch) { - console.log("xMatch:", xMatch); - p1.y = p2Line.intersectionPoint.y - //p2.y = p1Line.intersectionPoint.y - - }else if(yMatch){ - console.log("yMatch:", yMatch); - //p1.x = p2Line.intersectionPoint.x - p2.x = p1Line.intersectionPoint.x - }else{ - console.log("No Match:"); - - //if(isHorizontal) { - - const xMatch = Math.abs(p1.x - p2.x) < 0.1; // x 좌표가 일치하는지 (0.1 오차 허용) - const yMatch = Math.abs(p1.y - p2.y) < 0.1; // y 좌표가 일치하는지 (0.1 오차 허용) - - if(yMatch){ - p1.x = p1Line.intersectionPoint.x; - p1.y = p1Line.intersectionPoint.y; - p2.x = p1.x; - p2.y = p1wallLine.line.startPoint.y; - console.log("p1LineV",p1Line) - console.log("p2LineV",p2Line) - console.log("p1wallLineV",p1wallLine) - console.log("p2wallLineV",p2wallLine) - } - if(xMatch){ - p1.x = p2Line.intersectionPoint.x; - p1.y = p2Line.intersectionPoint.y; - p2.x = p2wallLine.line.endPoint.x; - p2.y = p1.y; - console.log("p1LineH",p1Line) - console.log("p2LineH",p2Line) - console.log("p1wallLineH",p1wallLine) - console.log("p2wallLineH",p2wallLine) - } - - - - } - console.log("New p1:", p1); - - console.log("New p2:", p2); - if( !xMatch && !yMatch) { - //그림 - } - -*/ - } @@ -776,8 +775,58 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { canvas.renderAll(); }); - // 같은 라인이 없으므로 새 다각형 라인 생성 + // let outerLinePoints = canvas.getObjects().filter((obj) => obj.name === 'outerLinePoint' ) + // outerLinePoints.forEach((outerLinePoint) => { + // canvas.remove(outerLinePoint) + // canvas.renderAll() + // }); + // + // let outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine' && obj.attributes.roofId === roofId) + // outerLines.forEach((outerLine) => { + // canvas.remove(outerLine) + // canvas.renderAll() + // }); + // let baseLines = canvas.getObjects().filter((obj) => obj.name === 'baseLine' && obj.parentId === roofId) + // baseLines.forEach((baseLine) => { + // canvas.remove(baseLine) + // canvas.renderAll() + // }); + + // 같은 라인이 없으므로 새 다각형 라인 생성 + //라인 편집 + let outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine' && obj.attributes.roofId === roofId) + outerLines.forEach((outerLine) => { + const wallLine = wall.baseLines[outerLine.idx - 1]; + const loofLine = roof.lines[outerLine.idx - 1]; + + if(isSamePoint(wallLine.startPoint, outerLine.startPoint) || + isSamePoint(wallLine.endPoint, outerLine.endPoint)){ + + }else{ + const p1 = loofLine.endPoint + const p2 = wallLine.endPoint + p2.x = p1.x + + const newLine2 = new QLine( + [p1.x, p1.y, p2.x, p2.y], + { + parentId : roof.id, + fontSize : roof.fontSize, + stroke : 'black', + strokeWidth: 2, + name : 'auxiliaryLine', + lineName : 'helpLine', + isFixed: true, + selectable : true, + roofId : roofId, + } + ); + + canvas.add(newLine2); + canvas.renderAll(); + } + }); return innerLines; }