Arrow fix

src/components/_shared/BezierArrow/ArrowHead.tsx

@@ -1,23 +1,49 @@
+import { number } from 'prop-types';
 import React from 'react';
 
 const LARGE_VALUE = 100000;
 
 interface Props {
   curvePath: string;
-  coords: [number, number];
+  coordsforArrow: [number, number][];
   rotation?: number;
   length?: number;
 }
+let x_coord_plus: number;
+let y_coord_plus: number;
+let new_curvepath: string;
+
+function ArrowHead({ curvePath, coordsforArrow, rotation = 30, length = 10 }: Props) {
+  /*we calculate the inclination between bezierhandle and end of arrow to get for any x also y*/
+  const inclination=((coordsforArrow[1][1]-coordsforArrow[0][1])/(coordsforArrow[1][0]-coordsforArrow[0][0]))
+  if(!isFinite(inclination)){
+    x_coord_plus=0
+    y_coord_plus=length
+}else{
+   x_coord_plus = inclination === 0 ? length : Math.sqrt(Math.pow(length, 2)/(1+Math.pow(inclination, 2)));
+   y_coord_plus = inclination === 0 ? 0 : x_coord_plus*inclination
+}
+  /* as the above calculation involves a sqrt we have to add negative and positive inclination as possibilities*/
+if (coordsforArrow[0][0]<coordsforArrow[1][0]){
+  x_coord_plus=x_coord_plus*-1
+  y_coord_plus=y_coord_plus*-1
+}
+
+if (coordsforArrow[0][0]===coordsforArrow[1][0]&&coordsforArrow[0][1]<coordsforArrow[1][1]){
+  x_coord_plus=x_coord_plus*-1
+  y_coord_plus=y_coord_plus*-1
+  };
+
+new_curvepath=("M "+String(coordsforArrow[0][0]-x_coord_plus)+","+String(coordsforArrow[0][1]-y_coord_plus)+" L "+String(coordsforArrow[0][0])+","+String(coordsforArrow[0][1]));
+
 
-function ArrowHead({ curvePath, coords, rotation = 30, length = 10 }: Props) {
   return (
     <g>
-      {[1, -1].map((direction) => (
+      {[-1,0,1].map((direction) => (
         <path
           key={direction}
-          transform={`rotate(${direction * rotation} ${coords.join(' ')})`}
-          style={{ strokeDasharray: [length, LARGE_VALUE].join(' ') }}
-          d={curvePath}
+          transform={`rotate(${direction * rotation} ${coordsforArrow[0].join(' ')})`}        
+          d={new_curvepath}
         />
       ))}
     </g>

src/components/_shared/BezierArrow/BezierArrow.tsx

@@ -12,8 +12,10 @@ interface Props {
     endCoords: [number, number];
     startBezierHandle: [number, number];
     endBezierHandle: [number, number];
+
   };
   drawArrowHead?: boolean;
+
   /** Draw arrow heads on one end (`"start"` or `"end"`) or on both ends (`"both"`) */
   arrowHeadAnchor?: 'start' | 'end' | 'both';
   arrowHeadLength?: number;
@@ -30,6 +32,8 @@ function BezierArrow({
   className = '',
 }: Props) {
   const curve = constructCurve(coords);
+
+
   const invertCurve = constructCurve({
     startCoords: coords.endCoords,
     endCoords: coords.startCoords,
@@ -46,15 +50,15 @@ function BezierArrow({
       {drawArrowHead && ['start', 'both'].includes(arrowHeadAnchor) && (
         <ArrowHead
           curvePath={curve.join(' ')}
-          coords={coords.startCoords}
+          coordsforArrow={[coords.startCoords,coords.startBezierHandle]}
           rotation={arrowHeadRotation}
           length={arrowHeadLength}
         />
       )}
       {drawArrowHead && ['end', 'both'].includes(arrowHeadAnchor) && (
         <ArrowHead
           curvePath={invertCurve.join(' ')}
-          coords={coords.endCoords}
+          coordsforArrow={[coords.endCoords,coords.endBezierHandle]}
           rotation={arrowHeadRotation}
           length={arrowHeadLength}
         />

src/components/_shared/BezierArrow/BezierArrowEditor.tsx

@@ -71,7 +71,7 @@ function BezierArrowEditor({
   initialStartCoords = [10, 10],
   initialEndCoords = [60, 60],
   initialStartBezierHandle = [10, 40],
-  initialEndBezierHandle = [20, 60],
+  initialEndBezierHandle = [60, 10],
   drawArrowHead = true,
   arrowHeadAnchor = 'end',
   arrowHeadLength = 10,

src/pages/index.tsx

@@ -1,27 +1,31 @@
 import Link from 'next/link';
 import React from 'react';
+import { useRef } from 'react';
+import { args } from 'react';
 
+
+import BezierArrowEditor from 'components/_shared/BezierArrow/BezierArrowEditor';
 function Index() {
   const PAGES = [
     { url: '/graphic', title: 'Example of a complete graphic (Header+Chart)' },
     { url: '/chart', title: 'Minimal example of a responsive chart' },
     { url: '/map', title: 'Map example' },
   ];
 
+
+
+  const WIDTH = 400;
+  const HEIGHT = 120;
+
+  const canvasRef = useRef();
+
   return (
-    <>
-      <b>Example pages:</b>
-      <ul>
-        {PAGES.map(({ url, title }) => (
-          <li key={url}>
-            <Link href={url}>
-              <a>{title}</a>
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </>
+    <svg ref={canvasRef} width={WIDTH} height={HEIGHT} overflow="visible">
+      <rect width={WIDTH} height={HEIGHT} fill="whitesmoke" />
+      <BezierArrowEditor canvasRef={canvasRef} {...args} />
+    </svg>
   );
 }
 
+
 export default Index;