도머 생성모드 추가 및 그리드 설정 background 뒤로

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'}`}

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 = {

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
-        isDown = true
+      const pointer = canvas.getPointer(o.e)
-        const pointer = canvas.getPointer(o.e)
+      origX = pointer.x
-        origX = pointer.x
+      origY = pointer.y
-        origY = pointer.y
+      rect = new fabric.Rect({
-        rect = new fabric.Rect({
+        left: origX,
-          left: origX,
+        top: origY,
-          top: origY,
+        originX: 'left',
-          originX: 'left',
+        originY: 'top',
-          originY: 'top',
+        width: pointer.x - origX,
-          width: pointer.x - origX,
+        height: pointer.y - origY,
-          height: pointer.y - origY,
+        angle: 0,
-          angle: 0,
+        fill: 'transparent',
-          fill: 'transparent',
+        stroke: 'black',
-          stroke: 'black',
+        transparentCorners: false,
-          transparentCorners: false,
-        })
-        canvas.add(rect)
       })
+      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) {