Atlas48/pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

General improvements

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-11-06 14:10:37 +13:00
parent 8497264b01
commit fd34a91758
5 changed files with 44 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sources/index.html
View File

@ -22,7 +22,7 @@
var keyboard = new Keyboard(); 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('mousedown', function(e){ dotgrid.mouse_down(e); }, false);
document.addEventListener('mousemove', function(e){ dotgrid.mouse_move(e); }, false); document.addEventListener('mousemove', function(e){ dotgrid.mouse_move(e); }, false);
document.addEventListener('mouseup', function(e){ dotgrid.mouse_up(e);}, false); document.addEventListener('mouseup', function(e){ dotgrid.mouse_up(e);}, false);

10
sources/links/main.css
View File

@ -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_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;} #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;} #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} .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.inactive { opacity: 0.1 !important }
.icon:hover { cursor: pointer; opacity: 1 } .icon:hover { cursor: pointer; opacity: 1 }
svg.vector { z-index: 1000;position: relative }

49
sources/scripts/dotgrid.js
View File

@ -12,7 +12,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.color = color; this.color = color;
this.offset = new Pos(0,0); 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_width = this.width/this.grid_x;
this.grid_height = this.height/this.grid_y; 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_el = null;
this.mirror = false; this.mirror = false;
this.fill = 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 = [];
@ -38,11 +43,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.install = function() 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.element);
document.body.appendChild(this.interface); 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.height = this.height;
this.svg_el.style.stroke = this.color; this.svg_el.style.stroke = this.color;
this.svg_el.style.strokeWidth = this.thickness; 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.svg_el.style.strokeLinecap = this.linecap;
this.element.appendChild(this.svg_el); 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.draw();
} }
this.toggle_fill = function()
{
dotgrid.fill = dotgrid.fill ? false : true;
this.draw();
}
this.draw = function() this.draw = function()
{ {
var d = ""; 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.stroke = this.color;
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.svg_el.style.fill = this.fill ? "black" : "none";
this.mirror_path.setAttribute("d",this.mirror ? d : ''); this.mirror_path.setAttribute("d",this.mirror ? d : '');
this.mirror_path.setAttribute("transform","translate("+(300 - (this.offset.x))+","+(this.offset.y)+"),scale(-1,1)") 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 = ""; var html = "";
if(from && to){ if(from && to){
html += "<img data-operation='line' title='line' src='media/icons/line.svg' class='icon'/>"; html += "<img data-operation='line' title='line (d)' src='media/icons/line.svg' class='icon'/>";
html += "<img data-operation='arc_c' title='arc clockwise' src='media/icons/arc_clockwise.svg' class='icon'/>"; html += "<img data-operation='arc_c' title='arc clockwise (s)' src='media/icons/arc_clockwise.svg' class='icon'/>";
html += "<img data-operation='arc_r' title='arc reverse' src='media/icons/arc_reverse.svg' class='icon'/>"; html += "<img data-operation='arc_r' title='arc reverse (a)' src='media/icons/arc_reverse.svg' class='icon'/>";
} }
else{ else{
html += "<img title='line' src='media/icons/line.svg' class='icon inactive'/>"; html += "<img title='line (d)' src='media/icons/line.svg' class='icon inactive'/>";
html += "<img title='arc clockwise' src='media/icons/arc_clockwise.svg' class='icon inactive'/>"; html += "<img title='arc clockwise (s)' src='media/icons/arc_clockwise.svg' class='icon inactive'/>";
html += "<img title='arc reverse' src='media/icons/arc_reverse.svg' class='icon inactive'/>"; html += "<img title='arc reverse (a)' src='media/icons/arc_reverse.svg' class='icon inactive'/>";
} }
if(from && to && end){ if(from && to && end){
html += "<img data-operation='bezier' title='bezier' src='media/icons/bezier.svg' class='icon'/>"; html += "<img data-operation='bezier' title='bezier (f)' src='media/icons/bezier.svg' class='icon'/>";
} }
else{ else{
html += "<img title='bezier' src='media/icons/bezier.svg' class='icon inactive'/>"; html += "<img title='bezier (f)' src='media/icons/bezier.svg' class='icon inactive'/>";
} }
if(this.segments.length > 0 && this.segments[this.segments.length-1].name != "close"){ if(this.segments.length > 0 && this.segments[this.segments.length-1].name != "close"){
html += "<img data-operation='close' title='close' src='media/icons/close.svg' class='icon'/>"; html += "<img data-operation='close (r)' title='close' src='media/icons/close.svg' class='icon'/>";
} }
else{ else{
html += "<img title='close' src='media/icons/close.svg' class='icon inactive'/>"; 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){
html += "<img data-operation='mirror' title='mirror' src='media/icons/mirror.svg' class='icon' style='margin-left:50px'/>"; html += "<img data-operation='mirror' title='mirror (space)' src='media/icons/mirror.svg' class='icon' style='margin-left:35px'/>";
} }
else{ else{
html += "<img data-operation='mirror' title='mirror' src='media/icons/mirror.svg' class='icon inactive' style='margin-left:50px'/>"; html += "<img data-operation='mirror' title='mirror (space)' src='media/icons/mirror.svg' class='icon inactive' style='margin-left:35px'/>";
} }
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 (e)' src='media/icons/export.svg' class='icon right'/>";
} }
else{ else{
html += "<img title='export' src='media/icons/export.svg' class='icon right inactive'/>"; html += "<img title='export (e)' src='media/icons/export.svg' class='icon right inactive'/>";
} }
this.interface.innerHTML = html; this.interface.innerHTML = html;

10
sources/scripts/init.js
View File

@ -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);

13
sources/scripts/keyboard.js
View File

@ -8,6 +8,12 @@ function Keyboard()
return; return;
} }
// undo
if(event.key == "z" && (event.ctrlKey || event.metaKey)){
dotgrid.erase();
return;
}
switch (event.keyCode) { switch (event.keyCode) {
case 83 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break; // 'S' 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' 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 82 : dotgrid.draw_close(); break; // 'r'
case 187 : dotgrid.mod_thickness(1); break; // '+' case 187 : dotgrid.mod_thickness(1); break; // '+'
case 189 : 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 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 81 : dotgrid.reset(); break; // 'Q'
case 27 : dotgrid.reset(); break; // 'ESC' case 27 : dotgrid.reset(); break; // 'ESC'
case 87 : dotgrid.erase(); break; // 'W' case 87 : dotgrid.erase(); break; // 'W'
case 8 : dotgrid.erase(); break; // 'Backspace' case 8 : dotgrid.erase(); break; // 'Backspace'
case 69 : dotgrid.export(); break; // 'e' 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 38 : dotgrid.mod_move(0,-10); break; // 'up'
case 40 : dotgrid.mod_move(0,10); break; // 'down' case 40 : dotgrid.mod_move(0,10); break; // 'down'