From 41a0af032c47993acd49681c71c37f5842b90958 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Fri, 14 Jun 2019 22:12:47 +0100 Subject: [PATCH] Enable individual flow nodes to be disabled --- .../@node-red/editor-client/src/js/nodes.js | 7 ++- .../src/js/ui/common/toggleButton.js | 3 +- .../editor-client/src/js/ui/editor.js | 61 +++++++++++-------- .../@node-red/editor-client/src/js/ui/view.js | 2 + .../editor-client/src/sass/editor.scss | 21 ++++--- .../editor-client/src/sass/flow.scss | 19 ++++-- .../editor-client/src/sass/mixins.scss | 2 +- .../@node-red/runtime/lib/nodes/flows/Flow.js | 60 +++++++++--------- 8 files changed, 106 insertions(+), 69 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/nodes.js b/packages/node_modules/@node-red/editor-client/src/js/nodes.js index 4a1c6e9a0..7e189ba91 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/nodes.js +++ b/packages/node_modules/@node-red/editor-client/src/js/nodes.js @@ -463,7 +463,9 @@ RED.nodes = (function() { node.id = n.id; node.type = n.type; node.z = n.z; - + if (n.d === true) { + node.d = true; + } if (node.type == "unknown") { for (var p in n._orig) { if (n._orig.hasOwnProperty(p)) { @@ -1016,6 +1018,9 @@ RED.nodes = (function() { if (n.hasOwnProperty('l')) { node.l = n.l; } + if (n.hasOwnProperty('d')) { + node.d = n.d; + } if (createNewIds) { if (subflow_blacklist[n.z]) { continue; diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js index 1a52183d3..999606912 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js @@ -42,12 +42,11 @@ var enabledLabel = this.options.enabledLabel || RED._("editor:workspace.enabled"); var disabledLabel = this.options.disabledLabel || RED._("editor:workspace.disabled"); - this.element.addClass("red-ui-toggleButton"); this.element.css("display","none"); this.element.on("focus", function() { that.button.focus(); }); - this.button = $(''); + this.button = $(''); if (this.options.class) { this.button.addClass(this.options.class) } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js index b64bb8e5c..336b80e9c 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/editor.js @@ -955,34 +955,19 @@ RED.editor = (function() { $('
'+ ''+ - ' '+ - ''+ + ''+ '
').appendTo(dialogForm); - var setToggleState = function(state) { - var i = $("#node-input-show-label-btn-i"); - if (!state) { - 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')); + $("#node-input-show-label").toggleButton({ + enabledLabel: RED._("editor.show"), + disabledLabel: RED._("editor.hide") }) + if (!node.hasOwnProperty("l")) { // Show label if type not link 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 ((!node._def.defaults || !node._def.defaults.hasOwnProperty("icon"))) { @@ -1396,6 +1381,20 @@ RED.editor = (function() { 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; var oldInfo = node.info; @@ -1498,6 +1497,12 @@ RED.editor = (function() { var trayBody = tray.find('.red-ui-tray-body'); trayBody.parent().css('overflow','hidden'); + var trayFooterLeft = $('
').appendTo(trayFooter) + + $('').prop("checked",!!node.d).appendTo(trayFooterLeft).toggleButton({ + invertState: true + }) + var editorTabEl = $('').appendTo(trayBody); var editorContent = $('
').appendTo(trayBody); @@ -1675,9 +1680,15 @@ RED.editor = (function() { var trayHeader = tray.find(".red-ui-tray-header"); var trayBody = tray.find('.red-ui-tray-body'); var trayFooter = tray.find(".red-ui-tray-footer"); - var userCountDiv; + + var trayFooterLeft = $('
').appendTo(trayFooter) + + $('').appendTo(trayFooterLeft).toggleButton({ + invertState: true + }) + if (node_def.hasUsers !== false) { - userCountDiv = $('
').prependTo(trayFooter); + $(' ').css("margin-left", "10px").appendTo(trayFooterLeft); } trayFooter.append(''); @@ -1771,8 +1782,8 @@ RED.editor = (function() { } }); } - if (node_def.hasUsers !== false && userCountDiv) { - userCountDiv.find("span").text(RED._("editor.nodesUse", {count:editing_config_node.users.length})).parent().show(); + if (node_def.hasUsers !== false) { + $("#red-ui-editor-config-user-count").text(RED._("editor.nodesUse", {count:editing_config_node.users.length})).parent().show(); } trayBody.i18n(); trayFooter.i18n(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index d5a76eacd..cdc8bd311 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -2929,6 +2929,7 @@ RED.view = (function() { d.resize = false; } 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.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; }); + link.classed("red-ui-flow-node-disabled", function(d) { return d.source.d || d.target.d; }); } }) diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss index 83c72b07b..6338eb73e 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss @@ -79,15 +79,20 @@ .red-ui-tray-footer { @include component-footer; height: 35px; - font-size: 12px !important; + font-size: 14px !important; line-height: 35px; vertical-align: middle; - button { - @include editor-button; - padding: 3px 7px; - font-size: 11px; + button.red-ui-button { + padding: 0px 8px; + height: 26px; + line-height: 26px; + &.toggle:not(.selected) { + color: $workspace-button-color-selected !important; + background: $workspace-button-background-active; + } } + .red-ui-tray-footer-left { display:inline-block; margin-right: 20px; @@ -563,8 +568,6 @@ button.red-ui-button-small } - - .red-ui-editor-type-json-editor-item-handle { cursor: move; } @@ -572,3 +575,7 @@ button.red-ui-button-small position: relative; height: calc(100% - 40px); } + +button.red-ui-toggleButton.toggle { + text-align: left; +} diff --git a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss index 4f24a6f11..c440ab4a8 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/flow.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/flow.scss @@ -146,11 +146,11 @@ g.red-ui-flow-node-selected { border-style: dashed !important; stroke: $node-selected-color; stroke-width: 2; - stroke-dasharray: 10, 4; + stroke-dasharray: 8, 3; } .red-ui-flow-subflow .red-ui-flow-node { - stroke-dasharray:8, 3; + stroke-dasharray:8, 2; } .red-ui-workspace-disabled { .red-ui-flow-link-line { @@ -159,10 +159,21 @@ g.red-ui-flow-node-selected { stroke: $link-subflow-color; } .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 { .red-ui-flow-node-status-dot-#{$current-color} { fill: map-get($node-status-colors,$current-color); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss index 91978057e..dda9ef384 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss @@ -192,7 +192,7 @@ right: 0; height: 25px; line-height: 25px; - padding: 0 10px; + padding: 0 6px; user-select: none; .button-group:not(:last-child) { diff --git a/packages/node_modules/@node-red/runtime/lib/nodes/flows/Flow.js b/packages/node_modules/@node-red/runtime/lib/nodes/flows/Flow.js index 8b0341463..d200a6684 100644 --- a/packages/node_modules/@node-red/runtime/lib/nodes/flows/Flow.js +++ b/packages/node_modules/@node-red/runtime/lib/nodes/flows/Flow.js @@ -171,37 +171,39 @@ class Flow { for (id in this.flow.nodes) { if (this.flow.nodes.hasOwnProperty(id)) { node = this.flow.nodes[id]; - if (!node.subflow) { - if (!this.activeNodes[id]) { - newNode = flowUtil.createNode(this,node); - if (newNode) { - this.activeNodes[id] = newNode; + if (node.d !== true) { + if (!node.subflow) { + if (!this.activeNodes[id]) { + newNode = flowUtil.createNode(this,node); + if (newNode) { + this.activeNodes[id] = newNode; + } } - } - } else { - if (!this.subflowInstanceNodes[id]) { - try { - var subflowDefinition = this.flow.subflows[node.subflow]||this.global.subflows[node.subflow] - // console.log("NEED TO CREATE A SUBFLOW",id,node.subflow); - this.subflowInstanceNodes[id] = true; - var subflow = Subflow.create( - this, - this.global, - subflowDefinition, - node - ); - this.subflowInstanceNodes[id] = subflow; - subflow.start(); - this.activeNodes[id] = subflow.node; + } else { + if (!this.subflowInstanceNodes[id]) { + try { + var subflowDefinition = this.flow.subflows[node.subflow]||this.global.subflows[node.subflow] + // console.log("NEED TO CREATE A SUBFLOW",id,node.subflow); + this.subflowInstanceNodes[id] = true; + var subflow = Subflow.create( + this, + this.global, + subflowDefinition, + node + ); + this.subflowInstanceNodes[id] = subflow; + subflow.start(); + this.activeNodes[id] = subflow.node; - // this.subflowInstanceNodes[id] = nodes.map(function(n) { return n.id}); - // for (var i=0;i