[brooklyn-ui] 02/04: Add shadow styling for nodes in blueprint graph; drop shadow over selected node in DSL mode.

[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 493c872dc494709b936dbc4ad2611968a6625a11
Author: Mykola Mandra <my...@cloudsoft.io>
AuthorDate: Mon Aug 9 11:29:07 2021 +0100

    Add shadow styling for nodes in blueprint graph; drop shadow over selected node in DSL mode.
    
    Signed-off-by: Mykola Mandra <my...@cloudsoft.io>
---
 .../app/components/designer/designer.directive.js  |  2 ++
 .../app/components/designer/designer.less          |  3 +++
 .../app/components/util/d3-blueprint.js            | 30 +++++++++++++++++++++-
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/ui-modules/blueprint-composer/app/components/designer/designer.directive.js b/ui-modules/blueprint-composer/app/components/designer/designer.directive.js
index 0ca6061..19146a2 100644
--- a/ui-modules/blueprint-composer/app/components/designer/designer.directive.js
+++ b/ui-modules/blueprint-composer/app/components/designer/designer.directive.js
@@ -160,6 +160,8 @@ export function designerDirective($log, $state, $q, $rootScope, iconGenerator, c
                         const blueprint = blueprintService.get();
                         if (blueprint.isInDslEdit) {
                             $rootScope.$broadcast('d3.entity-selected', event.detail.entity);
+                            blueprintGraph.hideShadow();
+                            blueprintGraph.dropShadow(event.detail.entity._id);
                         } else {
                             $state.go(graphicalEditEntityState, {entityId: event.detail.entity._id});
                         }
diff --git a/ui-modules/blueprint-composer/app/components/designer/designer.less b/ui-modules/blueprint-composer/app/components/designer/designer.less
index 272314a..19570ad 100644
--- a/ui-modules/blueprint-composer/app/components/designer/designer.less
+++ b/ui-modules/blueprint-composer/app/components/designer/designer.less
@@ -74,6 +74,9 @@ designer {
                 stroke-width: 6px;
                 stroke-alignment: inner;
             }
+            &.drop-shadow {
+                filter: drop-shadow(5px 5px 5px rgb(122, 122, 128));
+            }
             &.highlighted {
                 stroke: lighten(@color-selected, 20%);
                 stroke-width: 6px;
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 eafecc2..0039398 100755
--- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
+++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
@@ -1226,6 +1226,32 @@ export function D3Blueprint(container, options) {
     }
 
     /**
+     * Drop the shadow over node with ID specified, or all nodes if ID is not specified.
+     * @param id The ID of the node to drop shadow over.
+     */
+    function dropShadow(id) {
+        console.log('[drop]', id);
+        if (id) {
+            _svg.select(`#entity-${id}`).classed('drop-shadow', true);
+        } else {
+            _svg.selectAll('.entity').classed('drop-shadow', true);
+        }
+    }
+
+    /**
+     * Hide the shadow of node with ID specified, or all nodes if ID is not specified.
+     * @param id The ID of the node to hide shadow of.
+     */
+    function hideShadow(id) {
+        console.log('[hide]', id);
+        if (id) {
+            _svg.select(`#entity-${id}`).classed('drop-shadow', false);
+        } else {
+            _svg.selectAll('.entity').classed('drop-shadow', false);
+        }
+    }
+
+    /**
      * Draw menu with a confirmation request on the canvas for a node with a specified ID, under the node, in the middle.
      *
      * Single-selection mode offers choices as buttons:
@@ -1462,6 +1488,8 @@ export function D3Blueprint(container, options) {
         center: center,
         select: selectNode,
         confirm: confirmNode,
-        unselect: unselectNode
+        unselect: unselectNode,
+        dropShadow: dropShadow,
+        hideShadow: hideShadow,
     };
 }