feat: add isDisplayGridGuidelines prop #935

daybrush · Jun 2, 2023 · 589bb9d · 589bb9d
1 parent ad7ea7c
commit 589bb9d
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"),