diff --git a/src/util/skeleton-utils.js b/src/util/skeleton-utils.js index 9faa1671..f48b75ef 100644 --- a/src/util/skeleton-utils.js +++ b/src/util/skeleton-utils.js @@ -533,7 +533,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { const innerLine = new QLine([p1.x, p1.y, p2.x, p2.y], { parentId: roof.id, fontSize: roof.fontSize, - stroke: lineStyle.color, + stroke: (sktLine.attributes.isOuterEdge)?'orange':lineStyle.color, strokeWidth: lineStyle.width, name: (sktLine.attributes.isOuterEdge)?'eaves': attributes.type, attributes: attributes, @@ -545,7 +545,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { }); - canvas.add(innerLine); + canvas.add(innerLine); innerLine.bringToFront(); existingLines.add(lineKey); // 추가된 라인을 추적 @@ -895,17 +895,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { // 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() - // }); + // 같은 라인이 없으므로 새 다각형 라인 생성 @@ -941,6 +931,9 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { } } if(isMoveLine){ + const currentOuterLines = canvas + .getObjects() + .filter((obj) => obj.lineName === 'outerLine' && obj.roofId === roofId) const roofLine = roof.lines[index]; const p1RoofLine = findClosestRoofLine(wallLineStartPoint,roof.lines) const p2RoofLine = findClosestRoofLine(wallLineEndPoint,roof.lines) @@ -948,18 +941,32 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { const p1wallLine = findClosestRoofLine(wallLineStartPoint,wall.lines) const p2wallLine = findClosestRoofLine(wallLineEndPoint,wall.lines) + const p1outerLine = findClosestRoofLine(wallLineStartPoint,currentOuterLines) + const p2outerLine = findClosestRoofLine(wallLineEndPoint,currentOuterLines) + + console.log("p1RoofLineV",p1RoofLine) console.log("p2RoofLineV",p2RoofLine) console.log("p1wallLineV",p1wallLine) console.log("p2wallLineV",p2wallLine) - + 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() - +currentOuterLines.forEach((line) => { + line.set('stroke', 'green') // 원하는 색으로 변경 +}) + +if (currentOuterLines.length > 0) { + canvas.requestRenderAll() +} + const candidates = canvas.getObjects().filter((obj) => obj.roofId === roofId) + console.log('candidates', candidates.map((obj) => obj.lineName)) + if(p1RoofLine.distance > 0 && p2RoofLine.distance === 0){ console.log("A:::") p1 = roofLine.startPoint @@ -990,10 +997,10 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { p2.x = p3.x p2.y = p1.y p4.x = p1.x - p4.y = (outerLine?.startPoint.x === p1.x)?outerLine.startPoint.y:p3.y + p4.y = (p1outerLine?.intersectionPoint.x === p1.x)?p1outerLine?.intersectionPoint.y:p3.y console.log("p1,p2:::::",p1, p2, p3,p4) - + canvas.remove(p1outerLine.line) }else{ console.log("C-2:::") @@ -1014,7 +1021,72 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { } } + //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], { + type: POLYGON_TYPE.ROOF, + fill: 'transparent', + stroke: 'black', + strokeWidth: 3, + selectable: false, + evented: false, + name: 'roofLineRect', + roofId: roofId, + }) + canvas.add(rect) + canvas.renderAll() + } + + drawPolygon( p1,p2,p3, p4) + // const wallLine = wall.baseLines[roofLine.idx - 1]; @@ -1032,18 +1104,20 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => { //wallLine이 baseLine의 위 또는 오른쪽에 있을때 - const rect = new QPolygon([p1, p2, p3, p4], { - type: POLYGON_TYPE.ROOF, - fill: 'transparent', - stroke: 'red', - strokeWidth: 2, - selectable: false, - evented: false, - name: 'roofLineRect', - roofId: roofId, - }) - canvas.add(rect) - 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() + // }); + } }); return innerLines;