src/hooks/roofcover/useMovementSetting.js

@@ -575,7 +575,19 @@ export function useMovementSetting(id) {
       targetBaseLines.push({ line: target, distance: 0 })
     }
 
-    targetBaseLines.sort((a, b) => a.distance - b.distance)
+    // Remove duplicate lines
+    const uniqueLines = new Map();
+    targetBaseLines = targetBaseLines.filter(item => {
+      const key = `${item.line.x1},${item.line.y1},${item.line.x2},${item.line.y2}`;
+      if (!uniqueLines.has(key)) {
+        uniqueLines.set(key, true);
+        return true;
+      }
+      return false;
+    });
+
+    // Sort by distance
+    targetBaseLines.sort((a, b) => a.distance - b.distance);
     targetBaseLines = targetBaseLines.filter((line) => line.distance === targetBaseLines[0].distance)
 
     if (isGableRoof) {

src/hooks/useContextMenu.js

@@ -162,6 +162,7 @@ export function useContextMenu() {
         case 'auxiliaryLine':
         case 'hip':
         case 'ridge':
+        case 'eaveHelpLine':
           if (selectedMenu === 'surface') {
             setContextMenu([
               [

src/util/skeleton-utils.js

@@ -159,7 +159,7 @@ const movingLineFromSkeleton = (roofId, canvas) => {
     // console.log("3333linePosition:::::", result.position);
 
     const position = movePosition //result.position;
-    const absMove = Big(moveUpDown).times(1).div(10);
+    const moveUpDownLength = Big(moveUpDown).times(1).div(10);
     const modifiedStartPoints = [];
     // oldPoints를 복사해서 새로운 points 배열 생성
     let newPoints = oldPoints.map(point => ({...point}));
@@ -181,64 +181,22 @@ const movingLineFromSkeleton = (roofId, canvas) => {
       const offset = line.attributes.offset
       // 새로운 좌표 계산
       let newStartPoint = {...originalStartPoint};
-      let newEndPoint = {...originalEndPoint};
+      let newEndPoint = {...originalEndPoint}
-
-      // 위치와 방향에 따라 좌표 조정
-      /*
-              switch (position) {
-                case 'left':
-                  if (moveDirection === 'up') {
-                    newStartPoint.x = Big(line.startPoint.x).minus(absMove).toNumber();
-                    newEndPoint.x = Big(line.endPoint.x).minus(absMove).toNumber();
-                  } else if (moveDirection === 'down') {
-                    newStartPoint.x = Big(line.startPoint.x).plus(absMove).toNumber();
-                    newEndPoint.x = Big(line.endPoint.x).plus(absMove).toNumber();
-                  }
-                  break;
-                case 'right':
-                  if (moveDirection === 'up') {
-                    newStartPoint.x = Big(line.startPoint.x).plus(absMove).toNumber();
-                    newEndPoint.x = Big(line.endPoint.x).plus(absMove).toNumber();
-                  } else if (moveDirection === 'down') {
-                    newStartPoint.x = Big(line.startPoint.x).minus(absMove).toNumber();
-                    newEndPoint.x = Big(line.endPoint.x).minus(absMove).toNumber();
-                  }
-                  break;
-                case 'top':
-                  if (moveDirection === 'up') {
-                    newStartPoint.y = Big(line.startPoint.y).minus(absMove).toNumber();
-                    newEndPoint.y = Big(line.endPoint.y).minus(absMove).toNumber();
-                  } else if (moveDirection === 'down') {
-                    newStartPoint.y = Big(line.startPoint.y).plus(absMove).toNumber();
-                    newEndPoint.y = Big(line.endPoint.y).plus(absMove).toNumber();
-                  }
-                  break;
-                case 'bottom':
-                  if (moveDirection === 'up') {
-                    newStartPoint.y = Big(line.startPoint.y).plus(absMove).toNumber();
-                    newEndPoint.y = Big(line.endPoint.y).plus(absMove).toNumber();
-                  } else if (moveDirection === 'down') {
-                    newStartPoint.y = Big(line.startPoint.y).minus(absMove).toNumber();
-                    newEndPoint.y = Big(line.endPoint.y).minus(absMove).toNumber();
-                  }
-                  break;
-              }
-      */
 // 원본 라인 업데이트
       // newPoints 배열에서 일치하는 포인트들을 찾아서 업데이트
-      console.log('absMove::', absMove);
+      console.log('absMove::', moveUpDownLength);
       newPoints.forEach((point, index) => {
         if(position === 'bottom'){
           if (moveDirection === 'in') {
             if(isSamePoint(roof.basePoints[index], originalStartPoint) || isSamePoint(roof.basePoints[index], originalEndPoint)) {
-              point.y = Big(point.y).minus(absMove).toNumber();
+              point.y = Big(point.y).minus(moveUpDownLength).toNumber();
             }
             // if (isSamePoint(roof.basePoints[index], originalEndPoint)) {
             //   point.y = Big(point.y).minus(absMove).toNumber();
             // }
           }else if (moveDirection === 'out'){
             if(isSamePoint(roof.basePoints[index], originalStartPoint) || isSamePoint(roof.basePoints[index], originalEndPoint)) {
-              point.y = Big(point.y).plus(absMove).toNumber();
+              point.y = Big(point.y).plus(moveUpDownLength).toNumber();
             }
             // if (isSamePoint(roof.basePoints[index], originalEndPoint)) {
             //   point.y = Big(point.y).plus(absMove).toNumber();
@@ -248,31 +206,31 @@ const movingLineFromSkeleton = (roofId, canvas) => {
         }else if (position === 'top'){
           if(moveDirection === 'in'){
             if(isSamePoint(roof.basePoints[index], originalStartPoint)) {
-              point.y = Big(point.y).plus(absMove).toNumber();
+              point.y = Big(point.y).plus(moveUpDownLength).toNumber();
             }
             if (isSamePoint(roof.basePoints[index], originalEndPoint)) {
-              point.y = Big(point.y).plus(absMove).toNumber();
+              point.y = Big(point.y).plus(moveUpDownLength).toNumber();
             }
           }else if(moveDirection === 'out'){
             if(isSamePoint(roof.basePoints[index], originalStartPoint)) {
-              point.y = Big(point.y).minus(absMove).toNumber();
+              point.y = Big(point.y).minus(moveUpDownLength).toNumber();
             }
             if (isSamePoint(roof.basePoints[index], originalEndPoint)) {
-              point.y = Big(point.y).minus(absMove).toNumber();
+              point.y = Big(point.y).minus(moveUpDownLength).toNumber();
             }
           }
 
         }else if(position === 'left'){
           if(moveDirection === 'in'){
             if(isSamePoint(roof.basePoints[index], originalStartPoint) || isSamePoint(roof.basePoints[index], originalEndPoint)) {
-              point.x = Big(point.x).plus(absMove).toNumber();
+              point.x = Big(point.x).plus(moveUpDownLength).toNumber();
             }
             // if (isSamePoint(roof.basePoints[index], originalEndPoint)) {
             //   point.x = Big(point.x).plus(absMove).toNumber();
             // }
           }else if(moveDirection === 'out'){
             if(isSamePoint(roof.basePoints[index], originalStartPoint) || isSamePoint(roof.basePoints[index], originalEndPoint)) {
-              point.x = Big(point.x).minus(absMove).toNumber();
+              point.x = Big(point.x).minus(moveUpDownLength).toNumber();
             }
             // if (isSamePoint(roof.basePoints[index], originalEndPoint)) {
             //   point.x = Big(point.x).minus(absMove).toNumber();
@@ -282,17 +240,17 @@ const movingLineFromSkeleton = (roofId, canvas) => {
         }else if(position === 'right'){
           if(moveDirection === 'in'){
             if(isSamePoint(roof.basePoints[index], originalStartPoint)) {
-              point.x = Big(point.x).minus(absMove).toNumber();
+              point.x = Big(point.x).minus(moveUpDownLength).toNumber();
             }
             if (isSamePoint(roof.basePoints[index], originalEndPoint)) {
-              point.x = Big(point.x).minus(absMove).toNumber();
+              point.x = Big(point.x).minus(moveUpDownLength).toNumber();
             }
           }else if(moveDirection === 'out'){
             if(isSamePoint(roof.basePoints[index], originalStartPoint)) {
-              point.x = Big(point.x).plus(absMove).toNumber();
+              point.x = Big(point.x).plus(moveUpDownLength).toNumber();
             }
             if (isSamePoint(roof.basePoints[index], originalEndPoint)) {
-              point.x = Big(point.x).plus(absMove).toNumber();
+              point.x = Big(point.x).plus(moveUpDownLength).toNumber();
             }
           }
 
@@ -440,8 +398,8 @@ export const skeletonBuilder = (roofId, canvas, textMode) => {
  */
 const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
   if (!skeleton?.Edges) return []
-  let roof = canvas?.getObjects().find((object) => object.id === roofId)
+  const roof = canvas?.getObjects().find((object) => object.id === roofId)
-  let wall = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.WALL && obj.attributes.roofId === roofId)
+  const wall = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.WALL && obj.attributes.roofId === roofId)
   let skeletonLines = []
   let findPoints = [];
 
@@ -650,8 +608,9 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
     canvas.renderAll();
   });
 
-  //if((roof.moveUpDown??0 > 0) ) {
+  if((roof.moveUpDown??0 > 0) || (roof.moveFlowLine??0 > 0)  ) {
 
+    const getMoveUpDownLine = () => {
   // 같은 라인이 없으므로 새 다각형 라인 생성
   //라인 편집
   //  let i = 0
@@ -698,20 +657,6 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
     });
   }
 
-
-    // function sortCurrentRoofLines(lines) {
-    //   return [...lines].sort((a, b) => {
-    //     const aX = a.x1 ?? a.get('x1')
-    //     const aY = a.y1 ?? a.get('y1')
-    //     const bX = b.x1 ?? b.get('x1')
-    //     const bY = b.y1 ?? b.get('y1')
-
-    //     if (aX !== bX) return aX - bX
-    //     return aY - bY
-    //   })
-    // }
-
-
     // 각 라인 집합 정렬
 
   // roofLines의 방향에 맞춰 currentRoofLines의 방향을 조정
@@ -784,16 +729,19 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
   //wall.baseLine은 움직인라인
   const movedLines = []
 
-
+  // 조건에 맞는 라인들만 필터링
-    wallLines.forEach((wallLine, index) => {
+  const validWallLines = wallLines.filter((wallLine, index) => wallLine.idx - 1 === index);
 
 
-      // const roofLine = sortedRoofLines[index];
+  validWallLines.forEach((wallLine, index) => {
-      // const currentRoofLine = sortedCurrentRoofLines[index];
-      // const moveLine = sortedWallBaseLines[index]
-      // const wallBaseLine = sortedWallBaseLines[index]
 
-      const roofLine = sortRoofLines[index];
+    const originalIndex = wallLines.indexOf(wallLine);
+    const roofLine = sortRoofLines[originalIndex];
+    const currentRoofLine = currentRoofLines[originalIndex];
+    const moveLine = wall.baseLines[originalIndex];
+    const wallBaseLine = wall.baseLines[originalIndex];
+
+    //  const roofLine = sortRoofLines[index];
 
     if (roofLine.attributes.wallLine !== wallLine.id || (roofLine.idx - 1) !== index) {
       console.log("wallLine2::::", wallLine.id)
@@ -804,9 +752,9 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
       return false
     }//roofLines.find(line => line.attributes.wallLineId === wallLine.attributes.wallId);
 
-      const currentRoofLine = currentRoofLines[index];
+    //  const currentRoofLine = currentRoofLines[index];
-      const moveLine = wall.baseLines[index]
+    //  const moveLine = wall.baseLines[index]
-      const wallBaseLine = wall.baseLines[index]
+    //  const wallBaseLine = wall.baseLines[index]
     //console.log("wallBaseLine", wallBaseLine);
 
     //roofline 외곽선 설정
@@ -847,20 +795,23 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
         parentId   : roof.id,
         fontSize   : roof.fontSize,
         stroke     : '#3FBAE6',
-          strokeWidth: 2,
+        strokeWidth: 4,
         name       : 'eaveHelpLine',
         lineName   : 'eaveHelpLine',
-          selectable : true,
         visible    : true,
         roofId     : roofId,
+        selectable: true,
+        hoverCursor: 'pointer',
         attributes : {
           type   : 'eaveHelpLine',
           isStart: true,
           pitch  : wallLine.attributes.pitch,
         }
       });
+
       //coordinateText(line)
       canvas.add(line)
+      line.bringToFront()
       canvas.renderAll();
       return line
     }
@@ -1542,10 +1493,12 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
     }
 
 
-
     canvas.renderAll()
   });
- // }
+}
+    getMoveUpDownLine()
+
+  }
 
   if (findPoints.length > 0) {
     // 모든 점에 대해 라인 업데이트를 누적