frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Allow config nodes to be selected in sidebar and deleted

This commit is contained in:
Nick O'Leary 2018-11-03 21:32:38 +00:00
parent 47de85b012
commit 7436e01188
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
4 changed files with 159 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/node_modules/@node-red/editor-client/src/js/keymap.json vendored
View File

@ -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",

40
packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js vendored
View File

@ -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>';

83
packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js vendored
View File

@ -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) {

70
packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss vendored
View File

@ -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;