cell center 여부 추가

src/components/fabric/QPolygon.js

@@ -274,7 +274,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     this.cells = drawCellsArray
     return drawCellsArray
   },
-  fillCellABType(cell = { width: 50, height: 100, padding: 5, wallDirection: 'left', referenceDirection: 'none', startIndex: -1 }) {
+  fillCellABType(
+    cell = { width: 50, height: 100, padding: 5, wallDirection: 'left', referenceDirection: 'none', startIndex: -1, isCellCenter: false },
+  ) {
     const points = this.points
 
     const minX = Math.min(...points.map((p) => p.x)) //왼쪽
@@ -451,9 +453,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         } else {
           // centerWidth = 0 //나중에 중간 정렬 이면 어쩌구 함수 만들어서 넣음
           if (['left', 'right'].includes(cell.wallDirection)) {
-            centerWidth = 0
+            centerWidth = cell.isCellCenter ? centerWidth : 0
           } else if (['top', 'bottom'].includes(cell.wallDirection)) {
-            centerHeight = 0
+            centerHeight = cell.isCellCenter ? centerHeight : 0
           }
 
           if (cell.wallDirection === 'left') {
@@ -528,7 +530,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
             type: 'cellRect',
           })
 
-          var group = new fabric.Group([rect, text], {
+          const group = new fabric.Group([rect, text], {
             left: startXPos,
             top: startYPos,
           })

src/hooks/useMode.js

@@ -74,6 +74,7 @@ export function useMode() {
   const [roofStyle, setRoofStyle] = useState(1) //기본 지붕 패턴
   const [templateCenterLine, setTemplateCenterLine] = useState([])
   const compass = useRecoilValue(compassState)
+  const [isCellCenter, setIsCellCenter] = useState(false)
 
   useEffect(() => {
     // 이벤트 리스너 추가
@@ -4060,18 +4061,10 @@ export function useMode() {
         if (templateType === 2) {
           //셀이 그려져야할 기준 방향
           //A타입
-          if (parallelPoint === 0 || parallelPoint === 5) {
+          referenceDirection = parallelPoint === 0 || parallelPoint === 5 ? 'top' : 'bottom'
-            referenceDirection = 'top'
-          } else {
-            referenceDirection = 'bottom'
-          }
         } else if (templateType === 3) {
           //B타입
-          if (parallelPoint === 0 || parallelPoint === 1) {
+          referenceDirection = parallelPoint === 0 || parallelPoint === 1 ? 'left' : 'right'
-            referenceDirection = 'left'
-          } else {
-            referenceDirection = 'right'
-          }
         }
       }
 
@@ -4137,34 +4130,8 @@ export function useMode() {
 
     const wallDirection = polygon.wallDirection
 
-    // //A템플릿 타입
-    // if (templateType === 2) {
-    //   if (compass === 90) {
-    //     if (wallDirection === 'right') {
-    //       alert('선택할 수 없는 방향입니다.')
-    //       return
-    //     }
-    //   } else if (compass === 270) {
-    //     if (wallDirection === 'left') {
-    //       alert('선택할 수 없는 방향입니다.')
-    //       return
-    //     }
-    //   }
-    // } else if (templateType === 3) {
-    //   if (compass === 0) {
-    //     if (wallDirection === 'top') {
-    //       alert('선택할 수 없는 방향입니다.')
-    //       return
-    //     }
-    //   } else if (compass === 180) {
-    //     if (wallDirection === 'bottom') {
-    //       alert('선택할 수 없는 방향입니다.')
-    //       return
-    //     }
-    //   }
-    // }
-
     const invalidDirections = {
+      //반대편으로 작성
       2: {
         90: 'right',
         270: 'left',
@@ -4233,7 +4200,6 @@ export function useMode() {
     }
 
     if (drewRoofCells.length > 0) {
-      //리코일에
       if (confirm('패널이 초기화 됩니다.')) {
         drewRoofCells.forEach((cells, index) => {
           cells.drawCells.forEach((cell) => {
@@ -4245,7 +4211,7 @@ export function useMode() {
       }
     }
 
-    const inputCellSize = { width: 172, height: 113 } //추후 입력받는 값으로 변경
+    const inputCellSize = { width: 172, height: 70 } //추후 입력받는 값으로 변경
     const cellSize = { ...inputCellSize } //기본으로 가로형으로 넣고
 
     if (templateType === 2) {
@@ -4260,10 +4226,9 @@ export function useMode() {
         wallDirection: polygon.wallDirection,
         referenceDirection: polygon.referenceDirection,
         startIndex: polygon.startIndex,
+        isCellCenter: isCellCenter,
       })
       drawCellsArray.push({ roofIndex: polygon.idx, drawCells: drawCells })
-
-      // toggleSelection(polygon) //선택 후 셀그리면 지우려고 했는데 방위 땜에 삭제
     })
 
     setDrewRoofCells(drawCellsArray)