From 86e95345628dfd720f94665115d2bc7dc717a12c Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Tue, 13 Feb 2018 09:29:16 +1300 Subject: [PATCH] Implement new Theme --- sources/links/main.css | 2 +- sources/scripts/dotgrid.js | 4 ++++ sources/scripts/interface.js | 5 +++-- sources/scripts/lib/theme.js | 6 +++--- sources/scripts/tool.js | 17 +++++++++++------ 5 files changed, 22 insertions(+), 12 deletions(-) diff --git a/sources/links/main.css b/sources/links/main.css index 93999d9..e11db67 100644 --- a/sources/links/main.css +++ b/sources/links/main.css @@ -1,4 +1,4 @@ -body { padding: 5px; font-family: 'din_regular'; -webkit-user-select: none; overflow: hidden; padding-left:5px;} +body { padding: 5px; font-family: 'din_regular'; -webkit-user-select: none; overflow: hidden; padding-left:5px; transition: background 500ms} #app { display: flex; flex-direction: column; align-items: center;} #wrapper { padding: 25px; padding-bottom: 15px; -webkit-app-region: drag; padding-left:15px;} diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js index 9e63829..7a9a483 100644 --- a/sources/scripts/dotgrid.js +++ b/sources/scripts/dotgrid.js @@ -137,6 +137,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca this.controller.add("default","Edit","Delete",() => { dotgrid.tool.remove_segment(); },"Backspace"); this.controller.add("default","Edit","Deselect",() => { dotgrid.tool.clear(); },"Esc"); + this.controller.add("default","Select","Foreground",() => { dotgrid.tool.select_layer(0); },"1"); + this.controller.add("default","Select","Middleground",() => { dotgrid.tool.select_layer(1); },"2"); + this.controller.add("default","Select","Background",() => { dotgrid.tool.select_layer(2); },"3"); + this.controller.add("default","Stroke","Line",() => { dotgrid.tool.cast("line"); },"A"); this.controller.add("default","Stroke","Arc",() => { dotgrid.tool.cast("arc_c"); },"S"); // 0,1 this.controller.add("default","Stroke","Arc Rev",() => { dotgrid.tool.cast("arc_r")},"D"); // 0,0 diff --git a/sources/scripts/interface.js b/sources/scripts/interface.js index 51a487b..b9907d0 100644 --- a/sources/scripts/interface.js +++ b/sources/scripts/interface.js @@ -37,8 +37,9 @@ function Interface() { var layer_path = "M150,50 L50,150 L150,250 L250,150 L150,50 Z "; - layer_path += dotgrid.tool.index > 0 ? "M105,150 L105,150 L150,105 L195,150" : ""; - layer_path += dotgrid.tool.index > 1 ? "M105,150 L105,150 L150,195 L195,150" : ""; + layer_path += dotgrid.tool.index == 0 ? "M105,150 L105,150 L150,105 L195,150" : ""; + layer_path += dotgrid.tool.index == 1 ? "M105,150 L195,150" : ""; + layer_path += dotgrid.tool.index == 2 ? "M105,150 L105,150 L150,195 L195,150" : ""; document.getElementById("export").children[0].setAttribute("d",layer_path); diff --git a/sources/scripts/lib/theme.js b/sources/scripts/lib/theme.js index c355259..2b866e9 100644 --- a/sources/scripts/lib/theme.js +++ b/sources/scripts/lib/theme.js @@ -4,12 +4,12 @@ function Theme() this.el = document.createElement("style"); this.el.type = 'text/css'; - this.default = { 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" } + this.default = {meta:{}, data: { 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" }} this.active = this.default; this.start = function() { - this.load(localStorage.theme ? localStorage.theme : this.default); + this.load(localStorage.theme && localStorage.theme.background ? localStorage.theme : this.default); window.addEventListener('dragover',this.drag_enter); window.addEventListener('drop', this.drag); document.head.appendChild(this.el) @@ -17,7 +17,7 @@ function Theme() this.load = function(t) { - var theme = is_json(t) ? JSON.parse(t) : t; + var theme = is_json(t) ? JSON.parse(t).data : t.data; if(!theme.background){ return; } diff --git a/sources/scripts/tool.js b/sources/scripts/tool.js index c5af13e..0436cec 100644 --- a/sources/scripts/tool.js +++ b/sources/scripts/tool.js @@ -22,6 +22,8 @@ function Tool() this.remove_segment = function() { + if(this.verteces.length > 0){ this.clear(); return; } + this.layer().pop(); this.clear(); dotgrid.draw(); @@ -213,21 +215,24 @@ function Tool() dotgrid.draw(); } - this.layer_up = function() + this.select_layer = function(id) { - this.index -= this.index > 0 ? 1 : 0; + this.index = clamp(id,0,2); this.clear(); dotgrid.draw(); console.log(`layer:${this.index}`) } + this.layer_up = function() + { + this.select_layer(this.index-1); + } + this.layer_down = function() { - this.index += this.index < 2 ? 1 : 0; - this.clear(); - dotgrid.draw(); - console.log(`layer:${this.index}`) + this.select_layer(this.index+1); } function copy(data){ return data ? JSON.parse(JSON.stringify(data)) : []; } + function clamp(v, min, max) { return v < min ? min : v > max ? max : v; } } \ No newline at end of file