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

Progress on implementing tools

Browse Source
This commit is contained in:
Devine Lu Linvega 2018-02-06 16:27:48 +13:00
parent 127d36d821
commit 76ebb3ecad
4 changed files with 50 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
sources/scripts/dotgrid.js
View File

@ -128,8 +128,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.controller.add("default","Edit","Insert",() => { dotgrid.add_point(); },"I");
this.controller.add("default","Edit","Copy",() => { document.execCommand('copy'); },"CmdOrCtrl+C");
this.controller.add("default","Edit","Paste",() => { document.execCommand('paste'); },"CmdOrCtrl+V");
this.controller.add("default","Edit","Undo",() => { dotgrid.undo(); },"CmdOrCtrl+Z");
this.controller.add("default","Edit","Redo",() => { dotgrid.redo(); },"CmdOrCtrl+Shift+Z");
this.controller.add("default","Edit","Undo",() => { dotgrid.tool.undo(); },"CmdOrCtrl+Z");
this.controller.add("default","Edit","Redo",() => { dotgrid.tool.redo(); },"CmdOrCtrl+Shift+Z");
this.controller.add("default","Edit","Delete",() => { dotgrid.tool.remove_segment(); },"Backspace");
this.controller.add("default","Edit","Move Up",() => { dotgrid.mod_move(new Pos(0,-15)); },"Up");
this.controller.add("default","Edit","Move Down",() => { dotgrid.mod_move(new Pos(0,15)); },"Down");
@ -138,10 +138,10 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.controller.add("default","Edit","Deselect",() => { dotgrid.tool.clear(); },"Esc");
this.controller.add("default","Stroke","Line",() => { dotgrid.tool.cast("line"); },"A");
this.controller.add("default","Stroke","Arc",() => { dotgrid.draw_arc("0,1"); },"S");
this.controller.add("default","Stroke","Arc Rev",() => { dotgrid.draw_arc("0,0"); },"D");
this.controller.add("default","Stroke","Bezier",() => { dotgrid.draw_bezier(); },"F");
this.controller.add("default","Stroke","Connect",() => { dotgrid.draw_close(); },"Z");
this.controller.add("default","Stroke","Arc",() => { dotgrid.tool.cast("arc_c"); },"S"); // 0,1
this.controller.add("default","Stroke","Arc Rev",() => { dotgrid.tool.cast("arc_r")},"D"); // 0,0
this.controller.add("default","Stroke","Bezier",() => { dotgrid.tool.cast("bezier") },"F");
this.controller.add("default","Stroke","Connect",() => { dotgrid.tool.cast("close") },"Z");
this.controller.add("default","Effect","Thicker",() => { dotgrid.mod_thickness(1) },"}");
this.controller.add("default","Effect","Thinner",() => { dotgrid.mod_thickness(-1) },"{");
@ -176,6 +176,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.new = function()
{
this.history.push(this.tool.layers);
dotgrid.clear();
}
@ -213,82 +214,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
// EDIT
this.undo = function()
{
// this.segments = this.history.prev();
this.draw();
}
this.redo = function()
{
// this.segments = this.history.next();
this.draw();
}
this.delete_at = function(pos)
{
// 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);
this.draw();
}
// STROKE
this.draw_arc = function(orientation = "0,0")
{
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_Arc(from,to,orientation,end));
dotgrid.history.push(dotgrid.segments);
dotgrid.reset();
dotgrid.draw();
dotgrid.reset();
}
this.draw_bezier = function()
{
if(from === null || to === null || end === 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 = new Pos(end.x * -1,end.y).sub(dotgrid.offset)
dotgrid.segments.push(new Path_Bezier(from,to,end));
dotgrid.history.push(dotgrid.segments);
dotgrid.reset();
dotgrid.draw();
dotgrid.reset();
}
this.draw_close = function()
{
if(dotgrid.segments.length == 0){ return; }
if(dotgrid.segments[dotgrid.segments.length-1].name == "close"){ return; }
dotgrid.segments.push(new Path_Close());
dotgrid.history.push(dotgrid.segments);
dotgrid.reset();
dotgrid.draw();
dotgrid.reset();
}
// Cursor
this.translation = null;
@ -601,7 +531,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.reset();
this.segments = [];
this.thickness = 10
this.linecap = "square"
this.linecap = "round"
this.linejoin = "round"
this.color = "#000000"
this.draw();

2
sources/scripts/guide.js
View File

@ -92,7 +92,7 @@ function Guide()
var ctx = this.el.getContext('2d');
ctx.beginPath();
ctx.arc((pos.x * 2)+30, (pos.y * 2)+30, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = "red";
ctx.fillStyle = dotgrid.theme.active.f_med;
ctx.fill();
ctx.closePath();
}

8
sources/scripts/interface.js
View File

@ -37,10 +37,10 @@ function Interface()
{
let prev = dotgrid.segments[dotgrid.segments.length-1]
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("line").className.baseVal = !dotgrid.tool.can_cast("line") ? "icon inactive" : "icon";
document.getElementById("arc_c").className.baseVal = !dotgrid.tool.can_cast("arc_c") ? "icon inactive" : "icon";
document.getElementById("arc_r").className.baseVal = !dotgrid.tool.can_cast("arc_r") ? "icon inactive" : "icon";
document.getElementById("bezier").className.baseVal = !dotgrid.tool.can_cast("bezier") ? "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.tool.layer().length < 1 ? "icon inactive" : "icon";

40
sources/scripts/tool.js
View File

@ -6,7 +6,6 @@ function Tool()
this.layer = function()
{
console.log(this.layers)
if(!this.layers[this.index]){
this.layers[this.index] = [];
}
@ -23,20 +22,26 @@ function Tool()
this.add_vertex = function(pos)
{
this.verteces.push(pos);
console.log(this.verteces);
}
this.cast = function(type)
{
if(!this.layer()){ this.layers[this.index] = []; }
if(!this.can_cast(type)){ console.log("Not enough verteces"); return; }
this.layer().push({type:type,verteces:this.verteces.slice()})
this.clear();
dotgrid.draw();
dotgrid.history.push(this.layers);
console.log(`Casted ${type}+${this.layer().length}`);
}
this.can_cast = function(type)
{
return this.verteces.length >= {line:2,arc_c:2,arc_r:2,bezier:3}[type];
}
this.path = function()
{
var html = "";
@ -52,13 +57,27 @@ function Tool()
{
var type = segment.type;
var verteces = segment.verteces;
var html = `M${verteces[0].x},${verteces[0].y} `;
var html = ``;
var skip = 0;
for(id in verteces){
if(id == 0){ continue; }
if(skip > 0){ skip -= 1; continue; }
if(id == 0){ html += `M${verteces[0].x},${verteces[0].y} `; continue; }
var vertex = verteces[id];
var next = verteces[parseInt(id)+1]
if(type == "line"){
html += `L${vertex.x},${vertex.y} `;
}
else if(type == "arc_c" && next){
html += `A${next.x - vertex.x},${next.y - vertex.y} 0 0,1 ${next.x},${next.y} `;
skip = 1
}
else if(type == "arc_r" && next){
html += `A${next.x - vertex.x},${next.y - vertex.y} 0 0,0 ${next.x},${next.y} `;
skip = 1
}
}
return html
}
@ -88,6 +107,7 @@ function Tool()
}
}
}
dotgrid.history.push(this.layers);
dotgrid.draw();
}
@ -96,4 +116,16 @@ function Tool()
this.verteces = [];
dotgrid.draw();
}
this.undo = function()
{
this.layers = dotgrid.history.prev();
dotgrid.draw();
}
this.redo = function()
{
this.layers = dotgrid.history.next();
dotgrid.draw();
}
}