From e32a4d7a33c346e308739b2acc3dc0c4fb2951fb Mon Sep 17 00:00:00 2001 From: yjnoh Date: Thu, 6 Mar 2025 10:14:04 +0900 Subject: [PATCH] =?UTF-8?q?=EC=98=A4=EA=B0=81=ED=98=95=20=EB=8F=84?= =?UTF-8?q?=EB=A8=B8=20=EC=8B=A4=EC=B8=A1=EC=B9=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/object/useObjectBatch.js | 392 +++++++++++++++++++---------- 1 file changed, 257 insertions(+), 135 deletions(-) diff --git a/src/hooks/object/useObjectBatch.js b/src/hooks/object/useObjectBatch.js index de4671dc..8a6c797a 100644 --- a/src/hooks/object/useObjectBatch.js +++ b/src/hooks/object/useObjectBatch.js @@ -300,19 +300,23 @@ export function useObjectBatch({ isHidden, setIsHidden }) { let theta = 0 + let bottomLength = 0, + bottomOffsetLength = 0, + planeHypotenuse = 0, + planeOffsetHypotenuse = 0, + actualBottomLength = 0, + actualBottomOffsetLength = 0, + actualHypotenuse = 0, + actualOffsetHypotenuse = 0, + shortHeight = 0, + shortOffsetHeight = 0, + extraHeight = 0, + extraOffsetHeight = 0 + //삼각형 도머 if (buttonAct === 3) { let groupDormerPoints = [] //나중에 offset을 위한 포인트 저장용 - let bottomLength = 0, - bottomOffsetLength = 0, - planeHypotenuse = 0, - planeOffsetHypotenuse = 0, - actualBottomLength = 0, - actualBottomOffsetLength = 0, - actualHypotenuse = 0, - actualOffsetHypotenuse = 0 - addCanvasMouseEventListener('mouse:move', (e) => { isDown = true if (!isDown) return @@ -664,7 +668,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) { }) } else if (buttonAct === 4) { const heightLength = height - (width / 2) * (pitch * 0.25) - //(동의길이 깊이)+출폭(깊이)-[(입력한 폭값)/2+출폭(폭)]*(0.25*입력한 寸) const heightOffsetLength = height + offsetRef - (width / 2 + offsetWidthRef) * (pitch * 0.25) addCanvasMouseEventListener('mouse:move', (e) => { @@ -680,55 +683,57 @@ export function useObjectBatch({ isHidden, setIsHidden }) { } }) - let angle = 0 - if (directionRef === 'left') { - //서 - angle = 90 - } else if (directionRef === 'right') { - //동 - angle = 270 - } else if (directionRef === 'up') { - //북 - angle = 180 - } + if (selectedSurface) { + const roofAngle = selectedSurface.roofMaterial.angle - pentagonPoints = [ - { x: pointer.x, y: pointer.y }, - { x: pointer.x - width / 2, y: pointer.y + (height - heightLength) }, - { x: pointer.x - width / 2, y: pointer.y + height }, - { x: pointer.x + width / 2, y: pointer.y + height }, - { x: pointer.x + width / 2, y: pointer.y + (height - heightLength) }, - ] + theta = Math.atan(Math.tan((roofAngle * Math.PI) / 180) / Math.tan((dormerAngle * Math.PI) / 180)) - pentagonOffsetPoints = [ - { x: pointer.x, y: pointer.y }, - { x: pointer.x - width / 2 - offsetWidthRef, y: pointer.y + height + offsetRef - heightOffsetLength }, - { x: pointer.x - width / 2 - offsetWidthRef, y: pointer.y + height + offsetRef }, - { x: pointer.x + width / 2 + offsetWidthRef, y: pointer.y + height + offsetRef }, - { x: pointer.x + width / 2 + offsetWidthRef, y: pointer.y + height + offsetRef - heightOffsetLength }, - ] + //5각형중에 3각형의 높이 작은영역 + shortHeight = width / 2 / Math.tan(theta) + extraHeight = height - shortHeight + planeHypotenuse = Math.sqrt(Math.pow(shortHeight, 2) + Math.pow(width / 2, 2)) + actualBottomLength = Math.sqrt(Math.pow((width / 2) * Math.tan((dormerAngle * Math.PI) / 180), 2) + Math.pow(width / 2, 2)) + actualHypotenuse = Math.sqrt(Math.pow(actualBottomLength, 2) + Math.pow(shortHeight, 2)) - dormer = new QPolygon(pentagonPoints, { - fill: 'white', - stroke: 'red', - strokeDashArray: [5, 5], - strokeWidth: 1, - selectable: true, - lockMovementX: true, - lockMovementY: true, - lockRotation: true, - lockScalingX: true, - lockScalingY: true, - name: dormerTempName, - originX: 'center', - originY: 'top', - angle: angle, - }) - canvas?.add(dormer) + //큰영역 + shortOffsetHeight = (width / 2 + offsetWidthRef) / Math.tan(theta) + extraOffsetHeight = height + offsetRef - shortOffsetHeight + planeOffsetHypotenuse = Math.sqrt(Math.pow(shortOffsetHeight, 2) + Math.pow(width / 2 + offsetWidthRef, 2)) + actualBottomOffsetLength = Math.sqrt( + Math.pow((width / 2 + offsetWidthRef) * Math.tan((dormerAngle * Math.PI) / 180), 2) + Math.pow(width / 2 + +offsetWidthRef, 2), + ) + actualOffsetHypotenuse = Math.sqrt(Math.pow(actualBottomOffsetLength, 2) + Math.pow(shortOffsetHeight, 2)) - if (offsetRef > 0 || offsetWidthRef > 0) { - dormerOffset = new QPolygon(pentagonOffsetPoints, { - fill: 'gray', + let angle = 0 + if (directionRef === 'left') { + //서 + angle = 90 + } else if (directionRef === 'right') { + //동 + angle = 270 + } else if (directionRef === 'up') { + //북 + angle = 180 + } + + pentagonPoints = [ + { x: pointer.x, y: pointer.y }, + { x: pointer.x - width / 2, y: pointer.y + (height - extraHeight) }, + { x: pointer.x - width / 2, y: pointer.y + height }, + { x: pointer.x + width / 2, y: pointer.y + height }, + { x: pointer.x + width / 2, y: pointer.y + (height - extraHeight) }, + ] + + pentagonOffsetPoints = [ + { x: pointer.x, y: pointer.y }, + { x: pointer.x - width / 2 - offsetWidthRef, y: pointer.y + height + offsetRef - extraOffsetHeight }, + { x: pointer.x - width / 2 - offsetWidthRef, y: pointer.y + height + offsetRef }, + { x: pointer.x + width / 2 + offsetWidthRef, y: pointer.y + height + offsetRef }, + { x: pointer.x + width / 2 + offsetWidthRef, y: pointer.y + height + offsetRef - extraOffsetHeight }, + ] + + dormer = new QPolygon(pentagonPoints, { + fill: 'white', stroke: 'red', strokeDashArray: [5, 5], strokeWidth: 1, @@ -743,7 +748,27 @@ export function useObjectBatch({ isHidden, setIsHidden }) { originY: 'top', angle: angle, }) - canvas?.add(dormerOffset) + canvas?.add(dormer) + + if (offsetRef > 0 || offsetWidthRef > 0) { + dormerOffset = new QPolygon(pentagonOffsetPoints, { + fill: 'gray', + stroke: 'red', + strokeDashArray: [5, 5], + strokeWidth: 1, + selectable: true, + lockMovementX: true, + lockMovementY: true, + lockRotation: true, + lockScalingX: true, + lockScalingY: true, + name: dormerTempName, + originX: 'center', + originY: 'top', + angle: angle, + }) + canvas?.add(dormerOffset) + } } }) @@ -794,90 +819,23 @@ export function useObjectBatch({ isHidden, setIsHidden }) { strokeDashArray: [0], }) //오프셋이 있을땐 같이 도머로 만든다 - const leftPentagon = new QPolygon(leftPoints, { - fill: 'transparent', - stroke: 'red', - strokeWidth: 1, - selectable: true, - lockMovementX: true, // X 축 이동 잠금 - lockMovementY: true, // Y 축 이동 잠금 - lockRotation: true, // 회전 잠금 - viewLengthText: true, - fontSize: 14, - // direction: direction, - originX: 'center', - originY: 'center', - name: dormerName, - pitch: pitch, - groupPoints: groupPoints, - dormerAttributes: { - height: height, - width: width, - pitch: pitch, - offsetRef: offsetRef, - offsetWidthRef: offsetWidthRef, - directionRef: directionRef, - }, - }) - - const rightPentagon = new QPolygon(rightPoints, { - fill: 'transparent', - stroke: 'red', - strokeWidth: 1, - selectable: true, - lockMovementX: true, // X 축 이동 잠금 - lockMovementY: true, // Y 축 이동 잠금 - lockRotation: true, // 회전 잠금 - viewLengthText: true, - fontSize: 14, - // direction: direction, - originX: 'center', - originY: 'center', - name: dormerName, - pitch: pitch, - groupPoints: groupPoints, - dormerAttributes: { - height: height, - width: width, - pitch: pitch, - offsetRef: offsetRef, - offsetWidthRef: offsetWidthRef, - directionRef: directionRef, - }, - }) - - // canvas?.add(leftPentagon) - // canvas?.add(rightPentagon) - - //패턴 - setSurfaceShapePattern(leftPentagon) - setSurfaceShapePattern(rightPentagon) - //방향 - // drawDirectionArrow(leftPentagon) - // drawDirectionArrow(rightPentagon) - - let offsetPolygon - - if (offsetRef > 0) { - canvas?.remove(dormer) - - offsetPolygon = new QPolygon(dormer.points, { + const leftPentagon = addPolygon( + leftPoints, + { + fill: 'transparent', + stroke: 'red', + strokeWidth: 1, selectable: true, lockMovementX: true, // X 축 이동 잠금 lockMovementY: true, // Y 축 이동 잠금 lockRotation: true, // 회전 잠금 viewLengthText: true, - name: 'pentagonDormerOffset', - id: id, - fill: 'rgba(255, 255, 255, 0.6)', - stroke: 'black', - strokeWidth: 1, + fontSize: 14, + // direction: direction, originX: 'center', - originY: 'top', - fontSize: lengthTextFont.fontSize.value, - fontStyle: lengthTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', - fontWeight: lengthTextFont.fontWeight.value, - angle: originAngle, + originY: 'center', + name: dormerName, + pitch: pitch, groupPoints: groupPoints, dormerAttributes: { height: height, @@ -887,7 +845,171 @@ export function useObjectBatch({ isHidden, setIsHidden }) { offsetWidthRef: offsetWidthRef, directionRef: directionRef, }, - }) + lines: [ + { + attributes: { + planeSize: toFixedWithoutRounding(planeOffsetHypotenuse, 1) * 10, + actualSize: toFixedWithoutRounding(actualOffsetHypotenuse, 1) * 10, + }, + }, + { + attributes: { + planeSize: toFixedWithoutRounding(extraOffsetHeight, 1) * 10, + actualSize: toFixedWithoutRounding(extraOffsetHeight, 1) * 10, + }, + }, + { + attributes: { + planeSize: toFixedWithoutRounding(width / 2 + offsetWidthRef, 1) * 10, + actualSize: toFixedWithoutRounding(actualBottomOffsetLength, 1) * 10, + }, + }, + { + attributes: { + planeSize: toFixedWithoutRounding(height + offsetRef, 1) * 10, + actualSize: toFixedWithoutRounding(height + offsetRef, 1) * 10, + }, + }, + ], + }, + false, + ) + + const rightPentagon = addPolygon( + rightPoints, + { + fill: 'transparent', + stroke: 'red', + strokeWidth: 1, + selectable: true, + lockMovementX: true, // X 축 이동 잠금 + lockMovementY: true, // Y 축 이동 잠금 + lockRotation: true, // 회전 잠금 + viewLengthText: true, + fontSize: 14, + // direction: direction, + originX: 'center', + originY: 'center', + name: dormerName, + pitch: pitch, + groupPoints: groupPoints, + dormerAttributes: { + height: height, + width: width, + pitch: pitch, + offsetRef: offsetRef, + offsetWidthRef: offsetWidthRef, + directionRef: directionRef, + }, + lines: [ + { + attributes: { + planeSize: toFixedWithoutRounding(height + offsetRef, 1) * 10, + actualSize: toFixedWithoutRounding(height + offsetRef, 1) * 10, + }, + }, + { + attributes: { + planeSize: toFixedWithoutRounding(width / 2 + offsetWidthRef, 1) * 10, + actualSize: toFixedWithoutRounding(actualBottomOffsetLength, 1) * 10, + }, + }, + { + attributes: { + planeSize: toFixedWithoutRounding(extraOffsetHeight, 1) * 10, + actualSize: toFixedWithoutRounding(extraOffsetHeight, 1) * 10, + }, + }, + { + attributes: { + planeSize: toFixedWithoutRounding(planeOffsetHypotenuse, 1) * 10, + actualSize: toFixedWithoutRounding(actualOffsetHypotenuse, 1) * 10, + }, + }, + ], + }, + false, + ) + + // canvas?.add(leftPentagon) + // canvas?.add(rightPentagon) + + //패턴 + + setSurfaceShapePattern(leftPentagon, roofDisplay.column, false, selectedSurface.roofMaterial, true) + setSurfaceShapePattern(rightPentagon, roofDisplay.column, false, selectedSurface.roofMaterial, true) + //방향 + // drawDirectionArrow(leftPentagon) + // drawDirectionArrow(rightPentagon) + + let offsetPolygon + + if (offsetRef > 0) { + canvas?.remove(dormer) + + offsetPolygon = addPolygon( + dormer.points, + { + selectable: true, + lockMovementX: true, // X 축 이동 잠금 + lockMovementY: true, // Y 축 이동 잠금 + lockRotation: true, // 회전 잠금 + viewLengthText: true, + name: 'pentagonDormerOffset', + id: id, + fill: 'rgba(255, 255, 255, 0.6)', + stroke: 'black', + strokeWidth: 1, + originX: 'center', + originY: 'top', + fontSize: lengthTextFont.fontSize.value, + fontStyle: lengthTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal', + fontWeight: lengthTextFont.fontWeight.value, + angle: originAngle, + groupPoints: groupPoints, + dormerAttributes: { + height: height, + width: width, + pitch: pitch, + offsetRef: offsetRef, + offsetWidthRef: offsetWidthRef, + directionRef: directionRef, + }, + lines: [ + { + attributes: { + planeSize: toFixedWithoutRounding(planeHypotenuse, 1) * 10, + actualSize: toFixedWithoutRounding(actualHypotenuse, 1) * 10, + }, + }, + { + attributes: { + planeSize: toFixedWithoutRounding(extraHeight, 1) * 10, + actualSize: toFixedWithoutRounding(extraHeight, 1) * 10, + }, + }, + { + attributes: { + planeSize: toFixedWithoutRounding(width, 1) * 10, + actualSize: toFixedWithoutRounding(actualBottomLength * 2, 1) * 10, + }, + }, + { + attributes: { + planeSize: toFixedWithoutRounding(extraHeight, 1) * 10, + actualSize: toFixedWithoutRounding(extraHeight, 1) * 10, + }, + }, + { + attributes: { + planeSize: toFixedWithoutRounding(planeHypotenuse, 1) * 10, + actualSize: toFixedWithoutRounding(actualHypotenuse, 1) * 10, + }, + }, + ], + }, + false, + ) } const groupPolygon = offsetPolygon ? [leftPentagon, rightPentagon, offsetPolygon] : [leftPentagon, rightPentagon]