From 76f4ed1cf9e61fd28615940d0d340c17d2ca5a19 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Tue, 27 Aug 2024 13:36:47 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8F=84=EB=A8=B8=20=EC=83=9D=EC=84=B1?=
 =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EA=B7=B8?=
 =?UTF-8?q?=EB=A6=AC=EB=93=9C=20=EC=84=A4=EC=A0=95=20background=20?=
 =?UTF-8?q?=EB=92=A4=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Roof2.jsx         |  3 ++
 src/components/SettingsModal.jsx | 16 +++++++++--
 src/hooks/useMode.js             | 47 ++++++++++++++++++--------------
 3 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index 794c0265..217d0521 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -632,6 +632,9 @@ export default function Roof2(props) {
             <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"
               color={`${mode === Mode.ADSORPTION_POINT ? 'primary' : 'default'}`}
diff --git a/src/components/SettingsModal.jsx b/src/components/SettingsModal.jsx
index 2ae6fae6..3cf9997b 100644
--- a/src/components/SettingsModal.jsx
+++ b/src/components/SettingsModal.jsx
@@ -56,7 +56,12 @@ export default function SettingsModal(props) {
           {
             stroke: 'gray',
             strokeWidth: 1,
-            selectable: false,
+            selectable: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
             name: 'guideLine',
           },
         )
@@ -70,7 +75,12 @@ export default function SettingsModal(props) {
           {
             stroke: 'gray',
             strokeWidth: 1,
-            selectable: false,
+            selectable: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
             name: 'guideLine',
           },
         )
@@ -137,7 +147,9 @@ export default function SettingsModal(props) {
           name: 'guideDot',
         },
       )
+
       canvasProps.add(backgroundPolygon)
+      backgroundPolygon.sendToBack()
       canvasProps.renderAll()
 
       const recoilObj = {
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 5666dabd..f5fe698e 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -802,31 +802,29 @@ export function useMode() {
         changeMode(canvas, Mode.EDIT)
       })
     },
-    drawRectMode: () => {
+    drawRectMode: (o) => {
       let rect, isDown, origX, origY
-      canvas.on('mouse:down', function (o) {
-        isDown = true
-        const pointer = canvas.getPointer(o.e)
-        origX = pointer.x
-        origY = pointer.y
-        rect = new fabric.Rect({
-          left: origX,
-          top: origY,
-          originX: 'left',
-          originY: 'top',
-          width: pointer.x - origX,
-          height: pointer.y - origY,
-          angle: 0,
-          fill: 'transparent',
-          stroke: 'black',
-          transparentCorners: false,
-        })
-        canvas.add(rect)
+      isDown = true
+      const pointer = canvas.getPointer(o.e)
+      origX = pointer.x
+      origY = pointer.y
+      rect = new fabric.Rect({
+        left: origX,
+        top: origY,
+        originX: 'left',
+        originY: 'top',
+        width: pointer.x - origX,
+        height: pointer.y - origY,
+        angle: 0,
+        fill: 'transparent',
+        stroke: 'black',
+        transparentCorners: false,
       })
+      canvas.add(rect)
 
-      canvas.on('mouse:move', function (o) {
+      canvas.on('mouse:move', function (e) {
         if (!isDown) return
-        const pointer = canvas.getPointer(o.e)
+        const pointer = canvas.getPointer(e.e)
         if (origX > pointer.x) {
           rect.set({ left: Math.abs(pointer.x) })
         }
@@ -837,6 +835,13 @@ 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) {
+        isDown = false
+        canvas.off('mouse:move')
+        canvas.off('mouse:up')
+        setMode(Mode.DEFAULT)
+      })
     },
     // 흡착점 추가
     adsorptionPoint(o) {