mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Add placeholder node when in quick-add mode
This commit is contained in:
Nick O'Leary
parent
85efb48c1f
commit
aa9a37da38
@ -80,16 +80,18 @@ RED.typeSearch = (function() {
|
||||
ensureSelectedIsVisible();
|
||||
evt.preventDefault();
|
||||
} else if ((evt.metaKey || evt.ctrlKey) && evt.keyCode === 13 ) {
|
||||
// (ctrl or cmd) and enter
|
||||
// (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("");
|
||||
if (n.def.outputs === 0) {
|
||||
confirm(n);
|
||||
} else {
|
||||
addCallback(n.type,true);
|
||||
}
|
||||
$("#red-ui-type-search-input").val("").keyup();
|
||||
}
|
||||
evt.preventDefault();
|
||||
} else if (evt.keyCode === 13) {
|
||||
// Enter
|
||||
var index = Math.max(0,selected);
|
||||
@ -202,20 +204,27 @@ RED.typeSearch = (function() {
|
||||
createDialog();
|
||||
}
|
||||
visible = true;
|
||||
setTimeout(function() {
|
||||
$(document).on('mousedown.type-search',handleMouseActivity);
|
||||
$(document).on('mouseup.type-search',handleMouseActivity);
|
||||
$(document).on('click.type-search',handleMouseActivity);
|
||||
},200);
|
||||
} else {
|
||||
dialog.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);
|
||||
addCallback = opts.add;
|
||||
cancelCallback = opts.cancel;
|
||||
RED.events.emit("type-search:open");
|
||||
//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();
|
||||
searchResultsDiv.slideDown(300);
|
||||
setTimeout(function() {
|
||||
@ -344,6 +353,7 @@ RED.typeSearch = (function() {
|
||||
|
||||
return {
|
||||
show: show,
|
||||
refresh: refreshTypeList,
|
||||
hide: hide
|
||||
};
|
||||
|
||||
|
||||
@ -55,6 +55,7 @@ RED.view = (function() {
|
||||
mouse_mode = 0,
|
||||
moving_set = [],
|
||||
lasso = null,
|
||||
ghostNode = null,
|
||||
showStatus = false,
|
||||
lastClickNode = null,
|
||||
dblClickPrimed = null,
|
||||
@ -665,6 +666,16 @@ RED.view = (function() {
|
||||
if (mouse_mode === 0 || mouse_mode === RED.state.QUICK_JOINING) {
|
||||
if (d3.event.metaKey || d3.event.ctrlKey) {
|
||||
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();
|
||||
var mainPos = $("#main-container").position();
|
||||
|
||||
@ -672,6 +683,24 @@ RED.view = (function() {
|
||||
mouse_mode = RED.state.QUICK_JOINING;
|
||||
$(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;
|
||||
if (drag_lines.length > 0) {
|
||||
if (drag_lines[0].virtualLink) {
|
||||
@ -681,116 +710,176 @@ RED.view = (function() {
|
||||
} else {
|
||||
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({
|
||||
x:d3.event.clientX-mainPos.left-node_width/2,
|
||||
y:d3.event.clientY-mainPos.top-node_height/2 + 30,
|
||||
x:d3.event.clientX-mainPos.left-node_width/2 - (ox-point[0]),
|
||||
y:d3.event.clientY-mainPos.top+ node_height/2 + 5 - (oy-point[1]),
|
||||
filter: filter,
|
||||
cancel: function() {
|
||||
if (quickAddLink) {
|
||||
if (quickAddLink.el) {
|
||||
quickAddLink.el.remove();
|
||||
}
|
||||
quickAddLink = null;
|
||||
}
|
||||
quickAddActive = false;
|
||||
if (ghostNode) {
|
||||
ghostNode.remove();
|
||||
}
|
||||
resetMouseVars();
|
||||
updateSelection();
|
||||
hideDragLines();
|
||||
redraw();
|
||||
},
|
||||
add: function(type,auto) {
|
||||
quickAddActive = false;
|
||||
if (auto === true) { mouse_mode = RED.state.QUICK_JOINING; }
|
||||
add: function(type,keepAdding) {
|
||||
var result = addNode(type);
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
var nn = result.node;
|
||||
var historyEvent = result.historyEvent;
|
||||
if (RED.settings.get("editor").view['view-snap-grid']) {
|
||||
nn.x = Math.ceil((point[0] - 50) / gridSize) * gridSize + 50;
|
||||
nn.y = parseInt(point[1] / gridSize) * gridSize;
|
||||
}
|
||||
else {
|
||||
nn.x = point[0];
|
||||
nn.y = point[1];
|
||||
if (keepAdding) {
|
||||
mouse_mode = RED.state.QUICK_JOINING;
|
||||
}
|
||||
|
||||
var nn = result.node;
|
||||
var historyEvent = result.historyEvent;
|
||||
nn.x = point[0];
|
||||
nn.y = point[1];
|
||||
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")) {
|
||||
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 (quickAddLink || drag_lines.length > 0) {
|
||||
var drag_line = quickAddLink||drag_lines[0];
|
||||
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 (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];
|
||||
if (src !== null) {
|
||||
// Joining link nodes via virual wires. Need to update
|
||||
// the src and dst links property
|
||||
if (drag_line.virtualLink) {
|
||||
historyEvent = {
|
||||
t:'multi',
|
||||
events: [historyEvent]
|
||||
}
|
||||
hideDragLines();
|
||||
if (!quickAddLink && drag_line.portType === PORT_TYPE_OUTPUT && nn.outputs > 0) {
|
||||
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];
|
||||
}
|
||||
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}]);
|
||||
} 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}]);
|
||||
} else {
|
||||
resetMouseVars();
|
||||
}
|
||||
} else {
|
||||
hideDragLines();
|
||||
resetMouseVars();
|
||||
}
|
||||
} else {
|
||||
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) {
|
||||
showDragLines([{node:nn,port:0,portType:PORT_TYPE_INPUT}]);
|
||||
quickAddLink = {
|
||||
node: nn,
|
||||
port: 0,
|
||||
portType: PORT_TYPE_INPUT
|
||||
}
|
||||
} else {
|
||||
resetMouseVars();
|
||||
}
|
||||
}
|
||||
quickAddLink = null;
|
||||
}
|
||||
|
||||
RED.history.push(historyEvent);
|
||||
@ -804,7 +893,37 @@ RED.view = (function() {
|
||||
updateActiveNodes();
|
||||
updateSelection();
|
||||
redraw();
|
||||
if (auto === true) { point[0] = point[0] + ((nn.w < 100) ? 100 : nn.w) + gridSize * 2; }
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -943,7 +1062,7 @@ RED.view = (function() {
|
||||
redraw();
|
||||
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}]);
|
||||
}
|
||||
selected_link = null;
|
||||
@ -956,7 +1075,6 @@ RED.view = (function() {
|
||||
var portY = -((numOutputs-1)/2)*13 +13*sourcePort;
|
||||
|
||||
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));
|
||||
}
|
||||
d3.event.preventDefault();
|
||||
@ -1624,9 +1742,6 @@ RED.view = (function() {
|
||||
function disableQuickJoinEventHandler(evt) {
|
||||
// Check for ctrl (all browsers), "Meta" (Chrome/FF), keyCode 91 (Safari)
|
||||
if (evt.keyCode === 17 || evt.key === "Meta" || evt.keyCode === 91) {
|
||||
if (quickAddActive && drag_lines.length > 0) {
|
||||
quickAddLink = drag_lines[0];
|
||||
}
|
||||
resetMouseVars();
|
||||
hideDragLines();
|
||||
redraw();
|
||||
@ -1651,7 +1766,6 @@ RED.view = (function() {
|
||||
if (d3.event.ctrlKey || d3.event.metaKey) {
|
||||
mouse_mode = RED.state.QUICK_JOINING;
|
||||
showDragLines([{node:mousedown_node,port:mousedown_port_index,portType:mousedown_port_type}]);
|
||||
quickAddLink = null;
|
||||
$(window).on('keyup',disableQuickJoinEventHandler);
|
||||
}
|
||||
}
|
||||
|
||||
@ -92,6 +92,14 @@
|
||||
stroke-dasharray:10,4;
|
||||
stroke: #f33;
|
||||
}
|
||||
.node_placeholder {
|
||||
stroke-dasharray:10,4;
|
||||
stroke: #aaa;
|
||||
fill: #eee;
|
||||
opacity: 0.5;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.tool_arrow {
|
||||
stroke-width: 1;
|
||||
stroke: #999;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user