Merge pull request '점그리드 다시 표시' (#689) from dev into dev-deploy

Reviewed-on: #689

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) =>
+          {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 key={option.id} className={`check-btn ${option.selected ? 'act' : ''}`} onClick={(e) => onClickOption(option)}>
+            </button>
-                <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({
+      const canvasWidth = canvas.getWidth()
-        radius: 2,
+      const canvasHeight = canvas.getHeight()
-        fill: 'red',
+      const currentZoom = canvas.getZoom()
-        strokeWidth: 0.7,
+      const viewportTransform = canvas.viewportTransform
-        originX: 'center',
-        originY: 'center',
-        selectable: false,
-        lockMovementX: true,
-        lockMovementY: true,
-        lockRotation: true,
-        lockScalingX: true,
-        lockScalingY: true,
-      })
 
-      const patternSourceCanvas = new fabric.StaticCanvas(null, {
+      const visibleLeft = -viewportTransform[4] / currentZoom
-        width: patternData.gridHorizon,
+      const visibleTop = -viewportTransform[5] / currentZoom
-        height: patternData.gridVertical,
+      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({
+      const horizontalCount = Math.ceil((gridRight - gridLeft) / patternData.gridHorizon) + 1
-        left: patternSourceCanvas.width / 2,
+      const verticalCount = Math.ceil((gridBottom - gridTop) / patternData.gridVertical) + 1
-        top: patternSourceCanvas.height / 2,
-      })
 
-      patternSourceCanvas.renderAll()
+      for (let i = 0; i < horizontalCount; i++) {
-
+        for (let j = 0; j < verticalCount; j++) {
-      const pattern = new fabric.Pattern({
+          const dot = new fabric.Circle({
-        source: patternSourceCanvas.getElement(),
+            left: gridLeft + i * patternData.gridHorizon,
-        repeat: 'repeat',
+            top: gridTop + j * patternData.gridVertical,
-      })
+            radius: 2,
-
+            fill: 'red',
-      const backgroundPolygon = new fabric.Polygon(
+            stroke: null,
-        [
+            strokeWidth: 0,
-          { x: -1500, y: -1500 },
+            originX: 'center',
-          { x: 2500, y: -1500 },
+            originY: 'center',
-          { x: 2500, y: 2500 },
+            selectable: true,
-          { x: -1500, y: 2500 },
+            lockMovementX: true,
-        ],
+            lockMovementY: true,
-        {
+            lockRotation: true,
-          fill: pattern,
+            lockScalingX: true,
-          selectable: false,
+            lockScalingY: true,
-          name: 'dotGrid',
+            name: 'dotGrid',
-          visible: isGridDisplay,
+            padding: GRID_PADDING,
-        },
+            visible: isGridDisplay,
-      )
+          })
-
+          canvas.add(dot)
-      canvas.add(backgroundPolygon)
+          dot.sendToBack()
-      backgroundPolygon.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,