오각형 도머 크기변경, 이동 기능 추가

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

@@ -15,7 +15,7 @@ export default function SizeSetting(props) {
   const { id, pos = contextPopupPosition, target } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
-  const { reSizeObject } = useObjectBatch()
+  const { reSizeObjectBatch } = useObjectBatch({})
 
   const widthRef = useRef(null)
   const heightRef = useRef(null)
@@ -30,7 +30,7 @@ export default function SizeSetting(props) {
     const width = widthRef.current.value
     const height = heightRef.current.value
 
-    reSizeObject(settingTarget, target, width, height)
+    reSizeObjectBatch(settingTarget, target, width, height)
   }
 
   return (

src/components/floor-plan/modal/object/type/PentagonDormer.jsx

@@ -38,7 +38,7 @@ const PentagonDormer = forwardRef((props, refs) => {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} />
+                      <input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -60,7 +60,7 @@ const PentagonDormer = forwardRef((props, refs) => {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="input-grid mr5" style={{ width: '60px' }}>
-                      <input type="text" className="input-origin block" placeholder={0} ref={refs.offsetWidthRef} />
+                      <input type="text" className="input-origin block" placeholder={0} ref={refs.offsetWidthRef} defaultValue={300} />
                     </div>
                     <span className="thin">mm</span>
                   </div>

src/hooks/common/useCommonUtils.js

@@ -20,7 +20,6 @@ export function useCommonUtils() {
   const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText'))
   const commonTextFont = useRecoilValue(fontSelector('commonText'))
   const [commonUtils, setCommonUtilsState] = useRecoilState(commonUtilsState)
-
   const { addPopup } = usePopup()
 
   useEffect(() => {
@@ -749,12 +748,14 @@ export function useCommonUtils() {
             left: originObjLeft,
             top: originObjTop,
           })
+          obj.fire('modified')
         } else {
           // 다른 객체의 경우 left, top 절대 좌표 설정
           obj.set({
             left: obj.left,
             top: obj.top,
           })
+          obj.fire('modified')
         }
         obj.setCoords() // 좌표 반영
       })
@@ -777,12 +778,14 @@ export function useCommonUtils() {
             left: originObjLeft,
             top: originObjTop,
           })
+          obj.fire('modified')
         } else {
           targetObj.set({
             ...targetObj,
             left: targetObj.left,
             top: targetObj.top,
           })
+          obj.fire('modified')
         }
         targetObj.setCoords()
       }

src/hooks/object/useObjectBatch.js

@@ -43,8 +43,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
 
           // 클릭한 위치에 있는 객체 찾기
           const clickedObject = objects.find((obj) => {
-            console.log(obj)
-
             if (obj.type === 'QPolygon') {
               const polygon = pointsToTurfPolygon(obj.getCurrentPoints())
               const turfPointer = turf.point([pointer.x, pointer.y])
@@ -451,6 +449,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
           setSurfaceShapePattern(leftTriangle)
           setSurfaceShapePattern(rightTriangle)
           //방향
+
           drawDirectionArrow(leftTriangle)
           drawDirectionArrow(rightTriangle)
 
@@ -654,8 +653,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             pitch: pitch,
           })
 
-          canvas?.add(leftPentagon)
+          // canvas?.add(leftPentagon)
-          canvas?.add(rightPentagon)
+          // canvas?.add(rightPentagon)
 
           //패턴
           setSurfaceShapePattern(leftPentagon)
@@ -664,6 +663,39 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
           drawDirectionArrow(leftPentagon)
           drawDirectionArrow(rightPentagon)
 
+          let offsetPolygon
+
+          if (offsetRef > 0) {
+            canvas?.remove(dormer)
+
+            offsetPolygon = new QPolygon(dormer.points, {
+              selectable: true,
+              lockMovementX: true, // X 축 이동 잠금
+              lockMovementY: true, // Y 축 이동 잠금
+              lockRotation: true, // 회전 잠금
+              viewLengthText: true,
+              name: 'pentagonDormerOffset',
+              id: id,
+              fill: 'rgba(255, 255, 255, 0.6)',
+              stroke: 'black',
+              strokeWidth: 1,
+              originX: 'center',
+              originY: 'center',
+              fontSize: lengthTextFont.fontSize.value,
+              fontStyle: lengthTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+              fontWeight: lengthTextFont.fontWeight.value,
+            })
+          }
+
+          const groupPolygon = offsetPolygon ? [leftPentagon, rightPentagon, offsetPolygon] : [leftPentagon, rightPentagon]
+
+          const objectGroup = new fabric.Group(groupPolygon, {
+            subTargetCheck: true,
+            name: dormerName,
+            id: id,
+          })
+          canvas?.add(objectGroup)
+
           isDown = false
           initEvent()
 
@@ -826,7 +858,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
     return [leftPoints, rightPoints]
   }
 
-  const reSizeObject = (side, target, width, height) => {
+  const reSizeObjectBatch = (side, target, width, height) => {
     console.log('reSizeTarget', target)
 
     target.getObjects().forEach((obj) => {
@@ -889,7 +921,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
     // target.setCoords()
     canvas.renderAll()
 
-    // reGroupObject(target)
+    reGroupObject(target)
   }
 
   const reGroupObject = (groupObj) => {
@@ -905,6 +937,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
       })
       reGroupObjects.push(newObj)
       canvas.remove(obj)
+
+      if (obj.direction) {
+        drawDirectionArrow(obj)
+      }
     })
 
     const reGroup = new fabric.Group(reGroupObjects, {
@@ -917,11 +953,33 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
     canvas?.remove(groupObj)
   }
 
+  const moveObjectBatch = () => {
+    const obj = canvas.getActiveObject()
+
+    if (obj) {
+      obj.set({
+        lockMovementX: false,
+        lockMovementY: false,
+      })
+
+      addCanvasMouseEventListener('mouse:up', (e) => {
+        obj.set({
+          lockMovementX: true,
+          lockMovementY: true,
+        })
+        initEvent()
+        obj.setCoords()
+        reGroupObject(obj)
+      })
+    }
+  }
+
   return {
     applyOpeningAndShadow,
     applyDormers,
     splitDormerTriangle,
     splitDormerPentagon,
-    reSizeObject,
+    reSizeObjectBatch,
+    moveObjectBatch,
   }
 }

src/hooks/useContextMenu.js

@@ -21,7 +21,6 @@ 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 { contextMenuListState, contextMenuState } from '@/store/contextMenu'
@@ -33,6 +32,7 @@ import ColumnInsert from '@/components/floor-plan/modal/module/column/ColumnInse
 import RowRemove from '@/components/floor-plan/modal/module/row/RowRemove'
 import RowInsert from '@/components/floor-plan/modal/module/row/RowInsert'
 import CircuitNumberEdit from '@/components/floor-plan/modal/module/CircuitNumberEdit'
+import { useObjectBatch } from '@/hooks/object/useObjectBatch'
 
 export function useContextMenu() {
   const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
@@ -49,6 +49,7 @@ export function useContextMenu() {
   const [cell, setCell] = useState(null)
   const [column, setColumn] = useState(null)
   const { handleZoomClear } = useCanvasEvent()
+  const { moveObjectBatch } = useObjectBatch({})
 
   const currentMenuSetting = () => {
     switch (currentMenu) {
@@ -279,7 +280,7 @@ export function useContextMenu() {
                 id: 'dormerMove',
                 shortcut: ['m', 'M'],
                 name: `${getMessage('contextmenu.move')}(M)`,
-                fn: () => moveObject(),
+                fn: () => moveObjectBatch(),
               },
               {
                 id: 'dormerCopy',

src/hooks/usePolygon.js

@@ -113,6 +113,12 @@ export const usePolygon = () => {
       return
     }
 
+    //동일 아이디가 있으면 일단 지우고 다시 그린다
+    const existArrow = polygon.canvas.getObjects().filter((obj) => obj.name === 'arrow' && obj.parentId === polygon.id)
+    if (existArrow.length > 0) {
+      polygon.canvas.remove(...existArrow)
+    }
+
     polygon.canvas
       .getObjects()
       .filter((obj) => obj.name === 'flowText' && obj.parent === polygon.arrow)