frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Visually distinguish ports with connected wires

Browse Source
This commit is contained in:
Nick O'Leary 2021-12-29 23:31:24 +00:00
parent 510a09ecba
commit 50cb074172
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/node_modules/@node-red/editor-client/src/js/ui/view.js vendored
View File

@ -4345,6 +4345,7 @@ RED.view = (function() {
portIndex: 0 portIndex: 0
}) })
}).remove(); }).remove();
this.__inputs__ = [];
} else if (((isLink && (showAllLinkPorts===PORT_TYPE_INPUT||activeLinkNodes[d.id]))|| d.inputs === 1) && inputPorts.empty()) { } else if (((isLink && (showAllLinkPorts===PORT_TYPE_INPUT||activeLinkNodes[d.id]))|| d.inputs === 1) && inputPorts.empty()) {
var inputGroup = thisNode.append("g").attr("class","red-ui-flow-port-input"); var inputGroup = thisNode.append("g").attr("class","red-ui-flow-port-input");
var inputGroupPorts; var inputGroupPorts;
@ -4367,6 +4368,8 @@ RED.view = (function() {
.on("touchend",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} ) .on("touchend",function(d){portMouseUp(d,PORT_TYPE_INPUT,0);d3.event.preventDefault();} )
.on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);}) .on("mouseover",function(d){portMouseOver(d3.select(this),d,PORT_TYPE_INPUT,0);})
.on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);}); .on("mouseout",function(d) {portMouseOut(d3.select(this),d,PORT_TYPE_INPUT,0);});
this.__inputs__.push(inputGroup[0][0]);
RED.hooks.trigger("viewAddPort",{node:d,el: this, port: inputGroup[0][0], portType: "input", portIndex: 0}) RED.hooks.trigger("viewAddPort",{node:d,el: this, port: inputGroup[0][0], portType: "input", portIndex: 0})
} }
var numOutputs = d.outputs; var numOutputs = d.outputs;
@ -4514,6 +4517,14 @@ RED.view = (function() {
// }); // });
} }
for (var i=0,l=this.__outputs__.length;i<l;i++) {
this.__outputs__[i].classList.toggle("red-ui-flow-port-connected",RED.nodes.getNodeLinkCount(d.id,PORT_TYPE_OUTPUT,i) > 0 )
}
for (var i=0,l=this.__inputs__.length;i<l;i++) {
this.__inputs__[i].classList.toggle("red-ui-flow-port-connected",RED.nodes.getNodeLinkCount(d.id,PORT_TYPE_INPUT,i) > 0 )
}
if (d.dirtyStatus) { if (d.dirtyStatus) {
redrawStatus(d,this); redrawStatus(d,this);
} }

7
packages/node_modules/@node-red/editor-client/src/sass/colors.scss vendored
View File

@ -203,8 +203,13 @@ $node-border-unknown: #f33;
$node-border-placeholder: #aaa; $node-border-placeholder: #aaa;
$node-background-placeholder: #eee; $node-background-placeholder: #eee;
$node-port-background: #d9d9d9; $node-port-border: #aaa;
$node-port-border-connected: $node-border;
$node-port-background: #f3f3f3;
$node-port-background-hover: #eee; $node-port-background-hover: #eee;
$node-port-background-connected: #d9d9d9;
$node-icon-color: #fff; $node-icon-color: #fff;
$node-icon-background-color: rgba(0,0,0,0.05); $node-icon-background-color: rgba(0,0,0,0.05);
$node-icon-background-color-fill: #000; $node-icon-background-color-fill: #000;

11
packages/node_modules/@node-red/editor-client/src/sass/flow.scss vendored
View File

@ -185,11 +185,16 @@
} }
.red-ui-flow-port { .red-ui-flow-port {
stroke: $node-border; stroke: $node-port-border;
stroke-width: 1; stroke-width: 1;
fill: $node-port-background; fill: $node-port-background;
cursor: crosshair; cursor: crosshair;
} }
.red-ui-flow-port-connected .red-ui-flow-port {
fill: $node-port-background-connected;
stroke: $node-port-border-connected;
}
.red-ui-flow-node-error { .red-ui-flow-node-error {
fill: $node-status-error-background; fill: $node-status-error-background;
@ -281,8 +286,8 @@ g.red-ui-flow-node-selected {
} }
.red-ui-flow-port-hovered { .red-ui-flow-port-hovered {
stroke: $port-selected-color; stroke: $port-selected-color !important;
fill: $port-selected-color; fill: $port-selected-color !important;
} }
.red-ui-flow-subflow-port { .red-ui-flow-subflow-port {