diff --git a/README.md b/README.md index ce0d15c..77fb61f 100644 --- a/README.md +++ b/README.md @@ -33,8 +33,10 @@ It works by adding control points and selecting a stroke type. So clicking the c ### Shortcuts - `ctrl+n` New canvas. -- `alt+click` Erase target stroke. + - `ctrl+enter` Toggle Fullscreen. +- `alt+click` Erase target control point. +- `ctrl+click` Translate target control point. ## License diff --git a/main.js b/main.js index 7f3ed90..9483787 100644 --- a/main.js +++ b/main.js @@ -6,7 +6,7 @@ let win app.on('ready', () => { - win = new BrowserWindow({width: 900, height: 420, minWidth: 390, minHeight: 420, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'}) + win = new BrowserWindow({width: 390, height: 420, minWidth: 390, minHeight: 420, maxWidth: 390, maxHeight: 420, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'}) win.loadURL(`file://${__dirname}/sources/index.html`) @@ -56,7 +56,7 @@ app.on('ready', () => is_shown = true; }) // Open the DevTools. - win.webContents.openDevTools() + // win.webContents.openDevTools() }) app.on('window-all-closed', () => diff --git a/sources/links/main.css b/sources/links/main.css index ec7a1e8..b1fb144 100644 --- a/sources/links/main.css +++ b/sources/links/main.css @@ -9,8 +9,8 @@ body { background:#fff; padding: 5px; font-family: 'input_mono_regular'; -webkit #cursor_to { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;} #cursor_end { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;} #interface { max-width: 295px;margin:0px auto;font-size: 11px;line-height: 30px; text-transform: uppercase; margin-top:20px;-webkit-app-region: no-drag;} -#guide { position: absolute;top: 0px;left: 0px;padding: 10px; width: 300px;height: 300px;} -#guide .marker { width:2px; height:2px; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;} +#guide,#widgets { position: absolute;top: 0px;left: 0px; width: 300px;height: 300px;} +#widgets { z-index: 9000 } #render { display: none } .icon { width:25px; height:25px; margin-left:-5px; margin-right:0px; opacity: 0.5} diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js index fc6e3f2..985540b 100644 --- a/sources/scripts/dotgrid.js +++ b/sources/scripts/dotgrid.js @@ -56,6 +56,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.wrapper.appendChild(this.element); this.wrapper.appendChild(this.interface); this.element.appendChild(this.guide.el); + this.element.appendChild(this.guide.widgets); this.wrapper.appendChild(this.render.el); // Cursors @@ -114,9 +115,16 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca // Cursor + this.translation = null; + this.mouse_down = function(e) { var o = e.target.getAttribute("data-operation"); + + 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(!o){ return; } if(o == "line"){ this.draw_line(); } @@ -133,10 +141,14 @@ 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; } + this.cursor.style.left = Math.floor(-(pos.x-this.grid_width)); this.cursor.style.top = Math.floor(pos.y+this.grid_height); this.cursor_coord.className = -pos.x > this.width/2 ? "fl left" : "fl" this.cursor_coord.textContent = parseInt(-pos.x/this.grid_width)+","+parseInt(pos.y/this.grid_height); + + dotgrid.guide.update(); } this.mouse_up = function(e) @@ -144,6 +156,11 @@ 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(dotgrid.translation){ + dotgrid.translate(dotgrid.translation); + return; + } + if(e.altKey){ dotgrid.delete_at(pos); return; } if(pos.x>0) return; @@ -153,6 +170,19 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.draw(); } + this.translate = function(t) + { + for(id in dotgrid.segments){ + var segment = dotgrid.segments[id]; + if(segment.from && segment.from.is_equal(dotgrid.translation.from)){ segment.from = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)} + if(segment.to && segment.to.is_equal(dotgrid.translation.from)){ segment.to = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)} + if(segment.end && segment.end.is_equal(dotgrid.translation.from)){ segment.end = new Pos(-dotgrid.translation.to.x,dotgrid.translation.to.y)} + } + + dotgrid.translation = null; + dotgrid.draw(); + } + // Setters this.set_from = function(pos) @@ -229,7 +259,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca return; } // Move offset - this.offset = this.offset.add(new Pos(move.x,move.y)); + // this.offset = this.offset.add(new Pos(move.x,move.y)); this.draw(); } @@ -292,6 +322,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.render.draw(); this.update_interface(); + this.guide.update(); } // Draw @@ -456,12 +487,12 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca return new Pos((window.innerWidth/2) - (this.width/2) - pos.x,pos.y - (30+10*(this.scale))) } - this.position_on_grid = function(pos) // rounds the mouse position to the nearest cell, and limits the coords to within the box + this.position_on_grid = function(pos) { x = Math.round(pos.x/this.grid_width)*this.grid_width y = Math.round(pos.y/this.grid_height)*this.grid_height off = (x<-this.width || x>0 || y>this.height || y<0) - if(off) { // change position so the cursor will not be seen + if(off) { x = 50 y = -50 } diff --git a/sources/scripts/guide.js b/sources/scripts/guide.js index 67db199..dac44bc 100644 --- a/sources/scripts/guide.js +++ b/sources/scripts/guide.js @@ -2,34 +2,54 @@ function Guide() { this.el = document.createElement("canvas"); this.el.id = "guide"; - this.el.width = 600; - this.el.height = 600; - this.el.style.width = "300px"; - this.el.style.height = "300px"; - this.markers; + this.el.width = 640; + this.el.height = 640; + this.el.style.width = "320px"; + this.el.style.height = "320px"; + + this.widgets = document.createElement("canvas"); + this.widgets.id = "widgets"; + this.widgets.width = 640; + this.widgets.height = 640; + this.widgets.style.width = "320px"; + this.widgets.style.height = "320px"; this.start = function() { - this.update(); + for (var x = dotgrid.grid_x; x >= 0; x--) { + for (var y = dotgrid.grid_y; y >= 0; y--) { + var pos_x = parseInt(x * dotgrid.grid_width) + dotgrid.grid_width ; + var pos_y = parseInt(y * dotgrid.grid_height) + dotgrid.grid_height ; + var is_step = x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0; + var radius = is_step ? 2.5 : 1.5; + dotgrid.guide.draw_marker({x:pos_x,y:pos_y},radius,is_step); + } + } } this.clear = function() { - this.el.getContext('2d').clearRect(0, 0, 600, 600); + this.widgets.getContext('2d').clearRect(0, 0, 600, 600); } this.update = function() { this.clear(); - for (var x = dotgrid.grid_x; x >= 0; x--) { - for (var y = dotgrid.grid_y; y >= 0; y--) { - var pos_x = parseInt(x * dotgrid.grid_width) ; - var pos_y = parseInt(y * dotgrid.grid_height) ; - var is_step = x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0; - var radius = is_step ? 1.5 : 0.5; - dotgrid.guide.draw_marker({x:pos_x * 2,y:pos_y * 2},radius,is_step); - } + var handles = []; + for(id in dotgrid.segments){ + var segment = dotgrid.segments[id]; + handles = handles.concat(segment.handles()) + } + + for(id in handles){ + var handle = handles[id]; + this.draw_handle(handle,4); + } + + // Translations + if(dotgrid.translation){ + this.draw_translation(); } } @@ -37,8 +57,46 @@ function Guide() { var ctx = this.el.getContext('2d'); ctx.beginPath(); - ctx.arc(pos.x, pos.y, radius, 0, 2 * Math.PI, false); - ctx.fillStyle = step ? 'green' : 'red'; + ctx.arc(pos.x * 2, pos.y * 2, radius, 0, 2 * Math.PI, false); + ctx.fillStyle = step ? dotgrid.theme.active.f_med : dotgrid.theme.active.f_low; ctx.fill(); + ctx.closePath(); + } + + this.draw_handle = function(pos,radius) + { + var ctx = this.widgets.getContext('2d'); + + ctx.beginPath(); + ctx.arc((pos.x * 2)+20, (pos.y * 2)+20, 10, 0, 2 * Math.PI, false); + ctx.fillStyle = dotgrid.theme.active.f_high; + ctx.fill(); + ctx.closePath(); + + ctx.beginPath(); + ctx.arc((pos.x * 2)+20, (pos.y * 2)+20, radius, 0, 2 * Math.PI, false); + ctx.fillStyle = dotgrid.theme.active.f_high; + ctx.fill(); + ctx.lineWidth = 3; + ctx.strokeStyle = dotgrid.theme.active.background; + ctx.stroke(); + ctx.closePath(); + } + + this.draw_translation = function() + { + // From + var ctx = this.widgets.getContext('2d'); + var from = dotgrid.translation.from; + var to = dotgrid.translation.to; + + ctx.beginPath(); + ctx.moveTo((from.x * -2)+20,(from.y * 2)+20); + ctx.lineTo((to.x * -2)+20,(to.y * 2)+20); + ctx.lineCap="round"; + ctx.lineWidth = 5; + ctx.strokeStyle = dotgrid.theme.active.f_high; + ctx.stroke(); + ctx.closePath(); } } \ No newline at end of file diff --git a/sources/scripts/path_arc.js b/sources/scripts/path_arc.js index e23869d..457c33b 100644 --- a/sources/scripts/path_arc.js +++ b/sources/scripts/path_arc.js @@ -35,4 +35,13 @@ function Path_Arc(from,to,orientation,end) return html } + + this.handles = function() + { + var a = []; + if(this.from){ a.push(this.from); } + if(this.to){ a.push(this.to); } + if(this.end){ a.push(this.end); } + return a; + } } \ No newline at end of file diff --git a/sources/scripts/path_bezier.js b/sources/scripts/path_bezier.js index 90e7a57..08c49b9 100644 --- a/sources/scripts/path_bezier.js +++ b/sources/scripts/path_bezier.js @@ -28,4 +28,13 @@ function Path_Bezier(from,to,end) return html += "Q"+this.to.scale(dotgrid.scale)+" "+this.end.scale(dotgrid.scale)+" " } + + this.handles = function() + { + var a = []; + if(this.from){ a.push(this.from); } + if(this.to){ a.push(this.to); } + if(this.end){ a.push(this.end); } + return a; + } } \ No newline at end of file diff --git a/sources/scripts/path_line.js b/sources/scripts/path_line.js index d412126..97b62f6 100644 --- a/sources/scripts/path_line.js +++ b/sources/scripts/path_line.js @@ -34,4 +34,13 @@ function Path_Line(from,to,end = null) return html } + + this.handles = function() + { + var a = []; + if(this.from){ a.push(this.from); } + if(this.to){ a.push(this.to); } + if(this.end){ a.push(this.end); } + return a; + } } \ No newline at end of file