Merge branch 'dev' into dev-yj

src/components/floor-plan/modal/ImgLoad.jsx

@@ -9,6 +9,7 @@ import { usePlan } from '@/hooks/usePlan'
 
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useCanvas } from '@/hooks/useCanvas'
+import { useImgLoader } from '@/hooks/floorPlan/useImgLoader'
 // import { initImageLoaderPopup } from '@/lib/planAction'
 
 export default function ImgLoad() {
@@ -30,6 +31,7 @@ export default function ImgLoad() {
     handleMapImageDown,
     handleAddressDelete,
   } = useRefFiles()
+  const { handleCanvasToPng } = useImgLoader()
 
   const handleModal = () => {
     setFloorPlanState({ ...floorPlanState, refFileModalOpen: false, toggleRotate: false })
@@ -149,6 +151,7 @@ export default function ImgLoad() {
             <button className="btn-frame modal act" onClick={handleModal}>
               {getMessage('common.finish')}
             </button>
+            {/* <button className="btn-frame modal act" onClick={() => handleCanvasToPng(2)}></button> */}
           </div>
         </div>
       </div>

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -337,8 +337,8 @@ export default function CircuitTrestleSetting({ id }) {
 
     const result = await apply()
     if (result) {
-      handleCanvasToPng(2)
       setViewCircuitNumberTexts(true)
+      handleCanvasToPng(2)
       // 캔버스 저장
       await saveCanvas(false)
       // 견적서 저장

src/hooks/floorPlan/useImgLoader.js

@@ -52,17 +52,35 @@ export function useImgLoader() {
 
     canvas.renderAll()
 
-    const res = await post({
+    const formData = new FormData()
+    const dataUrl = canvas.toDataURL('image/png')
+    const blobBin = atob(dataUrl.split(',')[1])
+    const array = []
+    for (let i = 0; i < blobBin.length; i++) {
+      array.push(blobBin.charCodeAt(i))
+    }
+    const file = new Blob([new Uint8Array(array)], { type: 'image/png' })
+    formData.append('file', file, 'canvas.png')
+    formData.append('objectNo', currentCanvasPlan.objectNo)
+    formData.append('planNo', currentCanvasPlan.planNo)
+    formData.append('type', type)
+    // formData.append('coordinates', getImageCoordinates())
+    const positionObj = getImageCoordinates()
+    console.log('🚀 ~ handleCanvasToPng ~ positionObj:', positionObj)
+    formData.append('width', Math.round(positionObj[1].x - positionObj[0].x - 350))
+    formData.append('height', Math.round(positionObj[1].y - positionObj[0].y - 100))
+    formData.append('left', Math.round(positionObj[0].x))
+    formData.append('top', Math.round(positionObj[0].y))
+    console.log('🚀 ~ handleCanvasToPng ~ formData:', formData)
+
+    // 이미지 크롭 요청
+    const result = await post({
       url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/canvas`,
-      data: {
+      data: formData,
-        objectNo: currentCanvasPlan.objectNo,
-        planNo: currentCanvasPlan.planNo,
-        type,
-        canvasToPng: canvas.toDataURL('image/png').replace('data:image/png;base64,', ''),
-        coordinates: getImageCoordinates(),
-      },
     })
-    console.log('🚀 ~ handleCanvasToPng ~ res:', res)
+    console.log('🚀 ~ handleCanvasToPng ~ result:', result)
+
+    return result
   }
 
   /**

src/hooks/useMode.js

@@ -1816,8 +1816,8 @@ export function useMode() {
     })
 
     wall.set({
-      originX: 'center',
+      // originX: 'center',
-      originY: 'center',
+      // originY: 'center',
       attributes: {
         roofId: roof.id,
       },

src/util/qpolygon-utils.js

@@ -1433,7 +1433,7 @@ const connectLinePoint = (polygon, canvas, textMode) => {
       attributes: {
         roofId: polygon.id,
         planeSize: calcLinePlaneSize(p),
-        actualSize: lineDegrees.length > 0 ? 0 : calcLineActualSize(p, lineDegrees[0]),
+        actualSize: lineDegrees.length === 0 ? 0 : calcLineActualSize(p, lineDegrees[0]),
       },
       fontSize: polygon.fontSize,
       stroke: '#1083E3',
@@ -1494,7 +1494,7 @@ const connectLinePoint = (polygon, canvas, textMode) => {
       attributes: {
         roofId: polygon.id,
         planeSize: calcLinePlaneSize(p),
-        actualSize: lineDegrees.length > 0 ? 0 : calcLineActualSize(p, lineDegrees[0]),
+        actualSize: lineDegrees.length === 0 ? 0 : calcLineActualSize(p, lineDegrees[0]),
       },
       fontSize: polygon.fontSize,
       stroke: '#1083E3',
@@ -1848,12 +1848,19 @@ const changeEavesRoof = (currentRoof, canvas, textMode) => {
         actualSize:
           prevDegree === currentDegree
             ? calcLineActualSize(
-                { x1: currentRoof.x1, y1: currentRoof.y1, x2: hipX2.toNumber(), y2: hipY2.toNumber() },
+                {
-                Big(90 - currentDegree).toNumber(),
+                  x1: currentRoof.x1,
+                  y1: currentRoof.y1,
+                  x2: hipX2.toNumber(),
+                  y2: hipY2.toNumber(),
+                },
+                currentDegree,
               )
             : 0,
       },
     })
+    const hip1Base = ((Math.abs(hip1.x1 - hip1.x2) + Math.abs(hip1.y1 - hip1.y2)) / 2) * 10
+    const hip1Height = Math.round(hip1Base / Math.tan(((90 - currentDegree) * Math.PI) / 180))
     canvas?.add(hip1)
     roof.innerLines.push(hip1)
 
@@ -1876,8 +1883,13 @@ const changeEavesRoof = (currentRoof, canvas, textMode) => {
         actualSize:
           currentDegree === nextDegree
             ? calcLineActualSize(
-                { x1: currentRoof.x2, y1: currentRoof.y2, x2: hipX2.toNumber(), y2: hipY2.toNumber() },
+                {
-                Big(90 - currentDegree).toNumber(),
+                  x1: currentRoof.x2,
+                  y1: currentRoof.y2,
+                  x2: hipX2.toNumber(),
+                  y2: hipY2.toNumber(),
+                },
+                currentDegree,
               )
             : 0,
       },
@@ -2039,7 +2051,7 @@ const changeGableRoof = (currentRoof, canvas, textMode) => {
               x2: midX.toNumber(),
               y2: midY.toNumber(),
             },
-            Big(90 - prevDegree),
+            prevDegree,
           ),
         },
       })
@@ -2065,10 +2077,7 @@ const changeGableRoof = (currentRoof, canvas, textMode) => {
             x2: midX.toNumber(),
             y2: midY.toNumber(),
           }),
-          actualSize: calcLineActualSize(
+          actualSize: calcLineActualSize({ x1: currentRoof.x2, y1: currentRoof.y2, x2: midX.toNumber(), y2: midY.toNumber() }, nextDegree),
-            { x1: currentRoof.x2, y1: currentRoof.y2, x2: midX.toNumber(), y2: midY.toNumber() },
-            Big(90 - nextDegree).toNumber(),
-          ),
         },
       })
       canvas?.add(hip2)
@@ -2274,7 +2283,7 @@ const changeHipAndGableRoof = (currentRoof, canvas, textMode) => {
               x2: midX.plus(hipX2).toNumber(),
               y2: midY.plus(hipY2).toNumber(),
             },
-            Big(90 - prevDegree).toNumber(),
+            prevDegree,
           ),
         },
       })
@@ -2309,7 +2318,7 @@ const changeHipAndGableRoof = (currentRoof, canvas, textMode) => {
               x2: midX.plus(hipX2).toNumber(),
               y2: midY.plus(hipY2).toNumber(),
             },
-            Big(90 - nextDegree).toNumber(),
+            nextDegree,
           ),
         },
       })
@@ -2360,7 +2369,7 @@ const changeHipAndGableRoof = (currentRoof, canvas, textMode) => {
                 x2: currentRoof.attributes.ridgeCoordinate.x1,
                 y2: currentRoof.attributes.ridgeCoordinate.y1,
               },
-              Big(90 - gableDegree).toNumber(),
+              gableDegree,
             ),
           },
         })
@@ -2584,7 +2593,7 @@ const changeJerkInHeadRoof = (currentRoof, canvas, textMode) => {
               x2: hipX2,
               y2: hipY2,
             },
-            Big(90 - gableDegree).toNumber(),
+            gableDegree,
           ),
         },
       })
@@ -2621,7 +2630,7 @@ const changeJerkInHeadRoof = (currentRoof, canvas, textMode) => {
               x2: hipX2,
               y2: hipY2,
             },
-            Big(90 - gableDegree).toNumber(),
+            gableDegree,
           ),
         },
       })
@@ -2671,7 +2680,7 @@ const changeJerkInHeadRoof = (currentRoof, canvas, textMode) => {
               x2: gable1.x1,
               y2: gable1.y1,
             },
-            Big(90 - prevDegree).toNumber(),
+            prevDegree,
           ),
         },
       })
@@ -2701,7 +2710,7 @@ const changeJerkInHeadRoof = (currentRoof, canvas, textMode) => {
               x2: gable2.x1,
               y2: gable2.y1,
             },
-            Big(90 - nextDegree).toNumber(),
+            nextDegree,
           ),
         },
       })
@@ -3015,10 +3024,7 @@ const changeWallRoof = (currentRoof, canvas, textMode) => {
           x2: wallMidX.toNumber(),
           y2: wallMidY.toNumber(),
         }),
-        actualSize: calcLineActualSize(
+        actualSize: calcLineActualSize({ x1: currentRoof.x1, y1: currentRoof.y1, x2: wallMidX.toNumber(), y2: wallMidY.toNumber() }, prevDegree),
-          { x1: currentRoof.x1, y1: currentRoof.y1, x2: wallMidX.toNumber(), y2: wallMidY.toNumber() },
-          Big(90 - prevDegree).toNumber(),
-        ),
       },
     })
     // const hip1Base = ((Math.abs(hip1.x1 - hip1.x2) + Math.abs(hip1.y1 - hip1.y2)) / 2) * 10
@@ -3041,10 +3047,7 @@ const changeWallRoof = (currentRoof, canvas, textMode) => {
           x2: wallMidX.toNumber(),
           y2: wallMidY.toNumber(),
         }),
-        actualSize: calcLineActualSize(
+        actualSize: calcLineActualSize({ x1: currentRoof.x2, y1: currentRoof.y2, x2: wallMidX.toNumber(), y2: wallMidY.toNumber() }, nextDegree),
-          { x1: currentRoof.x2, y1: currentRoof.y2, x2: wallMidX.toNumber(), y2: wallMidY.toNumber() },
-          Big(90 - nextDegree).toNumber(),
-        ),
       },
     })
     // const hip2Base = ((Math.abs(hip2.x1 - hip2.x2) + Math.abs(hip2.y1 - hip2.y2)) / 2) * 10
@@ -3241,6 +3244,7 @@ const drawCenterLine = (roof, canvas, textMode) => {
         }
         return prevDistance < currentDistance ? prev : current
       }, null)
+
     let points = []
     if (hips.length === 2 && Math.abs(hips[0].x2 - hips[1].x2) < 1 && Math.abs(hips[0].y2 - hips[1].y2) < 1) {
       const x1 = (currentRoof.x1 + currentRoof.x2) / 2
@@ -3301,7 +3305,7 @@ const drawCenterLine = (roof, canvas, textMode) => {
             points.push(currentRoof.x1, oppositeLine.y2, oppositeLine.x2, oppositeLine.y2)
           } else if (xPoints.length > 1) {
             xPoints = [...new Set(xPoints)] // 중복제거
-            if (ridge.length > 0) {
+            if (ridge?.length > 0) {
               let boolX1 = xPoints.some((x) => x === ridge.x1)
               let boolX2 = xPoints.some((x) => x === ridge.x2)
               if (boolX1 && boolX2) {
@@ -3396,8 +3400,12 @@ const drawCenterLine = (roof, canvas, textMode) => {
         points.push(x1, y1, x2, y2)
       }
     }
-    if (points !== null) {
+    if (points?.length > 0) {
       const currentDegree = currentRoof.attributes.pitch > 0 ? getDegreeByChon(currentRoof.attributes.pitch) : currentRoof.attributes.degree
+      const length =
+        currentDegree !== undefined && currentDegree > 0
+          ? calcLineActualSize({ x1: points[0], y1: points[1], x2: points[2], y2: points[3] }, currentDegree)
+          : calcLinePlaneSize({ x1: points[0], y1: points[1], x2: points[2], y2: points[3] })
       const pitchSizeLine = new QLine(points, {
         parentId: roof.id,
         stroke: '#000000',
@@ -3409,12 +3417,14 @@ const drawCenterLine = (roof, canvas, textMode) => {
         attributes: {
           roofId: roof.id,
           type: 'pitchSizeLine',
-          planeSize: calcLineActualSize({ x1: points[0], y1: points[1], x2: points[2], y2: points[3] }, currentDegree),
+          planeSize: length,
-          actualSize: calcLineActualSize({ x1: points[0], y1: points[1], x2: points[2], y2: points[3] }, currentDegree),
+          actualSize: length,
         },
       })
-      canvas.add(pitchSizeLine)
+      if (length > 0) {
-      canvas.renderAll()
+        canvas.add(pitchSizeLine)
+        canvas.renderAll()
+      }
     }
   })
 }
@@ -3517,7 +3527,7 @@ export const inPolygon = (polygonPoints, rectPoints) => {
  */
 export const calcLinePlaneSize = (points) => {
   const { x1, y1, x2, y2 } = points
-  return Big(x1).minus(x2).pow(2).plus(Big(y1).minus(y2).pow(2)).sqrt().abs().times(10).round().toNumber()
+  return Big(x1).minus(x2).abs().pow(2).plus(Big(y1).minus(y2).abs().pow(2)).sqrt().times(10).round().toNumber()
 }
 
 /**
@@ -3527,9 +3537,7 @@ export const calcLinePlaneSize = (points) => {
  * @returns number
  */
 export const calcLineActualSize = (points, degree) => {
-  const { x1, y1, x2, y2 } = points
   const planeSize = calcLinePlaneSize(points)
   const height = Big(Math.tan(Big(degree).times(Math.PI / 180))).times(planeSize)
-  // Math.round(Math.sqrt(Math.pow(line.attributes.planeSize, 2) + Math.pow(height, 2)))
   return Big(planeSize).pow(2).plus(height.pow(2)).sqrt().abs().round().toNumber()
 }