Implement new Theme

This commit is contained in:
Devine Lu Linvega 2018-02-13 09:29:16 +13:00
parent 7f889b9a4e
commit 86e9534562
5 changed files with 22 additions and 12 deletions

View File

@ -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;}

View File

@ -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

View File

@ -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);

View File

@ -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; }

View File

@ -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; }
}