Merge branch 'dev' of ssh://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

src/hooks/main/useMainContentsController.js

@@ -16,7 +16,7 @@ export const useMainContentsController = () => {
   useEffect(() => {
     checkSession().then((res) => {
       if (!res) {
-        router.replace('/login')
+        router.replace('/login', undefined, { shallow: true })
       }
     })
     setIsGlobalLoading(true)

src/hooks/object/useObjectBatch.js

@@ -12,6 +12,7 @@ import {
   triangleToPolygon,
   getDegreeByChon,
   toFixedWithoutRounding,
+  getTrianglePoints,
 } from '@/util/canvas-util'
 import { useSwal } from '@/hooks/useSwal'
 import * as turf from '@turf/turf'
@@ -28,13 +29,11 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
   const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useEvent()
   // const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useContext(EventContext)
   const { swalFire } = useSwal()
-  const { drawDirectionArrow } = usePolygon()
+  const { drawDirectionArrow, addPolygon, addLengthText } = usePolygon()
   const { setSurfaceShapePattern } = useRoofFn()
   const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
   const roofDisplay = useRecoilValue(roofDisplaySelector)
 
-  const { addPolygon } = usePolygon()
-
   useEffect(() => {
     if (canvas) {
       // dbClickEvent()
@@ -419,7 +418,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
 
       addCanvasMouseEventListener('mouse:up', (e) => {
         if (dormer) {
-          const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer))
+          const trianglePolygon = pointsToTurfPolygon(offsetRef > 0 ? getTrianglePoints(dormerOffset) : getTrianglePoints(dormer))
           const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
 
           //지붕 밖으로 그렸을때
@@ -448,8 +447,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             direction = 'north'
           }
 
-          let { leftPoints, rightPoints, groupPoints } =
+          let { leftPoints, rightPoints, groupPoints, dormerPoints } =
-            offsetRef > 0 ? splitDormerTriangle(dormerOffset, directionRef) : splitDormerTriangle(dormer, directionRef)
+            offsetRef > 0 ? splitDormerTriangle(dormerOffset, directionRef, dormer) : splitDormerTriangle(dormer, directionRef)
           canvas?.remove(offsetRef > 0 ? dormerOffset : dormer)
 
           if (offsetRef > 0)
@@ -512,10 +511,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             false,
           )
 
-          leftTriangle.texts.forEach((text) => {
-            text.bringToFront()
-          })
-
           const rightTriangle = addPolygon(
             rightPoints,
             {
@@ -587,7 +582,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             canvas?.remove(dormer)
 
             offsetPolygon = addPolygon(
-              triangleToPolygon(dormer),
+              dormerPoints,
               {
                 selectable: true,
                 lockMovementX: true, // X 축 이동 잠금
@@ -604,7 +599,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
                 fontSize: lengthTextFont.fontSize.value,
                 fontStyle: lengthTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
                 fontWeight: lengthTextFont.fontWeight.value,
-                angle: originAngle,
+                // angle: originAngle,
                 pitch: pitch,
                 dormerAttributes: {
                   height: height,
@@ -639,6 +634,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             )
           }
 
+          addLengthText(leftTriangle)
+          addLengthText(rightTriangle)
+          addLengthText(offsetPolygon)
+
           const groupPolygon = offsetPolygon ? [leftTriangle, rightTriangle, offsetPolygon] : [leftTriangle, rightTriangle]
 
           const objectGroup = new fabric.Group(groupPolygon, {
@@ -667,9 +666,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
         }
       })
     } else if (buttonAct === 4) {
-      const heightLength = height - (width / 2) * (pitch * 0.25)
-      const heightOffsetLength = height + offsetRef - (width / 2 + offsetWidthRef) * (pitch * 0.25)
-
       addCanvasMouseEventListener('mouse:move', (e) => {
         isDown = true
         if (!isDown) return
@@ -774,7 +770,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
 
       addCanvasMouseEventListener('mouse:up', (e) => {
         if (dormer) {
-          const pentagonPolygon = pointsToTurfPolygon(dormer.points)
+          const pentagonPolygon = pointsToTurfPolygon(offsetRef > 0 ? dormerOffset.getCurrentPoints() : dormer.getCurrentPoints())
           const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
 
           //지붕 밖으로 그렸을때
@@ -804,11 +800,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             direction = 'north'
           }
 
-          const offsetMode = offsetRef > 0 || offsetWidthRef > 0 ? 'offset' : 'normal'
           let { leftPoints, rightPoints, groupPoints } =
-            offsetRef > 0 || offsetWidthRef > 0
+            offsetRef > 0 || offsetWidthRef > 0 ? splitDormerPentagon(dormerOffset, directionRef) : splitDormerPentagon(dormer, directionRef)
-              ? splitDormerPentagon(dormerOffset, directionRef, offsetMode)
-              : splitDormerPentagon(dormer, directionRef, offsetMode)
           canvas?.remove(offsetRef > 0 || offsetWidthRef > 0 ? dormerOffset : dormer)
 
           if (offsetRef > 0)
@@ -948,7 +941,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             canvas?.remove(dormer)
 
             offsetPolygon = addPolygon(
-              dormer.points,
+              dormer.getCurrentPoints(),
               {
                 selectable: true,
                 lockMovementX: true, // X 축 이동 잠금
@@ -965,7 +958,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
                 fontSize: lengthTextFont.fontSize.value,
                 fontStyle: lengthTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
                 fontWeight: lengthTextFont.fontWeight.value,
-                angle: originAngle,
+                // angle: originAngle,
                 groupPoints: groupPoints,
                 dormerAttributes: {
                   height: height,
@@ -1012,6 +1005,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             )
           }
 
+          addLengthText(leftPentagon)
+          addLengthText(rightPentagon)
+          addLengthText(offsetPolygon)
+
           const groupPolygon = offsetPolygon ? [leftPentagon, rightPentagon, offsetPolygon] : [leftPentagon, rightPentagon]
 
           const objectGroup = new fabric.Group(groupPolygon, {
@@ -1058,13 +1055,18 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
     if (setIsHidden) setIsHidden(false)
   }
 
-  const splitDormerTriangle = (triangle, direction) => {
+  const splitDormerTriangle = (triangle, direction, dormer = null) => {
     const halfWidth = triangle.width / 2
 
+    let dormerPoints = []
     let leftPoints = []
     let rightPoints = []
     let groupPoints = []
 
+    if (dormer) {
+      dormerPoints = getTrianglePoints(dormer)
+    }
+
     if (direction === 'down') {
       leftPoints = [
         { x: triangle.left, y: triangle.top },
@@ -1122,23 +1124,23 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
     } else if (direction === 'right') {
       leftPoints = [
         { x: triangle.left, y: triangle.top },
+        { x: triangle.left + triangle.height, y: triangle.top + halfWidth },
         { x: triangle.left + triangle.height, y: triangle.top },
-        { x: triangle.left + triangle.height, y: triangle.top + triangle.height },
       ]
 
       rightPoints = [
         { x: triangle.left, y: triangle.top },
-        { x: triangle.left + triangle.height, y: triangle.top + triangle.height },
+        { x: triangle.left + triangle.height, y: triangle.top },
-        { x: triangle.left + triangle.height, y: triangle.top - triangle.height },
+        { x: triangle.left + triangle.height, y: triangle.top - halfWidth },
       ]
 
       groupPoints = [
         { x: triangle.left, y: triangle.top },
-        { x: triangle.left + triangle.height, y: triangle.top + triangle.height },
+        { x: triangle.left + triangle.height, y: triangle.top + halfWidth },
-        { x: triangle.left + triangle.height, y: triangle.top - triangle.height },
+        { x: triangle.left + triangle.height, y: triangle.top - halfWidth },
       ]
     }
-    return { leftPoints, rightPoints, groupPoints }
+    return { leftPoints, rightPoints, groupPoints, dormerPoints }
   }
 
   const splitDormerPentagon = (pentagon, direction, offsetMode) => {
@@ -1326,15 +1328,24 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
 
   const reGroupObject = (groupObj) => {
     groupObj._restoreObjectsState() //이건 실행만 되도 그룹이 변경됨
+
+    console.log('groupObj', groupObj)
+
     const reGroupObjects = []
     groupObj._objects.forEach((obj) => {
-      const newObj = new QPolygon(obj.getCurrentPoints(), {
+      const newObj = addPolygon(
-        ...obj,
+        obj.getCurrentPoints(),
-        points: obj.getCurrentPoints(),
+        {
-        scaleX: 1,
+          ...obj,
-        scaleY: 1,
+          points: obj.getCurrentPoints(),
-        texts: [],
+          scaleX: 1,
-      })
+          scaleY: 1,
+          lines: obj.lines ?? [],
+          groupPoints: groupObj.groupPoints ?? [],
+          groupId: groupObj.groupId ?? '',
+        },
+        false,
+      )
       reGroupObjects.push(newObj)
       canvas.remove(obj)
       if (newObj.direction) {
@@ -1342,6 +1353,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
       }
       newObj.fire('modified')
     })
+
     const reGroup = new fabric.Group(reGroupObjects, {
       subTargetCheck: true,
       name: groupObj.name,
@@ -1350,10 +1362,20 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
       parentId: groupObj.parentId,
       originX: 'center',
       originY: 'center',
+      groupPoints: groupObj.groupPoints ?? [],
+      groupId: groupObj.groupId ?? '',
     })
     canvas?.add(reGroup)
     canvas?.remove(groupObj)
 
+    reGroup._objects.forEach((obj) => {
+      if (obj.hasOwnProperty('texts')) {
+        obj.texts.forEach((text) => {
+          text.bringToFront()
+        })
+      }
+    })
+
     return reGroup
   }
 
@@ -1368,6 +1390,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
       })
 
       const originObj = { ...obj }
+      const turfSurface = pointsToTurfPolygon(parentSurface.points)
+      const originLeft = obj.left
+      const originTop = obj.top
+
       addCanvasMouseEventListener('mouse:up', (e) => {
         //개구, 그림자 타입일 경우 폴리곤 타입 변경
         if (BATCH_TYPE.OPENING === obj.name || BATCH_TYPE.SHADOW === obj.name) {
@@ -1375,7 +1401,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             points: rectToPolygon(obj),
           })
 
-          const turfSurface = pointsToTurfPolygon(parentSurface.points)
           const turfObject = pointsToTurfPolygon(obj.points)
 
           if (turf.booleanWithin(turfObject, turfSurface)) {
@@ -1398,8 +1423,36 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             lockMovementY: true,
           })
 
-          if (obj.type === 'group') reGroupObject(obj)
+          if (obj.name === BATCH_TYPE.TRIANGLE_DORMER || obj.name === BATCH_TYPE.PENTAGON_DORMER) {
-          obj.setCoords()
+            const calcLeft = obj.left - originLeft
+            const calcTop = obj.top - originTop
+
+            const currentDormerPoints = obj.groupPoints.map((item) => {
+              return {
+                x: item.x + calcLeft,
+                y: item.y + calcTop,
+              }
+            })
+
+            const turfObject = pointsToTurfPolygon(currentDormerPoints)
+
+            if (turf.booleanWithin(turfObject, turfSurface)) {
+              obj.set({
+                lockMovementX: true,
+                lockMovementY: true,
+                groupPoints: currentDormerPoints,
+              })
+
+              if (obj.type === 'group') reGroupObject(obj)
+              obj.setCoords()
+            } else {
+              swalFire({
+                title: getMessage('batch.object.outside.roof'),
+                icon: 'warning',
+              })
+              obj.set({ ...originObj, lockMovementX: true, lockMovementY: true })
+            }
+          }
         }
         canvas.discardActiveObject()
         initEvent()
@@ -1512,8 +1565,27 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
     length2 = parseInt(length2) / 10
 
     const dormer = canvas.getActiveObject()
-    if (length1) dormer.top = arrow1 === 'down' ? dormer.top + length1 : dormer.top - length1
+    if (length1) {
-    if (length2) dormer.left = arrow2 === 'left' ? dormer.left - length2 : dormer.left + length2
+      if (!arrow1) {
+        swalFire({
+          title: getMessage('length.direction.is.required'),
+          icon: 'warning',
+        })
+      } else {
+        dormer.top = arrow1 === 'down' ? dormer.top + length1 : dormer.top - length1
+      }
+    }
+
+    if (length2) {
+      if (!arrow2) {
+        swalFire({
+          title: getMessage('length.direction.is.required'),
+          icon: 'warning',
+        })
+      } else {
+        dormer.left = arrow2 === 'left' ? dormer.left - length2 : dormer.left + length2
+      }
+    }
 
     if (dormer.type === 'group') {
       const newDormer = reGroupObject(dormer)

src/util/canvas-util.js

@@ -1040,3 +1040,17 @@ export function calculateVisibleModuleHeight(sourceWidth, sourceHeight, angle, d
 export function toFixedWithoutRounding(number, decimals) {
   return Math.floor(number * Math.pow(10, decimals)) / Math.pow(10, decimals)
 }
+
+export function getTrianglePoints(triangle) {
+  const matrix = triangle.calcTransformMatrix()
+  const w = triangle.width / 2
+  const h = triangle.height / 2
+
+  const points = [
+    { x: 0, y: -h },
+    { x: -w, y: h },
+    { x: w, y: h },
+  ]
+
+  return points.map((point) => fabric.util.transformPoint(point, matrix))
+}