fix: arrow bugs (#216)

- fixed issue where onSquareRightClick would fire upon drawing an arrow
- fixed issue where right clicking, dragging into a piece, and releasing, all within the same square, would cause an arrow to show when right clicking on another square
- fixed analysis board logic that would still try to find the best move in a draw

Author: Clariity

commitlint.config.mjs

@@ -1,3 +1,6 @@
 export default {
   extends: ['@commitlint/config-conventional'],
+  rules: {
+    'body-max-line-length': [0, 'always', 100], // [enabled, condition, value]
+  },
 };

docs/stories/advanced-examples/AnalysisBoard.stories.tsx

@@ -35,7 +35,7 @@ export const AnalysisBoard: Story = {
 
     // when the chess game position changes, find the best move
     useEffect(() => {
-      if (!chessGame.isGameOver() || chessGame.isDraw()) {
+      if (!(chessGame.isGameOver() || chessGame.isDraw())) {
         findBestMove();
       }
     }, [chessGame.fen()]);

src/ChessboardProvider.tsx

@@ -114,9 +114,9 @@ type ContextType = {
   positionDifferences: ReturnType<typeof getPositionUpdates>;
   newArrowStartSquare: string | null;
   newArrowOverSquare: { square: string; color: string } | null;
-  setNewArrowStartSquare: (square: string) => void;
+  setNewArrowStartSquare: (square: string | null) => void;
   setNewArrowOverSquare: (
-    square: string,
+    square: string | null,
     modifiers?: { shiftKey: boolean; ctrlKey: boolean },
   ) => void;
   internalArrows: Arrow[];
@@ -498,13 +498,20 @@ export function ChessboardProvider({
   }, [clearArrowsOnClick]);
 
   const setNewArrowOverSquareWithModifiers = useCallback(
-    (square: string, modifiers?: { shiftKey: boolean; ctrlKey: boolean }) => {
+    (
+      square: string | null,
+      modifiers?: { shiftKey: boolean; ctrlKey: boolean },
+    ) => {
       const color = modifiers?.shiftKey
         ? arrowOptions.secondaryColor
         : modifiers?.ctrlKey
           ? arrowOptions.tertiaryColor
           : arrowOptions.color;
-      setNewArrowOverSquare({ square, color });
+      if (square) {
+        setNewArrowOverSquare({ square, color });
+      } else {
+        setNewArrowOverSquare(null);
+      }
     },
     [arrowOptions],
   );

src/Square.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useState } from 'react';
 
 import { useChessboardContext } from './ChessboardProvider';
 import {
@@ -27,6 +27,8 @@ export const Square = memo(function Square({
   isLightSquare,
   isOver,
 }: SquareProps) {
+  // track if we are drawing an arrow so that onSquareRightClick is not fired when we finish drawing an arrow
+  const [isDrawingArrow, setIsDrawingArrow] = useState(false);
   const {
     id,
     allowDrawingArrows,
@@ -93,10 +95,14 @@ export const Square = memo(function Square({
       }}
       onContextMenu={(e) => {
         e.preventDefault();
-        onSquareRightClick?.({
-          piece: currentPosition[squareId] ?? null,
-          square: squareId,
-        });
+
+        if (!isDrawingArrow) {
+          onSquareRightClick?.({
+            piece: currentPosition[squareId] ?? null,
+            square: squareId,
+          });
+        }
+        setIsDrawingArrow(false);
       }}
       onMouseDown={(e) => {
         if (e.button === 0) {
@@ -115,11 +121,20 @@ export const Square = memo(function Square({
       }}
       onMouseUp={(e) => {
         if (e.button === 2) {
-          if (newArrowStartSquare) {
+          if (
+            allowDrawingArrows &&
+            newArrowStartSquare &&
+            newArrowStartSquare !== squareId
+          ) {
+            setIsDrawingArrow(true);
             drawArrow(squareId, {
               shiftKey: e.shiftKey,
               ctrlKey: e.ctrlKey,
             });
+          } else if (newArrowStartSquare === squareId) {
+            // right clicked the same square - clear the arrow start square
+            setNewArrowStartSquare(null);
+            setNewArrowOverSquare(null);
           }
         }
         onSquareMouseUp?.(
@@ -132,11 +147,19 @@ export const Square = memo(function Square({
       }}
       onMouseOver={(e) => {
         // right mouse button is held down and we are drawing an arrow
-        if (e.buttons === 2 && newArrowStartSquare) {
+        if (
+          e.buttons === 2 &&
+          allowDrawingArrows &&
+          newArrowStartSquare &&
+          newArrowStartSquare !== squareId
+        ) {
           setNewArrowOverSquare(squareId, {
             shiftKey: e.shiftKey,
             ctrlKey: e.ctrlKey,
           });
+        } else if (newArrowStartSquare === squareId) {
+          // hovering back over the starting square - clear the over square
+          setNewArrowOverSquare(null);
         }
         onMouseOverSquare?.({
           piece: currentPosition[squareId] ?? null,