From 1d57fcd7550d76e4f6bec2da7e93cf1e472d9c6d Mon Sep 17 00:00:00 2001
From: kirill pushkin <k1rilllavrinenko@yandex.ru>
Date: Mon, 10 Oct 2022 21:17:57 +0300
Subject: [PATCH 1/2] feat: made piece center move under cursor on dragStart

in some chessboard libs such as chessboard.js when you start dragging piece its center jumps right
under cursor. I made such behaivor in this lib, I think this helps to improve UI
---
 src/Chessboard/CustomDragLayer.js | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/Chessboard/CustomDragLayer.js b/src/Chessboard/CustomDragLayer.js
index c7d0c7b..ddc1d33 100644
--- a/src/Chessboard/CustomDragLayer.js
+++ b/src/Chessboard/CustomDragLayer.js
@@ -11,6 +11,10 @@ class CustomDragLayer extends Component {
       x: PropTypes.number.isRequired,
       y: PropTypes.number.isRequired
     }),
+    initialOffset: PropTypes.shape({
+      x: PropTypes.number.isRequired,
+      y: PropTypes.number.isRequired
+    }),
     isDragging: PropTypes.bool.isRequired,
     width: PropTypes.number,
     pieces: PropTypes.object,
@@ -26,14 +30,35 @@ class CustomDragLayer extends Component {
       item,
       id,
       currentOffset,
+      initialOffset,
       wasPieceTouched,
       pieces,
       sourceSquare
     } = this.props;
 
+    let dependOnCursorPosition = currentOffset ? {
+      x: currentOffset.x,
+      y: currentOffset.y
+    }
+      : null
+
+    if (item && currentOffset && initialOffset) {
+      const squareElement = document.querySelector(`[data-squareid=${item.source}]`)
+      const squareElementDOMRect = squareElement.getBoundingClientRect()
+      const squareWidth = width / 8
+
+      let dx = (squareWidth / 2) - (squareElementDOMRect.right - initialOffset.x)
+      let dy = (squareWidth / 2) - (squareElementDOMRect.bottom - initialOffset.y)
+
+      dependOnCursorPosition = {
+        x: currentOffset.x + dx,
+        y: currentOffset.y + dy
+      }
+    }
+
     return isDragging && item.board === id ? (
       <div style={layerStyles}>
-        <div style={getItemStyle(currentOffset, wasPieceTouched)}>
+        <div style={getItemStyle(dependOnCursorPosition, wasPieceTouched)}>
           {renderChessPiece({
             width,
             pieces,
@@ -52,6 +77,7 @@ function collect(monitor) {
   return {
     item: monitor.getItem(),
     currentOffset: monitor.getSourceClientOffset(),
+    initialOffset: monitor.getInitialClientOffset(),
     isDragging: monitor.isDragging()
   };
 }

From 3006f61a0395ac013f022f6967f5de56b2768581 Mon Sep 17 00:00:00 2001
From: kirill pushkin <k1rilllavrinenko@yandex.ru>
Date: Mon, 10 Oct 2022 21:30:11 +0300
Subject: [PATCH 2/2] fix: fixed bug with spare pieces

fixed bug when lib crushed because of null square element of spare piece
---
 src/Chessboard/CustomDragLayer.js | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/Chessboard/CustomDragLayer.js b/src/Chessboard/CustomDragLayer.js
index ddc1d33..e0e76fb 100644
--- a/src/Chessboard/CustomDragLayer.js
+++ b/src/Chessboard/CustomDragLayer.js
@@ -44,15 +44,17 @@ class CustomDragLayer extends Component {
 
     if (item && currentOffset && initialOffset) {
       const squareElement = document.querySelector(`[data-squareid=${item.source}]`)
-      const squareElementDOMRect = squareElement.getBoundingClientRect()
-      const squareWidth = width / 8
-
-      let dx = (squareWidth / 2) - (squareElementDOMRect.right - initialOffset.x)
-      let dy = (squareWidth / 2) - (squareElementDOMRect.bottom - initialOffset.y)
-
-      dependOnCursorPosition = {
-        x: currentOffset.x + dx,
-        y: currentOffset.y + dy
+      if (squareElement) {
+        const squareElementDOMRect = squareElement.getBoundingClientRect()
+        const squareWidth = width / 8
+  
+        let dx = (squareWidth / 2) - (squareElementDOMRect.right - initialOffset.x)
+        let dy = (squareWidth / 2) - (squareElementDOMRect.bottom - initialOffset.y)
+  
+        dependOnCursorPosition = {
+          x: currentOffset.x + dx,
+          y: currentOffset.y + dy
+        }
       }
     }