diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index ddce32a6..b43fd559 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -12,7 +12,7 @@ import { usePlan } from '@/hooks/usePlan' import { useContextMenu } from '@/hooks/useContextMenu' import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize' import { currentMenuState } from '@/store/canvasAtom' -import { totalDisplaySelector } from '@/store/settingAtom' +import { roofMaterialsAtom, totalDisplaySelector } from '@/store/settingAtom' import { MENU, POLYGON_TYPE } from '@/common/common' import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider' import { QcastContext } from '@/app/QcastProvider' @@ -30,8 +30,35 @@ import { useCanvasSetting } from '@/hooks/option/useCanvasSetting' import { useCanvasMenu } from '@/hooks/common/useCanvasMenu' import { useEvent } from '@/hooks/useEvent' import { compasDegAtom } from '@/store/orientationAtom' +import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting' +import { useMasterController } from '@/hooks/common/useMasterController' export default function CanvasFrame() { + const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom) + const { getRoofMaterialList } = useMasterController() + useEffect(async () => { + if (roofMaterials.length !== 0) { + return + } + const { data } = await getRoofMaterialList() + + const roofLists = data.map((item, idx) => ({ + ...item, + id: item.roofMatlCd, + name: item.roofMatlNm, + selected: idx === 0, + index: idx, + nameJp: item.roofMatlNmJp, + length: item.lenBase && parseInt(item.lenBase), + width: item.widBase && parseInt(item.widBase), + raft: item.raftBase && parseInt(item.raftBase), + layout: ['ROOF_ID_SLATE', 'ROOF_ID_SINGLE'].includes(item.roofMatlCd) ? ROOF_MATERIAL_LAYOUT.STAIRS : ROOF_MATERIAL_LAYOUT.PARALLEL, + hajebichi: item.roofPchBase && parseInt(item.roofPchBase), + pitch: item.pitch ? parseInt(item.pitch) : 4, + angle: item.angle ? parseInt(item.angle) : 21.8, + })) + setRoofMaterials(roofLists) + }, []) const canvasRef = useRef(null) const { canvas } = useCanvas('canvas') const { canvasLoadInit, gridInit } = useCanvasConfigInitialize() diff --git a/src/hooks/common/useRoofFn.js b/src/hooks/common/useRoofFn.js index c49128e7..38246273 100644 --- a/src/hooks/common/useRoofFn.js +++ b/src/hooks/common/useRoofFn.js @@ -23,102 +23,65 @@ export function useRoofFn() { //면형상 선택 클릭시 지붕 패턴 입히기 function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false, roofMaterial, isForceChange = false, isDisplay = false) { - if (!polygon) { - return - } - if (polygon.points.length < 3) { - return - } - if (isForceChange && !isDisplay) { - /*if (polygon.roofMaterial) { + try { + if (!polygon) { + return + } + if (polygon.points.length < 3) { + return + } + if (isForceChange && !isDisplay) { + /*if (polygon.roofMaterial) { polygon.roofMaterial = null }*/ - } - if (!roofMaterial) { - roofMaterial = polygon.roofMaterial ?? selectedRoofMaterial - } - - const ratio = window.devicePixelRatio || 1 - const layout = roofMaterial.layout - - let width = (roofMaterial.width || 226) / 10 - let height = (roofMaterial.length || 158) / 10 - const index = roofMaterial.index ?? 0 - let roofStyle = 2 - const inputPatternSize = { width: width, height: height } //임시 사이즈 - const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해 - - if (polygon.direction === 'east' || polygon.direction === 'west') { - //세로형이면 width height를 바꿈 - ;[patternSize.width, patternSize.height] = [inputPatternSize.height, patternSize.width] - } - - // 패턴 소스를 위한 임시 캔버스 생성 - const patternSourceCanvas = document.createElement('canvas') - patternSourceCanvas.width = polygon.width * ratio - patternSourceCanvas.height = polygon.height * ratio - const ctx = patternSourceCanvas.getContext('2d') - let offset = roofStyle === 1 ? 0 : patternSize.width / 2 - - const rows = Math.floor(patternSourceCanvas.height / patternSize.height) - const cols = Math.floor(patternSourceCanvas.width / patternSize.width) - - ctx.strokeStyle = mode === 'allPainted' ? 'black' : ROOF_COLOR[index] - ctx.lineWidth = 2 - ctx.fillStyle = mode === 'allPainted' ? 'rgba(0, 159, 64, 0.7)' : 'white' - - if (trestleMode) { - ctx.strokeStyle = 'black' - ctx.lineWidth = 0.2 - ctx.fillStyle = 'rgba(0, 0, 0, 0.1)' - } else { - ctx.fillStyle = 'rgba(255, 255, 255, 1)' - } - - if (polygon.direction === 'east' || polygon.direction === 'west') { - offset = roofStyle === 1 ? 0 : patternSize.height / 2 - for (let col = 0; col <= cols; col++) { - const x = col * patternSize.width - const yStart = 0 - const yEnd = patternSourceCanvas.height - ctx.beginPath() - ctx.moveTo(x, yStart) // 선 시작점 - ctx.lineTo(x, yEnd) // 선 끝점 - ctx.stroke() - if (mode === 'allPainted' || trestleMode) { - ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart) - } - - for (let row = 0; row <= rows; row++) { - const y = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? row * patternSize.height + (col % 2 === 0 ? 0 : offset) : row * patternSize.height - const xStart = col * patternSize.width - const xEnd = xStart + patternSize.width - ctx.beginPath() - ctx.moveTo(xStart, y) // 선 시작점 - ctx.lineTo(xEnd, y) // 선 끝점 - ctx.stroke() - if (mode === 'allPainted' || trestleMode) { - ctx.fillRect(xStart, y, xEnd - xStart, patternSize.height) - } - } } - } else { - for (let row = 0; row <= rows; row++) { - const y = row * patternSize.height + if (!roofMaterial) { + roofMaterial = polygon.roofMaterial ?? selectedRoofMaterial + } - ctx.beginPath() - ctx.moveTo(0, y) // 선 시작점 - ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점 - ctx.stroke() - if (mode === 'allPainted' || trestleMode) { - ctx.fillRect(0, y, patternSourceCanvas.width, patternSize.height) - } + const ratio = window.devicePixelRatio || 1 + const layout = roofMaterial.layout + let width = (roofMaterial.width || 226) / 10 + let height = (roofMaterial.length || 158) / 10 + const index = roofMaterial.index ?? 0 + let roofStyle = 2 + const inputPatternSize = { width: width, height: height } //임시 사이즈 + const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해 + + if (polygon.direction === 'east' || polygon.direction === 'west') { + //세로형이면 width height를 바꿈 + ;[patternSize.width, patternSize.height] = [inputPatternSize.height, patternSize.width] + } + + // 패턴 소스를 위한 임시 캔버스 생성 + const patternSourceCanvas = document.createElement('canvas') + patternSourceCanvas.width = polygon.width * ratio + patternSourceCanvas.height = polygon.height * ratio + const ctx = patternSourceCanvas.getContext('2d') + let offset = roofStyle === 1 ? 0 : patternSize.width / 2 + + const rows = Math.floor(patternSourceCanvas.height / patternSize.height) + const cols = Math.floor(patternSourceCanvas.width / patternSize.width) + + ctx.strokeStyle = mode === 'allPainted' ? 'black' : ROOF_COLOR[index] + ctx.lineWidth = 2 + ctx.fillStyle = mode === 'allPainted' ? 'rgba(0, 159, 64, 0.7)' : 'white' + + if (trestleMode) { + ctx.strokeStyle = 'black' + ctx.lineWidth = 0.2 + ctx.fillStyle = 'rgba(0, 0, 0, 0.1)' + } else { + ctx.fillStyle = 'rgba(255, 255, 255, 1)' + } + + if (polygon.direction === 'east' || polygon.direction === 'west') { + offset = roofStyle === 1 ? 0 : patternSize.height / 2 for (let col = 0; col <= cols; col++) { - const x = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? col * patternSize.width + (row % 2 === 0 ? 0 : offset) : col * patternSize.width - const yStart = row * patternSize.height - const yEnd = yStart + patternSize.height - + const x = col * patternSize.width + const yStart = 0 + const yEnd = patternSourceCanvas.height ctx.beginPath() ctx.moveTo(x, yStart) // 선 시작점 ctx.lineTo(x, yEnd) // 선 끝점 @@ -126,49 +89,90 @@ export function useRoofFn() { if (mode === 'allPainted' || trestleMode) { ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart) } + + for (let row = 0; row <= rows; row++) { + const y = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? row * patternSize.height + (col % 2 === 0 ? 0 : offset) : row * patternSize.height + const xStart = col * patternSize.width + const xEnd = xStart + patternSize.width + ctx.beginPath() + ctx.moveTo(xStart, y) // 선 시작점 + ctx.lineTo(xEnd, y) // 선 끝점 + ctx.stroke() + if (mode === 'allPainted' || trestleMode) { + ctx.fillRect(xStart, y, xEnd - xStart, patternSize.height) + } + } + } + } else { + for (let row = 0; row <= rows; row++) { + const y = row * patternSize.height + + ctx.beginPath() + ctx.moveTo(0, y) // 선 시작점 + ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점 + ctx.stroke() + if (mode === 'allPainted' || trestleMode) { + ctx.fillRect(0, y, patternSourceCanvas.width, patternSize.height) + } + + for (let col = 0; col <= cols; col++) { + const x = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? col * patternSize.width + (row % 2 === 0 ? 0 : offset) : col * patternSize.width + const yStart = row * patternSize.height + const yEnd = yStart + patternSize.height + + ctx.beginPath() + ctx.moveTo(x, yStart) // 선 시작점 + ctx.lineTo(x, yEnd) // 선 끝점 + ctx.stroke() + if (mode === 'allPainted' || trestleMode) { + ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart) + } + } } } - } - const hachingPatternSourceCanvas = document.createElement('canvas') + const hachingPatternSourceCanvas = document.createElement('canvas') - if (mode === 'lineHatch') { - hachingPatternSourceCanvas.width = polygon.width * ratio - hachingPatternSourceCanvas.height = polygon.height * ratio + if (mode === 'lineHatch') { + hachingPatternSourceCanvas.width = polygon.width * ratio + hachingPatternSourceCanvas.height = polygon.height * ratio - const ctx1 = hachingPatternSourceCanvas.getContext('2d') + const ctx1 = hachingPatternSourceCanvas.getContext('2d') - const gap = 10 + const gap = 10 - ctx1.strokeStyle = 'green' // 선 색상 - ctx1.lineWidth = 0.3 // 선 두께 + ctx1.strokeStyle = 'green' // 선 색상 + ctx1.lineWidth = 0.3 // 선 두께 - for (let x = 0; x < hachingPatternSourceCanvas.width + hachingPatternSourceCanvas.height; x += gap) { - ctx1.beginPath() - ctx1.moveTo(x, 0) // 선 시작점 - ctx1.lineTo(0, x) // 선 끝점 - ctx1.stroke() + for (let x = 0; x < hachingPatternSourceCanvas.width + hachingPatternSourceCanvas.height; x += gap) { + ctx1.beginPath() + ctx1.moveTo(x, 0) // 선 시작점 + ctx1.lineTo(0, x) // 선 끝점 + ctx1.stroke() + } } + + const combinedPatternCanvas = document.createElement('canvas') + combinedPatternCanvas.width = polygon.width * ratio + combinedPatternCanvas.height = polygon.height * ratio + const combinedCtx = combinedPatternCanvas.getContext('2d') + // 첫 번째 패턴을 그린 후 두 번째 패턴을 덧입힘 + combinedCtx.drawImage(patternSourceCanvas, 0, 0) + combinedCtx.drawImage(hachingPatternSourceCanvas, 0, 0) + + // 패턴 생성 + const pattern = new fabric.Pattern({ + source: combinedPatternCanvas, + repeat: 'repeat', + }) + + polygon.set('fill', null) + polygon.set('fill', pattern) + polygon.roofMaterial = roofMaterial + polygon.canvas?.renderAll() + } catch (e) { + console.log(e) } - - const combinedPatternCanvas = document.createElement('canvas') - combinedPatternCanvas.width = polygon.width * ratio - combinedPatternCanvas.height = polygon.height * ratio - const combinedCtx = combinedPatternCanvas.getContext('2d') - // 첫 번째 패턴을 그린 후 두 번째 패턴을 덧입힘 - combinedCtx.drawImage(patternSourceCanvas, 0, 0) - combinedCtx.drawImage(hachingPatternSourceCanvas, 0, 0) - - // 패턴 생성 - const pattern = new fabric.Pattern({ - source: combinedPatternCanvas, - repeat: 'repeat', - }) - - polygon.set('fill', null) - polygon.set('fill', pattern) - polygon.roofMaterial = roofMaterial - polygon.canvas?.renderAll() } function removeRoofMaterial(roof = currentObject) { diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index 76f42075..2688502a 100644 --- a/src/hooks/option/useCanvasSetting.js +++ b/src/hooks/option/useCanvasSetting.js @@ -148,7 +148,7 @@ export function useCanvasSetting(executeEffect = true) { } /** 초 1회만 실행하도록 처리 */ - addRoofMaterials() + //addRoofMaterials() }, []) /** diff --git a/src/hooks/roofcover/useAuxiliaryDrawing.js b/src/hooks/roofcover/useAuxiliaryDrawing.js index 6023bce8..1510825b 100644 --- a/src/hooks/roofcover/useAuxiliaryDrawing.js +++ b/src/hooks/roofcover/useAuxiliaryDrawing.js @@ -849,8 +849,14 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) { if ( lineHistory.current.some( (history) => - JSON.stringify(history.startPoint) === JSON.stringify(line.startPoint) && - JSON.stringify(history.endPoint) === JSON.stringify(line.endPoint), + (Math.abs(history.startPoint.x - line.startPoint.x) < 2 && + Math.abs(history.startPoint.y - line.startPoint.y) < 2 && + Math.abs(history.endPoint.x - line.endPoint.x) < 2 && + Math.abs(history.endPoint.y - line.endPoint.y) < 2) || + (Math.abs(history.startPoint.x - line.endPoint.x) < 2 && + Math.abs(history.startPoint.y - line.endPoint.y) < 2 && + Math.abs(history.endPoint.x - line.startPoint.x) < 2 && + Math.abs(history.endPoint.y - line.startPoint.y) < 2), ) ) { canvas.remove(line) diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js index fb7d2114..00c17c1d 100644 --- a/src/hooks/roofcover/useRoofAllocationSetting.js +++ b/src/hooks/roofcover/useRoofAllocationSetting.js @@ -412,7 +412,7 @@ export function useRoofAllocationSetting(id) { }) /** 외곽선 삭제 */ - const removeTargets = canvas.getObjects().filter((obj) => obj.name === 'outerLinePoint' || obj.name === 'outerLine') + const removeTargets = canvas.getObjects().filter((obj) => obj.name === 'outerLinePoint' || obj.name === 'outerLine' || obj.name === 'pitchText') removeTargets.forEach((obj) => { canvas.remove(obj) }) diff --git a/src/hooks/useLine.js b/src/hooks/useLine.js index b447d4f0..bdbd5d6f 100644 --- a/src/hooks/useLine.js +++ b/src/hooks/useLine.js @@ -38,12 +38,12 @@ export const useLine = () => { line.set({ visible: false, }) - canvas - ?.getObjects() - .find((obj) => obj.parentId === line.id) - .set({ + const obj = canvas?.getObjects().find((obj) => obj.parentId === line.id) + if (obj) { + obj.set({ visible: false, }) + } canvas?.renderAll() } diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js index 9a5f39f8..4d59d292 100644 --- a/src/hooks/usePolygon.js +++ b/src/hooks/usePolygon.js @@ -1,7 +1,14 @@ import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom' import { useRecoilValue } from 'recoil' import { fabric } from 'fabric' -import { findAndRemoveClosestPoint, getDegreeByChon, getDegreeInOrientation, isPointOnLine, toFixedWithoutRounding } from '@/util/canvas-util' +import { + distanceBetweenPoints, + findAndRemoveClosestPoint, + getDegreeByChon, + getDegreeInOrientation, + isPointOnLine, + toFixedWithoutRounding, +} from '@/util/canvas-util' import { QPolygon } from '@/components/fabric/QPolygon' import { isSamePoint, removeDuplicatePolygons } from '@/util/qpolygon-utils' import { flowDisplaySelector } from '@/store/settingAtom' @@ -755,7 +762,7 @@ export const usePolygon = () => { const splitPolygonWithLines = (polygon) => { polygon.set({ visible: false }) - let innerLines = [...polygon.innerLines] + let innerLines = [...polygon.innerLines].filter((line) => line.visible) /*// innerLine이 세팅이 안되어있는경우 찾아서 세팅한다. if (!innerLines || innerLines.length === 0) { @@ -822,11 +829,11 @@ export const usePolygon = () => { line.endPoint = endPoint }) - polygonLines.forEach((line) => { + /*polygonLines.forEach((line) => { line.set({ strokeWidth: 10 }) canvas.add(line) }) - canvas.renderAll() + canvas.renderAll()*/ polygonLines.forEach((line) => { /*const originStroke = line.stroke @@ -838,12 +845,14 @@ export const usePolygon = () => { innerLine.set({ stroke: 'red' }) canvas.renderAll()*/ if (isPointOnLine(line, innerLine.startPoint)) { + canvas.renderAll() if (isSamePoint(line.startPoint, innerLine.startPoint) || isSamePoint(line.endPoint, innerLine.startPoint)) { return } intersections.push(innerLine.startPoint) } if (isPointOnLine(line, innerLine.endPoint)) { + canvas.renderAll() if (isSamePoint(line.startPoint, innerLine.endPoint) || isSamePoint(line.endPoint, innerLine.endPoint)) { return } @@ -858,61 +867,66 @@ export const usePolygon = () => { canvas.renderAll()*/ }) - const divideLines = polygonLines.filter((line) => line.intersections.length > 0) + const divideLines = polygonLines.filter((line) => line.intersections?.length > 0) let newLines = [] - - divideLines.forEach((line) => { + polygonLines = polygonLines.filter((line) => !line.intersections || line.intersections.length === 0) + for (let i = divideLines.length - 1; i >= 0; i--) { + const line = divideLines[i] const { intersections, startPoint, endPoint } = line if (intersections.length === 1) { - // 한 점만 교차하는 경우 const newLinePoint1 = [line.x1, line.y1, intersections[0].x, intersections[0].y] const newLinePoint2 = [intersections[0].x, intersections[0].y, line.x2, line.y2] + const newLine1 = new QLine(newLinePoint1, { stroke: 'blue', strokeWidth: 3, fontSize: polygon.fontSize, attributes: line.attributes, + name: 'newLine', }) const newLine2 = new QLine(newLinePoint2, { stroke: 'blue', strokeWidth: 3, fontSize: polygon.fontSize, attributes: line.attributes, + name: 'newLine', }) + newLine1.attributes = { ...line.attributes, - planeSize: Math.round(Math.sqrt(Math.pow(newLine1.x1 - newLine1.x2, 2) + Math.pow(newLine1.y1 - newLine1.y2, 2))) * 10, - actualSize: Math.round(Math.sqrt(Math.pow(newLine1.x1 - newLine1.x2, 2) + Math.pow(newLine1.y1 - newLine1.y2, 2))) * 10, + planeSize: Math.round(Math.hypot(newLine1.x1 - newLine1.x2, newLine1.y1 - newLine1.y2)) * 10, + actualSize: Math.round(Math.hypot(newLine1.x1 - newLine1.x2, newLine1.y1 - newLine1.y2)) * 10, } newLine2.attributes = { ...line.attributes, - planeSize: Math.round(Math.sqrt(Math.pow(newLine2.x1 - newLine2.x2, 2) + Math.pow(newLine2.y1 - newLine2.y2, 2))) * 10, - actualSize: Math.round(Math.sqrt(Math.pow(newLine2.x1 - newLine2.x2, 2) + Math.pow(newLine2.y1 - newLine2.y2, 2))) * 10, + planeSize: Math.round(Math.hypot(newLine2.x1 - newLine2.x2, newLine2.y1 - newLine2.y2)) * 10, + actualSize: Math.round(Math.hypot(newLine2.x1 - newLine2.x2, newLine2.y1 - newLine2.y2)) * 10, } - newLines.push(newLine1) - newLines.push(newLine2) - } else { - // 두 점 이상 교차하는 경우 - //1. intersections중에 startPoint와 가장 가까운 점을 찾는다. - //2. 가장 가까운 점을 기준으로 line을 나눈다. + newLines.push(newLine1, newLine2) + divideLines.splice(i, 1) // 기존 line 제거 + } else { let currentPoint = startPoint while (intersections.length !== 0) { const minDistancePoint = findAndRemoveClosestPoint(currentPoint, intersections) const newLinePoint = [currentPoint.x, currentPoint.y, minDistancePoint.x, minDistancePoint.y] + const newLine = new QLine(newLinePoint, { stroke: 'blue', strokeWidth: 3, fontSize: polygon.fontSize, attributes: line.attributes, + name: 'newLine', }) + newLine.attributes = { ...line.attributes, - planeSize: Math.round(Math.sqrt(Math.pow(newLine.x1 - newLine.x2, 2) + Math.pow(newLine.y1 - newLine.y2, 2))) * 10, - actualSize: Math.round(Math.sqrt(Math.pow(newLine.x1 - newLine.x2, 2) + Math.pow(newLine.y1 - newLine.y2, 2))) * 10, + planeSize: Math.round(Math.hypot(newLine.x1 - newLine.x2, newLine.y1 - newLine.y2)) * 10, + actualSize: Math.round(Math.hypot(newLine.x1 - newLine.x2, newLine.y1 - newLine.y2)) * 10, } + newLines.push(newLine) currentPoint = minDistancePoint } @@ -923,18 +937,21 @@ export const usePolygon = () => { strokeWidth: 3, fontSize: polygon.fontSize, attributes: line.attributes, + name: 'newLine', }) newLine.attributes = { ...line.attributes, - planeSize: Math.round(Math.sqrt(Math.pow(newLine.x1 - newLine.x2, 2) + Math.pow(newLine.y1 - newLine.y2, 2))) * 10, - actualSize: Math.round(Math.sqrt(Math.pow(newLine.x1 - newLine.x2, 2) + Math.pow(newLine.y1 - newLine.y2, 2))) * 10, + planeSize: Math.round(Math.hypot(newLine.x1 - newLine.x2, newLine.y1 - newLine.y2)) * 10, + actualSize: Math.round(Math.hypot(newLine.x1 - newLine.x2, newLine.y1 - newLine.y2)) * 10, } + newLines.push(newLine) + divideLines.splice(i, 1) // 기존 line 제거 } - }) + } //polygonLines에서 divideLines를 제거하고 newLines를 추가한다. - polygonLines = polygonLines.filter((line) => line.intersections?.length === 0) + newLines = newLines.filter((line) => !(Math.abs(line.startPoint.x - line.endPoint.x) < 1 && Math.abs(line.startPoint.y - line.endPoint.y) < 1)) polygonLines = [...polygonLines, ...newLines] @@ -1004,6 +1021,13 @@ export const usePolygon = () => { } }) + /*innerLines.forEach((line) => { + const startPoint = line.startPoint + const endPoint = line.endPoint + /!*canvas.add(new fabric.Circle({ left: startPoint.x, top: startPoint.y + 10, radius: 5, fill: 'red' })) + canvas.add(new fabric.Circle({ left: endPoint.x, top: endPoint.y - 10, radius: 5, fill: 'blue' }))*!/ + })*/ + /** * 왼쪽 상단을 startPoint로 전부 변경 */ @@ -1030,23 +1054,18 @@ export const usePolygon = () => { line.endPoint = endPoint }) - // polygonLines에서 시작점 혹은 끝점이 innerLines와 연결된 line만 가져온다. - let startLines = polygonLines.filter((line) => { - const startPoint = line.startPoint - const endPoint = line.endPoint - - return innerLines.some((innerLine) => { - return ( - isSamePoint(innerLine.startPoint, startPoint) || - isSamePoint(innerLine.endPoint, startPoint) || - isSamePoint(innerLine.startPoint, endPoint) || - isSamePoint(innerLine.endPoint, endPoint) - ) - }) + //allLines에서 중복을 제거한다. + allLines = allLines.filter((line, index, self) => { + return ( + index === + self.findIndex((l) => { + return isSamePoint(l.startPoint, line.startPoint) && isSamePoint(l.endPoint, line.endPoint) + }) + ) }) // 나눠서 중복 제거된 roof return - const newRoofs = getSplitRoofsPoints(startLines, allLines, innerLines, uniquePoints) + const newRoofs = getSplitRoofsPoints(allLines) newRoofs.forEach((roofPoint, index) => { let defense, pitch @@ -1105,7 +1124,7 @@ export const usePolygon = () => { defense = 'north' break } - pitch = polygon.lines[index].attributes?.pitch ?? 0 + pitch = polygon.lines[index]?.attributes?.pitch ?? 0 const roof = new QPolygon(roofPoint, { fontSize: polygon.fontSize, @@ -1147,32 +1166,48 @@ export const usePolygon = () => { }) } - const getSplitRoofsPoints = (startLines, allLines, innerLines, uniquePoints) => { + const getSplitRoofsPoints = (allLines) => { + // ==== Utility functions ==== + + function isSamePoint(p1, p2, epsilon = 1) { + return Math.abs(p1.x - p2.x) <= 2 && Math.abs(p1.y - p2.y) <= 2 + } + + function normalizePoint(p, epsilon = 1) { + return { + x: Math.round(p.x / epsilon) * epsilon, + y: Math.round(p.y / epsilon) * epsilon, + } + } + + function pointToKey(p, epsilon = 1) { + const norm = normalizePoint(p, epsilon) + return `${norm.x},${norm.y}` + } + // 거리 계산 function calcDistance(p1, p2) { return Math.hypot(p2.x - p1.x, p2.y - p1.y) } - // 바로 연결 체크 - function isDirectlyConnected(start, end, graph) { - const startKey = `${start.x},${start.y}` - if (!graph[startKey]) return false - return graph[startKey].some((neighbor) => neighbor.point.x === end.x && neighbor.point.y === end.y) - } + // ==== Direct edge check ==== - // Dijkstra 최단 경로 - function findShortestPath(start, end, graph) { - const startKey = `${start.x},${start.y}` - const endKey = `${end.x},${end.y}` + function isDirectlyConnected(start, end, graph, epsilon = 1) { + const startKey = pointToKey(start, epsilon) + return (graph[startKey] || []).some((neighbor) => isSamePoint(neighbor.point, end, epsilon)) + } + // ==== Dijkstra pathfinding ==== + + function findShortestPath(start, end, graph, epsilon = 1) { + const startKey = pointToKey(start, epsilon) + const endKey = pointToKey(end, epsilon) const distances = {} const previous = {} const visited = new Set() const queue = [{ key: startKey, dist: 0 }] - for (const key in graph) { - distances[key] = Infinity - } + for (const key in graph) distances[key] = Infinity distances[startKey] = 0 while (queue.length > 0) { @@ -1181,8 +1216,8 @@ export const usePolygon = () => { if (visited.has(key)) continue visited.add(key) - for (const neighbor of graph[key]) { - const neighborKey = `${neighbor.point.x},${neighbor.point.y}` + for (const neighbor of graph[key] || []) { + const neighborKey = pointToKey(neighbor.point, epsilon) const alt = distances[key] + neighbor.distance if (alt < distances[neighborKey]) { distances[neighborKey] = alt @@ -1192,40 +1227,42 @@ export const usePolygon = () => { } } - // 경로 복구 const path = [] let currentKey = endKey - if (!previous[currentKey]) { - return null // 경로 없음 - } + if (!previous[currentKey]) return null while (currentKey !== startKey) { const [x, y] = currentKey.split(',').map(Number) path.unshift({ x, y }) currentKey = previous[currentKey] } - path.unshift(start) + + const [sx, sy] = startKey.split(',').map(Number) + path.unshift({ x: sx, y: sy }) return path } // 최종 함수 - function getPath(start, end, graph) { - if (isDirectlyConnected(start, end, graph)) { - return null - } else { - const path = findShortestPath(start, end, graph) - if (!path || path.length < 3) { - return null - } - return path + function getPath(start, end, graph, epsilon = 1) { + if (isDirectlyConnected(start, end, graph, epsilon)) { + console.log('직선 연결 있음. 무시.') + return [] } + + const path = findShortestPath(start, end, graph, epsilon) + if (!path || path.length < 3) { + console.log('경로 존재하나 3개 미만 좌표. 무시.') + return [] + } + + return path } const roofs = [] - startLines.forEach((line) => { + allLines.forEach((line) => { // 그래프 생성 const graph = {} const edges = allLines @@ -1235,8 +1272,8 @@ export const usePolygon = () => { }) for (const [p1, p2] of edges) { - const key1 = `${p1.x},${p1.y}` - const key2 = `${p2.x},${p2.y}` + const key1 = pointToKey(p1) + const key2 = pointToKey(p2) const distance = calcDistance(p1, p2) if (!graph[key1]) graph[key1] = [] diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js index 1146afa7..0f0b69dc 100644 --- a/src/util/canvas-util.js +++ b/src/util/canvas-util.js @@ -515,24 +515,29 @@ export const sortedPointLessEightPoint = (points) => { * @param line * @param point * @returns {boolean} + * @param epsilon */ // 직선의 방정식. // 방정식은 ax + by + c = 0이며, 점의 좌표를 대입하여 계산된 값은 직선과 점 사이의 관계를 나타낸다. -export function isPointOnLine({ x1, y1, x2, y2 }, { x, y }) { - /*const a = line.y2 - line.y1 +export function isPointOnLine({ x1, y1, x2, y2 }, { x, y }, epsilon = 2) { + /*const a = y2 - y1 + const b = x1 - x2 + const c = x2 * y1 - x1 * y2 + return Math.abs(a * x + b * y + c) < 1000*/ + /*/!*const a = line.y2 - line.y1 const b = line.x1 - line.x2 const c = line.x2 * line.y1 - line.x1 * line.y2 const result = Math.abs(a * point.x + b * point.y + c) / 100 // 점이 선 위에 있는지 확인 - return result <= 10*/ + return result <= 10*!*/ // 직선 방정식 만족 여부 확인 const crossProduct = (y - y1) * (x2 - x1) - (x - x1) * (y2 - y1) - if (Math.abs(crossProduct) > 5) return false // 작은 오차 허용 + if (Math.abs(crossProduct) > 1000) return false // 작은 오차 허용 // 점이 선분의 범위 내에 있는지 확인 - const withinXRange = Math.min(x1, x2) <= x && x <= Math.max(x1, x2) - const withinYRange = Math.min(y1, y2) <= y && y <= Math.max(y1, y2) + const withinXRange = Math.abs(Math.min(x1, x2) - x) <= 2 || 2 <= Math.abs(Math.max(x1, x2) - x) + const withinYRange = Math.abs(Math.min(y1, y2) - y) <= 2 || 2 <= Math.abs(Math.max(y1, y2) - y) return withinXRange && withinYRange } diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js index 677c9a5b..475d2ae6 100644 --- a/src/util/qpolygon-utils.js +++ b/src/util/qpolygon-utils.js @@ -294,8 +294,9 @@ function arePolygonsEqual(polygon1, polygon2) { } export function removeDuplicatePolygons(polygons) { - const uniquePolygons = [] + let uniquePolygons = [] + // x가 전부 같거나, y가 전부 같은 경우 제거 polygons.forEach((polygon) => { const isDuplicate = uniquePolygons.some((uniquePolygon) => arePolygonsEqual(polygon, uniquePolygon)) if (!isDuplicate) { @@ -303,9 +304,40 @@ export function removeDuplicatePolygons(polygons) { } }) + uniquePolygons = uniquePolygons.filter((polygon) => { + return isValidPoints(polygon) + }) + return uniquePolygons } +// 현재 point의 x와 이전 포인트의 x와 같을경우, 다음 포인트의 x와 달라야 함. +// 현재 point의 y와 이전 포인트의 y와 같을경우, 다음 포인트의 y와 달라야 함. +const isValidPoints = (points) => { + for (let i = 1; i < points.length; i++) { + let prev = points[i - 1] + let curr = points[i] + let next = points[i + 1] + + if (i === points.length - 1) { + prev = points[i - 1] + curr = points[i] + next = points[0] + } + + // 현재와 이전의 x가 같다면 다음의 x는 달라야 함 + if (Math.abs(curr.x - prev.x) < 1 && Math.abs(curr.x - next.x) < 1) { + return false + } + + // 현재와 이전의 y가 같다면 다음의 y는 달라야 함 + if (Math.abs(curr.y - prev.y) < 1 && Math.abs(curr.y - next.y) < 1) { + return false + } + } + return true +} + export const isSamePoint = (a, b) => { if (!a || !b) { return false