Merge pull request 'dev' (#311) from dev into prd-deploy

Reviewed-on: #311

src/components/fabric/QLine.js

@@ -1,6 +1,7 @@
 import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { getDirectionByPoint } from '@/util/canvas-util'
+import { calcLinePlaneSize } from '@/util/qpolygon-utils'
 
 export const QLine = fabric.util.createClass(fabric.Line, {
   type: 'QLine',
@@ -31,14 +32,16 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     this.direction = options.direction ?? getDirectionByPoint({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })
     this.textMode = options.textMode ?? 'plane' // plane:복시도, actual:실측, none:표시안함
     this.textVisible = options.textVisible ?? true
-    if (length !== 0) {
-      this.length = length
-    } else {
-      this.setLength()
-    }
 
     this.startPoint = { x: this.x1, y: this.y1 }
     this.endPoint = { x: this.x2, y: this.y2 }
+    try {
+      this.setLength()
+    } catch (e) {
+      setTimeout(() => {
+        this.setLength()
+      }, 100)
+    }
   },
 
   init: function () {
@@ -66,23 +69,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
   },
 
   setLength() {
-    if (this.attributes?.actualSize !== undefined && this.attributes?.planeSize !== undefined) {
-      if (this.textMode === 'plane') {
-        this.length = this.attributes.planeSize / 10
-      } else if (this.textMode === 'actual') {
-        this.length = this.attributes.actualSize / 10
-      }
-    } else {
-      const scaleX = this.scaleX
-      const scaleY = this.scaleY
-      const x1 = this.left
-      const y1 = this.top
-      const x2 = this.left + this.width * scaleX
-      const y2 = this.top + this.height * scaleY
-      const dx = x2 - x1
-      const dy = y2 - y1
-      this.length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(1))
-    }
+    this.length = calcLinePlaneSize(this) / 10
   },
 
   addLengthText() {

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -20,6 +20,7 @@ import { canvasState } from '@/store/canvasAtom'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { usePlan } from '@/hooks/usePlan'
 import { normalizeDecimal, normalizeDigits } from '@/util/input-utils'
+import { logger } from '@/util/logger'
 
 /**
  * 지붕 레이아웃
@@ -207,6 +208,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
    * 배치면초기설정 저장 버튼 클릭
    */
   const handleSaveBtn = async () => {
+
     const roofInfo = {
       ...currentRoof,
       planNo: basicSetting.planNo,
@@ -224,7 +226,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
     newAddedRoofs[0] = { ...roofInfo }
     setAddedRoofs(newAddedRoofs)
 
-    console.log('save Info', {
+    logger.debug('save Info', {
       ...basicSetting,
       selectedRoofMaterial: {
         ...newAddedRoofs[0],

src/hooks/option/useCanvasSetting.js

@@ -527,7 +527,7 @@ export function useCanvasSetting(executeEffect = true) {
             roofGap:
               params.selectedRoofMaterial.raft === null || params.selectedRoofMaterial.raft === undefined
                 ? params.selectedRoofMaterial.raftBaseCd
-                : params.roofsData.raft,
+                : params.roofsData.roofGap,
             roofLayout: params.roofsData.roofLayout === null || params.roofsData.roofLayout === undefined ? 'P' : params.roofsData.roofLayout,
             roofPitch:
               params.roofsData.roofPitch === null || params.roofsData.roofPitch === undefined || params.roofsData.roofPitch === ''

src/hooks/usePolygon.js

@@ -230,28 +230,28 @@ export const usePolygon = () => {
       case 'south':
         // lines중 가장 아래에 있는 라인을 찾는다.
         const line = lines.reduce((acc, cur) => {
-          return acc.y2 > cur.y2 ? acc : cur
+          return acc.y2 + acc.y1 > cur.y2 + cur.y1 ? acc : cur
         }, lines[0])
         centerPoint = { x: (line.x2 + line.x1) / 2, y: Math.max(line.y1, line.y2) }
         break
       case 'north':
         // lines중 가장 위에 있는 라인을 찾는다.
         const line2 = lines.reduce((acc, cur) => {
-          return acc.y2 < cur.y2 ? acc : cur
+          return acc.y2 + acc.y1 < cur.y2 + cur.y1 ? acc : cur
         }, lines[0])
         centerPoint = { x: (line2.x2 + line2.x1) / 2, y: Math.min(line2.y1, line2.y2) }
         break
       case 'west':
         // lines중 가장 왼쪽에 있는 라인을 찾는다.
         const line3 = lines.reduce((acc, cur) => {
-          return acc.x2 < cur.x2 ? acc : cur
+          return acc.x2 + acc.x1 < cur.x2 + cur.x1 ? acc : cur
         }, lines[0])
         centerPoint = { x: Math.min(line3.x1, line3.x2), y: (line3.y1 + line3.y2) / 2 }
         break
       case 'east':
         // lines중 가장 오른쪽에 있는 라인을 찾는다.
         const line4 = lines.reduce((acc, cur) => {
-          return acc.x2 > cur.x2 ? acc : cur
+          return acc.x2 + acc.x1 > cur.x2 + cur.x1 ? acc : cur
         }, lines[0])
         centerPoint = { x: Math.max(line4.x1, line4.x2), y: (line4.y1 + line4.y2) / 2 }
         break