From 25a84cc7352ebdb873bc87b7f804cb3146241db0 Mon Sep 17 00:00:00 2001 From: ysCha Date: Fri, 21 Nov 2025 19:29:26 +0900 Subject: [PATCH] sk line angle2 --- src/util/skeleton-utils.js | 106 ++++++++++++++++++++++++++++++------- 1 file changed, 86 insertions(+), 20 deletions(-) diff --git a/src/util/skeleton-utils.js b/src/util/skeleton-utils.js index 41f5e75c..bd64b846 100644 --- a/src/util/skeleton-utils.js +++ b/src/util/skeleton-utils.js @@ -533,6 +533,16 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { ); //그림을 그릴때 idx 가 필요함 roof는 왼쪽부터 시작됨 - 그림그리는 순서가 필요함 + let roofIdx = 0; + + // roofLines.forEach((roofLine) => { + // + // if (isSameLine(p1.x, p1.y, p2.x, p2.y, roofLine) || isSameLine(p2.x, p2.y, p1.x, p1.y, roofLine)) { + // roofIdx = roofLine.idx; + // console.log("roofIdx::::::", roofIdx) + // return false; // forEach 중단 + // } + // }); const skeletonLine = new QLine([p1.x, p1.y, p2.x, p2.y], { parentId: roof.id, @@ -545,7 +555,8 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { isBaseLine: sktLine.attributes.isOuterEdge, lineName: (sktLine.attributes.isOuterEdge)?'roofLine': attributes.type, selectable:(!sktLine.attributes.isOuterEdge), - + visible: (!sktLine.attributes.isOuterEdge), + lineNo: (sktLine.attributes.isOuterEdge)? skIndex:0,//그려지는 외곽라인의 순서를 찾아서... }); @@ -557,6 +568,14 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { //skeleton 라인에서 처마선은 삭제 if(skeletonLine.lineName === 'roofLine'){ + + skeletonLine.set('visible', true); //임시 + roof.set({ + stroke: 'black', + strokeWidth: 10 + }); + + const coordinateText = new fabric.Text(`(${Math.round(skeletonLine.x1)}, ${Math.round(skeletonLine.y1)})`, { left: skeletonLine.x1 + 5, // 좌표점에서 약간 오른쪽으로 이동 top: skeletonLine.y1 - 20, // 좌표점에서 약간 위로 이동 @@ -573,6 +592,8 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { }) canvas?.add(coordinateText) + + }else{ @@ -586,7 +607,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { // 같은 라인이 없으므로 새 다각형 라인 생성 //라인 편집 // let i = 0 - //const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine' && obj.attributes.roofId === roofId) + const currentRoofLines = canvas.getObjects().filter((obj) => obj.lineName === 'roofLine' && obj.attributes.roofId === roofId) let roofLineRects = canvas.getObjects().filter((obj) => obj.name === 'roofLineRect' && obj.roofId === roofId) @@ -596,13 +617,36 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { }) + function sortLinesByStartPoint(lines) { + return [...lines].sort((a, b) => { + // 시작점의 x 좌표로 먼저 정렬 + if (a.startPoint.x !== b.startPoint.x) { + return a.startPoint.x - b.startPoint.x; + } + // x 좌표가 같으면 y 좌표로 정렬 + return a.startPoint.y - b.startPoint.y; + }); + } + + // 각 라인 집합 정렬 + const sortedWallLines = sortLinesByStartPoint(wall.lines); + const sortedCurrentRoofLines = sortLinesByStartPoint(currentRoofLines); + const sortedRoofLines = sortLinesByStartPoint(roofLines); + + + //wall.lines 는 기본 벽 라인 //wall.baseLine은 움직인라인 const movedLines = [] - wall.lines.forEach((wallLine, index) => { + sortedWallLines.forEach((wallLine, index) => { console.log("wallLine:::::", wallLine, index) - let p1,p2,p3, p4 + + const roofLine = sortedRoofLines[index]; + const currentRoofLine = sortedCurrentRoofLines[index+1]; + + + let p1,p2,p3, p4 let idx = 0; let isMoveLine = false; @@ -615,7 +659,31 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { const wallLineEndPoint = {x:wallLine.x2, y:wallLine.y2} const moveLine = wall.baseLines[index] //이동한 wall 존재여부 (초기 wall line = base line) - + if(index === 2){ + let testLine = new QLine([roofLine.x1, roofLine.y1, roofLine.x2, roofLine.y2], { + stroke: 'yellow', + strokeWidth: 10, + property: 'normal', + fontSize: 14, + }); + let testLine2 = new QLine([currentRoofLine.x1, currentRoofLine.y1, currentRoofLine.x2, currentRoofLine.y2], { + stroke: 'red', + strokeWidth: 10, + property: 'normal', + fontSize: 14, + }); + let testLine3 = new QLine([wallLine.x1, wallLine.y1, wallLine.x2, wallLine.y2], { + stroke: 'blue', + strokeWidth: 10, + property: 'normal', + fontSize: 14, + }); + + canvas.add(testLine) + canvas.add(testLine2) + canvas.add(testLine3) + canvas.renderAll() + } // // 사용자가 라인을 드래그하기 시작할 때 // baseLine.on('moving', () => { @@ -641,14 +709,17 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { if (moved) { - let testLine = new QLine([moveLine.x1, moveLine.y1, moveLine.x2, moveLine.y2], { - stroke: 'yellow', - strokeWidth: 10, - property: 'normal', - fontSize: 14, - }); - canvas.add(testLine) - canvas.renderAll() + const p1moveLine = findClosestRoofLine(moveLine.startPoint, currentRoofLines) + const p2moveLine = findClosestRoofLine(moveLine.endPoint, currentRoofLines) + const p1RoofLine = findClosestRoofLine(currentRoofLine.startPoint,roof.lines) + const p2RoofLine = findClosestRoofLine(currentRoofLine.endPoint,roof.lines) + + const p1wallLine = findClosestRoofLine(wallLineStartPoint,wall.lines) + const p2wallLine = findClosestRoofLine(wallLineEndPoint,wall.lines) + + + + const getPolygonOrientation = baseLines => { if (!baseLines?.length) return 0 @@ -795,8 +866,7 @@ if (moved) { const p1wallLine = findClosestRoofLine(wallLineStartPoint,wall.lines) const p2wallLine = findClosestRoofLine(wallLineEndPoint,wall.lines) //move 접점 - const p1moveLine = findClosestRoofLine(moveLine.startPoint, wall.l) - const p2moveLine = findClosestRoofLine(moveLine.endPoint, currentRoofLines) + //wall move 접점 const p1outerLine = findClosestRoofLine(wallLineStartPoint, currentRoofLines) const p2outerLine = findClosestRoofLine(wallLineEndPoint, currentRoofLines) @@ -1263,11 +1333,7 @@ if (moved) { // canvas.renderAll() // }); - // let baseLines = canvas.getObjects().filter((obj) => obj.name === 'baseLine' && obj.parentId === roofId) - // baseLines.forEach((baseLine) => { - // canvas.remove(baseLine) - // canvas.renderAll() - // }); + } });