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

Progress on cleanup

Browse Source
This commit is contained in:
Devine Lu Linvega 2018-02-06 14:14:23 +13:00
parent 5315577a9b
commit d3b7b113b1
5 changed files with 65 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
sources/index.html
View File

@ -5,7 +5,6 @@
<script type="text/javascript" src="scripts/lib/history.js"></script>
<script type="text/javascript" src="scripts/pos.js"></script>
<script type="text/javascript" src="scripts/path_line.js"></script>
<script type="text/javascript" src="scripts/path_arc.js"></script>
<script type="text/javascript" src="scripts/path_bezier.js"></script>
<script type="text/javascript" src="scripts/path_close.js"></script>

134
sources/scripts/dotgrid.js
View File

@ -36,13 +36,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
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.mirror_el = null;
@ -75,18 +68,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.cursor_y.className = "fl"
this.element.appendChild(this.cursor_y);
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);
this.offset_el = document.createElementNS("http://www.w3.org/2000/svg", "g");
this.mirror_el = document.createElementNS("http://www.w3.org/2000/svg", "g");
this.mirror_path = document.createElementNS("http://www.w3.org/2000/svg", "path");
@ -234,56 +215,34 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.undo = function()
{
if(from || to || end){
dotgrid.reset();
dotgrid.draw();
return;
}
this.segments = this.history.prev();
// this.segments = this.history.prev();
this.draw();
}
this.redo = function()
{
this.segments = this.history.next();
// this.segments = this.history.next();
this.draw();
}
this.delete_at = function(pos)
{
var segs = [];
// var segs = [];
for(id in this.segments){
var s = this.segments[id];
if(s.from && s.from.is_equal(pos)){ continue; }
if(s.to && s.to.is_equal(pos)){ continue; }
if(s.end && s.end.is_equal(pos)){ continue; }
segs.push(s);
}
this.segments = segs;
dotgrid.history.push(dotgrid.segments);
// for(id in this.segments){
// var s = this.segments[id];
// if(s.from && s.from.is_equal(pos)){ continue; }
// if(s.to && s.to.is_equal(pos)){ continue; }
// if(s.end && s.end.is_equal(pos)){ continue; }
// segs.push(s);
// }
// this.segments = segs;
// dotgrid.history.push(dotgrid.segments);
this.draw();
}
// STROKE
this.draw_line = function()
{
if(from === null || to === null){ return; }
to = new Pos(to.x * -1, to.y).sub(dotgrid.offset)
from = new Pos(from.x * -1,from.y).sub(dotgrid.offset)
end = end ? new Pos(end.x * -1,end.y).sub(dotgrid.offset) : null;
dotgrid.segments.push(new Path_Line(from,to,end));
dotgrid.history.push(dotgrid.segments);
dotgrid.reset();
dotgrid.draw();
dotgrid.reset();
}
this.draw_arc = function(orientation = "0,0")
{
if(from === null || to === null){ return; }
@ -346,7 +305,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
if(!o){ return; }
if(o == "line"){ this.draw_line(); }
if(o == "line"){ this.tool.cast("line"); }
if(o == "arc_c"){ this.draw_arc("0,1"); }
if(o == "arc_r"){ this.draw_arc("0,0"); }
if(o == "bezier"){ this.draw_bezier(); }
@ -437,26 +396,26 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.preview = function(operation)
{
if(from && to && operation == "line"){
var d = new Path_Line(from.mirror(),to.mirror(),end ? end.mirror() : null).to_segment();
this.preview_el.innerHTML = "<path d='"+d+"'></path>"
return;
}
else if(from && to && operation == "arc_c"){
var d = new Path_Arc(from.mirror(),to.mirror(),"0,1",end ? end.mirror() : null).to_segment();
this.preview_el.innerHTML = "<path d='"+d+"'></path>"
return;
}
else if(from && to && operation == "arc_r"){
var d = new Path_Arc(from.mirror(),to.mirror(),"0,0",end ? end.mirror() : null).to_segment();
this.preview_el.innerHTML = "<path d='"+d+"'></path>"
return;
}
else if(from && to && operation == "bezier"){
var d = new Path_Bezier(from.mirror(),to.mirror(),end ? end.mirror() : null).to_segment();
this.preview_el.innerHTML = "<path d='"+d+"'></path>"
return;
}
// if(from && to && operation == "line"){
// var d = new Path_Line(from.mirror(),to.mirror(),end ? end.mirror() : null).to_segment();
// this.preview_el.innerHTML = "<path d='"+d+"'></path>"
// return;
// }
// else if(from && to && operation == "arc_c"){
// var d = new Path_Arc(from.mirror(),to.mirror(),"0,1",end ? end.mirror() : null).to_segment();
// this.preview_el.innerHTML = "<path d='"+d+"'></path>"
// return;
// }
// else if(from && to && operation == "arc_r"){
// var d = new Path_Arc(from.mirror(),to.mirror(),"0,0",end ? end.mirror() : null).to_segment();
// this.preview_el.innerHTML = "<path d='"+d+"'></path>"
// return;
// }
// else if(from && to && operation == "bezier"){
// var d = new Path_Bezier(from.mirror(),to.mirror(),end ? end.mirror() : null).to_segment();
// this.preview_el.innerHTML = "<path d='"+d+"'></path>"
// return;
// }
this.preview_el.innerHTML = "";
}
@ -633,15 +592,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.reset = function()
{
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;
console.log("TODO")
}
this.clear = function()
@ -723,23 +674,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
}
return new Pos(x,y);
}
// To Clean
this.from = function()
{
return from;
}
this.to = function()
{
return to;
}
this.end = function()
{
return end;
}
}
window.addEventListener('resize', function(e)

22
sources/scripts/interface.js
View File

@ -25,7 +25,7 @@ function Interface()
["export","export","M150,50 L50,150 L150,250 L250,150 L150,50 Z"]
]
for(id in tools){
var tool = tools[id];
html += `<svg id="${tool[0]}" ar="${tool[0]}" title="${tool[1]}" viewBox="0 0 300 300" class="icon" style="${tool[3]}"><path class="icon_path" d="${tool[2]}" stroke-linecap: round; stroke-width="12px" fill="none" /><rect ar="${tool[0]}" width="300" height="300" opacity="0"><title>${tool[1]}</title></rect></svg>`
@ -37,19 +37,19 @@ function Interface()
{
let prev = dotgrid.segments[dotgrid.segments.length-1]
document.getElementById("line").className.baseVal = !dotgrid.from() || !dotgrid.to() ? "icon inactive" : "icon";
document.getElementById("arc_c").className.baseVal = !dotgrid.from() || !dotgrid.to() ? "icon inactive" : "icon";
document.getElementById("arc_r").className.baseVal = !dotgrid.from() || !dotgrid.to() ? "icon inactive" : "icon";
document.getElementById("bezier").className.baseVal = !dotgrid.from() || !dotgrid.to() || !dotgrid.end() ? "icon inactive" : "icon";
document.getElementById("line").className.baseVal = dotgrid.tool.verteces.length < 2 ? "icon inactive" : "icon";
document.getElementById("arc_c").className.baseVal = dotgrid.tool.verteces.length < 2 ? "icon inactive" : "icon";
document.getElementById("arc_r").className.baseVal = dotgrid.tool.verteces.length < 2 ? "icon inactive" : "icon";
document.getElementById("bezier").className.baseVal = dotgrid.tool.verteces.length < 3 ? "icon inactive" : "icon";
document.getElementById("close").className.baseVal = dotgrid.segments.length < 1 || (prev && prev.name == "close") ? "icon inactive" : "icon";
document.getElementById("thickness").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("linecap").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("linejoin").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("mirror").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("fill").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("thickness").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon";
document.getElementById("linecap").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon";
document.getElementById("linejoin").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon";
document.getElementById("mirror").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon";
document.getElementById("fill").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon";
document.getElementById("export").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
document.getElementById("export").className.baseVal = dotgrid.tool.layer().length < 1 ? "icon inactive" : "icon";
}
this.update_size = function()

47
sources/scripts/path_line.js
View File

@ -1,47 +0,0 @@
function Path_Line(from,to,end = null)
{
this.__serialized_name__ = "Path_Line";
this.name = "line";
this.from = from;
this.to = to;
this.end = end;
this.to_segment = function(prev)
{
var html = ""
if(!prev || (!prev.to && !prev.end)){
html += "M"+this.from.scale(dotgrid.scale)+" ";
}
else if(prev){
if(prev.end){
if(!prev.end.is_equal(this.from.scale(dotgrid.scale))){
html += "M"+this.from.scale(dotgrid.scale)+" ";
}
}
else if(prev.to){
if(!prev.to.is_equal(this.from.scale(dotgrid.scale))){
html += "M"+this.from.scale(dotgrid.scale)+" ";
}
}
}
html += "L"+this.to.scale(dotgrid.scale)+" "
if(this.end){
html += "L"+this.end.scale(dotgrid.scale)+" "
}
return html
}
this.handles = function()
{
var a = [];
if(this.from){ a.push(this.from); }
if(this.to){ a.push(this.to); }
if(this.end){ a.push(this.end); }
return a;
}
}

31
sources/scripts/tool.js
View File

@ -1,12 +1,21 @@
function Tool()
{
this.layer = 0;
this.index = 0;
this.layers = [];
this.verteces = [];
this.layer = function()
{
console.log(this.layers)
if(!this.layers[this.index]){
this.layers[this.index] = [];
}
return this.layers[this.index];
}
this.remove_segment = function()
{
this.layers[this.layer].pop();
this.layer().pop();
this.clear();
dotgrid.draw();
}
@ -19,21 +28,21 @@ function Tool()
this.cast = function(type)
{
if(!this.layers[this.layer]){ this.layers[this.layer] = []; }
if(!this.layer()){ this.layers[this.index] = []; }
this.layers[this.layer].push({type:type,verteces:this.verteces.slice()})
this.layer().push({type:type,verteces:this.verteces.slice()})
this.clear();
dotgrid.draw();
console.log(`Casted ${type}+${this.layers[this.layer].length}`);
console.log(`Casted ${type}+${this.layer().length}`);
}
this.path = function()
{
var html = "";
for(id in this.layers[this.layer]){
var segment = this.layers[this.layer][id];
for(id in this.layer()){
var segment = this.layer()[id];
html += this.render(segment);
}
return html
@ -56,8 +65,8 @@ function Tool()
this.vertex_at = function(pos)
{
for(segment_id in this.layers[this.layer]){
var segment = this.layers[this.layer][segment_id];
for(segment_id in this.layer()){
var segment = this.layer()[segment_id];
for(vertex_id in segment.verteces){
var vertex = segment.verteces[vertex_id];
if(vertex.x == Math.abs(pos.x) && vertex.y == Math.abs(pos.y)){
@ -70,8 +79,8 @@ function Tool()
this.translate = function(a,b)
{
for(segment_id in this.layers[this.layer]){
var segment = this.layers[this.layer][segment_id];
for(segment_id in this.layer()){
var segment = this.layer()[segment_id];
for(vertex_id in segment.verteces){
var vertex = segment.verteces[vertex_id];
if(vertex.x == Math.abs(a.x) && vertex.y == Math.abs(a.y)){