Added mirror mode
This commit is contained in:
parent
c7046e00b7
commit
650288a2ed
1
sources/media/icons/mirror.svg
Normal file
1
sources/media/icons/mirror.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg class="vector" width="300px" height="300px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" style="width: 300px; height: 300px; stroke: rgb(0, 0, 0); stroke-width: 10px; fill: none; stroke-linecap: square;"><path d="M150,50 L150,250 M50,150 L100,150 M200,150 L250,150 "></path></svg>
|
After Width: | Height: | Size: 308 B |
@ -26,6 +26,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
|||||||
var end = null;
|
var end = null;
|
||||||
|
|
||||||
this.svg_el = null;
|
this.svg_el = null;
|
||||||
|
this.mirror_el = null;
|
||||||
|
|
||||||
|
this.mirror = false;
|
||||||
|
|
||||||
this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||||
this.segments = [];
|
this.segments = [];
|
||||||
@ -70,6 +73,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
|||||||
cursor_end.id = "cursor_end";
|
cursor_end.id = "cursor_end";
|
||||||
this.element.appendChild(cursor_end);
|
this.element.appendChild(cursor_end);
|
||||||
|
|
||||||
|
this.mirror_el = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
||||||
|
this.mirror_path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||||
|
|
||||||
// Vector
|
// Vector
|
||||||
this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||||
this.svg_el.setAttribute("class","vector");
|
this.svg_el.setAttribute("class","vector");
|
||||||
@ -85,8 +91,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
|||||||
this.svg_el.style.fill = "none";
|
this.svg_el.style.fill = "none";
|
||||||
this.svg_el.style.strokeLinecap = this.linecap;
|
this.svg_el.style.strokeLinecap = this.linecap;
|
||||||
this.element.appendChild(this.svg_el);
|
this.element.appendChild(this.svg_el);
|
||||||
|
|
||||||
this.svg_el.appendChild(this.path);
|
this.svg_el.appendChild(this.path);
|
||||||
|
this.svg_el.appendChild(this.mirror_el);
|
||||||
|
this.mirror_el.appendChild(this.mirror_path);
|
||||||
|
|
||||||
this.draw();
|
this.draw();
|
||||||
}
|
}
|
||||||
@ -104,6 +112,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 == "arc_r"){ this.draw_arc("0,0"); }
|
||||||
if(o == "bezier"){ this.draw_bezier(); }
|
if(o == "bezier"){ this.draw_bezier(); }
|
||||||
if(o == "close"){ this.draw_close(); }
|
if(o == "close"){ this.draw_close(); }
|
||||||
|
if(o == "mirror"){ this.mirror = this.mirror == true ? false : true; this.draw(); }
|
||||||
if(o == "export"){ this.export(); }
|
if(o == "export"){ this.export(); }
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -210,6 +219,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
|||||||
this.svg_el.style.strokeLinecap = this.linecap;
|
this.svg_el.style.strokeLinecap = this.linecap;
|
||||||
this.svg_el.style.strokeWidth = this.thickness;
|
this.svg_el.style.strokeWidth = this.thickness;
|
||||||
|
|
||||||
|
this.mirror_path.setAttribute("d",this.mirror ? d : '');
|
||||||
|
this.mirror_path.setAttribute("transform","translate(300,0),scale(-1,1)")
|
||||||
|
|
||||||
this.update_interface();
|
this.update_interface();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -327,6 +339,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
|||||||
html += "<img title='close' src='media/icons/close.svg' class='icon inactive'/>";
|
html += "<img title='close' src='media/icons/close.svg' class='icon inactive'/>";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(this.segments.length > 0 && !this.mirror){
|
||||||
|
html += "<img data-operation='mirror' title='mirror' src='media/icons/mirror.svg' class='icon' style='margin-left:50px'/>";
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
html += "<img data-operation='mirror' title='mirror' src='media/icons/mirror.svg' class='icon inactive' style='margin-left:50px'/>";
|
||||||
|
}
|
||||||
|
|
||||||
if(this.segments.length > 0){
|
if(this.segments.length > 0){
|
||||||
html += "<img data-operation='export' title='export' src='media/icons/export.svg' class='icon right'/>";
|
html += "<img data-operation='export' title='export' src='media/icons/export.svg' class='icon right'/>";
|
||||||
}
|
}
|
||||||
|
@ -2,7 +2,11 @@ function Keyboard()
|
|||||||
{
|
{
|
||||||
this.listen = function(event)
|
this.listen = function(event)
|
||||||
{
|
{
|
||||||
console.log(event.keyCode)
|
// save
|
||||||
|
if(event.key == "s" && (event.ctrlKey || event.metaKey)){
|
||||||
|
dotgrid.export();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
switch (event.keyCode) {
|
switch (event.keyCode) {
|
||||||
case 83 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break;
|
case 83 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break;
|
||||||
|
Loading…
Reference in New Issue
Block a user