src/components/floor-plan/modal/grid/GridCopy.jsx

@@ -4,11 +4,9 @@ import { usePopup } from '@/hooks/usePopup'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { useState } from 'react'
-import { canvasState, currentObjectState } from '@/store/canvasAtom'
+import { currentObjectState } from '@/store/canvasAtom'
 import { useGrid } from '@/hooks/common/useGrid'
-import { gridColorState } from '@/store/gridAtom'
-import { gridDisplaySelector } from '@/store/settingAtom'
-const GRID_PADDING = 5
+
 export default function GridCopy(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
@@ -17,40 +15,10 @@ export default function GridCopy(props) {
   const [length, setLength] = useState('0')
   const [arrow, setArrow] = useState(null)
   const currentObject = useRecoilValue(currentObjectState)
-  const canvas = useRecoilValue(canvasState)
-  const gridColor = useRecoilValue(gridColorState)
-  const isGridDisplay = useRecoilValue(gridDisplaySelector)
+  const { copy } = useGrid()
   const handleApply = () => {
     copy(currentObject, ['↑', '←'].includes(arrow) ? (+length * -1) / 10 : +length / 10)
   }
-
-  const copy = (object, length) => {
-    const lineStartX = object.direction === 'vertical' ? object.x1 + length : 0
-    const lineEndX = object.direction === 'vertical' ? object.x2 + length : canvas.width
-    const lineStartY = object.direction === 'vertical' ? 0 : object.y1 + length
-    const lineEndY = object.direction === 'vertical' ? canvas.width : object.y1 + length
-
-    const line = new fabric.Line([lineStartX, lineStartY, lineEndX, lineEndY], {
-      stroke: gridColor,
-      strokeWidth: 1,
-      selectable: true,
-      lockMovementX: true,
-      lockMovementY: true,
-      lockRotation: true,
-      lockScalingX: true,
-      lockScalingY: true,
-      strokeDashArray: [5, 2],
-      opacity: 0.3,
-      padding: GRID_PADDING,
-      direction: object.direction,
-      visible: isGridDisplay,
-      name: object.name,
-    })
-
-    canvas.add(line)
-    canvas.setActiveObject(line)
-    canvas.renderAll()
-  }
   return (
     <WithDraggable isShow={true} pos={pos} className="xm">
       <WithDraggable.Header title={getMessage('modal.grid.copy')} onClose={() => closePopup(id)} />

src/components/floor-plan/modal/grid/GridMove.jsx

@@ -6,6 +6,7 @@ import { contextPopupPositionState } from '@/store/popupAtom'
 import { useCanvas } from '@/hooks/useCanvas'
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
+import { useGrid } from '@/hooks/common/useGrid'
 import { useSwal } from '@/hooks/useSwal'
 import { set } from 'react-hook-form'
 
@@ -16,6 +17,7 @@ export default function GridMove(props) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const { swalFire } = useSwal()
+  const { move } = useGrid()
   const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
   const [isAll, setIsAll] = useState(false)
   const [verticalSize, setVerticalSize] = useState('0')
@@ -67,16 +69,6 @@ export default function GridMove(props) {
     handleClose()
   }
 
-  const move = (object, x, y) => {
-    object.set({
-      ...object,
-      x1: object.direction === 'vertical' ? object.x1 + x : 0,
-      x2: object.direction === 'vertical' ? object.x1 + x : canvas.width,
-      y1: object.direction === 'vertical' ? 0 : object.y1 + y,
-      y2: object.direction === 'vertical' ? canvas.height : object.y1 + y,
-    })
-  }
-
   const handleClose = () => {
     closePopup(id)
   }