From 97d89de0ee14ecc7d4f9b8d1c750fbb5db91730e Mon Sep 17 00:00:00 2001
From: Daybrush <younkue.choi@navercorp.com>
Date: Fri, 21 Apr 2023 01:56:00 +0900
Subject: [PATCH] fix: fix snapGrid's offset #897

---
 .../src/ables/snappable/getTotalGuidelines.ts | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts b/packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts
index 6eb07acc6..0720261b7 100644
--- a/packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts
+++ b/packages/react-moveable/src/ables/snappable/getTotalGuidelines.ts
@@ -49,14 +49,6 @@ export function getTotalGuidelines(
             moveable, targetRect, snapThreshold,
         ));
     }
-    totalGuidelines.push(...getGridGuidelines(
-        snapGridWidth,
-        snapGridHeight,
-        overflow ? containerWidth! : containerClientWidth!,
-        overflow ? containerHeight! : containerClientHeight!,
-        clientLeft,
-        clientTop,
-    ));
     const snapOffset = {
         ...(state.snapOffset || {
             left: 0,
@@ -66,6 +58,16 @@ export function getTotalGuidelines(
         }),
     };
 
+    totalGuidelines.push(...getGridGuidelines(
+        snapGridWidth,
+        snapGridHeight,
+        overflow ? containerWidth! : containerClientWidth!,
+        overflow ? containerHeight! : containerClientHeight!,
+        clientLeft,
+        clientTop,
+        snapOffset,
+    ));
+
 
     if (hasFixed) {
         const { left, top } = containerClientRect;
@@ -245,14 +247,21 @@ export function getGridGuidelines(
     containerHeight: number,
     clientLeft = 0,
     clientTop = 0,
+    snapOffset: { left: number, top: number, right: number, bottom: number },
 ): SnapGuideline[] {
     const guidelines: SnapGuideline[] = [];
-
+    const {
+        left: snapOffsetLeft,
+        top: snapOffsetTop,
+    } = snapOffset;
     if (snapGridHeight) {
         for (let pos = 0; pos <= containerHeight; pos += snapGridHeight) {
             guidelines.push({
                 type: "horizontal",
-                pos: [0, throttle(pos - clientTop, 0.1)],
+                pos: [
+                    snapOffsetLeft,
+                    throttle(pos - clientTop + snapOffsetTop, 0.1),
+                ],
                 size: containerWidth!,
                 hide: true,
             });
@@ -262,7 +271,10 @@ export function getGridGuidelines(
         for (let pos = 0; pos <= containerWidth; pos += snapGridWidth) {
             guidelines.push({
                 type: "vertical",
-                pos: [throttle(pos - clientLeft, 0.1), 0],
+                pos: [
+                    throttle(pos - clientLeft + snapOffsetLeft, 0.1),
+                    snapOffsetTop,
+                ],
                 size: containerHeight!,
                 hide: true,
             });