From 452bcd0d4184f7868d02c0b35223ca11441beed7 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sat, 31 Dec 2016 10:18:01 -0700 Subject: [PATCH] Working copy --- index.html | 3 + links/main.css | 9 ++- scripts/dotgrid.js | 184 ++++++++++++++++++++++++++++++++++++++++++++- scripts/init.js | 8 +- 4 files changed, 199 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index fa13988..78703d3 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,9 @@ Dotgrid + + + diff --git a/links/main.css b/links/main.css index 6eba667..239dc81 100644 --- a/links/main.css +++ b/links/main.css @@ -1,3 +1,8 @@ -body { background:black; padding:50px;} +body { background:#eee; padding:50px;} -#dotgrid { background:red; margin:0px auto; border-radius:3px; } \ No newline at end of file +#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; } \ No newline at end of file diff --git a/scripts/dotgrid.js b/scripts/dotgrid.js index 6ff2238..df2d3b0 100644 --- a/scripts/dotgrid.js +++ b/scripts/dotgrid.js @@ -1,15 +1,197 @@ -function Dotgrid(width,height) +function Dotgrid(width,height,grid_x,grid_y) { this.width = width; this.height = height; + this.grid_x = grid_x; + this.grid_y = grid_y; this.element = null; + 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; + + this.button_line = null; + this.button_arc_c = null; + this.button_arc_a = null; + + var from = null; + var to = null; + var vector_element = null; + 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); + + // Markers + for (var x = this.grid_x - 1; x >= 0; x--) { + for (var y = this.grid_y - 1; y >= 0; y--) { + var marker = document.createElement("div"); + marker.setAttribute("class","marker"); + marker.style.left = x * this.grid_width + (this.grid_width/2); + marker.style.top = y * this.grid_height + (this.grid_height/2); + this.element.appendChild(marker); + } + } + + // Cursors + this.cursor = document.createElement("div"); + 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); + + this.cursor_to = document.createElement("div"); + this.cursor_to.id = "cursor_to"; + this.element.appendChild(this.cursor_to); + + // Vector + vector_element = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + vector_element.setAttribute("class","vector"); + vector_element.setAttribute("width",this.width+"px"); + vector_element.setAttribute("height",this.height+"px"); + 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") + + 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", this.draw_arc_a, false); } + else if (this.button_arc_a.attachEvent){ + this.button_arc_a.attachEvent('onclick', this.draw_arc_a); + } + } + + // Cursor + + + this.mouse_down = function(e) + { + var pos = this.position_in_grid(e.clientX,e.clientY); + pos = this.position_on_grid(pos[0],pos[1]); + + if(from === null){ this.set_from(pos); } + else if(to === null){ this.set_to(pos); } + else{ } + } + + this.mouse_move = function(e) + { + var pos = this.position_in_grid(e.clientX,e.clientY); + pos = this.position_on_grid(pos[0],pos[1]); + + this.cursor.style.left = -pos[0]; + this.cursor.style.top = pos[1]; + } + + this.mouse_up = function(e) + { + + } + + // Setters + + this.set_from = function(pos) + { + from = pos; + + this.cursor_from.style.left = -pos[0]; + this.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]; + + to = pos; + } + + // Draw + + + 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"); + + vector_element.appendChild(aLine); + + reset(); + } + + draw_arc_c = function() + { + var s = document.createElementNS("http://www.w3.org/2000/svg", "path"); + s.setAttribute("d","M"+(-from[0])+","+(from[1])+" A15,15 0 0,1 "+(-to[0])+","+(to[1])+""); + s.setAttribute('stroke', "#000000"); + s.setAttribute('stroke-width', "5"); + s.setAttribute('fill', "none"); + vector_element.appendChild(s); + + reset(); + } + + this.draw_arc_a = function() + { + + } + + 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; + + } + + // Normalizers + + this.position_in_grid = function(x,y) + { + return [(window.innerWidth/2) - (this.width/2) - x,y - 50]; + } + + this.position_on_grid = function(x,y) + { + x = parseInt(x/this.grid_width) * this.grid_width - (this.grid_width/2); + y = parseInt(y/this.grid_height) * this.grid_height - (this.grid_height/2); + return [x,y]; } } \ No newline at end of file diff --git a/scripts/init.js b/scripts/init.js index c90722b..38ca89a 100644 --- a/scripts/init.js +++ b/scripts/init.js @@ -1,2 +1,6 @@ -dotgrid = new Dotgrid(300,300); -dotgrid.install(); \ No newline at end of file +dotgrid = new Dotgrid(300,300,10,10); +dotgrid.install(); + +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); \ No newline at end of file