이니셜라이저 수정

src/common/common.js

@@ -156,6 +156,7 @@ export const SAVE_KEY = [
   'groupYn',
   'groupName',
   'lineDirection',
+  'groupId',
 ]
 
 export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]

src/hooks/common/useCanvasConfigInitialize.js

@@ -59,7 +59,8 @@ export function useCanvasConfigInitialize() {
 
   const canvasLoadInit = () => {
     roofInit() //화면표시 초기화
-    groupInit()
+    groupDimensionInit()
+    reGroupInit() //그룹 객체 재그룹
   }
 
   const gridInit = () => {
@@ -95,10 +96,12 @@ export function useCanvasConfigInitialize() {
     })
   }
 
-  const groupInit = () => {
+  const groupDimensionInit = () => {
-    const groups = canvas.getObjects().filter((obj) => obj.groupYn)
+    const groups = canvas.getObjects().filter((obj) => obj.groupYn && obj.name === 'dimensionGroup')
     const groupIds = []
 
+    console.log('groupDimensionInit', groups)
+
     groups.forEach((group) => {
       if (!groupIds.includes(group.id)) {
         groupIds.push(group.id)
@@ -138,5 +141,50 @@ export function useCanvasConfigInitialize() {
     })
   }
 
+  const reGroupInit = () => {
+    const excludeObjects = ['dimensionGroup', 'dimensionLineText']
+
+    const groups = canvas.getObjects().filter((obj) => obj.groupYn && !obj.name.includes(excludeObjects))
+    const groupIds = []
+
+    groups.forEach((group) => {
+      if (!groupIds.includes(group.groupId)) {
+        groupIds.push(group.groupId)
+      }
+    })
+
+    groupIds.forEach((id) => {
+      //그룹아이디로 캔버스의 객체를 조회함
+      const groupObjects = canvas.getObjects().filter((obj) => obj.groupId === id || obj.id === id)
+      const objectsName = canvas.getObjects().filter((obj) => obj.groupId === id || obj.id === id)[0].groupName
+
+      let objectArray = []
+
+      //그룹객체가 있으면 배열에 추가함
+      if (groupObjects) {
+        groupObjects.forEach((obj) => {
+          objectArray.push(obj)
+        })
+      }
+
+      //그룹객체를 캔버스에서 제거함
+      objectArray.forEach((obj) => {
+        canvas?.remove(obj)
+      })
+
+      //그룹 객체로 다시 만든다 (좌표때문에)
+      const group = new fabric.Group(objectArray, {
+        groupId: id,
+        name: objectsName,
+        selectable: true,
+        lockMovementX: true,
+        lockMovementY: true,
+        originX: 'center',
+        originY: 'center',
+      })
+      canvas.add(group)
+    })
+  }
+
   return { canvasLoadInit, gridInit }
 }

src/hooks/common/useCommonUtils.js

@@ -278,7 +278,7 @@ export function useCommonUtils() {
           groupObjects.push(distanceText)
 
           const group = new fabric.Group(groupObjects, {
-            name: 'dimensionLine',
+            name: 'dimensionGroup',
             selectable: true,
             originX: 'center',
             originY: 'center',
@@ -522,10 +522,10 @@ export function useCommonUtils() {
     if (object) {
       canvas?.remove(object)
 
-      if (object.id) {
+      // if (object.id) {
-        const group = canvas.getObjects().filter((obj) => obj.id === object.id)
+      //   const group = canvas.getObjects().filter((obj) => obj.id === object.id)
-        group.forEach((obj) => canvas?.remove(obj))
+      //   group.forEach((obj) => canvas?.remove(obj))
-      }
+      // }
     }
   }
 
@@ -720,43 +720,72 @@ export function useCommonUtils() {
   }
 
   // 그룹 이동 시 라인 및 각 객체의 좌표를 절대 좌표로 업데이트하는 함수
-  function updateGroupObjectCoords(group, originLeft, originTop) {
+  function updateGroupObjectCoords(targetObj, originLeft, originTop) {
-    const diffrenceLeft = group.left - originLeft
+    const diffrenceLeft = targetObj.left - originLeft
-    const diffrenceTop = group.top - originTop
+    const diffrenceTop = targetObj.top - originTop
 
-    group.getObjects().forEach((obj) => {
+    if (targetObj.type === 'group') {
-      // 그룹 내 객체의 절대 좌표를 계산
+      targetObj.getObjects().forEach((obj) => {
+        // 그룹 내 객체의 절대 좌표를 계산
 
-      const originObjLeft = obj.left
+        const originObjLeft = obj.left
-      const originObjTop = obj.top
+        const originObjTop = obj.top
 
-      if (obj.type === 'line') {
+        if (obj.type === 'line') {
-        // Line 객체의 경우, x1, y1, x2, y2 절대 좌표 계산
+          // Line 객체의 경우, x1, y1, x2, y2 절대 좌표 계산
 
-        obj.set({
+          obj.set({
-          x1: obj.x1 + diffrenceLeft,
+            x1: obj.x1 + diffrenceLeft,
-          y1: obj.y1 + diffrenceTop,
+            y1: obj.y1 + diffrenceTop,
-          x2: obj.x2 + diffrenceLeft,
+            x2: obj.x2 + diffrenceLeft,
-          y2: obj.y2 + diffrenceTop,
+            y2: obj.y2 + diffrenceTop,
-        })
+          })
 
-        obj.set({
+          obj.set({
-          left: originObjLeft,
+            left: originObjLeft,
-          top: originObjTop,
+            top: originObjTop,
-        })
+          })
-      } else {
+        } else {
-        // 다른 객체의 경우 left, top 절대 좌표 설정
+          // 다른 객체의 경우 left, top 절대 좌표 설정
-        obj.set({
+          obj.set({
-          ...obj,
+            ...obj,
-          left: obj.left,
+            left: obj.left,
-          top: obj.top,
+            top: obj.top,
-        })
+          })
+        }
+        obj.setCoords() // 좌표 반영
+      })
+    } else {
+      if (targetObj.type === 'line') {
+        const originObjLeft = obj.left
+        const originObjTop = obj.top
+
+        if (obj.type === 'line') {
+          // Line 객체의 경우, x1, y1, x2, y2 절대 좌표 계산
+
+          obj.set({
+            x1: obj.x1 + diffrenceLeft,
+            y1: obj.y1 + diffrenceTop,
+            x2: obj.x2 + diffrenceLeft,
+            y2: obj.y2 + diffrenceTop,
+          })
+
+          obj.set({
+            left: originObjLeft,
+            top: originObjTop,
+          })
+        } else {
+          targetObj.set({
+            ...targetObj,
+            left: targetObj.left,
+            top: targetObj.top,
+          })
+        }
+        targetObj.setCoords()
       }
-      obj.setCoords() // 좌표 반영
       canvas?.renderAll()
-    })
+    }
   }
-
   return {
     commonFunctions,
     dimensionSettings,

src/hooks/object/useObjectBatch.js

@@ -1,4 +1,5 @@
 'use client'
+import { useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
@@ -9,6 +10,8 @@ import { useSwal } from '@/hooks/useSwal'
 import * as turf from '@turf/turf'
 import { usePolygon } from '@/hooks/usePolygon'
 import { QPolygon } from '@/components/fabric/QPolygon'
+import { v4 as uuidv4 } from 'uuid'
+import { fontSelector } from '@/store/fontAtom'
 
 export function useObjectBatch() {
   const { getMessage } = useMessage()
@@ -16,6 +19,46 @@ export function useObjectBatch() {
   const { addCanvasMouseEventListener, initEvent } = useEvent()
   const { swalFire } = useSwal()
   const { drawDirectionArrow } = usePolygon()
+  const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
+
+  useEffect(() => {
+    if (canvas) {
+      dbClickEvent()
+    }
+
+    return () => {
+      initEvent()
+      if (canvas) canvas.off('mouse:dblclick')
+    }
+  }, [])
+
+  const dbClickEvent = () => {
+    const dormerObject = canvas.getObjects().filter((obj) => obj.name === BATCH_TYPE.TRIANGLE_DORMER || obj.name === BATCH_TYPE.PENTAGON_DORMER)
+
+    if (dormerObject) {
+      canvas.on('mouse:dblclick', (e) => {
+        if (e.target && e.target instanceof fabric.Group) {
+          const pointer = canvas.getPointer(e.e)
+          const objects = e.target._objects
+
+          // 클릭한 위치에 있는 객체 찾기
+          const clickedObject = objects.find((obj) => {
+            if (obj.type === 'QPolygon') {
+              return obj.inPolygon({ x: pointer.x, y: pointer.y })
+            } else {
+              return obj.containsPoint(pointer)
+            }
+          })
+
+          if (clickedObject) {
+            // 클릭된 객체 선택
+            canvas.setActiveObject(clickedObject)
+            canvas.renderAll()
+          }
+        }
+      })
+    }
+  }
 
   const applyOpeningAndShadow = (objectPlacement, buttonAct, surfaceShapePolygons) => {
     const selectedType = objectPlacement.typeRef.current.find((radio) => radio.checked).value
@@ -228,6 +271,7 @@ export function useObjectBatch() {
         : 0
     const directionRef = dormerPlacement.directionRef.current
     let dormer, dormerOffset, isDown, selectedSurface, pentagonPoints, pentagonOffsetPoints
+    const id = uuidv4()
 
     if (height === '' || pitch === '' || height <= 0 || pitch <= 0) {
       swalFire({ text: getMessage('common.canvas.validate.size'), icon: 'error' })
@@ -306,6 +350,7 @@ export function useObjectBatch() {
             originX: 'center',
             originY: 'top',
             angle: angle,
+            objectId: id,
           })
           canvas?.add(dormerOffset)
         }
@@ -318,7 +363,7 @@ export function useObjectBatch() {
 
           //지붕 밖으로 그렸을때
           if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) {
-            swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
+            swalFire({ text: '도머를 배치할 수 없습니다.', icon: 'error' })
             //일단 지워
             deleteTempObjects()
             return
@@ -362,12 +407,14 @@ export function useObjectBatch() {
             lockMovementY: true, // Y 축 이동 잠금
             lockRotation: true, // 회전 잠금
             viewLengthText: true,
-            fontSize: 14,
             direction: direction,
             originX: 'center',
             originY: 'center',
             name: dormerName,
             pitch: pitch,
+            fontSize: lengthTextFont.fontSize.value,
+            fontStyle: lengthTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+            fontWeight: lengthTextFont.fontWeight.value,
           })
 
           const rightTriangle = new QPolygon(splitedTriangle[1], {
@@ -379,16 +426,18 @@ export function useObjectBatch() {
             lockMovementY: true, // Y 축 이동 잠금
             lockRotation: true, // 회전 잠금
             viewLengthText: true,
-            fontSize: 14,
             direction: direction,
             originX: 'center',
             originY: 'center',
             name: dormerName,
             pitch: pitch,
+            fontSize: lengthTextFont.fontSize.value,
+            fontStyle: lengthTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+            fontWeight: lengthTextFont.fontWeight.value,
           })
 
-          canvas?.add(leftTriangle)
+          // canvas?.add(leftTriangle)
-          canvas?.add(rightTriangle)
+          // canvas?.add(rightTriangle)
 
           //패턴
           setSurfaceShapePattern(leftTriangle)
@@ -397,8 +446,16 @@ export function useObjectBatch() {
           drawDirectionArrow(leftTriangle)
           drawDirectionArrow(rightTriangle)
 
+          const objectGroup = new fabric.Group([leftTriangle, rightTriangle], {
+            subTargetCheck: true,
+            name: dormerName,
+            id: id,
+          })
+          canvas?.add(objectGroup)
+
           isDown = false
           initEvent()
+          dbClickEvent()
         }
       })
     } else if (buttonAct === 4) {
@@ -493,7 +550,7 @@ export function useObjectBatch() {
 
           //지붕 밖으로 그렸을때
           if (!turf.booleanWithin(pentagonPolygon, selectedSurfacePolygon)) {
-            swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
+            swalFire({ text: '도머를 배치할 수 없습니다.', icon: 'error' })
             //일단 지워
             deleteTempObjects()
             return
@@ -574,6 +631,7 @@ export function useObjectBatch() {
 
           isDown = false
           initEvent()
+          dbClickEvent()
         }
       })
     }
@@ -648,7 +706,6 @@ export function useObjectBatch() {
         { x: triangle.left + triangle.height, y: triangle.top - triangle.height },
       ]
     }
-
     return [leftPoints, rightPoints]
   }
 

src/hooks/useContextMenu.js

@@ -21,6 +21,7 @@ import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/Line
 import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting'
 
 import { useCommonUtils } from './common/useCommonUtils'
+import { useObjectBatch } from './object/useObjectBatch'
 import { useMessage } from '@/hooks/useMessage'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { contextMenuState } from '@/store/contextMenu'
@@ -43,12 +44,14 @@ export function useContextMenu() {
   const { addPopup } = usePopup()
   const [popupId, setPopupId] = useState(uuidv4())
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
-  const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine } = useCommonUtils()
   const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
   const [cell, setCell] = useState(null)
   const [column, setColumn] = useState(null)
   const { handleZoomClear } = useCanvasEvent()
 
+  const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine } = useCommonUtils()
+  const { deleteObjectBatch } = useObjectBatch()
+
   const currentMenuSetting = () => {
     switch (currentMenu) {
       case MENU.PLAN_DRAWING:
@@ -252,6 +255,8 @@ export function useContextMenu() {
   }, [currentContextMenu])
 
   useEffect(() => {
+    console.log('currentObject', currentObject)
+
     if (currentObject?.name) {
       console.log(currentObject?.name)
       switch (currentObject.name) {
@@ -346,16 +351,19 @@ export function useContextMenu() {
                 id: 'openingRemove',
                 shortcut: ['d', 'D'],
                 name: `${getMessage('contextmenu.remove')}(D)`,
+                fn: () => deleteObject(),
               },
               {
                 id: 'openingMove',
                 shortcut: ['m', 'M'],
                 name: `${getMessage('contextmenu.move')}(M)`,
+                fn: () => moveObject(),
               },
               {
                 id: 'openingCopy',
                 shortcut: ['c', 'C'],
                 name: `${getMessage('contextmenu.copy')}(C)`,
+                fn: () => copyObject(),
               },
               {
                 id: 'openingOffset',
@@ -481,16 +489,19 @@ export function useContextMenu() {
                 id: 'remove',
                 shortcut: ['d', 'D'],
                 name: `${getMessage('contextmenu.remove')}(D)`,
+                fn: () => deleteObject(),
               },
               {
                 id: 'move',
                 shortcut: ['m', 'M'],
                 name: `${getMessage('contextmenu.move')}(M)`,
+                fn: () => moveObject(),
               },
               {
                 id: 'copy',
                 shortcut: ['c', 'C'],
                 name: `${getMessage('contextmenu.copy')}(C)`,
+                fn: () => copyObject(),
               },
             ],
           ])

src/hooks/usePlan.js

@@ -60,23 +60,32 @@ export function usePlan() {
 
     const groups = canvas.getObjects().filter((obj) => obj.type === 'group')
 
+    console.log('groups', groups)
+
     if (groups.length > 0) {
       groups.forEach((group) => {
         canvas?.remove(group)
         canvas?.renderAll()
-        const restore = group._restoreObjectsState()
+        const restore = group._restoreObjectsState() //그룹 좌표 복구
 
+        //그룹시 좌표가 틀어지는 이슈
         restore._objects.forEach((obj) => {
           obj.set({
             ...obj,
             groupYn: true,
             groupName: group.name,
-            lineDirection: group.lineDirection,
+            groupId: group.id,
           })
 
+          //디렉션이 있는 경우에만
+          if (group.lineDirection) {
+            obj.set({
+              lineDirection: group.lineDirection,
+            })
+          }
+
           canvas?.add(obj)
           obj.setCoords()
-          canvas?.requestRenderAll()
           canvas?.renderAll()
         })
       })

src/util/canvas-util.js

@@ -766,9 +766,9 @@ export const triangleToPolygon = (triangle) => {
   const halfWidth = triangle.width / 2
   const height = triangle.height
 
-  points.push({ x: triangle.left + halfWidth, y: triangle.top })
+  points.push({ x: triangle.left, y: triangle.top })
-  points.push({ x: triangle.left, y: triangle.top + height })
+  points.push({ x: triangle.left - halfWidth, y: triangle.top + height })
-  points.push({ x: triangle.left + triangle.width, y: triangle.top + height })
+  points.push({ x: triangle.left + halfWidth, y: triangle.top + height })
 
   return points
 }