diff --git a/sources/index.html b/sources/index.html
index 683569e..5e168df 100644
--- a/sources/index.html
+++ b/sources/index.html
@@ -22,7 +22,7 @@
var keyboard = new Keyboard();
- document.onkeyup = function myFunction(event){ keyboard.listen(event); };
+ document.onkeydown = function myFunction(event){ keyboard.listen(event); };
document.addEventListener('mousedown', function(e){ dotgrid.mouse_down(e); }, false);
document.addEventListener('mousemove', function(e){ dotgrid.mouse_move(e); }, false);
document.addEventListener('mouseup', function(e){ dotgrid.mouse_up(e);}, false);
diff --git a/sources/links/main.css b/sources/links/main.css
index 8020e0c..ddd3720 100644
--- a/sources/links/main.css
+++ b/sources/links/main.css
@@ -8,14 +8,6 @@ body { background:#fff; padding:30px; font-family: 'input_mono_regular'; -webkit
#dotgrid #cursor_to { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
#dotgrid #cursor_end { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
-input { padding:2px 5px; border-radius:20px; margin:0px auto; display:none;}
-.vector { position:relative; z-index:900;}
-pre { font-size:11px; color:#000; position:fixed; bottom:20px; display: none}
-.reference { left:0; display: none }
-.settings { right:20px; text-align:right; display: none}
-.settings input { display:inline; background:#fff; width:4em; }
-.settings select { display:inline; background:#fff; }
-
#interface { max-width: 295px;margin:0px auto;font-size: 11px;line-height: 30px; text-transform: uppercase; margin-top:20px;-webkit-app-region: no-drag;}
.icon { width:25px; height:25px; margin-left:-5px; margin-right:0px; opacity: 0.5}
@@ -23,3 +15,5 @@ pre { font-size:11px; color:#000; position:fixed; bottom:20px; display: none}
.icon.inactive { opacity: 0.1 !important }
.icon:hover { cursor: pointer; opacity: 1 }
+
+svg.vector { z-index: 1000;position: relative }
\ No newline at end of file
diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js
index d148760..29ff177 100644
--- a/sources/scripts/dotgrid.js
+++ b/sources/scripts/dotgrid.js
@@ -12,7 +12,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.color = color;
this.offset = new Pos(0,0);
- this.element = null;
+ // Dotgrid
+ this.element = document.createElement("div");
+ this.element.id = "dotgrid";
+ this.element.style.width = this.width;
+ this.element.style.height = this.height;
this.grid_width = this.width/this.grid_x;
this.grid_height = this.height/this.grid_y;
@@ -30,6 +34,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.mirror_el = null;
this.mirror = false;
+ this.fill = false;
this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
this.segments = [];
@@ -38,11 +43,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.install = function()
{
- // Dotgrid
- this.element = document.createElement("div");
- this.element.id = "dotgrid";
- this.element.style.width = this.width;
- this.element.style.height = this.height;
document.body.appendChild(this.element);
document.body.appendChild(this.interface);
@@ -90,7 +90,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 = "none";
+ this.svg_el.style.fill = this.fill ? "black" : "none";
this.svg_el.style.strokeLinecap = this.linecap;
this.element.appendChild(this.svg_el);
@@ -210,6 +210,12 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.draw();
}
+ this.toggle_fill = function()
+ {
+ dotgrid.fill = dotgrid.fill ? false : true;
+ this.draw();
+ }
+
this.draw = function()
{
var d = "";
@@ -227,6 +233,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.svg_el.style.stroke = this.color;
this.svg_el.style.strokeLinecap = this.linecap;
this.svg_el.style.strokeWidth = this.thickness;
+ this.svg_el.style.fill = this.fill ? "black" : "none";
this.mirror_path.setAttribute("d",this.mirror ? d : '');
this.mirror_path.setAttribute("transform","translate("+(300 - (this.offset.x))+","+(this.offset.y)+"),scale(-1,1)")
@@ -329,42 +336,42 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
var html = "";
if(from && to){
- html += "
";
- html += "
";
- html += "
";
+ html += "";
+ html += "";
+ html += "";
}
else{
- html += "";
- html += "";
- html += "";
+ html += "";
+ html += "";
+ html += "";
}
if(from && to && end){
- html += "
";
+ html += "";
}
else{
- html += "";
+ html += "";
}
if(this.segments.length > 0 && this.segments[this.segments.length-1].name != "close"){
- html += "
";
+ html += "";
}
else{
- html += "";
+ html += "";
}
if(this.segments.length > 0 && !this.mirror){
- html += "
";
+ html += "";
}
else{
- html += "";
+ html += "";
}
if(this.segments.length > 0){
- html += "
";
+ html += "";
}
else{
- html += "";
+ html += "";
}
this.interface.innerHTML = html;
diff --git a/sources/scripts/init.js b/sources/scripts/init.js
deleted file mode 100644
index dbb0831..0000000
--- a/sources/scripts/init.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// width,height,grid_x,grid_y,block_x,block_y,thickness,linecap, color
-dotgrid = new Dotgrid(300,300,31,31,5,5, 10,"square","#000000");
-dotgrid.install();
-
-var keyboard = new Keyboard();
-document.onkeyup = function myFunction(){ keyboard.listen(event); };
-
-document.addEventListener('mousedown', function(e){ dotgrid.mouse_down(e); }, false);
-document.addEventListener('mousemove', function(e){ dotgrid.mouse_move(e); }, false);
-document.addEventListener('mouseup', function(e){ dotgrid.mouse_up(e);}, false);
\ No newline at end of file
diff --git a/sources/scripts/keyboard.js b/sources/scripts/keyboard.js
index 9ee5330..2ccee31 100644
--- a/sources/scripts/keyboard.js
+++ b/sources/scripts/keyboard.js
@@ -8,6 +8,12 @@ function Keyboard()
return;
}
+ // undo
+ if(event.key == "z" && (event.ctrlKey || event.metaKey)){
+ dotgrid.erase();
+ return;
+ }
+
switch (event.keyCode) {
case 83 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break; // 'S'
case 65 : dotgrid.draw_arc(event.shiftKey ? "1,0" : "0,0"); break; // 'a'
@@ -16,13 +22,20 @@ function Keyboard()
case 82 : dotgrid.draw_close(); break; // 'r'
case 187 : dotgrid.mod_thickness(1); break; // '+'
case 189 : dotgrid.mod_thickness(-1); break; // '-'
+ case 221 : dotgrid.mod_thickness(1); break; // ']'
+ case 219 : dotgrid.mod_thickness(-1); break; // '['
case 191 : dotgrid.mod_linecap(1); break; // '/'
+
+ case 32 : dotgrid.mirror = dotgrid.mirror == true ? false : true; dotgrid.draw(); break; // 'space'
case 81 : dotgrid.reset(); break; // 'Q'
case 27 : dotgrid.reset(); break; // 'ESC'
case 87 : dotgrid.erase(); break; // 'W'
case 8 : dotgrid.erase(); break; // 'Backspace'
case 69 : dotgrid.export(); break; // 'e'
+ case 13 : dotgrid.export(); break; // 'e'
+
+ case 9 : dotgrid.toggle_fill(); event.preventDefault(); break; // 'tab'
case 38 : dotgrid.mod_move(0,-10); break; // 'up'
case 40 : dotgrid.mod_move(0,10); break; // 'down'