[brooklyn-ui] branch master updated: Follow arc coordinates after the rotation of member-spec item if parent entity has children

[jc...@apache.org]

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

jcabrerizo 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 678b991  Follow arc coordinates after the rotation of member-spec item if parent entity has children
     new fb8a06a  Merge pull request #314 from algairim/composer-improvements
678b991 is described below

commit 678b991f813d3d5449a27eb4f9933ad152e712f1
Author: Mykola Mandra <my...@cloudsoft.io>
AuthorDate: Fri Feb 11 14:48:14 2022 +0000

    Follow arc coordinates after the rotation of member-spec item if parent entity has children
    
    Signed-off-by: Mykola Mandra <my...@cloudsoft.io>
---
 .../app/components/util/d3-blueprint.js            | 40 ++++++++++++++++------
 1 file changed, 30 insertions(+), 10 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 6c4d42e..1408baa 100755
--- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
+++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
@@ -133,6 +133,7 @@ export function D3Blueprint(container, options) {
                 }
             },
             memberspec: {
+                rotationAngle: -45, // Rotate if parent has children
                 circle: {
                     r: 35,
                     cx: 0,
@@ -831,26 +832,45 @@ export function D3Blueprint(container, options) {
 
         let relationArcs = _relationArcs.selectAll('.relation').data(arcsData, (d) => getPathId(d));
 
+        // Returns node coordinates with adjustment for member spec rotation if present.
+        const getNodeCoordinates = (entity) => {
+            let _node = nodeForEntity(entity);
+            let _x = _node.x;
+            let _y = _node.y;
+
+            if (entity.isMemberSpec()) {
+                _y += _configHolder.nodes.memberspec.circle.cy;
+                if (entity.parent.hasChildren()) {
+                    // follow the rotation as for 'specNodeData'
+                    let _radius = _configHolder.nodes.memberspec.circle.cy;
+                    let _theta = Math.PI * 2 * _configHolder.nodes.memberspec.rotationAngle / 360;
+                    _x += _radius * Math.cos(_theta);
+                    _y -= _radius - Math.abs(_radius * Math.sin(_theta));
+                }
+            }
+
+            return [_x, _y];
+        };
+
         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 [targetX, targetY] = getNodeCoordinates(d.target);
+            let [sourceX, sourceY] = getNodeCoordinates(d.source);
+            let dx = targetX - sourceX;
             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}`);
+            _mirror.attr('d', `M ${sourceX},${sourceY} A ${dr},${dr} 0 0,${sweep} ${targetX},${targetY}`);
 
             let m = _mirror._groups[0][0].getPointAtLength(_mirror._groups[0][0].getTotalLength() - _configHolder.nodes.child.circle.r - 20);
 
-            dx = m.x - sourceNode.x;
+            dx = m.x - sourceX;
             dy = m.y - sourceY;
+
             dr = Math.sqrt(dx * dx + dy * dy);
 
-            let isLeftToRight = dx > 0 || sourceNode.x === targetNode.x;
+            let isLeftToRight = dx > 0 || sourceX === targetX;
 
-            return [sourceNode.x, sourceY, dr, sweep, m.x, m.y, isLeftToRight];
+            return [sourceX, sourceY, dr, sweep, m.x, m.y, isLeftToRight];
         }
 
         const isLeftToRight = (d) => {
@@ -1102,7 +1122,7 @@ export function D3Blueprint(container, options) {
             .attr('transform', (d)=>(`translate(${d.x}, ${d.y})`));
         specNodeData.transition()
             .duration(_configHolder.transition)
-            .attr('transform', (d)=>(`translate(${d.x}, ${d.y}) rotate(${d.data.hasChildren() ? -45 : 0})`));
+            .attr('transform', (d)=>(`translate(${d.x}, ${d.y}) rotate(${d.data.hasChildren() ? _configHolder.nodes.memberspec.rotationAngle : 0})`));
         specNodeData.exit()
             .transition()
             .duration(_configHolder.transition)