1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Merge branch 'pr_2033' into dev

This commit is contained in:
Nick O'Leary 2019-01-23 16:29:14 +00:00
commit 3c8e4f8bbf
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 234 additions and 84 deletions

View File

@ -48,7 +48,7 @@ RED.typeSearch = (function() {
//shade = $('<div>',{class:"red-ui-type-search-shade"}).appendTo("#main-container"); //shade = $('<div>',{class:"red-ui-type-search-shade"}).appendTo("#main-container");
dialog = $("<div>",{id:"red-ui-type-search",class:"red-ui-search red-ui-type-search"}).appendTo("#main-container"); dialog = $("<div>",{id:"red-ui-type-search",class:"red-ui-search red-ui-type-search"}).appendTo("#main-container");
var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog); var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog);
searchInput = $('<input type="text">').attr("placeholder",RED._("search.addNode")).appendTo(searchDiv).searchBox({ searchInput = $('<input type="text" id="red-ui-type-search-input">').attr("placeholder",RED._("search.addNode")).appendTo(searchDiv).searchBox({
delay: 50, delay: 50,
change: function() { change: function() {
search($(this).val()); search($(this).val());
@ -79,6 +79,19 @@ RED.typeSearch = (function() {
$(children[selected]).addClass('selected'); $(children[selected]).addClass('selected');
ensureSelectedIsVisible(); ensureSelectedIsVisible();
evt.preventDefault(); evt.preventDefault();
} else if ((evt.metaKey || evt.ctrlKey) && evt.keyCode === 13 ) {
// (ctrl or cmd) and enter
var index = Math.max(0,selected);
if (index < children.length) {
var n = $(children[index]).find(".red-ui-editableList-item-content").data('data');
typesUsed[n.type] = Date.now();
if (n.def.outputs === 0) {
confirm(n);
} else {
addCallback(n.type,true);
}
$("#red-ui-type-search-input").val("").keyup();
}
} else if (evt.keyCode === 13) { } else if (evt.keyCode === 13) {
// Enter // Enter
var index = Math.max(0,selected); var index = Math.max(0,selected);
@ -191,20 +204,27 @@ RED.typeSearch = (function() {
createDialog(); createDialog();
} }
visible = true; visible = true;
setTimeout(function() {
$(document).on('mousedown.type-search',handleMouseActivity);
$(document).on('mouseup.type-search',handleMouseActivity);
$(document).on('click.type-search',handleMouseActivity);
},200);
} else { } else {
dialog.hide(); dialog.hide();
searchResultsDiv.hide(); searchResultsDiv.hide();
} }
$(document).off('mousedown.type-search');
$(document).off('mouseup.type-search');
$(document).off('click.type-search');
setTimeout(function() {
$(document).on('mousedown.type-search',handleMouseActivity);
$(document).on('mouseup.type-search',handleMouseActivity);
$(document).on('click.type-search',handleMouseActivity);
},200);
refreshTypeList(opts); refreshTypeList(opts);
addCallback = opts.add; addCallback = opts.add;
closeCallback = opts.close; cancelCallback = opts.cancel;
RED.events.emit("type-search:open"); RED.events.emit("type-search:open");
//shade.show(); //shade.show();
if ($("#main-container").height() - opts.y - 150 < 0) {
opts.y = opts.y - 235;
}
dialog.css({left:opts.x+"px",top:opts.y+"px"}).show(); dialog.css({left:opts.x+"px",top:opts.y+"px"}).show();
searchResultsDiv.slideDown(300); searchResultsDiv.slideDown(300);
setTimeout(function() { setTimeout(function() {
@ -230,7 +250,6 @@ RED.typeSearch = (function() {
$(document).off('click.type-search'); $(document).off('click.type-search');
} }
} }
function getTypeLabel(type, def) { function getTypeLabel(type, def) {
var label = type; var label = type;
if (typeof def.paletteLabel !== "undefined") { if (typeof def.paletteLabel !== "undefined") {
@ -334,6 +353,7 @@ RED.typeSearch = (function() {
return { return {
show: show, show: show,
refresh: refreshTypeList,
hide: hide hide: hide
}; };

View File

@ -55,6 +55,7 @@ RED.view = (function() {
mouse_mode = 0, mouse_mode = 0,
moving_set = [], moving_set = [],
lasso = null, lasso = null,
ghostNode = null,
showStatus = false, showStatus = false,
lastClickNode = null, lastClickNode = null,
dblClickPrimed = null, dblClickPrimed = null,
@ -650,10 +651,8 @@ RED.view = (function() {
mouse_mode = RED.state.PANNING; mouse_mode = RED.state.PANNING;
mouse_position = [d3.event.pageX,d3.event.pageY] mouse_position = [d3.event.pageX,d3.event.pageY]
scroll_position = [chart.scrollLeft(),chart.scrollTop()]; scroll_position = [chart.scrollLeft(),chart.scrollTop()];
return; return;
} }
if (!mousedown_node && !mousedown_link) { if (!mousedown_node && !mousedown_link) {
selected_link = null; selected_link = null;
updateSelection(); updateSelection();
@ -667,6 +666,16 @@ RED.view = (function() {
if (mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) { if (mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) {
if (d3.event.metaKey || d3.event.ctrlKey) { if (d3.event.metaKey || d3.event.ctrlKey) {
point = d3.mouse(this); point = d3.mouse(this);
var ox = point[0];
var oy = point[1];
if (RED.settings.get("editor").view['view-snap-grid']) {
// vis.append("circle").attr("cx",point[0]).attr("cy",point[1]).attr("r","2").attr('fill','red')
point[0] = Math.round(point[0] / gridSize) * gridSize;
point[1] = Math.round(point[1] / gridSize) * gridSize;
// vis.append("circle").attr("cx",point[0]).attr("cy",point[1]).attr("r","2").attr('fill','blue')
}
d3.event.stopPropagation(); d3.event.stopPropagation();
var mainPos = $("#main-container").position(); var mainPos = $("#main-container").position();
@ -674,6 +683,24 @@ RED.view = (function() {
mouse_mode = RED.state.QUICK_JOINING; mouse_mode = RED.state.QUICK_JOINING;
$(window).on('keyup',disableQuickJoinEventHandler); $(window).on('keyup',disableQuickJoinEventHandler);
} }
quickAddActive = true;
if (ghostNode) {
ghostNode.remove();
}
ghostNode = vis.append("g").attr('transform','translate('+(point[0] - node_width/2)+','+(point[1] - node_height/2)+')');
ghostNode.append("rect")
.attr("class","node_placeholder")
.attr("rx", 5)
.attr("ry", 5)
.attr("width",node_width)
.attr("height",node_height)
.attr("fill","none")
// var ghostLink = ghostNode.append("svg:path")
// .attr("class","link_link")
// .attr("d","M 0 "+(node_height/2)+" H "+(gridSize * -2))
// .attr("opacity",0);
var filter = undefined; var filter = undefined;
if (drag_lines.length > 0) { if (drag_lines.length > 0) {
if (drag_lines[0].virtualLink) { if (drag_lines[0].virtualLink) {
@ -683,106 +710,176 @@ RED.view = (function() {
} else { } else {
filter = {output:true} filter = {output:true}
} }
quickAddLink = {
node: drag_lines[0].node,
port: drag_lines[0].port,
portType: drag_lines[0].portType,
}
if (drag_lines[0].virtualLink) {
quickAddLink.virtualLink = true;
}
hideDragLines();
} }
quickAddActive = true; var rebuildQuickAddLink = function() {
if (!quickAddLink) {
return;
}
if (!quickAddLink.el) {
quickAddLink.el = dragGroup.append("svg:path").attr("class", "drag_line");
}
var numOutputs = (quickAddLink.portType === PORT_TYPE_OUTPUT)?(quickAddLink.node.outputs || 1):1;
var sourcePort = quickAddLink.port;
var portY = -((numOutputs-1)/2)*13 +13*sourcePort;
var sc = (quickAddLink.portType === PORT_TYPE_OUTPUT)?1:-1;
quickAddLink.el.attr("d",generateLinkPath(quickAddLink.node.x+sc*quickAddLink.node.w/2,quickAddLink.node.y+portY,point[0]-sc*node_width/2,point[1],sc));
}
if (quickAddLink) {
rebuildQuickAddLink();
}
var lastAddedX;
var lastAddedWidth;
RED.typeSearch.show({ RED.typeSearch.show({
x:d3.event.clientX-mainPos.left-node_width/2, x:d3.event.clientX-mainPos.left-node_width/2 - (ox-point[0]),
y:d3.event.clientY-mainPos.top-node_height/2, y:d3.event.clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]),
filter: filter, filter: filter,
cancel: function() { cancel: function() {
if (quickAddLink) {
if (quickAddLink.el) {
quickAddLink.el.remove();
}
quickAddLink = null;
}
quickAddActive = false; quickAddActive = false;
if (ghostNode) {
ghostNode.remove();
}
resetMouseVars(); resetMouseVars();
updateSelection();
hideDragLines();
redraw();
}, },
add: function(type) { add: function(type,keepAdding) {
quickAddActive = false;
var result = addNode(type); var result = addNode(type);
if (!result) { if (!result) {
return; return;
} }
if (keepAdding) {
mouse_mode = RED.state.QUICK_JOINING;
}
var nn = result.node; var nn = result.node;
var historyEvent = result.historyEvent; var historyEvent = result.historyEvent;
nn.x = point[0]; nn.x = point[0];
nn.y = point[1]; nn.y = point[1];
var showLabel = RED.utils.getMessageProperty(RED.settings.get('editor'),"view.view-node-show-label"); var showLabel = RED.utils.getMessageProperty(RED.settings.get('editor'),"view.view-node-show-label");
if (showLabel !== undefined && !/^link (in|out)$/.test(nn._def.type) && !nn._def.defaults.hasOwnProperty("l")) { if (showLabel !== undefined && !/^link (in|out)$/.test(nn._def.type) && !nn._def.defaults.hasOwnProperty("l")) {
nn.l = showLabel; nn.l = showLabel;
} }
if (quickAddLink) {
var drag_line = quickAddLink;
var src = null,dst,src_port;
if (drag_line.portType === PORT_TYPE_OUTPUT && (nn.inputs > 0 || drag_line.virtualLink) ) {
src = drag_line.node;
src_port = drag_line.port;
dst = nn;
} else if (drag_line.portType === PORT_TYPE_INPUT && (nn.outputs > 0 || drag_line.virtualLink)) {
src = nn;
dst = drag_line.node;
src_port = 0;
}
if (mouse_mode === RED.state.QUICK_JOINING || quickAddLink) { if (src !== null) {
if (quickAddLink || drag_lines.length > 0) { // Joining link nodes via virual wires. Need to update
var drag_line = quickAddLink||drag_lines[0]; // the src and dst links property
var src = null,dst,src_port; if (drag_line.virtualLink) {
if (drag_line.portType === PORT_TYPE_OUTPUT && (nn.inputs > 0 || drag_line.virtualLink) ) { historyEvent = {
src = drag_line.node; t:'multi',
src_port = drag_line.port; events: [historyEvent]
dst = nn;
} else if (drag_line.portType === PORT_TYPE_INPUT && (nn.outputs > 0 || drag_line.virtualLink)) {
src = nn;
dst = drag_line.node;
src_port = 0;
}
if (src !== null) {
if (drag_line.virtualLink) {
historyEvent = {
t:'multi',
events: [historyEvent]
}
var oldSrcLinks = $.extend(true,{},{v:src.links}).v
var oldDstLinks = $.extend(true,{},{v:dst.links}).v
src.links.push(dst.id);
dst.links.push(src.id);
src.dirty = true;
dst.dirty = true;
historyEvent.events.push({
t:'edit',
node: src,
dirty: RED.nodes.dirty(),
changed: src.changed,
changes: {
links:oldSrcLinks
}
});
historyEvent.events.push({
t:'edit',
node: dst,
dirty: RED.nodes.dirty(),
changed: dst.changed,
changes: {
links:oldDstLinks
}
});
src.changed = true;
dst.changed = true;
} else {
var link = {source: src, sourcePort:src_port, target: dst};
RED.nodes.addLink(link);
historyEvent.links = [link];
} }
hideDragLines(); var oldSrcLinks = $.extend(true,{},{v:src.links}).v
if (!quickAddLink && drag_line.portType === PORT_TYPE_OUTPUT && nn.outputs > 0) { var oldDstLinks = $.extend(true,{},{v:dst.links}).v
src.links.push(dst.id);
dst.links.push(src.id);
src.dirty = true;
dst.dirty = true;
historyEvent.events.push({
t:'edit',
node: src,
dirty: RED.nodes.dirty(),
changed: src.changed,
changes: {
links:oldSrcLinks
}
});
historyEvent.events.push({
t:'edit',
node: dst,
dirty: RED.nodes.dirty(),
changed: dst.changed,
changes: {
links:oldDstLinks
}
});
src.changed = true;
dst.changed = true;
} else {
var link = {source: src, sourcePort:src_port, target: dst};
RED.nodes.addLink(link);
historyEvent.links = [link];
}
if (!keepAdding) {
quickAddLink.el.remove();
quickAddLink = null;
if (mouse_mode === RED.state.QUICK_JOINING) {
if (drag_line.portType === PORT_TYPE_OUTPUT && nn.outputs > 0) {
showDragLines([{node:nn,port:0,portType:PORT_TYPE_OUTPUT}]);
} else if (!quickAddLink && drag_line.portType === PORT_TYPE_INPUT && nn.inputs > 0) {
showDragLines([{node:nn,port:0,portType:PORT_TYPE_INPUT}]);
} else {
resetMouseVars();
}
}
} else {
quickAddLink.node = nn;
quickAddLink.port = 0;
}
} else {
hideDragLines();
resetMouseVars();
}
} else {
if (!keepAdding) {
if (mouse_mode === RED.state.QUICK_JOINING) {
if (nn.outputs > 0) {
showDragLines([{node:nn,port:0,portType:PORT_TYPE_OUTPUT}]); showDragLines([{node:nn,port:0,portType:PORT_TYPE_OUTPUT}]);
} else if (!quickAddLink && drag_line.portType === PORT_TYPE_INPUT && nn.inputs > 0) { } else if (nn.inputs > 0) {
showDragLines([{node:nn,port:0,portType:PORT_TYPE_INPUT}]); showDragLines([{node:nn,port:0,portType:PORT_TYPE_INPUT}]);
} else { } else {
resetMouseVars(); resetMouseVars();
} }
} else {
hideDragLines();
resetMouseVars();
} }
} else { } else {
if (nn.outputs > 0) { if (nn.outputs > 0) {
showDragLines([{node:nn,port:0,portType:PORT_TYPE_OUTPUT}]); quickAddLink = {
node: nn,
port: 0,
portType: PORT_TYPE_OUTPUT
}
} else if (nn.inputs > 0) { } else if (nn.inputs > 0) {
showDragLines([{node:nn,port:0,portType:PORT_TYPE_INPUT}]); quickAddLink = {
node: nn,
port: 0,
portType: PORT_TYPE_INPUT
}
} else { } else {
resetMouseVars(); resetMouseVars();
} }
} }
quickAddLink = null;
} }
RED.history.push(historyEvent); RED.history.push(historyEvent);
@ -796,6 +893,37 @@ RED.view = (function() {
updateActiveNodes(); updateActiveNodes();
updateSelection(); updateSelection();
redraw(); redraw();
// At this point the newly added node will have a real width,
// so check if the position needs nudging
if (lastAddedX !== undefined) {
var lastNodeRHEdge = lastAddedX + lastAddedWidth/2;
var thisNodeLHEdge = nn.x - nn.w/2;
var gap = thisNodeLHEdge - lastNodeRHEdge;
if (gap != gridSize *2) {
nn.x = nn.x + gridSize * 2 - gap;
nn.dirty = true;
nn.x = Math.ceil(nn.x / gridSize) * gridSize;
redraw();
}
}
if (keepAdding) {
if (lastAddedX === undefined) {
// ghostLink.attr("opacity",1);
setTimeout(function() {
RED.typeSearch.refresh({filter:{input:true}});
},100);
}
lastAddedX = nn.x;
lastAddedWidth = nn.w;
point[0] = nn.x + nn.w/2 + node_width/2 + gridSize * 2;
ghostNode.attr('transform','translate('+(point[0] - node_width/2)+','+(point[1] - node_height/2)+')');
rebuildQuickAddLink();
} else {
quickAddActive = false;
ghostNode.remove();
}
} }
}); });
@ -850,7 +978,6 @@ RED.view = (function() {
mouse_position = d3.touches(this)[0]||d3.mouse(this); mouse_position = d3.touches(this)[0]||d3.mouse(this);
if (lasso) { if (lasso) {
var ox = parseInt(lasso.attr("ox")); var ox = parseInt(lasso.attr("ox"));
var oy = parseInt(lasso.attr("oy")); var oy = parseInt(lasso.attr("oy"));
@ -935,7 +1062,7 @@ RED.view = (function() {
redraw(); redraw();
mouse_mode = RED.state.JOINING; mouse_mode = RED.state.JOINING;
} }
} else if (mousedown_node) { } else if (mousedown_node && !quickAddLink) {
showDragLines([{node:mousedown_node,port:mousedown_port_index,portType:mousedown_port_type}]); showDragLines([{node:mousedown_node,port:mousedown_port_index,portType:mousedown_port_type}]);
} }
selected_link = null; selected_link = null;
@ -948,7 +1075,6 @@ RED.view = (function() {
var portY = -((numOutputs-1)/2)*13 +13*sourcePort; var portY = -((numOutputs-1)/2)*13 +13*sourcePort;
var sc = (drag_line.portType === PORT_TYPE_OUTPUT)?1:-1; var sc = (drag_line.portType === PORT_TYPE_OUTPUT)?1:-1;
drag_line.el.attr("d",generateLinkPath(drag_line.node.x+sc*drag_line.node.w/2,drag_line.node.y+portY,mousePos[0],mousePos[1],sc)); drag_line.el.attr("d",generateLinkPath(drag_line.node.x+sc*drag_line.node.w/2,drag_line.node.y+portY,mousePos[0],mousePos[1],sc));
} }
d3.event.preventDefault(); d3.event.preventDefault();
@ -1139,7 +1265,7 @@ RED.view = (function() {
updateSelection(); updateSelection();
lasso.remove(); lasso.remove();
lasso = null; lasso = null;
} else if (mouse_mode == RED.state.DEFAULT && mousedown_link == null && !d3.event.ctrlKey&& !d3.event.metaKey ) { } else if (mouse_mode == RED.state.DEFAULT && mousedown_link == null && !d3.event.ctrlKey && !d3.event.metaKey ) {
clearSelection(); clearSelection();
updateSelection(); updateSelection();
} }
@ -1616,9 +1742,6 @@ RED.view = (function() {
function disableQuickJoinEventHandler(evt) { function disableQuickJoinEventHandler(evt) {
// Check for ctrl (all browsers), "Meta" (Chrome/FF), keyCode 91 (Safari) // Check for ctrl (all browsers), "Meta" (Chrome/FF), keyCode 91 (Safari)
if (evt.keyCode === 17 || evt.key === "Meta" || evt.keyCode === 91) { if (evt.keyCode === 17 || evt.key === "Meta" || evt.keyCode === 91) {
if (quickAddActive && drag_lines.length > 0) {
quickAddLink = drag_lines[0];
}
resetMouseVars(); resetMouseVars();
hideDragLines(); hideDragLines();
redraw(); redraw();
@ -1643,7 +1766,6 @@ RED.view = (function() {
if (d3.event.ctrlKey || d3.event.metaKey) { if (d3.event.ctrlKey || d3.event.metaKey) {
mouse_mode = RED.state.QUICK_JOINING; mouse_mode = RED.state.QUICK_JOINING;
showDragLines([{node:mousedown_node,port:mousedown_port_index,portType:mousedown_port_type}]); showDragLines([{node:mousedown_node,port:mousedown_port_index,portType:mousedown_port_type}]);
quickAddLink = null;
$(window).on('keyup',disableQuickJoinEventHandler); $(window).on('keyup',disableQuickJoinEventHandler);
} }
} }

View File

@ -92,6 +92,14 @@
stroke-dasharray:10,4; stroke-dasharray:10,4;
stroke: #f33; stroke: #f33;
} }
.node_placeholder {
stroke-dasharray:10,4;
stroke: #aaa;
fill: #eee;
opacity: 0.5;
stroke-width: 2;
}
.tool_arrow { .tool_arrow {
stroke-width: 1; stroke-width: 1;
stroke: #999; stroke: #999;