Added the delete option

This commit is contained in:
Devine Lu Linvega 2016-12-31 10:47:37 -07:00
parent 2b964af3af
commit 0be4b6d9bc
3 changed files with 17 additions and 45 deletions

View File

@ -5,4 +5,5 @@ body { background:#fff; padding:50px;}
#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; margin:0px auto; display:none;}
input { padding:2px 5px; border-radius:20px; margin:0px auto; display:none;}
.vector { position:relative; z-index:900; }

View File

@ -13,11 +13,6 @@ function Dotgrid(width,height,grid_x,grid_y)
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;
var vector_element = null;
@ -63,38 +58,6 @@ function Dotgrid(width,height,grid_x,grid_y)
vector_element.style.width = this.width;
vector_element.style.height = this.height;
this.element.appendChild(vector_element);
// Options
this.button_line = document.getElementById("line")
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); }
else if (this.button_line.attachEvent){
this.button_line.attachEvent('onclick', draw_line);
}
if (this.button_arc_c.addEventListener){
this.button_arc_c.addEventListener("click", draw_arc_c, false); }
else if (this.button_arc_c.attachEvent){
this.button_arc_c.attachEvent('onclick', draw_arc_c);
}
if (this.button_arc_a.addEventListener){
this.button_arc_a.addEventListener("click", draw_arc_a, false); }
else if (this.button_arc_a.attachEvent){
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);
}
}
// Cursor
@ -158,7 +121,7 @@ function Dotgrid(width,height,grid_x,grid_y)
s.setAttribute('y2', to[1]);
s.setAttribute('stroke', "#000000");
s.setAttribute('stroke-width', "5");
s.setAttribute('stroke-linecap', "square");
s.setAttribute('stroke-linecap', "round");
vector_element.appendChild(s);
@ -177,7 +140,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");
s.setAttribute('stroke-linecap', "round");
vector_element.appendChild(s);
reset();
@ -190,13 +153,12 @@ function Dotgrid(width,height,grid_x,grid_y)
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");
s.setAttribute('stroke-linecap', "round");
vector_element.appendChild(s);
reset();
@ -206,7 +168,7 @@ function Dotgrid(width,height,grid_x,grid_y)
{
reset();
}
function reset()
{
from = null;
@ -217,6 +179,16 @@ function Dotgrid(width,height,grid_x,grid_y)
cursor_to.style.top = -100;
}
this.erase = function()
{
erase();
}
function erase()
{
vector_element.removeChild(vector_element.lastChild);
}
// Normalizers
this.position_in_grid = function(x,y)

View File

@ -2,7 +2,6 @@ function Keyboard()
{
this.listen = function(event)
{
console.log(dotgrid);
console.log(event.keyCode);
switch (event.key || event.keyCode) {
@ -10,7 +9,7 @@ function Keyboard()
case 83 : dotgrid.draw_arc_c(); break;
case 68 : dotgrid.draw_line(); break;
case 70 : dotgrid.reset(); break;
case 71 : dotgrid.erase(); break;
}
}
}