From 68ed4d93e32b24f1e79640dab6931bec579221fe Mon Sep 17 00:00:00 2001 From: Paul Campbell Date: Mon, 27 Aug 2018 13:04:18 +0100 Subject: [PATCH 1/3] Detect delete/backspace key in blueprint-composer --- .../app/components/util/d3-blueprint.js | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) 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 da3e09059..4d5ff2df8 100755 --- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js +++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js @@ -313,6 +313,34 @@ export function D3Blueprint(container) { container.dispatchEvent(event); } + /** + * 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. * @@ -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, From aee74effbc79c203253c2a9cec464d7e65d98811 Mon Sep 17 00:00:00 2001 From: Paul Campbell Date: Mon, 27 Aug 2018 15:11:18 +0100 Subject: [PATCH 2/3] Remove Entity from graph when delete/backspace pressed --- .../app/components/designer/designer.directive.js | 5 +++++ .../app/components/util/d3-blueprint.js | 15 ++++++--------- 2 files changed, 11 insertions(+), 9 deletions(-) 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 240ea968d..2f917451d 100644 --- a/ui-modules/blueprint-composer/app/components/designer/designer.directive.js +++ b/ui-modules/blueprint-composer/app/components/designer/designer.directive.js @@ -173,6 +173,11 @@ export function designerDirective($log, $state, $q, iconGenerator, catalogApi, b }); }); + $element.bind('delete-entity', function (event) { + $log.debug('delete-entity'); + $scope.$broadcast('d3.remove', event.detail.entity); + }); + $element.bind('drop-external-node', event => { let draggedItem = paletteDragAndDropService.draggedItem(); let target = blueprintService.find(event.detail.parentId); 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 4d5ff2df8..c05ccf664 100755 --- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js +++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js @@ -323,19 +323,16 @@ export function D3Blueprint(container) { 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); + let event = new CustomEvent("delete-entity", { + detail: { + entity: selected.data()[0].data, + } + }); + container.dispatchEvent(event); } } } From 38936b594044051071e72b95955a2f486b567b65 Mon Sep 17 00:00:00 2001 From: Paul Campbell Date: Mon, 27 Aug 2018 15:13:29 +0100 Subject: [PATCH 3/3] Polish --- .../blueprint-composer/app/components/util/d3-blueprint.js | 3 +-- 1 file changed, 1 insertion(+), 2 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 c05ccf664..04e26b8ea 100755 --- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js +++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js @@ -323,7 +323,6 @@ export function D3Blueprint(container) { d3.event.stopPropagation(); if (d3.event.target.nodeName == 'BODY') { if (d3.event.key === "Delete" || d3.event.key === "Backspace") { - // the selected entity: var selected = _svg.selectAll('.entity.selected'); var nItemsSelected = selected._groups[0].length; if (nItemsSelected > 0) { @@ -332,7 +331,7 @@ export function D3Blueprint(container) { entity: selected.data()[0].data, } }); - container.dispatchEvent(event); + container.dispatchEvent(event); } } }