Taxi edge turn radius (i.e. smooth curve on each turn)

documentation/md/style.md

@@ -456,7 +456,10 @@ When a taxi edge would be impossible to draw along the regular turning plan ---
  * Note that bundling may not work with an explicit direction (`upward`, `downward`, `leftward`, or `rightward`) in tandem with a turn distance specified in percent units.
 * **`taxi-turn-min-distance`** : The minimum distance along the primary axis that is maintained between the nodes and the turns.
  * This value only takes on absolute values (e.g. `5px`).
- * This property makes the taxi edge be re-routed when the turns would be otherwise too close to the source or target. As such, it also helps to avoid turns overlapping edge endpoint arrows.
+ * This property makes the taxi edge be re-routed when the turns would be otherwise too close to the source or target. As such, it also helps to avoid turns overlapping edge endpoint arrows
+* **`taxi-radius`** : The taxi-radius property applies a curve to a taxi edge, providing a rounded appearance to any 90 degree bend.
+ * This value should be a floating point number (e.g. `3.14`).
+
 * **`edge-distances`** : With value `intersection` (default), the distances (`taxi-turn` and `taxi-turn-min-distance`) are considered from the outside of the source's bounds to the outside of the target's bounds. With value `node-position`, the distances are considered from the source position to the target position. The `node-position` option makes calculating edge points easier --- but it should be used carefully because you can create invalid points that `intersection` would have automatically corrected.
 
 
@@ -717,4 +720,4 @@ Selection box:
 Texture during viewport gestures:
 
  * **`outside-texture-bg-color`** : The colour of the area outside the viewport texture when `initOptions.textureOnViewport === true`.
- * **`outside-texture-bg-opacity`** : The opacity of the area outside the viewport texture.
+ * **`outside-texture-bg-opacity`** : The opacity of the area outside the viewport texture.

src/extensions/renderer/base/coord-ele-math/coords.js

@@ -169,13 +169,37 @@ BRp.findNearestElements = function( x, y, interactiveElementsOnly, isTouch ){
  var pts = rs.allpts;
 
  for( var i = 0; i + 3 < pts.length; i += 2 ){
- if(
- (math.inLineVicinity( x, y, pts[ i ], pts[ i + 1], pts[ i + 2], pts[ i + 3], width2 ))
- &&
- widthSq > ( sqDist = math.sqdistToFiniteLine( x, y, pts[ i ], pts[ i + 1], pts[ i + 2], pts[ i + 3] ) )
- ){
- addEle( edge, sqDist );
- return true;
+ if( rs.edgeType === 'segments' && edge.pstyle( 'taxi-radius' ).value > 0 ) {
+ const radius = edge.pstyle( 'taxi-radius' ).value/6
+ const isHor = pts[ i+1 ] === pts[ i + 3]
+ let x1,x2,y1,y2
+ if (isHor){
+ x1 = pts[ i ]
+ x2 = ( pts[ i ] === pts[ i + 2 ] ) ? pts[i+2] : ( pts[ i + 2 ] > pts[ i ] ) ? pts[ i + 2 ] - radius : pts[ i + 2 ] + radius;
+ y1 = pts[ i + 1] - radius
+ y2 = pts[ i + 3 ] + radius
+ }else{
+ x1 = pts[ i ] - radius
+ x2 = pts[ i + 2] + radius
+ y1 = pts[ i + 1]
+ y2 = ( pts[ i + 1 ] === pts[ i + 3 ] ) ? pts[ i + 1 ] : pts[ i + 3 ] > pts[ i+1 ] ? pts[ i + 3 ] - radius : pts[ i + 3 ] + radius;
+ }
+
+ if(
+ (math.inLineVicinity( x, y, x1, y1, x2, y2, width2 ))
+ ){
+ addEle( edge, sqDist );
+ return true;
+ }
+ } else { 
+ if(
+ (math.inLineVicinity( x, y, pts[ i ], pts[ i + 1], pts[ i + 2], pts[ i + 3], width2 ))
+ &&
+ widthSq > ( sqDist = math.sqdistToFiniteLine( x, y, pts[ i ], pts[ i + 1], pts[ i + 2], pts[ i + 3] ) )
+ ){
+ addEle( edge, sqDist );
+ return true;
+ }
  }
  }
 

src/extensions/renderer/canvas/drawing-edges.js

@@ -208,8 +208,18 @@ CRp.drawEdgePath = function( edge, context, pts, type ){
  case 'straight':
  case 'segments':
  case 'haystack':
- for( let i = 2; i + 1 < pts.length; i += 2 ){
- context.lineTo( pts[ i ], pts[ i + 1] );
+ const taxiRadius= edge.pstyle( 'taxi-radius' )
+ const taxiRadiusValue = taxiRadius ? taxiRadius.pfValue : 0
+
+ if( edge.pstyle('curve-style').value == 'taxi' && taxiRadiusValue > 0 ) {
+ for( let i = 2; i + 1 < pts.length; i += 2 ) {
+ context.arcTo( pts[ i - 2 ], pts[ i - 1 ], pts[ i ], pts[ i + 1 ], taxiRadiusValue )
+ }
+ context.lineTo( pts[ pts.length - 2 ], pts[ pts.length - 1 ] );
+ } else {
+ for( let i = 2; i + 1 < pts.length; i += 2 ) {
+ context.lineTo( pts[ i ], pts[ i + 1] );
+ }
  }
  break;
  }

src/style/properties.js

@@ -349,6 +349,7 @@ const styfn = {};
  { name: 'taxi-turn', type: t.bidirectionalSizeMaybePercent, triggersBounds: diff.any },
  { name: 'taxi-turn-min-distance', type: t.size, triggersBounds: diff.any },
  { name: 'taxi-direction', type: t.axisDirection, triggersBounds: diff.any },
+ { name: 'taxi-radius', type: t.number, triggersBounds: diff.any },
  { name: 'edge-distances', type: t.edgeDistances, triggersBounds: diff.any },
  { name: 'arrow-scale', type: t.positiveNumber, triggersBounds: diff.any },
  { name: 'loop-direction', type: t.angle, triggersBounds: diff.any },
@@ -682,6 +683,7 @@ styfn.getDefaultProperties = function(){
  'taxi-turn': '50%',
  'taxi-turn-min-distance': 10,
  'taxi-direction': 'auto',
+ 'taxi-radius': 0,
  'edge-distances': 'intersection',
  'curve-style': 'haystack',
  'haystack-radius': 0,
@@ -777,4 +779,4 @@ styfn.addDefaultStylesheet = function(){
  this.defaultLength = this.length;
 };
 
-export default styfn;
+export default styfn;