Improved theme support

sources/scripts/dotgrid.js

@@ -92,7 +92,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.svg_el.style.height = this.height;
     this.svg_el.style.stroke = this.color;
     this.svg_el.style.strokeWidth = this.thickness;
-    this.svg_el.style.fill = this.fill ? "black" : "none";
+    this.svg_el.style.fill = this.fill ? "black" : "none !important";
     this.svg_el.style.strokeLinecap = this.linecap;
     this.element.appendChild(this.svg_el);
 
@@ -113,7 +113,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     var o = e.target.getAttribute("data-operation");
     if(!o){ return; }
 
-    console.log(o)
     if(o == "line"){ this.draw_line(); }
     if(o == "arc_c"){ this.draw_arc("0,1"); }
     if(o == "arc_r"){ this.draw_arc("0,0"); }
@@ -250,27 +249,27 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
   // Draw
   this.draw_line = function()
   {
-	  if(from === null || to === null){ return; }
+    if(from === null || to === null){ return; }
 
-	  to = new Pos(to[0] * -1, to[1]);
+    to = new Pos(to[0] * -1, to[1]).sub(this.offset)
+    from = new Pos(from[0] * -1,from[1]).sub(this.offset)
+    end = end ? new Pos(end[0] * -1,end[1]).sub(this.offset) : null;
 
-	  var end_point = end ? new Pos(end[0] * -1,end[1]).sub(this.offset) : null;
+    this.segments.push(new Path_Line(from,to,end));
 
-	  from = new Pos(from[0] * -1,from[1])
+    this.draw();
-
+    reset();
-	  this.segments.push(new Path_Line(from.sub(this.offset),to.sub(this.offset),end_point));
-
-	  this.draw();
-	  reset();
   }
 
   this.draw_arc = function(orientation)
   {
     if(from === null || to === null){ return; }
 
-    var end_point = end ? new Pos(end[0] * -1,end[1]).sub(this.offset) : null;
+    to = new Pos(to[0] * -1, to[1]).sub(this.offset)
+    from = new Pos(from[0] * -1,from[1]).sub(this.offset)
+    end = end ? new Pos(end[0] * -1,end[1]).sub(this.offset) : null;
 
-    this.segments.push(new Path_Arc(new Pos(from[0] * -1,from[1]).sub(this.offset),new Pos(to[0] * -1,to[1]).sub(this.offset),orientation,end_point));
+    this.segments.push(new Path_Arc(from,to,orientation,end));
 
     this.draw();
     reset();
@@ -280,7 +279,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
   {
     if(from === null || to === null || end === null){ return; }
 
-    this.segments.push(new Path_Bezier(new Pos(from[0] * -1,from[1]).sub(this.offset),new Pos(to[0] * -1,to[1]).sub(this.offset),new Pos(end[0] * -1,end[1]).sub(this.offset)));
+    to = new Pos(to[0] * -1, to[1]).sub(this.offset)
+    from = new Pos(from[0] * -1,from[1]).sub(this.offset)
+    end = new Pos(end[0] * -1,end[1]).sub(this.offset)
+
+    this.segments.push(new Path_Bezier(from,to,end));
 
     this.draw();
     reset();

sources/scripts/keyboard.js

@@ -1,22 +1,29 @@
 function Keyboard()
 {
-  this.listen = function(event)
+  this.listen = function(e)
   { 
     // save
-    if(event.key == "s" && (event.ctrlKey || event.metaKey)){
+    if(e.key == "s" && (e.ctrlKey || e.metaKey)){
       dotgrid.export();
       return;
     }
 
     // undo
-    if(event.key == "z" && (event.ctrlKey || event.metaKey)){
+    if(e.key == "z" && (e.ctrlKey || e.metaKey)){
       dotgrid.erase();
       return;
     }
 
-    switch (event.keyCode) {
+    // Reset
-      case 83 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break; // 'S'
+    if((e.key == "Backspace" || e.key == "Delete") && e.ctrlKey && e.shiftKey){
-      case 65 : dotgrid.draw_arc(event.shiftKey ? "1,0" : "0,0"); break; // 'a'
+      e.preventDefault();
+      dotgrid.theme.reset();
+      return;
+    }
+
+    switch (e.keyCode) {
+      case 83 : dotgrid.draw_arc(e.shiftKey ? "1,1" : "0,1"); break; // 'S'
+      case 65 : dotgrid.draw_arc(e.shiftKey ? "1,0" : "0,0"); break; // 'a'
       case 68 : dotgrid.draw_line(); break; // 'd'
       case 70 : dotgrid.draw_bezier(); break; // 'f'
       case 82 : dotgrid.draw_close(); break; // 'r'
@@ -35,7 +42,7 @@ function Keyboard()
       case 69 : dotgrid.export(); break; // 'e'
       case 13 : dotgrid.export(); break; // 'e'
 
-      case 9 : dotgrid.toggle_fill(); event.preventDefault(); break; // 'tab'
+      case 9 : dotgrid.toggle_fill(); e.preventDefault(); break; // 'tab'
 
       case 38 : dotgrid.mod_move(0,-10); break; // 'up'
       case 40 : dotgrid.mod_move(0,10); break;  // 'down'

sources/scripts/theme.js

@@ -54,8 +54,8 @@ function Theme()
     html += ".bl { background:"+theme.b_low+" !important ; fill:"+theme.b_low+" !important }\n";
     html += ".b_inv { background:"+theme.b_inv+" !important ; fill:"+theme.b_inv+" !important }\n";
 
+    html += "#dotgrid svg.vector { fill:"+theme.f_high+" }\n";
     html += "#dotgrid #cursor { border-color:"+theme.f_med+"}\n";
-
     html += "#dotgrid #cursor_from { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";
     html += "#dotgrid #cursor_to { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";
     html += "#dotgrid #cursor_end { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";