canvas 객체 없음 오류 수정

src/components/fabric/QPolygon.js

@@ -235,8 +235,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         }
       }
     }
-
-    this.canvas.renderAll()
+    this.canvas?.renderAll()
   },
   inPolygon(point) {
     const vertices = this.getCurrentPoints()

src/hooks/useMode.js

@@ -16,7 +16,6 @@ import {
 import { QLine } from '@/components/fabric/QLine'
 import { fabric } from 'fabric'
 import { QPolygon } from '@/components/fabric/QPolygon'
-import { input } from '@nextui-org/react'
 
 export const Mode = {
   DRAW_LINE: 'drawLine', // 기준선 긋기모드
@@ -328,7 +327,7 @@ export function useMode() {
 
     points.current = [endPointCircle]
 
-    canvas.renderAll()
+    canvas?.renderAll()
   }
 
   const handleKeyDown = (e) => {
@@ -713,7 +712,7 @@ export function useMode() {
     // 캔버스를 다시 그립니다.
     if (!otherLines) {
       // polygon.fillCell()
-      canvas.renderAll()
+      canvas?.renderAll()
       // polygon.setViewLengthText(false)
       setMode(Mode.DEFAULT)
     }
@@ -1195,7 +1194,7 @@ export function useMode() {
         rtnLines.push(line)
       })
 
-      canvas.renderAll()
+      canvas?.renderAll()
     }
     if (obj.type === 'QLine') {
       const parent = obj.parent
@@ -1208,7 +1207,7 @@ export function useMode() {
         })
 
       parent.visible = true
-      canvas.renderAll()
+      canvas?.renderAll()
     }
     return rtnLines
   }
@@ -2044,7 +2043,7 @@ export function useMode() {
     roofPatternPolygonArray.push(smallRoofPolygon) //작은지붕폴리곤
     setRoofPolygonPattern({ roofPatternPolygonArray, lines }) //모든 행을 저장
 
-    canvas.renderAll()
+    canvas?.renderAll()
   }
 
   const handleOuterLineTemplateA8Points = (polygon, offsetInputX = 20, offsetInputY = 50) => {
@@ -2647,7 +2646,7 @@ export function useMode() {
       }
       setRoofPolygonPattern({ roofPatternPolygonArray, lines })
     }
-    canvas.renderAll()
+    canvas?.renderAll()
   }
 
   /**
@@ -2758,7 +2757,7 @@ export function useMode() {
       setRoofPolygonPattern({ roofPatternPolygonArray, lines: polygon.lines })
     }
 
-    canvas.renderAll()
+    canvas?.renderAll()
   }
 
   /**
@@ -3095,7 +3094,7 @@ export function useMode() {
     setRoofPolygonPattern({ roofPatternPolygonArray, lines: polygon.lines })
     // }
 
-    canvas.renderAll()
+    canvas?.renderAll()
   }
 
   /**
@@ -3173,7 +3172,7 @@ export function useMode() {
       })
       canvas.add(overLine)
     })
-    canvas.renderAll()
+    canvas?.renderAll()
   }
 
   const makeRoofPatternPolygon = (roofStyle) => {
@@ -3201,8 +3200,8 @@ export function useMode() {
 
     // 패턴 소스를 위한 임시 캔버스 생성
     const patternSourceCanvas = document.createElement('canvas')
-    patternSourceCanvas.width = patternSize.width * ratio
-    patternSourceCanvas.height = patternSize.height * ratio
+    patternSourceCanvas.width = roofStyle === 2 ? patternSize.width * 2 * ratio : patternSize.width * ratio
+    patternSourceCanvas.height = roofStyle === 2 ? patternSize.height * 2 * ratio : patternSize.height * ratio
     const ctx = patternSourceCanvas.getContext('2d')
 
     // 벽돌 패턴 그리기
@@ -3212,6 +3211,9 @@ export function useMode() {
 
     // 첫 번째 행 벽돌
     if (roofStyle === 2) {
+      patternSize.width = patternSize.width * 2
+      patternSize.height = patternSize.height * 2
+
       //지그재그
       // // 두 번째 행 벽돌
       if (templateType === 2) {
@@ -3251,7 +3253,7 @@ export function useMode() {
       drawPolygon.set('customIndex', index)
       polygonArray.push(drawPolygon)
     })
-    canvas.renderAll()
+    canvas?.renderAll()
 
     setRoofPolygonArray(polygonArray)
   }
@@ -3297,7 +3299,7 @@ export function useMode() {
         const removeArrayIndex = selectedAreaArray.findIndex((x) => x.customIndex === removeIndex)
         selectedAreaArray.splice(removeArrayIndex, 1)
       }
-      canvas.renderAll()
+      canvas?.renderAll()
     }
 
     polygons.forEach((polygon, index) => {
@@ -3328,21 +3330,21 @@ export function useMode() {
     // const selectedCellRoofs = selectedCellRoofArray
     if (selectedCellRoofArray.length === 0) {
       alert('선택된 영역이 없습니다.')
-      setMode('default')
-    } else {
-      const inputCellSize = { width: 172, height: 113 }
-      const cellSize = { ...inputCellSize } //기본으로 가로형으로 넣고
-
-      if (templateType === 2) {
-        // ;[cellSize.width, cellSize.height] = [cellSize.height, cellSize.width]
-        cellSize.width = inputCellSize.height
-        cellSize.height = inputCellSize.width
-      }
-
-      selectedCellRoofArray.forEach((polygon, index) => {
-        polygon.fillCell({ width: cellSize.width, height: cellSize.height, padding: 10 })
-      })
+      setMode(Mode.DEFAULT) //default 모드로 변경
+      return
     }
+
+    const inputCellSize = { width: 172, height: 113 }
+    const cellSize = { ...inputCellSize } //기본으로 가로형으로 넣고
+
+    if (templateType === 2) {
+      ;[cellSize.width, cellSize.height] = [cellSize.height, cellSize.width]
+    }
+
+    selectedCellRoofArray.forEach((polygon, index) => {
+      polygon.fillCell({ width: cellSize.width, height: cellSize.height, padding: 10 })
+    })
+    setMode(Mode.DEFAULT) //default 모드로 변경
   }
 
   return {