[brooklyn-ui] 01/10: Draw relationship path labels with textPath, if supplied

[he...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

heneveld pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git

commit 35b120845a93875ed7f78c57a29c17fa2a79ed35
Author: Mykola Mandra <my...@cloudsoftcorp.com>
AuthorDate: Wed Jun 23 09:29:25 2021 +0100

    Draw relationship path labels with textPath, if supplied
    
    Signed-off-by: Mykola Mandra <my...@cloudsoftcorp.com>
---
 .../app/components/util/d3-blueprint.js            | 31 +++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
index e94c9d6..06404ed 100755
--- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
+++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
@@ -776,11 +776,39 @@ export function D3Blueprint(container, options) {
         let relationData = _relationGroup.selectAll('.relation')
             .data(_d3DataHolder.visible.relationships, (d)=>(d.source._id + '_related_to_' + d.target._id));
 
-        relationData.enter().insert('path')
+        let relationDataEntered = relationData.enter();
+
+        // Draw the relationship path
+        relationDataEntered.insert('path')
             .attr('class', 'relation')
+            .attr('id', (d)=>(d.source._id + '-' + d.target._id))
             .attr('opacity', 0)
             .attr('from', (d)=>(d.source._id))
             .attr('to', (d)=>(d.target._id));
+
+        // Draw the relationship label that follows the path, somewhere in the middle.
+        // NOTE `textPath` DECREASES THE UI PERFORMANCE, USE LABELS WITH CAUTION.
+        relationDataEntered.insert('text') // Add text layer of '&#9608;'s to erase the area on the path.
+            .attr('dominant-baseline', 'middle')
+            .attr('text-anchor', 'middle')
+            .attr('font-family', 'monospace')
+            .attr('fill', '#f5f6fa')
+                .insert('textPath')
+                .attr('hidden', (d) => (d.label ? null : ''))
+                .attr('xlink:href', (d)=>('#' + d.source._id + '-' + d.target._id))
+                .attr('startOffset', '59%')
+                .html((d) => (d.label ? '&#9608;'.repeat(d.label.length + 2) : null));
+        relationDataEntered.insert('text') // Add label text on top of '&#9608;'s which is on top of the path.
+            .attr('dominant-baseline', 'middle')
+            .attr('text-anchor', 'middle')
+            .attr('font-family', 'monospace')
+                .insert('textPath')
+                .attr('hidden', (d) => (d.label ? null : ''))
+                .attr('xlink:href', (d)=>('#' + d.source._id + '-' + d.target._id))
+                .attr('startOffset', '59%')
+                .html((d) => (' ' + d.label + ' '));
+
+        // Draw the transition
         relationData.transition()
             .duration(_configHolder.transition)
             .attr('opacity', 1)
@@ -804,6 +832,7 @@ export function D3Blueprint(container, options) {
 
                 return `M ${sourceNode.x},${sourceY} A ${dr},${dr} 0 0,${sweep} ${m.x},${m.y}`;
             });
+
         relationData.exit()
             .transition()
             .duration(_configHolder.transition)