Fix vasturiano#271. Add linkPointerAreaPaint prop

Author: vasturiano

README.md

@@ -235,7 +235,8 @@ Note that not all props listed below apply to all 4 components. The last 4 colum
 | <b>enableNavigationControls</b> | <i>bool</i> | `true` | Whether to enable the trackball navigation controls used to move the camera using mouse interactions (rotate/zoom/pan). | | :heavy_check_mark: | | |
 | <b>enablePointerInteraction</b> | <i>bool</i> | `true` | Whether to enable the mouse tracking events. This activates an internal tracker of the canvas mouse position and enables the functionality of object hover/click and tooltip labels, at the cost of performance. If you're looking for maximum gain in your graph performance it's recommended to switch off this property. | :heavy_check_mark: | :heavy_check_mark: | | |
 | <b>enableNodeDrag</b> | <i>bool</i> | `true` | Whether to enable the user interaction to drag nodes by click-dragging. If enabled, every time a node is dragged the simulation is re-heated so the other nodes react to the changes. Only applicable if enablePointerInteraction is `true`. | :heavy_check_mark: | :heavy_check_mark: | | |
-| <b>nodePointerAreaPaint</b> | <i>func</i> | *default interaction area is a circle centered on the node and sized according to `val`.* | Callback function for painting a canvas area used to detect node pointer interactions. The provided paint color uniquely identifies the node and should be used to perform drawing operations on the provided canvas context. This painted area will not be visible, but instead be used to detect pointer interactions with the node. The callback function has the signature: `.nodePointerAreaPaint(<node>, <color>, <canvas context>, <current global scale>)`. | :heavy_check_mark: | | | |
+| <b>nodePointerAreaPaint</b> | <i>func</i> | *default interaction area is a circle centered on the node and sized according to `val`.* | Callback function for painting a canvas area used to detect node pointer interactions. The provided paint color uniquely identifies the node and should be used to perform drawing operations on the provided canvas context. This painted area will not be visible, but instead be used to detect pointer interactions with the node. The callback function has the signature: `nodePointerAreaPaint(<node>, <color>, <canvas context>, <current global scale>)`. | :heavy_check_mark: | | | |
+| <b>linkPointerAreaPaint</b> | <i>func</i> | *default interaction area is a straight line between the source and target nodes.* | Callback function for painting a canvas area used to detect link pointer interactions. The provided paint color uniquely identifies the link and should be used to perform drawing operations on the provided canvas context. This painted area will not be visible, but instead be used to detect pointer interactions with the link. The callback function has the signature: `linkPointerAreaPaint(<link>, <color>, <canvas context>, <current global scale>)`. | :heavy_check_mark: | | | |
 
 ###  Utility
 

package.json

@@ -43,7 +43,7 @@
     "3d-force-graph": "^1.69.2",
     "3d-force-graph-ar": "^1.6.4",
     "3d-force-graph-vr": "^1.35.4",
-    "force-graph": "^1.39.2",
+    "force-graph": "^1.40.0",
     "prop-types": "^15.7.2",
     "react-kapsule": "^2.2.1"
   },

src/forcegraph-proptypes.js

@@ -90,8 +90,9 @@ export const ForceGraph2DPropTypes = Object.assign({},
     nodeCanvasObjectMode: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     nodeCanvasObject: PropTypes.func,
     nodePointerAreaPaint: PropTypes.func,
-    linkCanvasObject: PropTypes.func,
     linkCanvasObjectMode: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    linkCanvasObject: PropTypes.func,
+    linkPointerAreaPaint: PropTypes.func,
     autoPauseRedraw: PropTypes.bool,
     minZoom: PropTypes.number,
     maxZoom: PropTypes.number,

src/packages/react-force-graph-2d/index.d.ts

@@ -76,6 +76,7 @@ export interface ForceGraphProps {
   linkDirectionalParticleSpeed?: LinkAccessor<number>;
   linkDirectionalParticleWidth?: LinkAccessor<number>;
   linkDirectionalParticleColor?: LinkAccessor<string>;
+  linkPointerAreaPaint?: CanvasPointerAreaPaintFn<LinkObject>;
 
   // Render control
   autoPauseRedraw?: boolean;

src/packages/react-force-graph-2d/package.json

@@ -35,7 +35,7 @@
     "dist/**/*"
   ],
   "dependencies": {
-    "force-graph": "^1.39.2",
+    "force-graph": "^1.40.0",
     "prop-types": "^15.7.2",
     "react-kapsule": "^2.2.1"
   },