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 <mykola.man...@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 <mykola.man...@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, }; }