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
The following commit(s) were added to refs/heads/master by this push:
new ac51021 Close confirmation menu if user clicks elswhere on the canvas
new c05c42a This closes #231
ac51021 is described below
commit ac51021330f94d03252ed5e5d722f2b1167c7531
Author: Mykola Mandra <[email protected]>
AuthorDate: Tue Jun 22 12:19:42 2021 +0100
Close confirmation menu if user clicks elswhere on the canvas
Signed-off-by: Mykola Mandra <[email protected]>
---
.../app/components/util/d3-blueprint.js | 24 ++++++++++++++++++----
1 file changed, 20 insertions(+), 4 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 e94c9d6..46bc323 100755
--- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
+++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
@@ -24,7 +24,8 @@ import marked from 'marked';
import _ from 'lodash';
export function D3Blueprint(container, options) {
- let _svg = d3.select(container).append('svg').attr('class',
'blueprint-canvas');
+ let _container = d3.select(container);
+ let _svg = _container.append('svg').attr('class', 'blueprint-canvas');
let _mirror = _svg.append('path').style('display', 'none');
let _zoomGroup = _svg.append('g').attr('class', 'zoom-group');
let _parentGroup = _zoomGroup.append('g').attr('class', 'parent-group');
@@ -546,7 +547,7 @@ export function D3Blueprint(container, options) {
let root = d3.hierarchy(blueprint);
tree(root);
- _d3DataHolder.nodes = root.descendants();
+ _d3DataHolder.nodes = root.descendants().reverse();
_d3DataHolder.links = root.links();
_d3DataHolder.relationships = relationships;
@@ -1179,9 +1180,12 @@ export function D3Blueprint(container, options) {
}
confirmationElement.remove();
confirmationElement = null;
+ } else {
+ // NOOP. The user user clicks on the 'X' button or elsewhere
on the canvas to close the menu.
}
}
+ // Add 'X' close button at the top-right.
let close = () => reply(null);
confirmation
.append('xhtml:i')
@@ -1191,6 +1195,9 @@ export function D3Blueprint(container, options) {
.attr('class', 'fa fa-fw fa-times remove-spec-configuration')
.on('click', close);
+ // Listen to 'click-svg' to close the menu when user clicks elsewhere
on the canvas.
+ _container.on('click-svg', close);
+
// Render the menu content based on multi-selection condition.
if (isMultiSelection) {
@@ -1217,7 +1224,10 @@ export function D3Blueprint(container, options) {
}
}
+ // Add check-boxes.
choices.forEach(choice => {
+
+ // Add check-box for every `choice` option.
let confirmationCheckboxDiv = confirmation
.append('xhtml:div')
.attr('class', 'checkbox');
@@ -1228,11 +1238,14 @@ export function D3Blueprint(container, options) {
.attr('id', (choice.id || choice))
.attr('value', choice)
.on('change', toggleCheckbox);
+
+ // Pre-select the single element in the check-box area.
if (choices.length === 1) {
- // pre-select the single element in the check-box area.
input.attr('checked','');
confirmedChoices.add(choice);
}
+
+ // Display the label with choice text.
confirmationCheckboxDiv
.append('xhtml:label')
.html(choice);
@@ -1245,9 +1258,12 @@ export function D3Blueprint(container, options) {
.attr('class', 'btn btn-outline btn-primary
node-confirmation-button')
.html('Apply')
.on('click', confirmChoice);
+
+ // Disable 'Apply' button until at least one option is selected.
if (choices.length > 1) {
- applyButton.attr('disabled', ''); // Disable 'Apply' button
until at least one option is selected.
+ applyButton.attr('disabled', '');
}
+
} else {
// Render the menu with buttons.
