Wiring Editor: Use shortcuts to remove components selected

src/wirecloud/commons/static/js/StyledElements/Utils.js

@@ -920,14 +920,16 @@ if (window.StyledElements == null) {
     // ==================================================================================
 
     var keyCodeMap = {
+        8: 'Backspace',
         9: 'Tab',
         13: 'Enter',
         27: 'Escape',
         32: ' ',
         37: 'ArrowLeft',
         38: 'ArrowUp',
         39: 'ArrowRight',
-        40: 'ArrowDown'
+        40: 'ArrowDown',
+        46: 'Delete'
     };
 
     var keyFixes = {

src/wirecloud/platform/static/js/wirecloud/ui/WiringEditor.js

@@ -63,6 +63,8 @@ Wirecloud.ui = Wirecloud.ui || {};
 
             this.sortableComponent = null;
             this.autoOperatorId = 1;
+
+            this._document_onkeydown_bound = document_onkeydown.bind(this);
         },
 
         inherit: se.Alternative,
@@ -415,6 +417,8 @@ Wirecloud.ui = Wirecloud.ui || {};
         this.workspace.wiring.load(this.toJSON()).save();
         readyView.call(this);
 
+        document.removeEventListener('keydown', this._document_onkeydown_bound);
+
         return this;
     };
 
@@ -444,6 +448,8 @@ Wirecloud.ui = Wirecloud.ui || {};
         readyView.call(this);
         loadWiringStatus.call(this);
 
+        document.addEventListener('keydown', this._document_onkeydown_bound);
+
         return this;
     };
 
@@ -651,6 +657,53 @@ Wirecloud.ui = Wirecloud.ui || {};
         });
     };
 
+    var clearComponentSelection = function clearComponentSelection() {
+        var type, id;
+
+        for (type in this.selectedComponents) {
+            for (id in this.selectedComponents[type]) {
+                this.selectedComponents[type][id].active = false;
+                delete this.selectedComponents[type][id].initialPosition;
+                delete this.selectedComponents[type][id];
+            }
+        }
+
+        this.selectedCount = 0;
+    };
+
+    var document_onkeydown = function document_onkeydown(event) {
+        var type, id, component, componentsToRemove = [];
+
+        switch (utils.normalizeKey(event)) {
+        case 'Backspace':
+        case 'Delete':
+
+            if (hasSelectedComponents.call(this)) {
+
+                for (type in this.selectedComponents) {
+                    for (id in this.selectedComponents[type]) {
+                        component = this.selectedComponents[type][id];
+
+                        if (component.isRemovable()) {
+                            componentsToRemove.push(component);
+                        }
+                    }
+                }
+
+                if (componentsToRemove.length) {
+                    this.behaviourEngine.removeComponentList(componentsToRemove);
+                    clearComponentSelection.call(this);
+                    event.preventDefault();
+                }
+            }
+            break;
+        }
+    };
+
+    var hasSelectedComponents = function hasSelectedComponents() {
+        return Object.keys(this.selectedComponents.operator).length > 0 || Object.keys(this.selectedComponents.widget).length > 0;
+    };
+
     var behaviourengine_onenable = function behaviourengine_onenable(behaviourEngine, enabled) {
         /*jshint validthis:true */
 

src/wirecloud/platform/static/js/wirecloud/ui/WiringEditor/BehaviourEngine.js

@@ -434,13 +434,31 @@
                         }
                     }
                 } else {
-                    delete this.description.components[component.type][component.id];
-                    delete this.components[component.type][component.id];
+                    disabled_removeComponent.call(this, component);
+                }
+
+                return this;
+            },
 
-                    removeConnections.call(this, component, true);
-                    component.remove();
+            removeComponentList: function removeComponentList(componentList) {
+                var i, componentsForModal = [];
 
-                    this.trigger('change', this.getCurrentStatus(), this.enabled);
+                if (this.enabled) {
+                    for (i = 0; i < componentList.length; i++) {
+                        if (this.filterByComponent(componentList[i]).length > 1) {
+                            _removeComponent.call(this, componentList[i], false);
+                        } else {
+                            componentsForModal.push(componentList[i]);
+                        }
+                    }
+
+                    if (componentsForModal.length) {
+                        showComponentListRemoveModal.call(this, componentsForModal);
+                    }
+                } else {
+                    for (i = 0; i < componentList.length; i++) {
+                        disabled_removeComponent.call(this, componentList[i]);
+                    }
                 }
 
                 return this;
@@ -619,6 +637,20 @@
         return this;
     };
 
+    var disabled_removeComponent = function disabled_removeComponent(component) {
+        /*jshint validthis:true */
+
+        delete this.description.components[component.type][component.id];
+        delete this.components[component.type][component.id];
+
+        removeConnections.call(this, component, true);
+        component.remove();
+
+        this.trigger('change', this.getCurrentStatus(), this.enabled);
+
+        return this;
+    };
+
     var desactivateAllExcept = function desactivateAllExcept(behaviour) {
         /*jshint validthis:true */
 
@@ -757,6 +789,38 @@
         return this;
     };
 
+    var showComponentListRemoveModal = function showComponentListRemoveModal(componentList) {
+        /*jshint validthis:true */
+        var i, modal, message = utils.interpolate(utils.gettext("<p>These components only exist within the current behaviour <strong>\"%(title)s\"</strong>:</p>"), {
+            title: this.behaviour.title
+        });
+
+        for (i = 0; i < componentList.length; i++) {
+            message += utils.interpolate(utils.gettext("<p>- The %(type)s <strong>\"%(title)s\"</strong>.</p>"), {
+                    type: componentList[i].type,
+                    title: componentList[i].title
+                });
+        }
+
+        message += utils.gettext("<p>Would you like to continue?</p>");
+
+        modal = new Wirecloud.ui.AlertWindowMenu({
+            acceptLabel: utils.gettext("Continue"),
+            cancelLabel: utils.gettext("Cancel")
+        });
+        modal.setMsg(new se.Fragment(message));
+        modal.acceptHandler = function () {
+            var i;
+
+            for (i = 0; i < componentList.length; i++) {
+                _removeComponent.call(this, componentList[i], false);
+            }
+        }.bind(this);
+        modal.show();
+
+        return this;
+    };
+
     var showComponentDeleteCascadeModal = function showComponentDeleteCascadeModal(component) {
         /*jshint validthis:true */
         var modal, message;

src/wirecloud/platform/static/js/wirecloud/ui/WiringEditor/ComponentDraggable.js

@@ -356,6 +356,10 @@
                 return this.endpoints.source.canSort() || this.endpoints.target.canSort();
             },
 
+            isRemovable = function isRemovable() {
+                return !this.readonly && !this.background;
+            },
+
             /**
              * @override
              */

src/wirecloud/platform/static/js/wirecloud/ui/WiringEditor/ComponentDraggablePrefs.js

@@ -114,7 +114,7 @@
     };
 
     var canDeleteCascade = function canDeleteCascade() {
-        return !this.readonly && !this.background;
+        return this.isRemovable();
     };
 
     var canSortEndpoints = function canSortEndpoints() {

src/wirecloud/platform/wiring/tests.py

@@ -776,6 +776,20 @@ def test_remove_operator_with_two_connections_in_one_endpoint(self):
             component1.remove()
             self.assertEqual(len(wiring.find_connections()), 1)
 
+    def test_remove_components_using_key_delete_when_behaviour_engine_enabled(self):
+        pass
+
+    def test_remove_components_using_key_delete_when_behaviour_engine_disabled(self):
+        # From wiring editor, select (1) one component belonging only to the
+        # current behaviour, (2) one component belonging to the current behaviour
+        # and another behaviour, and (3) one component belonging to another
+        # behaviour. Then, press the key 'Delete' to remove such components.
+        #
+        # In the case (1), the platform should ask to the user.
+        # In the case (2), the platform should remove the component selected.
+        # In the case (3), the platform should ignore the component selected.
+        pass
+
 
 @wirecloud_selenium_test_case
 class ComponentMissingTestCase(WirecloudSeleniumTestCase):