diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 61f9036..b8e9a13 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -138,7 +138,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.controller.add("default","View","Grid",() => { dotgrid.guide.toggle(); },"H"); this.controller.add("default","View","Control Points",() => { dotgrid.guide.toggle_widgets(); },"J"); - this.controller.add("default","Mode","Toggle Size",() => { dotgrid.interface.toggle_zoom(); },"CmdOrCtrl+E"); this.controller.add("default","Mode","Keyboard",() => { dotgrid.keyboard.start(); },"CmdOrCtrl+K"); this.controller.add("default","Mode","Picker",() => { dotgrid.picker.start(); },"CmdOrCtrl+P"); @@ -210,6 +209,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.new = function() { + this.set_size({width:300,height:300}) this.history.push(this.tool.layers); dotgrid.clear(); } @@ -424,11 +424,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.tool.style().dash = styles[this.dash_index] this.draw(); } + this.set_size = function(size = {width:300,height:300},interface = true) { - if(size.width < 50 || size.height < 50){ return; } - - size = { width:parseInt(size.width/15)*15,height:parseInt(size.height/15)*15} + size = { width:clamp(parseInt(size.width/15)*15,100,1000),height:clamp(parseInt(size.height/15)*15,100,1000)} var win = require('electron').remote.getCurrentWindow(); win.setSize(size.width+100,size.height+100+(interface ? 10 : 0),true); @@ -451,7 +450,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.grid_width = this.tool.settings.width/this.grid_x; this.grid_height = this.tool.settings.height/this.grid_y; - + dotgrid.guide.resize(size); this.interface.update(); this.draw(); @@ -591,6 +590,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) } return {x:x,y:y}; } + + function clamp(v, min, max) { return v < min ? min : v > max ? max : v; } } window.addEventListener('resize', function(e) diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index 3fedd15..77acc8b 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -60,8 +60,8 @@ function Guide() this.clear = function() { - this.el.getContext('2d').clearRect(0, 0, 1280, 1280); - this.widgets.getContext('2d').clearRect(0, 0, 1280, 1280); + this.el.getContext('2d').clearRect(0, 0, this.el.width*2, this.el.height*2); + this.widgets.getContext('2d').clearRect(0, 0, this.el.width*2, this.el.height*2); } this.update = function() diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index 80655df..d480b9d 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -58,22 +58,9 @@ function Interface() document.getElementById("color").className.baseVal = "icon"; } - this.update_size = function() - { - var size = this.zoom ? {width:600,height:600} : {width:300,height:300}; - dotgrid.set_size(size,this.is_visible); - } - this.toggle = function() { this.is_visible = this.is_visible ? false : true; this.el.className = this.is_visible ? "visible" : "hidden"; - this.update_size(); - } - - this.toggle_zoom = function() - { - this.zoom = this.zoom ? false : true; - this.update_size(); } } diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js index 8c815c6..91746a7 100644 --- a/desktop/sources/scripts/picker.js +++ b/desktop/sources/scripts/picker.js @@ -30,29 +30,24 @@ function Picker() var parts = this.parse(this.el.value) if(parts.color){ this.set_color(parts.color); } - else if(parts.size){ this.set_size(parts.size); } + if(parts.size){ this.set_size(parts.size); } - this.stop(); + dotgrid.draw(); + dotgrid.controller.set(); + dotgrid.interface.el.className = "" + this.el.blur() + this.el.value = "" } this.set_color = function(color) { dotgrid.tool.style().color = color; dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? color : "none"; - dotgrid.draw(); - dotgrid.controller.set(); - dotgrid.interface.el.className = "" - this.el.blur() } this.set_size = function(size) { dotgrid.set_size(size); - // dotgrid.tool.style().size = size; - // dotgrid.draw(); - // dotgrid.controller.set(); - // dotgrid.interface.el.className = "" - // this.el.blur() } this.cancel = function() @@ -65,10 +60,11 @@ function Picker() this.update = function() { - if(this.el.value.length != 4 && this.el.value.length != 7){ return; } + var parts = this.parse(this.el.value) + if(!parts.color){ return; } - dotgrid.tool.style().color = this.el.value; - dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? this.el.value : "none"; + dotgrid.tool.style().color = parts.color; + dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? parts.color : "none"; dotgrid.draw(); } diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index dc68709..38863ba 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -23,6 +23,7 @@ function Tool() this.layers = [[],[],[]]; this.verteces = []; this.index = 0; + dotgrid.set_size({width:300,height:300}) } this.clear = function() @@ -63,8 +64,14 @@ function Tool() { if(!dot.layers || dot.layers.length != 3){ console.log("Incompatible version"); return; } + if(this.settings && (this.settings.width != dot.settings.width || this.settings.height != dot.settings.height)){ + dotgrid.set_size({width:dot.settings.width,height:dot.settings.height}) + } + this.layers = dot.layers; this.styles = dot.styles; + this.settings = dot.settings; + this.clear(); dotgrid.draw(); dotgrid.history.push(this.layers);