From e3ac3c6185d93b51b84ae8081fb3763e6135ce87 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sat, 11 Nov 2017 08:46:11 +1300 Subject: [PATCH] Added extra mirror modes --- sources/links/main.css | 2 ++ sources/scripts/dotgrid.js | 42 ++++++++++++++++++++++++++++++++----- sources/scripts/keyboard.js | 2 +- 3 files changed, 40 insertions(+), 6 deletions(-) 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'