면형상 크기 조절, 오브젝트 크기조절 기능 추가

src/components/fabric/QPolygon.js

@@ -137,6 +137,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       })
     })
 
+    //QPolygon 좌표 이동시 좌표 재계산
     this.on('polygonMoved', () => {
       //폴리곤일때만 사용
       let matrix = this.calcTransformMatrix()
@@ -148,8 +149,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         .map((p) => {
           return fabric.util.transformPoint(p, matrix)
         })
-      this.set('points', transformedPoints)
+      this.points = transformedPoints
-      this.set('pathOffset', { x: this.left, y: this.top })
+      const { left, top } = this.calcOriginCoords()
+      this.set('pathOffset', { x: left, y: top })
       this.setCoords()
     })
 
@@ -773,4 +775,32 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   divideLine() {
     // splitPolygonWithLines(this)
   },
+  calcOriginCoords() {
+    const points = this.points
+    const minX = Math.min(...points.map((p) => p.x))
+    const maxX = Math.max(...points.map((p) => p.x))
+    const minY = Math.min(...points.map((p) => p.y))
+    const maxY = Math.max(...points.map((p) => p.y))
+
+    let left = 0
+    let top = 0
+
+    if (this.originX === 'center') {
+      left = (minX + maxX) / 2
+    } else if (this.originX === 'left') {
+      left = minX
+    } else if (this.originX === 'right') {
+      left = maxX
+    }
+
+    if (this.originY === 'center') {
+      top = (minY + maxY) / 2
+    } else if (this.originY === 'top') {
+      top = minY
+    } else if (this.originY === 'bottom') {
+      top = maxY
+    }
+
+    return { left, top }
+  },
 })

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

@@ -18,7 +18,7 @@ export default function SizeSetting(props) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const { resizeObjectBatch } = useObjectBatch({})
-  const { reSizePolygon } = useSurfaceShapeBatch()
+  const { resizeSurfaceShapeBatch } = useSurfaceShapeBatch()
   const widthRef = useRef(null)
   const heightRef = useRef(null)
 
@@ -36,10 +36,11 @@ export default function SizeSetting(props) {
       target.name === BATCH_TYPE.OPENING ||
       target.name === BATCH_TYPE.SHADOW ||
       target.name === BATCH_TYPE.TRIANGLE_DORMER ||
-      target.name === BATCH_TYPE.PENTAGON_DORMER ||
+      target.name === BATCH_TYPE.PENTAGON_DORMER
-      target.name === POLYGON_TYPE.ROOF
     ) {
       resizeObjectBatch(settingTarget, target, width, height)
+    } else if (target.name === POLYGON_TYPE.ROOF) {
+      resizeSurfaceShapeBatch(settingTarget, target, width, height)
     }
   }
 

src/hooks/common/useCanvasConfigInitialize.js

@@ -7,6 +7,7 @@ import { useFont } from '@/hooks/common/useFont'
 import { useGrid } from '@/hooks/common/useGrid'
 import { globalFontAtom } from '@/store/fontAtom'
 import { useRoof } from '@/hooks/common/useRoof'
+import { usePolygon } from '@/hooks/usePolygon'
 
 export function useCanvasConfigInitialize() {
   const canvas = useRecoilValue(canvasState)
@@ -20,6 +21,7 @@ export function useCanvasConfigInitialize() {
   const {} = useFont()
   const {} = useGrid()
   const {} = useRoof()
+  const { drawDirectionArrow } = usePolygon()
 
   useEffect(() => {
     if (!canvas) return
@@ -173,6 +175,7 @@ export function useCanvasConfigInitialize() {
 
       //그룹 객체로 다시 만든다 (좌표때문에)
       const group = new fabric.Group(objectArray, {
+        ...objectArray,
         groupId: id,
         name: objectsName,
         selectable: true,

src/hooks/object/useObjectBatch.js

@@ -374,6 +374,9 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
           const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer))
           const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
 
+          console.log('trianglePolygon', trianglePolygon)
+          console.log('selectedSurfacePolygon', selectedSurfacePolygon)
+
           //지붕 밖으로 그렸을때
           if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) {
             swalFire({ text: '도머를 배치할 수 없습니다.', icon: 'error' })
@@ -496,6 +499,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
           })
           canvas?.add(objectGroup)
 
+          objectGroup.getObjects().forEach((obj, index) => {
+            console.log(`최초 pathOffset ${index}`, obj.get('pathOffset'))
+          })
+
           isDown = false
           initEvent()
           dbClickEvent()
@@ -917,20 +924,17 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
       originY: 'center',
       left: changedCoords.x,
       top: changedCoords.y,
+      width: width / 10,
+      height: height / 10,
     })
 
-    if (target.name === 'roof') {
+    //얘는 일단 도머에 적용함
-      //얘는 일단 도머에 적용함
+    if (target.type === 'group') {
-      if (target.type === 'group') {
+      target._objects.forEach((obj) => setSurfaceShapePattern(obj))
-        target._objects.forEach((obj) => setSurfaceShapePattern(obj))
-      } else {
-        setSurfaceShapePattern(target)
-        target.fire('modified')
-      }
     }
+
     // target.setCoords()
     canvas.renderAll()
-
     if (target.type === 'group') reGroupObject(target)
   }
 

src/hooks/surface/useSurfaceShapeBatch.js

@@ -657,7 +657,7 @@ export function useSurfaceShapeBatch() {
   }
 
   function getAllRelatedObjects(id) {
-    const result = []
+    const ult = []
     const map = new Map()
 
     // Create a map of objects by their id
@@ -688,52 +688,8 @@ export function useSurfaceShapeBatch() {
     const roof = canvas.getActiveObject()
 
     if (roof) {
-      let isDragging = false
-
       const childrenObjects = canvas.getObjects().filter((obj) => obj.parentId === roof.id)
 
-      console.log('childrenObjects', childrenObjects)
-
-      // const groupObjects = canvas.getObjects().filter((obj) => obj.parentId === roof.id && obj.type === 'group')
-
-      // const ungroupObjects = [] // 그룹 해제된 객체들
-      // const groupChildObjects = []
-
-      // groupObjects.forEach((obj) => {
-      //   obj._restoreObjectsState()
-      //   obj.getObjects().forEach((o) => {
-      //     o.set({
-      //       ungroupYn: true,
-      //     })
-      //     canvas.add(o)
-      //     ungroupObjects.push(o)
-      //   })
-      //   canvas.remove(obj)
-      // })
-
-      // const childObjects = findAllChildren(roof.id)
-      // groupObjects.forEach((obj) => {
-      //   groupChildObjects.push(...obj.getObjects())
-      // })
-
-      // console.log('ungroupObjects', ungroupObjects)
-      // console.log('childObjects', childObjects)
-      // console.log('groupChildObjects', groupChildObjects)
-
-      // const children = canvas.getObjects().filter((obj) => obj.parentId === roof.id)
-      // let grandChildren = []
-
-      // children.forEach((child) => {
-      //   if (child.type === 'group') {
-      //     child.getObjects().forEach((grandChild) => {
-      //       const groupObjects = canvas.getObjects().filter((obj) => obj.parentId === grandChild.id)
-      //       grandChildren.push(...groupObjects)
-      //     })
-      //   } else {
-      //     grandChildren.push(...canvas.getObjects().filter((obj) => obj.parentId === child.id))
-      //   }
-      // })
-
       const selectionArray = [roof, ...childrenObjects]
 
       const selection = new fabric.ActiveSelection(selectionArray, {
@@ -748,7 +704,6 @@ export function useSurfaceShapeBatch() {
       canvas.setActiveObject(selection)
 
       addCanvasMouseEventListener('mouse:up', (e) => {
-        isDragging = false
         canvas.selection = true
 
         canvas.discardActiveObject() // 모든 선택 해제
@@ -768,7 +723,6 @@ export function useSurfaceShapeBatch() {
 
         canvas.renderAll()
         roof.fire('polygonMoved')
-        if (roof.type === 'group') reGroupObject(obj)
         drawDirectionArrow(roof)
         initEvent()
       })
@@ -805,9 +759,74 @@ export function useSurfaceShapeBatch() {
     canvas?.remove(groupObj)
   }
 
+  const resizeSurfaceShapeBatch = (side, target, width, height) => {
+    const objectWidth = target.width
+    const objectHeight = target.height
+    const changeWidth = width / 10 / objectWidth
+    const changeHeight = height / 10 / objectHeight
+    let sideX = 'left'
+    let sideY = 'top'
+
+    //그룹 중심점 변경
+    if (side === 2) {
+      sideX = 'right'
+      sideY = 'top'
+    } else if (side === 3) {
+      sideX = 'left'
+      sideY = 'bottom'
+    } else if (side === 4) {
+      sideX = 'right'
+      sideY = 'bottom'
+    }
+
+    //변경 전 좌표
+    const newCoords = target.getPointByOrigin(sideX, sideY)
+
+    target.set({
+      originX: sideX,
+      originY: sideY,
+      left: newCoords.x,
+      top: newCoords.y,
+    })
+
+    target.scaleX = changeWidth
+    target.scaleY = changeHeight
+
+    const currentPoints = target.getCurrentPoints()
+
+    target.set({
+      scaleX: 1,
+      scaleY: 1,
+      width: parseInt((width / 10).toFixed(0)),
+      height: parseInt((height / 10).toFixed(0)),
+    })
+    //크기 변경후 좌표를 재 적용
+    const changedCoords = target.getPointByOrigin('center', 'center')
+
+    target.set({
+      originX: 'center',
+      originY: 'center',
+      left: changedCoords.x,
+      top: changedCoords.y,
+    })
+
+    //면형상 리사이즈시에만
+    target.fire('polygonMoved')
+    target.points = currentPoints
+    target.fire('modified')
+
+    setSurfaceShapePattern(target, roofDisplay.column)
+    if (target.direction) {
+      drawDirectionArrow(target)
+    }
+    target.setCoords()
+    canvas.renderAll()
+  }
+
   return {
     applySurfaceShape,
     deleteAllSurfacesAndObjects,
     moveSurfaceShapeBatch,
+    resizeSurfaceShapeBatch,
   }
 }