From 760175af78b94890d0d1f40b3b3d2f6411879ae1 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 29 Aug 2018 09:41:41 +1200 Subject: [PATCH] Improved interface --- desktop/sources/links/main.css | 2 ++ desktop/sources/scripts/dotgrid.js | 8 ++++---- desktop/sources/scripts/interface.js | 25 +++++++++++++++++++++++-- desktop/sources/scripts/picker.js | 10 ++++++++-- desktop/sources/scripts/renderer.js | 1 + index.html | 1 + 6 files changed, 39 insertions(+), 8 deletions(-) diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index b98152a..00c93e6 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -25,6 +25,8 @@ body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: non #interface.picker #menu { opacity: 0; top:-5px; z-index: 0 } #interface.picker #picker { opacity: 1; top:0px; z-index: 900 } +#app.web #interface #menu #option_open { display: none; } + /* Theme Overrides */ :root { --background: "#222"; --f_high: "#fff";--f_med: "#777";--f_low: "#444";--f_inv: "#000";--b_high: "#000";--b_med: "#affec7";--b_low: "#000";--b_inv: "#affec7"; } diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 4cff8f7..69f8742 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -54,7 +54,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) let paths = dialog.showOpenDialog({properties: ['openFile'],filters:[{name:"Dotgrid Image",extensions:["dot","grid"]}]}); - if(!paths){ console.log("Nothing to load"); return; } + if(!paths){ console.warn("Nothing to load"); return; } fs.readFile(paths[0], 'utf-8', (err, data) => { if(err){ alert("An error ocurred reading the file :" + err.message); return; } @@ -65,7 +65,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.save = function(content = this.tool.export()) { - if(dotgrid.tool.length() < 1){ console.log("Nothing to save"); return; } + if(dotgrid.tool.length() < 1){ console.warn("Nothing to save"); return; } if(!dialog){ this.save_web(content); return; } @@ -87,7 +87,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.render = function(content = this.renderer.to_png({width:dotgrid.tool.settings.size.width*2,height:dotgrid.tool.settings.size.height*2}), ready = null, size = null) { if(!ready){return; } - if(dotgrid.tool.length() < 1){ console.log("Nothing to render"); return; } + if(dotgrid.tool.length() < 1){ console.warn("Nothing to render"); return; } if(!dialog){ dotgrid.render_web(content); return; } @@ -107,7 +107,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.export = function(content = this.renderer.to_svg()) { - if(dotgrid.tool.length() < 1){ console.log("Nothing to export"); return; } + if(dotgrid.tool.length() < 1){ console.warn("Nothing to export"); return; } if(!dialog){ this.export_web(content); return; } diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index 0834901..2c8a500 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -40,7 +40,7 @@ function Interface() render: { key:"", icon:"M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,155 L110,155 L200,155 "}, export: { key:"", icon:"M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,140 L110,140 L200,140 M110,170 L110,170 L200,170"}, save: { key:"", icon:"M155,65 A90,90 0 0,1 245,155 A90,90 0 0,1 155,245 A90,90 0 0,1 65,155 A90,90 0 0,1 155,65 M110,155 L110,155 L200,155 M110,185 L110,185 L200,185 M110,125 L110,125 L200,125"}, - grid: { key:"H", icon:"M80,80 L80,80 L80,80 M230,80 L230,80 L230,80 M80,230 L80,230 L80,230 M230,230 L230,230 L230,230 M155,80 L155,80 L155,80 M155,230 L155,230 L155,230 M80,155 L80,155 L80,155 M230,155 L230,155 L230,155 M155,155 L155,155 L155,155 "}, + grid: { key:"H", icon:"M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 "}, } } @@ -54,6 +54,8 @@ function Interface() title="${name.capitalize()}" onmouseout="dotgrid.interface.out('${type}','${name}')" onmouseup="dotgrid.interface.up('${type}','${name}')" + onmousedown="dotgrid.interface.down('${type}','${name}')" + onclick="dotgrid.interface.click('${type}','${name}')" onmouseover="dotgrid.interface.over('${type}','${name}')" viewBox="0 0 300 300" class="icon ${type}"> @@ -83,8 +85,23 @@ function Interface() { if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; } + this.refresh(true); + } + + this.down = function(type,name) + { + if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; } + dotgrid.tool[type](name) - this.refresh(); + this.refresh(true); + } + + this.click = function(type,name) + { + // if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; } + + // dotgrid.tool[type](name) + // this.refresh(); } this.prev_operation = null; @@ -125,6 +142,10 @@ function Interface() document.getElementById("option_grid").className.baseVal = dotgrid.guide.show_extras ? "icon inactive source" : "icon source"; + // Grid + if(dotgrid.guide.show_extras){ document.getElementById("grid_path").setAttribute("d","M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 ") } + else{ document.getElementById("grid_path").setAttribute("d","M65,155 Q155,245 245,155 M65,155 ") } + // Mirror if(dotgrid.tool.style().mirror_style == 0){ document.getElementById("mirror_path").setAttribute("d","M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210") } else if(dotgrid.tool.style().mirror_style == 1){ document.getElementById("mirror_path").setAttribute("d","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210") } diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js index eab4409..7657870 100644 --- a/desktop/sources/scripts/picker.js +++ b/desktop/sources/scripts/picker.js @@ -12,7 +12,7 @@ function Picker() this.el.setAttribute("placeholder",`${dotgrid.tool.style().color}`) try{ dotgrid.controller.set("picker"); } - catch(err){ console.log("No controller"); } + catch(err){ } dotgrid.interface.el.className = "picker" this.el.focus() @@ -42,7 +42,7 @@ function Picker() dotgrid.guide.refresh(); try{ dotgrid.controller.set(); } - catch(err){ console.log("No controller"); } + catch(err){ } dotgrid.interface.el.className = "" this.el.blur() @@ -88,6 +88,12 @@ function Picker() return; } + if(e.key == "Escape"){ + this.stop(); + e.preventDefault(); + return; + } + this.update(); } diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index 0195531..361df4c 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -84,6 +84,7 @@ function Renderer() this.to_png_web = function(size) { + if(dotgrid.tool.length() < 1){ console.warn('Nothing to render'); return; } this.refresh(); let xml = new XMLSerializer().serializeToString(this.svg_el); diff --git a/index.html b/index.html index 5494334..84a59f3 100644 --- a/index.html +++ b/index.html @@ -31,6 +31,7 @@ let dialog = null; dotgrid = new Dotgrid(300,300,20,20,4,4); dotgrid.install(); + document.getElementById("app").className = "web";