src/components/floor-plan/modal/setting01/GridOption.jsx

@@ -152,12 +152,16 @@ export default function GridOption(props) {
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.grid')}</h3>
         <div className="flex-check-box for2">
-          {gridOptions?.map((option) => (
+          {gridOptions?.map((option) =>
-            <button key={option.id} className={`check-btn ${option.selected ? 'act' : ''}`} onClick={(e) => onClickOption(option)}>
+            option.id === 2 ? (
-              <span className="check-area"></span>
+              <></>
-              <span className="title-area">{getMessage(option.name)}</span>
+            ) : (
-            </button>
+              <button key={option.id} className={`check-btn ${option.selected ? 'act' : ''}`} onClick={(e) => onClickOption(option)}>
-          ))}
+                <span className="check-area"></span>
+                <span className="title-area">{getMessage(option.name)}</span>
+              </button>
+            ),
+          )}
         </div>
       </div>
       {/*<ColorPickerModal {...colorPickerProps} />*/}

src/hooks/common/useGrid.js

@@ -39,50 +39,56 @@ export function useGrid() {
     //const verticalInterval = interval.verticalInterval
 
     if (patternData.dotGridDisplay) {
-      const canvasWidth = canvas.getWidth()
+      const circle = new fabric.Circle({
-      const canvasHeight = canvas.getHeight()
+        radius: 2,
-      const currentZoom = canvas.getZoom()
+        fill: 'red',
-      const viewportTransform = canvas.viewportTransform
+        strokeWidth: 0.7,
+        originX: 'center',
+        originY: 'center',
+        selectable: false,
+        lockMovementX: true,
+        lockMovementY: true,
+        lockRotation: true,
+        lockScalingX: true,
+        lockScalingY: true,
+      })
 
-      const visibleLeft = -viewportTransform[4] / currentZoom
+      const patternSourceCanvas = new fabric.StaticCanvas(null, {
-      const visibleTop = -viewportTransform[5] / currentZoom
+        width: patternData.gridHorizon,
-      const visibleRight = visibleLeft + canvasWidth / currentZoom
+        height: patternData.gridVertical,
-      const visibleBottom = visibleTop + canvasHeight / currentZoom
+      })
 
-      const padding = 200
+      patternSourceCanvas.add(circle)
-      const gridLeft = visibleLeft - padding
-      const gridTop = visibleTop - padding
-      const gridRight = visibleRight + padding
-      const gridBottom = visibleBottom + padding
 
-      const horizontalCount = Math.ceil((gridRight - gridLeft) / patternData.gridHorizon) + 1
+      circle.set({
-      const verticalCount = Math.ceil((gridBottom - gridTop) / patternData.gridVertical) + 1
+        left: patternSourceCanvas.width / 2,
+        top: patternSourceCanvas.height / 2,
+      })
 
-      for (let i = 0; i < horizontalCount; i++) {
+      patternSourceCanvas.renderAll()
-        for (let j = 0; j < verticalCount; j++) {
+
-          const dot = new fabric.Circle({
+      const pattern = new fabric.Pattern({
-            left: gridLeft + i * patternData.gridHorizon,
+        source: patternSourceCanvas.getElement(),
-            top: gridTop + j * patternData.gridVertical,
+        repeat: 'repeat',
-            radius: 2,
+      })
-            fill: 'red',
+
-            stroke: null,
+      const backgroundPolygon = new fabric.Polygon(
-            strokeWidth: 0,
+        [
-            originX: 'center',
+          { x: -1500, y: -1500 },
-            originY: 'center',
+          { x: 2500, y: -1500 },
-            selectable: true,
+          { x: 2500, y: 2500 },
-            lockMovementX: true,
+          { x: -1500, y: 2500 },
-            lockMovementY: true,
+        ],
-            lockRotation: true,
+        {
-            lockScalingX: true,
+          fill: pattern,
-            lockScalingY: true,
+          selectable: false,
-            name: 'dotGrid',
+          name: 'dotGrid',
-            padding: GRID_PADDING,
+          visible: isGridDisplay,
-            visible: isGridDisplay,
+        },
-          })
+      )
-          canvas.add(dot)
+
-          dot.sendToBack()
+      canvas.add(backgroundPolygon)
-        }
+      backgroundPolygon.sendToBack()
-      }
       canvas.renderAll()
     }
 

src/hooks/useEvent.js

@@ -218,12 +218,7 @@ export function useEvent() {
         })
       })
 
-      const dotGridPoints = canvas.getObjects()
-        .filter((obj) => obj.name === 'dotGrid')
-        .map((obj) => ({ x: obj.left, y: obj.top }))
-
       let adsorptionPoints = [
-        ...dotGridPoints,
         ...getAdsorptionPoints(),
         ...roofAdsorptionPoints.current,
         ...otherAdsorptionPoints,