집추가작업3

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',
+  //       let outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine' && obj.attributes.roofId === roofId)
-         stroke: 'red',
+  // outerLines.forEach((outerLine) => {
-         strokeWidth: 2,
+  //   canvas.remove(outerLine)
-         selectable: false,
+  //   canvas.renderAll()
-         evented: false,
+  // });
-         name: 'roofLineRect',
+
-         roofId: roofId,
+  // let baseLines = canvas.getObjects().filter((obj) => obj.name === 'baseLine' && obj.parentId === roofId)
-       })
+  // baseLines.forEach((baseLine) => {
-       canvas.add(rect)
+  //   canvas.remove(baseLine)
-       canvas.renderAll()
+  //   canvas.renderAll()
+  // });
+
      }
    });
   return innerLines;