From a4daba58634705c905a6e5d5ad56794fff8311a5 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 16 Oct 2024 15:18:17 +0900
Subject: [PATCH] =?UTF-8?q?roofPolygon=EC=9D=98=20originX,originY=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/roofcover/useRoofAllocationSetting.js | 3 ++-
 src/hooks/surface/usePlacementShapeDrawing.js   | 6 +++++-
 src/util/qpolygon-utils.js                      | 5 ++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js
index 9a299ca3..6533fe79 100644
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/src/hooks/roofcover/useRoofAllocationSetting.js
@@ -2,7 +2,7 @@ import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
 import { setSurfaceShapePattern } from '@/util/canvas-util'
-import { splitPolygonWithLines } from '@/util/qpolygon-utils'
+import { drawDirectionArrow, splitPolygonWithLines } from '@/util/qpolygon-utils'
 import { useSwal } from '@/hooks/useSwal'
 
 // 지붕면 할당
@@ -112,6 +112,7 @@ export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
 
     roofs.forEach((roof) => {
       setSurfaceShapePattern(roof)
+      drawDirectionArrow(roof)
     })
     setShowRoofAllocationSettingModal(false)
   }
diff --git a/src/hooks/surface/usePlacementShapeDrawing.js b/src/hooks/surface/usePlacementShapeDrawing.js
index b07a8031..4df37618 100644
--- a/src/hooks/surface/usePlacementShapeDrawing.js
+++ b/src/hooks/surface/usePlacementShapeDrawing.js
@@ -14,7 +14,7 @@ import { useTempGrid } from '@/hooks/useTempGrid'
 import { useEffect, useRef } from 'react'
 import { distanceBetweenPoints, setSurfaceShapePattern } from '@/util/canvas-util'
 import { fabric } from 'fabric'
-import { calculateAngle } from '@/util/qpolygon-utils'
+import { calculateAngle, drawDirectionArrow } from '@/util/qpolygon-utils'
 import {
   placementShapeDrawingAngle1State,
   placementShapeDrawingAngle2State,
@@ -212,9 +212,13 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
           strokeWidth: 3,
           selectable: true,
           name: POLYGON_TYPE.ROOF,
+          originX: 'center',
+          originY: 'center',
+          direction: 'south',
         })
 
         setSurfaceShapePattern(roof)
+        drawDirectionArrow(roof)
 
         lines.forEach((line) => {
           removeLine(line)
diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index 063d9d4d..83b6693f 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -1151,8 +1151,11 @@ export const splitPolygonWithLines = (polygon) => {
       fill: 'transparent',
       strokeWidth: 3,
       name: POLYGON_TYPE.ROOF,
+      originX: 'center',
+      originY: 'center',
       selectable: true,
       defense: defense,
+      direction: defense,
     })
 
     polygon.canvas.add(roof)
@@ -3058,7 +3061,7 @@ export const drawDirectionArrow = (polygon) => {
     polygon.canvas.remove(polygon.arrow)
   }
 
-  let centerPoint = { x: polygon.width / 2 + polygon.left, y: polygon.height / 2 + polygon.top }
+  let centerPoint = { x: polygon.left, y: polygon.top }
   let stickeyPoint
 
   const polygonMaxX = Math.max(...polygon.getCurrentPoints().map((point) => point.x))