diff --git a/README.md b/README.md index 2e64d7f..17dc7e8 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,8 @@ Dotgrid is a simple vector drawing application. Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved with the arrows. Clicking one of the path icons, or pressing one of the shortcuts, will draw a stroke between them. The newly created segment's handles can be moved by clicking and dragging them. +Hold `shift` to drag entire layer, hold `alt` to delete a vertex. + ## Controls ## default Mode diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 8b39ff5..6518c8f 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -262,13 +262,19 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) // Cursor this.translation = null; + this.translation_multi = null; this.mouse_down = function(e) { var pos = this.position_in_grid({x:e.clientX+5,y:e.clientY-5}); pos = this.position_on_grid(pos); if(e.altKey){ dotgrid.tool.remove_segments_at(pos); return; } - if(dotgrid.tool.vertex_at(pos)){ console.log("Begin translation"); dotgrid.translation = {from:pos,to:pos}; return; } + + if(dotgrid.tool.vertex_at(pos)){ + console.log("Begin translation"); dotgrid.translation = {from:pos,to:pos}; + if(e.shiftKey){ console.log("Begin translation(multi)"); dotgrid.translation_multi = true; } + return; + } var o = e.target.getAttribute("ar"); if(!o){ return; } @@ -311,8 +317,14 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) if(pos.x > 0) { dotgrid.translation = null; return; } if(dotgrid.translation && (Math.abs(dotgrid.translation.from.x) != Math.abs(dotgrid.translation.to.x) || Math.abs(dotgrid.translation.from.y) != Math.abs(dotgrid.translation.to.y))){ - dotgrid.tool.translate(dotgrid.translation.from,dotgrid.translation.to); + if(dotgrid.translation_multi){ + dotgrid.tool.translate_multi(dotgrid.translation.from,dotgrid.translation.to); + } + else{ + dotgrid.tool.translate(dotgrid.translation.from,dotgrid.translation.to); + } dotgrid.translation = null; + dotgrid.translation_multi = null; this.draw(); e.preventDefault(); return; diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 6e91957..45370c5 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -229,6 +229,22 @@ function Tool() dotgrid.draw(); } + this.translate_multi = function(a,b) + { + var offset = {x:a.x - b.x,y:a.y - b.y} + + for(segment_id in this.layer()){ + var segment = this.layer()[segment_id]; + for(vertex_id in segment.verteces){ + var vertex = segment.verteces[vertex_id]; + segment.verteces[vertex_id] = {x:vertex.x+offset.x,y:vertex.y-offset.y}; + } + } + dotgrid.history.push(this.layers); + this.clear(); + dotgrid.draw(); + } + // Style this.style = function()