From 0be4b6d9bc3d78a508d5592755c27fc3f80ff975 Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Sat, 31 Dec 2016 10:47:37 -0700
Subject: [PATCH] Added the delete option

---
 links/main.css      |  3 ++-
 scripts/dotgrid.js  | 56 ++++++++++++---------------------------------
 scripts/keyboard.js |  3 +--
 3 files changed, 17 insertions(+), 45 deletions(-)

diff --git a/links/main.css b/links/main.css
index eceed16..8772ba9 100644
--- a/links/main.css
+++ b/links/main.css
@@ -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;}
\ No newline at end of file
+input { padding:2px 5px; border-radius:20px; margin:0px auto; display:none;}
+.vector { position:relative; z-index:900; }
\ No newline at end of file
diff --git a/scripts/dotgrid.js b/scripts/dotgrid.js
index 32c8171..8d1de76 100644
--- a/scripts/dotgrid.js
+++ b/scripts/dotgrid.js
@@ -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)
diff --git a/scripts/keyboard.js b/scripts/keyboard.js
index ff740bf..2e9d71a 100644
--- a/scripts/keyboard.js
+++ b/scripts/keyboard.js
@@ -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;
     }
   }
 }