diff --git a/sources/links/main.css b/sources/links/main.css
index cbd351b..626f3cd 100644
--- a/sources/links/main.css
+++ b/sources/links/main.css
@@ -2,6 +2,8 @@ body { background:#fff; padding:30px; font-family: 'input_mono_regular'; -webkit
#dotgrid { margin:0px auto; position:relative; overflow: hidden; padding:10px;-webkit-app-region: no-drag;}
#cursor { width:8px; height:8px; margin-top:-5px; margin-left:-5px; position:absolute; z-index:25; border-radius:5px; border:1px solid black;}
+#cursor_coord { font-size:10px; z-index: 10000; margin-left:15px; margin-top:-2px;}
+#cursor_coord.left { margin-left:-110px; text-align: right; width:100px; }
#cursor_from { 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;}
#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;}
#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;}
diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js
index e324ec7..2d64f62 100644
--- a/sources/scripts/dotgrid.js
+++ b/sources/scripts/dotgrid.js
@@ -58,6 +58,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.cursor.id = "cursor";
this.element.appendChild(this.cursor);
+ this.cursor_coord = document.createElement("div");
+ this.cursor_coord.id = "cursor_coord";
+ this.cursor_coord.className = "fl"
+ this.cursor.appendChild(this.cursor_coord);
+
cursor_from = document.createElement("div");
cursor_from.id = "cursor_from";
this.element.appendChild(cursor_from);
@@ -113,7 +118,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
if(o == "arc_r"){ this.draw_arc("0,0"); }
if(o == "bezier"){ this.draw_bezier(); }
if(o == "close"){ this.draw_close(); }
- if(o == "mirror"){ this.mirror = this.mirror == true ? false : true; this.draw(); }
+ if(o == "mirror"){ this.mod_mirror(); }
if(o == "export"){ this.export(); }
}
@@ -124,6 +129,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.cursor.style.left = -pos.x + 10;
this.cursor.style.top = pos.y + 10;
+ this.cursor_coord.className = -pos.x > 150 ? "fl left" : "fl"
+ this.cursor_coord.textContent = parseInt(-pos.x/10)+","+parseInt(pos.y/10);
}
this.mouse_up = function(e)
@@ -184,6 +191,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.mod_thickness = function(mod)
{
this.thickness = Math.max(this.thickness+mod,0);
+ this.cursor_coord.textContent = this.thickness;
this.draw();
}
@@ -219,6 +227,15 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.draw();
}
+ this.mirror_index = 0;
+
+ this.mod_mirror = function()
+ {
+ this.mirror_index += 1;
+ this.mirror_index = this.mirror_index > 3 ? 0 : this.mirror_index;
+ this.draw();
+ }
+
this.toggle_fill = function()
{
dotgrid.fill = dotgrid.fill ? false : true;
@@ -244,8 +261,24 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
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)")
+ // Draw Mirror
+ if(this.mirror_index == 1){
+ this.mirror_path.setAttribute("d",d);
+ this.mirror_path.setAttribute("transform","translate("+(300 - (this.offset.x))+","+(this.offset.y)+"),scale(-1,1)")
+ }
+ else if(this.mirror_index == 2){
+ this.mirror_path.setAttribute("d",d);
+ this.mirror_path.setAttribute("transform","translate("+((this.offset.x))+","+(300 - (this.offset.y))+"),scale(1,-1)")
+
+ }
+ else if(this.mirror_index == 3){
+ this.mirror_path.setAttribute("d",d);
+ this.mirror_path.setAttribute("transform","translate("+(300 -(this.offset.x))+","+(300 - (this.offset.y))+"),scale(-1,-1)")
+ }
+ else{
+ this.mirror_path.setAttribute("d",'M0,0');
+ this.mirror_path.setAttribute("transform","")
+ }
this.offset_el.setAttribute("transform","translate("+(this.offset.x)+","+(this.offset.y)+")")
@@ -383,7 +416,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
html += "";
}
- if(this.segments.length > 0 && !this.mirror){
+ if(this.segments.length > 0 && this.mirror_index != 0){
html += "";
}
else{
@@ -418,7 +451,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
}
return new Pos(x,y);
}
-
}
window.addEventListener('dragover',function(e)
diff --git a/sources/scripts/keyboard.js b/sources/scripts/keyboard.js
index 4ab1eba..6af1aa8 100644
--- a/sources/scripts/keyboard.js
+++ b/sources/scripts/keyboard.js
@@ -39,7 +39,7 @@ function Keyboard()
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 32 : dotgrid.mod_mirror(); break; // 'space'
case 81 : dotgrid.reset(); break; // 'Q'
case 27 : dotgrid.reset(); break; // 'ESC'