Merge pull request 'dev' (#211) from dev into dev-deploy

Reviewed-on: #211

src/hooks/common/useCommonUtils.js

@@ -1,17 +1,18 @@
 import { useEffect } from 'react'
-import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { wordDisplaySelector } from '@/store/settingAtom'
 import { useEvent } from '@/hooks/useEvent'
 import { checkLineOrientation, getDistance } from '@/util/canvas-util'
 import { commonUtilsState, dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 import { fontSelector } from '@/store/fontAtom'
-import { canvasState, currentMenuState } from '@/store/canvasAtom'
+import { canvasState } from '@/store/canvasAtom'
 import { v4 as uuidv4 } from 'uuid'
 import { usePopup } from '@/hooks/usePopup'
 import Distance from '@/components/floor-plan/modal/distance/Distance'
 import { usePolygon } from '@/hooks/usePolygon'
 import { useObjectBatch } from '@/hooks/object/useObjectBatch'
 import { BATCH_TYPE } from '@/common/common'
+import { useMouse } from '@/hooks/useMouse'
 
 export function useCommonUtils() {
   const canvas = useRecoilValue(canvasState)
@@ -25,6 +26,7 @@ export function useCommonUtils() {
   const { addPopup, closeAll, targetClose } = usePopup()
   const { drawDirectionArrow, addLengthText } = usePolygon()
   const { applyDormers } = useObjectBatch({})
+  const { getIntersectMousePoint } = useMouse()
 
   useEffect(() => {
     commonTextMode()
@@ -213,7 +215,7 @@ export function useCommonUtils() {
       addCanvasMouseEventListener('mouse:down', (e) => {
         let groupObjects = []
 
-        const pointer = canvas.getPointer(e.e)
+        const pointer = getIntersectMousePoint(e)
 
         let point
 
@@ -654,7 +656,11 @@ export function useCommonUtils() {
             clonedObj.setCoords()
             clonedObj.fire('modified')
             clonedObj.fire('polygonMoved')
-            clonedObj.set({ direction: obj.direction, directionText: obj.directionText, roofMaterial: obj.roofMaterial })
+            clonedObj.set({
+              direction: obj.direction,
+              directionText: obj.directionText,
+              roofMaterial: obj.roofMaterial,
+            })
 
             obj.lines.forEach((line, index) => {
               clonedObj.lines[index].set({ attributes: line.attributes })

src/hooks/roofcover/useMovementSetting.js

@@ -137,6 +137,7 @@ export function useMovementSetting(id) {
       const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
       outerLines.forEach((line) => line.set({ visible: true }))
       canvas.renderAll()
+      initEvent()
     }
   }, [])
 

src/hooks/useEvent.js

@@ -210,6 +210,14 @@ export function useEvent() {
         })
       })
 
+      const modulePoints = []
+      const modules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+      modules.forEach((module) => {
+        module.points.forEach((point) => {
+          modulePoints.push({ x: point.x, y: point.y })
+        })
+      })
+
       let adsorptionPoints = [
         ...getAdsorptionPoints(),
         ...roofAdsorptionPoints.current,
@@ -229,6 +237,7 @@ export function useEvent() {
             y: line.y2,
           }
         }),
+        ...modulePoints,
       ]
 
       adsorptionPoints = removeDuplicatePoints(adsorptionPoints)

src/util/qpolygon-utils.js

@@ -319,7 +319,7 @@ const isValidPoints = (points) => {
     const point1 = points[i]
     const point2 = points[(i + 1) % points.length]
     const point3 = points[(i + 2) % points.length]
-    
+
     // x값이 같은 연속된 3개 점 확인
     if (point1.x === point2.x && point2.x === point3.x) {
       return false
@@ -2768,6 +2768,70 @@ export const drawRidgeRoof = (roofId, canvas, textMode) => {
         /** 4각*/
         if (prevLineRidge === nextLineRidge) {
           polygonPoints.push({ x: ridgeLine.x1, y: ridgeLine.y1 }, { x: ridgeLine.x2, y: ridgeLine.y2 })
+          /** 포인트가 직각 사각형인지 확인하여 아닌경우 직각인 다각형 포인트로 변경한다.*/
+          const checkPoints = getSortedPoint(polygonPoints, baseHipLines)
+          let hasDiagonal = false
+          if (checkPoints < 4) {
+            hasDiagonal = true
+          } else {
+            checkPoints.forEach((point, index) => {
+              const nextPoint = checkPoints[(index + 1) % checkPoints.length]
+              if (point.x !== nextPoint.x && point.y !== nextPoint.y) {
+                hasDiagonal = true
+              }
+            })
+          }
+          if (hasDiagonal) {
+            const vectorX = Math.sign(currentRoof.x1 - ridgeLine.x1)
+            const vectorY = Math.sign(currentRoof.y1 - ridgeLine.y1)
+            const ridgeMinX = Math.min(ridgeLine.x1, ridgeLine.x2)
+            const ridgeMaxX = Math.max(ridgeLine.x1, ridgeLine.x2)
+            const ridgeMinY = Math.min(ridgeLine.y1, ridgeLine.y2)
+            const ridgeMaxY = Math.max(ridgeLine.y1, ridgeLine.y2)
+            if (
+              (!isPointOnLineNew(prevRoof, { x: ridgeLine.x1, y: ridgeLine.y1 }) &&
+                !isPointOnLineNew(nextRoof, { x: ridgeLine.x1, y: ridgeLine.y1 })) ||
+              (!isPointOnLineNew(prevRoof, { x: ridgeLine.x2, y: ridgeLine.y2 }) && !isPointOnLineNew(nextRoof, { x: ridgeLine.x2, y: ridgeLine.y2 }))
+            ) {
+              roof.lines
+                .filter((line) => line !== currentRoof && line !== prevRoof && line !== nextRoof)
+                .filter((line) =>
+                  ridgeLine.y1 === ridgeLine.y2
+                    ? vectorY === Math.sign(line.y1 - ridgeLine.y1) &&
+                      ridgeMinX <= line.x1 &&
+                      line.x1 <= ridgeMaxX &&
+                      ridgeMinX <= line.x2 &&
+                      line.x2 <= ridgeMaxX
+                    : vectorX === Math.sign(line.x1 - ridgeLine.x1) &&
+                      ridgeMinY <= line.y1 &&
+                      line.y1 <= ridgeMaxY &&
+                      ridgeMinY <= line.y2 &&
+                      line.y2 <= ridgeMaxY,
+                )
+                .forEach((line) => {
+                  if (ridgeLine.y1 === ridgeLine.y2) {
+                    if (vectorY === Math.sign(line.y1 - ridgeLine.y1)) {
+                      polygonPoints.push({ x: line.x1, y: line.y1 })
+                    }
+                    if (vectorY === Math.sign(line.y2 - ridgeLine.y1)) {
+                      polygonPoints.push({ x: line.x2, y: line.y2 })
+                    }
+                  } else {
+                    if (vectorX === Math.sign(line.x1 - ridgeLine.x1)) {
+                      polygonPoints.push({ x: line.x1, y: line.y1 })
+                    }
+                    if (vectorX === Math.sign(line.x2 - ridgeLine.x1)) {
+                      polygonPoints.push({ x: line.x2, y: line.y2 })
+                    }
+                  }
+                })
+            }
+            if (
+              !isPointOnLineNew(prevRoof, { x: ridgeLine.x2, y: ridgeLine.y2 }) &&
+              !isPointOnLineNew(nextRoof, { x: ridgeLine.x2, y: ridgeLine.y2 })
+            ) {
+            }
+          }
         } else {
           /** 6각이상*/
           let isOverLap =
@@ -3427,6 +3491,7 @@ export const drawRidgeRoof = (roofId, canvas, textMode) => {
 
         const checkRidgePoint = checkRidgePoints.find((point) => point.checkPoint)
 
+        if (!checkRidgePoint) return
         /** 마루에서 현재라인으로 향하는 외벽선까지의 포인트를 확인 하여 처리*/
         let checkEdge
         if (currentVectorX === 0) {
@@ -4123,7 +4188,7 @@ export const drawRidgeRoof = (roofId, canvas, textMode) => {
                 isOppNext,
               )
             ) {
-              const size = Big(isOppNext.x).minus(midx).abs().pow(2).plus(Big(isOppNext.y).minus(midY).abs().pow(2)).sqrt().toNumber()
+              const size = Big(isOppNext.x).minus(midX).abs().pow(2).plus(Big(isOppNext.y).minus(midY).abs().pow(2)).sqrt().toNumber()
               ridgePoints.push({ x: isOppNext.x, y: isOppNext.y, size })
             }
           }