From d40c985ec52b30291f2fb70c040d4562f0b675c6 Mon Sep 17 00:00:00 2001
From: Juniper Alanna Berry <101523445+juniperab@users.noreply.github.com>
Date: Sun, 4 Aug 2024 17:19:11 -0400
Subject: [PATCH] Fix drag boundary not updating when board is moved on screen

---
 src/chessboard/components/CustomDragLayer.tsx | 12 +++++++---
 src/chessboard/index.tsx                      | 24 ++-----------------
 2 files changed, 11 insertions(+), 25 deletions(-)

diff --git a/src/chessboard/components/CustomDragLayer.tsx b/src/chessboard/components/CustomDragLayer.tsx
index cbe4ff3..cffcf25 100644
--- a/src/chessboard/components/CustomDragLayer.tsx
+++ b/src/chessboard/components/CustomDragLayer.tsx
@@ -1,14 +1,14 @@
-import { ReactNode, useCallback } from "react";
+import { ReactNode, RefObject, useCallback, useEffect, useState } from "react";
 import { useDragLayer, XYCoord } from "react-dnd";
 
 import { useChessboard } from "../context/chessboard-context";
 import { CustomPieceFn, Piece, Square } from "../types";
 
 export type CustomDragLayerProps = {
-  boardContainer: { left: number; top: number };
+  boardRef: RefObject<HTMLObjectElement>;
 };
 
-export function CustomDragLayer({ boardContainer }: CustomDragLayerProps) {
+export function CustomDragLayer({ boardRef }: CustomDragLayerProps) {
   const { boardWidth, chessPieces, id, snapToCursor, allowDragOutsideBoard } =
     useChessboard();
 
@@ -31,6 +31,12 @@ export function CustomDragLayer({ boardContainer }: CustomDragLayerProps) {
     isDragging: boolean;
   } = collectedProps;
 
+  const [boardContainer, setBoardContainer] = useState({ left: 0, top: 0 })
+  useEffect(() => {
+    const rect = boardRef.current?.getBoundingClientRect()
+    setBoardContainer({ left: rect?.left || 0, top: rect?.top || 0 })
+  }, [boardRef.current, isDragging])
+
   const getItemStyle = useCallback(
     (clientOffset: XYCoord | null, sourceClientOffset: XYCoord | null) => {
       if (!clientOffset || !sourceClientOffset) return { display: "none" };
diff --git a/src/chessboard/index.tsx b/src/chessboard/index.tsx
index 79eb0b3..7295b36 100644
--- a/src/chessboard/index.tsx
+++ b/src/chessboard/index.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { TouchBackend } from "react-dnd-touch-backend";
@@ -32,26 +32,7 @@ export const Chessboard = forwardRef<ClearPremoves, ChessboardProps>(
     const [backendSet, setBackendSet] = useState(false);
     const [isMobile, setIsMobile] = useState(false);
     const [boardWidth, setBoardWidth] = useState(props.boardWidth);
-
     const boardRef = useRef<HTMLObjectElement>(null);
-    const boardContainerRef = useRef<HTMLDivElement>(null);
-
-    const [boardContainerPos, setBoardContainerPos] = useState({
-      left: 0,
-      top: 0,
-    });
-
-    const metrics = useMemo(
-      () => boardRef.current?.getBoundingClientRect(),
-      [boardRef.current]
-    );
-
-    useEffect(() => {
-      setBoardContainerPos({
-        left: metrics?.left ? metrics?.left : 0,
-        top: metrics?.top ? metrics?.top : 0,
-      });
-    }, [metrics]);
 
     useEffect(() => {
       setIsMobile("ontouchstart" in window);
@@ -78,7 +59,6 @@ export const Chessboard = forwardRef<ClearPremoves, ChessboardProps>(
     return backendSet && clientWindow ? (
       <ErrorBoundary>
         <div
-          ref={boardContainerRef}
           style={{
             display: "flex",
             flexDirection: "column",
@@ -97,7 +77,7 @@ export const Chessboard = forwardRef<ClearPremoves, ChessboardProps>(
                 {...otherProps}
                 ref={ref}
               >
-                <CustomDragLayer boardContainer={boardContainerPos} />
+                <CustomDragLayer boardRef={boardRef} />
                 <Board />
               </ChessboardProvider>
             )}