From 0b516a83db6e819058363d941163f23031a4ddb8 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Sat, 22 Mar 2014 13:47:47 +0000
Subject: [PATCH] Fix snap-to-grid Fixes #177

---
 public/red/ui/view.js | 82 +++++++++++++++++++++++++++++++++----------
 1 file changed, 64 insertions(+), 18 deletions(-)

diff --git a/public/red/ui/view.js b/public/red/ui/view.js
index f0686920b..d6a0d2c77 100644
--- a/public/red/ui/view.js
+++ b/public/red/ui/view.js
@@ -38,7 +38,6 @@ RED.view = function() {
         moving_set = [],
         dirty = false,
         lasso = null,
-        active_group = null;
         pressTimer = null;
 
     var clipboard = "";
@@ -66,6 +65,39 @@ RED.view = function() {
         .attr('height', space_height)
         .attr('fill','#fff');
 
+    //var gridScale = d3.scale.linear().range([0,2000]).domain([0,2000]);
+    //var grid = vis.append('g');
+    //
+    //grid.selectAll("line.horizontal").data(gridScale.ticks(100)).enter()
+    //    .append("line")
+    //        .attr(
+    //        {
+    //            "class":"horizontal",
+    //            "x1" : 0,
+    //            "x2" : 2000,
+    //            "y1" : function(d){ return gridScale(d);},
+    //            "y2" : function(d){ return gridScale(d);},
+    //            "fill" : "none",
+    //            "shape-rendering" : "crispEdges",
+    //            "stroke" : "#eee",
+    //            "stroke-width" : "1px"
+    //        });
+    //grid.selectAll("line.vertical").data(gridScale.ticks(100)).enter()
+    //    .append("line")
+    //        .attr(
+    //        {
+    //            "class":"vertical",
+    //            "y1" : 0,
+    //            "y2" : 2000,
+    //            "x1" : function(d){ return gridScale(d);},
+    //            "x2" : function(d){ return gridScale(d);},
+    //            "fill" : "none",
+    //            "shape-rendering" : "crispEdges",
+    //            "stroke" : "#eee",
+    //            "stroke-width" : "1px"
+    //        });
+                                 
+                                 
     var drag_line = vis.append("svg:path").attr("class", "drag_line");
 
     var workspace_tabs = RED.tabs.create({
@@ -290,28 +322,42 @@ RED.view = function() {
             }
         } else if (mouse_mode == RED.state.MOVING_ACTIVE || mouse_mode == RED.state.IMPORT_DRAGGING) {
             var mousePos = mouse_position;
-            if (d3.event.shiftKey && moving_set.length > 1) {
-                mousePos[0] = 20*Math.floor(mousePos[0]/20);
-                mousePos[1] = 20*Math.floor(mousePos[1]/20);
-            }
             var minX = 0;
             var minY = 0;
-            for (var n in moving_set) {
+            for (var n = 0; n<moving_set.length; n++) {
                 var node = moving_set[n];
+                if (d3.event.shiftKey) {
+                    node.n.ox = node.n.x;
+                    node.n.oy = node.n.y;
+                }
                 node.n.x = mousePos[0]+node.dx;
                 node.n.y = mousePos[1]+node.dy;
-                if (d3.event.shiftKey && moving_set.length == 1) {
-                    node.n.x = 20*Math.floor(node.n.x/20);
-                    node.n.y = 20*Math.floor(node.n.y/20);
-                }
+                node.n.dirty = true;
                 minX = Math.min(node.n.x-node.n.w/2-5,minX);
                 minY = Math.min(node.n.y-node.n.h/2-5,minY);
             }
-            for (var n in moving_set) {
-                var node = moving_set[n];
-                node.n.x -= minX;
-                node.n.y -= minY;
-                node.n.dirty = true;
+            if (minX != 0 || minY != 0) { 
+                for (var n = 0; n<moving_set.length; n++) {
+                    var node = moving_set[n];
+                    node.n.x -= minX;
+                    node.n.y -= minY;
+                }
+            }
+            if (d3.event.shiftKey && moving_set.length > 0) {
+                var gridOffset =  [0,0];
+                var node = moving_set[0];
+                gridOffset[0] = node.n.x-(20*Math.floor((node.n.x-node.n.w/2)/20)+node.n.w/2);
+                gridOffset[1] = node.n.y-(20*Math.floor(node.n.y/20));
+                if (gridOffset[0] != 0 || gridOffset[1] != 0) {
+                    for (var n = 0; n<moving_set.length; n++) {
+                        var node = moving_set[n];
+                        node.n.x -= gridOffset[0];
+                        node.n.y -= gridOffset[1];
+                        if (node.n.x == node.n.ox && node.n.y == node.n.oy) {
+                            node.dirty = false;
+                        }
+                    }
+                }
             }
         }
         redraw();
@@ -670,9 +716,6 @@ RED.view = function() {
     function redraw() {
         vis.attr("transform","scale("+scaleFactor+")");
         outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor);
-        outer_background.attr('fill', function() {
-                return active_group == null?'#fff':'#eee';
-        });
 
         if (mouse_mode != RED.state.JOINING) {
             // Don't bother redrawing nodes if we're drawing links
@@ -780,6 +823,8 @@ RED.view = function() {
                         text.attr('class','node_label node_label_'+d._def.align);
                         text.attr('text-anchor','end');
                     }
+                    
+                    //node.append("circle").attr({"class":"centerDot","cx":0,"cy":0,"r":5});
 
                     if (d._def.inputs > 0) {
                         text.attr("x",30);
@@ -807,6 +852,7 @@ RED.view = function() {
                             d.h = Math.max(node_height,(d.outputs||0) * 15);
                         }
                         var thisNode = d3.select(this);
+                        //thisNode.selectAll(".centerDot").attr({"cx":function(d) { return d.w/2;},"cy":function(d){return d.h/2}});
                         thisNode.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
                         thisNode.selectAll(".node")
                             .attr("width",function(d){return d.w})