오브젝트 배치 피치 추가

src/components/floor-plan/CanvasMenu.jsx

@@ -307,15 +307,21 @@ export default function CanvasMenu(props) {
           // const angle = calculateAngle({ x: p1CenterX, y: p1CenterY }, { x: p2CenterX, y: p2CenterY })
 
           // 첫 번째 포인트에 화살표 추가
-          const arrow1 = createArrow(p1CenterX + 7.5, p1CenterY + 1, lineDirection === 'horizontal' ? -90 : 0) // 반대 방향 화살표
-          const arrow2 = createArrow(p2CenterX - 6.5, p2CenterY + 1, lineDirection === 'horizontal' ? 90 : 180) // 정방향 화살표
+
+          const paddingX = lineDirection === 'horizontal' ? p1CenterX + 7.5 : p1CenterX + 1
+          const paddingX2 = lineDirection === 'horizontal' ? p2CenterX - 6.5 : p2CenterX + 1
+          const paddingY = lineDirection === 'horizontal' ? p1CenterY + 1 : p1CenterY + 8
+          const paddingY2 = lineDirection === 'horizontal' ? p2CenterY + 1 : p2CenterY - 8
+
+          const arrow1 = createArrow(paddingX, paddingY, lineDirection === 'horizontal' ? -90 : 0) // 반대 방향 화살표
+          const arrow2 = createArrow(paddingX2, paddingY2, lineDirection === 'horizontal' ? 90 : 180) // 정방향 화살표
           canvas.add(arrow1)
           canvas.add(arrow2)
 
           // 두 포인트 간의 거리 계산
 
           // 거리 텍스트가 이미 있으면 업데이트하고, 없으면 새로 생성
-          distanceText = new fabric.Text(`${distance}`, {
+          distanceText = new fabric.Text(`${distance * 10}`, {
             left: (p1CenterX + p2CenterX) / 2 + (lineDirection === 'horizontal' ? 0 : -15),
             top: (p1CenterY + p2CenterY) / 2 + (lineDirection === 'horizontal' ? +15 : 0),
             fill: 'black',
@@ -325,6 +331,7 @@ export default function CanvasMenu(props) {
             originX: 'center',
             originY: 'center',
             angle: lineDirection === 'horizontal' ? 0 : 270,
+            name: 'lengthText',
             // lockMovementX: false,
             // lockMovementY: false,
           })

src/hooks/object/useObjectBatch.js

@@ -4,17 +4,17 @@ import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { BATCH_TYPE, INPUT_TYPE } from '@/common/common'
 import { useEvent } from '@/hooks/useEvent'
-import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon } from '@/util/canvas-util'
+import { pointsToTurfPolygon, polygonToTurfPolygon, rectToPolygon, triangleToPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
 import { useSwal } from '@/hooks/useSwal'
 import * as turf from '@turf/turf'
 import { usePolygon } from '@/hooks/usePolygon'
+import { QPolygon } from '@/components/fabric/QPolygon'
 
 export function useObjectBatch() {
   const { getMessage } = useMessage()
   const canvas = useRecoilValue(canvasState)
   const { addCanvasMouseEventListener, initEvent } = useEvent()
   const { swalFire } = useSwal()
-
   const { drawDirectionArrow } = usePolygon()
 
   const applyOpeningAndShadow = (objectPlacement, buttonAct, surfaceShapePolygons) => {
@@ -367,6 +367,7 @@ export function useObjectBatch() {
             originX: 'center',
             originY: 'center',
             name: dormerName,
+            pitch: pitch,
           })
 
           const rightTriangle = new QPolygon(splitedTriangle[1], {
@@ -383,6 +384,7 @@ export function useObjectBatch() {
             originX: 'center',
             originY: 'center',
             name: dormerName,
+            pitch: pitch,
           })
 
           canvas?.add(leftTriangle)
@@ -540,6 +542,7 @@ export function useObjectBatch() {
             originX: 'center',
             originY: 'center',
             name: dormerName,
+            pitch: pitch,
           })
 
           const rightPentagon = new QPolygon(splitedPentagon[1], {
@@ -556,6 +559,7 @@ export function useObjectBatch() {
             originX: 'center',
             originY: 'center',
             name: dormerName,
+            pitch: pitch,
           })
 
           canvas?.add(leftPentagon)

src/hooks/surface/useSurfaceShapeBatch.js

@@ -11,9 +11,11 @@ import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
 import { usePopup } from '@/hooks/usePopup'
 import { roofDisplaySelector } from '@/store/settingAtom'
+import { usePolygon } from '@/hooks/usePolygon'
 
 export function useSurfaceShapeBatch() {
   const { getMessage } = useMessage()
+  const { drawDirectionArrow } = usePolygon()
 
   const canvas = useRecoilValue(canvasState)
   const globalPitch = useRecoilValue(globalPitchState)
@@ -125,6 +127,8 @@ export function useSurfaceShapeBatch() {
         initEvent()
         setSurfaceShapePattern(obj, roofDisplay.column)
         closePopup(id)
+        drawDirectionArrow(obj)
+        setShowPlacementSurfaceSettingModal(true)
       })
     }
   }