Enable individual flow nodes to be disabled

This commit is contained in:
Nick O'Leary 2019-06-14 22:12:47 +01:00
parent 70cf7b0c5a
commit 41a0af032c
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
8 changed files with 106 additions and 69 deletions

View File

@ -463,7 +463,9 @@ RED.nodes = (function() {
node.id = n.id; node.id = n.id;
node.type = n.type; node.type = n.type;
node.z = n.z; node.z = n.z;
if (n.d === true) {
node.d = true;
}
if (node.type == "unknown") { if (node.type == "unknown") {
for (var p in n._orig) { for (var p in n._orig) {
if (n._orig.hasOwnProperty(p)) { if (n._orig.hasOwnProperty(p)) {
@ -1016,6 +1018,9 @@ RED.nodes = (function() {
if (n.hasOwnProperty('l')) { if (n.hasOwnProperty('l')) {
node.l = n.l; node.l = n.l;
} }
if (n.hasOwnProperty('d')) {
node.d = n.d;
}
if (createNewIds) { if (createNewIds) {
if (subflow_blacklist[n.z]) { if (subflow_blacklist[n.z]) {
continue; continue;

View File

@ -42,12 +42,11 @@
var enabledLabel = this.options.enabledLabel || RED._("editor:workspace.enabled"); var enabledLabel = this.options.enabledLabel || RED._("editor:workspace.enabled");
var disabledLabel = this.options.disabledLabel || RED._("editor:workspace.disabled"); var disabledLabel = this.options.disabledLabel || RED._("editor:workspace.disabled");
this.element.addClass("red-ui-toggleButton");
this.element.css("display","none"); this.element.css("display","none");
this.element.on("focus", function() { this.element.on("focus", function() {
that.button.focus(); that.button.focus();
}); });
this.button = $('<button type="button" class="'+baseClass+' toggle single"><i class="fa"></i> <span></span></button>'); this.button = $('<button type="button" class="red-ui-toggleButton '+baseClass+' toggle single"><i class="fa"></i> <span></span></button>');
if (this.options.class) { if (this.options.class) {
this.button.addClass(this.options.class) this.button.addClass(this.options.class)
} }

View File

@ -955,34 +955,19 @@ RED.editor = (function() {
$('<div class="form-row">'+ $('<div class="form-row">'+
'<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+ '<label for="node-input-show-label-btn" data-i18n="editor.label"></label>'+
'<button type="button" id="node-input-show-label-btn" class="red-ui-button" style="min-width: 80px; text-align: left;" type="button"><i id="node-input-show-label-btn-i" class="fa fa-toggle-on"></i> <span id="node-input-show-label-label"></span></button> '+ '<input type="checkbox" id="node-input-show-label"/>'+
'<input type="checkbox" id="node-input-show-label" style="display: none;"/>'+
'</div>').appendTo(dialogForm); '</div>').appendTo(dialogForm);
var setToggleState = function(state) { $("#node-input-show-label").toggleButton({
var i = $("#node-input-show-label-btn-i"); enabledLabel: RED._("editor.show"),
if (!state) { disabledLabel: RED._("editor.hide")
i.addClass('fa-toggle-off');
i.removeClass('fa-toggle-on');
$("#node-input-show-label").prop("checked",false);
$("#node-input-show-label-label").text(RED._("editor.hide"));
} else {
i.addClass('fa-toggle-on');
i.removeClass('fa-toggle-off');
$("#node-input-show-label").prop("checked",true);
$("#node-input-show-label-label").text(RED._("editor.show"));
}
}
dialogForm.find('#node-input-show-label-btn').on("click",function(e) {
e.preventDefault();
var i = $("#node-input-show-label-btn-i");
setToggleState(i.hasClass('fa-toggle-off'));
}) })
if (!node.hasOwnProperty("l")) { if (!node.hasOwnProperty("l")) {
// Show label if type not link // Show label if type not link
node.l = !/^link (in|out)$/.test(node._def.type); node.l = !/^link (in|out)$/.test(node._def.type);
} }
setToggleState(node.l); $("#node-input-show-label").prop("checked",node.l).trigger("change");
// If a node has icon property in defaults, the icon of the node cannot be modified. (e.g, ui_button node in dashboard) // If a node has icon property in defaults, the icon of the node cannot be modified. (e.g, ui_button node in dashboard)
if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) { if ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) {
@ -1396,6 +1381,20 @@ RED.editor = (function() {
node.l = true; node.l = true;
} }
} }
if ($("#node-input-node-disabled").prop('checked')) {
if (node.d !== true) {
changes.d = node.d;
changed = true;
node.d = true;
}
} else {
if (node.d === true) {
changes.d = node.d;
changed = true;
delete node.d;
}
}
node.resize = true; node.resize = true;
var oldInfo = node.info; var oldInfo = node.info;
@ -1498,6 +1497,12 @@ RED.editor = (function() {
var trayBody = tray.find('.red-ui-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
trayBody.parent().css('overflow','hidden'); trayBody.parent().css('overflow','hidden');
var trayFooterLeft = $('<div class="red-ui-tray-footer-left"></div>').appendTo(trayFooter)
$('<input id="node-input-node-disabled" type="checkbox">').prop("checked",!!node.d).appendTo(trayFooterLeft).toggleButton({
invertState: true
})
var editorTabEl = $('<ul></ul>').appendTo(trayBody); var editorTabEl = $('<ul></ul>').appendTo(trayBody);
var editorContent = $('<div></div>').appendTo(trayBody); var editorContent = $('<div></div>').appendTo(trayBody);
@ -1675,9 +1680,15 @@ RED.editor = (function() {
var trayHeader = tray.find(".red-ui-tray-header"); var trayHeader = tray.find(".red-ui-tray-header");
var trayBody = tray.find('.red-ui-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var trayFooter = tray.find(".red-ui-tray-footer"); var trayFooter = tray.find(".red-ui-tray-footer");
var userCountDiv;
var trayFooterLeft = $('<div class="red-ui-tray-footer-left"></div>').appendTo(trayFooter)
$('<input type="checkbox">').appendTo(trayFooterLeft).toggleButton({
invertState: true
})
if (node_def.hasUsers !== false) { if (node_def.hasUsers !== false) {
userCountDiv = $('<div class="red-ui-tray-footer-left"><i class="fa fa-info-circle"></i> <span></span></div>').prependTo(trayFooter); $('<span><i class="fa fa-info-circle"></i> <span id="red-ui-editor-config-user-count"></span></span>').css("margin-left", "10px").appendTo(trayFooterLeft);
} }
trayFooter.append('<span class="red-ui-tray-footer-right"><span id="red-ui-editor-config-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="red-ui-editor-config-scope"></select></span>'); trayFooter.append('<span class="red-ui-tray-footer-right"><span id="red-ui-editor-config-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="red-ui-editor-config-scope"></select></span>');
@ -1771,8 +1782,8 @@ RED.editor = (function() {
} }
}); });
} }
if (node_def.hasUsers !== false && userCountDiv) { if (node_def.hasUsers !== false) {
userCountDiv.find("span").text(RED._("editor.nodesUse", {count:editing_config_node.users.length})).parent().show(); $("#red-ui-editor-config-user-count").text(RED._("editor.nodesUse", {count:editing_config_node.users.length})).parent().show();
} }
trayBody.i18n(); trayBody.i18n();
trayFooter.i18n(); trayFooter.i18n();

View File

@ -2929,6 +2929,7 @@ RED.view = (function() {
d.resize = false; d.resize = false;
} }
var thisNode = d3.select(this); var thisNode = d3.select(this);
thisNode.classed("red-ui-flow-node-disabled", function(d) { return d.d === true});
thisNode.classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; }) thisNode.classed("red-ui-flow-subflow",function(d) { return activeSubflow != null; })
//thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}}); //thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}});
@ -3248,6 +3249,7 @@ RED.view = (function() {
} }
return path; return path;
}); });
link.classed("red-ui-flow-node-disabled", function(d) { return d.source.d || d.target.d; });
} }
}) })

View File

@ -79,15 +79,20 @@
.red-ui-tray-footer { .red-ui-tray-footer {
@include component-footer; @include component-footer;
height: 35px; height: 35px;
font-size: 12px !important; font-size: 14px !important;
line-height: 35px; line-height: 35px;
vertical-align: middle; vertical-align: middle;
button { button.red-ui-button {
@include editor-button; padding: 0px 8px;
padding: 3px 7px; height: 26px;
font-size: 11px; line-height: 26px;
&.toggle:not(.selected) {
color: $workspace-button-color-selected !important;
background: $workspace-button-background-active;
}
} }
.red-ui-tray-footer-left { .red-ui-tray-footer-left {
display:inline-block; display:inline-block;
margin-right: 20px; margin-right: 20px;
@ -563,8 +568,6 @@ button.red-ui-button-small
} }
.red-ui-editor-type-json-editor-item-handle { .red-ui-editor-type-json-editor-item-handle {
cursor: move; cursor: move;
} }
@ -572,3 +575,7 @@ button.red-ui-button-small
position: relative; position: relative;
height: calc(100% - 40px); height: calc(100% - 40px);
} }
button.red-ui-toggleButton.toggle {
text-align: left;
}

View File

@ -146,11 +146,11 @@ g.red-ui-flow-node-selected {
border-style: dashed !important; border-style: dashed !important;
stroke: $node-selected-color; stroke: $node-selected-color;
stroke-width: 2; stroke-width: 2;
stroke-dasharray: 10, 4; stroke-dasharray: 8, 3;
} }
.red-ui-flow-subflow .red-ui-flow-node { .red-ui-flow-subflow .red-ui-flow-node {
stroke-dasharray:8, 3; stroke-dasharray:8, 2;
} }
.red-ui-workspace-disabled { .red-ui-workspace-disabled {
.red-ui-flow-link-line { .red-ui-flow-link-line {
@ -159,10 +159,21 @@ g.red-ui-flow-node-selected {
stroke: $link-subflow-color; stroke: $link-subflow-color;
} }
.red-ui-flow-node { .red-ui-flow-node {
stroke-dasharray: 10,4; stroke-dasharray: 8, 3;
fill-opacity: 0.6;
}
}
.red-ui-flow-node-disabled {
&.red-ui-flow-node, .red-ui-flow-node {
stroke-dasharray: 8, 3;
fill-opacity: 0.6;
}
&.red-ui-flow-link-line {
stroke-dasharray: 10,5 !important;
stroke-width: 2 !important;
stroke: $link-subflow-color;
} }
} }
@each $current-color in red green yellow blue grey { @each $current-color in red green yellow blue grey {
.red-ui-flow-node-status-dot-#{$current-color} { .red-ui-flow-node-status-dot-#{$current-color} {
fill: map-get($node-status-colors,$current-color); fill: map-get($node-status-colors,$current-color);

View File

@ -192,7 +192,7 @@
right: 0; right: 0;
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
padding: 0 10px; padding: 0 6px;
user-select: none; user-select: none;
.button-group:not(:last-child) { .button-group:not(:last-child) {

View File

@ -171,37 +171,39 @@ class Flow {
for (id in this.flow.nodes) { for (id in this.flow.nodes) {
if (this.flow.nodes.hasOwnProperty(id)) { if (this.flow.nodes.hasOwnProperty(id)) {
node = this.flow.nodes[id]; node = this.flow.nodes[id];
if (!node.subflow) { if (node.d !== true) {
if (!this.activeNodes[id]) { if (!node.subflow) {
newNode = flowUtil.createNode(this,node); if (!this.activeNodes[id]) {
if (newNode) { newNode = flowUtil.createNode(this,node);
this.activeNodes[id] = newNode; if (newNode) {
this.activeNodes[id] = newNode;
}
} }
} } else {
} else { if (!this.subflowInstanceNodes[id]) {
if (!this.subflowInstanceNodes[id]) { try {
try { var subflowDefinition = this.flow.subflows[node.subflow]||this.global.subflows[node.subflow]
var subflowDefinition = this.flow.subflows[node.subflow]||this.global.subflows[node.subflow] // console.log("NEED TO CREATE A SUBFLOW",id,node.subflow);
// console.log("NEED TO CREATE A SUBFLOW",id,node.subflow); this.subflowInstanceNodes[id] = true;
this.subflowInstanceNodes[id] = true; var subflow = Subflow.create(
var subflow = Subflow.create( this,
this, this.global,
this.global, subflowDefinition,
subflowDefinition, node
node );
); this.subflowInstanceNodes[id] = subflow;
this.subflowInstanceNodes[id] = subflow; subflow.start();
subflow.start(); this.activeNodes[id] = subflow.node;
this.activeNodes[id] = subflow.node;
// this.subflowInstanceNodes[id] = nodes.map(function(n) { return n.id}); // this.subflowInstanceNodes[id] = nodes.map(function(n) { return n.id});
// for (var i=0;i<nodes.length;i++) { // for (var i=0;i<nodes.length;i++) {
// if (nodes[i]) { // if (nodes[i]) {
// this.activeNodes[nodes[i].id] = nodes[i]; // this.activeNodes[nodes[i].id] = nodes[i];
// } // }
// } // }
} catch(err) { } catch(err) {
console.log(err.stack) console.log(err.stack)
}
} }
} }
} }