그리드표시 임의 그리드 및 흡착점 추가

src/hooks/useAdsorptionPoint.js

@@ -2,13 +2,14 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import { adsorptionPointAddModeState, adsorptionPointModeState, adsorptionRangeState, canvasState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'
 import { useMouse } from '@/hooks/useMouse'
+import { gridDisplaySelector } from '@/store/settingAtom'
 
 export function useAdsorptionPoint() {
   const canvas = useRecoilValue(canvasState)
   const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
   const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
   const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState)
-
+  const isGridDisplay = useRecoilValue(gridDisplaySelector)
   const { getIntersectMousePoint } = useMouse()
 
   const getAdsorptionPoints = () => {
@@ -28,6 +29,7 @@ export function useAdsorptionPoint() {
       y: pointer.y,
       selectable: true,
       name: 'adsorptionPoint',
+      visible: isGridDisplay,
     })
 
     canvas.add(adsorptionPoint)

src/hooks/useEvent.js

@@ -6,6 +6,7 @@ import { calculateDistance, calculateIntersection, distanceBetweenPoints, findCl
 import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
 import { useDotLineGrid } from '@/hooks/useDotLineGrid'
 import { useTempGrid } from '@/hooks/useTempGrid'
+import { gridDisplaySelector } from '@/store/settingAtom'
 
 export function useEvent() {
   const canvas = useRecoilValue(canvasState)

src/hooks/useTempGrid.js

@@ -1,11 +1,13 @@
 import { canvasState, tempGridModeState } from '@/store/canvasAtom'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { gridColorState } from '@/store/gridAtom'
+import { gridDisplaySelector } from '@/store/settingAtom'
 
 export function useTempGrid() {
   const canvas = useRecoilValue(canvasState)
   const gridColor = useRecoilValue(gridColorState)
   const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
+  const isGridDisplay = useRecoilValue(gridDisplaySelector)
   const tempGridModeStateLeftClickEvent = (e) => {
     //임의 그리드 모드일 경우
     let pointer = canvas.getPointer(e.e)
@@ -22,6 +24,7 @@ export function useTempGrid() {
       strokeDashArray: [5, 2],
       opacity: 0.3,
       direction: 'vertical',
+      visible: isGridDisplay,
       name: 'tempGrid',
     })
 
@@ -48,6 +51,7 @@ export function useTempGrid() {
       strokeDashArray: [5, 2],
       opacity: 0.3,
       name: 'tempGrid',
+      visible: isGridDisplay,
       direction: 'horizontal',
     })