임시 완성2

src/util/skeleton-utils.js

@@ -571,27 +571,12 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
 
       skeletonLine.set('visible', false); //임시
       roof.set({
-        stroke: 'black',
+        //stroke: 'black',
-        strokeWidth: 10
+        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 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 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 newPStart //= {x:roofLine.x1, y:roofLine.y1}
-let newPEnd  //=  {x:movedLines.x2, y:movedLines.y2}
+    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)
-
+    getAddLine(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)
 
 
   }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], {
+    getAddLine(newPStart, newPEnd)
-      stroke: 'orange',
-      strokeWidth: 10,
-      property: 'normal',
-      fontSize: 14,
-      lineName: 'helpLine',
-      roofId:roofId,
-      parentId: roof.id,
-    
-    });
-    canvas.add(testLine)
     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);
    // }
   }
 }