From 1850185d1e6b4139528ec1c99aafac632bb69589 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 7 Jan 2016 14:39:01 +0000 Subject: [PATCH] Add grid-alignment options --- editor/js/main.js | 5 ++ editor/js/ui/view.js | 95 +++++++++++++++++++------------ red/api/locales/en-US/editor.json | 7 ++- 3 files changed, 69 insertions(+), 38 deletions(-) diff --git a/editor/js/main.js b/editor/js/main.js index 52030d590..78e687e51 100644 --- a/editor/js/main.js +++ b/editor/js/main.js @@ -176,6 +176,11 @@ var RED = (function() { {id:"menu-item-subflow-convert",label:RED._("menu.label.selectionToSubflow"),disabled:true,onselect:RED.subflow.convertToSubflow}, ]}, null, + {id:"menu-item-layout",label:RED._("menu.label.layout.layout"), options: [ + {id:"menu-item-layout-show-grid",label:RED._("menu.label.layout.showGrid"),toggle:true,onselect:RED.view.toggleShowGrid}, + {id:"menu-item-layout-snap-grid",label:RED._("menu.label.layout.snapGrid"),toggle:true,onselect:RED.view.toggleSnapGrid} + ]}, + null, {id:"menu-item-workspace",label:RED._("menu.label.flows"),options:[ {id:"menu-item-workspace-add",label:RED._("menu.label.add"),onselect:RED.workspaces.add}, {id:"menu-item-workspace-edit",label:RED._("menu.label.rename"),onselect:RED.workspaces.edit}, diff --git a/editor/js/ui/view.js b/editor/js/ui/view.js index 2c75c8c67..54a7f458c 100644 --- a/editor/js/ui/view.js +++ b/editor/js/ui/view.js @@ -31,6 +31,8 @@ RED.view = (function() { var workspaceScrollPositions = {}; + var gridSize = 20; + var snapGrid = false; var activeSubflow = null; var activeNodes = []; @@ -196,38 +198,38 @@ 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 gridScale = d3.scale.linear().range([0,space_width]).domain([0,space_width]); + 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"); var drag_line = vis.append("svg:path").attr("class", "drag_line"); @@ -322,6 +324,11 @@ RED.view = (function() { mousePos[1] /= scaleFactor; mousePos[0] /= scaleFactor; + if (snapGrid) { + mousePos[0] = gridSize*(Math.ceil(mousePos[0]/gridSize)); + mousePos[1] = gridSize*(Math.ceil(mousePos[1]/gridSize)); + } + var nn = { id:(1+Math.random()*4294967295).toString(16),x: mousePos[0],y:mousePos[1],w:node_width,z:RED.workspaces.active()}; nn.type = selected_tool; @@ -532,11 +539,11 @@ RED.view = (function() { node.n.y -= minY; } } - if (d3.event.shiftKey && moving_set.length > 0) { - var gridOffset = [0,0]; + if (snapGrid && moving_set.length > 0) { + var gridOffset = [0,0]; 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)); + gridOffset[0] = node.n.x-(gridSize*Math.floor((node.n.x-node.n.w/2)/gridSize)+node.n.w/2); + gridOffset[1] = node.n.y-(gridSize*Math.floor(node.n.y/gridSize)); if (gridOffset[0] !== 0 || gridOffset[1] !== 0) { for (i = 0; i0?7:0) ); + d.w = Math.max(node_width,gridSize*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/gridSize)) ); d.h = Math.max(node_height,(d.outputs||0) * 15); if (d._def.badge) { @@ -1388,8 +1396,10 @@ RED.view = (function() { if (d.resize) { var l = d._def.label; l = (typeof l === "function" ? l.call(d) : l)||""; - d.w = Math.max(node_width,calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0) ); + var ow = d.w; + d.w = Math.max(node_width,gridSize*(Math.ceil((calculateTextWidth(l, "node_label", 50)+(d._def.inputs>0?7:0))/gridSize)) ); d.h = Math.max(node_height,(d.outputs||0) * 15); + d.x += (d.w-ow)/2; d.resize = false; } var thisNode = d3.select(this); @@ -1844,6 +1854,17 @@ RED.view = (function() { selection.link = selected_link; } return selection; + }, + toggleShowGrid: function(state) { + if (state) { + grid.style("visibility","visible"); + } else { + grid.style("visibility","hidden"); + } + }, + toggleSnapGrid: function(state) { + snapGrid = state; + redraw(); } }; })(); diff --git a/red/api/locales/en-US/editor.json b/red/api/locales/en-US/editor.json index 08b93b7ef..4e272c60b 100644 --- a/red/api/locales/en-US/editor.json +++ b/red/api/locales/en-US/editor.json @@ -36,7 +36,12 @@ "delete": "Delete", "keyboardShortcuts": "Keyboard Shortcuts", "login": "Login", - "logout": "Logout" + "logout": "Logout", + "layout": { + "layout": "Layout", + "showGrid": "Show grid", + "snapGrid": "Snap to grid" + } } }, "user": {