Allow config nodes to be selected in sidebar and deleted

2025-03-01 10:36:34 +00:00 · 2018-11-03 21:32:38 +00:00
parent 47de85b012
commit 7436e01188
4 changed files with 159 additions and 40 deletions
--- a/packages/node_modules/@node-red/editor-client/src/js/keymap.json
+++ b/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",
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js
+++ b/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 !== "*") {
-                var target = evt.target;
-                while (target.nodeName !== 'BODY' && target.id !== handler.scope) {
-                    target = target.parentElement;
-                }
-                if (target.nodeName === 'BODY') {
-                    handler = null;
+            } else {
+                var depth = Infinity;
+                var matchedHandler;
+                var i = 0;
+                var l = handler.handlers.length;
+                for (i=0;i<l;i++) {
+                    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>';
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js
+++ b/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) {
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss
@@ -22,32 +22,50 @@
    @include disable-selection;
 }

- .config-node-list {
-     margin: 0;
-     list-style-type: none;
-
-          .palette_label {
-              margin-left: 8px;
-              line-height: 24px;
-              text-align: left;
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-          }
-          .palette_icon_container {
-              font-size: 12px;
-              line-height: 30px;
-              background-color: #e8e8e8;
-              border-top-right-radius: 4px;
-              border-bottom-right-radius: 4px;
-          }
- }
- .config_node {
-     width: 160px;
-     height: 30px;
-     background: #f3f3f3;
-     color: #666;
-     cursor: pointer;
+.config-node-list {
+    margin: 0;
+    list-style-type: none;
+    .palette_node {
+        overflow: hidden;
+        &.selected {
+            border-color: $node-selected-color;
+            background-color: #eee;
+        }
+    }
+    .palette_label {
+        margin-left: 8px;
+        line-height: 24px;
+        text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .palette_icon_container {
+        font-size: 12px;
+        line-height: 30px;
+        background-color: #e8e8e8;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        a {
+            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;