오각형 도머 실측치 적용

src/hooks/object/useObjectBatch.js

@@ -300,10 +300,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
 
     let theta = 0
 
-    //삼각형 도머
-    if (buttonAct === 3) {
-      let groupDormerPoints = [] //나중에 offset을 위한 포인트 저장용
-
     let bottomLength = 0,
       bottomOffsetLength = 0,
       planeHypotenuse = 0,
@@ -311,7 +307,15 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
       actualBottomLength = 0,
       actualBottomOffsetLength = 0,
       actualHypotenuse = 0,
-        actualOffsetHypotenuse = 0
+      actualOffsetHypotenuse = 0,
+      shortHeight = 0,
+      shortOffsetHeight = 0,
+      extraHeight = 0,
+      extraOffsetHeight = 0
+
+    //삼각형 도머
+    if (buttonAct === 3) {
+      let groupDormerPoints = [] //나중에 offset을 위한 포인트 저장용
 
       addCanvasMouseEventListener('mouse:move', (e) => {
         isDown = true
@@ -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,6 +683,27 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
           }
         })
 
+        if (selectedSurface) {
+          const roofAngle = selectedSurface.roofMaterial.angle
+
+          theta = Math.atan(Math.tan((roofAngle * Math.PI) / 180) / Math.tan((dormerAngle * Math.PI) / 180))
+
+          //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))
+
+          //큰영역
+          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))
+
           let angle = 0
           if (directionRef === 'left') {
             //서
@@ -694,18 +718,18 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
 
           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 - 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 - heightLength) },
+            { 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 - heightOffsetLength },
+            { 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 - heightOffsetLength },
+            { x: pointer.x + width / 2 + offsetWidthRef, y: pointer.y + height + offsetRef - extraOffsetHeight },
           ]
 
           dormer = new QPolygon(pentagonPoints, {
@@ -745,6 +769,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             })
             canvas?.add(dormerOffset)
           }
+        }
       })
 
       addCanvasMouseEventListener('mouse:up', (e) => {
@@ -794,7 +819,9 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
               strokeDashArray: [0],
             }) //오프셋이 있을땐 같이 도머로 만든다
 
-          const leftPentagon = new QPolygon(leftPoints, {
+          const leftPentagon = addPolygon(
+            leftPoints,
+            {
               fill: 'transparent',
               stroke: 'red',
               strokeWidth: 1,
@@ -818,9 +845,39 @@ 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 = new QPolygon(rightPoints, {
+          const rightPentagon = addPolygon(
+            rightPoints,
+            {
               fill: 'transparent',
               stroke: 'red',
               strokeWidth: 1,
@@ -844,14 +901,43 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
                 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)
+
-          setSurfaceShapePattern(rightPentagon)
+          setSurfaceShapePattern(leftPentagon, roofDisplay.column, false, selectedSurface.roofMaterial, true)
+          setSurfaceShapePattern(rightPentagon, roofDisplay.column, false, selectedSurface.roofMaterial, true)
           //방향
           // drawDirectionArrow(leftPentagon)
           // drawDirectionArrow(rightPentagon)
@@ -861,7 +947,9 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
           if (offsetRef > 0) {
             canvas?.remove(dormer)
 
-            offsetPolygon = new QPolygon(dormer.points, {
+            offsetPolygon = addPolygon(
+              dormer.points,
+              {
                 selectable: true,
                 lockMovementX: true, // X 축 이동 잠금
                 lockMovementY: true, // Y 축 이동 잠금
@@ -887,7 +975,41 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
                   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]