From 592275c0de8b5d8790a4d1a88ad093f50b32071f Mon Sep 17 00:00:00 2001 From: yjnoh Date: Tue, 25 Mar 2025 14:49:07 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B0=B0=EC=B9=98=EB=A9=B4=20=EB=8F=84?= =?UTF-8?q?=ED=98=95=20=EC=9E=AC=EB=B0=B0=EC=B9=98=20=EB=B0=8F=20=EC=B2=98?= =?UTF-8?q?=EB=A7=88,=EC=9A=A9=EB=A7=88=EB=A3=A8,=EC=BC=80=EB=9D=BC?= =?UTF-8?q?=EB=B0=94=20=ED=83=80=EC=9E=85=20=EB=B3=80=EA=B2=BD=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/common.js | 1 + src/components/fabric/QPolygon.js | 4 + src/hooks/surface/useSurfaceShapeBatch.js | 114 ++++++++-------------- 3 files changed, 47 insertions(+), 72 deletions(-) diff --git a/src/common/common.js b/src/common/common.js index d82d43f0..abda5acd 100644 --- a/src/common/common.js +++ b/src/common/common.js @@ -203,6 +203,7 @@ export const SAVE_KEY = [ 'fontWeight', 'dormerAttributes', 'toFixed', + 'isSortedPoints', ] export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype, fabric.Group.prototype] diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index 396ae6af..a471b5be 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -45,8 +45,11 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { options.sort = options.sort ?? true options.parentId = options.parentId ?? null + this.isSortedPoints = false + if (!options.sort && points.length <= 8) { points = sortedPointLessEightPoint(points) + this.isSortedPoints = true } else { let isDiagonal = false points.forEach((point, i) => { @@ -62,6 +65,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { if (!isDiagonal) { points = sortedPoints(points) + this.isSortedPoints = true } } diff --git a/src/hooks/surface/useSurfaceShapeBatch.js b/src/hooks/surface/useSurfaceShapeBatch.js index 0de86ecc..75da1422 100644 --- a/src/hooks/surface/useSurfaceShapeBatch.js +++ b/src/hooks/surface/useSurfaceShapeBatch.js @@ -199,6 +199,8 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) { pitch: globalPitch, surfaceId: surfaceId, direction: direction, + isXInversion: xInversion, + isYInversion: yInversion, }) canvas.setActiveObject(batchSurface) setSurfaceShapePattern(batchSurface, roofDisplay.column) @@ -213,35 +215,6 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) { // console.log('xInversion', xInversion) //상하반전 // console.log('yInversion', yInversion) //좌우반전 - //좌우 반전일때 방향 변경 - if (yInversion) { - batchSurface.lines.forEach((line) => { - const { x1, y1, x2, y2 } = line - if (line.x1 > line.x2) { - if (line.direction === 'left') { - line.direction = 'right' - line.x1 = x2 - line.x2 = x1 - } else if (line.direction === 'right') { - line.direction = 'left' - line.x1 = x2 - line.x2 = x1 - } - } - if (line.y2 > line.y1) { - if (line.direction === 'bottom') { - line.direction = 'top' - line.y1 = y2 - line.y2 = y1 - } else if (line.direction === 'top') { - line.direction = 'bottom' - line.y1 = y2 - line.y2 = y1 - } - } - }) - } - changeSurfaceLineType(batchSurface) if (setIsHidden) setIsHidden(false) @@ -650,27 +623,27 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) { } case 14: { points = [ - { x: pointer.x - length1 / 2 + length2, y: pointer.y + length4 / 2 }, - { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 }, { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 - length4 }, - { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 }, - { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 + length4 }, - { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + length4 }, + { x: pointer.x - length1 / 2, y: pointer.y + length4 / 2 }, + { x: pointer.x - length1 / 2 + length2, y: pointer.y + length4 / 2 }, { x: pointer.x - length1 / 2 + length2 + (length1 - length2 - length3) / 2, y: pointer.y + length4 / 2 - length4 + length5, }, + { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + length4 }, + { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 + length4 }, + { x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 }, ] break } case 15: { points = [ - { x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 }, { x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 }, - { x: pointer.x, y: pointer.y + length2 - length2 / 2 - length3 - (length2 - length3) }, - { x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 }, + { x: pointer.x - length1 / 2, y: pointer.y + length2 - length2 / 2 }, { x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 + length3 }, + { x: pointer.x + length1 / 2, y: pointer.y + length2 - length2 / 2 - length3 }, + { x: pointer.x, y: pointer.y + length2 - length2 / 2 - length3 - (length2 - length3) }, ] break } @@ -678,28 +651,28 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) { case 16: { points = [ { - x: pointer.x - length1 / 2, - y: pointer.y + length3 / 2, + x: pointer.x - length1 / 2 + (length1 - length2) / 2, + y: pointer.y + length3 / 2 - (length3 - length4) - length4, }, { x: pointer.x - length1 / 2 + (length1 - length2) / 2, y: pointer.y + length3 / 2 - (length3 - length4), }, { - x: pointer.x - length1 / 2 + (length1 - length2) / 2, - y: pointer.y + length3 / 2 - (length3 - length4) - length4, + x: pointer.x - length1 / 2, + y: pointer.y + length3 / 2, }, { - x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2, - y: pointer.y + length3 / 2 - (length3 - length4) - length4, + x: pointer.x - length1 / 2 + length1, + y: pointer.y + length3 / 2, }, { x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2, y: pointer.y + length3 / 2 - (length3 - length4) - length4 + length4, }, { - x: pointer.x - length1 / 2 + length1, - y: pointer.y + length3 / 2, + x: pointer.x - length1 / 2 + (length1 - length2) / 2 + length2, + y: pointer.y + length3 / 2 - (length3 - length4) - length4, }, ] break @@ -710,25 +683,25 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) { const topL = (length1 - length2) / 2 / Math.cos((angle * Math.PI) / 180) // 꺽이는부분 윗쪽 길이 points = [ - { - x: pointer.x - length1 / 2 + length1, - y: pointer.y + length3 / 2, - }, { x: pointer.x - length1 / 2, y: pointer.y + length3 / 2, }, { - x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)), - y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)), + x: pointer.x - length1 / 2 + length1, + y: pointer.y + length3 / 2, + }, + { + x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2 + topL * Math.cos(degreesToRadians(angle)), + y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)), }, { x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2, y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)), }, { - x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)) + length2 + topL * Math.cos(degreesToRadians(angle)), - y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)) + topL * Math.sin(degreesToRadians(angle)), + x: pointer.x - length1 / 2 + length4 * Math.cos(degreesToRadians(angle)), + y: pointer.y + length3 / 2 - length4 * Math.sin(degreesToRadians(angle)), }, ] break @@ -1111,7 +1084,10 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) { * @param { } polygon */ + //폴리곤, 상하반전, 좌우반전 const changeSurfaceLineType = (polygon) => { + const { isXInversion, isYInversion } = polygon //상하반전, 좌우반전 + polygon.lines.forEach((line) => { line.attributes.type = LINE_TYPE.WALLLINE.GABLE }) @@ -1129,10 +1105,8 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) { if (line[coord1] === line[coord2]) { if (line.direction === evaesDirection) { line.attributes.type = LINE_TYPE.WALLLINE.EAVES - line.stroke = 'rgb(1, 1, 1)' } else if (line.direction === ridgeDirection) { line.attributes.type = LINE_TYPE.SUBLINE.RIDGE - line.stroke = 'rgb(9, 9, 9)' } } }) @@ -1152,21 +1126,19 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) { : a }) - // if ( - // (polygon.direction === 'south' && maxLineSorted.direction === 'left') || - // (polygon.direction === 'north' && maxLineSorted.direction === 'right') - // // || - // // (polygon.direction === 'east' && maxLineSorted.direction === 'bottom') || - // // (polygon.direction === 'west' && maxLineSorted.direction === 'top') - // ) { - // polygon.lines.forEach((line) => { - // if (line.attributes.type === LINE_TYPE.WALLLINE.EAVES) { - // line.attributes.type = LINE_TYPE.SUBLINE.RIDGE - // } else if (line.attributes.type === LINE_TYPE.SUBLINE.RIDGE) { - // line.attributes.type = LINE_TYPE.WALLLINE.EAVES - // } - // }) - // } + //정렬된 폴리곤이 아니면(대각선이 존재하는 폴리곤일때) + if (!polygon.isSortedPoints) { + //좌우 반전을 했으면 반대로 정의함 + if (isYInversion) { + polygon.lines.forEach((line) => { + if (line.attributes.type === LINE_TYPE.WALLLINE.EAVES) { + line.attributes.type = LINE_TYPE.SUBLINE.RIDGE + } else if (line.attributes.type === LINE_TYPE.SUBLINE.RIDGE) { + line.attributes.type = LINE_TYPE.WALLLINE.EAVES + } + }) + } + } if (maxLine.length === 1) { const maxLineCoord = polygon.lines.reduce((a, b) => { @@ -1186,7 +1158,6 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) { if (targetCoord !== realLineCoord) { line.attributes.type = LINE_TYPE.SUBLINE.RIDGE - line.stroke = 'rgb(9, 9, 9)' } } else if (polygon.direction === 'east' || polygon.direction === 'west') { const targetCoord = @@ -1195,7 +1166,6 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) { if (targetCoord !== realLineCoord) { line.attributes.type = LINE_TYPE.SUBLINE.RIDGE - line.stroke = 'rgb(9, 9, 9)' } } })