src/components/floor-plan/modal/object/DormerOffset.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useRecoilValue } from 'recoil'
@@ -15,8 +15,8 @@ export default function DormerOffset(props) {
   const { closePopup } = usePopup()
   const [arrow1, setArrow1] = useState(null)
   const [arrow2, setArrow2] = useState(null)
-  const arrow1LengthRef = useRef(0)
+  const arrow1LengthRef = useRef()
-  const arrow2LengthRef = useRef(0)
+  const arrow2LengthRef = useRef()
   const [arrow1Length, setArrow1Length] = useState(0)
   const [arrow2Length, setArrow2Length] = useState(0)
 
@@ -59,12 +59,12 @@ export default function DormerOffset(props) {
                     name=""
                     label=""
                     className="input-origin block"
-                    value={arrow1LengthRef.current.value ?? 0}
+                    value={arrow1LengthRef.current.value}
                     ref={arrow1LengthRef}
                     onChange={(value) => setArrow1Length(value)}
                     options={{
                       allowNegative: false,
-                      allowDecimal: false,
+                      allowDecimal: false
                     }}
                   />
                 </div>

src/util/fabric-extensions.js

@@ -29,39 +29,22 @@ fabric.Rect.prototype.getCurrentPoints = function () {
 
 /**
  * fabric.Group에 getCurrentPoints 메서드를 추가 (도머 그룹용)
- * 그룹 내 객체들의 점들을 수집하여 현재 월드 좌표를 반환
+ * 그룹의 groupPoints를 다시 계산하여 반환
  */
 fabric.Group.prototype.getCurrentPoints = function () {
-  // 그룹 내 객체들로부터 실시간으로 점들을 계산
+  // groupPoints를 다시 계산
-  if (this._objects && this._objects.length > 0) {
-    let allPoints = []
 
-    // 그룹 내 모든 객체의 점들을 수집
+  // 그룹에 groupPoints가 있으면 해당 점들을 사용 (도머의 경우)
-    this._objects.forEach(function (obj) {
+  if (this.groupPoints && Array.isArray(this.groupPoints)) {
-      if (obj.getCurrentPoints && typeof obj.getCurrentPoints === 'function') {
+    const matrix = this.calcTransformMatrix()
-        const objPoints = obj.getCurrentPoints()
+    console.log('this.groupPoints', this.groupPoints)
-        allPoints = allPoints.concat(objPoints)
+    return this.groupPoints.map(function (p) {
-      } else if (obj.points && Array.isArray(obj.points)) {
+      const point = new fabric.Point(p.x, p.y)
-        const pathOffset = obj.pathOffset || { x: 0, y: 0 }
+      return fabric.util.transformPoint(point, matrix)
-        const matrix = obj.calcTransformMatrix()
-        const transformedPoints = obj.points
-          .map(function (p) {
-            return new fabric.Point(p.x - pathOffset.x, p.y - pathOffset.y)
-          })
-          .map(function (p) {
-            return fabric.util.transformPoint(p, matrix)
-          })
-        allPoints = allPoints.concat(transformedPoints)
-      }
     })
-
-    if (allPoints.length > 0) {
-      // Convex Hull 알고리즘을 사용하여 외곽 점들만 반환
-      return this.getConvexHull(allPoints)
-    }
   }
 
-  // 객체가 없으면 바운딩 박스를 사용
+  // groupPoints가 없으면 바운딩 박스를 사용
   const bounds = this.getBoundingRect()
   const points = [
     { x: bounds.left, y: bounds.top },

src/util/skeleton-utils.js

@@ -766,19 +766,15 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
       });
     };
 
-   // const sortedWallLines = sortCurrentRoofLines(wall.lines);
+    const sortedWallLines = sortCurrentRoofLines(wall.lines);
     // roofLines의 방향에 맞춰 currentRoofLines 조정 후 정렬
     const alignedCurrentRoofLines = alignLineDirection(currentRoofLines, roofLines);
     const sortedCurrentRoofLines = sortCurrentRoofLines(alignedCurrentRoofLines);
-   // const sortedRoofLines = sortCurrentRoofLines(roofLines);
+    const sortedRoofLines = sortCurrentRoofLines(roofLines);
     const sortedWallBaseLines = sortCurrentRoofLines(wall.baseLines);
-   // const sortedBaseLines = sortBaseLinesByWallLines(wall.baseLines, wallLines);
+    const sortedBaseLines = sortBaseLinesByWallLines(wall.baseLines, wallLines);
     const sortRoofLines = sortBaseLinesByWallLines(roofLines, wallLines);
 
-    // 원본 wallLines를 복사하여 사용
-    const sortedWallLines = [...wallLines];
-    const sortedBaseLines = sortBaseLinesByWallLines(wall.baseLines, sortedWallLines);
-    const sortedRoofLines = sortBaseLinesByWallLines(roofLines, sortedWallLines);
 
     //wall.lines 는 기본 벽 라인
     //wall.baseLine은 움직인라인
@@ -806,7 +802,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
       const currentRoofLine = currentRoofLines[index];
       const moveLine = sortedBaseLines[index]
       const wallBaseLine = sortedBaseLines[index]
-      //console.log("wallBaseLine", wallBaseLine);
+      console.log("wallBaseLine", wallBaseLine);
 
       //roofline 외곽선 설정
 
@@ -880,7 +876,7 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
         return line
       }
 
-      //getAddLine(roofLine.startPoint, roofLine.endPoint, ) //외곽선을 그린다
+      getAddLine(roofLine.startPoint, roofLine.endPoint, )
 
       newPStart = { x: roofLine.x1, y: roofLine.y1 }
       newPEnd = { x: roofLine.x2, y: roofLine.y2 }
@@ -1232,7 +1228,6 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
                   getAddLine({ x: pLineX, y: newPointY }, { x: sPoint.x, y: sPoint.y }, 'pink')
                 }
                 //getAddLine({ x: roofLine.x2, y: roofLine.y2 }, { x: roofLine.x2, y: newPointY }, 'orange')
-
               }
 
               if(isStartEnd.end){
@@ -1484,8 +1479,6 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
 
         getAddLine(newPStart, newPEnd, 'red')
         //canvas.remove(roofLine)
-      }else{
-        getAddLine(roofLine.startPoint, roofLine.endPoint, )
       }
       canvas.renderAll()
     });