feat: add arrow start offset option for improved arrow positioning (#225)

* feat: add arrow start offset option for improved arrow positioning

- Introduced a new `arrowStartOffset` property to control the starting position of arrows relative to the square's center.
- Updated the ArrowOptions story to include a range input for adjusting the start offset.
- Modified arrow rendering logic to account for the new start offset, enhancing visual accuracy.

* chore: add back old comments and update variable names

* refactor: prettier fomatting

Author: DevArches

docs/stories/options/ArrowOptions.stories.tsx

@@ -25,6 +25,7 @@ export const ArrowOptions: Story = {
       activeArrowWidthMultiplier: 0.9,
       opacity: 0.65,
       activeOpacity: 0.5,
+      arrowStartOffset: 0,
     };
 
     // arrows
@@ -157,6 +158,24 @@ export const ArrowOptions: Story = {
             />
           </div>
 
+          {/* Start Offset */}
+          <div>
+            <label>Start Offset ({arrowOptions.arrowStartOffset}):</label>
+            <input
+              type="range"
+              min="0"
+              max="0.5"
+              step="0.02"
+              value={arrowOptions.arrowStartOffset}
+              onChange={(e) =>
+                setarrowOptions({
+                  ...arrowOptions,
+                  arrowStartOffset: Number(e.target.value),
+                })
+              }
+            />
+          </div>
+
           {/* Opacity and Active Settings */}
           <div>
             <label>Opacity ({arrowOptions.opacity}):</label>

src/Arrows.tsx

@@ -92,60 +92,59 @@ export function Arrows() {
         // This gives us the length of the arrow if it went from center to center
         const r = Math.hypot(dy, dx);
 
+        // Distance to offset the arrow start from the square center
+        const startOffset = squareWidth * arrowOptions.arrowStartOffset;
+
         let pathD: string;
 
-        // Is Knight move
+        // Knight move - draw an L-shaped arrow
         if (r === Math.hypot(1, 2) * squareWidth) {
-          // The mid point is only used in Knight move drawing
-          // and here we prioritise drawing along the long edge
-          // by defining the midpoint depending on which is bigger X or Y
-          const mid =
-            Math.abs(dx) < Math.abs(dy)
-              ? {
-                  x: from.x,
-                  y: to.y,
-                }
-              : {
-                  x: to.x,
-                  y: from.y,
-                };
-
-          // Calculate the difference in x and y coordinates between mid and end points
-          const dxEnd = to.x - mid.x;
-          const dyEnd = to.y - mid.y;
-
-          // End arrow distance is always one squareWidth for Knight moves
-          const rEnd = squareWidth;
-
-          // Calculate the new end point for the arrow
-          // We subtract ARROW_LENGTH_REDUCER from the end line distance to make the arrow
-          // stop before reaching the center of the target square
+          // 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);
+
+          // Offset start point in the direction of the first leg
+          const start = isVerticalFirst
+            ? { x: from.x, y: from.y + Math.sign(dy) * startOffset }
+            : { x: from.x + Math.sign(dx) * startOffset, y: from.y };
+
+          // Corner where the L-shape turns
+          const corner = isVerticalFirst
+            ? { x: from.x, y: to.y }
+            : { x: to.x, y: from.y };
+
+          // Calculate the final leg from corner to target
+          const dxFinalLeg = to.x - corner.x;
+          const dyFinalLeg = to.y - corner.y;
+          const finalLegLength = squareWidth; // Always one square for knight moves
+
+          // Shorten the final leg so the arrow stops before the target center
           const end = {
-            // Calculate new end x coordinate by:
-            // 1. Taking the mid->end x direction (dxEnd)
-            // 2. Scaling it by (rEnd - ARROW_LENGTH_REDUCER) / rEnd to shorten it
-            // 3. Adding to the mid x coordinate
-            x: mid.x + (dxEnd * (rEnd - ARROW_LENGTH_REDUCER)) / rEnd,
-            // Same calculation for y coordinate
-            y: mid.y + (dyEnd * (rEnd - ARROW_LENGTH_REDUCER)) / rEnd,
+            x:
+              corner.x +
+              (dxFinalLeg * (finalLegLength - ARROW_LENGTH_REDUCER)) /
+                finalLegLength,
+            y:
+              corner.y +
+              (dyFinalLeg * (finalLegLength - ARROW_LENGTH_REDUCER)) /
+                finalLegLength,
           };
 
-          pathD = `M${from.x},${from.y} L${mid.x},${mid.y} L${end.x},${end.y}`;
+          pathD = `M${start.x},${start.y} L${corner.x},${corner.y} L${end.x},${end.y}`;
         } else {
-          // Calculate the new end point for the arrow
-          // We subtract ARROW_LENGTH_REDUCER from the total distance to make the arrow
-          // stop before reaching the center of the target square
+          // Straight arrow - offset start point toward the target
+          const start = {
+            x: from.x + (dx * startOffset) / r,
+            y: from.y + (dy * startOffset) / r,
+          };
+
+          // Shorten the arrow so it stops before the target center
           const end = {
-            // Calculate new end x coordinate by:
-            // 1. Taking the original x direction (dx)
-            // 2. Scaling it by (r - ARROW_LENGTH_REDUCER) / r to shorten it
-            // 3. Adding to the starting x coordinate
             x: from.x + (dx * (r - ARROW_LENGTH_REDUCER)) / r,
-            // Same calculation for y coordinate
             y: from.y + (dy * (r - ARROW_LENGTH_REDUCER)) / r,
           };
 
-          pathD = `M${from.x},${from.y} L${end.x},${end.y}`;
+          pathD = `M${start.x},${start.y} L${end.x},${end.y}`;
         }
 
         return (

src/defaults.ts

@@ -73,4 +73,5 @@ export const defaultArrowOptions = {
   activeArrowWidthMultiplier: 0.9, // the multiplier for the arrow width when it is being drawn
   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.
 };