[brooklyn-ui] 03/05: layers can be extended or overridden by composerOverrides, and code tidy

[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 7c23bdcf9b4d1cdaf15d4588f2ee64a7714f199e
Author: Alex Heneveld <al...@cloudsoftcorp.com>
AuthorDate: Mon May 31 22:35:37 2021 +0100

    layers can be extended or overridden by composerOverrides, and code tidy
---
 .../app/components/util/d3-blueprint.js            |  6 ++++++
 .../app/views/main/main.controller.js              | 25 ++++++++++++++++------
 2 files changed, 24 insertions(+), 7 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 eb23e80..e65507f 100755
--- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
+++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
@@ -565,6 +565,12 @@ export function D3Blueprint(container, options) {
         let nodeData = _nodeGroup.selectAll('g.node')
             .data(_d3DataHolder.visible.nodes, (d)=>(`node-${d.data._id}`));
 
+        // if desired to let overrides customize things, could leverage two functions on the seletions,
+        // TBC whether in enter or draw or etc (and note, by exposing just the first, callers can use the second)
+        //    .call( fn /* runs on the selection */ )
+        //    .each( fn /* runs on each Node */ )
+
+
         // Draw group that contains all SVG element: node representation and location/policies/enricher indicators
         // -----------------------------------------------------
         let nodeGroup = nodeData
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 0e55db4..90f97b6 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 = [
+const LAYERS = [
     {
         id: 'locations',
         label: 'Locations',
@@ -54,7 +54,7 @@ const layers = [
         active: true
     }
 ];
-const layerCacheKey = 'blueprint-composer.layers';
+const LAYER_CACHE_KEY = 'blueprint-composer.layers';
 
 export function MainController($scope, $element, $log, $state, $stateParams, brBrandInfo, blueprintService, actionService, tabService, catalogApi, applicationApi, brSnackbar, brBottomSheet, composerOverrides, edit, yaml) {
     $scope.$emit(HIDE_INTERSTITIAL_SPINNER_EVENT);
@@ -69,18 +69,29 @@ export function MainController($scope, $element, $log, $state, $stateParams, brB
         vm.mode = toState;
     });
 
-    vm.layers = localStorage && localStorage.getItem(layerCacheKey) !== null ?
-        JSON.parse(localStorage.getItem(layerCacheKey)) :
-        layers;
+    let layersM = {};
+    (composerOverrides.getLayers() || LAYERS).forEach(l => layersM[l.id] = l);
+
+    let layersL = localStorage && localStorage.getItem(LAYER_CACHE_KEY) !== null && JSON.parse(localStorage.getItem(LAYER_CACHE_KEY));
+    if (layersL) layersL.forEach(l => { if (layersM[l.id]) layersM[l.id] = Object.assign({}, layersM[l.id], l); });
+    vm.layers = Object.values(layersM);
+
     $scope.$watch('vm.layers', ()=> {
         vm.layers.forEach(layer => {
             document.querySelectorAll(layer.selector).forEach(node => {
-                angular.element(node).css('display', layer.active ? 'block' : 'none');
+                // TODO does $watch approach give any newly created nodes/relationships the right display?
+
+                // if (layer.apply) {
+                //     // layers could supply custom layer behaviour (including via composer overrides)
+                //     layer.apply(node, layer, angular.element(node));
+                // } else {
+                    angular.element(node).css('display', layer.active ? 'block' : 'none');
+                // }
             });
         });
         if (localStorage) {
             try {
-                localStorage.setItem(layerCacheKey, JSON.stringify(vm.layers));
+                localStorage.setItem(LAYER_CACHE_KEY, JSON.stringify(vm.layers));
             } catch (ex) {
                 $log.error('Cannot save layers preferences: ' + ex.message);
             }