Fix drag boundary not updating when board is moved on screen

[juniperab]

When allowDragOutsideBoard is false, pieces cannot be dragged outside of a bounding rectangle defined over the board's position on the screen. However, after the board has been rendered, this bounding rectangle is not updated when the screen is scrolled, the board is resized, or any other change in the DOM causes it's position on the screen to change.

This change simplifies the manner in which the board's bounds are calculated and stored. Instead of trying to calculate and memoize the position of the board on the screen in advance, the board's bounds are calculated only when the dragging state changes.

Example of Incorrect Behaviour

This example from the Storybook shows how the bounding rectangle restricting where a piece may be dragged is not updated when the element moves on the screen. Here I have moved the board by manipulating other elements in the DOM, indicating that resize and scroll are not the only types of events that could trigger this behaviour.

before.mov

Example of Improved Behaviour

This example from the Storybook after this change is applied shows that the bounding rectangle restricting where a piece may be dragged continues to match the visible location of the board when the board is moved from its initial position.

after.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-chessboard	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 4, 2024 9:44pm

[Clariity]

Great problem explanation and pull request, unfortunately the structure of the package has changed since you raised the pull request, with the addition of the ability to drag spare pieces in from outside of the board, as such, this PR may need a slight rewrite, and confirmation that the problem still exists in the latest version