group object 좌표 재계산 로직 수정

지붕재 변경 시 같은 지붕재를 가지고 있는 다른 지붕들의 지붕재도 변경 추가

src/components/floor-plan/CanvasFrame.jsx

@@ -32,6 +32,7 @@ import { useEvent } from '@/hooks/useEvent'
 import { compasDegAtom } from '@/store/orientationAtom'
 import { hotkeyStore } from '@/store/hotkeyAtom'
 import { usePopup } from '@/hooks/usePopup'
+import { outerLinePointsState } from '@/store/outerLineAtom'
 
 export default function CanvasFrame() {
   const canvasRef = useRef(null)
@@ -45,6 +46,7 @@ export default function CanvasFrame() {
   const totalDisplay = useRecoilValue(totalDisplaySelector) // 집계표 표시 여부
   const { setIsGlobalLoading } = useContext(QcastContext)
   const resetModuleStatisticsState = useResetRecoilState(moduleStatisticsState)
+  const resetOuterLinePoints = useResetRecoilState(outerLinePointsState)
   const resetMakersState = useResetRecoilState(makersState)
   const resetSelectedMakerState = useResetRecoilState(selectedMakerState)
   const resetSeriesState = useResetRecoilState(seriesState)
@@ -137,6 +139,7 @@ export default function CanvasFrame() {
 
   const resetRecoilData = () => {
     // resetModuleStatisticsState()
+    resetOuterLinePoints()
     resetMakersState()
     resetSelectedMakerState()
     resetSeriesState()

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } 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()
+  const arrow1LengthRef = useRef(0)
-  const arrow2LengthRef = useRef()
+  const arrow2LengthRef = useRef(0)
   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}
+                    value={arrow1LengthRef.current.value ?? 0}
                     ref={arrow1LengthRef}
                     onChange={(value) => setArrow1Length(value)}
                     options={{
                       allowNegative: false,
-                      allowDecimal: false
+                      allowDecimal: false,
                     }}
                   />
                 </div>

src/hooks/common/useCommonUtils.js

@@ -648,6 +648,7 @@ export function useCommonUtils() {
             lockMovementY: true,
             name: obj.name,
             editable: false,
+            selectable: true, // 복사된 객체 선택 가능하도록 설정
             id: uuidv4(), //복사된 객체라 새로 따준다
           })
 
@@ -656,19 +657,25 @@ export function useCommonUtils() {
 
           //배치면일 경우
           if (obj.name === 'roof') {
-            clonedObj.setCoords()
+            clonedObj.canvas = canvas // canvas 참조 설정
-            clonedObj.fire('modified')
-            // clonedObj.fire('polygonMoved')
             clonedObj.set({
               direction: obj.direction,
               directionText: obj.directionText,
               roofMaterial: obj.roofMaterial,
+              stroke: 'black', // 복사된 객체는 선택 해제 상태의 색상으로 설정
+              selectable: true, // 선택 가능하도록 설정
+              evented: true, // 마우스 이벤트를 받을 수 있도록 설정
+              isFixed: false, // containsPoint에서 특별 처리 방지
             })
 
             obj.lines.forEach((line, index) => {
               clonedObj.lines[index].set({ attributes: line.attributes })
             })
 
+            clonedObj.fire('polygonMoved') // 내부 좌표 재계산 (points, pathOffset)
+            clonedObj.fire('modified')
+            clonedObj.setCoords() // 모든 속성 설정 후 좌표 업데이트
+            canvas.setActiveObject(clonedObj)
             canvas.renderAll()
             addLengthText(clonedObj) //수치 추가
             drawDirectionArrow(clonedObj) //방향 화살표 추가

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -372,11 +372,18 @@ export function useRoofAllocationSetting(id) {
     setBasicSetting((prev) => {
       return { ...prev, selectedRoofMaterial: newRoofList.find((roof) => roof.selected) }
     })
+    const selectedRoofMaterial = newRoofList.find((roof) => roof.selected)
+    const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF && obj.roofMaterial?.index === selectedRoofMaterial.index)
+
+    roofs.forEach((roof) => {
+      setSurfaceShapePattern(roof, roofDisplay.column, false, { ...selectedRoofMaterial }, true)
+      drawDirectionArrow(roof)
+    })
 
     setRoofList(newRoofList)
     setRoofMaterials(newRoofList)
     setRoofsStore(newRoofList)
-    const selectedRoofMaterial = newRoofList.find((roof) => roof.selected)
+
     setSurfaceShapePattern(currentObject, roofDisplay.column, false, selectedRoofMaterial, true)
     drawDirectionArrow(currentObject)
     modifyModuleSelectionData()

src/util/fabric-extensions.js

@@ -29,22 +29,39 @@ 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가 있으면 해당 점들을 사용 (도머의 경우)
+    // 그룹 내 모든 객체의 점들을 수집
-  if (this.groupPoints && Array.isArray(this.groupPoints)) {
+    this._objects.forEach(function (obj) {
-    const matrix = this.calcTransformMatrix()
+      if (obj.getCurrentPoints && typeof obj.getCurrentPoints === 'function') {
-    console.log('this.groupPoints', this.groupPoints)
+        const objPoints = obj.getCurrentPoints()
-    return this.groupPoints.map(function (p) {
+        allPoints = allPoints.concat(objPoints)
-      const point = new fabric.Point(p.x, p.y)
+      } else if (obj.points && Array.isArray(obj.points)) {
-      return fabric.util.transformPoint(point, matrix)
+        const pathOffset = obj.pathOffset || { x: 0, y: 0 }
+        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 },