[brooklyn-ui] branch master updated: Make relationship path and label selector configurable

[iuliana]

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 600d69a  Make relationship path and label selector configurable
     new 80380b3  Merge pull request #233 from 
algairim/relationship-selector-refactoring
600d69a is described below

commit 600d69afe0d5c7cf8269a1666463eff658fdadec
Author: Mykola Mandra <mykola.man...@cloudsoftcorp.com>
AuthorDate: Wed Jun 23 18:00:34 2021 +0100

    Make relationship path and label selector configurable
    
    Signed-off-by: Mykola Mandra <mykola.man...@cloudsoftcorp.com>
---
 .../app/components/providers/blueprint-service.provider.js            | 4 +++-
 ui-modules/blueprint-composer/app/components/util/d3-blueprint.js     | 4 +++-
 ui-modules/blueprint-composer/app/views/main/main.controller.js       | 2 +-
 ui-modules/blueprint-composer/app/views/main/main.less                | 3 +++
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git 
a/ui-modules/blueprint-composer/app/components/providers/blueprint-service.provider.js
 
b/ui-modules/blueprint-composer/app/components/providers/blueprint-service.provider.js
index e7e2a62..b5b23a3 100644
--- 
a/ui-modules/blueprint-composer/app/components/providers/blueprint-service.provider.js
+++ 
b/ui-modules/blueprint-composer/app/components/providers/blueprint-service.provider.js
@@ -92,7 +92,9 @@ function BlueprintService($log, $q, $sce, paletteApi, 
iconGenerator, dslService,
                 return {
                     source: entity,
                     target: relation.entity,
-                    label: relation.name
+                    label: relation.name,
+                    pathSelector: 'relation', // the CSS class for path
+                    labelSelector: 'relation-label', // the CSS class for label
                 };
             });
         }
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 9c8a70c..0b91ea1 100755
--- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
+++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
@@ -781,7 +781,7 @@ export function D3Blueprint(container, options) {
 
         // Draw the relationship path
         relationDataEntered.insert('path')
-            .attr('class', 'relation')
+            .attr('class', (d) => (d.pathSelector))
             .attr('id', (d)=>(d.source._id + '-' + d.target._id))
             .attr('opacity', 0)
             .attr('from', (d)=>(d.source._id))
@@ -792,6 +792,7 @@ export function D3Blueprint(container, options) {
         // NOTE `textPath` DECREASES THE UI PERFORMANCE, USE LABELS WITH 
CAUTION.
         let relationDataLabelsEntered = relationDataEntered.filter(d => 
d.label);
         relationDataLabelsEntered.insert('text') // Add text layer of 
'&#9608;'s to erase the area on the path.
+            .attr('class', (d) => (d.labelSelector))
             .attr('dominant-baseline', 'middle')
             .attr('text-anchor', 'middle')
             .attr('font-family', 'monospace')
@@ -801,6 +802,7 @@ export function D3Blueprint(container, options) {
                 .attr('startOffset', '59%') // 59% roughly reflects `middle of 
the arch` minus `node radius`.
                 .html((d) => ('&#9608;'.repeat(d.label.length + 2)));
         relationDataLabelsEntered.insert('text') // Add label text on top of 
'&#9608;'s which is on top of the path.
+            .attr('class', (d) => (d.labelSelector))
             .attr('dominant-baseline', 'middle')
             .attr('text-anchor', 'middle')
             .attr('font-family', 'monospace')
diff --git a/ui-modules/blueprint-composer/app/views/main/main.controller.js 
b/ui-modules/blueprint-composer/app/views/main/main.controller.js
index 3e4520b..3a4379c 100644
--- a/ui-modules/blueprint-composer/app/views/main/main.controller.js
+++ b/ui-modules/blueprint-composer/app/views/main/main.controller.js
@@ -28,7 +28,7 @@ import {graphicalEditSpecState} from 
'./graphical/edit/spec/edit.spec.controller
 import bottomSheetTemplate from './bottom-sheet.template.html';
 import {ISSUE_LEVEL} from '../../components/util/model/issue.model';
 
-const LAYERS = [
+export const LAYERS = [
     {
         id: 'locations',
         label: 'Locations',
diff --git a/ui-modules/blueprint-composer/app/views/main/main.less 
b/ui-modules/blueprint-composer/app/views/main/main.less
index 8e38515..6d5818f 100644
--- a/ui-modules/blueprint-composer/app/views/main/main.less
+++ b/ui-modules/blueprint-composer/app/views/main/main.less
@@ -87,6 +87,9 @@
     text-align: center;
     padding-top: 7px;
   }
+  .dropdown-menu {
+    width: inherit;
+  }
   .tab-content {
     width: 100%;
     background: transparent;