sk2

src/util/skeleton-utils.js

@@ -8,6 +8,7 @@ import { line } from 'framer-motion/m'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { point } from '@turf/turf'
 import { add } from 'mathjs'
+import wallLine from '@/components/floor-plan/modal/wallLineOffset/type/WallLine'
 
 /**
  * 지붕 폴리곤의 스켈레톤(중심선)을 생성하고 캔버스에 그립니다.
@@ -405,6 +406,8 @@ export const skeletonBuilder = (roofId, canvas, textMode) => {
     canvas.skeleton.lastPoints = points
     canvas.set("skeleton", cleanSkeleton);
     canvas.renderAll()
+
+
     console.log('skeleton rendered.', canvas);
   } catch (e) {
     console.error('스켈레톤 생성 중 오류 발생:', e)
@@ -560,18 +563,20 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
 
       if (!lineExists) {
 
-        addLines.push(sktLine);
-
-
         let p1Line = findClosestRoofLine(p1, roof.lines)
         let p2Line = findClosestRoofLine(p2, roof.lines)
-        let p1wallLine = findClosestRoofLine(p1, wall.lines)
+
-        let p2wallLine = findClosestRoofLine(p2, wall.lines)
+        let p1wallLine = findClosestRoofLine(p1, wall.baseLines)
+        let p2wallLine = findClosestRoofLine(p2, wall.baseLines)
 
         console.log("p1LineV",p1Line)
         console.log("p2LineV",p2Line)
         console.log("p1wallLineV",p1wallLine)
         console.log("p2wallLineV",p2wallLine)
+        //skt는 시계방향 p1 -> p2
+        //와곽라인은 시계, 반시계
+        //
+
 
         //외벽선과 접점이 없으면
         if(p1Line.distance > 0 && p2Line.distance > 0) {
@@ -589,12 +594,12 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
         console.log("p1,p2:::::",p1, p2)
 
         if(isSamePoint(p1, p1Line.line.startPoint) || isSamePoint(p1, p1Line.line.endPoint)) {
-          p1.y = p2wallLine.line.endPoint.y
+          //p1.y = p2wallLine.line.endPoint.y
           return
 
         }
         if(isSamePoint(p2, p2Line.line.startPoint) || isSamePoint(p2, p2Line.line.endPoint)) {
-          p2.y = p1wallLine.line.endPoint.y
+          //p2.y = p1wallLine.line.endPoint.y
           return
         }
 
@@ -620,131 +625,125 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
         }
 
 
-        const linesAtP1 = roof.lines.filter(roofLines => {
+        const orgP1 = { ...p1 };
-          console.log(roofLines.startPoint, roofLines.endPoint);
+        const orgP2 = { ...p2 };
-          console.log(isSamePoint(roofLines.startPoint, p1))
+        let p3,p4;
-          console.log(isSamePoint(roofLines.endPoint, p1))
-          return isSamePoint(roofLines.startPoint, p1) || isSamePoint(roofLines.endPoint, p1);
-        });
 
-        const linesAtP2 = roof.lines.filter(roofLines => {
+        let roofIdx = p2Line.index
-          console.log(roofLines.startPoint, roofLines.endPoint);
+        const changeLine = roof.lines[roofIdx]
-          console.log(isSamePoint(roofLines.startPoint, p2))
+        const changeWallLine = wall.baseLines[roofIdx]
-          console.log(isSamePoint(roofLines.endPoint, p2))
-          return isSamePoint(roofLines.startPoint, p2) || isSamePoint(roofLines.endPoint, p2);
-        });
 
-        // if(p2Line.distance > p1Line.distance){
+        p1 = p2Line.line.endPoint //changeLine.startPoint
-        //   p1Line = p2Line;
+        p2.x = changeWallLine.endPoint.x
-        //   p2Line = p1Line;
+        p2.y = changeLine.startPoint.y
-        // }
+        if(Math.abs(orgP2.y - changeLine.endPoint.y) < 0.1){
-        // //x점이 만날때..
+          p2 = orgP2
-        // if(Math.abs(p1.x - p1Line.line.startPoint.x) < 0.1) {
+
-        //   p1.y = p1Line.line.startPoint.y
+        }
-        // } else if(Math.abs(p1.x - p1Line.line.endPoint.x) < 0.1){
+
-        //   p1.y = p1Line.line.endPoint.y
+        if(p1Line.distance > p2Line.distance){
-        // }
+          //반시계
-        // //y점이 만날때
+          roofIdx = p1Line.index
-        // if(Math.abs(p2.x - p2Line.line.startPoint.x) < 0.1) {
+          const changeLine2 = roof.lines[roofIdx]
-        //   p2.y = p2Line.line.startPoint.y
+          const changeWallLine2 = wall.baseLines[roofIdx]
-        // } else if(Math.abs(p2.x - p2Line.line.endPoint.x) < 0.1){
+          p1 = p1Line.line.endPoint.x//changeLine2.endPoint
-        //   p2.y = p2Line.line.endPoint.y
+          p2.x = changeLine2.endPoint.x
-        // }
+          p2.y = changeWallLine2.startPoint.y
+          if(Math.abs(orgP1.x - changeLine2.endPoint.x) < 0.1){
+            p2 = orgP1
+          }
+        }
+
+
+        if (Array.isArray(addLines)) {
+          // 이미 동일한 p1, p2를 가진 객체가 있는지 확인
+          const isDuplicate = addLines.some(line =>
+            (line.p1.x === p1.x && line.p1.y === p1.y &&
+              line.p2.x === p2.x && line.p2.y === p2.y) ||
+            (line.p1.x === p2.x && line.p1.y === p2.y &&
+              line.p2.x === p1.x && line.p2.y === p1.y)
+          );
+
+          if (isDuplicate) {
+            return; // 중복된 라인이 있으면 함수 종료
+          }
+
+          // 중복이 없으면 추가
+          addLines.push({p1, p2});
+
+
+
+          if(addLines.length === 2){
+
+            //기존 라인삭제
+
+            const existingNewLine2 = canvas.getObjects().find(obj => obj.lineName === "helpLine");
+            if (existingNewLine2) {
+              canvas.remove(existingNewLine2);
+              canvas.renderAll();
+            }
+            const line1 = addLines[0];
+            const line2 = addLines[1];
+            // Find the common point (the vertex of the right angle)
+            let commonPoint, p3, p4;
+
+            if (line1.p1.x === line2.p1.x || line1.p1.x === line2.p2.x) {
+              commonPoint = line1.p1;
+            } else {
+              commonPoint = line1.p2;
+            }
+
+            // Find the other two points
+            const otherPoint1 = line1.p1 === commonPoint ? line1.p2 : line1.p1;
+            const otherPoint2 = line2.p1 === commonPoint ? line2.p2 : line2.p1;
+
+            // Calculate the fourth point to form a rectangle
+            p3 = {
+              x: otherPoint1.x + (otherPoint2.x - commonPoint.x),
+              y: otherPoint1.y + (otherPoint2.y - commonPoint.y)
+            };
+
+            // Create the rectangle points in order (clockwise or counter-clockwise)
+            const rectPoints = [commonPoint, otherPoint1, p3, otherPoint2];
+
+            const rect = new QPolygon(rectPoints, {
+              type: POLYGON_TYPE.ROOF,
+              fill: 'transparent',
+              stroke: 'black',
+              strokeWidth: 2,
+              selectable: false,
+              evented: false
+            });
+            canvas.add(rect);
+            canvas.renderAll();
+            return;
+          }
+        }
 
         const lineId = `${p1.x},${p1.y}-${p2.x},${p2.y}`;
 
+
         const newLine2 = new QLine(
           [p1.x, p1.y, p2.x, p2.y],
           {
             parentId   : roof.id,
             fontSize   : roof.fontSize,
-            stroke     : 'yellow',
+            stroke     : 'black',
-            strokeWidth: lineStyle.width,
+            strokeWidth: 2,
-            name       : (sktLine.attributes.isOuterEdge) ? 'eaves' : attributes.type,
+            name       : 'auxiliaryLine',
             attributes : attributes,
             direction  : direction,
             isBaseLine : sktLine.attributes.isOuterEdge,
-            lineName   : (sktLine.attributes.isOuterEdge) ? 'outerLine' : attributes.type,
+            lineName   : 'helpLine',
-            selectable : (!sktLine.attributes.isOuterEdge),
+            isFixed: true,
+            selectable : true,
             roofId     : roofId,
             lineId: lineId
+
           }
         );
 
         canvas.add(newLine2);
-
-/*
-        console.log("그리는 선::::",p1,p2)
-
-        console.log("그리는 선::::",p1Line,p2Line)
-
-        console.log("p1:", p1);
-        console.log("p1Line.intersectionPoint:", p1Line.intersectionPoint);
-        console.log("p2:", p2);
-        console.log("p2Line.intersectionPoint:", p2Line.intersectionPoint);
-
-        const isP1Same = isSamePoint(p1, p1Line.intersectionPoint);
-        const isP2Same = isSamePoint(p2, p2Line.intersectionPoint);
-        console.log("isP1Same:", isP1Same, "isP2Same:", isP2Same, "combined:", isP1Same && isP2Same);
-
-        if (isP1Same && isP2Same) {
-          console.log("Condition is true");
-        } else {
-          console.log("Condition is false");
-        }
-        const xMatch = Math.abs(p1Line.intersectionPoint.x - p2Line.intersectionPoint.x) < 0.1;  // x 좌표가 일치하는지 (0.1 오차 허용)
-        const yMatch = Math.abs(p1Line.intersectionPoint.y - p2Line.intersectionPoint.y) < 0.1;  // y 좌표가 일치하는지 (0.1 오차 허용)
-
-        if(xMatch) {
-          console.log("xMatch:", xMatch);
-            p1.y = p2Line.intersectionPoint.y
-            //p2.y = p1Line.intersectionPoint.y
-
-        }else if(yMatch){
-          console.log("yMatch:", yMatch);
-            //p1.x = p2Line.intersectionPoint.x
-            p2.x = p1Line.intersectionPoint.x
-        }else{
-          console.log("No Match:");
-
-          //if(isHorizontal) {
-
-          const xMatch = Math.abs(p1.x - p2.x) < 0.1;  // x 좌표가 일치하는지 (0.1 오차 허용)
-          const yMatch = Math.abs(p1.y - p2.y) < 0.1;  // y 좌표가 일치하는지 (0.1 오차 허용)
-
-          if(yMatch){
-            p1.x = p1Line.intersectionPoint.x;
-            p1.y = p1Line.intersectionPoint.y;
-            p2.x = p1.x;
-            p2.y = p1wallLine.line.startPoint.y;
-            console.log("p1LineV",p1Line)
-            console.log("p2LineV",p2Line)
-            console.log("p1wallLineV",p1wallLine)
-            console.log("p2wallLineV",p2wallLine)
-          }
-          if(xMatch){
-            p1.x = p2Line.intersectionPoint.x;
-            p1.y = p2Line.intersectionPoint.y;
-            p2.x = p2wallLine.line.endPoint.x;
-            p2.y = p1.y;
-            console.log("p1LineH",p1Line)
-            console.log("p2LineH",p2Line)
-            console.log("p1wallLineH",p1wallLine)
-            console.log("p2wallLineH",p2wallLine)
-          }
-
-
-
-        }
-        console.log("New p1:", p1);
-
-        console.log("New p2:", p2);
-        if( !xMatch && !yMatch) {
-          //그림
-        }
-
-*/
-
       }
 
 
@@ -776,8 +775,58 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
    canvas.renderAll();
   });
 
-  // 같은 라인이 없으므로 새 다각형 라인 생성
+  // let outerLinePoints = canvas.getObjects().filter((obj) => obj.name === 'outerLinePoint' )
+  // outerLinePoints.forEach((outerLinePoint) => {
+  //   canvas.remove(outerLinePoint)
+  //   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()
+  // });
+
+  // 같은 라인이 없으므로 새 다각형 라인 생성
+    //라인 편집
+   let outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine' && obj.attributes.roofId === roofId)
+   outerLines.forEach((outerLine) => {
+     const wallLine = wall.baseLines[outerLine.idx - 1];
+     const loofLine = roof.lines[outerLine.idx - 1];
+
+     if(isSamePoint(wallLine.startPoint, outerLine.startPoint) ||
+       isSamePoint(wallLine.endPoint, outerLine.endPoint)){
+
+     }else{
+       const p1 = loofLine.endPoint
+       const p2 = wallLine.endPoint
+       p2.x = p1.x
+
+      const newLine2 = new QLine(
+         [p1.x, p1.y, p2.x, p2.y],
+         {
+           parentId   : roof.id,
+           fontSize   : roof.fontSize,
+           stroke     : 'black',
+           strokeWidth: 2,
+           name       : 'auxiliaryLine',
+           lineName   : 'helpLine',
+           isFixed: true,
+           selectable : true,
+           roofId     : roofId,
+         }
+       );
+
+       canvas.add(newLine2);
+       canvas.renderAll();
+     }
+   });
   return innerLines;
 }