git clear cache

src/components/fabric/QLine.js

@@ -13,6 +13,9 @@ export const QLine = fabric.util.createClass(fabric.Line, {
   area: 0,
   children: [],
   initialize: function (points, options, length = 0) {
+    // 소수점 전부 제거
+    points = points.map((point) => Number(point.toFixed(1)))
+
     this.callSuper('initialize', points, { ...options, selectable: options.selectable ?? true })
     if (options.id) {
       this.id = options.id
@@ -20,8 +23,6 @@ export const QLine = fabric.util.createClass(fabric.Line, {
       this.id = uuidv4()
     }
     this.line = this
-    // 소수점 전부 제거
-    points = points.map((point) => Math.round(point))
 
     this.idx = options.idx ?? 0
     this.direction = options.direction ?? getDirectionByPoint({ x: this.x1, y: this.y1 }, { x: this.x2, y: this.y2 })

src/hooks/option/useCanvasSetting.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-import { canvasState } from '@/store/canvasAtom'
+import { adsorptionPointModeState, adsorptionRangeState, canvasState } from '@/store/canvasAtom'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useAxios } from '@/hooks/useAxios'
@@ -9,8 +9,6 @@ import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@
 import { setSurfaceShapePattern } from '@/util/canvas-util'
 import { POLYGON_TYPE } from '@/common/common'
 
-import { adsorptionPointModeState, adsorptionRangeState } from '@/store/canvasAtom'
-
 export function useCanvasSetting() {
   const canvas = useRecoilValue(canvasState)
 
@@ -244,7 +242,7 @@ export function useCanvasSetting() {
           optionName = ['1']
           break
         case 'outlineDisplay': //외벽선 표시
-          optionName = ['outerLine', 'wallLine']
+          optionName = ['outerLine', POLYGON_TYPE.WALL]
           break
         case 'gridDisplay': //그리드 표시
           optionName = ['lindGrid', 'dotGrid']

src/hooks/option/useFirstOption.js

@@ -2,6 +2,7 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { useEffect } from 'react'
 import { settingModalFirstOptionsState } from '@/store/settingAtom'
+import { POLYGON_TYPE } from '@/common/common'
 
 export function useFirstOption() {
   const canvas = useRecoilValue(canvasState)
@@ -30,7 +31,7 @@ export function useFirstOption() {
           optionName = ['1']
           break
         case 'outlineDisplay': //외벽선 표시
-          optionName = ['outerLine', 'wallLine']
+          optionName = ['outerLine', POLYGON_TYPE.WALL]
           break
         case 'gridDisplay': //그리드 표시
           optionName = ['lineGrid', 'dotGrid', 'adsorptionPoint', 'tempGrid']

src/hooks/roofcover/useEavesGableEdit.js

@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil'
 import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
-import { LINE_TYPE } from '@/common/common'
+import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
 import { useLine } from '@/hooks/useLine'
 import { useMode } from '@/hooks/useMode'
 import { outerLineFixState } from '@/store/outerLineAtom'
@@ -54,7 +54,7 @@ export function useEavesGableEdit(id) {
   }, [])
 
   useEffect(() => {
-    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
+    const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
     wallLines.forEach((wallLine) => {
       convertPolygonToLines(wallLine)
     })
@@ -169,7 +169,7 @@ export function useEavesGableEdit(id) {
       canvas.remove(roof)
     })
 
-    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
+    const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
     const removeTargets = canvas.getObjects().filter((obj) => obj.name === 'pitchText')
     removeTargets.forEach((obj) => {
       canvas.remove(obj)

src/hooks/roofcover/useMovementSetting.js

@@ -4,6 +4,7 @@ import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useRef, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
+import { POLYGON_TYPE } from '@/common/common'
 
 //동선이동 형 올림 내림
 export function useMovementSetting(id) {
@@ -41,7 +42,7 @@ export function useMovementSetting(id) {
   }, [type])
 
   useEffect(() => {
-    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine') // 기존 wallLine의 visible false
+    const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL) // 기존 wallLine의 visible false
     wallLines.forEach((line) => {
       line.set({ visible: false })
     })
@@ -55,7 +56,7 @@ export function useMovementSetting(id) {
     addCanvasMouseEventListener('mouse:move', mouseMoveEvent)
     return () => {
       initEvent()
-      const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
+      const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
       wallLines.forEach((line) => {
         line.set({ visible: true })
       })

src/hooks/roofcover/usePropertiesSetting.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
-import { LINE_TYPE } from '@/common/common'
+import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
-import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
+import { useRecoilValue, useResetRecoilState } from 'recoil'
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { useMode } from '@/hooks/useMode'
 import { usePolygon } from '@/hooks/usePolygon'
@@ -135,7 +135,7 @@ export function usePropertiesSetting(id) {
       hideLine(line)
     })
 
-    const wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
+    const wall = addPolygonByLines(lines, { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
 
     wall.lines = [...lines]
 

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -7,6 +7,7 @@ import { useSwal } from '@/hooks/useSwal'
 import { usePolygon } from '@/hooks/usePolygon'
 import { roofDisplaySelector } from '@/store/settingAtom'
 import { usePopup } from '@/hooks/usePopup'
+import { POLYGON_TYPE } from '@/common/common'
 
 // 지붕면 할당
 export function useRoofAllocationSetting(id) {
@@ -105,7 +106,7 @@ export function useRoofAllocationSetting(id) {
   // 선택한 지붕재로 할당
   const handleSave = () => {
     const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
-    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
+    const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
     roofBases.forEach((roofBase) => {
       try {
         splitPolygonWithLines(roofBase)

src/hooks/roofcover/useRoofShapePassivitySetting.js

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useLine } from '@/hooks/useLine'
 import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
-import { LINE_TYPE } from '@/common/common'
+import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
 import { useMode } from '@/hooks/useMode'
 import { usePolygon } from '@/hooks/usePolygon'
 import { outerLineFixState } from '@/store/outerLineAtom'
@@ -60,7 +60,7 @@ export function useRoofShapePassivitySetting(id) {
   useEffect(() => {
     if (!isLoading) return
     addCanvasMouseEventListener('mouse:down', mouseDown)
-    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
+    const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
 
     canvas?.remove(...wallLines)
 
@@ -199,10 +199,10 @@ export function useRoofShapePassivitySetting(id) {
     let wall
 
     if (isFix.current) {
-      wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
+      wall = addPolygonByLines(lines, { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
     } else {
       // 그냥 닫을 경우 처리
-      wall = addPolygonByLines([...initLines.current], { name: 'wallLine', fill: 'transparent', stroke: 'black' })
+      wall = addPolygonByLines([...initLines.current], { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
       lines.forEach((line, idx) => {
         line.attributes = initLines.current[idx].attributes
       })

src/hooks/roofcover/useRoofShapeSetting.js

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, currentMenuState, currentObjectState, pitchTextSelector } from '@/store/canvasAtom'
-import { LINE_TYPE } from '@/common/common'
+import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
 import { usePolygon } from '@/hooks/usePolygon'
 import { useMode } from '@/hooks/useMode'
 import { useLine } from '@/hooks/useLine'
@@ -129,7 +129,7 @@ export function useRoofShapeSetting(id) {
 
   useEffect(() => {
     if (shapeNum === 4) {
-      canvas?.remove(canvas.getObjects().find((obj) => obj.name === 'wallLine'))
+      canvas?.remove(canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.WALL))
       const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
       outerLines.forEach((line) => {
         showLine(line)
@@ -376,7 +376,7 @@ export function useRoofShapeSetting(id) {
     // 기존 wallLine, roofBase 제거
     canvas
       .getObjects()
-      .filter((obj) => obj.name === 'wallLine')
+      .filter((obj) => obj.name === POLYGON_TYPE.WALL)
       .forEach((line) => {
         canvas.remove(line)
       })
@@ -389,7 +389,7 @@ export function useRoofShapeSetting(id) {
         canvas.remove(obj)
       })
 
-    const polygon = addPolygonByLines(outerLines, { name: 'wallLine' })
+    const polygon = addPolygonByLines(outerLines, { name: POLYGON_TYPE.WALL })
     polygon.lines = [...outerLines]
 
     addPitchTextsByOuterLines()

src/util/qpolygon-utils.js

@@ -4,6 +4,7 @@ import { calculateIntersection, distanceBetweenPoints, findClosestPoint, getDegr
 import { QPolygon } from '@/components/fabric/QPolygon'
 import * as turf from '@turf/turf'
 import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
+import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 
 const TWO_PI = Math.PI * 2
 
@@ -1259,9 +1260,9 @@ const drawRidge = (roof, canvas) => {
       let xEqualInnerLines = anotherRoof.filter((roof) => roof.x1 === roof.x2 && isInnerLine(prevRoof, currentRoof, nextRoof, roof)), //x가 같은 내부선
         yEqualInnerLines = anotherRoof.filter((roof) => roof.y1 === roof.y2 && isInnerLine(prevRoof, currentRoof, nextRoof, roof)) //y가 같은 내부선
 
-      let ridgeBaseLength = currentRoof.length / 2, // 지붕의 기반 길이
+      let ridgeBaseLength = Math.round((currentRoof.length / 2) * 10) / 10, // 지붕의 기반 길이
         ridgeMaxLength = Math.min(prevRoof.length, nextRoof.length), // 지붕의 최대 길이. 이전, 다음 벽 중 짧은 길이
-        ridgeAcrossLength = Math.max(prevRoof.length, nextRoof.length) - currentRoof.length // 맞은편 벽까지의 길이 - 지붕의 기반 길이
+        ridgeAcrossLength = Math.round((ridgeMaxLength - currentRoof.length) * 10) / 10 // 맞은편 벽까지의 길이 - 지붕의 기반 길이
 
       let acrossRoof = anotherRoof
         .filter((roof) => {
@@ -1339,12 +1340,12 @@ const drawRidge = (roof, canvas) => {
       if (acrossRoof !== undefined) {
         if (currentRoof.x1 === currentRoof.x2) {
           if (ridgeAcrossLength < Math.abs(currentRoof.x1 - acrossRoof.x1)) {
-            ridgeAcrossLength = Math.abs(currentRoof.x1 - acrossRoof.x1) - currentRoof.length
+            ridgeAcrossLength = Math.round((Math.round(Math.abs(currentRoof.x1 - acrossRoof.x1) * 10) / 10 - currentRoof.length) * 10) / 10
           }
         }
         if (currentRoof.y1 === currentRoof.y2) {
           if (ridgeAcrossLength < Math.abs(currentRoof.y1 - acrossRoof.y1)) {
-            ridgeAcrossLength = Math.abs(currentRoof.y1 - acrossRoof.y1) - currentRoof.length
+            ridgeAcrossLength = Math.round((Math.round(Math.abs(currentRoof.y1 - acrossRoof.y1) * 10) / 10 - currentRoof.length) * 10) / 10
           }
         }
       }
@@ -1404,7 +1405,7 @@ const drawRidge = (roof, canvas) => {
               Math.abs(currentRoof.y1 - yEqualInnerLines[0].y1) <= Math.abs(currentRoof.y1 - nextRoof.y1) &&
               Math.abs(currentRoof.x1 - yEqualInnerLines[0].x2) >= Math.abs(currentRoof.x1 - nextRoof.x2)
             ) {
-              ridgeMaxLength = Math.abs(currentRoof.x1 - yEqualInnerLines[0].x2)
+              ridgeMaxLength = Math.round(Math.abs(currentRoof.x1 - yEqualInnerLines[0].x2) * 10) / 10
             }
             ridgeLength = Math.min(ridgeMaxLength, ridgeAcrossLength)
             startXPoint = currentRoof.x1 + (nextRoof.direction === 'right' ? 1 : -1) * Math.abs(currentRoof.y1 - startYPoint)
@@ -1465,7 +1466,7 @@ const drawRidge = (roof, canvas) => {
               Math.abs(currentRoof.x1 - xEqualInnerLines[0].x1) <= Math.abs(currentRoof.x1 - nextRoof.x1) &&
               Math.abs(currentRoof.y1 - xEqualInnerLines[0].y2) >= Math.abs(currentRoof.y1 - nextRoof.y2)
             ) {
-              ridgeMaxLength = Math.abs(currentRoof.y1 - xEqualInnerLines[0].y2)
+              ridgeMaxLength = Math.round(Math.abs(currentRoof.y1 - xEqualInnerLines[0].y2) * 10) / 10
             }
             ridgeLength = Math.min(ridgeMaxLength, ridgeAcrossLength)
             startYPoint = currentRoof.y1 + (nextRoof.direction === 'bottom' ? 1 : -1) * Math.abs(currentRoof.x1 - startXPoint)
@@ -1476,6 +1477,10 @@ const drawRidge = (roof, canvas) => {
 
       // 마루 그리기
       if (startXPoint !== undefined && startYPoint !== undefined && endXPoint !== undefined && endYPoint !== undefined) {
+        startXPoint = Math.round(startXPoint * 10) / 10
+        startYPoint = Math.round(startYPoint * 10) / 10
+        endXPoint = Math.round(endXPoint * 10) / 10
+        endYPoint = Math.round(endYPoint * 10) / 10
         const ridge = new QLine(
           [Math.min(startXPoint, endXPoint), Math.min(startYPoint, endYPoint), Math.max(startXPoint, endXPoint), Math.max(startYPoint, endYPoint)],
           {
@@ -1659,15 +1664,15 @@ const drawHips = (roof, canvas) => {
 
       let ridgePoints = []
       ridgeLines.forEach((ridge) => {
-        const deltaX1 = ridge.x1 - currentRoof.x1
+        const deltaX1 = Math.round((ridge.x1 - currentRoof.x1) * 10) / 10
-        const deltaY1 = ridge.y1 - currentRoof.y1
+        const deltaY1 = Math.round((ridge.y1 - currentRoof.y1) * 10) / 10
-        const deltaX2 = ridge.x2 - currentRoof.x1
+        const deltaX2 = Math.round((ridge.x2 - currentRoof.x1) * 10) / 10
-        const deltaY2 = ridge.y2 - currentRoof.y1
+        const deltaY2 = Math.round((ridge.y2 - currentRoof.y1) * 10) / 10
 
-        if (Math.abs(deltaY1 / deltaX1) === 1) {
+        if (Math.round(Math.abs(deltaY1 / deltaX1) * 10) / 10 === 1) {
           ridgePoints.push({ x: ridge.x1, y: ridge.y1 })
         }
-        if (Math.abs(deltaY2 / deltaX2) === 1) {
+        if (Math.round(Math.abs(deltaY2 / deltaX2) * 10) / 10 === 1) {
           ridgePoints.push({ x: ridge.x2, y: ridge.y2 })
         }
       })
@@ -2207,8 +2212,15 @@ const changeEavesRoof = (currentRoof, canvas) => {
           object.x1 !== undefined &&
           object.x2 !== undefined,
       )
+
     innerLines
-      .filter((line) => line.name !== LINE_TYPE.SUBLINE.RIDGE && line.name !== LINE_TYPE.SUBLINE.HIP && line.name !== LINE_TYPE.SUBLINE.VALLEY)
+      .filter(
+        (line) =>
+          line.name !== LINE_TYPE.SUBLINE.RIDGE &&
+          line.name !== LINE_TYPE.SUBLINE.HIP &&
+          line.name !== LINE_TYPE.SUBLINE.VALLEY &&
+          line.name !== OUTER_LINE_TYPE.OUTER_LINE,
+      )
       .forEach((line) => {
         roof.innerLines = roof.innerLines.filter((l) => l.id !== line.id)
         canvas?.remove(line)
@@ -2375,7 +2387,13 @@ const changeGableRoof = (currentRoof, canvas) => {
     })
 
     innerLines
-      .filter((line) => line.name !== LINE_TYPE.SUBLINE.RIDGE && line.name !== LINE_TYPE.SUBLINE.HIP && line.name !== LINE_TYPE.SUBLINE.VALLEY)
+      .filter(
+        (line) =>
+          line.name !== LINE_TYPE.SUBLINE.RIDGE &&
+          line.name !== LINE_TYPE.SUBLINE.HIP &&
+          line.name !== LINE_TYPE.SUBLINE.VALLEY &&
+          line.name !== OUTER_LINE_TYPE.OUTER_LINE,
+      )
       .forEach((line) => {
         roof.innerLines = roof.innerLines.filter((l) => l.id !== line.id)
         canvas?.remove(line)
@@ -2544,7 +2562,13 @@ const changeHipAndGableRoof = (currentRoof, canvas) => {
         )
 
       innerLines
-        .filter((line) => line.name !== LINE_TYPE.SUBLINE.RIDGE && line.name !== LINE_TYPE.SUBLINE.HIP && line.name !== LINE_TYPE.SUBLINE.VALLEY)
+        .filter(
+          (line) =>
+            line.name !== LINE_TYPE.SUBLINE.RIDGE &&
+            line.name !== LINE_TYPE.SUBLINE.HIP &&
+            line.name !== LINE_TYPE.SUBLINE.VALLEY &&
+            line.name !== OUTER_LINE_TYPE.OUTER_LINE,
+        )
         .forEach((line) => {
           roof.innerLines = roof.innerLines.filter((l) => l.id !== line.id)
           canvas?.remove(line)
@@ -2743,7 +2767,13 @@ const changeJerkInHeadRoof = (currentRoof, canvas) => {
         )
 
       innerLines
-        .filter((line) => line.name !== LINE_TYPE.SUBLINE.RIDGE && line.name !== LINE_TYPE.SUBLINE.HIP && line.name !== LINE_TYPE.SUBLINE.VALLEY)
+        .filter(
+          (line) =>
+            line.name !== LINE_TYPE.SUBLINE.RIDGE &&
+            line.name !== LINE_TYPE.SUBLINE.HIP &&
+            line.name !== LINE_TYPE.SUBLINE.VALLEY &&
+            line.name !== OUTER_LINE_TYPE.OUTER_LINE,
+        )
         .forEach((line) => {
           roof.innerLines = roof.innerLines.filter((l) => l.id !== line.id)
           canvas?.remove(line)
@@ -2992,7 +3022,13 @@ const changeWallRoof = (currentRoof, canvas) => {
     )
 
   innerLines
-    .filter((line) => line.name !== LINE_TYPE.SUBLINE.RIDGE && line.name !== LINE_TYPE.SUBLINE.HIP && line.name !== LINE_TYPE.SUBLINE.VALLEY)
+    .filter(
+      (line) =>
+        line.name !== LINE_TYPE.SUBLINE.RIDGE &&
+        line.name !== LINE_TYPE.SUBLINE.HIP &&
+        line.name !== LINE_TYPE.SUBLINE.VALLEY &&
+        line.name !== OUTER_LINE_TYPE.OUTER_LINE,
+    )
     .forEach((line) => {
       roof.innerLines = roof.innerLines.filter((l) => l.id !== line.id)
       canvas?.remove(line)
@@ -3163,7 +3199,7 @@ export const changeCurrentRoof = (currentRoof, canvas) => {
 
   canvas?.remove(originRoof)
 
-  innerLines.forEach((line) => canvas?.remove(line))
+  innerLines.filter((line) => line.name !== OUTER_LINE_TYPE.OUTER_LINE).forEach((line) => canvas?.remove(line))
 
   const polygon = createPolygon(wall.points)
   const originPolygon = new QPolygon(wall.points, { fontSize: 0 })