From a0c6631b0ea12b4f0dbc773d7f547be4aa01c303 Mon Sep 17 00:00:00 2001
From: yjnoh <lelalela@daum.net>
Date: Thu, 1 Aug 2024 17:30:03 +0900
Subject: [PATCH] =?UTF-8?q?canvas=20=EA=B0=9D=EC=B2=B4=20=EC=97=86?=
 =?UTF-8?q?=EC=9D=8C=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/fabric/QPolygon.js |  3 +-
 src/hooks/useMode.js              | 58 ++++++++++++++++---------------
 2 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index 076825b5..1817862a 100644
--- a/src/components/fabric/QPolygon.js
+++ b/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()
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 92b32e4d..4533d7a2 100644
--- a/src/hooks/useMode.js
+++ b/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 {