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

Fix snap-to-grid

Browse Source 
Fixes #177
This commit is contained in:
Nick O'Leary 2014-03-22 13:47:47 +00:00
parent bc8683f40a
commit 0b516a83db
1 changed files with 64 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
public/red/ui/view.js
View File

@ -38,7 +38,6 @@ RED.view = function() {
moving_set = [], moving_set = [],
dirty = false, dirty = false,
lasso = null, lasso = null,
active_group = null;
pressTimer = null; pressTimer = null;
var clipboard = ""; var clipboard = "";
@ -66,6 +65,39 @@ RED.view = function() {
.attr('height', space_height) .attr('height', space_height)
.attr('fill','#fff'); .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 drag_line = vis.append("svg:path").attr("class", "drag_line");
var workspace_tabs = RED.tabs.create({ 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) { } else if (mouse_mode == RED.state.MOVING_ACTIVE || mouse_mode == RED.state.IMPORT_DRAGGING) {
var mousePos = mouse_position; 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 minX = 0;
var minY = 0; var minY = 0;
for (var n in moving_set) { for (var n = 0; n<moving_set.length; n++) {
var node = moving_set[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.x = mousePos[0]+node.dx;
node.n.y = mousePos[1]+node.dy; node.n.y = mousePos[1]+node.dy;
if (d3.event.shiftKey && moving_set.length == 1) { node.n.dirty = true;
node.n.x = 20*Math.floor(node.n.x/20);
node.n.y = 20*Math.floor(node.n.y/20);
}
minX = Math.min(node.n.x-node.n.w/2-5,minX); minX = Math.min(node.n.x-node.n.w/2-5,minX);
minY = Math.min(node.n.y-node.n.h/2-5,minY); minY = Math.min(node.n.y-node.n.h/2-5,minY);
} }
for (var n in moving_set) { if (minX != 0 || minY != 0) {
for (var n = 0; n<moving_set.length; n++) {
var node = moving_set[n]; var node = moving_set[n];
node.n.x -= minX; node.n.x -= minX;
node.n.y -= minY; node.n.y -= minY;
node.n.dirty = true; }
}
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(); redraw();
@ -670,9 +716,6 @@ RED.view = function() {
function redraw() { function redraw() {
vis.attr("transform","scale("+scaleFactor+")"); vis.attr("transform","scale("+scaleFactor+")");
outer.attr("width", space_width*scaleFactor).attr("height", space_height*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) { if (mouse_mode != RED.state.JOINING) {
// Don't bother redrawing nodes if we're drawing links // Don't bother redrawing nodes if we're drawing links
@ -781,6 +824,8 @@ RED.view = function() {
text.attr('text-anchor','end'); text.attr('text-anchor','end');
} }
//node.append("circle").attr({"class":"centerDot","cx":0,"cy":0,"r":5});
if (d._def.inputs > 0) { if (d._def.inputs > 0) {
text.attr("x",30); text.attr("x",30);
node.append("rect").attr("class","port port_input").attr("rx",3).attr("ry",3).attr("x",-5).attr("width",10).attr("height",10) node.append("rect").attr("class","port port_input").attr("rx",3).attr("ry",3).attr("x",-5).attr("width",10).attr("height",10)
@ -807,6 +852,7 @@ RED.view = function() {
d.h = Math.max(node_height,(d.outputs||0) * 15); d.h = Math.max(node_height,(d.outputs||0) * 15);
} }
var thisNode = d3.select(this); 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.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
thisNode.selectAll(".node") thisNode.selectAll(".node")
.attr("width",function(d){return d.w}) .attr("width",function(d){return d.w})