From cc62e5522bfeb036d6af47eb59785dd0718e6705 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 22 Nov 2017 11:58:07 +1300 Subject: [PATCH] How about a ton of upgrades --- README.md | 1 + main.js | 2 +- sources/links/main.css | 8 ++-- sources/scripts/dotgrid.js | 77 +++++++++++++++---------------------- sources/scripts/guide.js | 23 +++++++++++ sources/scripts/keyboard.js | 6 +++ sources/scripts/render.js | 4 +- 7 files changed, 69 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index 7baebff..51d3b3a 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ Clicking on the canvas will insert control points, up to 3CPs. CPs can be moved - `/` Toggle linecap. - `space` Mirror. - `escape` Remove control points. +- `~` Double canvas size. - `ctrl+n` New canvas. - `ctrl+s` Export canvas. diff --git a/main.js b/main.js index 0fc59bd..5bf21f7 100644 --- a/main.js +++ b/main.js @@ -6,7 +6,7 @@ let win app.on('ready', () => { - win = new BrowserWindow({width: 400, height: 420, minWidth: 400, minHeight: 400, maxWidth: 400, maxHeight: 420, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'}) + win = new BrowserWindow({width: 900, height: 420, minWidth: 400, minHeight: 420, maxWidth: 700, maxHeight: 720, backgroundColor:"#000", frame:false, autoHideMenuBar: true, icon: __dirname + '/icon.ico'}) win.loadURL(`file://${__dirname}/sources/index.html`) diff --git a/sources/links/main.css b/sources/links/main.css index 3c08651..42cca9a 100644 --- a/sources/links/main.css +++ b/sources/links/main.css @@ -2,7 +2,7 @@ body { background:#fff; padding: 5px; font-family: 'input_mono_regular'; -webkit #app { display: flex; flex-direction: column; align-items: center;} #wrapper { padding: 25px; padding-bottom: 15px; background: inherit;-webkit-app-region: drag;} -#dotgrid { margin:0px auto; position:relative; overflow: hidden; padding:10px;-webkit-app-region: no-drag; width:310px !important; height:310px !important; } +#dotgrid { margin:0px auto; position:relative; overflow: hidden; padding:10px;-webkit-app-region: no-drag; width:310px; height:310px; } #cursor { opacity: 1; transition: all 50ms; width:8px; height:8px; position:absolute; z-index:25; border-radius:5px; border:1px solid black;} #cursor_coord { font-size:10px; z-index: 10000; margin-left:15px; margin-top:-2px;} #cursor_coord.left { margin-left:-110px; text-align: right; width:100px; } @@ -17,10 +17,10 @@ body { background:#fff; padding: 5px; font-family: 'input_mono_regular'; -webkit .icon { width:25px; height:25px; margin-right:5px; opacity: 1} .icon:hover { cursor: pointer; opacity: 1 } -svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px !important; height:300px !important; } +svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px; height:300px; } -#dotgrid #guide { opacity: 0; transition: all 500ms; } -#dotgrid #widgets { opacity: 0; transition: all 150ms; } +#dotgrid #guide { opacity: 0; } +#dotgrid #widgets { opacity: 0; } #dotgrid:hover #guide { opacity: 1 } #dotgrid:hover #widgets { opacity: 1 } diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js index fd02898..64b685c 100644 --- a/sources/scripts/dotgrid.js +++ b/sources/scripts/dotgrid.js @@ -109,7 +109,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.guide.start(); this.interface.start(); - this.resize(); + dotgrid.set_size({width:300,height:300}) this.draw(); } @@ -226,7 +226,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.set_from = function(pos) { - from = pos.mirror().clamp(0,300).mirror(); + from = pos.mirror().clamp(0,this.width).mirror(); cursor_from.style.left = Math.floor(-from.x*this.scale + this.grid_width); cursor_from.style.top = Math.floor(from.y*this.scale + this.grid_height); @@ -234,7 +234,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.set_to = function(pos) { - to = pos.mirror().clamp(0,300).mirror(); + to = pos.mirror().clamp(0,this.width).mirror(); cursor_to.style.left = Math.floor(-to.x*this.scale + this.grid_width); cursor_to.style.top = Math.floor(to.y*this.scale + this.grid_height); @@ -242,7 +242,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.set_end = function(pos) { - end = pos.mirror().clamp(0,300).mirror(); + end = pos.mirror().clamp(0,this.width).mirror(); cursor_end.style.left = Math.floor(-end.x*this.scale + this.grid_width); cursor_end.style.top = Math.floor(end.y*this.scale + this.grid_height); @@ -323,6 +323,33 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.draw(); } + this.zoom = false; + + this.toggle_zoom = function() + { + dotgrid.set_size(!dotgrid.zoom ? {width:600,height:600} : {width:300,height:300}) + dotgrid.zoom = dotgrid.zoom ? false : true; + } + + this.set_size = function(size = {width:300,height:300}) + { + var win = require('electron').remote.getCurrentWindow(); + win.setSize(size.width+100,size.height+120); + + this.width = size.width + this.height = size.height + this.element.style.width = size.width+10 + this.element.style.height = size.height+10 + this.grid_x = size.width/15 + this.grid_y = size.height/15 + this.svg_el.setAttribute("width",size.width+"px"); + this.svg_el.setAttribute("height",size.height+"px"); + + dotgrid.guide.resize(size); + this.interface.update(); + this.draw(); + } + this.draw = function(exp = false) { var d = ""; @@ -464,14 +491,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca { if(this.segments.length == 0){ return; } this.scale = 1 - this.width = 300 - this.height = 300 this.draw() var svg = this.svg_el.outerHTML - dotgrid.resize() dialog.showSaveDialog((fileName) => { - dotgrid.resize() if (fileName === undefined){ return; } fs.writeFile(fileName+".svg", svg, (err) => { if(err){ alert("An error ocurred creating the file "+ err.message); return; } @@ -487,7 +510,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.width = 300; this.height = 300; - dotgrid.resize(); dialog.showOpenDialog({ openFile: true, openDirectory: false, @@ -497,7 +519,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca { name: "All Files", extensions: ["*"] } ] }, (filePaths) => { - dotgrid.resize(); if (filePaths === undefined || filePaths.length === 0) return; fs.readFile(filePaths[0], (err, data) => { @@ -506,7 +527,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca return; } dotgrid.serializer.deserialize(JSON.parse(data.toString().trim())); - dotgrid.resize(); dotgrid.draw(); }); }); @@ -548,7 +568,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca } this.serializer.deserialize(data); - this.resize(); this.draw(); } @@ -562,6 +581,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.position_on_grid = function(pos) { pos.y = pos.y - 7.5 + pos.x = pos.x + 7.5 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) @@ -572,37 +592,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca return new Pos(x,y); } - this.resize = function() - { - return; - this.scale = Math.min((window.innerWidth-90)/300,(window.innerHeight-100)/320) - this.width = dotgrid.scale*300 - this.height = dotgrid.scale*300 - this.element.style.width = this.width - this.element.style.height = this.height - this.element.style.padding = Math.floor(10*this.scale)+"px" - this.svg_el.setAttribute("width",this.width+"px"); - this.svg_el.setAttribute("height",this.height+"px"); - this.grid_width = dotgrid.width/dotgrid.grid_x; - this.grid_height = dotgrid.height/dotgrid.grid_y; - this.guide.update() - - //cursor updates - - if(from) { - cursor_from.style.left = Math.floor(-from.x*this.scale + this.grid_width); - cursor_from.style.top = Math.floor(from.y*this.scale + this.grid_height); - } - if(to) { - cursor_to.style.left = Math.floor(-to.x*this.scale + this.grid_width); - cursor_to.style.top = Math.floor(to.y*this.scale + this.grid_height); - } - if(end) { - cursor_end.style.left = Math.floor(-end.x*this.scale + this.grid_width); - cursor_end.style.top = Math.floor(end.y*this.scale + this.grid_height); - } - } - // To Clean this.from = function() @@ -630,7 +619,6 @@ window.addEventListener('dragover',function(e) window.addEventListener('resize', function(e) { - dotgrid.resize() dotgrid.draw() }, false); @@ -660,7 +648,6 @@ window.addEventListener('drop', function(e) reader.onload = function(e){ var o = JSON.parse(e.target.result); dotgrid.serializer.deserialize(o); - dotgrid.resize(); dotgrid.draw(); }; reader.readAsText(file); diff --git a/sources/scripts/guide.js b/sources/scripts/guide.js index 1ea9ea0..eed6736 100644 --- a/sources/scripts/guide.js +++ b/sources/scripts/guide.js @@ -15,6 +15,12 @@ function Guide() this.widgets.style.height = "320px"; this.start = function() + { + this.clear(); + this.draw(); + } + + this.draw = function() { for (var x = dotgrid.grid_x; x >= 0; x--) { for (var y = dotgrid.grid_y; y >= 0; y--) { @@ -27,8 +33,24 @@ function Guide() } } + this.resize = function(size) + { + this.el.width = (size.width+40)*2; + this.el.height = (size.height+40)*2; + this.el.style.width = (size.width+40)+"px"; + this.el.style.height = (size.height+40)+"px"; + + this.widgets.width = (size.width+20)*2; + this.widgets.height = (size.height+20)*2; + this.widgets.style.width = (size.width+20)+"px"; + this.widgets.style.height = (size.height+20)+"px"; + + this.update(); + } + this.clear = function() { + this.el.getContext('2d').clearRect(0, 0, 1280, 1280); this.widgets.getContext('2d').clearRect(0, 0, 1280, 1280); } @@ -51,6 +73,7 @@ function Guide() if(dotgrid.translation){ this.draw_translation(); } + this.draw(); } this.draw_marker = function(pos,radius = 1,step) diff --git a/sources/scripts/keyboard.js b/sources/scripts/keyboard.js index 7d1e70c..67a3096 100644 --- a/sources/scripts/keyboard.js +++ b/sources/scripts/keyboard.js @@ -2,6 +2,12 @@ function Keyboard() { this.listen = function(e) { + // zoom + if(e.key == "~" || e.keyCode == 192){ + dotgrid.toggle_zoom(); + return; + } + // save if(e.key == "s" && (e.ctrlKey || e.metaKey)){ dotgrid.export(); diff --git a/sources/scripts/render.js b/sources/scripts/render.js index 9526aae..1f1675e 100644 --- a/sources/scripts/render.js +++ b/sources/scripts/render.js @@ -3,7 +3,7 @@ function Render() this.el = document.createElement("canvas"); this.el.id = "render"; this.img = document.createElement("img"); - this.el.width = 512; this.el.height = 512; + this.el.width = 1280; this.el.height = 1280; this.draw = function() { @@ -13,7 +13,7 @@ function Render() var image64 = b64Start + svg64; this.img.src = image64; this.el.getContext('2d').clearRect(0, 0, 1280, 1280); - this.el.getContext('2d').drawImage(this.img, 0, 0, 512, 512); + this.el.getContext('2d').drawImage(this.img, 0, 0, 1280, 1280); } this.buffer = function()