Added extra mirror modes
This commit is contained in:
parent
038e9579fc
commit
e3ac3c6185
@ -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;}
|
||||
|
@ -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 += "<img title='close (r)' src='media/icons/close.svg' class='icon inactive'/>";
|
||||
}
|
||||
|
||||
if(this.segments.length > 0 && !this.mirror){
|
||||
if(this.segments.length > 0 && this.mirror_index != 0){
|
||||
html += "<img data-operation='mirror' title='mirror (space)' src='media/icons/mirror.svg' class='icon' style='margin-left:35px'/>";
|
||||
}
|
||||
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)
|
||||
|
@ -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'
|
||||
|
Loading…
Reference in New Issue
Block a user