지붕형상 이동 기능 추가.

src/hooks/common/useRoofFn.js

@@ -4,6 +4,7 @@ import { selectedRoofMaterialSelector } from '@/store/settingAtom'
 import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 import { POLYGON_TYPE } from '@/common/common'
 import { useEvent } from '@/hooks/useEvent'
+import { useLine } from '@/hooks/useLine'
 
 const ROOF_COLOR = {
   0: 'rgb(199,240,213)',
@@ -16,6 +17,7 @@ export function useRoofFn() {
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
   const currentObject = useRecoilValue(currentObjectState)
   const { addCanvasMouseEventListener, initEvent } = useEvent()
+  const { addPitchText } = useLine()
 
   //면형상 선택 클릭시 지붕 패턴 입히기
   function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false, roofMaterial = selectedRoofMaterial) {
@@ -187,8 +189,6 @@ export function useRoofFn() {
     const roof = roofBase[0]
     const wall = roof.wall
 
-    console.log('roof.points', roof.points)
-
     const checkPolygon = new fabric.Polygon(roof.points, {
       name: 'moveRoofPolygon',
       stroke: '#ff0000',
@@ -209,34 +209,24 @@ export function useRoofFn() {
     })
 
     canvas.on('mouse:down', (event) => {
-      const mousePos = canvas.getPointer(event.e)
+      let mousePos = canvas.getPointer(event.e)
+      mousePos = { x: Math.round(mousePos.x), y: Math.round(mousePos.y) }
 
       const texts = canvas.getObjects().filter((obj) => obj.type === 'text' && (obj.attributes?.roofId === roof.id || obj.parentId === roof.id))
       texts.forEach((text) => canvas.remove(text))
 
+      const outerLines = canvas.getObjects().filter((obj) => obj.type === 'QLine' && (obj.attributes?.roofId === roof.id || obj.parentId === roof.id))
+
       const allRoofObject = canvas
         .getObjects()
-        .filter((obj) => obj !== roof && obj !== wall && (obj.attributes?.roofId === roof.id || obj.parentId === roof.id || obj.parentId === wall.id))
+        .filter(
+          (obj) => obj !== roof && /*obj !== wall &&*/ (obj.attributes?.roofId === roof.id || obj.parentId === roof.id || obj.parentId === wall.id),
+        )
 
       // // Calculate the movement delta
-      // const deltaX = mousePos.x - roof.left - roof.width / 2
-      // const deltaY = mousePos.y - roof.top - roof.height / 2
 
       const originalRoofLeft = roof.left
       const originalRoofTop = roof.top
-      const originalRoofWidth = roof.width
-      const originalRoofHeight = roof.height
-
-      console.log(
-        'originalRoofLeft',
-        originalRoofLeft,
-        'originalRoofTop',
-        originalRoofTop,
-        'originalRoofWidth',
-        originalRoofWidth,
-        'originalRoofHeight',
-        originalRoofHeight,
-      )
 
       roof.set({
         left: mousePos.x,
@@ -248,46 +238,58 @@ export function useRoofFn() {
       roof.fire('polygonMoved')
       roof.fire('modified')
 
-      wall.set({
+      // 기존 위치와 새로운 위치의 차이를 계산
-        left: mousePos.x,
+      const deltaX = roof.left - originalRoofLeft
-        top: mousePos.y,
+      const deltaY = roof.top - originalRoofTop
-        originX: 'center',
-        originY: 'center',
-        objectCaching: false,
-      })
-      wall.fire('polygonMoved')
-      wall.fire('modified')
-
-      const newRoofLeft = roof.left
-      const newRoofTop = roof.top
-
-      console.log('originalRoofLeft', originalRoofLeft, 'originalRoofTop', originalRoofTop, 'newRoofLeft', newRoofLeft, 'newRoofTop', newRoofTop)
-
-      const deltaX = newRoofLeft - originalRoofLeft - originalRoofWidth / 2
-      const deltaY = newRoofTop - originalRoofTop - originalRoofHeight / 2
 
       // Move all related objects by the delta
       allRoofObject.forEach((obj) => {
-        // console.log('obj.type : ', obj.type, obj)
+        if (obj.points !== undefined) {
-        obj.set({
+          obj.set({
-          left: obj.left + deltaX,
+            left: obj.left + deltaX,
-          top: obj.top + deltaY,
+            top: obj.top + deltaY,
-          objectCaching: false,
+            originX: 'center',
-        })
+            originY: 'center',
-        // obj._calcDimensions()
+            objectCaching: false,
-        obj.setCoords()
+          })
+          obj.fire('polygonMoved')
+          obj.fire('modified')
+        } else {
+          console.log('obj', obj.name, obj.type, obj.startPoint, obj.endPoint)
+          obj.set({
+            left: obj.left + deltaX,
+            top: obj.top + deltaY,
+            x1: obj.x1 + deltaX,
+            y1: obj.y1 + deltaY,
+            x2: obj.x2 + deltaX,
+            y2: obj.y2 + deltaY,
+            objectCaching: false,
+          })
+          if (obj.type === 'QLine') {
+            obj.set({
+              startPoint: { x: obj.startPoint.x + deltaX, y: obj.startPoint.y + deltaY },
+              endPoint: { x: obj.endPoint.x + deltaX, y: obj.endPoint.y + deltaY },
+            })
+          }
+          obj.setCoords()
+        }
 
         if (obj.type === 'QLine') {
-          // const thisText = canvas.getObjects().find((o) => o.name === 'lengthText' && o.parentId === obj.id)
-          // canvas.remove(thisText)
           obj.addLengthText()
         }
+
+        if (obj.name === 'outerLine') {
+          const { id } = obj
+          const pitchText = canvas.getObjects().filter((obj) => obj.name === 'pitchText' && obj.parentId === id)
+          canvas.remove(...pitchText)
+          addPitchText(obj)
+        }
       })
 
       canvas.off('mouse:move')
       canvas.off('mouse:down')
       canvas.remove(checkPolygon)
-      canvas.requestRenderAll()
+      canvas.renderAll()
     })
   }
 

src/hooks/roofcover/useRoofShapeSetting.js

@@ -416,7 +416,7 @@ export function useRoofShapeSetting(id) {
       canvas.remove(obj)
     })
 
-    const polygon = addPolygonByLines(outerLines, { name: POLYGON_TYPE.WALL, direction })
+    const polygon = addPolygonByLines(outerLines, { name: POLYGON_TYPE.WALL, direction, originX: 'center', originY: 'center' })
     polygon.lines = [...outerLines]
 
     addPitchTextsByOuterLines()

src/hooks/useMode.js

@@ -1369,6 +1369,8 @@ export function useMode() {
         fontSize: fontSize,
         sort: sort,
         selectable: false,
+        originX: 'center',
+        originY: 'center',
       },
       canvas,
     )

src/util/qpolygon-utils.js

@@ -551,6 +551,8 @@ export const drawGabledRoof = (roofId, canvas) => {
           degree: currentRoof.attributes.degree,
           direction: currentRoof.direction,
         },
+        originX: 'center',
+        originY: 'center',
       })
       const currentDegree = currentRoof.attributes.pitch > 0 ? getDegreeByChon(currentRoof.attributes.pitch) : currentRoof.attributes.degree
       //지붕 각도에 따른 실측치 조정