add liveDrawArrow and knightArrow options to arrowOptions

docs/D_OptionsApi.mdx

@@ -256,6 +256,11 @@ When drawing an arrow, you can hold down modifier keys to change the arrow color
 - `opacity`: Controls the opacity of arrows when not being drawn
 - `activeOpacity`: Controls the opacity of arrows when they are being drawn
 
+#### Arrow behavior
+
+- `liveDrawArrow`: Controls whether the arrow is drawn live while dragging (`true`) or drawn after the final target is set (`false`)
+- `knightArrow`: Controls whether knight moves are rendered as L-shaped knight arrows (`true`) or direct arrows (`false`)
+
 **Default value:**
 
 ```tsx
@@ -274,6 +279,8 @@ When drawing an arrow, you can hold down modifier keys to change the arrow color
   opacity: 0.65,
   activeOpacity: 0.5,
   arrowStartOffset: 0,
+  liveDrawArrow: true,
+  knightArrow: true,
 }
 ```
 
@@ -288,13 +295,15 @@ When drawing an arrow, you can hold down modifier keys to change the arrow color
     alt?: string;
     meta?: string;
   },
-  arrowLengthReducerDenominator: number,
-  sameTargetArrowLengthReducerDenominator: number,
-  arrowWidthDenominator: number,
-  activeArrowWidthMultiplier: number,
-  opacity: number,
-  activeOpacity: number
-  arrowStartOffset: number,
+  arrowLengthReducerDenominator?: number,
+  sameTargetArrowLengthReducerDenominator?: number,
+  arrowWidthDenominator?: number,
+  activeArrowWidthMultiplier?: number,
+  opacity?: number,
+  activeOpacity?: number,
+  arrowStartOffset?: number,
+  liveDrawArrow?: boolean,
+  knightArrow?: boolean,
 }
 ```
 

docs/stories/options/ArrowOptions.stories.tsx

@@ -33,6 +33,8 @@ export const ArrowOptions: Story = {
       opacity: 0.65,
       activeOpacity: 0.5,
       arrowStartOffset: 0,
+      liveDrawArrow: true,
+      knightArrow: true,
     };
 
     // arrows
@@ -264,6 +266,42 @@ export const ArrowOptions: Story = {
               }
             />
           </div>
+
+          {/* Toggles */}
+          <div>
+            <label
+              style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+            >
+              <input
+                type="checkbox"
+                checked={arrowOptions.liveDrawArrow}
+                onChange={(e) =>
+                  setarrowOptions({
+                    ...arrowOptions,
+                    liveDrawArrow: e.target.checked,
+                  })
+                }
+              />
+              Live Draw Arrow
+            </label>
+          </div>
+          <div>
+            <label
+              style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+            >
+              <input
+                type="checkbox"
+                checked={arrowOptions.knightArrow}
+                onChange={(e) =>
+                  setarrowOptions({
+                    ...arrowOptions,
+                    knightArrow: e.target.checked,
+                  })
+                }
+              />
+              Knight Arrow
+            </label>
+          </div>
         </div>
 
         <button onClick={() => setarrowOptions(defaultArrowOptions)}>

src/Arrows.tsx

@@ -19,7 +19,11 @@ export function Arrows() {
   const viewBoxWidth = 2048;
   const viewBoxHeight = viewBoxWidth * (chessboardRows / chessboardColumns);
 
+  const liveDrawArrow = arrowOptions.liveDrawArrow ?? true;
+  const knightArrow = arrowOptions.knightArrow ?? true;
+
   const currentlyDrawingArrow =
+    liveDrawArrow &&
     newArrowStartSquare &&
     newArrowOverSquare &&
     newArrowStartSquare !== newArrowOverSquare.square
@@ -98,7 +102,10 @@ export function Arrows() {
         let pathD: string;
 
         // Knight move - draw an L-shaped arrow
-        if (r === Math.hypot(1, 2) * squareWidth) {
+        const isKnightMove =
+          Math.abs(r - Math.hypot(1, 2) * squareWidth) < 0.001 ||
+          r === Math.hypot(1, 2) * squareWidth;
+        if (knightArrow && isKnightMove) {
           // Determine which direction to draw the long leg first
           // We prioritize the longer axis for visual clarity
           const isVerticalFirst = Math.abs(dx) < Math.abs(dy);

src/ChessboardProvider.tsx

@@ -96,7 +96,7 @@ type ContextType = {
 
   allowDrawingArrows: Defined<ChessboardOptions['allowDrawingArrows']>;
   arrows: Defined<ChessboardOptions['arrows']>;
-  arrowOptions: Defined<ChessboardOptions['arrowOptions']>;
+  arrowOptions: typeof defaultArrowOptions;
 
   canDragPiece: ChessboardOptions['canDragPiece'];
   onMouseOutSquare: ChessboardOptions['onMouseOutSquare'];
@@ -186,7 +186,7 @@ export type ChessboardOptions = {
   // arrows
   allowDrawingArrows?: boolean;
   arrows?: Arrow[];
-  arrowOptions?: typeof defaultArrowOptions;
+  arrowOptions?: Partial<typeof defaultArrowOptions>;
   clearArrowsOnClick?: boolean;
   clearArrowsOnPositionChange?: boolean;
 
@@ -262,7 +262,7 @@ export function ChessboardProvider({
     // arrows
     allowDrawingArrows = true,
     arrows = [],
-    arrowOptions = defaultArrowOptions,
+    arrowOptions: userArrowOptions = defaultArrowOptions,
     clearArrowsOnClick = true,
     clearArrowsOnPositionChange = true,
 
@@ -281,6 +281,11 @@ export function ChessboardProvider({
     squareRenderer,
   } = options || {};
 
+  const arrowOptions = useMemo(
+    () => ({ ...defaultArrowOptions, ...userArrowOptions }),
+    [userArrowOptions],
+  );
+
   // the piece currently being dragged
   const [draggingPiece, setDraggingPiece] =
     useState<DraggingPieceDataType | null>(null);
@@ -569,7 +574,7 @@ export function ChessboardProvider({
         altKey?: boolean;
         metaKey?: boolean;
       },
-      ) => {
+    ) => {
       // TODO: remove support for legacy arrow color props in future breaking version
       let color = arrowOptions.color;
       if (arrowOptions.colors) {

src/defaults.ts

@@ -85,4 +85,6 @@ export const defaultArrowOptions = {
   opacity: 0.65, // opacity of arrow when not being drawn
   activeOpacity: 0.5, // opacity of arrow when it is being drawn
   arrowStartOffset: 0, // how far from the center of the start square the arrow begins, as a fraction of square width (0 = center, 0.5 = edge). Values between 0.3-0.4 give a chess.com-like look where the arrow starts near the base of the piece. Values above 0.5 will start outside the square.
+  liveDrawArrow: true, // controls whether the arrow is drawn live while dragging or after final target set
+  knightArrow: true, // controls whether knight moves are rendered as L-shaped knight arrows or direct arrows
 };