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

Rework Junctions to be more node like in their event handling

Browse Source
This commit is contained in:
Nick O'Leary 2022-05-11 23:13:12 +01:00
parent 8043f5d865
commit a22f569ca0
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 86 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3231,52 +3231,16 @@ RED.view = (function() {
port.classed("red-ui-flow-port-hovered",false); port.classed("red-ui-flow-port-hovered",false);
} }
function junctionMouseOver(junction, d) { function junctionMouseOver(junction, d, portType) {
junction.classed("red-ui-flow-junction-hovered",true); var active = (portType === undefined) ||
(mouse_mode !== RED.state.JOINING && mouse_mode !== RED.state.QUICK_JOINING) ||
(drag_lines.length > 0 && drag_lines[0].portType !== portType && !drag_lines[0].virtualLink)
junction.classed("red-ui-flow-junction-hovered", active);
} }
function junctionMouseOut(junction, d) { function junctionMouseOut(junction, d) {
junction.classed("red-ui-flow-junction-hovered",false); junction.classed("red-ui-flow-junction-hovered",false);
} }
function junctionMouseDown(junction, d, evt) {
if (RED.view.DEBUG) { console.warn("junctionMouseDown", d); }
evt = evt || d3.event;
d3.event = evt
if (evt === 1) {
return;
}
if (mouse_mode === RED.state.SELECTING_NODE) {
evt.stopPropagation();
return;
}
if (mouse_mode == RED.state.QUICK_JOINING) {
d3.event.stopPropagation();
return;
}
// mousedown_node = d;
// mousedown_port_type = portType;
// mousedown_port_index = portIndex || 0;
if (mouse_mode !== RED.state.QUICK_JOINING && (evt.ctrlKey || evt.metaKey)) {
mouse_mode = RED.state.QUICK_JOINING;
document.body.style.cursor = "crosshair";
showDragLines([{node:d,port:0,portType: PORT_TYPE_OUTPUT}]);
$(window).on('keyup',disableQuickJoinEventHandler);
} else if (event.button != 2) {
nodeMouseDown.call(junction[0][0],d)
// clearSelection();
// movingSet.add(d);
// mousedown_node = d;
// mouse_mode = RED.state.MOVING;
// var mouse = d3.touches(junction[0][0])[0]||d3.mouse(junction[0][0]);
// mouse[0] += d.x-d.w/2;
// mouse[1] += d.y-d.h/2;
// prepareDrag(mouse);
}
evt.stopPropagation();
evt.preventDefault();
}
function prepareDrag(mouse) { function prepareDrag(mouse) {
mouse_mode = RED.state.MOVING; mouse_mode = RED.state.MOVING;
// Called when movingSet should be prepared to be dragged // Called when movingSet should be prepared to be dragged
@ -3436,6 +3400,9 @@ RED.view = (function() {
return; return;
} else if (mouse_mode === RED.state.SELECTING_NODE) { } else if (mouse_mode === RED.state.SELECTING_NODE) {
d3.event.stopPropagation(); d3.event.stopPropagation();
if (d.type === 'junction') {
return
}
if (selectNodesOptions.single) { if (selectNodesOptions.single) {
selectNodesOptions.done(d); selectNodesOptions.done(d);
return; return;
@ -3462,11 +3429,11 @@ RED.view = (function() {
var now = Date.now(); var now = Date.now();
clickElapsed = now-clickTime; clickElapsed = now-clickTime;
clickTime = now; clickTime = now;
dblClickPrimed = (lastClickNode == mousedown_node && dblClickPrimed = lastClickNode == mousedown_node &&
(d3.event.touches || d3.event.button === 0) && (d3.event.touches || d3.event.button === 0) &&
!d3.event.shiftKey && !d3.event.altKey && !d3.event.shiftKey && !d3.event.altKey &&
clickElapsed < dblClickInterval clickElapsed < dblClickInterval &&
) d.type !== 'junction'
lastClickNode = mousedown_node; lastClickNode = mousedown_node;
if (!d.selected && d.g /*&& !RED.nodes.group(d.g).selected*/) { if (!d.selected && d.g /*&& !RED.nodes.group(d.g).selected*/) {
@ -3593,9 +3560,9 @@ RED.view = (function() {
clearSelection(); clearSelection();
} }
var clickPosition = (d3.event.offsetX/scaleFactor - mousedown_node.x) var clickPosition = (d3.event.offsetX/scaleFactor - mousedown_node.x)
var edgeDelta = (mousedown_node.w/2) - Math.abs(clickPosition); var edgeDelta = ((mousedown_node.w||10)/2) - Math.abs(clickPosition);
var cnodes; var cnodes;
var targetEdgeDelta = mousedown_node.w > 30 ? 25 : 8; var targetEdgeDelta = mousedown_node.w > 30 ? 25 : (mousedown_node.w > 0 ? 8 : 3);
if (edgeDelta < targetEdgeDelta) { if (edgeDelta < targetEdgeDelta) {
if (clickPosition < 0) { if (clickPosition < 0) {
cnodes = [mousedown_node].concat(RED.nodes.getAllUpstreamNodes(mousedown_node)); cnodes = [mousedown_node].concat(RED.nodes.getAllUpstreamNodes(mousedown_node));
@ -3740,10 +3707,8 @@ RED.view = (function() {
function portMouseOverProxy(e) { portMouseOver(d3.select(this), this.__data__,this.__portType__,this.__portIndex__, e); } function portMouseOverProxy(e) { portMouseOver(d3.select(this), this.__data__,this.__portType__,this.__portIndex__, e); }
function portMouseOutProxy(e) { portMouseOut(d3.select(this), this.__data__,this.__portType__,this.__portIndex__, e); } function portMouseOutProxy(e) { portMouseOut(d3.select(this), this.__data__,this.__portType__,this.__portIndex__, e); }
function junctionMouseOverProxy(e) { junctionMouseOver(d3.select(this), this.__data__) } function junctionMouseOverProxy(e) { junctionMouseOver(d3.select(this), this.__data__, this.__portType__) }
function junctionMouseOutProxy(e) { junctionMouseOut(d3.select(this), this.__data__) } function junctionMouseOutProxy(e) { junctionMouseOut(d3.select(this), this.__data__) }
function junctionMouseDownProxy(e) { junctionMouseDown(d3.select(this), this.__data__, e) }
function junctionMouseUpProxy(e) { junctionMouseUp(d3.select(this), this.__data__) }
function linkMouseDown(d) { function linkMouseDown(d) {
if (mouse_mode === RED.state.SELECTING_NODE) { if (mouse_mode === RED.state.SELECTING_NODE) {
@ -4894,22 +4859,56 @@ RED.view = (function() {
junctionBack.setAttribute("y",-5); junctionBack.setAttribute("y",-5);
junctionBack.setAttribute("width",10); junctionBack.setAttribute("width",10);
junctionBack.setAttribute("height",10); junctionBack.setAttribute("height",10);
junctionBack.setAttribute("rx",5); junctionBack.setAttribute("rx",3);
junctionBack.setAttribute("ry",5); junctionBack.setAttribute("ry",3);
junctionBack.__data__ = d; junctionBack.__data__ = d;
this.__junctionBack__ = junctionBack; this.__junctionBack__ = junctionBack;
contents.appendChild(junctionBack); contents.appendChild(junctionBack);
var junctionInput = document.createElementNS("http://www.w3.org/2000/svg","rect");
junctionInput.setAttribute("class","red-ui-flow-junction-port red-ui-flow-junction-port-input");
junctionInput.setAttribute("x",-5);
junctionInput.setAttribute("y",-5);
junctionInput.setAttribute("width",10);
junctionInput.setAttribute("height",10);
junctionInput.setAttribute("rx",3);
junctionInput.setAttribute("ry",3);
junctionInput.__data__ = d;
junctionInput.__portType__ = PORT_TYPE_INPUT;
junctionInput.__portIndex__ = 0;
this.__junctionInput__ = junctionOutput;
contents.appendChild(junctionInput);
junctionInput.addEventListener("mouseup", portMouseUpProxy);
junctionInput.addEventListener("mousedown", portMouseDownProxy);
this.__junctionInput__ = junctionInput;
contents.appendChild(junctionInput);
var junctionOutput = document.createElementNS("http://www.w3.org/2000/svg","rect");
junctionOutput.setAttribute("class","red-ui-flow-junction-port red-ui-flow-junction-port-output");
junctionOutput.setAttribute("x",-5);
junctionOutput.setAttribute("y",-5);
junctionOutput.setAttribute("width",10);
junctionOutput.setAttribute("height",10);
junctionOutput.setAttribute("rx",3);
junctionOutput.setAttribute("ry",3);
junctionOutput.__data__ = d;
junctionOutput.__portType__ = PORT_TYPE_OUTPUT;
junctionOutput.__portIndex__ = 0;
this.__junctionOutput__ = junctionOutput;
contents.appendChild(junctionOutput);
junctionOutput.addEventListener("mouseup", portMouseUpProxy);
junctionOutput.addEventListener("mousedown", portMouseDownProxy);
junctionOutput.addEventListener("mouseover", junctionMouseOverProxy);
junctionOutput.addEventListener("mouseout", junctionMouseOutProxy);
junctionInput.addEventListener("mouseover", junctionMouseOverProxy);
junctionInput.addEventListener("mouseout", junctionMouseOutProxy);
junctionBack.addEventListener("mouseover", junctionMouseOverProxy); junctionBack.addEventListener("mouseover", junctionMouseOverProxy);
junctionBack.addEventListener("mouseout", junctionMouseOutProxy); junctionBack.addEventListener("mouseout", junctionMouseOutProxy);
junctionBack.addEventListener("mouseup", portMouseUpProxy);
junctionBack.addEventListener("mousedown", junctionMouseDownProxy);
// d3.select(junctionBack).on("mousedown", nodeMouseDown); // These handlers expect to be registered as d3 events
d3.select(junctionBack).on("mousedown", nodeMouseDown).on("mouseup", nodeMouseUp);
this.__portType__ = PORT_TYPE_INPUT
this.__portIndex__ = 0
// function portMouseUpProxy(e) { portMouseUp(this.__data__,this.__portType__,this.__portIndex__, e); }
junction[0][0].appendChild(contents); junction[0][0].appendChild(contents);
}) })

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

@ -379,11 +379,39 @@ g.red-ui-flow-link-unknown path.red-ui-flow-link-line {
white-space: pre; white-space: pre;
@include disable-selection; @include disable-selection;
} }
.red-ui-flow-junction:hover {
.red-ui-flow-junction-background {
transform: scale(1.4);
stroke-width: 0.6;
}
.red-ui-flow-junction-port {
opacity: 1
}
.red-ui-flow-junction-port-input {
transform: translate(-10px,0)
}
.red-ui-flow-junction-port-output {
transform: translate(10px,0)
}
}
.red-ui-flow-junction-port {
stroke: $node-border;
stroke-width: 1;
fill: $node-port-background;
cursor: crosshair;
transition: transform 0.1s;
opacity: 0;
}
.red-ui-flow-junction-background { .red-ui-flow-junction-background {
stroke: $node-border; stroke: $node-border;
stroke-width: 1; stroke-width: 1;
fill: $node-port-background; fill: $node-port-background;
cursor: crosshair; cursor: crosshair;
transform: scale(1);
transition: transform 0.1s;
&:hover {
}
} }
.red-ui-flow-junction-hovered { .red-ui-flow-junction-hovered {
stroke: $port-selected-color; stroke: $port-selected-color;