From 2473249c8b3c91f6242d6f6656dae46031f83d74 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 17 Jun 2019 22:46:34 +0100 Subject: [PATCH] Allow config nodes to be disabled, tidy css and add actions --- .../@node-red/editor-client/src/js/nodes.js | 3 ++ .../editor-client/src/js/ui/editor.js | 18 ++++++- .../editor-client/src/js/ui/tab-config.js | 7 ++- .../@node-red/editor-client/src/js/ui/view.js | 48 +++++++++++++++++- .../editor-client/src/js/ui/workspaces.js | 7 ++- .../editor-client/src/sass/colors.scss | 6 +-- .../editor-client/src/sass/flow.scss | 42 +++++++++------- .../editor-client/src/sass/tab-config.scss | 10 +++- .../@node-red/runtime/lib/nodes/flows/Flow.js | 50 ++++++++++++------- 9 files changed, 142 insertions(+), 49 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 7e189ba91..5c544e7b7 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 @@ -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]; 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 336b80e9c..1b3ccea52 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 @@ -1500,6 +1500,8 @@ RED.editor = (function() { var trayFooterLeft = $('
').appendTo(trayFooter) $('').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 = $('
').appendTo(trayFooter) - $('').appendTo(trayFooterLeft).toggleButton({ + $('').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); } }); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js index c7131aa7e..86785c385 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js @@ -145,7 +145,12 @@ RED.sidebar.config = (function() { var entry = $('
  • ').appendTo(list); var nodeDiv = $('
    ').appendTo(entry); entry.data('node',node.id); - $('
    ').text(label).appendTo(nodeDiv); + var label = $('
    ').text(label).appendTo(nodeDiv); + if (node.d) { + nodeDiv.addClass("red-ui-palette-node-config-disabled"); + $('').prependTo(label); + } + if (node._def.hasUsers !== false) { var iconContainer = $('
    ',{class:"red-ui-palette-icon-container red-ui-palette-icon-container-right"}).appendTo(nodeDiv); if (node.users.length === 0) { 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 cdc8bd311..81453c675 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 @@ -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 0) { + RED.history.push({ + t:"multi", + events: historyEvents, + dirty:RED.nodes.dirty() + }) + RED.nodes.dirty(true) + } + } + RED.view.redraw(); + + } return { init: init, diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js index 3fffe2e64..db36004ab 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js +++ b/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 + }) $('').prependTo(dialogForm); dialogForm.on("submit", function(e) { e.preventDefault();}); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss index 3b6d14280..8411343c5 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss +++ b/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-link-color: #ccc; +$link-color: #999; +$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; 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 c440ab4a8..4aae0869c 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 @@ -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; - // pointer-events: none; + stroke-dasharray: 25,4; } +.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; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss index 69a2ee5dd..467ce8511 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-config.scss +++ b/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; 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 d200a6684..6077f50cd 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 @@ -132,29 +132,39 @@ class Flow { id = configNodes.shift(); node = this.flow.configs[id]; if (!this.activeNodes[id]) { - var readyToCreate = true; - // This node doesn't exist. - // Check it doesn't reference another non-existent config node - for (var prop in node) { - if (node.hasOwnProperty(prop) && prop !== 'id' && prop !== 'wires' && prop !== '_users' && this.flow.configs[node[prop]]) { - 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); + if (node.d !== true) { + var readyToCreate = true; + // This node doesn't exist. + // Check it doesn't reference another non-existent config node + for (var prop in node) { + if (node.hasOwnProperty(prop) && + prop !== 'id' && + prop !== 'wires' && + prop !== '_users' && + this.flow.configs[node[prop]] && + this.flow.configs[node[prop]].d !== true + ) { + 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) { - newNode = flowUtil.createNode(this,node); - if (newNode) { - this.activeNodes[id] = newNode; + if (readyToCreate) { + newNode = flowUtil.createNode(this,node); + if (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); } } }