Allow config nodes to be disabled, tidy css and add actions

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

@@ -969,6 +969,9 @@ RED.nodes = (function() {
                         users:[],
                         _config:{}
                     };
+                    if (n.hasOwnProperty('d')) {
+                        configNode.d = n.d;
+                    }
                     for (d in def.defaults) {
                         if (def.defaults.hasOwnProperty(d)) {
                             configNode[d] = n[d];

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

@@ -1500,6 +1500,8 @@ RED.editor = (function() {
                 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({
+                    enabledIcon: "fa-circle-thin",
+                    disabledIcon: "fa-ban",
                     invertState: true
                 })
 
@@ -1683,7 +1685,9 @@ RED.editor = (function() {
 
                 var trayFooterLeft = $('<div class="red-ui-tray-footer-left"></div>').appendTo(trayFooter)
 
-                $('<input type="checkbox">').appendTo(trayFooterLeft).toggleButton({
+                $('<input id="node-config-input-node-disabled" type="checkbox">').prop("checked",!!editing_config_node.d).appendTo(trayFooterLeft).toggleButton({
+                    enabledIcon: "fa-circle-thin",
+                    disabledIcon: "fa-ban",
                     invertState: true
                 })
 
@@ -1918,6 +1922,16 @@ RED.editor = (function() {
                     editing_config_node.label = configTypeDef.label;
                     editing_config_node.z = scope;
 
+                    if ($("#node-config-input-node-disabled").prop('checked')) {
+                        if (editing_config_node.d !== true) {
+                            editing_config_node.d = true;
+                        }
+                    } else {
+                        if (editing_config_node.d === true) {
+                            delete editing_config_node.d;
+                        }
+                    }
+
                     if (scope) {
                         // Search for nodes that use this one that are no longer
                         // in scope, so must be removed
@@ -2072,7 +2086,7 @@ RED.editor = (function() {
                 RED.nodes.eachConfig(function(config) {
                     if (config.type == type && (!config.z || config.z === activeWorkspace.id)) {
                         var label = RED.utils.getNodeLabel(config,config.id);
-                        config.__label__ = label;
+                        config.__label__ = label+(config.d?" ["+RED._("workspace.disabled")+"]":"");
                         configNodes.push(config);
                     }
                 });

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

@@ -145,7 +145,12 @@ RED.sidebar.config = (function() {
                 var entry = $('<li class="red-ui-palette-node_id_'+node.id.replace(/\./g,"-")+'"></li>').appendTo(list);
                 var nodeDiv = $('<div class="red-ui-palette-node-config red-ui-palette-node"></div>').appendTo(entry);
                 entry.data('node',node.id);
-                $('<div class="red-ui-palette-label"></div>').text(label).appendTo(nodeDiv);
+                var label = $('<div class="red-ui-palette-label"></div>').text(label).appendTo(nodeDiv);
+                if (node.d) {
+                    nodeDiv.addClass("red-ui-palette-node-config-disabled");
+                    $('<i class="fa fa-ban"></i>').prependTo(label);
+                }
+
                 if (node._def.hasUsers !== false) {
                     var iconContainer = $('<div/>',{class:"red-ui-palette-icon-container red-ui-palette-icon-container-right"}).appendTo(nodeDiv);
                     if (node.users.length === 0) {

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

@@ -410,6 +410,8 @@ RED.view = (function() {
         RED.actions.add("core:zoom-in",zoomIn);
         RED.actions.add("core:zoom-out",zoomOut);
         RED.actions.add("core:zoom-reset",zoomZero);
+        RED.actions.add("core:enable-selected-nodes", function() { setSelectedNodeState(false)});
+        RED.actions.add("core:disable-selected-nodes", function() { setSelectedNodeState(true)});
 
         RED.actions.add("core:toggle-show-grid",function(state) {
             if (state === undefined) {
@@ -2376,7 +2378,7 @@ RED.view = (function() {
     function isButtonEnabled(d) {
         var buttonEnabled = true;
         var ws = RED.nodes.workspace(RED.workspaces.active());
-        if (ws && !ws.disabled) {
+        if (ws && !ws.disabled && !d.d) {
             if (d._def.button.hasOwnProperty('enabled')) {
                 if (typeof d._def.button.enabled === "function") {
                     buttonEnabled = d._def.button.enabled.call(d);
@@ -2397,7 +2399,7 @@ RED.view = (function() {
         }
         var activeWorkspace = RED.workspaces.active();
         var ws = RED.nodes.workspace(activeWorkspace);
-        if (ws && !ws.disabled) {
+        if (ws && !ws.disabled && !d.d) {
             if (d._def.button.toggle) {
                 d[d._def.button.toggle] = !d[d._def.button.toggle];
                 d.dirty = true;
@@ -3580,6 +3582,48 @@ RED.view = (function() {
         //TODO: subscribe/unsubscribe here
         redraw();
     }
+    function setSelectedNodeState(isDisabled) {
+        if (mouse_mode === RED.state.SELECTING_NODE) {
+            return;
+        }
+        var workspaceSelection = RED.workspaces.selection();
+        var changed = false;
+        if (workspaceSelection.length > 0) {
+            // TODO: toggle workspace state
+        } else if (moving_set.length > 0) {
+            var historyEvents = [];
+            for (var i=0;i<moving_set.length;i++) {
+                var node = moving_set[i].n;
+                if (isDisabled != node.d) {
+                    historyEvents.push({
+                        t: "edit",
+                        node: node,
+                        changed: node.changed,
+                        changes: {
+                            d: node.d
+                        }
+                    });
+                    if (isDisabled) {
+                        node.d = true;
+                    } else {
+                        delete node.d;
+                    }
+                    node.dirty = true;
+                    node.changed = true;
+                }
+            }
+            if (historyEvents.length > 0) {
+                RED.history.push({
+                    t:"multi",
+                    events: historyEvents,
+                    dirty:RED.nodes.dirty()
+                })
+                RED.nodes.dirty(true)
+            }
+        }
+        RED.view.redraw();
+
+    }
 
     return {
         init: init,

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

@@ -201,8 +201,11 @@ RED.workspaces = (function() {
                 } else {
                     workspace.disabled = false;
                 }
-                $("#node-input-disabled").toggleButton({invertState: true})
+                $("#node-input-disabled").toggleButton({
-
+                    enabledIcon: "fa-circle-thin",
+                    disabledIcon: "fa-ban",
+                    invertState: true
+                })
 
                 $('<input type="text" style="display: none;" />').prependTo(dialogForm);
                 dialogForm.on("submit", function(e) { e.preventDefault();});

packages/node_modules/@node-red/editor-client/src/sass/colors.scss

@@ -224,10 +224,10 @@ $node-status-colors: (
 $node-selected-color: #ff7f0e;
 $port-selected-color: #ff7f0e;
 
-$link-color: #888;
+$link-color: #999;
-$link-link-color: #ccc;
+$link-link-color: #aaa;
+$link-disabled-color: #ccc;
 $link-link-active-color: #ff7f0e;
-$link-subflow-color: #bbb;
 $link-unknown-color: #f00;
 
 $clipboard-textarea-background: #F3E7E7;

packages/node_modules/@node-red/editor-client/src/sass/flow.scss

@@ -150,28 +150,36 @@ g.red-ui-flow-node-selected {
 }
 
 .red-ui-flow-subflow .red-ui-flow-node {
-    stroke-dasharray:8, 2;
 }
+
 .red-ui-workspace-disabled {
-    .red-ui-flow-link-line {
-        stroke-dasharray: 10,5 !important;
-        stroke-width: 2 !important;
-        stroke: $link-subflow-color;
-    }
     .red-ui-flow-node {
         stroke-dasharray: 8, 3;
-        fill-opacity: 0.6;
+        fill-opacity: 0.5;
+    }
+    .red-ui-flow-link-line {
+        stroke-dasharray: 10,8 !important;
+        stroke-width: 2 !important;
+        stroke: $link-disabled-color;
+    }
+    .red-ui-flow-port {
+        fill-opacity: 1;
+        stroke-dasharray: none;
     }
 }
 .red-ui-flow-node-disabled {
     &.red-ui-flow-node, .red-ui-flow-node {
         stroke-dasharray: 8, 3;
-        fill-opacity: 0.6;
+        fill-opacity: 0.5;
     }
     &.red-ui-flow-link-line {
-        stroke-dasharray: 10,5 !important;
+        stroke-dasharray: 10,8 !important;
         stroke-width: 2 !important;
-        stroke: $link-subflow-color;
+        stroke: $link-disabled-color;
+    }
+    .red-ui-flow-port {
+        fill-opacity: 1;
+        stroke-dasharray: none;
     }
 }
 @each $current-color in red green yellow blue grey {
@@ -199,7 +207,6 @@ g.red-ui-flow-node-selected {
 }
 
 .red-ui-flow-subflow-port {
-    stroke-dasharray: 5,5;
     fill: $node-background-placeholder;
     stroke: $node-border;
 }
@@ -219,12 +226,14 @@ g.red-ui-flow-node-selected {
 }
 .red-ui-flow-link-link {
     stroke-width: 2;
-    stroke-dasharray: 10,5;
     stroke: $link-link-color;
     fill: none;
-    stroke-dasharray: 15,2;
+    stroke-dasharray: 25,4;
-    // pointer-events: none;
 }
+.red-ui-flow-link-off-flow {
+    stroke-width: 2;
+}
+
 .red-ui-flow-link-port {
     fill: $node-link-port-background;
     stroke: $link-link-color;
@@ -236,11 +245,6 @@ g.red-ui-flow-node-selected {
 .red-ui-flow-link-group:hover {
     cursor: pointer;
 }
-.red-ui-flow-subflow-link {
-    stroke: $link-subflow-color;
-    stroke-dasharray: 10,5;
-    stroke-width: 2;
-}
 
 .red-ui-flow-link-outline {
     stroke: $view-background;

packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss

@@ -94,12 +94,20 @@ ul.red-ui-sidebar-node-config-list li.red-ui-palette-node-config-type {
     text-align:right;
     padding-right: 3px;
 }
-.red-ui-palette-node-config-unused {
+.red-ui-palette-node-config-unused,.red-ui-palette-node-config-disabled {
     border-color: $primary-border-color;
     background: $secondary-background-inactive;
     border-style: dashed;
     color: $tertiary-text-color;
 }
+.red-ui-palette-node-config-disabled {
+    opacity: 0.6;
+    font-style: italic;
+    i {
+        color: $secondary-text-color;
+        margin-right: 5px;
+    }
+}
 .red-ui-sidebar-node-config-filter-info {
     position: absolute;
     top: 0;

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

@@ -132,29 +132,39 @@ class Flow {
             id = configNodes.shift();
             node = this.flow.configs[id];
             if (!this.activeNodes[id]) {
-                var readyToCreate = true;
+                if (node.d !== true) {
-                // This node doesn't exist.
+                    var readyToCreate = true;
-                // Check it doesn't reference another non-existent config node
+                    // This node doesn't exist.
-                for (var prop in node) {
+                    // Check it doesn't reference another non-existent config node
-                    if (node.hasOwnProperty(prop) && prop !== 'id' && prop !== 'wires' && prop !== '_users' && this.flow.configs[node[prop]]) {
+                    for (var prop in node) {
-                        if (!this.activeNodes[node[prop]]) {
+                        if (node.hasOwnProperty(prop) &&
-                            // References a non-existent config node
+                        prop !== 'id' &&
-                            // Add it to the back of the list to try again later
+                        prop !== 'wires' &&
-                            configNodes.push(id);
+                        prop !== '_users' &&
-                            configNodeAttempts[id] = (configNodeAttempts[id]||0)+1;
+                        this.flow.configs[node[prop]] &&
-                            if (configNodeAttempts[id] === 100) {
+                        this.flow.configs[node[prop]].d !== true
-                                throw new Error("Circular config node dependency detected: "+id);
+                        ) {
+                            if (!this.activeNodes[node[prop]]) {
+                                // References a non-existent config node
+                                // Add it to the back of the list to try again later
+                                configNodes.push(id);
+                                configNodeAttempts[id] = (configNodeAttempts[id]||0)+1;
+                                if (configNodeAttempts[id] === 100) {
+                                    throw new Error("Circular config node dependency detected: "+id);
+                                }
+                                readyToCreate = false;
+                                break;
                             }
-                            readyToCreate = false;
-                            break;
                         }
                     }
-                }
+                    if (readyToCreate) {
-                if (readyToCreate) {
+                        newNode = flowUtil.createNode(this,node);
-                    newNode = flowUtil.createNode(this,node);
+                        if (newNode) {
-                    if (newNode) {
+                            this.activeNodes[id] = newNode;
-                        this.activeNodes[id] = newNode;
+                        }
                     }
+                } else {
+                    this.debug("not starting disabled config node : "+id);
                 }
             }
         }
@@ -206,6 +216,8 @@ class Flow {
                             }
                         }
                     }
+                } else {
+                    this.debug("not starting disabled node : "+id);
                 }
             }
         }