From 863ceb065af5a6314eb43694750f40fb2de63a89 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 15 May 2014 22:44:07 +0100
Subject: [PATCH] Make links a bigger target

---
 public/red/ui/view.js | 44 +++++++++++++++++++++++++------------------
 public/style.css      | 22 +++++++++++++++++++---
 2 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/public/red/ui/view.js b/public/red/ui/view.js
index 1373b5bda..2a458d309 100644
--- a/public/red/ui/view.js
+++ b/public/red/ui/view.js
@@ -1188,27 +1188,35 @@ RED.view = function() {
 
         var link = vis.selectAll(".link").data(RED.nodes.links.filter(function(d) { return d.source.z == activeWorkspace && d.target.z == activeWorkspace }));
 
-        link.enter().insert("svg:path",".node").attr("class","link")
-           .on("mousedown",function(d) {
-                mousedown_link = d;
-                clearSelection();
-                selected_link = mousedown_link;
-                updateSelection();
-                redraw();
-                d3.event.stopPropagation();
-            })
-            .on("touchstart",function(d) {
-                mousedown_link = d;
-                clearSelection();
-                selected_link = mousedown_link;
-                updateSelection();
-                redraw();
-                d3.event.stopPropagation();
-            });
+        var linkEnter = link.enter().insert("g",".node").attr("class","link");
+        
+        linkEnter.each(function(d,i) {
+            var l = d3.select(this);
+            l.append("svg:path").attr("class","link_background link_path")
+               .on("mousedown",function(d) {
+                    mousedown_link = d;
+                    clearSelection();
+                    selected_link = mousedown_link;
+                    updateSelection();
+                    redraw();
+                    d3.event.stopPropagation();
+                })
+                .on("touchstart",function(d) {
+                    mousedown_link = d;
+                    clearSelection();
+                    selected_link = mousedown_link;
+                    updateSelection();
+                    redraw();
+                    d3.event.stopPropagation();
+                });
+            l.append("svg:path").attr("class","link_outline link_path");
+            l.append("svg:path").attr("class","link_line link_path");
+        });
 
         link.exit().remove();
 
-        link.attr("d",function(d){
+        var links = vis.selectAll(".link_path")
+        links.attr("d",function(d){
                 var numOutputs = d.source.outputs || 1;
                 var sourcePort = d.sourcePort || 0;
                 var y = -((numOutputs-1)/2)*13 +13*sourcePort;
diff --git a/public/style.css b/public/style.css
index 12d8f25ab..31734b362 100644
--- a/public/style.css
+++ b/public/style.css
@@ -465,21 +465,37 @@ a.brand img {
   fill: none;
 }
 
-.link {
+.link_line {
   stroke: #7f7f7f;
   stroke-width: 4;
+  fill: none;
+  pointer-events: none;
+}
+
+.link_outline {
+  stroke: #fff;
+  stroke-width: 6;
+  cursor: crosshair;
+  fill: none;
+  pointer-events: none;
+}
+.link_background {
+  stroke: #fff;
+  opacity: 0;
+  stroke-width: 25;
   cursor: crosshair;
   fill: none;
 }
 
-.link_selected {
+g.link_selected path.link_line {
   stroke: #ff7f0e;
 }
-.link_unknown {
+g.link_unknown path.link_line {
    stroke: #f00;
    stroke-width: 2;
    stroke-dasharray: 10, 4;
 }
+
 #shade {
    position: absolute;
    top:0;