This is an automated email from the ASF dual-hosted git repository.
iuliana pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git
The following commit(s) were added to refs/heads/master by this push:
new 5fa1584 Invert label text when arc goes in the opposite direction
new b967830 Merge pull request #296 from
algairim/draw-relationship-path-label
5fa1584 is described below
commit 5fa15849b88a466ead62caf8fc4a4e61fad01374
Author: Mykola Mandra <[email protected]>
AuthorDate: Fri Oct 15 14:11:32 2021 +0100
Invert label text when arc goes in the opposite direction
Signed-off-by: Mykola Mandra <[email protected]>
---
.../app/components/util/d3-blueprint.js | 55 +++++++++++++++-------
1 file changed, 37 insertions(+), 18 deletions(-)
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 86065d5..1ec7e24 100755
--- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
+++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
@@ -807,6 +807,36 @@ export function D3Blueprint(container, options) {
let relationArcs = _relationArcs.selectAll('.relation').data(arcsData,
(d) => getPathId(d));
+ const getArcTransitionParameters = (d) => {
+ let targetNode = nodeForEntity(d.target);
+ let sourceNode = nodeForEntity(d.source);
+ let sourceY = sourceNode.y + (d.source.isMemberSpec() ?
_configHolder.nodes.memberspec.circle.cy : 0);
+ let targetY = targetNode.y + (d.target.isMemberSpec() ?
_configHolder.nodes.memberspec.circle.cy : 0);
+ let dx = targetNode.x - sourceNode.x;
+ let dy = targetY - sourceY;
+ let dr = Math.sqrt(dx * dx + dy * dy);
+ let sweep = dx * dy > 0 ? 0 : 1;
+ _mirror.attr('d', `M ${sourceNode.x},${sourceY} A ${dr},${dr} 0
0,${sweep} ${targetNode.x},${targetY}`);
+
+ let m =
_mirror._groups[0][0].getPointAtLength(_mirror._groups[0][0].getTotalLength() -
_configHolder.nodes.child.circle.r - 20);
+
+ dx = m.x - sourceNode.x;
+ dy = m.y - sourceY;
+ dr = Math.sqrt(dx * dx + dy * dy);
+
+ let isLeftToRight = dx > 0 || sourceNode.x === targetNode.x;
+
+ return [sourceNode.x, sourceY, dr, sweep, m.x, m.y, isLeftToRight];
+ }
+
+ const isLeftToRight = (d) => {
+ if (typeof d.isLeftToRight === 'boolean') {
+ return d.isLeftToRight;
+ }
+ const [x1,y1, dr, sweep, x2, y2, isLeftToRight] =
getArcTransitionParameters(d);
+ return isLeftToRight;
+ }
+
relationArcs.enter().insert('path')
.attr('class', 'relation ' +
_configHolder.nodes.relationship.pathClass)
.attr('id', (d) => getPathId(d))
@@ -819,23 +849,11 @@ export function D3Blueprint(container, options) {
.attr('opacity', 1)
.attr('stroke', 'red')
.attr('d', function(d) {
- let targetNode = nodeForEntity(d.target);
- let sourceNode = nodeForEntity(d.source);
- let sourceY = sourceNode.y + (d.source.isMemberSpec() ?
_configHolder.nodes.memberspec.circle.cy : 0);
- let targetY = targetNode.y + (d.target.isMemberSpec() ?
_configHolder.nodes.memberspec.circle.cy : 0);
- let dx = targetNode.x - sourceNode.x;
- let dy = targetY - sourceY;
- let dr = Math.sqrt(dx * dx + dy * dy);
- let sweep = dx * dy > 0 ? 0 : 1;
- _mirror.attr('d', `M ${sourceNode.x},${sourceY} A ${dr},${dr}
0 0,${sweep} ${targetNode.x},${targetY}`);
-
- let m =
_mirror._groups[0][0].getPointAtLength(_mirror._groups[0][0].getTotalLength() -
_configHolder.nodes.child.circle.r - 20);
-
- dx = m.x - sourceNode.x;
- dy = m.y - sourceY;
- dr = Math.sqrt(dx * dx + dy * dy);
-
- return `M ${sourceNode.x},${sourceY} A ${dr},${dr} 0
0,${sweep} ${m.x},${m.y}`;
+ const [x1,y1, dr, sweep, x2, y2, isLeftToRight] =
getArcTransitionParameters(d);
+
+ d.isLeftToRight = isLeftToRight;
+
+ return `M ${x1},${y1} A ${dr},${dr} 0 0,${sweep} ${x2},${y2}`;
});
relationArcs.exit()
@@ -891,7 +909,7 @@ export function D3Blueprint(container, options) {
} else if (d.labelIndex <=
_configHolder.nodes.relationship.labelsToDisplay) {
labelText = d.label;
}
- return labelText;
+ return isLeftToRight(d) ? labelText :
labelText.split("").reverse().join("");
};
relationLabelsEntered.insert('text') // Add text layer of '█'s
to erase the area on the path for label text.
@@ -920,6 +938,7 @@ export function D3Blueprint(container, options) {
.attr('startOffset', '59%') // 59% roughly reflects `middle of the
arch` minus `node radius`.
.insert('tspan')
.attr('dy', getLabelOffset)
+ .attr('rotate', (d) => isLeftToRight(d) ? '0' : '180') // rotate
text if arc goes as right-to-left
.style('z-index', 9)
.on('mouseover', d => {
if (d.labels.length >
_configHolder.nodes.relationship.labelsToDisplay) {
