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

Update quick-add dialog handling for vertical flow

Browse Source
This commit is contained in:
Nick O'Leary 2019-11-22 22:09:09 +00:00
parent 5d5a112c2b
commit fb1918d839
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 46 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -384,7 +384,17 @@ RED.typeSearch = (function() {
return { return {
show: show, show: show,
refresh: refreshTypeList, refresh: function(opts) {
if (opts.x && opts.y) {
if ($("#red-ui-main-container").height() - opts.y - 150 < 0) {
opts.y = opts.y - 235;
}
dialog.css({left:opts.x+"px",top:opts.y+"px"}).show();
}
if (opts.filter) {
refreshTypeList(opts);
}
},
hide: hide hide: hide
}; };

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

@ -842,7 +842,7 @@ RED.view = (function() {
} }
var sc = (quickAddLink.portType === PORT_TYPE_OUTPUT)?1:-1; var sc = (quickAddLink.portType === PORT_TYPE_OUTPUT)?1:-1;
if (vertical) { if (vertical) {
quickAddLink.el.attr("d",generateLinkPathV(quickAddLink.node.x+portX,quickAddLink.node.y+sc*quickAddLink.node.h/2,point[0]-sc*node_width/2,point[1],sc)); quickAddLink.el.attr("d",generateLinkPathV(quickAddLink.node.x+portX, quickAddLink.node.y+sc*quickAddLink.node.h/2,point[0],point[1]-(node_height/2),sc));
}else{ }else{
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)); 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));
} }
@ -852,12 +852,14 @@ RED.view = (function() {
} }
var lastAddedX; var lastAddedPos;
var lastAddedWidth; var lastAddedWidth;
var tsX = d3.event.clientX-mainPos.left-node_width/2 - (ox-point[0]);
var tsY = d3.event.clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]);
RED.typeSearch.show({ RED.typeSearch.show({
x:d3.event.clientX-mainPos.left-node_width/2 - (ox-point[0]), x:tsX,
y:d3.event.clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]), y:tsY,
filter: filter, filter: filter,
move: function(dx,dy) { move: function(dx,dy) {
if (ghostNode) { if (ghostNode) {
@ -1033,31 +1035,46 @@ RED.view = (function() {
updateActiveNodes(); updateActiveNodes();
updateSelection(); updateSelection();
redraw(); redraw();
// At this point the newly added node will have a real width, if (!vertical) {
// so check if the position needs nudging // At this point the newly added node will have a real width,
if (lastAddedX !== undefined) { // so check if the position needs nudging
var lastNodeRHEdge = lastAddedX + lastAddedWidth/2; if (lastAddedPos !== undefined) {
var thisNodeLHEdge = nn.x - nn.w/2; var lastNodeRHEdge = lastAddedPos + lastAddedWidth/2;
var gap = thisNodeLHEdge - lastNodeRHEdge; var thisNodeLHEdge = nn.x - nn.w/2;
if (gap != gridSize *2) { var gap = thisNodeLHEdge - lastNodeRHEdge;
nn.x = nn.x + gridSize * 2 - gap; if (gap != gridSize *2) {
nn.dirty = true; nn.x = nn.x + gridSize * 2 - gap;
nn.x = Math.ceil(nn.x / gridSize) * gridSize; nn.dirty = true;
redraw(); nn.x = Math.ceil(nn.x / gridSize) * gridSize;
redraw();
}
} }
} }
if (keepAdding) { if (keepAdding) {
if (lastAddedX === undefined) { if (lastAddedPos === undefined) {
// ghostLink.attr("opacity",1); // ghostLink.attr("opacity",1);
setTimeout(function() { setTimeout(function() {
RED.typeSearch.refresh({filter:{input:true}}); RED.typeSearch.refresh({filter:{input:true}});
},100); },100);
} }
lastAddedX = nn.x; if (vertical) {
lastAddedPos = nn.y;
if ($("#red-ui-main-container").height()-150 < tsY) {
var delta = tsY - ($("#red-ui-main-container").height()-150);
var st = $("#red-ui-workspace-chart").scrollTop();
$("#red-ui-workspace-chart").scrollTop(st+delta);
tsY -= delta;
}
point[1] = nn.y + nn.h + node_height+gridSize;
tsY += nn.h + node_height+gridSize;
RED.typeSearch.refresh({x:tsX,y:tsY});
} else {
lastAddedPos = nn.x;
point[0] = nn.x + nn.w/2 + node_width/2 + gridSize * 2;
}
lastAddedWidth = nn.w; 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)+')'); ghostNode.attr('transform','translate('+(point[0] - node_width/2)+','+(point[1] - node_height/2)+')');
rebuildQuickAddLink(); rebuildQuickAddLink();
} else { } else {