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

Added shortcuts

This commit is contained in:
Devine Lu Linvega 2016-12-31 10:37:10 -07:00
parent 452bcd0d41
commit 2b964af3af
5 changed files with 90 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -1,6 +1,7 @@
<html>
<head>
<script type="text/javascript" src="scripts/dotgrid.js"></script>
<script type="text/javascript" src="scripts/keyboard.js"></script>
<link rel="stylesheet" type="text/css" href="links/reset.css"/>
<link rel="stylesheet" type="text/css" href="links/fonts.css"/>
@ -11,6 +12,7 @@
<input id="line" type="button" value="line"/>
<input id="arc_c" type="button" value="arc_c"/>
<input id="arc_a" type="button" value="arc_a"/>
<input id="reseter" type="button" value="reseter"/>
<script type="text/javascript" src="scripts/init.js"></script>
</body>
</html>

4
links/main.css
View File

@ -1,8 +1,8 @@
body { background:#eee; padding:50px;}
body { background:#fff; padding:50px;}
#dotgrid { margin:0px auto; position:relative; border:0px solid white; background:white; overflow: hidden}
#dotgrid .marker { width:2px; height:2px; background:#999; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}
#dotgrid #cursor { width:6px; height:6px; background:red; margin-top:-3px; margin-left:-3px; position:absolute; z-index:25; border-radius:10px;}
#dotgrid #cursor_from { width:6px; height:6px; background:black; margin-top:-3px; margin-left:-3px; position:absolute; z-index:25; border-radius:10px;}
#dotgrid #cursor_to { width:6px; height:6px; background:black; margin-top:-3px; margin-left:-3px; position:absolute; z-index:25; border-radius:10px;}
input { padding:2px 5px; border-radius:20px; }
input { padding:2px 5px; border-radius:20px; margin:0px auto; display:none;}

96
scripts/dotgrid.js
View File

@ -9,13 +9,14 @@ function Dotgrid(width,height,grid_x,grid_y)
this.grid_width = this.width/this.grid_x;
this.grid_height = this.height/this.grid_y;
this.cursor = null;
this.cursor_from = null;
this.cursor_to = null;
var cursor = null;
var cursor_from = null;
var cursor_to = null;
this.button_line = null;
this.button_arc_c = null;
this.button_arc_a = null;
this.button_reseter = null;
var from = null;
var to = null;
@ -46,13 +47,13 @@ function Dotgrid(width,height,grid_x,grid_y)
this.cursor.id = "cursor";
this.element.appendChild(this.cursor);
this.cursor_from = document.createElement("div");
this.cursor_from.id = "cursor_from";
this.element.appendChild(this.cursor_from);
cursor_from = document.createElement("div");
cursor_from.id = "cursor_from";
this.element.appendChild(cursor_from);
this.cursor_to = document.createElement("div");
this.cursor_to.id = "cursor_to";
this.element.appendChild(this.cursor_to);
cursor_to = document.createElement("div");
cursor_to.id = "cursor_to";
this.element.appendChild(cursor_to);
// Vector
vector_element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@ -69,6 +70,7 @@ function Dotgrid(width,height,grid_x,grid_y)
this.button_arc_c = document.getElementById("arc_c")
this.button_arc_a = document.getElementById("arc_a")
this.button_reseter = document.getElementById("reseter")
if (this.button_line.addEventListener){
this.button_line.addEventListener("click", draw_line, false); }
@ -83,9 +85,15 @@ function Dotgrid(width,height,grid_x,grid_y)
}
if (this.button_arc_a.addEventListener){
this.button_arc_a.addEventListener("click", this.draw_arc_a, false); }
this.button_arc_a.addEventListener("click", draw_arc_a, false); }
else if (this.button_arc_a.attachEvent){
this.button_arc_a.attachEvent('onclick', this.draw_arc_a);
this.button_arc_a.attachEvent('onclick', draw_arc_a);
}
if (this.button_reseter.addEventListener){
this.button_reseter.addEventListener("click", reset, false); }
else if (this.button_reseter.attachEvent){
this.button_reseter.attachEvent('onclick', reset);
}
}
@ -122,37 +130,46 @@ function Dotgrid(width,height,grid_x,grid_y)
{
from = pos;
this.cursor_from.style.left = -pos[0];
this.cursor_from.style.top = pos[1];
cursor_from.style.left = -pos[0];
cursor_from.style.top = pos[1];
}
this.set_to = function(pos)
{
this.cursor_to.style.left = -pos[0];
this.cursor_to.style.top = pos[1];
cursor_to.style.left = -pos[0];
cursor_to.style.top = pos[1];
to = pos;
}
// Draw
this.draw_line = function()
{
draw_line();
}
function draw_line()
{
console.log("from: "+from); console.log("to: "+to);
var aLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
aLine.setAttribute('x1', -from[0]);
aLine.setAttribute('y1', from[1]);
aLine.setAttribute('x2', -to[0]);
aLine.setAttribute('y2', to[1]);
aLine.setAttribute('stroke', "#000000");
aLine.setAttribute('stroke-width', "5");
var s = document.createElementNS('http://www.w3.org/2000/svg', 'line');
s.setAttribute('x1', -from[0]);
s.setAttribute('y1', from[1]);
s.setAttribute('x2', -to[0]);
s.setAttribute('y2', to[1]);
s.setAttribute('stroke', "#000000");
s.setAttribute('stroke-width', "5");
s.setAttribute('stroke-linecap', "square");
vector_element.appendChild(aLine);
vector_element.appendChild(s);
reset();
}
this.draw_arc_c = function()
{
draw_arc_c();
}
draw_arc_c = function()
{
var s = document.createElementNS("http://www.w3.org/2000/svg", "path");
@ -160,6 +177,7 @@ function Dotgrid(width,height,grid_x,grid_y)
s.setAttribute('stroke', "#000000");
s.setAttribute('stroke-width', "5");
s.setAttribute('fill', "none");
s.setAttribute('stroke-linecap', "square");
vector_element.appendChild(s);
reset();
@ -167,18 +185,36 @@ function Dotgrid(width,height,grid_x,grid_y)
this.draw_arc_a = function()
{
draw_arc_a();
}
function draw_arc_a()
{
var s = document.createElementNS("http://www.w3.org/2000/svg", "path");
s.setAttribute("d","M"+(-from[0])+","+(from[1])+" A15,15 0 1,0 "+(-to[0])+","+(to[1])+"");
s.setAttribute('stroke', "#000000");
s.setAttribute('stroke-width', "5");
s.setAttribute('fill', "none");
s.setAttribute('stroke-linecap', "square");
vector_element.appendChild(s);
reset();
}
this.reset = function()
{
reset();
}
function reset()
{
from = null;
to = null;
this.cursor_from.style.left = -100;
this.cursor_from.style.top = -100;
this.cursor_to.style.left = -100;
this.cursor_to.style.top = -100;
cursor_from.style.left = -100;
cursor_from.style.top = -100;
cursor_to.style.left = -100;
cursor_to.style.top = -100;
}
// Normalizers

5
scripts/init.js
View File

@ -1,6 +1,9 @@
dotgrid = new Dotgrid(300,300,10,10);
dotgrid = new Dotgrid(300,300,20,20);
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);

16
scripts/keyboard.js Normal file
View File

@ -0,0 +1,16 @@
function Keyboard()
{
this.listen = function(event)
{
console.log(dotgrid);
console.log(event.keyCode);
switch (event.key || event.keyCode) {
case 65 : dotgrid.draw_arc_a(); break;
case 83 : dotgrid.draw_arc_c(); break;
case 68 : dotgrid.draw_line(); break;
case 70 : dotgrid.reset(); break;
}
}
}