Implement new Theme
This commit is contained in:
parent
7f889b9a4e
commit
86e9534562
@ -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;}
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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; }
|
||||
|
||||
|
@ -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; }
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user