From 9527e6cf0c40683459db55c146e4337c65b50887 Mon Sep 17 00:00:00 2001 From: ysCha Date: Wed, 19 Nov 2025 18:06:43 +0900 Subject: [PATCH] sk line angle --- src/util/skeleton-utils.js | 545 ++++++++++++++++++++++++++----------- 1 file changed, 386 insertions(+), 159 deletions(-) diff --git a/src/util/skeleton-utils.js b/src/util/skeleton-utils.js index ed6683cd..66734dc9 100644 --- a/src/util/skeleton-utils.js +++ b/src/util/skeleton-utils.js @@ -508,13 +508,15 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { const addLines = [] const existingLines = new Set(); // 이미 추가된 라인을 추적하기 위한 Set - const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine' && obj.attributes.roofId === roofId) - const baseLines = canvas.getObjects().filter((obj) => obj.name === 'baseLine' && obj.parentId === roofId) + //처마라인 + const roofLines = roof.lines + //벽라인 + const wallLines = wall.lines skeletonLines.forEach(sktLine => { let { p1, p2, attributes, lineStyle } = sktLine; - // 라인을 고유하게 식별할 수 있는 키 생성 (정규화된 좌표로 정렬하여 비교) + // 중복방지 - 라인을 고유하게 식별할 수 있는 키 생성 (정규화된 좌표로 정렬하여 비교) const lineKey = [ [p1.x, p1.y].sort().join(','), [p2.x, p2.y].sort().join(',') @@ -530,7 +532,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { { x: sktLine.p2.x, y: sktLine.p2.y } ); - const innerLine = new QLine([p1.x, p1.y, p2.x, p2.y], { + const skeletonLine = new QLine([p1.x, p1.y, p2.x, p2.y], { parentId: roof.id, fontSize: roof.fontSize, stroke: (sktLine.attributes.isOuterEdge)?'orange':lineStyle.color, @@ -539,42 +541,42 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { attributes: attributes, direction: direction, isBaseLine: sktLine.attributes.isOuterEdge, - lineName: (sktLine.attributes.isOuterEdge)?'outerLine': attributes.type, + lineName: (sktLine.attributes.isOuterEdge)?'roofLine': attributes.type, selectable:(!sktLine.attributes.isOuterEdge), roofId: roofId, }); - canvas.add(innerLine); - innerLine.bringToFront(); + canvas.add(skeletonLine); + skeletonLine.bringToFront(); existingLines.add(lineKey); // 추가된 라인을 추적 - const coordinateText = new fabric.Text(`(${Math.round(p1.x)}, ${Math.round(p1.y)})`, { - left: p1.x + 5, // 좌표점에서 약간 오른쪽으로 이동 - top: p1.y - 20, // 좌표점에서 약간 위로 이동 - fontSize: 13, - fill: 'red', - fontFamily: 'Arial', - selectable: true, - lockMovementX: false, - lockMovementY: false, - lockRotation: true, - lockScalingX: true, - lockScalingY: true, - name: 'lengthText' - }) - canvas?.add(coordinateText) //skeleton 라인에서 처마선은 삭제 - if(innerLine.lineName === 'outerLine'){ - + if(skeletonLine.lineName === 'roofLine'){ + 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{ } - innerLines.push(innerLine) + innerLines.push(skeletonLine) canvas.renderAll(); }); @@ -584,12 +586,17 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { // let i = 0 //const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine' && obj.attributes.roofId === roofId) let roofLineRects = canvas.getObjects().filter((obj) => obj.name === 'roofLineRect' && obj.roofId === roofId) - roofLineRects.forEach((roofLineRect) => { + + + roofLineRects.forEach((roofLineRect) => { canvas.remove(roofLineRect) canvas.renderAll() }) - wall.baseLines.forEach((wallLine, index) => { + + //wall.lines 는 기본 벽 라인 + //wall.baseLine은 움직인라인 + wall.lines.forEach((wallLine, index) => { console.log("wallLine:::::", wallLine, index) let p1,p2,p3, p4 let idx = 0; @@ -600,44 +607,88 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { if (wallLine.endPoint.x !== wallLine.x2) wallLine.endPoint.x = wallLine.x2 if (wallLine.endPoint.y !== wallLine.y2) wallLine.endPoint.y = wallLine.y2 - const wallLineStartPoint = {x:wallLine.x1, y:wallLine.y1} - const wallLineEndPoint = {x:wallLine.x2, y:wallLine.y2} - - for(const outerLine of outerLines){ + const wallLineStartPoint = {x:wallLine.x1, y:wallLine.y1} + const wallLineEndPoint = {x:wallLine.x2, y:wallLine.y2} + const moveLine = wall.baseLines[index] //이동한 wall 존재여부 (초기 wall line = base line) - if(isSamePoint(outerLine.startPoint, wallLineStartPoint) || isSamePoint(outerLine.endPoint, wallLineEndPoint)){ - console.log("outerLine1:::::", wallLine, idx) - isMoveLine = false; - break; - } - } - if(isMoveLine){ - const currentOuterLines = canvas + if(isSamePoint(moveLine.startPoint, wallLineStartPoint) && isSamePoint(moveLine.endPoint, wallLineEndPoint)){ + console.log("outerLine1:::::", wallLine, idx) + isMoveLine = false; + } + + + + if(isMoveLine){ + + //현재 움직인 처마라인 + const currentRoofLines = canvas .getObjects() - .filter((obj) => obj.lineName === 'outerLine' && obj.roofId === roofId) + .filter((obj) => obj.lineName === 'roofLine' && obj.roofId === roofId) - const roofLine = roof.lines[index]; + + + const moveLine = wall.baseLines[index] + const roofLine = roof.lines[index] + + + //roof 접점 const p1RoofLine = findClosestRoofLine(wallLineStartPoint,roof.lines) const p2RoofLine = findClosestRoofLine(wallLineEndPoint,roof.lines) - + //wall 접점 const p1wallLine = findClosestRoofLine(wallLineStartPoint,wall.lines) const p2wallLine = findClosestRoofLine(wallLineEndPoint,wall.lines) - - const p1outerLine = findClosestRoofLine(wallLineStartPoint, currentOuterLines) - const p2outerLine = findClosestRoofLine(wallLineEndPoint, currentOuterLines) + //move 접점 + const p1moveLine = findClosestRoofLine(moveLine.startPoint, currentRoofLines) + const p2moveLine = findClosestRoofLine(moveLine.endPoint, currentRoofLines) + //wall move 접점 + const p1outerLine = findClosestRoofLine(wallLineStartPoint, currentRoofLines) + const p2outerLine = findClosestRoofLine(wallLineEndPoint, currentRoofLines) console.log("p1RoofLineV",p1RoofLine) console.log("p2RoofLineV",p2RoofLine) console.log("p1wallLineV",p1wallLine) console.log("p2wallLineV",p2wallLine) + console.log("p1moveLineV",p1moveLine) + console.log("p2moveLineV",p2moveLine) console.log("p1outerLine",p1outerLine) console.log("p2outerLine",p2outerLine) // const outerLines= canvas.getObjects().filter((obj) => obj.name === 'outerLine' && obj.attributes.roofId === roofId) // const outerLine = outerLines[index] // canvas.remove(outerLine) // canvas.renderAll() - + if(Math.abs(p1moveLine.distance - p1outerLine.distance) < 0.1){ + return + } + + // Calculate vectors from moveLine endpoints to wall line + const v1 = {x: wallLine.x1 - moveLine.x1, y: wallLine.y1 - moveLine.y1}; + const v2 = {x: wallLine.x2 - moveLine.x1, y: wallLine.y2 - moveLine.y1}; + const v3 = {x: wallLine.x1 - moveLine.x2, y: wallLine.y1 - moveLine.y2}; + const v4 = {x: wallLine.x2 - moveLine.x2, y: wallLine.y2 - moveLine.y2}; + + // Calculate dot products + const dot1 = v1.x * v2.x + v1.y * v2.y; // For start point + const dot2 = v3.x * v4.x + v3.y * v4.y; // For end point + + const angles = []; + // Check right angles with tolerance + if (Math.abs(dot1) < 0.1) { + angles.push({ + wall: wall, + endpoint: 'start', + point: {x: moveLine.x1, y: moveLine.y1} + }); + } + if (Math.abs(dot2) < 0.1) { + angles.push({ + wall: wall, + endpoint: 'end', + point: {x: moveLine.x2, y: moveLine.y2} + }); + } + + console.log("angels::::::::", angles) // currentOuterLines.forEach((line) => { // line.set('stroke', 'green') // 원하는 색으로 변경 @@ -649,7 +700,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { // const candidates = canvas.getObjects().filter((obj) => obj.roofId === roofId) // console.log('candidates', candidates.map((obj) => obj.lineName)) - const addHelpLine = (roofLine, wallLine, outerLineA, outerLineB) => { + const addHelpLine = (roofLine, wallLine, outerLineA, outerLineB = null) => { //반시계방향 const roofLineStartPoint = {x:roofLine.x1, y:roofLine.y1} const roofLineEndPoint = {x:roofLine.x2, y:roofLine.y2} @@ -674,7 +725,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { }; - const addHelpLine2 = (roofLine, wallLine, outerLineA, outerLineB) => { + const addHelpLine2 = (roofLine, wallLine, outerLineA, outerLineB=null) => { //반시계방향 const roofLineStartPoint = {x:roofLine.x1, y:roofLine.y1} const roofLineEndPoint = {x:roofLine.x2, y:roofLine.y2} @@ -699,6 +750,213 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { }; + const addHelpLineBottom = (roofLine, wallLine, moveLine, outerLine, target) => { + //반시계방향 + const roofLinePoint = (target === 'S') ? {x:roofLine.x1, y:roofLine.y1} : {x:roofLine.x2, y:roofLine.y2} + const moveLinePoint = (target === 'S') ? {x:moveLine.x1, y:moveLine.y1} : {x:moveLine.x2, y:moveLine.y2} + + let newP1, newP2, newP3, newP4; + + newP1 = roofLinePoint + newP3 = moveLinePoint + newP2 = {x:newP3.x, y: newP1.y} + newP4 = {x:newP1.x, y: (Math.abs(outerLine?.intersectionPoint.x - newP1.x) < 0.1) ? outerLine?.intersectionPoint.y : newP3.y} + + return {newP1, newP2, newP3, newP4} + + }; + + const addHelpLineTop = (roofLine, wallLine, moveLine, outerLine, target) => { + //반시계방향 + const roofLinePoint = (target === 'S') ? {x:roofLine.x1, y:roofLine.y1} : {x:roofLine.x2, y:roofLine.y2} + const moveLinePoint = (target === 'S') ? {x:moveLine.x1, y:moveLine.y1} : {x:moveLine.x2, y:moveLine.y2} + + let newP1, newP2, newP3, newP4; + + newP1 = roofLinePoint + newP3 = moveLinePoint + newP2 = {x:newP3.x, y: newP1.y} + newP4 = {x:newP1.x, y: (Math.abs(outerLine?.intersectionPoint.x - newP1.x) < 0.1) ? outerLine?.intersectionPoint.y : newP3.y} + + return {newP1, newP2, newP3, newP4} + + }; + + const addHelpLineLeft = (roofLine, wallLine, moveLine, outerLine, target) => { + //반시계방향 + const roofLinePoint = (target === 'S') ? {x:roofLine.x1, y:roofLine.y1} : {x:roofLine.x2, y:roofLine.y2} + const moveLinePoint = (target === 'S') ? {x:moveLine.x1, y:moveLine.y1} : {x:moveLine.x2, y:moveLine.y2} + + let newP1, newP2, newP3, newP4; + + newP1 = roofLinePoint + newP3 = moveLinePoint + newP2 = {x:newP1.x, y: newP3.y} + newP4 = {x:Math.abs(outerLine?.intersectionPoint.y - newP1.y) < 0.1 ? outerLine?.intersectionPoint.x : newP3.x, y:newP1.y} + + return {newP1, newP2, newP3, newP4} + + }; + + const addHelpLineRight = (roofLine, wallLine, moveLine, outerLine, target) => { + //반시계방향 + const roofLinePoint = (target === 'S') ? {x:roofLine.x1, y:roofLine.y1} : {x:roofLine.x2, y:roofLine.y2} + const moveLinePoint = (target === 'S') ? {x:moveLine.x1, y:moveLine.y1} : {x:moveLine.x2, y:moveLine.y2} + + let newP1, newP2, newP3, newP4; + + newP1 = roofLinePoint + newP3 = moveLinePoint + newP2 = {x:newP1.x, y: newP3.y} + newP4 = {x:Math.abs(outerLine?.intersectionPoint.y - newP1.y) < 0.1 ? outerLine?.intersectionPoint.x : newP3.x, y:newP1.y} + + return {newP1, newP2, newP3, newP4} + + }; + + let isPolygon; + + // Calculate the movement direction + const dx1 = wallLine.x1 - moveLine.x1; + const dy1 = wallLine.y1 - moveLine.y1; + const dx2 = wallLine.x2 - moveLine.x2; + const dy2 = wallLine.y2 - moveLine.y2; + + // Determine movement direction + let moveDirection = 'none'; + +// Check if it's a vertical wall line (x coordinates are equal) + if (Math.abs(wallLine.x1 - wallLine.x2) < 0.1) { + // For vertical lines, check x movement + if (dx1 > 0 || dx2 > 0) { + moveDirection = 'left'; + } else if (dx1 < 0 || dx2 < 0) { + moveDirection = 'right'; + } + } + // Check if it's a horizontal wall line (y coordinates are equal) + else if (Math.abs(wallLine.y1 - wallLine.y2) < 0.1) { + // For horizontal lines, check y movement + if (dy1 > 0 || dy2 > 0) { + moveDirection = 'top'; + } else if (dy1 < 0 || dy2 < 0) { + moveDirection = 'bottom'; + } + } + console.log(`Wall line moved ${moveDirection}`); + + + let changeLine + switch (moveDirection) { + case 'left': + // Handle left movement + if(p1moveLine.distance > p2moveLine.distance) { + changeLine = addHelpLineLeft(roofLine, wallLine, moveLine, p1moveLine, 'S') + + console.log('p1moveLine.distance', p1moveLine.distance); + }else{ + changeLine = addHelpLineLeft(roofLine, wallLine, moveLine, p2moveLine, 'E') + console.log('p2moveLine.distance', p2moveLine.distance); + } + + p1 = changeLine.newP1 + p2 = changeLine.newP2 + p3 = changeLine.newP3 + p4 = changeLine.newP4 + + canvas.remove(p1outerLine.line) + canvas.remove(p2outerLine.line) + + isPolygon = true + // const testLine2 = new QLine([wallLine.x1, wallLine.y1, wallLine.x2, wallLine.y2], { + // stroke: 'red', + // strokeWidth: 10, + // property: 'normal', + // fontSize: 14, + // }) + // const testLine = new QLine([moveLine.x1, moveLine.y1, moveLine.x2, moveLine.y2], { + // stroke: 'yellow', + // strokeWidth: 10, + // property: 'normal', + // fontSize: 14, + // }) + // canvas.add(testLine2); + // canvas.add(testLine); + // canvas.renderAll() + + break; + case 'right': + + if(p1moveLine.distance > p2moveLine.distance) { + changeLine = addHelpLineRight(roofLine, wallLine, moveLine, p1moveLine, 'S') + + console.log('p1moveLine.distance', p1moveLine.distance); + }else{ + changeLine = addHelpLineRight(roofLine, wallLine, moveLine, p2moveLine, 'E') + console.log('p2moveLine.distance', p2moveLine.distance); + } + + p1 = changeLine.newP1 + p2 = changeLine.newP2 + p3 = changeLine.newP3 + p4 = changeLine.newP4 + + canvas.remove(p1outerLine.line) + canvas.remove(p2outerLine.line) + + isPolygon = true + break; + case 'top': + // Handle upward movement + if(p1moveLine.distance > p2moveLine.distance) { + changeLine = addHelpLineTop(roofLine, wallLine, moveLine, p1moveLine, 'S') + console.log('p1moveLine.distance', p1moveLine.distance); + }else{ + changeLine = addHelpLineTop(roofLine, wallLine, moveLine, p2moveLine, 'E') + console.log('p2moveLine.distance', p2moveLine.distance); + } + + p1 = changeLine.newP1 + p2 = changeLine.newP2 + p3 = changeLine.newP3 + p4 = changeLine.newP4 + + canvas.remove(p1outerLine.line) + canvas.remove(p2outerLine.line) + + isPolygon = true + break; + case 'bottom': + // Handle downward movement + if(p1moveLine.distance > p2moveLine.distance) { + changeLine = addHelpLineBottom(roofLine, wallLine, moveLine, p1moveLine, 'S') + console.log('p1moveLine.distance', p1moveLine.distance); + }else{ + changeLine = addHelpLineBottom(roofLine, wallLine, moveLine, p2moveLine, 'E') + console.log('p2moveLine.distance', p2moveLine.distance); + } + + p1 = changeLine.newP1 + p2 = changeLine.newP2 + p3 = changeLine.newP3 + p4 = changeLine.newP4 + + canvas.remove(p1outerLine.line) + canvas.remove(p2outerLine.line) + + isPolygon = true + break; + + default: + // No movement or movement is too small to detect + isPolygon = false + break; + } + + console.log(`Wall line moved ${moveDirection}`); + + +/* if(p1wallLine.distance > 0 && p2wallLine.distance === 0) { console.log("왼쪽 수평 / 오른쪽 수직") @@ -712,6 +970,9 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { canvas.remove(p1outerLine.line) canvas.remove(p2outerLine.line) + isPolygon = true + + }else if(p2wallLine.distance > 0 && p1wallLine.distance === 0) { console.log("오른쪽 수평 / 왼쪽 수직") const changeLine = addHelpLine2(roofLine, wallLine, p1outerLine, p2outerLine) @@ -723,119 +984,84 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { canvas.remove(p1outerLine.line) canvas.remove(p2outerLine.line) - }else if(p2wallLine.distance > 0 && p2wallLine.distance === 0) { + isPolygon = true + }else if(p1wallLine.distance > 0 && p2wallLine.distance > 0) { - console.log("1p1wallLine.distance", p1wallLine.distance); - console.log("1p2wallLine.distance", p2wallLine.distance); + if(p1wallLine.distance > p2wallLine.distance){ + const changeLine = addHelpLine(roofLine, wallLine, p1outerLine, p2outerLine) + console.log("1왼쪽 수평 / 1오른쪽 수직") + console.log("1p1wallLine.distance", p1wallLine.distance); + p1 = changeLine.newP1 + p2 = changeLine.newP2 + p3 = changeLine.newP3 + p4 = changeLine.newP4 + }else{ + const changeLine = addHelpLine2(roofLine, wallLine, p1outerLine, p2outerLine) + console.log("1오른쪽 수평 / 1왼쪽 수직") + console.log("1p2wallLine.distance", p2wallLine.distance); + p1 = changeLine.newP1 + p2 = changeLine.newP2 + p3 = changeLine.newP3 + p4 = changeLine.newP4 + } + isPolygon = true }else { console.log("p1wallLine.distance", p1wallLine.distance); console.log("p2wallLine.distance", p2wallLine.distance); + + isPolygon = false } - // if(p1RoofLine.distance > 0 && p2RoofLine.distance === 0){ - // console.log("A:::") - // p1 = roofLine.startPoint - // p2 = roofLine.endPoint - // p3 = wallLine.endPoint - // p4 = wallLine.startPoint - // - // }else if(p1RoofLine.distance === 0 && p2RoofLine.distance > 0){ - // console.log("B:::") - // p1 = roofLine.endPoint - // p2 = roofLine.startPoint - // p3 = wallLine.startPoint - // p4 = wallLine.endPoint - // - // } else if(p1RoofLine.distance > 0 && p2RoofLine.distance > 0){ - // if(p1RoofLine.distance > p2RoofLine.distance){ - // console.log("C-1:::") - // p1 = roofLine.startPoint - // p2 = roofLine.endPoint - // p3 = wallLine.endPoint - // p4 = wallLine.startPoint - // - // console.log("C-1-1:::",roofLine.startPoint, wallLineStartPoint, wallLine.endPoint, wallLine.x1, wallLine.x2) - // - // p1 = {...roofLine.startPoint} - // //wallLine.startLine은 변경된 라인이 아니라 이전 라인의 값을 가지고 있음 그래서 x1, x2 사용 - // p3 = {...wallLineStartPoint} - // p2.x = p3.x - // p2.y = p1.y - // p4.x = p1.x - // p4.y = (Math.abs(p1outerLine?.intersectionPoint.x - p1.x) < 0.1) ? p1outerLine?.intersectionPoint.y : p3.y - // - // console.log("11111p1,p2:::::",p1, p2, p3,p4) - // canvas.remove(p1outerLine.line) - // - // }else{ - // console.log("C-2:::") - // p1 = roofLine.endPoint - // p2 = roofLine.startPoint - // p3 = wallLine.startPoint - // p4 = wallLine.endPoint - // - // p1 = {...roofLine.endPoint} - // //wallLine.startLine은 변경된 라인이 아니라 이전 라인의 값을 가지고 있음 그래서 x1, x2 사용 - // p3 = {...wallLineEndPoint} - // p2.x = p3.x - // p2.y = p1.y - // p4.x = p1.x - // p4.y = (Math.abs(p2outerLine?.intersectionPoint.x - p1.x) < 0.1) ? p2outerLine?.intersectionPoint.y : p3.y - // console.log("22222p1,p2:::::",p1, p2, p3,p4) - // canvas.remove(p2outerLine.line) - // - // } + // //targetLines를 p1, p2 로 바꾸고 싶다.. + // const editLine = (targetLines, p1, p2) => { + // targetLines.forEach((line) => { + // line.set({ + // x1: p1.x, + // y1: p1.y, + // x2: p2.x, + // y2: p2.y, + // }) + // + // // QLine은 startPoint/endPoint도 쓰므로 같이 갱신 + // if (line.startPoint) { + // line.startPoint.x = p1.x + // line.startPoint.y = p1.y + // } + // if (line.endPoint) { + // line.endPoint.x = p2.x + // line.endPoint.y = p2.y + // } + // + // // originPoint 같은 커스텀 속성을 쓰면 여기도 맞춰줌 + // if (line.attributes?.originPoint) { + // line.attributes.originPoint = { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y } + // } + // }) + // + // + // + // canvas.requestRenderAll() + // // 1) 고유 ID로 찾기 + // const lineToUpdate = targetLines.find((line) => line.id === someLineId) + // if (lineToUpdate) { //특정라인인 + // lineToUpdate.set({ + // x1: newP1.x, + // y1: newP1.y, + // x2: newP2.x, + // y2: newP2.y, + // }) + // lineToUpdate.startPoint.x = newP1.x + // lineToUpdate.startPoint.y = newP1.y + // lineToUpdate.endPoint.x = newP2.x + // lineToUpdate.endPoint.y = newP2.y + // canvas.requestRenderAll() + // } + // + // } - //targetLines를 p1, p2 로 바꾸고 싶다.. - const editLine = (targetLines, p1, p2) => { - targetLines.forEach((line) => { - line.set({ - x1: p1.x, - y1: p1.y, - x2: p2.x, - y2: p2.y, - }) - - // QLine은 startPoint/endPoint도 쓰므로 같이 갱신 - if (line.startPoint) { - line.startPoint.x = p1.x - line.startPoint.y = p1.y - } - if (line.endPoint) { - line.endPoint.x = p2.x - line.endPoint.y = p2.y - } - - // originPoint 같은 커스텀 속성을 쓰면 여기도 맞춰줌 - if (line.attributes?.originPoint) { - line.attributes.originPoint = { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y } - } - }) - - - - canvas.requestRenderAll() - // 1) 고유 ID로 찾기 - const lineToUpdate = targetLines.find((line) => line.id === someLineId) - if (lineToUpdate) { //특정라인인 - lineToUpdate.set({ - x1: newP1.x, - y1: newP1.y, - x2: newP2.x, - y2: newP2.y, - }) - lineToUpdate.startPoint.x = newP1.x - lineToUpdate.startPoint.y = newP1.y - lineToUpdate.endPoint.x = newP2.x - lineToUpdate.endPoint.y = newP2.y - canvas.requestRenderAll() - } - - } - - + */ const drawPolygon = (p1,p2,p3,p4) => { const rect = new QPolygon([p1, p2, p3, p4], { @@ -851,8 +1077,9 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { canvas.add(rect) canvas.renderAll() } - - drawPolygon( p1,p2,p3, p4) + if(isPolygon){ + drawPolygon( p1,p2,p3, p4) + } // const wallLine = wall.baseLines[roofLine.idx - 1]; @@ -2596,11 +2823,11 @@ export const getSelectLinePosition = (wall, selectLine, options = {}) => { const leftIsInside = checkPointInPolygon(leftTestPoint, wall); const rightIsInside = checkPointInPolygon(rightTestPoint, wall); - if (debug) { - console.log('수직선 테스트:'); - console.log(' 왼쪽 포인트:', leftTestPoint, '-> 내부:', leftIsInside); - console.log(' 오른쪽 포인트:', rightTestPoint, '-> 내부:', rightIsInside); - } + // if (debug) { + // console.log('수직선 테스트:'); + // console.log(' 왼쪽 포인트:', leftTestPoint, '-> 내부:', leftIsInside); + // console.log(' 오른쪽 포인트:', rightTestPoint, '-> 내부:', rightIsInside); + // } // left 조건: 왼쪽이 외부, 오른쪽이 내부 if (!leftIsInside && rightIsInside) {