From 27f1191c09a888acc512b2200ae7275d9381a6e1 Mon Sep 17 00:00:00 2001 From: Jaeyoung Lee Date: Wed, 11 Sep 2024 09:55:53 +0900 Subject: [PATCH] =?UTF-8?q?=ED=8C=94=EC=9E=91=EC=A7=80=EB=B6=95=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Roof2.jsx | 17 +++++- src/components/fabric/QPolygon.js | 12 +---- src/hooks/useMode.js | 7 +-- src/util/qpolygon-utils.js | 89 +++++++++++++++++++++++++++---- 4 files changed, 100 insertions(+), 25 deletions(-) diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index ecbc083b..5fa121f2 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -37,7 +37,7 @@ import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMen import InitSettingsModal from './InitSettingsModal' import GridSettingsModal from './GridSettingsModal' import { SurfaceShapeModal } from '@/components/ui/SurfaceShape' -import { drawDirectionStringToArrow } from '@/util/qpolygon-utils' +import { changeAllGableRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils' import ThumbnailList from '@/components/ui/ThumbnailLIst' export default function Roof2(props) { @@ -615,6 +615,18 @@ export default function Roof2(props) { const setDirectionStringToArrow = () => { drawDirectionStringToArrow(canvas, globalCampass) } + + const setAllGableRoof = () => { + let offset = Number(prompt('gable roof offset', '50')) + if (!isNaN(offset) && offset > 0) { + const polygon = canvas?.getObjects() + console.log('gable roof offset : ', offset) + console.log('polygon : ', polygon) + changeAllGableRoof(polygon, canvas) + } else { + alert('offset 은 0 보다 커야 함') + } + } return ( <> {canvas && ( @@ -741,6 +753,9 @@ export default function Roof2(props) { )} + diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index b03a593d..0991fd84 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -2,15 +2,7 @@ import { fabric } from 'fabric' import { v4 as uuidv4 } from 'uuid' import { QLine } from '@/components/fabric/QLine' import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util' -import { - calculateAngle, - drawDirectionArrow, - drawHippedRoof, - drawPolygonArrow, - inPolygon, - splitPolygonWithLines, - toGeoJSON, -} from '@/util/qpolygon-utils' +import { calculateAngle, drawDirectionArrow, drawHippedRoof, inPolygon, toGeoJSON } from '@/util/qpolygon-utils' import * as turf from '@turf/turf' export const QPolygon = fabric.util.createClass(fabric.Polygon, { @@ -724,6 +716,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { this.addLengthText() }, divideLine() { - splitPolygonWithLines(this) + // splitPolygonWithLines(this) }, }) diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index b4d1e398..d3d8cee6 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -17,16 +17,16 @@ import { compassState, drewRoofCellsState, fontSizeState, + guideLineState, + horiGuideLinesState, modeState, roofPolygonArrayState, roofPolygonPatternArrayState, roofState, sortedPolygonArray, templateTypeState, - wallState, - guideLineState, - horiGuideLinesState, vertGuideLinesState, + wallState, } from '@/store/canvasAtom' import { QLine } from '@/components/fabric/QLine' import { fabric } from 'fabric' @@ -1255,6 +1255,7 @@ export function useMode() { return { x1: point.x, y1: point.y } }), ) + roof.name = 'roofBase' roof.setWall(polygon) setRoof(roof) setWall(polygon) diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js index 5e00b197..2cae1ce9 100644 --- a/src/util/qpolygon-utils.js +++ b/src/util/qpolygon-utils.js @@ -1207,7 +1207,7 @@ const drawRoofRidge = (polygon, chon) => { const walls = polygon.wall.lines // 외벽의 라인 const roofs = polygon.lines // 지붕의 라인 - const ridgeWall = [] + let ridgeWall = [] walls.forEach((wall, index) => { let currentRoof, prevWall, currentWall, nextWall @@ -1227,7 +1227,7 @@ const drawRoofRidge = (polygon, chon) => { nextWall = walls[index + 1] } - if (getLineDirection(prevWall) !== getLineDirection(nextWall) && currentWall.length < currentRoof.length) { + if (prevWall.direction !== nextWall.direction && currentWall.length < currentRoof.length) { ridgeWall.push({ index: index, wall: currentWall, length: currentWall.length }) } }) @@ -1503,6 +1503,7 @@ const drawRoofRidge = (polygon, chon) => { fontSize: polygon.fontSize, stroke: 'blue', strokeWidth: 1, + name: 'ridgeLine', }, ) polygon.canvas.add(ridge) @@ -1657,6 +1658,7 @@ const drawHips = (polygon) => { fontSize: polygon.fontSize, stroke: 'red', strokeWidth: 1, + name: 'hipLine', }) polygon.canvas.add(hip) polygon.hips.push(hip) @@ -1686,6 +1688,7 @@ const drawHips = (polygon) => { fontSize: polygon.fontSize, stroke: 'red', strokeWidth: 1, + name: 'hipLine', }) polygon.canvas.add(hip) polygon.hips.push(hip) @@ -1715,6 +1718,7 @@ const drawHips = (polygon) => { fontSize: polygon.fontSize, stroke: 'red', strokeWidth: 1, + name: 'hipLine', }) polygon.canvas.add(hip) polygon.hips.push(hip) @@ -1744,6 +1748,7 @@ const drawHips = (polygon) => { fontSize: polygon.fontSize, stroke: 'red', strokeWidth: 1, + name: 'hipLine', }) polygon.canvas.add(hip) polygon.hips.push(hip) @@ -1814,6 +1819,7 @@ const drawHips = (polygon) => { fontSize: polygon.fontSize, stroke: 'red', strokeWidth: 1, + name: 'hipLine', }) polygon.canvas.add(hip) polygon.hips.push(hip) @@ -1839,6 +1845,7 @@ const drawHips = (polygon) => { fontSize: polygon.fontSize, stroke: 'red', strokeWidth: 1, + name: 'hipLine', }) polygon.canvas.add(hip) polygon.hips.push(hip) @@ -1868,6 +1875,7 @@ const drawHips = (polygon) => { fontSize: polygon.fontSize, stroke: 'red', strokeWidth: 1, + name: 'hipLine', }) polygon.canvas.add(hip) polygon.hips.push(hip) @@ -1897,6 +1905,7 @@ const drawHips = (polygon) => { fontSize: polygon.fontSize, stroke: 'red', strokeWidth: 1, + name: 'hipLine', }) polygon.canvas.add(hip) polygon.hips.push(hip) @@ -2204,6 +2213,7 @@ const drawHips = (polygon) => { fontSize: polygon.fontSize, stroke: 'red', strokeWidth: 1, + name: 'hipLine', }) polygon.canvas.add(hip) polygon.hips.push(hip) @@ -2283,12 +2293,14 @@ const drawHips = (polygon) => { fontSize: polygon.fontSize, stroke: 'red', strokeWidth: 1, + name: 'hipLine', }) polygon.canvas.add(hip) polygon.hips.push(hip) polygon.innerLines.push(hip) } }) + console.log('polygon.hips : ', polygon.hips) } const getPointInPolygon = (polygon, point, isInclude = false) => { @@ -2565,20 +2577,28 @@ const connectLinePoint = (polygon) => { fontSize: polygon.fontSize, stroke: 'blue', strokeWidth: 1, + name: 'ridgeLine', }) - polygon.canvas.remove(ridge) - polygon.canvas.remove(ridge2) - polygon.ridges = polygon.ridges.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2)) - polygon.ridges = polygon.ridges.filter((r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2)) - polygon.innerLines = polygon.innerLines.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2)) - polygon.innerLines = polygon.innerLines.filter((r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2)) + console.log('newRidge : ', newRidge) + if (polygon.ridges.filter((r) => newRidge.x1 === r.x1 && newRidge.y1 === r.y1 && newRidge.x2 === r.x2 && newRidge.y2 === r.y2).length === 0) { + polygon.canvas.remove(ridge) + polygon.canvas.remove(ridge2) + polygon.ridges = polygon.ridges.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2)) + polygon.ridges = polygon.ridges.filter((r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2)) + polygon.innerLines = polygon.innerLines.filter((r) => !(ridge.x1 === r.x1 && ridge.y1 === r.y1 && ridge.x2 === r.x2 && ridge.y2 === r.y2)) + polygon.innerLines = polygon.innerLines.filter( + (r) => !(ridge2.x1 === r.x1 && ridge2.y1 === r.y1 && ridge2.x2 === r.x2 && ridge2.y2 === r.y2), + ) - polygon.canvas.add(newRidge) - polygon.ridges.push(newRidge) - polygon.innerLines.push(newRidge) + polygon.canvas.add(newRidge) + polygon.ridges.push(newRidge) + polygon.innerLines.push(newRidge) + } } }) }) + + console.log('polygon : ', polygon) } /* @@ -2654,6 +2674,53 @@ const getLineDirection = (line) => { } } +export const changeAllGableRoof = (polygon, canvas) => { + const walls = polygon.find((p) => p.name === 'wall').lines // 외벽의 라인 + const roof = polygon.filter((p) => p.name === 'roofBase')[0] // 지붕 + const roofLines = roof.lines // 지붕의 라인 + const ridges = roof.ridges // 마루의 라인 + const hips = roof.hips // 추녀마루의 라인 + + ridges.forEach((ridge) => { + console.log('ridge : ', ridge) + console.log(ridge.direction) + let ridgeHip1 = hips.filter((hip) => hip.x2 === ridge.x1 && hip.y2 === ridge.y1) + let ridgeHip2 = hips.filter((hip) => hip.x2 === ridge.x2 && hip.y2 === ridge.y2) + if (ridgeHip1.length > 1) { + console.log('ridgeHip1 : ') + let x1 = ridgeHip1[0].x1, + y1 = ridgeHip1[0].y1, + x2 = ridgeHip1[1].x1, + y2 = ridgeHip1[1].y1 + roofLines.filter((roofLine) => { + if ( + (roofLine.x1 === x1 && roofLine.y1 === y1 && roofLine.x2 === x2 && roofLine.y2 === y2) || + (roofLine.x1 === x2 && roofLine.y1 === y2 && roofLine.x2 === x1 && roofLine.y2 === y1) + ) { + roofLine.stroke = 'blue' + canvas?.renderAll() + } + }) + } + if (ridgeHip2.length > 1) { + console.log('ridgeHip2 : ') + let x1 = ridgeHip2[0].x1, + y1 = ridgeHip2[0].y1, + x2 = ridgeHip2[1].x1, + y2 = ridgeHip2[1].y1 + roofLines.filter((roofLine) => { + if ( + (roofLine.x1 === x1 && roofLine.y1 === y1 && roofLine.x2 === x2 && roofLine.y2 === y2) || + (roofLine.x1 === x2 && roofLine.y1 === y2 && roofLine.x2 === x1 && roofLine.y2 === y1) + ) { + roofLine.stroke = 'blue' + canvas?.renderAll() + } + }) + } + }) +} + function arePointsEqual(point1, point2) { return point1.x === point2.x && point1.y === point2.y }