From 16ddcfb27affa6a6c77e0ac4283b4b5ddabb4b96 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Tue, 14 Nov 2017 07:52:53 +1300 Subject: [PATCH] Improved shortcuts and drag/drop --- README.md | 31 +++++++++++++++++-------------- sources/links/main.css | 7 ++++++- sources/scripts/dotgrid.js | 20 +++++++++++++++++--- sources/scripts/guide.js | 2 +- sources/scripts/keyboard.js | 11 +++-------- sources/scripts/path_close.js | 5 +++++ sources/scripts/render.js | 2 +- 7 files changed, 50 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 77fb61f..1677ada 100644 --- a/README.md +++ b/README.md @@ -6,37 +6,40 @@ Dotgrid is a simple vector drawing application. ## Guide -It works by adding control points and selecting a stroke type. So clicking the canvas a few times will place up to 3 control points. Clicking one of the icons, or pressing one of the shortcuts, will draw a stroke. +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. ## Controls -### Layer 1 - -- `q` Erase control points. -- `w` Erase last segment. -- `e` Export SVG file. -- `r` Close Path. - -### Layer 2 +### Segments - `a` Draw Arc(counter-clockwise). - `s` Draw Arc(clockwise). - `d` Draw Line. - `f` Draw Bezier. +- `g` Close Path. ### Parametric -- `+` Increase stroke size. -- `-` Reduce stroke size. +- `]` Increase stroke size. +- `[` Reduce stroke size. - `/` Toggle linecap. +### Commands + +- `space` Mirror. +- `escape` Remove control points. +- `arrows` Move last control point. + ### Shortcuts - `ctrl+n` New canvas. +- `ctrl+s` Export canvas. +- `ctrl+z` Delete last segment. -- `ctrl+enter` Toggle Fullscreen. -- `alt+click` Erase target control point. -- `ctrl+click` Translate target control point. +## Mouse + +- `click/drag` Translate target control point. +- `click+alt` Erase target control point. ## License diff --git a/sources/links/main.css b/sources/links/main.css index b1fb144..6e72396 100644 --- a/sources/links/main.css +++ b/sources/links/main.css @@ -18,4 +18,9 @@ body { background:#fff; padding: 5px; font-family: 'input_mono_regular'; -webkit .icon.inactive { opacity: 0.1 !important } .icon:hover { cursor: pointer; opacity: 1 } -svg.vector { z-index: 1000;position: relative } \ No newline at end of file +svg.vector { z-index: 1000;position: relative } + +#dotgrid #guide { opacity: 0; transition: all 500ms; } +#dotgrid #widgets { opacity: 0; transition: all 150ms; } +#dotgrid:hover #guide { opacity: 1 } +#dotgrid:hover #widgets { opacity: 1 } diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js index 985540b..8eae569 100644 --- a/sources/scripts/dotgrid.js +++ b/sources/scripts/dotgrid.js @@ -123,7 +123,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca var pos = this.position_in_grid(new Pos(e.clientX,e.clientY)); pos = this.position_on_grid(pos); - if(e.ctrlKey){ dotgrid.translation = {from:pos,to:pos}; } + + if(e.altKey){ dotgrid.delete_at(pos); return; } + if(dotgrid.handle_at(pos)){ dotgrid.translation = {from:pos,to:pos}; return; } if(!o){ return; } @@ -141,7 +143,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca var pos = this.position_in_grid(new Pos(e.clientX,e.clientY)); pos = this.position_on_grid(pos); - if(e.ctrlKey && dotgrid.translation){ dotgrid.translation.to = pos; } + if(dotgrid.translation){ dotgrid.translation.to = pos; } this.cursor.style.left = Math.floor(-(pos.x-this.grid_width)); this.cursor.style.top = Math.floor(pos.y+this.grid_height); @@ -156,12 +158,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca var pos = this.position_in_grid(new Pos(e.clientX,e.clientY)); pos = this.position_on_grid(pos); + if(e.altKey){ return; } + if(dotgrid.translation){ dotgrid.translate(dotgrid.translation); return; } - if(e.altKey){ dotgrid.delete_at(pos); return; } if(pos.x>0) return; if(from === null){ this.set_from(pos.scale(1/this.scale)); } @@ -170,6 +173,17 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.draw(); } + this.handle_at = function(pos) + { + for(id in dotgrid.segments){ + var segment = dotgrid.segments[id]; + if(segment.from && segment.from.is_equal(pos)){ return true; } + if(segment.to && segment.to.is_equal(pos)){ return true; } + if(segment.end && segment.end.is_equal(pos)){ return true; } + } + return false; + } + this.translate = function(t) { for(id in dotgrid.segments){ diff --git a/sources/scripts/guide.js b/sources/scripts/guide.js index dac44bc..e9afe33 100644 --- a/sources/scripts/guide.js +++ b/sources/scripts/guide.js @@ -29,7 +29,7 @@ function Guide() this.clear = function() { - this.widgets.getContext('2d').clearRect(0, 0, 600, 600); + this.widgets.getContext('2d').clearRect(0, 0, 1280, 1280); } this.update = function() diff --git a/sources/scripts/keyboard.js b/sources/scripts/keyboard.js index 6af1aa8..2f871bc 100644 --- a/sources/scripts/keyboard.js +++ b/sources/scripts/keyboard.js @@ -28,24 +28,19 @@ function Keyboard() } switch (e.keyCode) { - case 83 : dotgrid.draw_arc(e.shiftKey ? "1,1" : "0,1"); break; // 'S' - case 65 : dotgrid.draw_arc(e.shiftKey ? "1,0" : "0,0"); break; // 'a' + case 65 : dotgrid.draw_arc(e.shiftKey ? "1,0" : "0,0"); break; // 'a/A' + case 83 : dotgrid.draw_arc(e.shiftKey ? "1,1" : "0,1"); break; // 's/S' case 68 : dotgrid.draw_line(); break; // 'd' case 70 : dotgrid.draw_bezier(); break; // 'f' - case 82 : dotgrid.draw_close(); break; // 'r' - case 187 : dotgrid.mod_thickness(1); break; // '+' - case 189 : dotgrid.mod_thickness(-1); break; // '-' + case 71 : dotgrid.draw_close(); break; // 'g' case 221 : dotgrid.mod_thickness(1); break; // ']' case 219 : dotgrid.mod_thickness(-1); break; // '[' case 191 : dotgrid.mod_linecap(1); break; // '/' case 32 : dotgrid.mod_mirror(); break; // 'space' - case 81 : dotgrid.reset(); break; // 'Q' case 27 : dotgrid.reset(); break; // 'ESC' - case 87 : dotgrid.erase(); break; // 'W' case 8 : dotgrid.erase(); break; // 'Backspace' - case 69 : dotgrid.export(); break; // 'e' case 13 : dotgrid.export(); break; // 'Enter' case 9 : dotgrid.toggle_fill(); e.preventDefault(); break; // 'tab' diff --git a/sources/scripts/path_close.js b/sources/scripts/path_close.js index 33e6ceb..ca0d8ef 100644 --- a/sources/scripts/path_close.js +++ b/sources/scripts/path_close.js @@ -6,4 +6,9 @@ function Path_Close() { return "Z "; } + + this.handles = function() + { + return []; + } } \ No newline at end of file diff --git a/sources/scripts/render.js b/sources/scripts/render.js index 6e10fa0..9526aae 100644 --- a/sources/scripts/render.js +++ b/sources/scripts/render.js @@ -12,7 +12,7 @@ function Render() var b64Start = 'data:image/svg+xml;base64,'; var image64 = b64Start + svg64; this.img.src = image64; - this.el.getContext('2d').clearRect(0, 0, 512, 512); + this.el.getContext('2d').clearRect(0, 0, 1280, 1280); this.el.getContext('2d').drawImage(this.img, 0, 0, 512, 512); }