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

Splice nodes dragged from palette into links

Browse Source
This commit is contained in:
Nick O'Leary 2016-01-08 22:34:10 +00:00
parent 661e1a4f90
commit ed19e4fa08
4 changed files with 91 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
editor/js/history.js
View File

@ -80,6 +80,12 @@ RED.history = (function() {
}
}
}
if (ev.removedLinks) {
for (i=0;i<ev.removedLinks.length;i++) {
RED.nodes.addLink(ev.removedLinks[i]);
}
}
} else if (ev.t == "delete") {
if (ev.workspaces) {
for (i=0;i<ev.workspaces.length;i++) {

57
editor/js/ui/palette.js
View File

@ -210,6 +210,13 @@ RED.palette = (function() {
var help = '<div class="node-help">'+helpText+"</div>";
RED.sidebar.info.set(help);
});
var chart = $("#chart");
var chartOffset = chart.offset();
var chartSVG = $("#chart>svg").get(0);
var activeSpliceLink;
var mouseX;
var mouseY;
var spliceTimer;
$(d).draggable({
helper: 'clone',
appendTo: 'body',
@ -220,6 +227,56 @@ RED.palette = (function() {
// TODO: this is the margin-left of palette node. Hard coding
// it here makes me sad
ui.position.left += 17.5;
if (def.inputs > 0 && def.outputs > 0) {
mouseX = e.clientX - chartOffset.left+chart.scrollLeft();
mouseY = e.clientY-chartOffset.top +chart.scrollTop();
if (!spliceTimer) {
spliceTimer = setTimeout(function() {
var svgRect = chartSVG.createSVGRect();
svgRect.x = mouseX;
svgRect.y = mouseY;
svgRect.width = 1;
svgRect.height = 1;
var bestDistance = Infinity;
var bestLink = null;
var nodes = chartSVG.getIntersectionList(svgRect,chartSVG);
mouseX /= RED.view.scale();
mouseY /= RED.view.scale();
for (var i=0;i<nodes.length;i++) {
if (d3.select(nodes[i]).classed('link_background')) {
var length = nodes[i].getTotalLength();
for (var j=0;j<length;j+=10) {
var p = nodes[i].getPointAtLength(j);
var d2 = ((p.x-mouseX)*(p.x-mouseX))+((p.y-mouseY)*(p.y-mouseY));
if (d2 < 200 && d2 < bestDistance) {
bestDistance = d2;
bestLink = nodes[i];
}
}
}
}
if (activeSpliceLink && activeSpliceLink !== bestLink) {
d3.select(activeSpliceLink.parentNode).classed('link_splice',false);
}
if (bestLink) {
d3.select(bestLink.parentNode).classed('link_splice',true)
} else {
d3.select('.link_splice').classed('link_splice',false);
}
if (activeSpliceLink !== bestLink) {
if (bestLink) {
$(ui.helper).data('splice',d3.select(bestLink).data()[0]);
} else {
$(ui.helper).removeData('splice');
}
}
activeSpliceLink = bestLink;
spliceTimer = null;
},200);
}
}
}
});

24
editor/js/ui/view.js
View File

@ -363,6 +363,7 @@ RED.view = (function() {
var helperOffset = d3.touches(ui.helper.get(0))[0]||d3.mouse(ui.helper.get(0));
var mousePos = d3.touches(this)[0]||d3.mouse(this);
mousePos[1] += this.scrollTop + ((nn.h/2)-helperOffset[1]);
mousePos[0] += this.scrollLeft + ((nn.w/2)-helperOffset[0]);
mousePos[1] /= scaleFactor;
@ -375,6 +376,24 @@ RED.view = (function() {
nn.x = mousePos[0];
nn.y = mousePos[1];
var spliceLink = $(ui.helper).data('splice');
if (spliceLink) {
RED.nodes.removeLink(spliceLink);
var link1 = {
source:spliceLink.source,
sourcePort:spliceLink.sourcePort,
target: nn
};
var link2 = {
source:nn,
sourcePort:0,
target: spliceLink.target
};
RED.nodes.addLink(link1);
RED.nodes.addLink(link2);
historyEvent.links = [link1,link2];
historyEvent.removedLinks = [spliceLink];
}
RED.history.push(historyEvent);
RED.nodes.add(nn);
@ -1634,7 +1653,7 @@ RED.view = (function() {
touchStartTime = null;
showTouchMenu(obj,pos);
},touchLongPressTimeout);
});
})
l.append("svg:path").attr("class","link_outline link_path");
l.append("svg:path").attr("class","link_line link_path")
.classed("link_subflow", function(d) { return activeSubflow && (d.source.type === "subflow" || d.target.type === "subflow") });
@ -1871,6 +1890,9 @@ RED.view = (function() {
toggleSnapGrid: function(state) {
snapGrid = state;
redraw();
},
scale: function() {
return scaleFactor;
}
};
})();

6
editor/sass/flow.scss
View File

@ -186,7 +186,8 @@
.drag_line {
stroke: $node-selected-color;
stroke-width: 4;
stroke-width: 2;
stroke-dasharray: 15,8;
fill: none;
pointer-events: none;
}
@ -225,6 +226,9 @@
cursor: crosshair;
fill: none;
}
.link_splice > .link_line {
stroke-dasharray: 15,8;
}
g.link_selected path.link_line {
stroke: $node-selected-color;