안쓰는 코드 제거

src/components/Roof2.jsx

@@ -2,11 +2,10 @@ import { useCanvas } from '@/hooks/useCanvas'
 import { useEffect, useState } from 'react'
 import { Mode, useMode } from '@/hooks/useMode'
 import { Button } from '@nextui-org/react'
-import QRect from '@/components/fabric/QRect'
 
 import RangeSlider from './ui/RangeSlider'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { canvasSizeState, fontSizeState, roofMaterialState, roofState, sortedPolygonArray } from '@/store/canvasAtom'
+import { canvasSizeState, fontSizeState, roofMaterialState, sortedPolygonArray } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { getCanvasState, insertCanvasState } from '@/lib/canvas'
 import { calculateIntersection } from '@/util/canvas-util'
@@ -60,22 +59,6 @@ export default function Roof2() {
     changeMode(canvas, mode)
   }, [canvas, mode])
 
-  const makeRect = () => {
-    if (canvas) {
-      const rect = new QRect({
-        left: 100,
-        top: 100,
-        fill: 'transparent',
-        stroke: 'black',
-        width: 400,
-        height: 100,
-        fontSize: fontSize,
-      })
-
-      canvas?.add(rect)
-    }
-  }
-
   const makeLine = () => {
     if (canvas) {
       const line = new QLine([50, 50, 200, 50], {
@@ -265,7 +248,7 @@ export default function Roof2() {
       { x: 675, y: 275 },
       { x: 450, y: 850 },
     ]
-    const polygon = new QPolygon(type2, {
+    const polygon = new QPolygon(type1, {
       fill: 'transparent',
       stroke: 'black',
       strokeWidth: 1,
@@ -451,28 +434,34 @@ export default function Roof2() {
 
   const createRoofRack = () => {
     const roofs = canvas?.getObjects().filter((obj) => obj.name === 'roof')
-    roofs.forEach((roof) => {
+    roofs.forEach((roof, index) => {
       let maxLengthLine = roof.lines.reduce((acc, cur) => {
         return acc.length > cur.length ? acc : cur
       })
 
       const offsetPolygonPoint = offsetPolygon(roof.points, -20, 0)
 
-      const newPoly = new QPolygon(offsetPolygonPoint, {
+      const trestlePoly = new QPolygon(offsetPolygonPoint, {
         fill: 'transparent',
         stroke: 'red',
         strokeWidth: 1,
         selectable: true,
         fontSize: fontSize,
-        name: 'wall',
+        name: 'trestle',
+        lockMovementX: true, // X 축 이동 잠금
+        lockMovementY: true, // Y 축 이동 잠금
+        lockRotation: true, // 회전 잠금
+        lockScalingX: true, // X 축 크기 조정 잠금
+        lockScalingY: true, // Y 축 크기 조정 잠금
+        idx: index,
       })
 
-      canvas?.add(newPoly)
+      canvas?.add(trestlePoly)
 
       if (maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left') {
-        newPoly.fillCell({ width: 100, height: 50, padding: 10 })
+        trestlePoly.fillCell({ width: 100, height: 50, padding: 10 })
       } else {
-        newPoly.fillCell({ width: 50, height: 100, padding: 10 })
+        trestlePoly.fillCell({ width: 50, height: 100, padding: 10 })
       }
     })
   }
@@ -515,9 +504,6 @@ export default function Roof2() {
             <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => setMode(Mode.TEXTBOX)}>
               텍스트박스 모드
             </Button>
-            <Button className="m-1 p-2" color={`${mode === Mode.DRAW_RECT ? 'primary' : 'default'}`} onClick={() => setMode(Mode.DRAW_RECT)}>
-              사각형 생성 모드
-            </Button>
             <Button className="m-1 p-2" onClick={handleUndo}>
               Undo
             </Button>
@@ -534,9 +520,6 @@ export default function Roof2() {
               축소
             </Button>
             현재 줌 : {zoom}%
-            <Button className="m-1 p-2" onClick={makeRect}>
-              사각형만들기
-            </Button>
             <Button className="m-1 p-2" onClick={makeLine}>
               선 추가
             </Button>

src/components/fabric/QPolygon.js

@@ -255,10 +255,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
             name: 'cell',
           })
 
-          rect.on('mousedown', () => {
-            rect.set({ fill: 'red' })
-          })
-
           drawCellsArray.push(rect) //배열에 넣어서 반환한다
           this.canvas.add(rect)
         }

src/components/fabric/QRect.js

@@ -1,98 +0,0 @@
-import { fabric } from 'fabric'
-export default class QRect extends fabric.Rect {
-  #text = []
-  #viewLengthText
-  #fontSize
-  type = 'QRect'
-  constructor(option) {
-    if (!option.fontSize) {
-      throw new Error('Font size is required.')
-    }
-    super(option)
-    this.#fontSize = option.fontSize
-    this.#init(option)
-    this.#addControl()
-  }
-
-  #init(option) {
-    this.#viewLengthText = option.viewLengthText ?? true
-  }
-
-  setViewLengthText(bool) {
-    this.#viewLengthText = bool
-    this.#addLengthText()
-  }
-
-  setFontSize(fontSize) {
-    this.#fontSize = fontSize
-    this.#addLengthText()
-  }
-
-  #addControl() {
-    this.on('removed', () => {
-      if (this.#text.length > 0) {
-        this.#text.forEach((text) => {
-          this.canvas.remove(text)
-        })
-        this.#text = []
-      }
-    })
-
-    this.on('added', () => {
-      this.#addLengthText()
-    })
-
-    this.on('modified', (e) => {
-      this.#addLengthText()
-    })
-
-    this.on('scaling', (e) => {
-      this.#addLengthText()
-    })
-
-    this.on('moving', () => {
-      this.#addLengthText()
-    })
-  }
-  #addLengthText() {
-    if (this.#text.length > 0) {
-      this.#text.forEach((text) => {
-        this.canvas.remove(text)
-      })
-      this.#text = []
-    }
-
-    if (!this.#viewLengthText) {
-      return
-    }
-
-    const scaleX = this.scaleX
-    const scaleY = this.scaleY
-
-    const lines = [
-      {
-        start: { x: this.left, y: this.top },
-        end: { x: this.left + this.width * scaleX, y: this.top },
-      },
-      {
-        start: { x: this.left, y: this.top + this.height * scaleY },
-        end: { x: this.left, y: this.top },
-      },
-    ]
-
-    lines.forEach((line) => {
-      const dx = line.end.x - line.start.x
-      const dy = line.end.y - line.start.y
-      const length = Math.sqrt(dx * dx + dy * dy)
-
-      const text = new fabric.Text(length.toFixed(0), {
-        left: (line.start.x + line.end.x) / 2,
-        top: (line.start.y + line.end.y) / 2,
-        fontSize: this.#fontSize,
-        selectable: false,
-      })
-      this.#text.push(text)
-      this.canvas.add(text)
-    })
-  }
-}

src/hooks/useCanvas.js

@@ -5,7 +5,6 @@ import { actionHandler, anchorWrapper, polygonPositionHandler } from '@/util/can
 import { useRecoilState } from 'recoil'
 import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
-import QRect from '@/components/fabric/QRect'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { defineQLine } from '@/util/qline-utils'
 import { defineQPloygon } from '@/util/qpolygon-utils'
@@ -65,6 +64,7 @@ export function useCanvas(id) {
     if (canvas) {
       initialize()
       canvas?.on('object:added', onChange)
+      canvas?.on('object:added', addEventOnObject)
       canvas?.on('object:modified', onChange)
       canvas?.on('object:removed', onChange)
       canvas?.on('mouse:move', drawMouseLines)
@@ -93,6 +93,21 @@ export function useCanvas(id) {
     canvas?.off('mouse:down', handleMouseDown)
   }
 
+  const addEventOnObject = (e) => {
+    const target = e.target
+    if (target.name === 'cell') {
+      target.on('mousedown', () => {
+        target.set({ fill: 'red' })
+      })
+    }
+
+    if (target.name === 'trestle') {
+      target.on('mousedown', () => {
+        target.set({ strokeWidth: 5 })
+      })
+    }
+  }
+
   /**
    * 마우스 포인터의 가이드라인을 제거합니다.
    */
@@ -116,7 +131,6 @@ export function useCanvas(id) {
     fabric.QPolygon = QPolygon
     QPolygon.prototype.canvas = canvas
     QLine.prototype.canvas = canvas
-    QRect.prototype.canvas = canvas
     defineQLine()
     defineQPloygon()
   }

src/hooks/useMode.js

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react'
-import QRect from '@/components/fabric/QRect'
 import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util'
 import { useRecoilState } from 'recoil'
 
@@ -615,27 +614,6 @@ export function useMode() {
       rect.set({ width: Math.abs(origX - pointer.x) })
       rect.set({ height: Math.abs(origY - pointer.y) })
     })
-
-    canvas.on('mouse:up', function (o) {
-      const pointer = canvas.getPointer(o.e)
-      const qRect = new QRect({
-        left: origX,
-        top: origY,
-        originX: 'left',
-        originY: 'top',
-        width: pointer.x - origX,
-        height: pointer.y - origY,
-        angle: 0,
-        viewLengthText: true,
-        fill: 'transparent',
-        stroke: 'black',
-        transparentCorners: false,
-        fontSize: fontSize,
-      })
-      canvas.remove(rect)
-      canvas.add(qRect)
-      isDown = false
-    })
   }
 
   /**
@@ -1114,7 +1092,7 @@ export function useMode() {
    *벽 지붕 외곽선 생성 polygon을 입력받아 만들기
    */
   const handleOuterlinesTest2 = (polygon, offset = 71) => {
-    const offsetPoints = offsetPolygon(polygon.points, 50)
+    const offsetPoints = offsetPolygon(polygon.points, offset)
 
     const roof = makePolygon(
       offsetPoints.map((point) => {