Enable individual flow nodes to be disabled

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;

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 = $('<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) {
                 this.button.addClass(this.options.class)
             }

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

@@ -955,34 +955,19 @@ RED.editor = (function() {
 
         $('<div class="form-row">'+
             '<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);
 
-        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")) {
             // 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 = $('<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 editorContent = $('<div></div>').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 = $('<div class="red-ui-tray-footer-left"></div>').appendTo(trayFooter)
+
+                $('<input type="checkbox">').appendTo(trayFooterLeft).toggleButton({
+                    invertState: true
+                })
+
                 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>');
 
@@ -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();
                     trayFooter.i18n();

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; });
                 }
             })
 

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 {
+    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 {
         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;
+}

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

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

packages/node_modules/@node-red/runtime/lib/nodes/flows/Flow.js

@@ -171,6 +171,7 @@ class Flow {
         for (id in this.flow.nodes) {
             if (this.flow.nodes.hasOwnProperty(id)) {
                 node = this.flow.nodes[id];
+                if (node.d !== true) {
                     if (!node.subflow) {
                         if (!this.activeNodes[id]) {
                             newNode = flowUtil.createNode(this,node);
@@ -207,6 +208,7 @@ class Flow {
                     }
                 }
             }
+        }
 
         var activeCount = Object.keys(this.activeNodes).length;
         if (activeCount > 0) {