Support for linkDirectionalArrowLength (#410)

* No dir

* Renamed directional configuration setting, fixed direction particles assignment

---------

Co-authored-by: Niels de Jong <niels-121@hotmail.com>

docs/modules/ROOT/pages/user-guide/reports/graph.adoc

@@ -91,6 +91,9 @@ directly maps to the width value.
 relationships with animated particles on them, moving in the direction
 of the relationship.
 
+|Arrow head size |Number |3 |Use this to set the length of the arrow head, size is adjusted automatically.
+If 0, no arrow will be drawn.
+
 |Background Color |Text |#fafafa |The background color of the
 visualization.
 

src/chart/graph/GraphChart.tsx

@@ -33,6 +33,8 @@ const NeoGraphChart = (props: ChartProps) => {
   // Retrieve config from advanced settings
   const settings = getSettings(props.settings, props.extensions, props.getGlobalParameter);
   const linkDirectionalParticles = props.settings && props.settings.relationshipParticles ? 5 : undefined;
+  const arrowLengthProp = props?.settings?.arrowLengthProp ?? 3;
+
   let nodePositions = props.settings && props.settings.nodePositions ? props.settings.nodePositions : {};
   const parameters = props.parameters ? props.parameters : {};
 
@@ -139,6 +141,7 @@ const NeoGraphChart = (props: ChartProps) => {
       height: height,
       backgroundColor: settings.backgroundColor,
       linkDirectionalParticles: linkDirectionalParticles,
+      linkDirectionalArrowLength: arrowLengthProp,
       linkDirectionalParticleSpeed: settings.linkDirectionalParticleSpeed,
       nodeLabelFontSize: settings.nodeLabelFontSize,
       nodeLabelColor: settings.nodeLabelColor,

src/chart/graph/GraphChartVisualization.ts

@@ -69,6 +69,7 @@ export interface GraphChartVisualizationProps {
     backgroundColor: any;
     linkDirectionalParticles?: number;
     linkDirectionalParticleSpeed: number;
+    linkDirectionalArrowLength: number;
     nodeLabelFontSize: number;
     nodeLabelColor: string;
     relLabelFontSize: number;

src/chart/graph/GraphChartVisualization2D.tsx

@@ -24,7 +24,7 @@ export const NeoGraphChartVisualization2D = (props: GraphChartVisualizationProps
       height={props.style.height - 10}
       linkCurvature='curvature'
       backgroundColor={props.style.backgroundColor}
-      linkDirectionalArrowLength={3}
+      linkDirectionalArrowLength={props.style.linkDirectionalArrowLength}
       linkDirectionalArrowRelPos={1}
       dagMode={props.engine.layout}
       linkWidth={(link: any) => link.width}
@@ -42,6 +42,7 @@ export const NeoGraphChartVisualization2D = (props: GraphChartVisualizationProps
       onBackgroundClick={() => props.interactivity.onNodeClick(undefined)}
       onBackgroundRightClick={() => props.interactivity.onNodeClick(undefined)}
       linkLineDash={(link) => (link.new ? [2, 1] : null)}
+      linkDirectionalParticles={props.style.linkDirectionalParticles}
       linkDirectionalParticleSpeed={props.style.linkDirectionalParticleSpeed}
       cooldownTicks={props.engine.cooldownTicks}
       onEngineStop={() => {

src/config/ReportConfig.tsx

@@ -191,6 +191,7 @@ export const REPORT_TYPES = {
         type: SELECTION_TYPES.TEXT,
         default: 'width',
       },
+
       relationshipParticles: {
         label: 'Animated particles on Relationships',
         type: SELECTION_TYPES.LIST,
@@ -202,6 +203,11 @@ export const REPORT_TYPES = {
         type: SELECTION_TYPES.NUMBER,
         default: 0.005,
       },
+      arrowLengthProp: {
+        label: 'Arrow head size',
+        type: SELECTION_TYPES.NUMBER,
+        default: 3,
+      },
       layout: {
         label: 'Graph Layout (experimental)',
         type: SELECTION_TYPES.LIST,