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

Redraw grid properly if gridSize changes

Browse Source
This commit is contained in:
Nick O'Leary 2017-06-05 16:07:21 +01:00
parent 7e35c9c754
commit 48a8dc0989
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
1 changed files with 10 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
editor/js/ui/view.js
View File

@ -206,67 +206,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,space_width]).domain([0,space_width]);
var grid = vis.append("g"); var grid = vis.append("g");
grid.selectAll("line.horizontal").data(gridScale.ticks(space_width/gridSize)).enter()
.append("line")
.attr(
{
"class":"horizontal",
"x1" : 0,
"x2" : space_width,
"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(space_width/gridSize)).enter()
.append("line")
.attr(
{
"class":"vertical",
"y1" : 0,
"y2" : space_width,
"x1" : function(d){ return gridScale(d);},
"x2" : function(d){ return gridScale(d);},
"fill" : "none",
"shape-rendering" : "crispEdges",
"stroke" : "#eee",
"stroke-width" : "1px"
});
grid.style("visibility","hidden");
updateGrid(); updateGrid();
function updateGrid() { function updateGrid() {
var gridTicks = [];
for (var i=0;i<space_width;i+=+gridSize) {
gridTicks.push(i);
}
grid.selectAll("line.horizontal").remove(); grid.selectAll("line.horizontal").remove();
grid.selectAll("line.horizontal").data(gridScale.ticks(space_width/gridSize)).enter() grid.selectAll("line.horizontal").data(gridTicks).enter()
.append("line") .append("line")
.attr( .attr(
{ {
"class":"horizontal", "class":"horizontal",
"x1" : 0, "x1" : 0,
"x2" : space_width, "x2" : space_width,
"y1" : function(d){ return gridScale(d);}, "y1" : function(d){ return d;},
"y2" : function(d){ return gridScale(d);}, "y2" : function(d){ return d;},
"fill" : "none", "fill" : "none",
"shape-rendering" : "crispEdges", "shape-rendering" : "crispEdges",
"stroke" : "#eee", "stroke" : "#eee",
"stroke-width" : "1px" "stroke-width" : "1px"
}); });
grid.selectAll("line.vertical").remove(); grid.selectAll("line.vertical").remove();
grid.selectAll("line.vertical").data(gridScale.ticks(space_width/gridSize)).enter() grid.selectAll("line.vertical").data(gridTicks).enter()
.append("line") .append("line")
.attr( .attr(
{ {
"class":"vertical", "class":"vertical",
"y1" : 0, "y1" : 0,
"y2" : space_width, "y2" : space_width,
"x1" : function(d){ return gridScale(d);}, "x1" : function(d){ return d;},
"x2" : function(d){ return gridScale(d);}, "x2" : function(d){ return d;},
"fill" : "none", "fill" : "none",
"shape-rendering" : "crispEdges", "shape-rendering" : "crispEdges",
"stroke" : "#eee", "stroke" : "#eee",