From ed19e4fa08ffd209ac2a14682038d5e580e4e603 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Fri, 8 Jan 2016 22:34:10 +0000
Subject: [PATCH] Splice nodes dragged from palette into links

---
 editor/js/history.js    |  6 +++++
 editor/js/ui/palette.js | 57 +++++++++++++++++++++++++++++++++++++++++
 editor/js/ui/view.js    | 24 ++++++++++++++++-
 editor/sass/flow.scss   |  6 ++++-
 4 files changed, 91 insertions(+), 2 deletions(-)

diff --git a/editor/js/history.js b/editor/js/history.js
index 2443109ad..5c822045b 100644
--- a/editor/js/history.js
+++ b/editor/js/history.js
@@ -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++) {
diff --git a/editor/js/ui/palette.js b/editor/js/ui/palette.js
index e8cc91d8d..e38c1d8b8 100644
--- a/editor/js/ui/palette.js
+++ b/editor/js/ui/palette.js
@@ -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);
+                        }
+                    }
                 }
             });
 
diff --git a/editor/js/ui/view.js b/editor/js/ui/view.js
index 01a4a38bb..30b24142a 100644
--- a/editor/js/ui/view.js
+++ b/editor/js/ui/view.js
@@ -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;
         }
     };
 })();
diff --git a/editor/sass/flow.scss b/editor/sass/flow.scss
index 8b0b130f3..395760201 100644
--- a/editor/sass/flow.scss
+++ b/editor/sass/flow.scss
@@ -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;