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

Move ports behind node body and increase touch zone for each port

Browse Source
This commit is contained in:
Nick O'Leary 2022-01-02 23:41:05 +00:00
parent 5e9ff98c49
commit c27dd336d9
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 49 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,6 +37,8 @@ RED.view = (function() {
node_height = 30,
dblClickInterval = 650;
var ARROW_HEADS = false;
var touchLongPressTimeout = 1000,
startTouchDistance = 0,
startTouchCenter = [],
@ -4133,6 +4135,11 @@ RED.view = (function() {
}
node[0][0].__portGroup__ = document.createElementNS("http://www.w3.org/2000/svg","g");
node[0][0].__portGroup__.__data__ = d;
nodeContents.appendChild(node[0][0].__portGroup__);
var mainRect = document.createElementNS("http://www.w3.org/2000/svg","rect");
mainRect.__data__ = d;
mainRect.setAttribute("class", "red-ui-flow-node "+(d.type == "unknown"?"red-ui-flow-node-unknown":""));
@ -4336,7 +4343,7 @@ RED.view = (function() {
this.__textGroup__.setAttribute("transform", "translate(38,"+yp+")");
}
var inputPorts = thisNode.selectAll(".red-ui-flow-port-input");
var inputPorts = d3.select(this.__portGroup__).selectAll(".red-ui-flow-port-input");
if ((!isLink || (showAllLinkPorts === -1 && !activeLinkNodes[d.id])) && d.inputs === 0 && !inputPorts.empty()) {
inputPorts.each(function(d,i) {
RED.hooks.trigger("viewRemovePort",{
@ -4349,7 +4356,7 @@ RED.view = (function() {
}).remove();
this.__inputs__ = [];
} 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 = d3.select(this.__portGroup__).append("g").attr("class","red-ui-flow-port-input");
var inputGroupPorts;
if (d.type === "link in") {
@ -4358,7 +4365,8 @@ RED.view = (function() {
.attr("r",5)
.attr("class","red-ui-flow-port red-ui-flow-link-port")
} else {
inputGroupPorts = inputGroup.append("rect").attr("class","red-ui-flow-port").attr("rx",3).attr("ry",3).attr("width",10).attr("height",10)
inputGroupPorts = inputGroup.append("path").attr("class","red-ui-flow-port-background").attr("d","M5 -1.5 h -16 v 13 h 16 z")
inputGroup.append("path").attr("class","red-ui-flow-port red-ui-flow-port-shape").attr("d","M5 0 h -3 c -4 0 -4 0 -4 4 v 2 c 0 4 0 4 4 4 h 3 z ")
}
inputGroup[0][0].__port__ = inputGroupPorts[0][0];
inputGroupPorts[0][0].__data__ = this.__data__;
@ -4408,15 +4416,19 @@ RED.view = (function() {
portPort.setAttribute("cy",5);
portPort.setAttribute("r",5);
portPort.setAttribute("class","red-ui-flow-port red-ui-flow-link-port");
portGroup.appendChild(portPort);
} else {
portPort = document.createElementNS("http://www.w3.org/2000/svg","rect");
portPort.setAttribute("rx",3);
portPort.setAttribute("ry",3);
portPort.setAttribute("width",10);
portPort.setAttribute("height",10);
portPort.setAttribute("class","red-ui-flow-port");
portPort = document.createElementNS("http://www.w3.org/2000/svg","path");
portPort.setAttribute("d","M5 -1.5 h 16 v 13 h -16 z ");
portPort.setAttribute("class","red-ui-flow-port-background");
portGroup.appendChild(portPort);
var visiblePort = document.createElementNS("http://www.w3.org/2000/svg","path");
visiblePort.setAttribute("d","M5 0 h 4 c 4 0 4 0 4 4 v 2 c 0 4 0 4 -4 4 h -4 z ");
visiblePort.setAttribute("class","red-ui-flow-port red-ui-flow-port-shape");
portGroup.appendChild(visiblePort);
}
portGroup.appendChild(portPort);
portGroup.__port__ = portPort;
portPort.__data__ = this.__data__;
portPort.__portType__ = PORT_TYPE_OUTPUT;
@ -4428,7 +4440,7 @@ RED.view = (function() {
portPort.addEventListener("mouseover", portMouseOverProxy);
portPort.addEventListener("mouseout", portMouseOutProxy);
this.appendChild(portGroup);
this.__portGroup__.appendChild(portGroup);
this.__outputs__.push(portGroup);
RED.hooks.trigger("viewAddPort",{node:d,el: this, port: portGroup, portType: "output", portIndex: portIndex})
} else {
@ -4607,14 +4619,14 @@ RED.view = (function() {
d.y1 = d.source.y+y;
d.x2 = d.target.x-d.target.w/2;
d.y2 = d.target.y;
var targetOffset = d.link?16:11
var targetOffset = ARROW_HEADS?(d.link?16:13):0
var path = generateLinkPath(d.x1+5,d.y1,d.x2-targetOffset,d.y2,1);
if (/NaN/.test(path)) {
path = ""
}
this.__pathBack__.setAttribute("d",path);
this.__pathOutline__.setAttribute("d",path);
this.__pathLine__.setAttribute("d",path + "m0 0, l 0 -2 l 3 2 l -3 2 z");
this.__pathLine__.setAttribute("d",path + (ARROW_HEADS?"m0 0, l 0 -2 l 3 2 l -3 2 z":""));
this.__pathLine__.classList.toggle("red-ui-flow-node-disabled",!!(d.source.d || d.target.d));
this.__pathLine__.classList.toggle("red-ui-flow-subflow-link", !d.link && activeSubflow);
}

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

@ -196,6 +196,12 @@ $view-background: $secondary-background;
$view-select-mode-background: $secondary-background-selected;
$view-grid-color: #eee;
$link-color: #999;
$link-link-color: #aaa;
$link-disabled-color: #ccc;
$link-link-active-color: #ff7f0e;
$link-unknown-color: #f00;
$node-label-color: #333;
$node-port-label-color: #888;
$node-border: #999;
@ -203,12 +209,12 @@ $node-border-unknown: #f33;
$node-border-placeholder: #aaa;
$node-background-placeholder: #eee;
$node-port-border: #aaa;
$node-port-border-connected: $node-border;
$node-port-border: $node-border;
$node-port-border-connected: $link-color;
$node-port-background: #f3f3f3;
$node-port-background: #d9d9d9;
$node-port-background-hover: #eee;
$node-port-background-connected: #d9d9d9;
$node-port-background-connected: $link-color;
$node-icon-color: #fff;
$node-icon-background-color: rgba(0,0,0,0.05);
@ -237,12 +243,6 @@ $node-status-colors: (
$node-selected-color: #ff7f0e;
$port-selected-color: #ff7f0e;
$link-color: #999;
$link-link-color: #aaa;
$link-disabled-color: #ccc;
$link-link-active-color: #ff7f0e;
$link-unknown-color: #f00;
$clipboard-textarea-background: #F3E7E7;

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

@ -190,6 +190,18 @@
fill: $node-port-background;
cursor: crosshair;
}
.red-ui-flow-port-background {
opacity: 0;
stroke: none;
fill: #f00;
cursor: crosshair;
}
.red-ui-flow-port-shape {
pointer-events: none;
cursor: crosshair;
}
.red-ui-flow-port-connected .red-ui-flow-port {
fill: $node-port-background-connected;
stroke: $node-port-border-connected;
@ -285,7 +297,8 @@ g.red-ui-flow-node-selected {
text-anchor:start;
}
.red-ui-flow-port-hovered {
.red-ui-flow-port-hovered:not(.red-ui-flow-port-background),
.red-ui-flow-port-background.red-ui-flow-port-hovered + .red-ui-flow-port-shape {
stroke: $port-selected-color !important;
fill: $port-selected-color !important;
}