diff --git a/src/util/skeleton-utils.js b/src/util/skeleton-utils.js index 9c7248a5..14cd60d9 100644 --- a/src/util/skeleton-utils.js +++ b/src/util/skeleton-utils.js @@ -571,27 +571,12 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { skeletonLine.set('visible', false); //임시 roof.set({ - stroke: 'black', - strokeWidth: 10 + //stroke: 'black', + strokeWidth: 4 }); - const coordinateText = new fabric.Text(`(${Math.round(skeletonLine.x1)}, ${Math.round(skeletonLine.y1)})`, { - left: skeletonLine.x1 + 5, // 좌표점에서 약간 오른쪽으로 이동 - top: skeletonLine.y1 - 20, // 좌표점에서 약간 위로 이동 - fontSize: 13, - fill: 'red', - fontFamily: 'Arial', - selectable: true, - lockMovementX: false, - lockMovementY: false, - lockRotation: true, - lockScalingX: true, - lockScalingY: true, - name: 'lengthText' - }) - canvas?.add(coordinateText) }else{ @@ -680,8 +665,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { const movedLines = [] sortedWallLines.forEach((wallLine, index) => { - - + const roofLine = sortedRoofLines[index]; const currentRoofLine = sortedCurrentRoofLines[index]; @@ -691,50 +675,87 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { const origin = moveLine.attributes?.originPoint if (!origin) return - if(isSamePoint(moveLine, wallLine)) { + if (isSamePoint(moveLine, wallLine)) { return false } - const movedStart = Math.abs(moveLine.x1 - wallLine.x1) > EPSILON || Math.abs(moveLine.y1 - origin.y1) > EPSILON - const movedEnd = Math.abs(moveLine.x2 - wallLine.x2) > EPSILON || Math.abs(moveLine.y2 - origin.y2) > EPSILON + const movedStart = Math.abs(moveLine.x1 - wallLine.x1) > EPSILON || Math.abs(moveLine.y1 - origin.y1) > EPSILON + const movedEnd = Math.abs(moveLine.x2 - wallLine.x2) > EPSILON || Math.abs(moveLine.y2 - origin.y2) > EPSILON const fullyMoved = movedStart && movedEnd - //반시계 방향 -let newPStart //= {x:roofLine.x1, y:roofLine.y1} -let newPEnd //= {x:movedLines.x2, y:movedLines.y2} + let newPStart //= {x:roofLine.x1, y:roofLine.y1} + let newPEnd //= {x:movedLines.x2, y:movedLines.y2} //현재 roof는 무조건 시계방향 + const getAddLine = (p1, p2, stroke = '#1083E3') => { + const line = new QLine([p1.x, p1.y, p2.x, p2.y], { + stroke : stroke, + strokeWidth: 4, + property : 'normal', + lineName : 'helpLine', + roofId : roofId, + parentId : roof.id, + }); + + const coordinateText = new fabric.Text(`(${Math.round(line.x1)}, ${Math.round(line.y1)})`, { + left: line.x1 + 5, // 좌표점에서 약간 오른쪽으로 이동 + top: line.y1 - 20, // 좌표점에서 약간 위로 이동 + fontSize: 13, + fill: 'red', + fontFamily: 'Arial', + selectable: true, + lockMovementX: false, + lockMovementY: false, + lockRotation: true, + lockScalingX: true, + lockScalingY: true, + name: 'lengthText' + }) + + canvas?.add(coordinateText) + + canvas.add(line) + canvas.renderAll(); + return line + } + //두 포인트가 변경된 라인인 if (fullyMoved) { //반시계방향향 newPStart = {x:roofLine.x1, y:roofLine.y1} newPEnd = {x:roofLine.x2, y:roofLine.y2} - - console.log("moveFully:::::::::::::", wallBaseLine, newPStart, newPEnd) if(getOrientation(roofLine) === 'vertical'){ if(newPEnd.y <= wallBaseLine.y2 && wallBaseLine.y2 <= newPStart.y && newPStart.y <= wallBaseLine.y1){ newPStart.y = wallBaseLine.y1; + getAddLine({x:newPEnd.x, y:wallBaseLine.y1}, {x: wallBaseLine.x1, y:wallBaseLine.y1 }) } else if(wallBaseLine.y2 <= newPEnd.y && newPEnd.y <= wallBaseLine.y1 && wallBaseLine.y1 <= newPStart.y){ newPEnd.y = wallBaseLine.y2; + getAddLine({x:newPEnd.x, y:wallBaseLine.y2}, {x: wallBaseLine.x2, y:wallBaseLine.y2 }) } else if(newPStart.y <= wallBaseLine.y1 && wallBaseLine.y1 <= newPEnd.y && newPEnd.y <= wallBaseLine.y2){ newPEnd.y = wallBaseLine.y2; + getAddLine({x:newPEnd.x, y:wallBaseLine.y2}, {x: wallBaseLine.x2, y:wallBaseLine.y2 }) } else if(wallBaseLine.y1 <= newPStart.y && newPStart.y <= wallBaseLine.y2 && wallBaseLine.y2 <= newPEnd.y){ newPStart.y = wallBaseLine.y1; + getAddLine({x:newPEnd.x, y:wallBaseLine.y1}, {x: wallBaseLine.x1, y:wallBaseLine.y1 }) } else if(wallBaseLine.y2 <= newPEnd.y && newPStart.y <= wallBaseLine.y1 ) { // 위가운데 newPEnd.y = wallBaseLine.y2; + getAddLine({x:newPEnd.x, y:wallBaseLine.y2}, {x: wallBaseLine.x2, y:wallBaseLine.y2 }) newPStart.y = wallBaseLine.y1; + getAddLine({x:newPEnd.x, y:wallBaseLine.y1}, {x: wallBaseLine.x1, y:wallBaseLine.y1 }) } else if(wallBaseLine.y1 <= newPStart.y && newPEnd.y <= wallBaseLine.y2 ) { // 아래가운데 newPEnd.y = wallBaseLine.y1; + getAddLine({x:newPEnd.x, y:wallBaseLine.y1}, {x: wallBaseLine.x1, y:wallBaseLine.y1 }) newPStart.y = wallBaseLine.y2; + getAddLine({x:newPStart.x, y:wallBaseLine.y2}, {x: wallBaseLine.x2, y:wallBaseLine.y2 }) } @@ -743,37 +764,35 @@ let newPEnd //= {x:movedLines.x2, y:movedLines.y2} if(newPEnd.x <= wallBaseLine.x2 && wallBaseLine.x2 <= newPStart.x && newPStart.x <= wallBaseLine.x1){ //위 왼쪽 newPStart.x = wallBaseLine.x1; + getAddLine({x:wallBaseLine.x1, y:newPEnd.y}, {x:wallBaseLine.x1, y: wallBaseLine.y1}) } else if(wallBaseLine.x2 <= newPEnd.x && newPEnd.x <= wallBaseLine.x1 && wallBaseLine.x1 <= newPStart.x){ //아래오르쪽 newPEnd.x = wallBaseLine.x2; + getAddLine({x:wallBaseLine.x2, y:newPEnd.y}, {x:wallBaseLine.x2, y: wallBaseLine.y2}) + } else if(newPStart.x <= wallBaseLine.x1 && wallBaseLine.x1 <= newPEnd.x && newPEnd.x <= wallBaseLine.x2){ //위 오른쪽 newPEnd.x = wallBaseLine.x2; + getAddLine({x:wallBaseLine.x2, y:newPEnd.y}, {x:wallBaseLine.x2, y: wallBaseLine.y2}) + } else if(wallBaseLine.x1 <= newPStart.x && newPStart.x <= wallBaseLine.x2 && wallBaseLine.x2 <= newPEnd.x){ //아래 왼쪽 newPStart.x = wallBaseLine.x1; + getAddLine({x:wallBaseLine.x1, y:newPEnd.y}, {x:wallBaseLine.x1, y: wallBaseLine.y1}) + } else if(wallBaseLine.x2 <= newPEnd.x && newPStart.x <= wallBaseLine.x1 ) { // 위가운데 - newPEnd.x = wallBaseLine.x2; - newPStart.x = wallBaseLine.x1; + + newPEnd.x = wallBaseLine.x2; + getAddLine({x:wallBaseLine.x2, y:newPEnd.y}, {x:wallBaseLine.x2, y: wallBaseLine.y2}) + newPStart.x = wallBaseLine.x1; + getAddLine({x:wallBaseLine.x1, y:newPEnd.y}, {x:wallBaseLine.x1, y: wallBaseLine.y1}) + } else if(wallBaseLine.x1 <= newPStart.x && newPEnd.x <= wallBaseLine.x2 ) { // 아래가운데 newPEnd.x = wallBaseLine.x1; + getAddLine({x:wallBaseLine.x1, y:newPEnd.y}, {x:wallBaseLine.x1, y: wallBaseLine.y1}) newPStart.x = wallBaseLine.x2; + getAddLine({x:wallBaseLine.x2, y:newPEnd.y}, {x:wallBaseLine.x2, y: wallBaseLine.y2}) } - - - - - } - + getAddLine(newPStart, newPEnd) movedLines.push({ index, newPStart, newPEnd }) - let testLine = new QLine([newPStart.x, newPStart.y, newPEnd.x, newPEnd.y], { - stroke: 'red', - strokeWidth: 10, - property: 'normal', - fontSize: 14, - lineName: 'helpLine', - roofId: roofId, - parentId: roof.id, - }); - canvas.add(testLine) } @@ -805,17 +824,7 @@ let newPEnd //= {x:movedLines.x2, y:movedLines.y2} movedLines.push({ index, newPStart, newPEnd }) console.log("moveStart:::::::::::::", origin, newPStart, newPEnd) - - let testLine = new QLine([newPStart.x, newPStart.y, newPEnd.x, newPEnd.y], { - stroke: 'yellow', - strokeWidth: 10, - property: 'normal', - fontSize: 14, - lineName: 'helpLine', - roofId: roofId, - parentId: roof.id, - }); - canvas.add(testLine) + getAddLine(newPStart, newPEnd) }else if(movedEnd) { //start변경 @@ -842,17 +851,7 @@ let newPEnd //= {x:movedLines.x2, y:movedLines.y2} } console.log("movedEnd:::::::::::::", origin, newPStart, newPEnd) - let testLine = new QLine([newPStart.x, newPStart.y, newPEnd.x, newPEnd.y], { - stroke: 'orange', - strokeWidth: 10, - property: 'normal', - fontSize: 14, - lineName: 'helpLine', - roofId:roofId, - parentId: roof.id, - - }); - canvas.add(testLine) + getAddLine(newPStart, newPEnd) movedLines.push({ index, newPStart, newPEnd }) } @@ -1586,7 +1585,7 @@ function processEavesEdge(roofId, canvas, skeleton, edgeResult, skeletonLines) { type: POLYGON_TYPE.ROOF, fill: false, stroke: 'blue', - strokeWidth: 8, + strokeWidth: 4, skeletonType: 'polygon', polygonName: '', parentId: roof.id, @@ -1605,7 +1604,7 @@ function processEavesEdge(roofId, canvas, skeleton, edgeResult, skeletonLines) { const clippedLine = clipLineToRoofBoundary(p1, p2, roof.lines, roof.moveSelectLine); //console.log('clipped line', clippedLine.p1, clippedLine.p2); const isOuterLine = isOuterEdge(clippedLine.p1, clippedLine.p2, [edgeResult.Edge]) - addRawLine(roof.id, skeletonLines, clippedLine.p1, clippedLine.p2, 'ridge', 'red', 5, pitch, isOuterLine); + addRawLine(roof.id, skeletonLines, clippedLine.p1, clippedLine.p2, 'ridge', '#1083E3', 4, pitch, isOuterLine); // } } }