점그리드 다시 표시

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

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

src/hooks/useEvent.js

@@ -218,7 +218,12 @@ 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,