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

Almost there

Browse Source
This commit is contained in:
Devine Lu Linvega
2017-11-05 14:52:05 +14:00
parent 6a4dae83ae
commit 6b8e08e41f
32 changed files with 580 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

328
scripts/dotgrid.js
View File

@@ -1,328 +0,0 @@
function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,linecap = "round", color = "#000000")
{
this.width = width;
this.height = height;
this.grid_x = grid_x;
this.grid_y = grid_y;
this.block_x = block_x;
this.block_y = block_y;
this.thickness = thickness;
this.linecap = linecap;
this.color = color;
this.element = null;
this.grid_width = this.width/this.grid_x;
this.grid_height = this.height/this.grid_y;
var cursor = null;
var cursor_from = null;
var cursor_to = null;
var cursor_end = null;
var from = null;
var to = null;
var end = null;
this.svg_el = null;
this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
this.segments = [];
this.interface = document.createElement("div");
this.interface.id = "interface";
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.interface);
// Markers
for (var x = this.grid_x; x >= 0; x--) {
for (var y = this.grid_y; y >= 0; y--) {
var marker = document.createElement("div");
marker.setAttribute("class",(x % this.block_x == 0 && y % this.block_y == 0 ? "marker block" : "marker"));
marker.style.left = parseInt(x * this.grid_width + (this.grid_width/2)) +5;
marker.style.top = parseInt(y * this.grid_height + (this.grid_height/2)) +5;
this.element.appendChild(marker);
}
}
// Cursors
this.cursor = document.createElement("div");
this.cursor.id = "cursor";
this.element.appendChild(this.cursor);
cursor_from = document.createElement("div");
cursor_from.id = "cursor_from";
this.element.appendChild(cursor_from);
cursor_to = document.createElement("div");
cursor_to.id = "cursor_to";
this.element.appendChild(cursor_to);
cursor_end = document.createElement("div");
cursor_end.id = "cursor_end";
this.element.appendChild(cursor_end);
// Vector
this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
this.svg_el.setAttribute("class","vector");
this.svg_el.setAttribute("width",this.width+"px");
this.svg_el.setAttribute("height",this.height+"px");
this.svg_el.setAttribute("xmlns","http://www.w3.org/2000/svg");
this.svg_el.setAttribute("baseProfile","full");
this.svg_el.setAttribute("version","1.1");
this.svg_el.style.width = this.width;
this.svg_el.style.height = this.height;
this.svg_el.style.stroke = this.color;
this.svg_el.style.strokeWidth = this.thickness;
this.svg_el.style.fill = "none";
this.svg_el.style.strokeLinecap = this.linecap;
this.element.appendChild(this.svg_el);
this.svg_el.appendChild(this.path);
}
// Cursor
this.mouse_down = function(e)
{
}
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)
{
var pos = this.position_in_grid(e.clientX,e.clientY);
pos = this.position_on_grid(pos[0],pos[1]);
pos = [pos[0]+10,pos[1]-10]
if(from === null){ this.set_from(pos); }
else if(to === null){ this.set_to(pos); }
else{ this.set_end(pos); }
this.draw();
}
// Setters
this.set_from = function(pos)
{
from = pos;
cursor_from.style.left = -pos[0] + 10;
cursor_from.style.top = pos[1] + 10;
}
this.set_to = function(pos)
{
cursor_to.style.left = -pos[0] + 10;
cursor_to.style.top = pos[1] + 10;
to = pos;
}
this.set_end = function(pos)
{
cursor_end.style.left = -pos[0] + 10;
cursor_end.style.top = pos[1] + 10;
end = pos;
}
this.mod_thickness = function(mod)
{
this.thickness += mod;
this.draw();
}
this.mod_linecap_index = 1;
this.mod_linecap = function(mod)
{
var a = ["butt","square","round"];
this.mod_linecap_index += 1;
this.linecap = a[this.mod_linecap_index % a.length];
this.draw();
}
this.mod_move = function(x,y)
{
if(!to && !end){
this.set_from([from[0]+(x*10),from[1]+(y*10)])
}
this.draw();
}
this.draw = function()
{
var d = "";
var prev = "";
for(id in this.segments){
var segment = this.segments[id];
d += segment.to_segment(prev)+" ";
prev = segment;
}
this.path.setAttribute("d",d);
this.svg_el.style.width = this.width;
this.svg_el.style.height = this.height;
this.svg_el.style.stroke = this.color;
this.svg_el.style.strokeLinecap = this.linecap;
this.svg_el.style.strokeWidth = this.thickness;
this.update_interface();
}
// Draw
this.add_line = function()
{
if(from === null || to === null){ return; }
var end_point = end ? new Pos(end[0] * -1,end[1]) : null;
this.segments.push(new Path_Line(new Pos(from[0] * -1,from[1]),new Pos(to[0] * -1,to[1]),end_point));
this.draw();
reset();
}
this.draw_arc = function(orientation)
{
if(from === null || to === null){ return; }
var end_point = end ? new Pos(end[0] * -1,end[1]) : null;
this.segments.push(new Path_Arc(new Pos(from[0] * -1,from[1]),new Pos(to[0] * -1,to[1]),orientation,end_point));
this.draw();
reset();
}
this.draw_bezier = function()
{
if(from === null || to === null){ return; }
this.segments.push(new Path_Bezier(new Pos(from[0] * -1,from[1]),new Pos(to[0] * -1,to[1]),new Pos(end[0] * -1,end[1])));
this.draw();
reset();
}
this.draw_dot = function()
{
var s = document.createElementNS("http://www.w3.org/2000/svg", "circle");
s.setAttribute("cx",-from[0]);
s.setAttribute("cy",from[1]);
s.setAttribute("r","2");
s.setAttribute("fill","black");
this.svg_el.appendChild(s);
reset();
}
this.draw_circle = function()
{
if(from === null || to === null){ return; }
var s = document.createElementNS("http://www.w3.org/2000/svg", "circle");
s.setAttribute("cx",-from[0]);
s.setAttribute("cy",from[1]);
s.setAttribute("r",(from[0] - to[0]));
this.svg_el.appendChild(s);
reset();
}
this.draw_rect = function()
{
if(from === null || to === null){ return; }
var s = document.createElementNS("http://www.w3.org/2000/svg", "rect");
s.setAttribute("x",-from[0]);
s.setAttribute("y",from[1]);
s.setAttribute("width",Math.abs(to[0]) - Math.abs(from[0]));
s.setAttribute("height",Math.abs(to[1]) - Math.abs(from[1]));
this.svg_el.appendChild(s);
reset();
}
this.reset = function()
{
reset();
}
function reset()
{
from = null;
to = null;
end = null;
cursor_from.style.left = -100;
cursor_from.style.top = -100;
cursor_to.style.left = -100;
cursor_to.style.top = -100;
cursor_end.style.left = -100;
cursor_end.style.top = -100;
}
this.erase = function()
{
this.reset();
this.segments.pop();
this.draw();
}
this.export = function()
{
var w = window.open('about:blank');
w.document.write("<title>Export</title>");
w.document.write("<body></body>");
w.document.body.innerText += this.svg_el.outerHTML;
}
this.update_interface = function()
{
var html = "";
html += "~"+this.thickness+" ";
html += "/"+this.linecap+" ";
if(from){ html += ">" }
if(to){ html += ">" }
if(end){ html += ">" }
html += " "
if(to){ html += "aA sS d f" }
if(end){ html += ">" }
this.interface.innerHTML = html;
}
// 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) + 5;
y = parseInt(y/this.grid_height) * this.grid_height + (this.grid_height/2) +5;
return [parseInt(x),parseInt(y)];
}
}

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

32
scripts/keyboard.js
View File

@@ -1,32 +0,0 @@
function Keyboard()
{
this.listen = function(event)
{
console.log(event.keyCode)
switch (event.keyCode) {
case 65 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break;
case 83 : dotgrid.draw_arc(event.shiftKey ? "1,0" : "0,0"); break;
case 68 : dotgrid.add_line(); break;
case 70 : dotgrid.draw_bezier(); break;
case 187 : dotgrid.mod_thickness(1); break;
case 189 : dotgrid.mod_thickness(-1); break;
case 191 : dotgrid.mod_linecap(1); break;
case 81 : dotgrid.reset(); break;
case 27 : dotgrid.reset(); break;
case 87 : dotgrid.erase(); break;
case 8 : dotgrid.erase(); break;
case 69 : dotgrid.export(); break;
case 90 : dotgrid.draw_dot(); break;
case 88 : dotgrid.draw_circle(); break;
case 67 : dotgrid.draw_rect(); break;
case 38 : dotgrid.mod_move(0,-1); break;
case 40 : dotgrid.mod_move(0,1); break;
case 37 : dotgrid.mod_move(1,0); break;
case 39 : dotgrid.mod_move(-1,0); break;
}
dotgrid.draw();
}
}

32
scripts/path_arc.js
View File

@@ -1,32 +0,0 @@
function Path_Arc(from,to,orientation,end)
{
this.from = from;
this.to = to;
this.orientation = orientation;
this.end = end;
this.to_segment = function(prev)
{
var html = ""
if(!prev){
html += "M"+this.from+" ";
}
else if(prev){
if(prev.to.x != this.from.x && prev.to.y != this.from.y && !prev.end){
html += "M"+this.from+" ";
}
else if(prev.end && prev.end.x != this.from.x && prev.end.y != this.from.y){
html += "M"+this.from+" ";
}
}
html += "A"+this.to.sub(this.from)+" 0 "+orientation+" "+this.to+" ";
if(this.end){
html += "A"+this.end.sub(this.to)+" 0 "+orientation+" "+this.end+" ";
}
return html
}
}

25
scripts/path_bezier.js
View File

@@ -1,25 +0,0 @@
function Path_Bezier(from,to,end)
{
this.from = from;
this.to = to;
this.end = end;
this.to_segment = function(prev)
{
var html = ""
if(!prev){
html += "M"+this.from+" ";
}
else if(prev){
if(prev.to.x != this.from.x && prev.to.y != this.from.y && !prev.end){
html += "M"+this.from+" ";
}
else if(prev.end && prev.end.x != this.from.x && prev.end.y != this.from.y){
html += "M"+this.from+" ";
}
}
return html += "Q"+this.to+" "+this.end+" "
}
}

31
scripts/path_line.js
View File

@@ -1,31 +0,0 @@
function Path_Line(from,to,end = null)
{
this.from = from;
this.to = to;
this.end = end;
this.to_segment = function(prev)
{
var html = ""
if(!prev){
html += "M"+this.from+" ";
}
else if(prev){
if(prev.to.x != this.from.x && prev.to.y != this.from.y && !prev.end){
html += "M"+this.from+" ";
}
else if(prev.end && prev.end.x != this.from.x && prev.end.y != this.from.y){
html += "M"+this.from+" ";
}
}
html += "L"+this.to+" "
if(this.end){
html += "L"+this.end+" "
}
return html
}
}

15
scripts/pos.js
View File

@@ -1,15 +0,0 @@
function Pos(x,y)
{
this.x = x;
this.y = y;
this.toString = function()
{
return x+","+y;
}
this.sub = function(pos2)
{
return new Pos(this.x - pos2.x,this.y - pos2.y)
}
}