frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects 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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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})