Implement new Theme

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

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

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

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

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.select_layer(this.index+1);
-    this.clear();
-    dotgrid.draw();
-    console.log(`layer:${this.index}`)
   }
 
   function copy(data){ return data ? JSON.parse(JSON.stringify(data)) : []; }
+  function clamp(v, min, max) { return v < min ? min : v > max ? max : v; }
 }