Allow config nodes to be selected in sidebar and deleted

packages/node_modules/@node-red/editor-client/src/js/keymap.json

@@ -22,6 +22,12 @@
         "ctrl-g v": "core:show-version-control-tab",
         "ctrl-shift-l": "core:show-event-log"
     },
+    "sidebar-node-config": {
+        "backspace": "core:delete-config-selection",
+        "delete": "core:delete-config-selection",
+        "ctrl-a": "core:select-all-config-nodes",
+        "ctrl-z": "core:undo"
+    },
     "workspace": {
         "backspace": "core:delete-selection",
         "delete": "core:delete-selection",

packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js

@@ -19,7 +19,7 @@ RED.keyboard = (function() {
 
     var handlers = {};
     var partialState;
-
+RED.h = handlers;
     var keyMap = {
         "left":37,
         "up":38,
@@ -161,6 +161,19 @@ RED.keyboard = (function() {
         return [keycode,modifiers];
     }
 
+    function matchHandlerToEvent(evt,handler) {
+        var target = evt.target;
+        var depth = 0;
+        while (target.nodeName !== 'BODY' && target.id !== handler.scope) {
+            target = target.parentElement;
+            depth++;
+        }
+        if (target.nodeName === 'BODY' && handler.scope !== "*") {
+            depth = -1;
+        }
+        return depth;
+    }
+
     function resolveKeyEvent(evt) {
         var slot = partialState||handlers;
         if (evt.ctrlKey || evt.metaKey) {
@@ -175,7 +188,7 @@ RED.keyboard = (function() {
         var keyCode = firefoxKeyCodeMap[evt.keyCode] || evt.keyCode;
         if (slot && slot[keyCode]) {
             var handler = slot[keyCode];
-            if (!handler.scope) {
+            if (!handler.handlers) {
                 if (partialState) {
                     partialState = null;
                     return resolveKeyEvent(evt);
@@ -186,14 +199,19 @@ RED.keyboard = (function() {
                 } else {
                     return null;
                 }
-            } else if (handler.scope && handler.scope !== "*") {
+            } else {
-                var target = evt.target;
+                var depth = Infinity;
-                while (target.nodeName !== 'BODY' && target.id !== handler.scope) {
+                var matchedHandler;
-                    target = target.parentElement;
+                var i = 0;
-                }
+                var l = handler.handlers.length;
-                if (target.nodeName === 'BODY') {
+                for (i=0;i<l;i++) {
-                    handler = null;
+                    var d = matchHandlerToEvent(evt,handler.handlers[i]);
+                    if (d > -1 && d < depth) {
+                        depth = d;
+                        matchedHandler = handler.handlers[i];
+                    }
                 }
+                handler = matchedHandler;
             }
             partialState = null;
             return handler;
@@ -265,6 +283,8 @@ RED.keyboard = (function() {
             slot = slot[key];
             //slot[key] = {scope: scope, ondown:cbdown};
         }
+        slot.handlers = slot.handlers || [];
+        slot.handlers.push({scope:scope,ondown:cbdown})
         slot.scope = scope;
         slot.ondown = cbdown;
     }
@@ -315,6 +335,8 @@ RED.keyboard = (function() {
         }
         delete slot.scope;
         delete slot.ondown;
+        // TODO: this wipes everything! Need to have something to identify handler
+        delete slot.handlers;
     }
 
     var cmdCtrlKey = '<span class="help-key">'+(isMac?'&#8984;':'Ctrl')+'</span>';

packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js

@@ -18,11 +18,13 @@ RED.sidebar.config = (function() {
 
     var content = document.createElement("div");
     content.className = "sidebar-node-config";
+    content.id = "sidebar-node-config";
+    content.tabIndex = 0;
 
-    $('<div class="button-group sidebar-header">'+
+    $('<div class="sidebar-header"><span class="button-group">'+
       '<a class="sidebar-header-button-toggle selected" id="workspace-config-node-filter-all" href="#"><span data-i18n="sidebar.config.filterAll"></span></a>'+
       '<a class="sidebar-header-button-toggle" id="workspace-config-node-filter-unused" href="#"><span data-i18n="sidebar.config.filterUnused"></span></a> '+
-      '</div>'
+      '</span></div>'
     ).appendTo(content);
 
 
@@ -138,15 +140,32 @@ RED.sidebar.config = (function() {
                 }
 
                 var entry = $('<li class="palette_node config_node palette_node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list);
+                entry.data('node',node.id);
                 $('<div class="palette_label"></div>').text(label).appendTo(entry);
                 if (node._def.hasUsers !== false) {
                     var iconContainer = $('<div/>',{class:"palette_icon_container palette_icon_container_right"}).appendTo(entry);
-                    var butt = $('<a href="#"/>').click(function(e) { e.preventDefault(); RED.search.show(node.id); }).text(node.users.length).appendTo(iconContainer);
+                    if (node.users.length === 0) {
+                        iconContainer.text(0);
+                    } else {
+                        $('<a href="#"/>').click(function(e) {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            RED.search.show(node.id);
+                        }).text(node.users.length).appendTo(iconContainer);
+                    }
+                    RED.popover.tooltip(iconContainer,RED._('editor.nodesUse',{count:node.users.length}));
                     if (node.users.length === 0) {
                         entry.addClass("config_node_unused");
                     }
                 }
                 entry.on('click',function(e) {
+                    RED.view.select(false);
+                    if (e.metaKey) {
+                        $(this).toggleClass("selected");
+                    } else {
+                        $(content).find(".palette_node").removeClass("selected");
+                        $(this).addClass("selected");
+                    }
                     RED.sidebar.info.refresh(node);
                 });
                 entry.on('dblclick',function(e) {
@@ -225,7 +244,60 @@ RED.sidebar.config = (function() {
             action: "core:show-config-tab",
             onchange: function() { refreshConfigNodeList(); }
         });
-        RED.actions.add("core:show-config-tab",function() {RED.sidebar.show('config')});
+        RED.actions.add("core:show-config-tab", function() {RED.sidebar.show('config')});
+        RED.actions.add("core:select-all-config-nodes", function() {
+            $(content).find(".palette_node").addClass("selected");
+        })
+        RED.actions.add("core:delete-config-selection", function() {
+            var selectedNodes = [];
+            $(content).find(".palette_node.selected").each(function() {
+                selectedNodes.push($(this).data('node'));
+            });
+            if (selectedNodes.length > 0) {
+                var historyEvent = {
+                    t:'delete',
+                    nodes:[],
+                    changes: {},
+                    dirty: RED.nodes.dirty()
+                }
+                selectedNodes.forEach(function(id) {
+                    var node = RED.nodes.node(id);
+                    try {
+                        if (node._def.oneditdelete) {
+                            node._def.oneditdelete.call(node);
+                        }
+                    } catch(err) {
+                        console.log("oneditdelete",node.id,node.type,err.toString());
+                    }
+                    historyEvent.nodes.push(node);
+                    for (var i=0;i<node.users.length;i++) {
+                        var user = node.users[i];
+                        historyEvent.changes[user.id] = {
+                            changed: user.changed,
+                            valid: user.valid
+                        };
+                        for (var d in user._def.defaults) {
+                            if (user._def.defaults.hasOwnProperty(d) && user[d] == id) {
+                                historyEvent.changes[user.id][d] = id
+                                user[d] = "";
+                                user.changed = true;
+                                user.dirty = true;
+                            }
+                        }
+                        RED.editor.validateNode(user);
+                    }
+                    RED.nodes.remove(id);
+                })
+                RED.nodes.dirty(true);
+                RED.view.redraw(true);
+                RED.history.push(historyEvent);
+            }
+        });
+
+
+        RED.events.on("view:selection-changed",function() {
+            $(content).find(".palette_node").removeClass("selected");
+        });
 
         $("#workspace-config-node-collapse-all").on("click", function(e) {
             e.preventDefault();
@@ -263,7 +335,8 @@ RED.sidebar.config = (function() {
                 refreshConfigNodeList();
             }
         });
-
+        RED.popover.tooltip($('#workspace-config-node-filter-all'),"Show all config nodes");
+        RED.popover.tooltip($('#workspace-config-node-filter-unused'),"Show all unused config nodes");
 
     }
     function show(id) {

packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss

@@ -22,32 +22,50 @@
     @include disable-selection;
 }
 
- .config-node-list {
+.config-node-list {
-     margin: 0;
+    margin: 0;
-     list-style-type: none;
+    list-style-type: none;
-
+    .palette_node {
-          .palette_label {
+        overflow: hidden;
-              margin-left: 8px;
+        &.selected {
-              line-height: 24px;
+            border-color: $node-selected-color;
-              text-align: left;
+            background-color: #eee;
-              white-space: nowrap;
+        }
-              overflow: hidden;
+    }
-              text-overflow: ellipsis;
+    .palette_label {
-          }
+        margin-left: 8px;
-          .palette_icon_container {
+        line-height: 24px;
-              font-size: 12px;
+        text-align: left;
-              line-height: 30px;
+        white-space: nowrap;
-              background-color: #e8e8e8;
+        overflow: hidden;
-              border-top-right-radius: 4px;
+        text-overflow: ellipsis;
-              border-bottom-right-radius: 4px;
+    }
-          }
+    .palette_icon_container {
- }
+        font-size: 12px;
- .config_node {
+        line-height: 30px;
-     width: 160px;
+        background-color: #e8e8e8;
-     height: 30px;
+        border-top-right-radius: 4px;
-     background: #f3f3f3;
+        border-bottom-right-radius: 4px;
-     color: #666;
+        a {
-     cursor: pointer;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            color: #666;
+            &:hover {
+                text-decoration: none;
+                background: #ccc;
+            }
+        }
+    }
+}
+.config_node {
+    width: 160px;
+    height: 30px;
+    background: #f3f3f3;
+    color: #666;
+    cursor: pointer;
 }
 .config_node_type {
     color: #999;