diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 63473e9a..8f6b90c1 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/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()) { diff --git a/src/hooks/roofcover/useEavesGableEdit.js b/src/hooks/roofcover/useEavesGableEdit.js index b6fcb8cf..5f563c56 100644 --- a/src/hooks/roofcover/useEavesGableEdit.js +++ b/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() } diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js index c7a1fc17..166b7acb 100644 --- a/src/util/canvas-util.js +++ b/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 diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js index c1564699..4e9351a8 100644 --- a/src/util/qpolygon-utils.js +++ b/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()