From 589bb9d888b99768be153a8c0a8dc89ec3fe238a Mon Sep 17 00:00:00 2001
From: Daybrush <younkue.choi@navercorp.com>
Date: Sat, 3 Jun 2023 02:37:26 +0900
Subject: [PATCH] feat: add isDisplayGridGuidelines prop #935

---
 packages/react-moveable/src/ables/Snappable.tsx       |  1 +
 .../src/ables/snappable/getTotalGuidelines.ts         | 11 ++++++++---
 packages/react-moveable/src/types.ts                  |  5 +++++
 .../stories/5-Snap&Bound/ReactSnapGridApp.tsx         |  1 +
 packages/react-moveable/stories/controls/default.ts   |  5 +++++
 5 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/react-moveable/src/ables/Snappable.tsx b/packages/react-moveable/src/ables/Snappable.tsx
index a8940a82d..3db650c3a 100644
--- a/packages/react-moveable/src/ables/Snappable.tsx
+++ b/packages/react-moveable/src/ables/Snappable.tsx
@@ -538,6 +538,7 @@ export default {
         "snapGridHeight",
         "isDisplaySnapDigit",
         "isDisplayInnerSnapDigit",
+        "isDisplayGridGuidelines",
         "snapDigit",
         "snapThreshold",
         "snapRenderThreshold",
diff --git a/packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts b/packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts
index fed90b4aa..6213ee2a6 100644
--- a/packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts
+++ b/packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts
@@ -7,7 +7,7 @@ import {
     SnapElementRect,
     NumericPosGuideline,
 } from "../../types";
-import { getRect, getAbsolutePosesByState, getRefTarget, calculateInversePosition } from "../../utils";
+import { getRect, getAbsolutePosesByState, getRefTarget, calculateInversePosition, prefix } from "../../utils";
 import {
     splitSnapDirectionPoses, getSnapDirections,
     HORIZONTAL_NAMES_MAP, VERTICAL_NAMES_MAP, calculateContainerPos,
@@ -38,6 +38,7 @@ export function getTotalGuidelines(
         snapGridWidth = 0,
         snapGridHeight = 0,
         maxSnapElementGuidelineDistance = Infinity,
+        isDisplayGridGuidelines,
     } = moveable.props;
     const { top, left, bottom, right } = getRect(getAbsolutePosesByState(moveable.state));
     const targetRect = { top, left, bottom, right, center: (left + right) / 2, middle: (top + bottom) / 2 };
@@ -66,6 +67,7 @@ export function getTotalGuidelines(
         clientLeft,
         clientTop,
         snapOffset,
+        isDisplayGridGuidelines,
     ));
 
 
@@ -248,6 +250,7 @@ export function getGridGuidelines(
     clientLeft = 0,
     clientTop = 0,
     snapOffset: { left: number, top: number, right: number, bottom: number },
+    isDisplayGridGuidelines?: boolean,
 ): SnapGuideline[] {
     const guidelines: SnapGuideline[] = [];
     const {
@@ -262,8 +265,9 @@ export function getGridGuidelines(
                     snapOffsetLeft,
                     throttle(pos - clientTop + snapOffsetTop, 0.1),
                 ],
+                className: prefix("grid-guideline"),
                 size: containerWidth!,
-                hide: true,
+                hide: !isDisplayGridGuidelines,
             });
         }
     }
@@ -275,8 +279,9 @@ export function getGridGuidelines(
                     throttle(pos - clientLeft + snapOffsetLeft, 0.1),
                     snapOffsetTop,
                 ],
+                className: prefix("grid-guideline"),
                 size: containerHeight!,
-                hide: true,
+                hide: !isDisplayGridGuidelines,
             });
         }
     }
diff --git a/packages/react-moveable/src/types.ts b/packages/react-moveable/src/types.ts
index b422b8bfc..d711a4717 100644
--- a/packages/react-moveable/src/types.ts
+++ b/packages/react-moveable/src/types.ts
@@ -2535,6 +2535,11 @@ export interface SnappableOptions {
      * @default 0
      */
     snapDigit?: number;
+    /**
+     * Whether to show guideline of snap by grid
+     * @default false
+     */
+    isDisplayGridGuidelines?: boolean;
     /**
      * If width size is greater than 0, you can vertical snap to the grid.
      * @default 0 (0 is not used)
diff --git a/packages/react-moveable/stories/5-Snap&Bound/ReactSnapGridApp.tsx b/packages/react-moveable/stories/5-Snap&Bound/ReactSnapGridApp.tsx
index dc1fef9e6..d53245726 100644
--- a/packages/react-moveable/stories/5-Snap&Bound/ReactSnapGridApp.tsx
+++ b/packages/react-moveable/stories/5-Snap&Bound/ReactSnapGridApp.tsx
@@ -30,6 +30,7 @@ export default function App(props: Record<string, any>) {
                     snappable={props.snappable}
                     snapGridWidth={props.snapGridWidth}
                     snapGridHeight={props.snapGridHeight}
+                    isDisplayGridGuidelines={props.isDisplayGridGuidelines}
                     onDrag={e => {
                         e.target.style.transform = e.transform;
                     }}
diff --git a/packages/react-moveable/stories/controls/default.ts b/packages/react-moveable/stories/controls/default.ts
index a43ffda93..7fe5f765d 100644
--- a/packages/react-moveable/stories/controls/default.ts
+++ b/packages/react-moveable/stories/controls/default.ts
@@ -260,6 +260,11 @@ export const DEFAULT_SNAP_GRID_CONTROLS = {
         description: makeLink("Snappable", "snappable"),
         defaultValue: true,
     }),
+    isDisplayGridGuidelines: makeArgType({
+        type: "boolean",
+        description: makeLink("Snappable", "isDisplayGridGuidelines"),
+        defaultValue: false,
+    }),
     snapGridWidth: makeArgType({
         type: "number",
         description: makeLink("Snappable", "snapGridWidth"),