From 606714c0a00048724e0d66048b55d170c02f4829 Mon Sep 17 00:00:00 2001 From: Adam Shea Date: Mon, 24 Jul 2023 16:23:15 +0100 Subject: [PATCH 1/7] feature: curved taxi haystack --- src/extensions/renderer/canvas/drawing-edges.js | 15 ++++++++++++--- src/style/properties.js | 4 +++- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/extensions/renderer/canvas/drawing-edges.js b/src/extensions/renderer/canvas/drawing-edges.js index ee9906cfdf..9309a50564 100644 --- a/src/extensions/renderer/canvas/drawing-edges.js +++ b/src/extensions/renderer/canvas/drawing-edges.js @@ -207,9 +207,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 taxiHasCurve = edge.pstyle('taxi-curve') + const taxiHasCurveValue = taxiHasCurve.value == 'yes' ? true : false + + if (taxiHasCurveValue) { + for (let i = 2; i + 1 < pts.length; i += 2) { + context.arcTo(pts[i - 2], pts[i - 1], pts[i], pts[i + 1], 2 * Math.PI) + } + 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; } diff --git a/src/style/properties.js b/src/style/properties.js index 8d32a285af..eef77ac930 100644 --- a/src/style/properties.js +++ b/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-curve', type: t.bool, 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-curve': 'no', 'edge-distances': 'intersection', 'curve-style': 'haystack', 'haystack-radius': 0, @@ -777,4 +779,4 @@ styfn.addDefaultStylesheet = function(){ this.defaultLength = this.length; }; -export default styfn; \ No newline at end of file +export default styfn; From 6c1644c99a4040606f559daa30f5e19046198034 Mon Sep 17 00:00:00 2001 From: Adam Shea Date: Mon, 31 Jul 2023 11:31:29 +0100 Subject: [PATCH 2/7] moved to taxi radius values --- src/extensions/renderer/canvas/drawing-edges.js | 17 +++++++++-------- src/style/properties.js | 4 ++-- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/extensions/renderer/canvas/drawing-edges.js b/src/extensions/renderer/canvas/drawing-edges.js index 9309a50564..ed687a6b98 100644 --- a/src/extensions/renderer/canvas/drawing-edges.js +++ b/src/extensions/renderer/canvas/drawing-edges.js @@ -207,17 +207,18 @@ CRp.drawEdgePath = function( edge, context, pts, type ){ case 'straight': case 'segments': - const taxiHasCurve = edge.pstyle('taxi-curve') - const taxiHasCurveValue = taxiHasCurve.value == 'yes' ? true : false + case 'haystack': + const taxiRadius= edge.pstyle( 'taxi-radius' ) + const taxiRadiusValue = taxiRadius ? taxiRadius.value : 0 - if (taxiHasCurveValue) { - for (let i = 2; i + 1 < pts.length; i += 2) { - context.arcTo(pts[i - 2], pts[i - 1], pts[i], pts[i + 1], 2 * Math.PI) + if( 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 ], 2 * taxiRadiusValue ) } - context.lineTo(pts[pts.length - 2], pts[pts.length - 1]); + 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]); + for( let i = 2; i + 1 < pts.length; i += 2 ) { + context.lineTo( pts[ i ], pts[ i + 1] ); } } break; diff --git a/src/style/properties.js b/src/style/properties.js index eef77ac930..26a8a7910f 100644 --- a/src/style/properties.js +++ b/src/style/properties.js @@ -349,7 +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-curve', type: t.bool, 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 }, @@ -683,7 +683,7 @@ styfn.getDefaultProperties = function(){ 'taxi-turn': '50%', 'taxi-turn-min-distance': 10, 'taxi-direction': 'auto', - 'taxi-curve': 'no', + 'taxi-radius': 0, 'edge-distances': 'intersection', 'curve-style': 'haystack', 'haystack-radius': 0, From a73a6c12728403b2130556d23e40ec6482e286a9 Mon Sep 17 00:00:00 2001 From: Adam Shea <44814104+Adam-Shea@users.noreply.github.com> Date: Mon, 31 Jul 2023 11:40:54 +0100 Subject: [PATCH 3/7] Update drawing-edges.js --- src/extensions/renderer/canvas/drawing-edges.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/extensions/renderer/canvas/drawing-edges.js b/src/extensions/renderer/canvas/drawing-edges.js index ed687a6b98..463801a5a3 100644 --- a/src/extensions/renderer/canvas/drawing-edges.js +++ b/src/extensions/renderer/canvas/drawing-edges.js @@ -213,7 +213,7 @@ CRp.drawEdgePath = function( edge, context, pts, type ){ if( 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 ], 2 * taxiRadiusValue ) + 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 { From a95aa5b3ed8aa4177c25f84fd0b4336edaa65e96 Mon Sep 17 00:00:00 2001 From: Adam Shea Date: Wed, 2 Aug 2023 11:21:42 +0100 Subject: [PATCH 4/7] moved to pfValue --- src/extensions/renderer/canvas/drawing-edges.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/extensions/renderer/canvas/drawing-edges.js b/src/extensions/renderer/canvas/drawing-edges.js index 463801a5a3..fad8e379a5 100644 --- a/src/extensions/renderer/canvas/drawing-edges.js +++ b/src/extensions/renderer/canvas/drawing-edges.js @@ -209,7 +209,7 @@ CRp.drawEdgePath = function( edge, context, pts, type ){ case 'segments': case 'haystack': const taxiRadius= edge.pstyle( 'taxi-radius' ) - const taxiRadiusValue = taxiRadius ? taxiRadius.value : 0 + const taxiRadiusValue = taxiRadius ? taxiRadius.pfValue : 0 if( taxiRadiusValue > 0) { for( let i = 2; i + 1 < pts.length; i += 2 ) { From 2c825ec20c6ccc8435108e58f922c822d80f9d46 Mon Sep 17 00:00:00 2001 From: Adam Shea Date: Wed, 2 Aug 2023 11:24:17 +0100 Subject: [PATCH 5/7] only allow on taxi --- src/extensions/renderer/canvas/drawing-edges.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/extensions/renderer/canvas/drawing-edges.js b/src/extensions/renderer/canvas/drawing-edges.js index fad8e379a5..16bace840a 100644 --- a/src/extensions/renderer/canvas/drawing-edges.js +++ b/src/extensions/renderer/canvas/drawing-edges.js @@ -211,7 +211,7 @@ CRp.drawEdgePath = function( edge, context, pts, type ){ const taxiRadius= edge.pstyle( 'taxi-radius' ) const taxiRadiusValue = taxiRadius ? taxiRadius.pfValue : 0 - if( taxiRadiusValue > 0) { + if( curveStyle == '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 ) } From acf2009f39230f5c29d6eb8857619215bae9ca10 Mon Sep 17 00:00:00 2001 From: Adam Shea Date: Wed, 2 Aug 2023 11:36:46 +0100 Subject: [PATCH 6/7] added docs --- documentation/md/style.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/documentation/md/style.md b/documentation/md/style.md index 312fc628e0..d5e91be3f2 100644 --- a/documentation/md/style.md +++ b/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. \ No newline at end of file + * **`outside-texture-bg-opacity`** : The opacity of the area outside the viewport texture. From 61980eb766e809cb490fdfdc75fd7a006f5d374b Mon Sep 17 00:00:00 2001 From: Adam Shea Date: Wed, 2 Aug 2023 19:28:57 +0100 Subject: [PATCH 7/7] added better detection --- .../renderer/base/coord-ele-math/coords.js | 38 +++++++++++++++---- .../renderer/canvas/drawing-edges.js | 2 +- 2 files changed, 32 insertions(+), 8 deletions(-) diff --git a/src/extensions/renderer/base/coord-ele-math/coords.js b/src/extensions/renderer/base/coord-ele-math/coords.js index 2c1830298c..f87891d1b6 100644 --- a/src/extensions/renderer/base/coord-ele-math/coords.js +++ b/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; + } } } diff --git a/src/extensions/renderer/canvas/drawing-edges.js b/src/extensions/renderer/canvas/drawing-edges.js index 16bace840a..ab4212794d 100644 --- a/src/extensions/renderer/canvas/drawing-edges.js +++ b/src/extensions/renderer/canvas/drawing-edges.js @@ -211,7 +211,7 @@ CRp.drawEdgePath = function( edge, context, pts, type ){ const taxiRadius= edge.pstyle( 'taxi-radius' ) const taxiRadiusValue = taxiRadius ? taxiRadius.pfValue : 0 - if( curveStyle == 'taxi' && taxiRadiusValue > 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 ) }