오각형 도머 실측치 적용

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 (selectedSurface) {
-        if (directionRef === 'left') {
+          const roofAngle = selectedSurface.roofMaterial.angle
-          //서
-          angle = 90
-        } else if (directionRef === 'right') {
-          //동
-          angle = 270
-        } else if (directionRef === 'up') {
-          //북
-          angle = 180
-        }
 
-        pentagonPoints = [
+          theta = Math.atan(Math.tan((roofAngle * Math.PI) / 180) / Math.tan((dormerAngle * Math.PI) / 180))
-          { 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) },
-        ]
 
-        pentagonOffsetPoints = [
+          //5각형중에 3각형의 높이 작은영역
-          { x: pointer.x, y: pointer.y },
+          shortHeight = width / 2 / Math.tan(theta)
-          { x: pointer.x - width / 2 - offsetWidthRef, y: pointer.y + height + offsetRef - heightOffsetLength },
+          extraHeight = height - shortHeight
-          { x: pointer.x - width / 2 - offsetWidthRef, y: pointer.y + height + offsetRef },
+          planeHypotenuse = Math.sqrt(Math.pow(shortHeight, 2) + Math.pow(width / 2, 2))
-          { x: pointer.x + width / 2 + offsetWidthRef, y: pointer.y + height + offsetRef },
+          actualBottomLength = Math.sqrt(Math.pow((width / 2) * Math.tan((dormerAngle * Math.PI) / 180), 2) + Math.pow(width / 2, 2))
-          { x: pointer.x + width / 2 + offsetWidthRef, y: pointer.y + height + offsetRef - heightOffsetLength },
+          actualHypotenuse = Math.sqrt(Math.pow(actualBottomLength, 2) + Math.pow(shortHeight, 2))
-        ]
 
-        dormer = new QPolygon(pentagonPoints, {
+          //큰영역
-          fill: 'white',
+          shortOffsetHeight = (width / 2 + offsetWidthRef) / Math.tan(theta)
-          stroke: 'red',
+          extraOffsetHeight = height + offsetRef - shortOffsetHeight
-          strokeDashArray: [5, 5],
+          planeOffsetHypotenuse = Math.sqrt(Math.pow(shortOffsetHeight, 2) + Math.pow(width / 2 + offsetWidthRef, 2))
-          strokeWidth: 1,
+          actualBottomOffsetLength = Math.sqrt(
-          selectable: true,
+            Math.pow((width / 2 + offsetWidthRef) * Math.tan((dormerAngle * Math.PI) / 180), 2) + Math.pow(width / 2 + +offsetWidthRef, 2),
-          lockMovementX: true,
+          )
-          lockMovementY: true,
+          actualOffsetHypotenuse = Math.sqrt(Math.pow(actualBottomOffsetLength, 2) + Math.pow(shortOffsetHeight, 2))
-          lockRotation: true,
-          lockScalingX: true,
-          lockScalingY: true,
-          name: dormerTempName,
-          originX: 'center',
-          originY: 'top',
-          angle: angle,
-        })
-        canvas?.add(dormer)
 
-        if (offsetRef > 0 || offsetWidthRef > 0) {
+          let angle = 0
-          dormerOffset = new QPolygon(pentagonOffsetPoints, {
+          if (directionRef === 'left') {
-            fill: 'gray',
+            //서
+            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, {
+          const leftPentagon = addPolygon(
-            fill: 'transparent',
+            leftPoints,
-            stroke: 'red',
+            {
-            strokeWidth: 1,
+              fill: 'transparent',
-            selectable: true,
+              stroke: 'red',
-            lockMovementX: true, // X 축 이동 잠금
+              strokeWidth: 1,
-            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, {
               selectable: true,
               lockMovementX: true, // X 축 이동 잠금
               lockMovementY: true, // Y 축 이동 잠금
               lockRotation: true, // 회전 잠금
               viewLengthText: true,
-              name: 'pentagonDormerOffset',
+              fontSize: 14,
-              id: id,
+              // direction: direction,
-              fill: 'rgba(255, 255, 255, 0.6)',
-              stroke: 'black',
-              strokeWidth: 1,
               originX: 'center',
-              originY: 'top',
+              originY: 'center',
-              fontSize: lengthTextFont.fontSize.value,
+              name: dormerName,
-              fontStyle: lengthTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+              pitch: pitch,
-              fontWeight: lengthTextFont.fontWeight.value,
-              angle: originAngle,
               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]