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

Reviewed-on: #124

src/components/floor-plan/CanvasMenu.jsx

@@ -25,7 +25,7 @@ import { useCommonUtils } from '@/hooks/common/useCommonUtils'
 import useMenu from '@/hooks/common/useMenu'
 import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
 import { useAxios } from '@/hooks/useAxios'
-import { canvasSettingState, canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
+import { canvasSettingState, canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState, currentCanvasPlanState } from '@/store/canvasAtom'
 import { sessionStore } from '@/store/commonAtom'
 import { outerLinePointsState } from '@/store/outerLineAtom'
 import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
@@ -52,6 +52,7 @@ import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { usePolygon } from '@/hooks/usePolygon'
 import { useTrestle } from '@/hooks/module/useTrestle'
 export default function CanvasMenu(props) {
+  const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const { selectedMenu, setSelectedMenu } = props
   const pathname = usePathname()
   const router = useRouter()
@@ -234,7 +235,7 @@ export default function CanvasMenu(props) {
           router.push(`/floor-plan?pid=${pid}&objectNo=${objectNo}`)
           setSelectedMenu('module')
         }
-        await reloadCanvasStatus(objectNo, pid)
+        await reloadCanvasStatus(objectNo, currentCanvasPlan?.planNo ?? pid)
         break
       case 'estimate':
         if (!isAllComplete()) {

src/hooks/roofcover/useEavesGableEdit.js

@@ -105,7 +105,10 @@ export function useEavesGableEdit(id) {
       })
       const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
       roofs.forEach((roof) => {
-        roof.innerLines.forEach((line) => line.set({ selectable: true }))
+        roof.innerLines.forEach((line) => {
+          line.set({ selectable: true })
+          line.bringToFront()
+        })
       })
       canvas.renderAll()
     }

src/util/canvas-util.js

@@ -551,6 +551,30 @@ export function isPointOnLine({ x1, y1, x2, y2 }, { x, y }, epsilon = 2) {
 
   return withinXRange && withinYRange
 }
+
+/**
+ * 라인위에 좌표가 존재하는지 확인한다. 위 함수가 끝포인트를 계산 못하는 경우가 발생하여 신규 추가.
+ * @param line - 라인 좌표
+ * @param point - 확인 좌표
+ * @param tolerance - 오차 허용 범위 (기본값 0.1)
+ * @returns {boolean}
+ */
+export function isPointOnLineNew({ x1, y1, x2, y2 }, { x, y }, tolerance = 0.1) {
+  // 1. 거리 계산을 통한 방법
+  const d1 = Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2))
+  const d2 = Math.sqrt(Math.pow(x - x2, 2) + Math.pow(y - y2, 2))
+  const lineLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
+
+  // 점이 선분 위에 있다면, 두 끝점까지의 거리의 합이 선분의 길이와 같아야 함
+  const diff = Math.abs(d1 + d2 - lineLength)
+
+  // 2. 점이 선분의 범위 내에 있는지 확인
+  const isWithinBounds =
+    x >= Math.min(x1, x2) - tolerance && x <= Math.max(x1, x2) + tolerance && y >= Math.min(y1, y2) - tolerance && y <= Math.max(y1, y2) + tolerance
+
+  return diff <= tolerance && isWithinBounds
+}
+
 /**
  * 점과 가까운 line 찾기
  * @param point

src/util/qpolygon-utils.js

@@ -1,6 +1,6 @@
 import { fabric } from 'fabric'
 import { QLine } from '@/components/fabric/QLine'
-import { getAdjacent, getDegreeByChon, isPointOnLine } from '@/util/canvas-util'
+import { getAdjacent, getDegreeByChon, isPointOnLine, isPointOnLineNew } from '@/util/canvas-util'
 
 import { QPolygon } from '@/components/fabric/QPolygon'
 import * as turf from '@turf/turf'
@@ -4630,6 +4630,7 @@ export const drawRidgeRoof = (roofId, canvas, textMode) => {
      * 맞은 편 외벽선까지의 거리를 확인후 currentSize 를 조정한다.
      */
     if (beforePrevLine === afterNextLine || (currentAngle === beforePrevAngle && currentAngle === afterNextAngle)) {
+      console.log('4각 ::::::::: ')
       const xVector = Big(nextLine.x2).minus(Big(nextLine.x1))
       const yVector = Big(nextLine.y2).minus(Big(nextLine.y1))
       const currentMidX = Big(x1).plus(Big(x2)).div(2)
@@ -4952,7 +4953,7 @@ export const drawRidgeRoof = (roofId, canvas, textMode) => {
         const intersection = edgesIntersection(hipEdge, lineEdge)
         if (
           intersection &&
-          !intersection.isIntersectionOutside &&
+          isPointOnLineNew(line, { x: intersection.x, y: intersection.y }) &&
           Math.sign(prevEndPoint.x - x1) === Math.sign(prevEndPoint.x - intersection.x) &&
           Math.sign(prevEndPoint.y - y1) === Math.sign(prevEndPoint.y - intersection.y)
         ) {
@@ -5076,7 +5077,7 @@ export const drawRidgeRoof = (roofId, canvas, textMode) => {
         const intersection = edgesIntersection(hipEdge, lineEdge)
         if (
           intersection &&
-          !intersection.isIntersectionOutside &&
+          isPointOnLineNew(line, { x: intersection.x, y: intersection.y }) &&
           Math.sign(nextEndPoint.x - x2) === Math.sign(nextEndPoint.x - intersection.x) &&
           Math.sign(nextEndPoint.y - y2) === Math.sign(nextEndPoint.y - intersection.y)
         ) {
@@ -7219,6 +7220,9 @@ export const drawRidgeRoof = (roofId, canvas, textMode) => {
   canvas.renderAll()
   roof.innerLines = uniqueInnerLines
 
+  roof.innerLines.forEach((line) => {
+    line.bringToFront()
+  })
   /** 확인용 라인 제거 */
   canvas
     .getObjects()