dormeroffset 기능 추가

src/components/floor-plan/modal/object/DormerOffset.jsx

@@ -1,9 +1,11 @@
+import { useState, useEffect, useRef } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { usePopup } from '@/hooks/usePopup'
-import { useState } from 'react'
+import { useObjectBatch } from '@/hooks/object/useObjectBatch'
+import { canvasState } from '@/store/canvasAtom'
 
 export default function DormerOffset(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -12,6 +14,31 @@ export default function DormerOffset(props) {
   const { closePopup } = usePopup()
   const [arrow1, setArrow1] = useState(null)
   const [arrow2, setArrow2] = useState(null)
+  const arrow1LengthRef = useRef()
+  const arrow2LengthRef = useRef()
+
+  const canvas = useRecoilValue(canvasState)
+  const { dormerOffsetKeyEvent, dormerOffset } = useObjectBatch({})
+
+  useEffect(() => {
+    if (canvas) {
+      dormerOffsetKeyEvent(setArrow1, setArrow2)
+    }
+  }, [])
+
+  const handleOffsetDormer = () => {
+    const length1 = arrow1LengthRef.current.value
+    const length2 = arrow2LengthRef.current.value
+
+    dormerOffset(arrow1, arrow2, length1, length2)
+
+    setArrow1(null)
+    setArrow2(null)
+    arrow1LengthRef.current.value = ''
+    arrow2LengthRef.current.value = ''
+
+    // closePopup(id)
+  }
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
@@ -29,44 +56,40 @@ export default function DormerOffset(props) {
                 <p className="mb5">{getMessage('length')}</p>
                 <div className="input-move-wrap mb5">
                   <div className="input-move">
-                    <input type="text" className="input-origin" defaultValue={0} />
+                    <input type="text" className="input-origin" ref={arrow1LengthRef} placeholder="0" />
                   </div>
                   <span>mm</span>
                   <div className="direction-move-wrap">
                     <button
-                      className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
+                      className={`direction up ${arrow1 === 'up' ? 'act' : ''}`}
                       onClick={() => {
-                        setArrow1('↑')
+                        setArrow1('up')
-                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
                       }}
                     ></button>
                     <button
-                      className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
+                      className={`direction down ${arrow1 === 'down' ? 'act' : ''}`}
                       onClick={() => {
-                        setArrow1('↓')
+                        setArrow1('down')
-                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
                       }}
                     ></button>
                   </div>
                 </div>
                 <div className="input-move-wrap">
                   <div className="input-move">
-                    <input type="text" className="input-origin" defaultValue={0} />
+                    <input type="text" className="input-origin" ref={arrow2LengthRef} placeholder="0" />
                   </div>
                   <span>mm</span>
                   <div className="direction-move-wrap">
                     <button
-                      className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
+                      className={`direction left ${arrow2 === 'left' ? 'act' : ''}`}
                       onClick={() => {
-                        setArrow2('←')
+                        setArrow2('left')
-                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
                       }}
                     ></button>
                     <button
-                      className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
+                      className={`direction right ${arrow2 === 'right' ? 'act' : ''}`}
                       onClick={() => {
-                        setArrow2('→')
+                        setArrow2('right')
-                        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
                       }}
                     ></button>
                   </div>
@@ -75,7 +98,9 @@ export default function DormerOffset(props) {
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
+            <button className="btn-frame modal act" onClick={handleOffsetDormer}>
+              {getMessage('modal.common.save')}
+            </button>
           </div>
         </div>
       </div>

src/hooks/object/useObjectBatch.js

@@ -16,7 +16,7 @@ import { fontSelector } from '@/store/fontAtom'
 export function useObjectBatch({ isHidden, setIsHidden }) {
   const { getMessage } = useMessage()
   const canvas = useRecoilValue(canvasState)
-  const { addCanvasMouseEventListener, initEvent } = useEvent()
+  const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useEvent()
   const { swalFire } = useSwal()
   const { drawDirectionArrow } = usePolygon()
   const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
@@ -963,6 +963,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
     })
     canvas?.add(reGroup)
     canvas?.remove(groupObj)
+
+    return reGroup
   }
 
   const moveObjectBatch = () => {
@@ -986,6 +988,30 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
     }
   }
 
+  const dormerOffsetKeyEvent = (setArrow1, setArrow2) => {
+    addDocumentEventListener('keydown', document, (e) => {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        const keyEvent = e.key === 'ArrowDown' ? 'down' : 'up'
+        setArrow1(keyEvent)
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        const keyEvent = e.key === 'ArrowLeft' ? 'left' : 'right'
+        setArrow2(keyEvent)
+      }
+    })
+  }
+
+  const dormerOffset = (arrow1, arrow2, length1, length2) => {
+    length1 = parseInt(length1) / 10
+    length2 = parseInt(length2) / 10
+
+    const dormer = canvas.getActiveObject()
+    if (length1) dormer.top = arrow1 === 'down' ? dormer.top + length1 : dormer.top - length1
+    if (length2) dormer.left = arrow2 === 'left' ? dormer.left - length2 : dormer.left + length2
+
+    const newDormer = reGroupObject(dormer)
+    canvas?.setActiveObject(newDormer)
+  }
+
   return {
     applyOpeningAndShadow,
     applyDormers,
@@ -993,5 +1019,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
     splitDormerPentagon,
     resizeObjectBatch,
     moveObjectBatch,
+    dormerOffsetKeyEvent,
+    dormerOffset,
   }
 }