Detect delete/backspace key in blueprint-composer
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/68ed4d93 Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/68ed4d93 Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/68ed4d93 Branch: refs/heads/master Commit: 68ed4d93e32b24f1e79640dab6931bec579221fe Parents: 44eccff Author: Paul Campbell <paul.campb...@cloudsoft.io> Authored: Mon Aug 27 13:04:18 2018 +0100 Committer: Paul Campbell <paul.campb...@cloudsoft.io> Committed: Mon Aug 27 15:31:25 2018 +0100 ---------------------------------------------------------------------- .../app/components/util/d3-blueprint.js | 31 ++++++++++++++++++++ 1 file changed, 31 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/68ed4d93/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js ---------------------------------------------------------------------- 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 da3e090..4d5ff2d 100755 --- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js +++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js @@ -314,6 +314,34 @@ export function D3Blueprint(container) { } /** + * Triggered when a key is release on the page. + * + * * Ignores where key press did not originate from the page body (i.e. ignores input to text fields) + * * Fires a custom event "delete-entity" when the delete key is pressed. + */ + function onKeyUp() { + d3.event.stopPropagation(); + if (d3.event.target.nodeName == 'BODY') { + if (d3.event.key === "Delete" || d3.event.key === "Backspace") { + console.log('-- DELETE/BACKSPACE key outside of text field --'); + // the selected entity: + var selected = _svg.selectAll('.entity.selected'); + var nItemsSelected = selected._groups[0].length; + if (nItemsSelected > 0) { + console.log('Dispatch event to remove node(s)'); + // entity = ... + // let event = new CustomEvent("delete-entity", { + // detail: { + // entity: entity, + // } + // }); + // container.dispatchEvent(event); + } + } + } + } + + /** * Handles the start of a drag operation. Note that this callback is to be used with the internal D3 drag feature. * * @param node The node for the dragged entity @@ -1011,6 +1039,9 @@ export function D3Blueprint(container) { _dropZoneGroup.selectAll('.dropzone').classed('hidden', false); } + // register global key events + d3.select('body').on('keyup.body', onKeyUp); + return { draw: draw, update: update,
